2 changed files with 120 additions and 0 deletions
@ -0,0 +1,61 @@ |
|||||
|
# Devices 真分页 + 弹窗/样式收口 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-dialog` 补 `destroy-on-close`;Devices 列表专用真分页;删除 `prototype.css` 死样式。 |
||||
|
|
||||
|
**Architecture:** 弹窗统一销毁重建;DevicesView 自管分页请求,不改 `devicesStore.load` 近全量语义;CSS 只删确认无引用的规则。 |
||||
|
|
||||
|
**Tech Stack:** Vue 3、tdesign-vue-next、现有 `/v1/docks` `/v1/drones` 分页契约 |
||||
|
|
||||
|
**Spec:** `docs/superpowers/specs/2026-08-28-devices-pagination-cleanup-design.md` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 1: A — t-dialog destroy-on-close |
||||
|
|
||||
|
**Files:** 所有含 `<t-dialog` 的 vue(DockEditModal、DevicesView、FirmwaresView、TasksView、AccountView、MonitorView、LoginView 等) |
||||
|
|
||||
|
- [ ] 每个业务 `t-dialog` 增加 `destroy-on-close`(或 `:destroy-on-close="true"`) |
||||
|
- [ ] 确认打开时仍有表单 init(已有则不动) |
||||
|
- [ ] Commit: `fix: 业务弹窗启用 destroy-on-close` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 2: B — Devices 列表真分页 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/DevicesView/DevicesView.vue` |
||||
|
- 不改坏:`src/stores/modules/devicesStore.js` 的 Monitor 近全量 `load()` |
||||
|
|
||||
|
- [ ] View 增加 `pageNum`/`pageSize=20`/`total`/`tableRecords` |
||||
|
- [ ] `loadTable()`:按 tab 请求 `urls.DOCKS` 或 `urls.DRONES`,params 含 pageNum/pageSize/keyword;写入 records+total |
||||
|
- [ ] `t-pagination` 外置绑定;tab/搜索变更重置 pageNum=1 再 loadTable |
||||
|
- [ ] 状态/绑定筛:仅过滤当前页;角标优先用接口 total |
||||
|
- [ ] 写操作成功后 `loadTable()`,并可选 `devices.load()` 刷新全局缓存 |
||||
|
- [ ] Commit: `feat: 设备列表接入服务端分页` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 3: C — 删除死 CSS |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/styles/prototype.css` |
||||
|
|
||||
|
- [ ] 删除已无 Vue 引用的 `.primary-command` / `.plain-command` / `.icon-command`、`.business-tabs`、`.mode-segment`、裸 `.asset-table` 等(删除前再 `rg` 确认) |
||||
|
- [ ] 保留 `.asset-table-wrap`、`.table-footer`、业务 layout、地图/控制样式 |
||||
|
- [ ] Commit: `chore: 清理 TDesign 迁移后无用的按钮与表样式` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 4: 验收 |
||||
|
|
||||
|
- [ ] 抽检弹窗关闭再开无脏数据 |
||||
|
- [ ] Devices 翻页网络 `pageNum` 变化;Monitor 地图仍有点 |
||||
|
- [ ] 死 class 无引用;关键页按钮/表可见 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 约定 |
||||
|
|
||||
|
- 不改后台;不 `git add -A`;Main 统一冒烟。 |
||||
@ -0,0 +1,59 @@ |
|||||
|
# Devices 真分页 + 弹窗/样式收口 |
||||
|
|
||||
|
## 背景 |
||||
|
|
||||
|
TDesign A/B/C 已完成。Devices 列表仍通过共用 `devicesStore.load()` 拉 `pageSize=100` 近全量,丢弃 `total/pages`;footer 仅展示条数。全仓 `t-dialog` 缺 `destroy-on-close`。`prototype.css` 残留已无 Vue 引用的命令按钮/旧 tabs/裸表样式。 |
||||
|
|
||||
|
后端 `/v1/docks`、`/v1/drones` 已支持 `pageNum`/`pageSize`/`keyword`(及 dock `registerStatus`),返回 `{ pageNum, pageSize, pages, total, records }`。 |
||||
|
|
||||
|
## 目标 |
||||
|
|
||||
|
1. **A. 弹窗收口:** 全仓业务 `t-dialog` 补 `destroy-on-close`;打开时重置表单(对齐现有 open 逻辑)。 |
||||
|
2. **B. Devices 真分页:** 列表页专用分页请求;Monitor/Control 等继续用近全量 `devicesStore.load`。 |
||||
|
3. **C. 样式收口:** 删除已无引用的死 CSS;保留仍在用的布局类。 |
||||
|
|
||||
|
## 非目标 |
||||
|
|
||||
|
- 不改后台 API。 |
||||
|
- 不把共用 `devicesStore.load` 改成真分页(避免地图/下拉缺设备)。 |
||||
|
- 不做 Monitor/Alarms 卡列表组件化。 |
||||
|
- 不把状态/绑定筛强行接到后端(后端无等价筛选时保持本页客户端过滤)。 |
||||
|
|
||||
|
## 设计 |
||||
|
|
||||
|
### A. destroy-on-close |
||||
|
|
||||
|
涉及:`DockEditModal`、Devices 添加机巢/固件升级、Firmwares、Tasks 新建/航点、Account 两弹窗、Monitor 机巢状态、Login 找回密码等所有业务 `t-dialog`。 |
||||
|
|
||||
|
- 统一加 `:destroy-on-close="true"`(或组件默认等价属性)。 |
||||
|
- 打开路径已赋值表单的保持;依赖“关闭后 DOM 残留状态”的逻辑改为打开时显式 init。 |
||||
|
|
||||
|
### B. Devices 列表专用分页 |
||||
|
|
||||
|
- `DevicesView` 维护 `pageNum` / `pageSize=20` / `total`;按当前 tab 请求 `DOCKS` 或 `DRONES`。 |
||||
|
- Query:`pageNum`、`pageSize`、`keyword`(搜索框);dock 可附带后端已有 `registerStatus` 若与 UI 对齐,否则不传。 |
||||
|
- 列表数据用 View 本地 `tableRecords`,**不覆盖** `devicesStore.docks/drones` 全量缓存。 |
||||
|
- Tab 角标:可用 store 近全量 length(进入页可顺带 `devices.load()` 刷新缓存),或显示当前 `total`;推荐角标用本次列表接口 `total`,避免与分页语义打架。 |
||||
|
- 外置 `t-pagination`:`v-model:current` + `:total` + `:page-size`,翻页重新请求。 |
||||
|
- 状态/绑定等仅前端有的筛:在**当前页 records** 上过滤;空态文案可提示「仅筛选当前页结果」。 |
||||
|
- 增删改成功后:刷新当前列表页 + 可选 `devices.load()` 更新全局缓存。 |
||||
|
|
||||
|
### C. 死样式删除 |
||||
|
|
||||
|
可删(确认 Vue 无引用后):`.primary-command` / `.plain-command` / `.icon-command`、`.business-tabs`、`.mode-segment`、裸 `.asset-table` 表样式等。 |
||||
|
|
||||
|
保留:`.asset-table-wrap`、`.business-workspace` / `.business-panel`、`.table-footer`(仍包着 pagination)、地图/控制相关、Monitor 卡样式等。 |
||||
|
|
||||
|
## 切分 |
||||
|
|
||||
|
1. A 弹窗 `destroy-on-close` |
||||
|
2. B Devices 真分页 |
||||
|
3. C 删死 CSS |
||||
|
4. 验收 |
||||
|
|
||||
|
## 验收 |
||||
|
|
||||
|
1. 关闭再开业务弹窗无脏数据;DOM 无长期残留多实例(抽检 Devices/Firmwares/Tasks)。 |
||||
|
2. Devices:翻页请求 `pageNum` 变化;`total` 正确;Monitor 地图设备点仍在。 |
||||
|
3. `prototype.css` 已删死 class;页面无样式回归到「按钮消失」级别问题。 |
||||
|
4. 不改后台。 |
||||
Loading…
Reference in new issue