refactor: 原型迁移 .superpowers/prototype → design/prototype(与 CONTRACT 同目录)
Design Source Checks / design-source (push) Failing after 14m23s
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:
@@ -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 规范
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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/<prefix>_<theme>.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>
|
||||
|
||||
Reference in New Issue
Block a user