Browse Source

docs: 增加 TDesign Wave B 按钮与分页实现计划

按 B1–B4 切分页面并行替换与验收项。
main
xiaosi 3 weeks ago
parent
commit
bb557b92a4
  1. 91
      docs/superpowers/plans/2026-08-28-tdesign-shell-wave-b.md

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

@ -0,0 +1,91 @@
# 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`)。
Loading…
Cancel
Save