wangjia
b98ad9dce4
stats-overhaul 的设计稿(CONTRACT.md + mobile/tablet/desktop ui_kits)。 注:这批 ui_kits 描述的是统计页「上聚合·下分设备」原方案;统计页后续已 重设计为「月/周/日 周期卡 + 设备下拉 + 两周折线」(见 client/lib/screens/ stats_page.dart)。设计稿与新页布局有出入,待更新到新布局(单列 TODO 跟踪)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
穿山甲 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 控制按钮即可复用全部视图。