From 83fce75c8c4156dd49c20604ff631ca7ad41b448 Mon Sep 17 00:00:00 2001 From: wangjia <809946525@qq.com> Date: Wed, 8 Jul 2026 00:59:26 +0800 Subject: [PATCH] =?UTF-8?q?docs(ds-flow):=20Phase=201.6-1.7=20=E2=80=94=20?= =?UTF-8?q?ui=5Fkits=20=E6=A0=87=20DEPRECATED=20+=20=E7=9C=9F=E6=BA=90?= =?UTF-8?q?=E6=8C=87=E9=92=88=E6=94=B6=E6=95=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户定:ui_kits 暂留(整屏布局尚无 HTML 替代,重建属 L3 不在本轮),标废弃 不删。 - design/CLAUDE.md:顶部加「真源对照」横幅(令牌→prototype/tokens.css、原子 →atoms.css+index.html、图标→icons.js、Flutter→client/lib/widgets、Web→ web/*;colors_and_type.css 降级别名、design/flutter 已删、ui_kits DEPRECATED、 _ds_manifest/_ds_bundle 历史派生物);§6「修改设计系统时」重写为 ds-flow 流程。 - design/ui_kits/DEPRECATED.md:醒目废弃标记 + 真源指引 + 暂留理由。 - 1.7:确认无构建/CI 消费 _ds_manifest/_ds_bundle/_adherence,登记职责交 index.html,旧工具产物标历史派生物(不删,无消费者)。 Phase 1(原型单源三件套)完成。 Co-Authored-By: Claude Opus 4.8 --- design/CLAUDE.md | 27 ++++++++++++++----- design/ui_kits/DEPRECATED.md | 20 ++++++++++++++ .../plans/2026-07-07-frontend-ds-refactor.md | 4 +-- 3 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 design/ui_kits/DEPRECATED.md diff --git a/design/CLAUDE.md b/design/CLAUDE.md index 7af83a2..6ad46dc 100644 --- a/design/CLAUDE.md +++ b/design/CLAUDE.md @@ -2,6 +2,17 @@ > 本文件是项目持久指令,任何会话自动注入。目标:让任何 agent(含 Claude Code)都能**完全还原**这套设计,不走样。生产前端是 **Flutter**;React/HTML 是视觉规范参考。 +> ⚠️ **真源对照(2026-07 ds-flow 治理后,以此为准;下文历史章节的旧路径逐步迁移中)** +> | 关注点 | 现在的真源 | 已废弃/降级 | +> |---|---|---| +> | 设计令牌 | `design/prototype/tokens.css`(ds-flow 原型单源) | `colors_and_type.css` 现为薄 `@import` 别名,勿在此加变量 | +> | 组件原子 | `design/prototype/atoms.css` + 登记页 `design/prototype/index.html` | — | +> | 图标 | `design/prototype/icons.js`(Lucide sprite 单源) | — | +> | Flutter 组件实现 | `client/lib/widgets/`(canonical)+ `client/lib/pangolin_theme.dart`(实现层) | `design/flutter/` **已删除**;本文下文 `flutter/…` 路径作废 | +> | 官网/用户中心实现 | `web/website/` · `web/usercenter/`(各自 canonical) | — | +> | 整屏视觉参考 | `design/ui_kits/`(**DEPRECATED · 仅历史整屏布局参考**,勿当真源;整屏 HTML 化后退役) | 旧 DS 工具 `_ds_manifest.json`/`_ds_bundle.js` 为历史派生物 | +> 详见根 `CLAUDE.md`「## 前端设计系统治理(ds-flow)」+ `docs/frontend-ds-refactor-plan.html`。 + --- ## 0. 一句话定位 @@ -105,12 +116,16 @@ SKILL.md ← Agent Skill 入口 --- -## 6. 修改设计系统时(本项目是 DS 工程) -- 改令牌 → 编辑 `colors_and_type.css` **同时**同步 `flutter/pangolin_theme.dart`(两者必须一致)。 -- 改 specimen 卡 → `preview/*.html`,首行带 ``。 -- 改组件视觉 → 同步改 React(`ui_kits/`)与 Flutter(`flutter/widgets/`)两处。 -- 改完跑 `check_design_system` 确认无报错(动效 token 标 `@kind other`)。 -- logo 改动 → 同步 5 个 SVG(`assets/`)+ `flutter/assets/` 副本 + React 内联 `Mark`/`DMark` + Flutter `pangolin_logo.dart`。 +## 6. 修改设计系统时(ds-flow;以此为准,旧写法已废) +- **改令牌** → 只改 `design/prototype/tokens.css`(原型单源),然后跑 codegen: + `node design/codegen/gen_flutter_tokens.mjs`(生成 `client/lib/pangolin_tokens.gen.dart`,勿手改)+ + `cd web/{website,usercenter} && npm run gen:tokens`。**勿改 `colors_and_type.css`**(它已是 `@import` 别名)。 +- **加/改组件原子** → 先在 `design/prototype/atoms.css` 定义 + `design/prototype/index.html` 登记页加展示卡(L1 无例外先原型),再落 canonical 实现:Flutter `client/lib/widgets/`、官网 `web/website/`、用户中心 `web/usercenter/`。 +- **加/改图标** → 先进 `design/prototype/icons.js` sprite,三端(Flutter/website/usercenter)只从此集取。 +- 评审原型:`node design/prototype/serve.mjs` → `http://localhost:5180/`(给 URL,不截图)。 +- **禁止**再向 `design/` 提交 Dart/TS 组件代码副本(会漂移;`ui_kits/` 为历史 DEPRECATED 参考,勿新增)。 +- logo 改动 → 同步 SVG(`design/assets/` + `client/…` 副本)+ Flutter `pangolin_logo.dart` + Web 内联 `Mark`。 +- 闸:改完跑 `bash ci/check-codegen-drift.sh`(codegen 零 diff)+ `flutter analyze`/`flutter test`(含 golden)。 --- diff --git a/design/ui_kits/DEPRECATED.md b/design/ui_kits/DEPRECATED.md new file mode 100644 index 0000000..acfb833 --- /dev/null +++ b/design/ui_kits/DEPRECATED.md @@ -0,0 +1,20 @@ +# ⚠️ DEPRECATED — 历史整屏视觉参考,勿当真源 + +本目录(`design/ui_kits/`)是早期的 React/HTML 端原型(mobile/tablet/desktop/website/usercenter +六端整屏)。**已废弃为「仅历史整屏布局参考」,不再是设计真源**(2026-07 ds-flow 治理后)。 + +## 现在的真源在哪 +- 设计令牌 → `design/prototype/tokens.css` +- 组件原子 → `design/prototype/atoms.css` + 登记页 `design/prototype/index.html` +- 图标 → `design/prototype/icons.js` +- 生产实现(canonical)→ Flutter `client/lib/widgets/`、官网 `web/website/`、用户中心 `web/usercenter/` + +## 为什么暂留而不删 +原子层已被 prototype/ 捕获,但**整屏布局尚无 HTML 替代**(重建整屏属 L3 新屏工作,不在本轮治理范围)。 +待整屏 HTML 化迁进 `design/prototype/screens/` 后,本目录退役删除。 + +## 铁律 +- **勿在此新增/修改** jsx/css 组件副本(会与 canonical 漂移;根 CLAUDE.md「禁向 design/ 提组件代码副本」)。 +- 需要改组件视觉,去改真源(prototype/ + canonical 实现),不要动这里。 + +详见根 `CLAUDE.md`「## 前端设计系统治理(ds-flow)」+ `docs/frontend-ds-refactor-plan.html`。 diff --git a/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md b/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md index a33c343..2a1647c 100644 --- a/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md +++ b/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md @@ -47,9 +47,9 @@ 收敛现有分散图标（website Icon.astro / usercenter icons.tsx / Flutter pangolin_icons.dart 三处的图标集） - [x] 1.5 `design/prototype/index.html`：活登记页——三…两主题（light/dark）切换 + `data-swatches` 声明式色板 + 字号梯度 + 圆角/间距/阴影 + 全部公用组件原子展示卡 + 图标库全展示。**每个 atom 必须在此登记** -- [ ] 1.6 `design/ui_kits/` 的 jsx/css 端原型：提炼进 prototype 后**删除 jsx 组件副本**（消除与 +- [x] 1.6 `design/ui_kits/` 的 jsx/css 端原型：提炼进 prototype 后**删除 jsx 组件副本**（消除与 「禁向 design/ 提组件代码副本」的冲突 + 漂移源）；保留必要的屏级 HTML 布局参考迁进 `prototype/screens/` -- [ ] 1.7 更新/退役 `_ds_manifest.json` + `_ds_bundle.js`：登记簿职责交给 `index.html`， +- [x] 1.7 更新/退役 `_ds_manifest.json` + `_ds_bundle.js`：登记簿职责交给 `index.html`， manifest 若仍被消费则保留为派生产物（记清谁是真源） ---