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>
31 lines
1.6 KiB
Markdown
31 lines
1.6 KiB
Markdown
# dudu 移动端 UI Kit
|
||
|
||
移动端（iOS / Android 原生键盘扩展 + 主 App）高保真交互演示，对应 MVP 设计方案 §8.2–8.3。
|
||
|
||
## 左：键盘扩展
|
||
|
||
微信聊天宿主上下文 + 以语音为主的键盘：
|
||
|
||
- 工具条（dudu 标识 + 余额/试用/计时状态）
|
||
- 功能键行：切换键盘 / ，/ 。/ 退格 / 发送（语音为主，不做 26 键）
|
||
- 大麦克风条（`MicBar`，56px 胶囊）：**按住说话** → partial 文本条流式刷新 → **松开** final 上屏到宿主输入框；录音中显示"上滑取消"
|
||
- 顶部状态 chips 切换四态：有余额 / 试用中（每天免费 3 分钟）/ 未登录（按键置灰）/ 试用已用完（橙色引导购买时长）
|
||
|
||
## 右：主 App 四屏
|
||
|
||
- **启用引导**：三步卡片（添加键盘 → 完全访问 → 试一试），点主按钮推进
|
||
- **登录**：logo + 微信一键登录（微信品牌绿 #07C160）
|
||
- **购买时长**：时长余额卡 + 时长包（100/500/2000 分钟，不过期）+ 微信支付
|
||
- **我的**：账号卡（时长余额）+ 今日免费试用 ProgressBar + 权限自检（异常红色"去开启"）
|
||
|
||
右上角切换 Light / Dark。键盘面板与 App 均随主题；键帽用 `--surface-card` + `--shadow-key` 底边。
|
||
|
||
## 文件
|
||
|
||
- `index.html` — 入口（两台手机并排 + 状态 chips + 主题）
|
||
- `MobileShared.jsx` — Lucide 图标子集 · DuduMLogo · PhoneFrame
|
||
- `KeyboardScreen.jsx` — 键盘扩展全态
|
||
- `AppScreens.jsx` — Onboarding / Login / Paywall / Profile
|
||
|
||
注：微信图标为简化气泡占位，正式包请使用微信官方资源。
|