2 changed files with 168 additions and 0 deletions
@ -0,0 +1,97 @@ |
|||||
|
# TDesign Shell Wave C Implementation Plan |
||||
|
|
||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. |
||||
|
|
||||
|
**Goal:** 将标准页签迁到 `t-tabs`、表单二分段迁到 `t-radio-group`、标准数据列表迁到 `t-table`;Login 方式切换纳入。 |
||||
|
|
||||
|
**Architecture:** 按页并行。`t-tabs` `v-model` 对齐既有 tab 字段;`t-table` 用 `:data` + `:columns` + `row-key`,操作列 cell/slot 保留现有 `t-button`;分页继续外置 `t-pagination`。不换 Monitor/Alarms/Media 卡、航线库卡、value-table、飞行控制、map-type。 |
||||
|
|
||||
|
**Tech Stack:** Vue 3、`tdesign-vue-next`(`t-tabs`、`t-table`、`t-radio-group`) |
||||
|
|
||||
|
**Spec:** `docs/superpowers/specs/2026-08-28-tdesign-shell-wave-c-design.md` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 1: C1 Users + Firmwares + OpLogs → t-table |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/UsersView/UsersView.vue` |
||||
|
- Modify: `src/views/FirmwaresView/FirmwaresView.vue` |
||||
|
- Modify: `src/views/OperationLogsView/OperationLogsView.vue` |
||||
|
- Modify: `src/main.js`(补 table/tabs/radio 样式 `css.mjs`) |
||||
|
|
||||
|
- [ ] 三页 `asset-table` → `t-table`(columns 对齐原 th;操作列保留 t-button) |
||||
|
- [ ] `row-key` 用 id |
||||
|
- [ ] 外置 `t-pagination` 不动 |
||||
|
- [ ] main.js:`import 'tdesign-vue-next/es/table/style/css.mjs'`(及后续 tabs/radio 可同 commit 或 C2) |
||||
|
- [ ] Commit: `feat: 用户固件操作日志列表切换到 t-table` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 2: C2 Devices tabs + table |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/DevicesView/DevicesView.vue` |
||||
|
|
||||
|
- [ ] `asset-tabs` → `t-tabs`(机巢/无人机,角标进 label) |
||||
|
- [ ] `asset-table` → `t-table`(按 tab 数据源切换 columns/data) |
||||
|
- [ ] binding-device 卡片跳转若非表列可留 |
||||
|
- [ ] Commit: `feat: 设备管理页签与列表切换到 TDesign` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 3: C3 Tasks tabs + tables + mode-segment |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/TasksView/TasksView.vue` |
||||
|
|
||||
|
- [ ] `business-tabs` → `t-tabs` |
||||
|
- [ ] 计划表 / 执行记录表 → `t-table` |
||||
|
- [ ] `mode-segment`(执行方式、转弯方式)→ `t-radio-group variant="default-filled"` |
||||
|
- [ ] 航线库卡片栅格不换 |
||||
|
- [ ] Commit: `feat: 任务页签表格与分段切换到 TDesign` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 4: C4 Account tabs + tables |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/AccountView/AccountView.vue` |
||||
|
|
||||
|
- [ ] `business-tabs` → `t-tabs` |
||||
|
- [ ] orders/usage/downloads/sim/simRecharge/sessions 等列表 → `t-table` |
||||
|
- [ ] communication-table → `t-table` |
||||
|
- [ ] 外置分页保留 |
||||
|
- [ ] Commit: `feat: 账户中心页签与列表切换到 TDesign` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 5: C5 Media / System / DeviceDetail / Login |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/MediaView/MediaView.vue` |
||||
|
- Modify: `src/views/SystemView/SystemView.vue` |
||||
|
- Modify: `src/views/DeviceDetailView/DeviceDetailView.vue` |
||||
|
- Modify: `src/views/LoginView/LoginView.vue` |
||||
|
|
||||
|
- [ ] Media/System:仅 `business-tabs` → `t-tabs`(卡栅格/设置内容不改结构) |
||||
|
- [ ] DeviceDetail:`full-detail-tabs` → `t-tabs`;alarms/logs `record-table` → `t-table`;`value-table` KV 不换 |
||||
|
- [ ] Login:密码/短信方式切换 → `t-tabs` 或 `t-radio-group` |
||||
|
- [ ] main.js 确保 tabs/radio/table 样式已引入 |
||||
|
- [ ] Commit: `feat: 媒体系统详情登录页签与详情表切换到 TDesign` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 6: 验收 |
||||
|
|
||||
|
- [ ] 目标页无 business-tabs/asset-tabs/full-detail-tabs 原生 button(保留清单除外) |
||||
|
- [ ] Users/Firmwares/OpLogs/Devices/Tasks(计划执行)/Account/DeviceDetail(alarms|logs) 有 `t-table` |
||||
|
- [ ] Monitor map-type 仍在;Alarms 非 t-table 强改 |
||||
|
- [ ] 浏览器:Devices 切 tab、Users 表与翻页、Tasks 分段、Login 切方式、登录不白屏 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 调用约定 |
||||
|
|
||||
|
- 不 `git add -A`;样式路径用 `css.mjs`。 |
||||
|
- 跳过全量测试;冒烟 Main 统一。 |
||||
@ -0,0 +1,71 @@ |
|||||
|
# TDesign 全面替换 — Wave C(Tab / 分段 + t-table) |
||||
|
|
||||
|
## 背景 |
||||
|
|
||||
|
Wave A/B 已完成反馈层、弹窗、表单、按钮、分页。全站页签与列表表仍为手写:`business-tabs` / `asset-tabs` / `full-detail-tabs`、`mode-segment`,以及 `asset-table` / `business-table` / `record-table` / `communication-table` / Account `.order-head` 伪表。尚无 `t-tabs` / `t-table` / `t-radio-group`。 |
||||
|
|
||||
|
## 目标 |
||||
|
|
||||
|
1. 标准页签迁到 `t-tabs`。 |
||||
|
2. 表单内二分段(执行方式 / 转弯方式等)迁到 `t-radio-group`。 |
||||
|
3. 标准数据列表迁到 `t-table`(保留操作列与现有 `t-button`)。 |
||||
|
4. Login 登录方式切换纳入本轮(`t-tabs` 或 `t-radio-group`)。 |
||||
|
|
||||
|
## 非目标 |
||||
|
|
||||
|
- 不改后台。 |
||||
|
- 不启用 `t-table` 内置分页(继续外置 `t-pagination`,避免双绑)。 |
||||
|
- 不做完整主题 token 重绘。 |
||||
|
- **保留(不换):** |
||||
|
- Monitor 设备卡列表 / filter-row、地图 `.map-type` |
||||
|
- Monitor / Control 飞行控制条、`LivePlayer` play-control |
||||
|
- Alarms 卡片列表、Media 媒体卡栅格、Tasks 航线库卡片栅格 |
||||
|
- DeviceDetail `value-table`(KV 布局,非数据网格) |
||||
|
|
||||
|
## 映射 |
||||
|
|
||||
|
### Tabs |
||||
|
|
||||
|
| 旧 | 新 | |
||||
|
|----|----| |
||||
|
| `business-tabs` / `asset-tabs` / `full-detail-tabs` + 原生 button | `t-tabs` `v-model` ↔ 既有 `tab`/`activeTab` 等字段 | |
||||
|
| panel 数量角标(如「机巢 3」) | `t-tab-panel` `:label` 用字符串或 slot 拼角标 | |
||||
|
| 内容区 `business-panel` 显隐 | `t-tab-panel` 内容,或 tabs 只切状态、原 panel `v-show` 保留——优先 panel 内容迁移,若结构过重可 tabs 控 `tab` + 原 panel | |
||||
|
|
||||
|
### 分段 |
||||
|
|
||||
|
| 旧 | 新 | |
||||
|
|----|----| |
||||
|
| `mode-segment` 双按钮 | `t-radio-group` `variant="default-filled"`(或 `outline`)`v-model` 对齐原字段 | |
||||
|
|
||||
|
### Table |
||||
|
|
||||
|
| 旧 | 新 | |
||||
|
|----|----| |
||||
|
| `<table class="asset-table|business-table|record-table|communication-table">` | `t-table` `:data` + `:columns` + `row-key` | |
||||
|
| Account `.order-head` 伪表 | 同上 `t-table` | |
||||
|
| 操作列 | `columns` 中 `cell` / 具名 slot,内嵌现有 `t-button` | |
||||
|
| 空态 | `t-table` empty / 现文案 | |
||||
|
| 外部分页 | 保持 `t-pagination`,不设 table `pagination` | |
||||
|
|
||||
|
## 范围与切分 |
||||
|
|
||||
|
1. **C1** Users / Firmwares / OpLogs → `t-table` |
||||
|
2. **C2** Devices → `t-tabs` + `t-table` |
||||
|
3. **C3** Tasks → `t-tabs` + 计划/执行 `t-table` + `mode-segment`→`t-radio-group`(航线库卡片不换) |
||||
|
4. **C4** Account → `t-tabs` + 订单/用量/下载/通信卡/充值/会话等列表 `t-table` |
||||
|
5. **C5** Media / System / DeviceDetail / Login → tabs(Media/System 仅 tabs;DeviceDetail tabs + alarms/logs `t-table`;Login 方式切换) |
||||
|
6. **验收** |
||||
|
|
||||
|
## 验收 |
||||
|
|
||||
|
1. 目标页无 `business-tabs`/`asset-tabs`/`full-detail-tabs` 原生 button 页签(保留清单除外)。 |
||||
|
2. 目标标准列表为 `t-table`,操作可用。 |
||||
|
3. Tasks/相关表单 `mode-segment` 为 `t-radio-group`。 |
||||
|
4. Monitor map-type、飞行控制、卡列表、Alarms/Media 卡、航线库卡、value-table 仍非 `t-table` 强改。 |
||||
|
5. 登录与列表翻页主路径不回归。 |
||||
|
|
||||
|
## 后续 |
||||
|
|
||||
|
- Monitor/Alarms 卡列表是否组件化另评估。 |
||||
|
- 可选 Devices 真分页、table 密度 token。 |
||||
Loading…
Reference in new issue