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>
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 · PhoneFrameKeyboardScreen.jsx— 键盘扩展全态AppScreens.jsx— Onboarding / Login / Paywall / Profile
注:微信图标为简化气泡占位,正式包请使用微信官方资源。