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>
穿山甲 — iPad 客户端 UI Kit
iPad 横屏(1180×820)分栏布局的高保真可点击原型。介于手机与桌面之间:左侧栏导航(触控尺寸,行高 ≥48px)+ 内容区。
运行
打开 index.html。可交互:连接键三态、智能选择推荐卡(默认选中)、免费版额度卡(看广告解锁)、节点双列网格、统计、账户(语言/深色/免费版视角切换)。
文件
| 文件 | 内容 |
|---|---|
index.html |
入口(iPad 外壳 + 状态栏) |
tabapp.jsx |
TabletApp 外壳 + TabRail 侧栏 + 连接/节点/统计/账户四视图 |
../mobile/parts.jsx |
复用:Icon/Mark/CC/Signal/SERVERS/makeT 与共享字串 |
关键模式
- 连接页双栏:左=大连接按钮;右=信息列(额度卡 → 当前节点 → 实时速率)。
- 节点页:置顶智能推荐卡 + 双列网格(同桌面)。
- 全部走语义 token,双主题双语;Flutter 端建议宽度 ≥900 时从底部 Tab 切换为此侧栏布局。
- 注意:交互态过渡只写
background-color/color,不要transition: all(背景变量切换会失效,CLAUDE.md §5 有记录)。