1 changed files with 83 additions and 0 deletions
@ -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…
Reference in new issue