Browse Source

docs: 增加 TDesign Wave C Tab 与表格迁移设计与计划

覆盖 t-tabs、t-radio-group、t-table 范围与按页切分。
main
xiaosi 3 weeks ago
parent
commit
7f78536549
  1. 97
      docs/superpowers/plans/2026-08-28-tdesign-shell-wave-c.md
  2. 71
      docs/superpowers/specs/2026-08-28-tdesign-shell-wave-c-design.md

97
docs/superpowers/plans/2026-08-28-tdesign-shell-wave-c.md

@ -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 统一。

71
docs/superpowers/specs/2026-08-28-tdesign-shell-wave-c-design.md

@ -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…
Cancel
Save