wangjia
911ceca079
Select 组件（用户拍板：下拉框全端共用一个真相源）： - design/components/forms/Select.jsx：自绘下拉——触发器同 Input （control-sm/radius-sm/border-1 + chevronDown），弹层同菜单 （radius-md/shadow-menu、选中项前置对勾、hover surface-2）， 外点/Esc 收起；登记簿加卡；icons.js 新增 chevronDown 并登记 icon-map - 原型 SettingsTray 与桌面 SettingsApp 同步换用（替换原生 select—— 其系统弹层样式/位置不可控，即 12A 截图问题） 原型组件运行时可再生（修复单源缺口）： - design-pipeline/bundle-components.mjs：用 desktop 现成 esbuild 重建 _ds_bundle.js（此前为 Claude 导出产物、仓库内无法再生，组件一改即 过期）；import 'react' 经全局 shim，命名空间不变；已实测原型页正常 - _ds_bundle.js 重建（15 个组件，含 Select/Icon） 设置窗口无边框： - tauri.conf settings 窗口 titleBarStyle=Overlay + hiddenTitle， 系统红绿灯悬浮左上；SettingsApp 自绘顶条（surface-2 + 下边框 + data-tauri-drag-region 可拖拽），对齐原型 MacWindow 规格 合并 feat/design-truth-source（真相源与闸体系）进本分支 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
dudu 语音输入法 · 设计系统
dudu（嘟嘟） 是一款付费语音输入法，核心卖点：大模型识别准确度 + 流式实时上屏 + 极简交互。全平台覆盖（Mac / Windows / iPhone / iPad / Android），桌面端按住全局快捷键说话、移动端键盘按住大麦克风说话，微信登录 + 微信支付按识别时长购买（时长包，不过期），每天免费试用 3 分钟。
设计基调：简约、克制、快。 输入法是"消失在使用中"的工具——界面越少越好，反馈越快越好。支持 Light / Dark 双模式，桌面与移动端共用同一套令牌。
来源
- 本地代码库
dudu/（File System Access 挂载）— 目前仅含dudu/doc/plan/design.html：MVP 前后端设计方案 v0.1（2026-06-11），内含全部界面清单与粗略 mockup。本设计系统的页面设计以该文档第八章为需求来源。 - 技术栈（影响设计决策）：桌面 Tauri 2 + Rust（浮层不抢焦点）、移动端原生键盘扩展（iOS/Android）、后端 Go。
产品表面
| 表面 | 界面 |
|---|---|
| 桌面端（Mac/Win） | ① 识别浮层（核心，两态）② 系统托盘菜单 ③ 设置窗口 ④ 登录/购买窗口 |
| 移动端键盘扩展 | ① 语音为主键盘（大麦克风）② partial 文本条 ③ 未登录/超额提示态 |
| 移动端主 App | ① 启用引导 ② 微信登录 ③ 购买时长 ④ 我的（余额/试用/权限） |
品牌标识
"嘟嘟"= 撅起嘴发出的声音。Logo 以圆形嘴巴为母题：一个线条圆环（嘟起的嘴）+ 内部三条声波竖线（说话中）。纯线条、3.5px 圆头笔画、单色 currentColor。字标 "dudu" 用同一笔画语言手绘（圆 + 竖线 = d/u）。
assets/logo-mark.svg— 标准线条 mark（currentColor，随前景色）assets/logo-mark-ink.svg/-blue.svg/-white.svg— 固定色变体assets/wordmark.svg— "dudu" 字标（currentColor）assets/app-icon.svg/app-icon-dark.svg— 圆角方形应用图标（22/96 圆角比）- 中文标准写法："dudu 语音输入"或"嘟嘟语音输入"；品牌名永远小写 dudu
CONTENT FUNDAMENTALS（文案基调）
- 语言：简体中文为主；品牌名小写 dudu。技术词（partial/final）不出现在用户界面，界面上只说"实时识别""上屏"。
- 人称：对用户用"你"，不用"您"（简约、平等、工具感）。
- 句式：短句、动宾结构、无营销腔。"按住说话""松开完成""上滑取消"——三到六个字说清一个动作。
- 标点：界面微文案不带句号；提示语用"·"分隔（"松开完成 · 上滑取消"）。
- 数字：半角数字 + 空格："472 / 600 分钟""00:04"。
- emoji：界面文案不用 emoji（规划稿 mockup 里的 🎙️ 在正式设计中为线条 mic 图标）。
- 示例语料（演示识别文本用）：日常办公对话——"帮我把这份周报整理一下，重点突出本周的进展""好的，我马上把文件发给你"。
VISUAL FOUNDATIONS（视觉基础）
- 色彩：单一品牌蓝
--accent（light #4F6EF7 / dark #6E89F9）+ 冷灰中性阶梯。绿=录音中/成功，琥珀=超额/警告，红=错误。大面积界面是中性色，蓝色只出现在主操作与品牌处——一屏最多一个蓝色主按钮。禁用渐变（规划稿的蓝紫渐变弃用），纯色填充。 - 双模式：light 页面底
#F6F7FA+ 白卡片；dark 页面底#0F1116+#171A22卡片。识别浮层在两种模式下都是深色玻璃（--overlay-bg95% 不透明 + blur(12px)）——它叠在任意用户界面上，深色最不打扰。 - 字体：中文 UI 走系统字体（PingFang SC / MiSans / HarmonyOS Sans / 雅黑）；Outfit 仅用于 "dudu" 字标、数字与价格。正文 14px（桌面）/ 15px（移动与浮层），微文案 12–13px。字重 400/500/600（700 仅大数字）。
- 间距：4px 网格；卡片内边距 16–24px；控件高度 28/36px（桌面）、44/56px（移动触控）。
- 圆角：呼应圆嘴 logo——按钮/输入框 6px、菜单 10px、卡片/浮层 14px、大容器 20px、麦克风条/胶囊 999px。
- 边框与阴影：1px 实线边框（
--border-1）是主要分隔手段；页面内卡片仅--shadow-card（极轻）；浮起元素用--shadow-menu/window/overlay三档。dark 模式阴影加深、靠边框提层级。无内阴影。 - 背景：纯色，无图片、无纹理、无插画。空状态用 logo 线条图形 + 一句话。
- 动效：快入慢出
--ease-out，120/200/320ms 三档；浮层淡入+上移 4px；波形条高度动画是唯一循环动画（仅录音中）。无弹跳、无旋转、无视差。 - Hover：背景加一层（surface-2/3）；主按钮加深为
--accent-hover。按压：再深一档--accent-press，桌面无缩放；移动端键帽按压可缩 0.97。 - 焦点：3px 柔和蓝环
--focus-ring，仅键盘聚焦显示。 - 透明与模糊：仅两处——识别浮层与托盘菜单（95–98% 不透明 + blur）。普通卡片不透明。
- 图片色调：产品几乎无摄影图；若营销需要，冷色调、低饱和、留白多。
- 卡片范式：
--surface-card+ 1px--border-1+ 14px 圆角 +--shadow-card；浮起卡片才用更重阴影。
ICONOGRAPHY（图标）
- 图标系统：Lucide（ISC 许可）线条图标——24 网格、2px 圆头描边，与线条 logo 同语言。组件内已内嵌所需 Lucide 路径（mic、settings 等），新界面可从 lucide.dev 复制同风格路径或经 CDN
unpkg.com/lucide-static引用。 - 描边统一 2px，颜色跟随
currentColor。 - 不用 emoji 作图标；不用 unicode 符号作图标。例外：键帽符号 ⌘ ⇧ ⌫ ↵ ——它们是键盘标准字符，出现在
Kbd/HotkeyCombo组件中。 - 无 png 图标，全部 SVG。
索引
styles.css 全局入口（@import 全部令牌）
tokens/ colors / typography / spacing / effects / fonts
assets/ logo-mark(.ink/.blue/.white) · wordmark · app-icon(±dark)
guidelines/ 基础规范卡片（品牌、色板、字体、间距、动效）
components/core/ Button · IconButton · Badge · Kbd · HotkeyCombo · Card · ProgressBar
components/forms/ Input · Switch · SettingRow
components/voice/ Waveform · MicBar · RecognitionOverlay
ui_kits/desktop/ 桌面端：识别浮层 / 托盘菜单 / 设置 / 登录购买（交互演示）
ui_kits/mobile/ 移动端：语音键盘（多态）+ 主 App（引导 / 购买 / 我的）
SKILL.md 供 Claude Code 等代理使用的技能入口
组件速查
| 组件 | 关键 props |
|---|---|
| Button | variant: primary/secondary/ghost/danger · size: sm/md/lg · block |
| IconButton | size · label（无障碍必填） |
| Badge | tone: green/blue/orange/red/neutral |
| Kbd / HotkeyCombo | keys={['⌘','⇧','Space']} |
| Card | padding |
| ProgressBar | value/max · warnAt=0.9（超阈值自动变警告色） |
| Input | size: md/lg |
| Switch | checked · onChange |
| SettingRow | label · description · children 放右侧控件 |
| Waveform | bars · active · height · color |
| MicBar | state: idle/recording/disabled/quota（文案内置） |
| RecognitionOverlay | state: listening/text · finalText · partialText · hint |
使用规则速查
- 先链
styles.css；dark 模式给容器加data-theme="dark"。 - 一屏一个蓝色主按钮；其余操作 secondary/ghost。
- 浮层永远深色玻璃；键盘/设置跟随系统模式。
- 文案：短、用"你"、无句号、无 emoji。
- 不画渐变，不加无意义阴影，不引入第二品牌色。