wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
20 lines
1.1 KiB
Markdown
20 lines
1.1 KiB
Markdown
# 穿山甲 — 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 有记录)。
|