zizi f98ad0f801 docs(fe-ds): studio视觉体系/i18n/通用组件库双spec+mockup+P1token层(HJ-FE-DS-001)

评审版+执行版双spec、真chrome验证mockup(zh/en+暗/浅/柔三主题实时切换)、P1 tokens.css体系化补全(全additive·旧令牌保留→暗色零回归)。
创始人5决议:响应式消费Web否决demo桌面侧栏/暗色先行+设置内多档主题/SVG图标替emoji/金样板先行/统一圆角矩形(禁药丸椭圆)。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-16 14:55:47 +00:00

10 KiB

Raw Blame History

造梦AI · studio 视觉体系 / i18n / 通用组件库 · 评审版（HJ-FE-DS-001）

性质：评审版（结论先行，供创始人拍板）。日期：2026-06-16 ｜ owner：L0 ｜状态：待审触发：创始人 /ui-ux-pro-max —「优化 studio 前端视觉、支持多语言、建立通用组件；先定方案出 mockup，从前端架构视角避免长期开发产出垃圾代码」。配套 mockup（浏览器直开，含实时 zh/en 切换）：docs-design/studio-redesign-mockup.html 设计基准源（全产品愿景 demo）：docs-design/huijing-ai-demo.html；现行真实 token：game-studio/src/styles/tokens.css

1. 结论先行

核心判断：保留 demo 的「设计语言」（token 体系 + cyan→green 品牌渐变 + 暗色玻璃质感），否决 demo 的「桌面控制台布局」作为 ToC 网站基线。

理由（均代码实证）：

demo.html 实为桌面产品控制台外壳：grid: 236px 固定侧栏 + 流式主列，workbench min-width:1140px，短视频游戏流是塞进 390×660 模拟手机框里的——这是「管理后台 / IDE」范式，不是消费级 ToC 网站范式。
game-studio 现状是移动优先 Web（Vant、视口 360–430px、底部 4 tab、沉浸式 TikTok 流），更贴近消费级游戏流首触。
创始人定位：现在是 ToC 网站，later 有桌面 App + 移动 App。

→ 推荐方向 = 响应式优先的消费级 Web（一套组件：移动沉浸 / 桌面居中放大，而非后台侧栏）+ 跨端可移植的设计 token 单一事实源（Web 现在吃 CSS 变量；桌面 App 用 Web 技术直接复用；移动 App 用同一份 token JSON）。这同时服务「later 双 App」与「避免垃圾代码」两个目标。

三件事一次性定架构（金样板先行，再批量推页）：

设计体系：把 tokens.css 补全为 primitive + semantic 两层、主题就绪（暗色先行 + 设置内多档舒适主题：暗 / 浅 / 柔和可切）、统一圆角矩形（禁药丸/椭圆）、跨端中立。
通用组件库：封装 Vant（复用其交互/无障碍）+ 自研品牌层，全部吃 semantic token、文案走 i18n。
i18n：vue-i18n，zh-CN 基线 + en-US，命名空间 key，零硬编码字面量，语言切换持久化 + Intl 本地化格式化。

2. demo.html 评估（创始人要求「先评 demo」）

维度	demo 现状（实证）	对 ToC 网站的判断	处置
品牌识别	`cyan #31e6ff → green #7cf2a4` 霓虹渐变 + neon-on-ink	强、差异化、契合「AI 游戏创作」	保留
token 纪律	单一 `radius:8px` / 单一签名渐变 / 单一缓动 `ease` / 单一入场动画 `lift`	优秀、跨端可移植	保留并补全
布局范式	桌面侧栏控制台 + workbench 1140px	ToC 网站不适用（消费首触是移动/响应式）	否决，改响应式优先
信息密度	5–6 列网格、body 11–13px	创作/控制台可接受，消费面过密过小	消费面降密、body ≥14–16px
文本对比度	muted 蓝灰 `#8d9ab6` 正文 on 近黑	部分长正文恐不达 WCAG AA	正文提字号/对比，muted 仅次要信息
主题	仅暗色（注释已写"便于后续换肤"）	品牌默认 OK，但广受众 later 或需浅色	semantic token 主题就绪，暗色先行
交互态	无 `:disabled` / `:pressed` / `:focus` 定义	真实产品（表单/异步）必需	组件层补全全状态
图标	Unicode 字形 / emoji 当图标（`‹ ▲ ✓ 📊 ★ …`）	placeholder 感、跨端渲染不一致	引入 SVG 图标系统（lucide 取向）

