Browse Source

docs: 增加 MonitorDeviceList 设计与实现计划

左侧设备列表面板抽离,筛选与选中逻辑仍留页面。
main
xiaosi 3 weeks ago
parent
commit
b635c94dd3
  1. 48
      docs/superpowers/plans/2026-08-28-monitor-device-list.md
  2. 42
      docs/superpowers/specs/2026-08-28-monitor-device-list-design.md

48
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
<MonitorDeviceList
:dock-count="devices.docks.length"
:drone-count="devices.drones.length"
v-model:search="search"
v-model:filter="filter"
:filter-counts="filterCounts"
:docks="filteredDocks"
:selected-dock-ids="selectedDockIds"
:selected-id="selectedId"
:is-dock-active="isDockCardActive"
:altitude-of="droneAltitude"
@clear-selection="clearSelection"
@select-all="selectAllDocks"
@clear-dock-selection="clearDockSelection"
@select="select"
@toggle-select="setDockSelection"
/>
```
Commit: `refactor: 抽取 MonitorDeviceList 左侧设备列表`
### Task 2 冒烟
列表渲染;筛选/点选;空态。
## 约束
不改后台;精确 git add;中文 commit

42
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;跳过全量单测
Loading…
Cancel
Save