From 890cb9ab6756a7a7b60a21c5b7e1864a824c5ccb Mon Sep 17 00:00:00 2001 From: zyc <1439655764@qq.com> Date: Wed, 10 Jun 2026 09:41:30 +0800 Subject: [PATCH] chore(core/qa): function-audit toolchain + parity/audit reports + pixel-perfect skill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - qa/function-audit: playwright 行为审计工具(audit.mjs/verify-modals.mjs/pages.json) + 18 页审计产出(*.audit.md/json、summary、运行日志) - qa/visual-parity: 调试/测量辅助脚本(_dbg*.mjs/_measure.mjs/_off.mjs) - core/还原度核对报告.md: 18 页 pixelmatch 核对结果(含 vite 代理陈旧坑记录) - core/还原与接口待办.md: 逐页还原度/真实数据/交互接入待办总表 - .claude/skills/pixel-perfect-react: 像素级还原 React 的 SKILL 文档 - frontend/public/_devlogin.html: 临时本地登录辅助页(可删) Co-Authored-By: Claude Fable 5 --- .claude/skills/pixel-perfect-react/SKILL.md | 115 +++ core/frontend/public/_devlogin.html | 1 + core/qa/function-audit/README.md | 42 + core/qa/function-audit/audit.mjs | 479 +++++++++++ core/qa/function-audit/output/_final.log | 45 ++ core/qa/function-audit/output/_full2.log | 45 ++ core/qa/function-audit/output/_full_run.log | 45 ++ core/qa/function-audit/output/_p1.log | 21 + core/qa/function-audit/output/_p2.log | 21 + core/qa/function-audit/output/_p3.log | 21 + core/qa/function-audit/output/_q1.log | 21 + core/qa/function-audit/output/_q2.log | 21 + core/qa/function-audit/output/_q3.log | 21 + core/qa/function-audit/output/_recheck.log | 15 + core/qa/function-audit/output/_recheck2.log | 21 + core/qa/function-audit/output/_recheck3.log | 15 + .../function-audit/output/account.audit.json | 479 +++++++++++ .../qa/function-audit/output/account.audit.md | 18 + .../output/asset-factory.audit.json | 460 +++++++++++ .../output/asset-factory.audit.md | 13 + .../output/dashboard.audit.json | 490 ++++++++++++ .../function-audit/output/dashboard.audit.md | 29 + .../output/image-optimize.audit.json | 464 +++++++++++ .../output/image-optimize.audit.md | 21 + .../function-audit/output/library.audit.json | 686 ++++++++++++++++ .../qa/function-audit/output/library.audit.md | 15 + .../function-audit/output/messages.audit.json | 499 ++++++++++++ .../function-audit/output/messages.audit.md | 20 + .../output/model-photo-demo-a.audit.json | 712 +++++++++++++++++ .../output/model-photo-demo-a.audit.md | 17 + .../output/model-photo-demo-b.audit.json | 755 ++++++++++++++++++ .../output/model-photo-demo-b.audit.md | 14 + .../output/model-photo.audit.json | 667 ++++++++++++++++ .../output/model-photo.audit.md | 16 + .../function-audit/output/pipeline.audit.json | 533 +++++++++++++ .../function-audit/output/pipeline.audit.md | 14 + .../output/platform-cover.audit.json | 705 ++++++++++++++++ .../output/platform-cover.audit.md | 20 + .../output/product-create.audit.json | 589 ++++++++++++++ .../output/product-create.audit.md | 20 + .../output/product-detail.audit.json | 553 +++++++++++++ .../output/product-detail.audit.md | 16 + .../function-audit/output/products.audit.json | 481 +++++++++++ .../function-audit/output/products.audit.md | 20 + .../output/projects-new.audit.json | 304 +++++++ .../output/projects-new.audit.md | 23 + .../function-audit/output/projects.audit.json | 467 +++++++++++ .../function-audit/output/projects.audit.md | 24 + .../function-audit/output/settings.audit.json | 492 ++++++++++++ .../function-audit/output/settings.audit.md | 13 + core/qa/function-audit/output/summary.json | 74 ++ core/qa/function-audit/output/summary.md | 18 + core/qa/function-audit/output/team.audit.json | 333 ++++++++ core/qa/function-audit/output/team.audit.md | 16 + core/qa/function-audit/package.json | 14 + core/qa/function-audit/pages.json | 20 + core/qa/function-audit/verify-modals.mjs | 108 +++ core/qa/visual-parity/_dbg.mjs | 20 + core/qa/visual-parity/_dbg2.mjs | 21 + core/qa/visual-parity/_dbg3.mjs | 20 + core/qa/visual-parity/_dbg4.mjs | 15 + core/qa/visual-parity/_dbg5.mjs | 19 + core/qa/visual-parity/_measure.mjs | 18 + core/qa/visual-parity/_off.mjs | 17 + core/还原与接口待办.md | 110 +++ core/还原度核对报告.md | 189 +++++ 66 files changed, 11610 insertions(+) create mode 100644 .claude/skills/pixel-perfect-react/SKILL.md create mode 100644 core/frontend/public/_devlogin.html create mode 100644 core/qa/function-audit/README.md create mode 100644 core/qa/function-audit/audit.mjs create mode 100644 core/qa/function-audit/output/_final.log create mode 100644 core/qa/function-audit/output/_full2.log create mode 100644 core/qa/function-audit/output/_full_run.log create mode 100644 core/qa/function-audit/output/_p1.log create mode 100644 core/qa/function-audit/output/_p2.log create mode 100644 core/qa/function-audit/output/_p3.log create mode 100644 core/qa/function-audit/output/_q1.log create mode 100644 core/qa/function-audit/output/_q2.log create mode 100644 core/qa/function-audit/output/_q3.log create mode 100644 core/qa/function-audit/output/_recheck.log create mode 100644 core/qa/function-audit/output/_recheck2.log create mode 100644 core/qa/function-audit/output/_recheck3.log create mode 100644 core/qa/function-audit/output/account.audit.json create mode 100644 core/qa/function-audit/output/account.audit.md create mode 100644 core/qa/function-audit/output/asset-factory.audit.json create mode 100644 core/qa/function-audit/output/asset-factory.audit.md create mode 100644 core/qa/function-audit/output/dashboard.audit.json create mode 100644 core/qa/function-audit/output/dashboard.audit.md create mode 100644 core/qa/function-audit/output/image-optimize.audit.json create mode 100644 core/qa/function-audit/output/image-optimize.audit.md create mode 100644 core/qa/function-audit/output/library.audit.json create mode 100644 core/qa/function-audit/output/library.audit.md create mode 100644 core/qa/function-audit/output/messages.audit.json create mode 100644 core/qa/function-audit/output/messages.audit.md create mode 100644 core/qa/function-audit/output/model-photo-demo-a.audit.json create mode 100644 core/qa/function-audit/output/model-photo-demo-a.audit.md create mode 100644 core/qa/function-audit/output/model-photo-demo-b.audit.json create mode 100644 core/qa/function-audit/output/model-photo-demo-b.audit.md create mode 100644 core/qa/function-audit/output/model-photo.audit.json create mode 100644 core/qa/function-audit/output/model-photo.audit.md create mode 100644 core/qa/function-audit/output/pipeline.audit.json create mode 100644 core/qa/function-audit/output/pipeline.audit.md create mode 100644 core/qa/function-audit/output/platform-cover.audit.json create mode 100644 core/qa/function-audit/output/platform-cover.audit.md create mode 100644 core/qa/function-audit/output/product-create.audit.json create mode 100644 core/qa/function-audit/output/product-create.audit.md create mode 100644 core/qa/function-audit/output/product-detail.audit.json create mode 100644 core/qa/function-audit/output/product-detail.audit.md create mode 100644 core/qa/function-audit/output/products.audit.json create mode 100644 core/qa/function-audit/output/products.audit.md create mode 100644 core/qa/function-audit/output/projects-new.audit.json create mode 100644 core/qa/function-audit/output/projects-new.audit.md create mode 100644 core/qa/function-audit/output/projects.audit.json create mode 100644 core/qa/function-audit/output/projects.audit.md create mode 100644 core/qa/function-audit/output/settings.audit.json create mode 100644 core/qa/function-audit/output/settings.audit.md create mode 100644 core/qa/function-audit/output/summary.json create mode 100644 core/qa/function-audit/output/summary.md create mode 100644 core/qa/function-audit/output/team.audit.json create mode 100644 core/qa/function-audit/output/team.audit.md create mode 100644 core/qa/function-audit/package.json create mode 100644 core/qa/function-audit/pages.json create mode 100644 core/qa/function-audit/verify-modals.mjs create mode 100644 core/qa/visual-parity/_dbg.mjs create mode 100644 core/qa/visual-parity/_dbg2.mjs create mode 100644 core/qa/visual-parity/_dbg3.mjs create mode 100644 core/qa/visual-parity/_dbg4.mjs create mode 100644 core/qa/visual-parity/_dbg5.mjs create mode 100644 core/qa/visual-parity/_measure.mjs create mode 100644 core/qa/visual-parity/_off.mjs create mode 100644 core/还原与接口待办.md create mode 100644 core/还原度核对报告.md diff --git a/.claude/skills/pixel-perfect-react/SKILL.md b/.claude/skills/pixel-perfect-react/SKILL.md new file mode 100644 index 0000000..fad2e2f --- /dev/null +++ b/.claude/skills/pixel-perfect-react/SKILL.md @@ -0,0 +1,115 @@ +--- +name: pixel-perfect-react +description: 把 HTML 设计稿像素级精准还原成 React/TSX 组件。当任务涉及"还原页面 / 页面还原度 / HTML 转 React / 设计稿转组件 / exact 页面 React 化 / 精确到 px / 像素对齐 / visual parity / 还原度太粗糙 / 对齐设计稿",或要把 public/exact/*.html 转成 src/routes 下真 React 组件、或修一个已 React 化但还原不准的页面时使用。强制"逐字转写而非重新发挥"+ pixelmatch 像素 diff 闭环,把 diffPixels 逼到趋近 0。 +--- + +# 像素级 HTML → React 还原 + +> 路径约定:本文路径相对 **AirShelf 仓库根**(即本 `.claude` 的上一级)。前端工程在 `core/frontend/`,设计 SSoT 在 `电商AI平台/design.md`,设计镜像在 `core/frontend/public/exact/`。 + +## 核心原则:转写,不是重画(Transcribe, don't reinterpret) + +> **React 文件 = 源 HTML 的忠实转写。只有「数据」和「事件」变,结构 / 类名 / 内联样式 / 文案逐字保留。** + +还原度变糙的 **99% 根因**:AI 把 HTML"读懂后重写"成自以为更干净 / 更语义化的结构和类名,于是 `restraint.css` 里靠这些类名和结构生效的精确样式**全部失配**——间距、字号、圆角、颜色就这么一点点漂走了。**禁止重画,只许转写。** + +--- + +## 十条铁律(每条都对应一种"变糙"的根因) + +1. **先读设计规范** — 涉及任何样式,先 `Read 电商AI平台/design.md`(§0 协作铁律、§2 token、§8 Don't List)。这是 CLAUDE.md 的硬性要求。 +2. **类名逐字保留** — 源 HTML 每个 `class` 原样搬到 `className`。**禁止**改名 / 合并 / 拆分 / 换成 Tailwind utility / 换成内联样式。 +3. **DOM 结构 1:1** — 嵌套层级、兄弟顺序、看似多余的空 `
`、装饰 ``/`corner-bl` 全部保留。`restraint.css` 大量用后代选择器和 `:nth-child`,**结构一动样式就错位**。 +4. **内联样式精确搬运** — `style="width: 33%"` → `style={{ width: "33%" }}`,数值一个字符都不改;kebab-case → camelCase。**禁止"约等于"**(padding 14 写成 16、宽 33% 写成 35% 都算错)。 +5. **文案 / Mono 装饰逐字** — `// 05.14`、`[ 200 OK ]`、`[ /v1 ]`、`LIVE`、占位文本全部原样保留,**禁止改写 / 翻译 / 精简 / 补全**。这些是品牌签名。 +6. **内联 SVG 属性级保留** — `viewBox` / `path d` / `fill` / `stroke-width` 逐字抄,**禁止重画图标或换 lucide 顶替**(除非源 HTML 本就用 lucide)。 +7. **加载同一套 CSS + 字体** — React 入口必须 `import` 同一份 `restraint.css` / `styles.css` / `design-restraint.css`;**禁止**在组件里用内联 `