一句话：demo 的「语言」（颜色/字/间距/质感/渐变）是好的、要继承；demo 的「布局形态」（桌面控制台）是给投资人看全貌的原型，不能直接当消费网站基线。

3. 推荐架构（review 级，不含代码）

3.1 设计 token：两层 + 跨端单一事实源

flowchart LR
  SRC[design-tokens 源<br/>primitive + semantic] --> WEB[Web 现在<br/>CSS 变量 tokens.css]
  SRC --> DESK[桌面 App later<br/>Web 技术直接复用]
  SRC --> MOB[移动 App later<br/>同份 token JSON→RN/Flutter]
  subgraph 两层
    P[primitive<br/>原色板/灰阶/尺寸原子] --> S[semantic<br/>语义令牌] --> C[component<br/>组件级令牌]
  end

补全 inventory 揪出的缺口（全部 additive，旧变量不动）：

--on-cyan:#061014 / --on-danger:#2a0608：杀掉 4 个不一致的"深色on霓虹"硬编码（#04222a/#04221a/#04231a/#04202a）+ 组件 fg 硬编码。
spacing 尺度：--sp-1..6 = 4/8/12/16/22/32（取自 demo 主导 8–14px 节奏；现状零间距令牌）。
--surface-3（demo 有 3 级面板，studio 仅 2 级）、--line-2（demo 2 级描边，studio 1 级）。
3 级 elevation：--elev-1/2/3（调和 studio 0 8px 24px 与 demo 0 22px 60px/模态 0 26px 80px）。
radius 尺度（统一圆角矩形，禁药丸/椭圆）：--radius-xs/sm/md/lg/xl = 4/6/8/12/20，默认 --radius=md(8px)，半径随元素尺寸比例设计。全站统一圆角矩形语言：chip/状态/徽章/进度条/图标按钮一律小半径圆角矩形，取消 999px 药丸与正圆（仅 loading 旋转环保留圆形=功能性）。〔创始人 2026-06-16 拍板〕
多档舒适主题：[data-theme=dark|light|dim] 仅覆盖语义层（primitive/组件/圆角不变），设置内可切 + localStorage 持久化 + 初值可跟随 prefers-color-scheme；暗色默认。后续可加护眼/高对比档。〔创始人 2026-06-16 拍板〕
--fs-h3、签名渐变令牌 --grad-primary、聚焦环 --focus-ring。
把 rgba 手抄调色板（rgba(49,230,255,.x) 等手搓 alpha）统一改 color-mix(in srgb, var(--token) N%, transparent)（仓里已有正确用法，推广即可）。

3.2 通用组件库：封装 Vant + 自研品牌层（四层）

L0 token 层：CSS 变量（3.1）。
L1 Vant 适配：vant-theme.css 把 --van-* 映射到 semantic token，复用 Vant 的交互/无障碍/键盘/触达（现状零 Vant UI 真渲染，纯手搓 → 表单/弹层等优先收编 van-field/van-popup）。
L2 品牌基元：AppButton(全状态+签名渐变回归) / Field / Card / Chip / Badge / EmptyState / NavHeader / TabBar / Skeleton / Toast / Icon(SVG)——消灭 inventory 的重复：.field×3、Project≈BizLeads 的 filter/card、3 处内联 StatusBadge、Play 裸 <button>、Message/Profile/TabBar 三处徽章。
L3 业务组合：GameCard / InteractBar / FilterTabs / ListCard …（吃 L2）。
图标：SVG sprite 替 Unicode/emoji（满足 ui-ux-pro-max 红线 no-emoji-icons）。

