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

TDesign Shell Wave A 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: 将全局 Toast/Confirm、业务弹窗、Monitor 残留搜索/checkbox 迁到 TDesign；调用方 ui.toast / ui.confirm API 不变。

Architecture: uiStore 薄封装 MessagePlugin / DialogPlugin；各页 modal-backdrop 改为 t-dialog；Monitor 表单控件对齐第一轮约定。

Tech Stack: Vue 3、tdesign-vue-next（MessagePlugin、DialogPlugin、t-dialog、t-input、t-checkbox）

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

---

Task 1: uiStore Toast + Confirm → TDesign

Files:

• Modify: src/stores/modules/uiStore.js

• Modify: src/App.vue

• toast(message) → MessagePlugin.info(message, 2200)（或等价 duration）

• confirm(title, desc, checks) → DialogPlugin.confirm / 自定义 body 含 checks；返回 Promise<boolean>

• 删除 App.vue 自定义 confirm/toast DOM；可只留 router-view + icon-library

• 导出 API 保持：toast、confirm（resolveConfirm 若无外部调用可内聚删除）

• Commit: feat: 全局 Toast/Confirm 切换到 TDesign

---

Task 2: DockEditModal + Devices 弹窗

Files:

• Modify: src/components/DockEditModal.vue

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

• DockEditModal：modal-backdrop → t-dialog（v-model:visible / header / footer）

• Devices：添加机巢、固件升级两个弹窗 → t-dialog

• Commit: feat: 设备相关弹窗切换到 t-dialog

---

Task 3: Firmwares + Tasks + Account 弹窗

Files:

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

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

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

• 各页业务 modal-backdrop → t-dialog

• 表单内容与现有 TDesign 表单控件保持

• 可并行改三个文件，各自或合并 commit（优先各自）：

  • feat: 固件弹窗切换到 t-dialog
  • feat: 任务弹窗切换到 t-dialog
  • feat: 账户弹窗切换到 t-dialog

---

Task 4: Monitor 搜索 / checkbox / 状态弹窗

Files:

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

• 搜索 → t-input clearable + prefix

• 设备多选 → t-checkbox（Set 语义不变）

• dockStatusOpen 弹窗 → t-dialog

• 地图卫星/街道按钮不改

• Commit: feat: 监控页搜索勾选与状态弹窗切换到 TDesign

---

Task 5: 验收

• rg 'modal-backdrop' src --glob '*.vue' → 0（或仅注释）
• rg 'class=\"toast\"|toastVisible' src → 无展示 DOM
• 浏览器：toast、退出确认、添加机巢弹窗、Monitor 搜索/勾选
• 地图底图按钮仍在

---

调用约定

• 业务代码继续 ui.toast(...) / await ui.confirm(...)，不要散落直接 MessagePlugin（除非 store 内）。
• 不 git add -A；跳过全量测试。