wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
31 lines
2.3 KiB
Markdown
31 lines
2.3 KiB
Markdown
# 穿山甲 VPN — 桌面客户端 UI Kit
|
|
|
|
macOS / Windows 桌面客户端的高保真原型。920×600 窗口,侧栏导航 + 内容区,支持深浅主题与中英切换。
|
|
|
|
## 运行
|
|
打开 `index.html`。窗口 chrome(交通灯)来自 `macos-window.jsx` 启动组件。完整流程:**登录/注册 → 首次引导 → 主应用**。可交互:
|
|
- **登录 / 注册**(`DAuthFlow`):分屏式,左侧 clay 品牌面板 + 右侧表单。登录用邮箱 + 密码;注册走「邮箱 → 发送验证码 → 填验证码 → 设置密码」。
|
|
- **首次引导**(`DOnboarding`):窗口卡片,3 屏(连接全球 → 授权 VPN 配置 → 安全无日志),可跳过。
|
|
- **侧栏导航**:连接 / 节点 / 统计 / **账户** / **联系我们** / 设置;底部 PRO 账户卡。
|
|
- **连接键**:三态(断开 / 连接中 / 已连接 + 计时 + 速率)。
|
|
- **节点**:双列网格,搜索 + 点选切换。
|
|
- **统计**:流量 / 延迟 / 时长指标卡 + 本周流量柱状图。
|
|
- **账户**(集成后台):套餐横幅(续费/升级)、设备管理(可移除)、套餐选择(免费/专业/团队)→ 进入**兑换 & 购买**(激活码 + 渠道)。
|
|
- **联系我们**(`DContactView`):Telegram / LINE / 邮箱 / 发卡商店 + 服务时间 + FAQ。
|
|
- **设置**:兑换入口、开机自启 / 智能分流 / Kill Switch / 语言切换 / 深色外观 / 协议 / 版本 / 查看登录流程。
|
|
- 顶栏右侧:连接状态 + 明暗快捷切换。
|
|
|
|
## 文件
|
|
| 文件 | 内容 |
|
|
|---|---|
|
|
| `index.html` | 挂载 `DesktopApp` |
|
|
| `dparts.jsx` | 原子:`DIcon` / `DMark`(穿山甲标)/ `DCC` / `DSignal`;`DSTRINGS` i18n 字典、`dT/dName/dSub`、`DSERVERS` |
|
|
| `dflows.jsx` | `DAuthFlow`(登录/注册)/ `DOnboarding`(3 屏引导)/ `DAccountView`(集成后台)/ `DRedeemView`(兑换+购买)/ `DContactView`(联系我们) |
|
|
| `dapp.jsx` | `DesktopApp` 状态机(stage: app/auth/onboarding)+ `DConnect/DServers/DStats/DSettings/NavItem/DToggle/DLangSwitch` |
|
|
| `macos-window.jsx` | macOS 窗口 chrome 启动组件(此 Kit 仅用其 `MacTrafficLights`) |
|
|
|
|
## 关键模式
|
|
- 与移动端共用同一套语义 token 与穿山甲品牌标,保证跨端一致。
|
|
- 语言为单选(中文**或** EN),通过设置里的段控切换 —— 反映真实产品而非中英并排。
|
|
- Windows 版本仅交通灯换成 Windows 控制按钮即可复用全部视图。
|