seaislee1209andClaude Opus 4.8
352f99d479
当年只对了 account/team 两页就卡住,真因两个: - compare-all.mjs designRoot 写死成原开发者 Mac 路径 → 本机找不到 HTML 稿,改 repoRoot 自适配 - compare-page.mjs preparePage 对 file:// 设计稿也注入 token(file:// origin=null)→ 崩, 限定 token 只对 http 目标注入(登录后页面如 dashboard 当年对不了的根因) 全量 28 页 pixelmatch:22 优秀(<2%)+ 3 良好(2-5%);3 个大 diff 均为有意偏离 (login/register 认证去邮箱)或真实数据(dashboard 修正后 6.38%),非回归。 + _shot-extract-flow.mjs:提取新流程无头走查脚本。 报告:docs/todo/页面还原-截图对比收尾-2026-06-19.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3.0 KiB
3.0 KiB
页面还原 · 截图对比收尾(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、项目名等),非回归。
待办(若要进一步收窄良好档)
- messages 2.85% / team 2.12% / model-photo-demo-a 2.21%:可逐页看
output/<page>.diff.png红块,多为间距/字号/真实数据微差;非阻塞,按需精修。