3.3 i18n 架构

createI18n（vue-i18n），locale 文件 game-studio/src/locales/{zh-CN,en-US}/*.json，按页/域命名空间（feed.*/create.*/profile.*/common.*）。
抽取范围：17/19 视图模板字面量 + 7 组件 + 3 helper（status.ts/msg-type.ts/publish-gates.ts）+ 品牌串 绘境AI（现散落 Login/Create/Share → 收敛 i18n/常量）。
语言切换入口（我的/设置）+ localStorage 持久化 + <html lang> 同步 + 数字/日期/货币用 Intl 本地化。
占位文案清理：Login 协议 javascript:void(0)「占位待法务」、Feed window.prompt/alert 举报、Profile「即将上线」toast——i18n 化时一并收口。

ToC 站不要假门：模板中文字面量核验遵 .agents/rules 红线（strings|grep 中文假阴性，改脚本扫残留 + 双语对照），构建门兜底。

4. mockup 说明

docs-design/studio-redesign-mockup.html：自包含、浏览器直开。含 ① token 全展示（色/字/间距/圆角/阴影）② 组件全状态（按钮含 disabled/loading、输入含 focus/error、卡片/徽章/空态/导航/骨架/toast/模态）③ 代表屏（消费流卡 + 创作入口 + 响应式桌面框，证明"一套组件移动沉浸/桌面放大"）④ 实时 zh/en 语言切换（证明 i18n 架构）。 mockup 的 CSS 即提案的真实 token 值——它是蓝图不是弃稿，落地时直接映射到 tokens.css + Vue 组件 + vue-i18n。

5. 边界（in / out）

in：设计 token 补全 + 通用组件库 + i18n 双语 + 多档舒适主题（暗 / 浅 / 柔和，设置内可切） + 关键消费/创作面响应式落地。
out（明确不做）：桌面/移动原生 App（仅 token 契约就绪）· RTL · 重做品牌视觉 · admin 后台（另仓 game-admin）· 更多主题档（护眼/高对比，后续增量）。

6. blast radius / 风险

维度	影响	风险
tokens.css 扩展	新增 primitive/semantic 令牌	低——additive，旧变量不动
组件库重构	`AppButton` 等 7 现役组件改造 + 收编重复	中——有回归面，按页灰度 + 视觉走查门
i18n 抽取	触 17 视图 + 组件 + helper 字面量	中——量大易漏，脚本扫残留 + 双语对照 + 构建门
Vant 真渲染	现零 Vant UI，引入 `van-field/van-popup` 变 DOM/样式	中——L1 封装隔离，逐组件替换

7. 验收

mockup 创始人过审（视觉方向 + 跨端定位 + 暗色先行 + SVG 图标）。
token：脚本扫无散落硬编码 hex / rgba 手抄（归零或入令牌）。
组件：全状态可视、Vant 无障碍保留、AppButton 签名渐变回归。
i18n：zh/en 切换全量生效、零硬编码残留、构建绿、Intl 格式化。
响应式：375 / 768 / 1024 / 1440 四档无横滚、触达 ≥44px、文本对比 ≥WCAG AA、prefers-reduced-motion 尊重。

8. 创始人决议（2026-06-16 已拍）

响应式定位 ✅ 认同——响应式优先消费级 Web（移动沉浸 / 桌面居中放大），否决 demo 桌面侧栏控制台。
主题 ✅ 暗色先行 + 设置内多档舒适主题（暗 / 浅 / 柔和）可切（语义层覆盖、持久化）。
图标系统 ✅ 引入 SVG 图标（lucide 取向）替 Unicode/emoji。
落地节奏 ✅ 金样板（token + 组件库 + 1 消费面 + 1 创作面 i18n 化）先行验证，再批量推其余页。
形状语言 ✅（追加）统一圆角矩形、禁药丸/椭圆、半径按尺寸比例设计（见 §3.1）。

→ 决议落定。下一步：出执行版 spec 并按金样板落地。

10 KiB Raw Blame History Unescape Escape