diff --git a/docs/superpowers/plans/2026-08-28-monitor-device-list.md b/docs/superpowers/plans/2026-08-28-monitor-device-list.md new file mode 100644 index 0000000..83c5aab --- /dev/null +++ b/docs/superpowers/plans/2026-08-28-monitor-device-list.md @@ -0,0 +1,48 @@ +# MonitorDeviceList 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:** 抽出左侧设备列表面板;筛选/选中逻辑留页面。 + +**Architecture:** 展示组件 + v-model search/filter + docks 列表 + 事件上抛。 + +**Spec:** `docs/superpowers/specs/2026-08-28-monitor-device-list-design.md` + +--- + +### Task 1 + +- Create `src/components/MonitorDeviceList.vue` +- Modify `src/views/MonitorView/MonitorView.vue` + +替换为类似: + +```vue + +``` + +Commit: `refactor: 抽取 MonitorDeviceList 左侧设备列表` + +### Task 2 冒烟 + +列表渲染;筛选/点选;空态。 + +## 约束 + +不改后台;精确 git add;中文 commit diff --git a/docs/superpowers/specs/2026-08-28-monitor-device-list-design.md b/docs/superpowers/specs/2026-08-28-monitor-device-list-design.md new file mode 100644 index 0000000..c1c2707 --- /dev/null +++ b/docs/superpowers/specs/2026-08-28-monitor-device-list-design.md @@ -0,0 +1,42 @@ +# MonitorDeviceList 设计 + +## 目标 + +将 Monitor 左侧 `aside.device-panel`(标题、搜索、筛选、多选条、DockDeviceCard 列表)抽为 `MonitorDeviceList.vue`。选中/筛选/多选状态与业务逻辑仍留页面。 + +## 非目标 + +- 不迁 `filteredDocks` / `filterCounts` / `select` / 多选 Set 计算 +- 不改 DockDeviceCard +- 不改地图与详情面板 + +## 契约 + +**Props** + +| prop | 说明 | +|------|------| +| `dockCount` / `droneCount` | 标题计数 | +| `search` | v-model 搜索 | +| `filter` | v-model:`all` \| `online` \| `alarm` | +| `filterCounts` | `{ all, online, alarm }` | +| `docks` | 当前列表(`filteredDocks`) | +| `selectedDockIds` | `Set` 或可 `has(id)` 的集合 | +| `selectedId` | 当前选中设备 id | +| `isDockActive` | `(dock) => boolean` | +| `altitudeOf` | `(drone) => string` 传给卡片 | + +**Emits:** `update:search` · `update:filter` · `clear-selection` · `select-all` · `clear-dock-selection` · `select` · `toggle-select` + +内部继续用 `DockDeviceCard`。 + +## 实现 + +1. `src/components/MonitorDeviceList.vue` +2. MonitorView 用组件替换 `aside.device-panel` +3. Commit: `refactor: 抽取 MonitorDeviceList 左侧设备列表` +4. 冒烟:搜索/筛选/点选机巢卡片正常 + +## 约束 + +精确 git add;中文 commit;跳过全量单测