Browse Source

docs: 增加 TDesign Wave B 按钮与分页迁移设计

覆盖标准按钮映射、真分页/假分页策略与按页并行切分。
main
xiaosi 3 weeks ago
parent
commit
5a39905146
  1. 83
      docs/superpowers/specs/2026-08-28-tdesign-shell-wave-b-design.md

83
docs/superpowers/specs/2026-08-28-tdesign-shell-wave-b-design.md

@ -0,0 +1,83 @@
# TDesign 全面替换 — Wave B(按钮体系 + 分页)
## 背景
Wave A 已完成全局 Toast/Confirm、业务 `t-dialog`、Monitor 搜索/勾选。全站仍以原生 `<button>` 为主(约 150+ 模板开口),仅 `LoginView` 使用 `t-button`;无 `t-pagination`,分页为手写 `table-footer`
目标方向不变:**基本上都使用组件库,除非特定**。
## 目标
1. 管理页与常规壳层的标准命令按钮迁到 `t-button`
2. 真分页迁到 `t-pagination`(Users / Firmwares / OpLogs / Account)。
3. Devices 假分页换成 `t-pagination` 展示形态(不改后端,不假装可翻页成功)。
4. `TasksView` 删除任务的 `window.confirm` 收口到 `ui.confirm`
## 非目标
- 不改后台 API / pageSize 契约。
- 不做 Wave C(Tab/分段、`t-table`)。
- 不做完整主题 token 重绘。
- **永久保留原生:**
- Monitor 地图底图切换(`.map-type` 卫星/地图)
- Monitor / Control 强定制飞行控制条(workflow / stage / quick-actions / `control-command`
- `LivePlayer` 覆盖层 `play-control`
- Login 方式切换 tab 若仍是分段按钮,本轮可暂留;正式 Tab 归 Wave C。
## 按钮映射
| 旧 class / 角色 | TDesign |
|-----------------|---------|
| `primary-command` / 主操作 | `t-button` `theme="primary"` |
| `plain-command` / `cancel` / 次操作 | `t-button` `variant="outline"`(或 `theme="default"`) |
| `icon-command` / 仅图标刷新等 | `t-button` `shape="square"` `variant="outline"`,内容保留原 SVG/`t-icon` |
| `table-text-action` / `text-button` / 行内文字操作 | `t-button` `variant="text"` `theme="primary"`(危险操作可用 `theme="danger"`) |
| 弹窗 footer 取消/确认 | 同上 outline / primary;`loading`/`disabled` 对齐现逻辑 |
约定:
- 优先保留原 `@click` / `:disabled` / 文案;不改业务语义。
- 不引入 `AppButton` 封装层(避免本轮额外抽象)。
- 必要的密度/间距用页面 `:deep` 或既有 class 挂在 `t-button` 上微调,不回退到原生 button。
## 分页映射
### 真分页(替换)
| 页面 | 现态 | 目标 |
|------|------|------|
| `UsersView` | `table-footer`,`pageSize=20` | `t-pagination`:`v-model:current` ↔ `pageNum`,`:total`,`:page-size="pageSize"`,`@change`/`@current-change` 触发 `load` |
| `FirmwaresView` | `pageSize=10` | 同上 |
| `OperationLogsView` | `pageSize=20` | 同上 |
| `AccountView` | 4 处「上一页/下一页」(orders/usage/sim/simRecharge) | 各一块 `t-pagination`,绑定既有 `*PageNum` / `*Total` / pageSize=10 |
### 假分页
- `DevicesView`:现 footer 固定第 1 页且前后禁用。改为 `t-pagination`:`total` 用当前列表长度或接口 total(若无则列表 length),`page-size` 足够大或 `disabled`/`page-size` 等于 total,**不发假翻页请求**。若体验上“只有一页”,可隐藏分页(`v-if="total > pageSize"`);本轮允许直接隐藏。
### 无分页 UI(不动)
- Tasks / Alarms / Media 等 `pageSize=100` 一次拉全:本轮不新增分页。
## 执行切分(按页并行)
1. **B1** Users + OpLogs + Firmwares:工具栏/行操作按钮 + 真分页
2. **B2** Devices + Account + `DockEditModal`:标准按钮 + Devices 假分页处理 + Account 多段分页
3. **B3** Tasks / Alarms / Media / System / Replay / SideMenu / DeviceDetail / TopBar(常规按钮;不含飞行控制与 map-type)
4. **B4** `TasksView` `window.confirm``ui.confirm`
5. **验收** 浏览器抽检 + 静态扫描
Monitor/Control 飞行控制与 map-type **明确排除**,不进入 B3。
## 验收
1. 目标页常规 `primary/plain/icon/text` 命令按钮为 `t-button`;无对应旧 class 的原生 button(保留清单除外)。
2. Users / Firmwares / OpLogs / Account 分页为 `t-pagination`,翻页仍拉数。
3. Monitor `.map-type`、Monitor/Control 飞行控制、`LivePlayer` play-control 仍为原生。
4. 删除任务走 `ui.confirm`,无 `window.confirm`
5. 登录、监控指令下发主路径不回归。
## 后续
- **Wave C:** Tab/分段 + `t-table`(含 Login 方式切换若仍原生)。
- 可选:Devices 真分页接后端;控制条视觉 token 化评估。
Loading…
Cancel
Save