2 changed files with 150 additions and 0 deletions
@ -0,0 +1,82 @@ |
|||||
|
# 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`;跳过全量测试。 |
||||
@ -0,0 +1,68 @@ |
|||||
|
# TDesign 全面替换 — Wave A(全局反馈 / 弹窗 / Monitor 残留表单) |
||||
|
|
||||
|
## 背景 |
||||
|
|
||||
|
表单控件(select/input/number/time/switch)两轮已迁完。全站仍大量原生 `button`、自定义 `modal-backdrop`、自研 Toast/Confirm,以及 Monitor 残留搜索/checkbox。目标方向:**基本上都使用组件库,除非特定**。 |
||||
|
|
||||
|
**特定保留(本轮及后续默认):** 地图底图控件(卫星/街道等 Mapbox 切换)。监控侧栏常规搜索/勾选要换。 |
||||
|
|
||||
|
## 目标(Wave A) |
||||
|
|
||||
|
1. 全局 Toast / 确认框切到 TDesign,**调用方 API 不变**(`ui.toast` / `ui.confirm`)。 |
||||
|
2. 业务弹窗从 `modal-backdrop` 迁到 `t-dialog`。 |
||||
|
3. Monitor 搜索 → `t-input`;设备多选 → `t-checkbox`;机巢状态详情弹窗 → `t-dialog`。 |
||||
|
|
||||
|
## 非目标 |
||||
|
|
||||
|
- 不改后台。 |
||||
|
- 不在本轮替换主按钮体系 / 分页 / Tab / 表格(Wave B/C)。 |
||||
|
- 不替换地图底图按钮与强定制飞行控制条外观(控制条按钮 Wave B 再评估;底图永久保留原生)。 |
||||
|
- 不做完整主题 token 重绘。 |
||||
|
|
||||
|
## 设计 |
||||
|
|
||||
|
### 1. Toast |
||||
|
|
||||
|
- `uiStore.toast(message)` 改为调用 `MessagePlugin.info/success`(默认 `info`,文案原样)。 |
||||
|
- 删除 `App.vue` 自定义 `.toast` DOM 与 `toastMsg/toastVisible` 展示态(store 可保留薄封装函数)。 |
||||
|
- 时长约 2.2s,对齐现网。 |
||||
|
|
||||
|
### 2. Confirm |
||||
|
|
||||
|
- 保留 `await ui.confirm(title, desc, checks)` Promise 语义。 |
||||
|
- 实现改为 `DialogPlugin.confirm` 或受控 `t-dialog`:标题、描述、checks 列表(有则展示)、取消/确认。 |
||||
|
- 删除 `App.vue` 自定义 confirm DOM;`resolveConfirm` 可内聚到 store,不再依赖模板按钮。 |
||||
|
|
||||
|
### 3. 业务弹窗 → `t-dialog` |
||||
|
|
||||
|
| 位置 | visible 字段 | |
||||
|
|------|----------------| |
||||
|
| `DockEditModal.vue` | `visible` | |
||||
|
| `DevicesView` 添加机巢 / 固件升级 | `addDockVisible` / `firmwareVisible` | |
||||
|
| `FirmwaresView` 新增编辑 | `modalVisible` | |
||||
|
| `TasksView` 新建任务 / 航点编辑 | `createTaskOpen` / waypoint editor | |
||||
|
| `AccountView` 编辑资料 / 改密 | `editOpen` / `passwordOpen` | |
||||
|
| `MonitorView` 机巢状态 | `dockStatusOpen` | |
||||
|
|
||||
|
约定: |
||||
|
- `v-model:visible` + `:header` + 默认插槽放原表单/内容;页脚用 `#footer` 或原 footer 按钮(本轮脚按钮可暂留原生,Wave B 再统一 `t-button`)。 |
||||
|
- `@close` / 点击遮罩关闭行为对齐现网 `@click.self`。 |
||||
|
- 宽度用 `width` / class,接近现弹窗。 |
||||
|
|
||||
|
### 4. Monitor 残留表单 |
||||
|
|
||||
|
- 搜索:`t-input` clearable + prefix search。 |
||||
|
- 设备卡多选:`t-checkbox`,保持 `selectedDockIds` Set 语义(`:checked` + `@change` 或 `v-model` 适配)。 |
||||
|
|
||||
|
## 验收 |
||||
|
|
||||
|
1. 任意页 `ui.toast` 出现 TDesign Message,无旧右下角 toast 条。 |
||||
|
2. 退出登录 / 删机巢等 `ui.confirm` 为 TDesign 对话框,确认/取消 Promise 正确。 |
||||
|
3. 上表业务弹窗均为 `t-dialog`,无对应 `modal-backdrop`(App 内确认框除外且应已删除)。 |
||||
|
4. Monitor:搜索与 checkbox 为 TDesign;地图卫星/街道仍为原生按钮。 |
||||
|
5. 登录与指令下发主路径不回归。 |
||||
|
|
||||
|
## 后续 |
||||
|
|
||||
|
- **Wave B:** 按钮体系 + 分页(含监控侧栏常规按钮;底图除外)。 |
||||
|
- **Wave C:** Tab/分段 + `t-table`。 |
||||
Loading…
Reference in new issue