Files

T

seaislee1209andClaude Opus 4.8 8fc3870fa3 docs(qa): 还原对比报告补良好档核查结论 + 登录页修复记录

良好档(messages/team/model-photo-demo-a 2-3%)逐页核 diff:结构全对齐、仅文字泛红,
= 真实数据 + 字体抗锯齿残差,无真布局缺口,无需精修。
+ 记录本轮登录/注册页修复(按钮丢失 / 黑块等高 / 品牌文案重梳)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-19 19:16:40 +08:00

3.7 KiB

Raw Permalink Blame History

页面还原 · 截图对比收尾(pixelmatch)· 2026-06-19

配套 UI还原对比报告-AirShelf-2026-06-19.md。当年只出了文字报告 + 对了 account/team 两页; 这次把 React 实现 ↔ HTML 设计稿两边截图 + pixelmatch 全量 28 页跑完收尾。

当年没收尾的两个真因(已修)

Mac 死路径:compare-all.mjs 里 designRoot 写死成原开发者 Mac 路径 file:///Users/maidong/... —— 本机(Windows)找不到 HTML 稿。已改为 repoRoot 自适配。
file:// + token 崩溃:compare-page.mjs 的 preparePage 对 file:// 设计稿也尝试 new URL(url).origin(file:// 的 origin = null)→ 注入 token 时崩。已限定 token 注入只对 http 目标做。这是登录后页面(如 dashboard)当年对不了的根因。

跑法

工具:core/qa/visual-parity/compare-all.mjs(playwright + pixelmatch),视口 1440×900。
设计稿(design):电商AI平台/<page>.html(file://)。
实现(implementation):React http://127.0.0.1:5173/exact/<page>.html(像素复刻路由);login/register/dashboard 用真应用路由。
产物:core/qa/visual-parity/output/<page>.{design,implementation,diff}.png + <page>.report.json + 汇总 all.report.json。
复跑:cd core/qa/visual-parity && node compare-all.mjs(可 --only <名> 单跑)。

结果(diff 越小越接近设计稿)

档位	页数	页
✅ 优秀 <2%	22	settings(4 段)·pipeline(5 段)·library·account·products·products-create-drawer·product-detail·projects·projects-new·asset-factory·image-optimize·model-photo·model-photo-demo-b·platform-cover
🟡 良好 2–5%	3	team 2.12% · model-photo-demo-a 2.21% · messages 2.85%
🟠 有意偏离/真数据	3	login 11.5% · register 14.0%(认证去邮箱)· dashboard 6.38%(真实数据,修 token bug 后)

总评:22 优秀 + 3 良好 = 25/28 高度还原;3 个偏离均为设计决策/真实数据,非回归;0 跑失败。 ~1–2% 的残差是字体渲染 + 真实数据(非 mock)造成,属可接受。

3 个大 diff = 有意偏离 / 真实数据,非回归(均看截图核实)

login 11.5% / register 14.0%:认证定调用户名 + 密码 + 邀请码,去掉邮箱(有意偏离 V1 邮箱设计稿,见 CLAUDE.md「认证/账号模型」)。截图已确认:登录页用「用户名」字段;注册页是「团队名 / 用户名 / 密码 / 邀请码」完整邀请制表单、无邮箱。与设计稿差异是设计决策,不修。
dashboard:修 token bug 前 19.5%(假性,被踢回登录页)→ 带 token 走根路由重跑后 6.38%。截图已确认真工作台渲染(KPI/最近项目/余额/快捷入口),6.38% 是真实数据 vs 静态 mock 数(项目数、余额 ¥1111、项目名等),非回归。

良好档(2–5%)已核:结构对齐,无需精修

逐页看 output/<page>.diff.png:messages 2.85% / team 2.12% / model-photo-demo-a 2.21% 三页,结构边框 / 侧栏 / 卡片框全不泛红(完全对齐),只有文字泛红 —— 是真实数据(余额 / 项目名 / 时间戳)+ 字体抗锯齿的固有残差,没有真的间距 / 布局缺口。已是还原到位状态,不该为凑 diff 去动真数据 / 字体。

本轮额外修(用户看登录截图后反馈)

登录页登录按钮丢失(.auth-submit-zone 被当 flex 第三列挤出)→ 移进表单,按钮恢复。
登录/注册左黑块比右栏矮一截(.auth-brand 的 height:100% 在 height:auto 的 wrap 下解析不出、退出 stretch)→ 删 height:100%,靠 align-self:stretch 等高(实测黑块=表单=600px)。
登录/注册左侧文案重梳:删功能罗列 / 流程箭头,改干净品牌短句(守 design.md 克制调性)。

3.7 KiB Raw Permalink Blame History Unescape Escape