wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
30 lines
2.2 KiB
Markdown
30 lines
2.2 KiB
Markdown
# 穿山甲 VPN — 移动 App UI Kit
|
|
|
|
iOS / Android 连接界面的高保真可点击原型。极简、暖大地色、双语、支持深浅主题。
|
|
|
|
## 运行
|
|
打开 `index.html`。设备框由 `ios-frame.jsx`(启动组件)提供。完整流程:**登录/注册 → 首次引导 → 主应用**。可交互:
|
|
- **登录 / 注册**(`AuthFlow`):登录用邮箱 + 密码;注册走「邮箱 → 发送验证码 → 填验证码 → 设置密码」。密码用于多端登录。
|
|
- **首次引导**(`Onboarding`):3 屏(连接全球 → 授权 VPN 配置 → 安全无日志),可跳过。
|
|
- **连接键**:轻点 → 连接中(旋转 loader + 进度弧)→ 已连接(SAFE + 计时 + 实时速率)。再点断开。
|
|
- **底部 Tab**:连接 / 节点 / 统计 / 我的。
|
|
- **节点**:搜索 + 列表,点选切换(已连接时短暂重连),选中态高亮。
|
|
- **统计**:流量 / 延迟 / 时长指标卡 + 本周柱状图。
|
|
- **我的**:**兑换 & 购买**入口、PRO 账户卡、智能分流 / Kill Switch 开关、**深色外观开关**、语言切换。
|
|
- **兑换 & 购买**(`RedeemScreen`):兑换激活码 + 购买渠道(自助发卡 / Telegram / LINE / 邮箱)。**App 内无支付表单**——资金流全走外部,符合 VPN 风控。
|
|
|
|
## 文件
|
|
| 文件 | 内容 |
|
|
|---|---|
|
|
| `index.html` | 应用状态机:stage(auth/onboarding/app)/ tab / 连接态 / 节点 / 主题 / 计时器 |
|
|
| `parts.jsx` | 原子:`Icon`(内联 Lucide 路径)、`Mark`(品牌标)、`CC`(国家码块)、`Signal`、`Pill`;`SERVERS` 数据;`STRINGS` i18n 字典 |
|
|
| `screens.jsx` | `ConnectScreen` / `ServersScreen` / `StatsScreen` / `SettingsScreen` / `BottomTab` / `Toggle` / `Row` |
|
|
| `flows.jsx` | `AuthFlow`(登录/邮箱验证码注册)/ `Onboarding`(3 屏)/ `RedeemScreen`(兑换+购买渠道) |
|
|
| `ios-frame.jsx` | 设备框启动组件(状态栏 / 灵动岛 / Home 指示器) |
|
|
|
|
## 关键模式
|
|
- 颜色 / 字体 / 圆角 / 阴影全部走 `../../colors_and_type.css` 的语义 token,组件天然双主题。
|
|
- 图标用内联 Lucide 路径数据(`Icon` 组件),避免 React 中 `createIcons()` 时序问题。
|
|
- 连接键三态用色环(`box-shadow` 外环)区分:中性 / clay / success。
|
|
- 国家用 2 字母码块,不用 emoji 国旗。
|