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

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. 不改后台。