docs(design): CONTRACT 记录验收双闸就位 + 库存列表验收状态

块4 改为双闸(保真 ds-compare 目检 / 回归 golden 自比),登记基建就位与
库存列表当前进度(KPI/徽章/列已还原,header/toolbar 待收尾)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSKEiHsvauyxYUW2itzUXX
This commit is contained in:
wangjia
2026-06-25 11:10:43 +08:00
parent b89a9d567b
commit deec108c52
+7 -7
View File
@@ -85,13 +85,13 @@ AppTokens 目前**仅颜色**。原型还驱动:
| 屏 | 原型 | Flutter | a(基准) | b | c |
|---|---|---|---|---|---|
| 库存列表(桌面) | `inventory.html` | `inventory_list_screen.dart` | ☐ 像素 diff ≤阈 | ☐ 结构 | ☐ 结构 |
| 库存列表(桌面) | `inventory.html` | `inventory_list_screen.dart` | ◑ KPI/徽章/列重排已还原;header/toolbar 待收尾 | ✅ golden 自比 | ✅ golden 自比 |
| 库存列表(移动) | `m-inventory.html` | 同上窄屏 | ☐ | ☐ | ☐ |
**验收法(HTML→Flutter 特例)**HTML(Chromium) 与 Flutter 渲染器不同,**严格 0.1% pixelmatch 不适用跨渲染器**。本项目采用
1. **原型基准**`shoot-prototype.mjs <screen>.html out.png --width 1280 --height 860 --theme a|b|c`(已验证)
2. **Flutter 实现图**golden / integration_test 截目标屏 → png
3. **a 主题**:原型 vs Flutter **并排人工目检** + 关键区域结构 diff(容差放宽);**b/c**Flutter 三主题自比,确认 chrome/表头/徽章随主题换色、无残留硬编码
4. token 残留闸:`grep 0xFF…` 该屏为 0(颜色全走 `context.tokens`)。
**验收法(HTML→Flutter 特例)**HTML(Chromium) 与 Flutter 渲染器不同,**严格 0.1% pixelmatch 不适用跨渲染器**(见 design-distill `references/flutter-golden.md`。本项目双闸
1. **保真闸(人工目检)**`node tools/ds-compare.mjs --html .superpowers/prototype/screens/<screen>.html --prefix <prefix>` → 截原型基准 + 与 Flutter golden 用 montage 并排 → `design/_compare/`
2. **回归闸(自动)**`test/golden/<screen>_golden_test.dart``pumpGolden`/`goldenAcrossThemes``test/support/golden_harness.dart`)出 A/B/C 三主题 golden,入库随 `flutter test` 同渲染器自比,抓串色/漏 token
3. token 残留闸:`grep 0xFF…` 该屏为 0(颜色全走 `context.tokens`
> 后续屏(商品/单据/往来/财务/系统域)逐个追加块 3 规格 + 块 4 行,一屏一闭环,禁积压
> **基建就位**(本轮):golden 骨架 + 整屏还原闸(库存列表已接)+ ds-compare 目检编排 + design-distill skill 补全(montage/flutter-golden/跨渲染器分流/多主题 codegen)
> 后续屏(商品/单据/往来/财务/系统域)逐个追加块 3 规格 + 块 4 行 + 一份 `*_golden_test.dart`,一屏一闭环,禁积压。