wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <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 有记录)。