# 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；跳过全量单测