# 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`。