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

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