3.2 KiB

Raw Blame History

TDesign 全面替换 — Wave A（全局反馈 / 弹窗 / Monitor 残留表单）

背景

表单控件（select/input/number/time/switch）两轮已迁完。全站仍大量原生 button、自定义 modal-backdrop、自研 Toast/Confirm，以及 Monitor 残留搜索/checkbox。目标方向：基本上都使用组件库，除非特定。

特定保留（本轮及后续默认）： 地图底图控件（卫星/街道等 Mapbox 切换）。监控侧栏常规搜索/勾选要换。

目标（Wave A）

全局 Toast / 确认框切到 TDesign，调用方 API 不变（ui.toast / ui.confirm）。
业务弹窗从 modal-backdrop 迁到 t-dialog。
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 适配）。

验收

任意页 ui.toast 出现 TDesign Message，无旧右下角 toast 条。
退出登录 / 删机巢等 ui.confirm 为 TDesign 对话框，确认/取消 Promise 正确。
上表业务弹窗均为 t-dialog，无对应 modal-backdrop（App 内确认框除外且应已删除）。
Monitor：搜索与 checkbox 为 TDesign；地图卫星/街道仍为原生按钮。
登录与指令下发主路径不回归。

后续

Wave B： 按钮体系 + 分页（含监控侧栏常规按钮；底图除外）。
Wave C： Tab/分段 + t-table。