wangjia
40760aa884
- server：Go 网关（WS 流式识别中继/计费配额/微信登录支付 mock/反馈/埋点），gummy provider 已真实联调 - desktop：Tauri 2（全局快捷键 push-to-talk/浮层/托盘/设置/登录购买/反馈/首启引导） - android：Compose 主 App + IME（键盘内录音直传） - ios：App + 键盘扩展（1A spike 实证键盘内不可录音，走 deep link 听写） - design/design-pipeline：设计系统 + token 导出 iOS/Android 主题 - doc：前后端设计文档（HTML）；web：官网宣传页；todo：任务看板 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
28 lines
1.4 KiB
Markdown
28 lines
1.4 KiB
Markdown
# dudu 桌面端 UI Kit
|
||
|
||
桌面端（Tauri 2，Mac / 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` — 登录/时长包/支付/完成 四步
|