diff --git a/docs/superpowers/specs/2026-08-28-monitor-dock-device-card-design.md b/docs/superpowers/specs/2026-08-28-monitor-dock-device-card-design.md new file mode 100644 index 0000000..9fea464 --- /dev/null +++ b/docs/superpowers/specs/2026-08-28-monitor-dock-device-card-design.md @@ -0,0 +1,150 @@ +# Monitor DockDeviceCard 设计 + +## 背景 + +Alarms / Media 薄卡片已抽离。Monitor 侧栏仍是整段内联 `article.device-card`(checkbox、主行、绑定机子树、告警/离线条),与地图/控制逻辑挤在同一超大 SFC 中。 + +本阶段只抽 **单张机巢设备卡**,降低侧栏模板体积;搜索、筛选、多选条、列表容器与地图控制保持不动。 + +## 目标 + +1. 新增 `src/components/DockDeviceCard.vue`。 +2. `MonitorView` 的 `device-list` 循环改为渲染该组件。 +3. 视觉与交互保持现状(`prototype.css` 类名不变)。 +4. 选中态、多选 Set、过滤、地图联动仍由页面持有。 + +## 非目标 + +- 不抽 `BoundDroneRow` / filter-row / multi-select-bar / device-panel +- 不改地图、map-type、飞行控制、LivePlayer、详情抽屉 +- 不迁 CSS 到 scoped +- 不改 `devicesStore` 数据语义与加载策略 +- 不抽 Tasks 航线库卡 + +## 方案(已选) + +**dock 对象 + 选中态 props + 事件上抛。** + +| 项 | 说明 | +|----|------| +| 组件 | `DockDeviceCard.vue` | +| 数据 | 传入已带 `children` 的 dock(即现 `filteredDocks` 元素) | +| 状态 | `active` / `multiSelected` / `selectedDroneId` 由页面计算传入 | +| 行为 | `select`、`toggle-select` 上抛;页面继续调现有 `select` / `setDockSelection` | + +## 组件契约 + +### Props + +| prop | 类型 | 说明 | +|------|------|------| +| `dock` | Object | 含 `id/name/code/status/statusClass/updated/children[]`;child 含 `id/name/statusClass/battery` 等 | +| `active` | Boolean | 机巢卡高亮(机巢或其子机被选中) | +| `multiSelected` | Boolean | 多选勾选态样式 | +| `selectedDroneId` | String \| null | 当前选中无人机 id,用于 `bound-drone.active` | +| `altitudeOf` | Function \| null | 可选 `(droneId) => number \| null \| undefined`;飞行中摘要显示高度。页面传入 `(id) => devices.asset(id)?.altitude` | + +### Events + +| event | payload | 页面接线 | +|-------|---------|----------| +| `select` | `id: string` | `@select="select"` 或 `@select="select($event)"` | +| `toggle-select` | `{ id, checked }` 或 `(id, checked)` | 调 `setDockSelection` | + +推荐 payload:`@toggle-select="(id, checked) => setDockSelection(id, checked)"`(与现 checkbox `@change` 一致,两参数)。 + +### 内部职责 + +- 渲染现有 DOM 结构与 class: + - `article.device-card` + `active` / `multi-selected` + - `device-select-checkbox` + `t-checkbox` + - `device-card-main` / `dock-glyph` / `device-copy` / status + - `bound-drone` 子树(`flying` / `offline` / `active`) + - `device-alert` / `device-alert muted` +- **迁入** `droneSummary` / `droneTag`(逻辑与现 MonitorView 一致;高度走 `altitudeOf`) +- 不读写 Pinia;不直接改 `selectedDockIds` + +### 根结构(保持) + +```html +
+ + + + +
+``` + +## MonitorView 改造 + +```html +
+ +
暂无匹配设备
+
+``` + +```js +import DockDeviceCard from '@/components/DockDeviceCard.vue' + +function droneAltitude(id) { + return devices.asset(id)?.altitude +} +``` + +- 删除页面内联的 `droneSummary` / `droneTag`(迁入组件后) +- 保留:`groupedDocks` / `filteredDocks` / `filterCounts` / `selectedDockIds` / `isDockCardActive` / 搜索与 filter-row / multi-select-bar +- `setDockSelection(id, checked)` 签名保持,便于直接作事件处理器 + +## 样式 + +- 继续用全局 `prototype.css`:`.device-card`、`.bound-drone`、`.device-alert` 等 +- 组件不加改变视觉的 scoped 规则 + +## 文件清单 + +| 动作 | 路径 | +|------|------| +| 新增 | `src/components/DockDeviceCard.vue` | +| 修改 | `src/views/MonitorView/MonitorView.vue` | + +## 实现顺序 + +1. **A** — 创建 `DockDeviceCard`,迁入 summary/tag;MonitorView 接入;单独 commit +2. **B** — 浏览器冒烟:筛选、点选机巢/无人机、多选 checkbox、告警/离线条、地图选中联动 + +建议 commit: + +- `refactor: 抽取 Monitor DockDeviceCard 侧栏设备卡` + +## 验收标准 + +1. 侧栏卡外观与抽离前一致(含 active / multi-selected / bound-drone / alert) +2. 点击机巢/无人机仍触发原 `select` → 地图/详情聚焦 +3. checkbox 多选、全选/取消选择仍可用 +4. 飞行中摘要在有高度时显示 `飞行中 · N m` +5. 无 console error;不回归 Alarms/Media/Devices + +## 风险 + +| 风险 | 处理 | +|------|------| +| `altitudeOf` 未传导致高度丢失 | 页面必须传入;组件无回调时降级为「飞行中」 | +| checkbox `@change` 参数形态 | 与 TDesign 一致,组件内转成 `(id, checked)` 再 emit | +| Monitor SFC 仍很大 | 本阶段只抽卡;地图/控制后续另议 | + +## 约束 + +- 工作目录:`/Users/qingyuan/CodeProject/laic-frontend` +- 不改后台;精确 `git add`;中文 commit +- 跳过全量单测;以页面冒烟为准