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

TDesign Shell Wave B 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-button，真分页迁到 t-pagination，并把 Tasks 删除确认收口到 ui.confirm。

Architecture: 按页并行替换，无 AppButton 封装。按钮 class 映射见 spec；分页用 v-model:current ↔ pageNum、:total、:page-size。永久保留 Monitor .map-type、Monitor/Control 飞行控制条、LivePlayer play-control。

Tech Stack: Vue 3、tdesign-vue-next（t-button、t-pagination）

Spec: docs/superpowers/specs/2026-08-28-tdesign-shell-wave-b-design.md

---

Task 1: B1 Users + OpLogs + Firmwares

Files:

• Modify: src/views/UsersView/UsersView.vue

• Modify: src/views/OperationLogsView/OperationLogsView.vue

• Modify: src/views/FirmwaresView/FirmwaresView.vue

• Possibly: src/main.js（若尚未引入 button/pagination 样式则补 css.mjs）

• 工具栏 icon-command / primary-command → t-button（映射见 spec）

• 行内文字操作 → t-button variant="text"

• 弹窗 footer 按钮 → t-button（Firmwares）

• table-footer → t-pagination：v-model:current="pageNum"、:total="total"、:page-size="pageSize"；@current-change 或 watch/@change 调既有 load（保留 goPage 语义或内联）

• 需要时 import 'tdesign-vue-next/es/button/style/css.mjs' 与 pagination 样式（main 或按需）

• Commit: feat: 用户操作日志固件按钮与分页切换到 TDesign

---

Task 2: B2 Devices + Account + DockEditModal

Files:

• Modify: src/views/DevicesView/DevicesView.vue

• Modify: src/views/AccountView/AccountView.vue

• Modify: src/components/DockEditModal.vue

• Devices：标准工具栏/行操作/弹窗 footer → t-button；假分页 footer 隐藏（v-if="false" 删除）或 t-pagination 仅一页不发请求——优先直接去掉误导性假分页

• Account：primary/plain/text + 弹窗 footer → t-button；4 处上一页/下一页 → 各自 t-pagination（orders/usage/sim/simRecharge）

• DockEditModal footer → t-button

• 不改 asset-tab / 业务 tab 分段（归 Wave C）；若难以与命令按钮分离，命令按钮先换、tab 暂留原生并在报告注明

• Commit: feat: 设备账户弹窗按钮与账户分页切换到 TDesign

---

Task 3: B3 其余常规按钮

Files:

• Modify: src/views/TasksView/TasksView.vue（常规按钮；mode-segment/tab 可暂留）

• Modify: src/views/AlarmsView/AlarmsView.vue

• Modify: src/views/MediaView/MediaView.vue

• Modify: src/views/SystemView/SystemView.vue

• Modify: src/views/ReplayView/ReplayView.vue

• Modify: src/views/DeviceDetailView/DeviceDetailView.vue

• Modify: src/layout/components/SideMenu.vue

• Modify: src/layout/components/TopBar.vue

• 上述文件标准命令/返回/刷新/导出/行操作 → t-button

• 禁止改 Monitor .map-type、Monitor/Control 飞行控制、LivePlayer play-control

• Monitor 侧栏非控制条的常规 filter/text 按钮若在 MonitorView：可换；控制条不换。本 Task 默认不强制改 MonitorView 控制条区域

• Commit: feat: 业务页常规按钮切换到 t-button（可拆多 commit）

---

Task 4: B4 Tasks window.confirm 收口

Files:

• Modify: src/views/TasksView/TasksView.vue

• deleteTask：window.confirm(...) → await ui.confirm(title, desc)（沿用 uiStore）

• Commit: fix: 任务删除确认改为 ui.confirm（若已并入 Task 3 commit 则可省略独立 commit，但验收须无 window.confirm）

---

Task 5: 验收

• rg '<button' src/views/UsersView src/views/FirmwaresView src/views/OperationLogsView → 尽量 0（tab 除外并注明）
• rg 't-pagination' src/views --glob '*.vue' 含 Users/Firmwares/OpLogs/Account
• rg 'window\\.confirm' src → 0
• Monitor 仍有 .map-type 原生 button
• 浏览器：Users 翻页、Firmwares 新增按钮、Account 分页、删除任务确认、登录不白屏
• 确保 main.js 已引入 button/pagination 样式（css.mjs）

---

调用约定

• 不 git add -A；按任务精确 add。
• 跳过全量测试；浏览器冒烟由 Main 做。
• 样式路径用 .../style/css.mjs（勿用已失效的 css.js）。