Files
dudu/design/ui_kits/desktop
wangjia 208d0cda12 feat(design): design/ 真相源 + 防漂移静态闸(#25)
真相源整固:
- design/index.html 登记簿:token 色板(var() 实时渲染)/ 组件登记卡 /
  图标与跨端映射 / guidelines / ui_kits 单一入口,check-ds 强制登记
- design/icons.js 图标单源(Lucide 线条)+ icon-map.json 跨端映射表
  (web/iOS/Android 三列,iOS 12 个 SF Symbol 全部收编登记)
- components/core/Icon.jsx 单源图标渲染器;MicBar/RecognitionOverlay 接入
- tokens 新增 --brand-wechat(-press)(微信官方绿)与 --overlay-wave
- fonts.css 弃 Google Fonts CDN,Outfit 可变字体自托管
  (assets/outfit-latin.woff2,40KB;中国网络下 CDN 不可用会卡字体)
- design/serve.mjs 零依赖预览服务器(登记簿与原型评审入口)

codegen 强化(export-tokens.mjs):
- 产物直写消费位置:ios/dudu/Shared/DuduTheme.swift、
  android/.../design/DuduTheme.kt——删除 design-pipeline/generated/
  中间拷贝层(此前 app 内是手工拷贝,--check 守不到真实消费文件已漂移)
- 新增 web/tokens.css 产物(custom props 透传 + Outfit data URI 内嵌)
- tokens 文件遍历排序,产物确定性

存量收编:
- desktop:三个窗口内联 SVG → Icon 组件;tray 裸 rgba → token+opacity
- Android:LoginScreen 微信绿常量 → DuduPalette.brandWechat(Press),
  Color.White → textOnAccent
- 官网 web/index.html:接入 tokens.css,34 处硬编码 hex 全部 var() 化;
  深色板块(metrics/cta/footer)改挂 data-theme="dark" 复用 dark 令牌;
  移除 Google Fonts CDN
- design 包内 8 处裸色:微信绿 token 化、装饰色 ds-ignore 白名单、
  同值色改 var() 引用

防漂移闸(零依赖 Node):
- design-pipeline/check-ds.mjs:真相源自检 7 道(dark⊆light / var 链 /
  裸色∈tokens 值集 / 组件登记 / icons 唯一 / icon-map 双向同集 / 禁 emoji)
- design-pipeline/check-code.mjs:代码侧单源(desktop 禁字面色+内联 path /
  iOS 禁字面色+SF Symbol 同集 / Android 禁 Color(0x / web 禁字面色),
  ds-ignore 行级豁免制
- .githooks/pre-commit(启用:git config core.hooksPath .githooks)
- CI design job 扩展为三道闸全绿
- 反向验证通过:注入裸色/孤儿 token/未登记组件/未登记 symbol 均被拦截

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 00:05:22 +08:00
..

dudu 桌面端 UI Kit

桌面端(Tauri 2Mac / Windows)四个界面的高保真交互演示,对应 MVP 设计方案 §8.1:

Tab 界面 交互
识别浮层 仿真备忘录窗口 + RecognitionOverlay 按住按钮模拟 ⌘⇧Space:聆听中 → partial 流式 → 松开 final 注入
托盘菜单 常驻菜单栏下拉 hover 高亮(accent 反白)
设置 单页设置窗口 Switch / 麦克风下拉 / 外观切换(驱动整页 Light/Dark)
登录 / 购买 微信扫码 → 选时长包 → 支付 → 完成 点击走完整流程

右上角月亮/太阳切换 Light / Dark;设置中"外观"同样生效(含跟随系统)。

设计要点

  • 浮层:--overlay-bg 深色玻璃(两种模式不变),淡入 + 上移 4px(--dur-base),final 亮 / partial 灰。
  • 一屏一个蓝色主按钮;托盘 hover 用 accent 反白是系统菜单惯例。
  • 设置窗口宽 440,行高紧凑(--control-sm 控件),分组标题 12px。
  • 二维码为占位图案(FakeQr),接入后端 /v1/auth/qr 后替换。

文件

  • index.html — 入口(tabs + 主题状态)
  • DesktopShared.jsx — Lucide 图标子集 · DuduLogo · MacWindow · FakeQr
  • OverlayDemo.jsx — push-to-talk 全流程模拟
  • SettingsTray.jsx — TrayMenu + SettingsWindow
  • LoginPurchase.jsx — 登录/时长包/支付/完成 四步