Browse Source

docs: 增加 Devices 真分页与弹窗样式收口设计计划

覆盖 destroy-on-close、列表专用分页与死 CSS 清理。
main
xiaosi 3 weeks ago
parent
commit
a06e081bcd
  1. 61
      docs/superpowers/plans/2026-08-28-devices-pagination-cleanup.md
  2. 59
      docs/superpowers/specs/2026-08-28-devices-pagination-cleanup-design.md

61
docs/superpowers/plans/2026-08-28-devices-pagination-cleanup.md

@ -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 统一冒烟。

59
docs/superpowers/specs/2026-08-28-devices-pagination-cleanup-design.md

@ -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…
Cancel
Save