# 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

注：微信图标为简化气泡占位，正式包请使用微信官方资源。