refactor: 原型迁移 .superpowers/prototype → design/prototype(与 CONTRACT 同目录)
Design Source Checks / design-source (push) Failing after 14m23s

- git mv 全目录(历史保留);.gitignore 收敛为整个 .superpowers/ 忽略
- 全仓 16 处引用同步(CI checks.yml / l1-sync / screens.mjs / hooks /
  CLAUDE.md / CONTRACT / SSR 模板注释 / docs / web 注释)
- 修 pre-commit 路径正则残留;5180 评审服务已切新路径
- 验证:check-ds 12 道 / l1-sync 6 道 / fidelity 抽查全过

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
2026-07-07 18:47:31 +08:00
parent d1b7e8e2e9
commit 05203a9b5b
79 changed files with 46 additions and 48 deletions
+1 -1
View File
@@ -327,7 +327,7 @@ flutter build web --dart-define=BASE_URL=https://api.example.com
可隐藏列走列设置菜单;分页 `total` 带控件 / `pagerInfoText` 仅文案。行 hover、表头底色等
全部来自 `context.tokens`(禁硬编码色,闸:`node client/tool/check_ds_code.mjs`)。
其余原子(按钮/输入/徽章/chip/分段/KPI/菜单/toast/柱状图)见 `client/lib/widgets/ds/`
一对一镜像 `.superpowers/prototype/atoms.css`。旧 `DataTableCard`/`FilterableColumnHeader`
一对一镜像 `design/prototype/atoms.css`。旧 `DataTableCard`/`FilterableColumnHeader`
体系已废弃(2026-07-03),勿在新屏使用。
## 移动端 / 响应式 UI 规范
+1 -1
View File
@@ -80,7 +80,7 @@
<h2>四、设计系统(L1 先行——switch 组件不存在)</h2>
<div class="card lead">
<ol>
<li>原型 <code>.superpowers/prototype/atoms.css</code> 登记 <code>.switch</code> 组件(38×22 pill 轨道 + 圆点滑块,on=<code>--primary</code>、off=<code>--border</code>,禁用态 faint;全走 tokens+ <code>index.html</code> 组件清单登记;<code>mobile-atoms.css</code> 如需尺寸变体一并登记。</li>
<li>原型 <code>design/prototype/atoms.css</code> 登记 <code>.switch</code> 组件(38×22 pill 轨道 + 圆点滑块,on=<code>--primary</code>、off=<code>--border</code>,禁用态 faint;全走 tokens+ <code>index.html</code> 组件清单登记;<code>mobile-atoms.css</code> 如需尺寸变体一并登记。</li>
<li>Flutter 对照新建 <code>client/lib/widgets/ds/ds_switch.dart</code>(颜色单源过 <code>check_ds_code</code> 闸)。</li>
<li>状态徽章三态色复用现有 DsBadge tone:在售=ok 绿、库存=info 蓝;「已售」需中性灰 tone——确认 DsBadge 有无 neutral,无则原型 badge 先补 neutral 变体再同步。</li>
<li>原型 <code>inventory.html / m-inventory.html</code>(同步态屏)状态列/徽章文案同步为三态。</li>
+4 -4
View File
@@ -48,7 +48,7 @@
<li><a href="#s1">总览:一次 UI 改动的标准路径</a></li>
<li><a href="#s2">技术栈与目录地图</a></li>
<li><a href="#s3">设计真相源三层分治(L1/L2/L3</a></li>
<li><a href="#s4">原型 .superpowers/prototype</a></li>
<li><a href="#s4">原型 design/prototype</a></li>
<li><a href="#s5">Token Codegen(颜色单源)</a></li>
<li><a href="#s6">各道闸全景</a></li>
<li><a href="#s7">像素验收体系(golden / fidelity</a></li>
@@ -61,7 +61,7 @@
<h2 id="s1">一、总览:一次 UI 改动的标准路径</h2>
<div class="card lead">
<pre>
<b>① 设计真相源</b>.superpowers/prototype/
<b>① 设计真相源</b>design/prototype/
tokens.css(三主题) + atoms.css / mobile-atoms.css + icons.js + index.html 登记
│ 新增颜色/组件/图标 → <b>必须先登记原型</b>L1 先行)
@@ -119,7 +119,7 @@
<p><b>屏归属现状</b>:同步态覆盖绝大多数(库存/往来/基础数据/入出库列表/财务/设备/设置/用户/关于/登录/移动壳/我的/授权/盘点);快照态仅注册页;代码先行 = 授权面板、购买卡及官网若干页;拍板不做 = 移动端建单表单。<b>漂移体检</b>:不逐提交强制同步,大版本前跑 <code>node tools/fidelity.mjs</code> 按报告逐屏决定重新对齐或降级快照。</p>
</div>
<h2 id="s4">四、原型(.superpowers/prototype/</h2>
<h2 id="s4">四、原型(design/prototype/</h2>
<div class="card lead">
<ul>
<li><b>tokens.css</b>:令牌单源。<code>:root</code> 共享标量(间距 sp-*/圆角 r-*/字号 fs-*/字体/阴影/z 阶梯/品牌色/状态栏色)+ 三主题块 <code>[data-theme=a/b/c]</code>(A 经典蓝浅 / B 琥珀深 / C 酒窖暖浅)。屏与组件只准引 <code>var(--token)</code></li>
@@ -133,7 +133,7 @@
<h2 id="s5">五、Token Codegen(颜色单源落地 Flutter</h2>
<div class="card lead">
<pre>
.superpowers/prototype/tokens.css ← 原型真源
design/prototype/tokens.css ← 原型真源
check-l1-sync 闸①:逐字节一致)
client/lib/core/theme/token_source/tokens.css ← 入库快照
│ node client/tool/gen_tokens.mjs
+2 -2
View File
@@ -274,7 +274,7 @@
</div>
<h3>3.3 ds 设计系统(单一真相源)</h3>
<p class="gdesc">UI 的真相源是原型 <code>.superpowers/prototype/</code>tokens + <code>atoms.css</code>);Flutter 侧一对一镜像,屏只组合 ds 组件、不自己堆样式。令牌层由 <code>lib/core/theme/token_source/tokens.css</code> codegen 生成 <code>app_tokens.g.dart / app_dims.g.dart / app_chrome.g.dart</code>——改样式改源后重跑脚本,<b>禁止手改 .g 文件、禁止硬编码色值</b></p>
<p class="gdesc">UI 的真相源是原型 <code>design/prototype/</code>tokens + <code>atoms.css</code>);Flutter 侧一对一镜像,屏只组合 ds 组件、不自己堆样式。令牌层由 <code>lib/core/theme/token_source/tokens.css</code> codegen 生成 <code>app_tokens.g.dart / app_dims.g.dart / app_chrome.g.dart</code>——改样式改源后重跑脚本,<b>禁止手改 .g 文件、禁止硬编码色值</b></p>
<div class="card"><table>
<thead><tr><th style="width:30%">widgets/ds/ 文件</th><th>镜像对象</th></tr></thead>
<tbody>
@@ -292,7 +292,7 @@
<h3>3.4 golden × 3 主题 + fidelity 像素闸</h3>
<ul style="font-size:13px">
<li><b>golden</b><code>client/test/golden/*_golden_test.dart</code> 对每屏 × 三主题(a/b/c)出基准图 <code>test/golden/goldens/&lt;prefix&gt;_&lt;theme&gt;.png</code>;更新用 <code>flutter test --update-goldens</code></li>
<li><b>闸机 2 — fidelity</b><code>tools/fidelity.mjs</code><b>原型截图当基准</b>Playwright 截 <code>.superpowers/prototype/screens/*.html</code>,注入 Noto Sans SC 统一字体)与 Flutter golden 做 pixelmatch diff,超逐屏校准阈值即 exit 1;支持 zones 分区阈值抓局部错位。屏注册表在 <code>tools/screens.mjs</code>fidelity 与人工目检 <code>tools/ds-compare.mjs</code> 共用)。</li>
<li><b>闸机 2 — fidelity</b><code>tools/fidelity.mjs</code><b>原型截图当基准</b>Playwright 截 <code>design/prototype/screens/*.html</code>,注入 Noto Sans SC 统一字体)与 Flutter golden 做 pixelmatch diff,超逐屏校准阈值即 exit 1;支持 zones 分区阈值抓局部错位。屏注册表在 <code>tools/screens.mjs</code>fidelity 与人工目检 <code>tools/ds-compare.mjs</code> 共用)。</li>
</ul>
<pre><code>cd client && flutter test --update-goldens test/golden/inventory_list_golden_test.dart
node tools/fidelity.mjs inventory # 仓库根运行;--themes a,b,c--update 刷新原型基准</code></pre>