You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1.3 KiB

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