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