Files
ttstd-infinite-canvas/docs/design/admin-ui-visual-regression-baseline.md

4.6 KiB
Raw Blame History

管理后台 PC 视觉回归基线

1. 适用范围

本基线只覆盖管理后台 PC 端,不扩展移动端设计。验证必须使用已登录管理员会话,不保存配置、不执行停用、删除、调账、生成、恢复任务或外部连接验证等写操作。

固定覆盖两组 CSS 视口:

  • 亮色:1600 × 1000,用于检查宽屏主内容是否铺满、卡片和表格是否出现异常右侧空白。
  • 暗色:1278 × 900,用于检查较窄 PC 下侧栏、操作栏、表格滚动和亮暗层级。
  • 断点补充:涉及设置页操作栏时,在 1098px 宽度确认纵向回退没有挤压或横向溢出。

浏览器缩放不等于 CSS 视口。验收记录必须以页面的 window.innerWidth / window.innerHeight 为准,不能只记录浏览器窗口外框尺寸。

2. 固定入口

分组 路由 页面标题
概览 /admin 数据概览
平台资源 /admin/users 用户管理
平台资源 /admin/channels 系统渠道
平台资源 /admin/plugins 插件管理
平台资源 /admin/prompt-templates 提示词模板
运营 /admin/announcements 系统公告
运营 /admin/credit-operations 积分运营
运营 /admin/redemption-codes 兑换码
运营 /admin/logs 请求明细
系统配置 /admin/settings/features 功能开放
系统配置 /admin/settings/drawing-engine 绘图工具
系统配置 /admin/settings/runtime-policy 资源与策略
系统配置 /admin/settings/access 登录与注册
系统配置 /admin/settings/email 邮件服务
系统配置 /admin/settings/storage 存储服务
系统配置 /admin/settings/ark-private-assets 方舟素材库
系统配置 /admin/settings/response-interception 模型响应拦截
系统配置 /admin/settings/third-party 第三方参数配置

3. 每页通过条件

每个入口必须同时满足:

  1. 页面 h1 与表中标题一致,没有落入 404、登录页或持续加载态。
  2. document.documentElement.scrollWidth - clientWidth 的绝对值不大于 1px;宽表只能在自身滚动容器内滚动。
  3. .admin-page-frame 右边界与 CSS 视口右边界差值不大于 1px,主内容背景不能在右侧提前结束或形成大块空白。
  4. 页头、同步操作栏、概览区、业务卡片、表格、分页和页面底部安全间距层级清楚;亮暗主题下文字、边框、选中态和禁用态可辨认。
  5. 展开侧栏分组归属明确;收起态只显示图标,当前项仍可辨认,悬浮提示按文案自适应且保持强对比。
  6. 控制台没有来自应用页面的 warning 或 error。浏览器扩展日志、Vite 连接信息和 React 开发提示不计为应用错误。
  7. 不通过修改浏览器缩放、隐藏侧栏或关闭数据列来掩盖布局问题;表格自身的横向滚动属于保留行为。

4. 交互抽查

全入口结构巡检后,至少抽查以下交互:

  • 右上角主题切换:动画中段不闪白、不出现旧主题表面,结束后按钮语义与主题一致。
  • 侧栏展开/收起:主内容立即重排且无空白,边界按钮不被分隔线穿透;暗色提示文字清楚。
  • 列表页:搜索、筛选、重置、列设置、行操作和底部分页对齐;只有一个操作时不收进“更多”。
  • 设置页:待保存状态、撤销、刷新、核对和最终保存层级一致;有草稿时刷新和后台导航保护有效。
  • 抽屉与弹窗:宽度符合业务内容,标题、滚动正文和固定底栏分层;Tab 焦点不逃出浮层,关闭后回到触发入口。

5. 当前基线

2026-08-28 完成首次固定基线:18 个入口在亮色 1600 × 1000 与暗色 1278 × 900 下标题全部匹配,文档级横向溢出全部为 0;亮色主内容宽度为 1376px、暗色较窄 PC 主内容宽度约 1054.4px,页面框架均延伸到视口右边界。写操作均未触发。

真实账号、业务数据和密钥不得作为截图基线提交到项目。需要截图比对时使用脱敏测试数据并保存在受控测试产物目录,不写入本变更记录。