refactor: 抽取 MonitorMapChrome 地图工具条图例

src/components/MonitorMapChrome.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="map-toolbar">
+    <button
+      class="map-type"
+      type="button"
+      :class="{ active: mapMode === 'satellite' }"
+      @click="emit('set-map-mode', 'satellite')"
+    >
+      卫星
+    </button>
+    <button
+      class="map-type"
+      type="button"
+      :class="{ active: mapMode === 'street' }"
+      @click="emit('set-map-mode', 'street')"
+    >
+      地图
+    </button>
+    <button class="icon-button" title="查看全部设备" @click="emit('fit-all')">
+      <svg><use href="#i-maximize" /></svg>
+    </button>
+  </div>
+
+  <div class="map-legend">
+    <span><i class="green"></i>在线机巢</span>
+    <span><i class="blue"></i>飞行中</span>
+    <span><i class="red"></i>告警</span>
+    <span><i class="gray"></i>离线</span>
+  </div>
+  <div class="map-scale">{{ scaleText }}</div>
+
+  <slot />
+</template>
+
+<script setup>
+defineProps({
+  mapMode: {
+    type: String,
+    default: 'satellite',
+  },
+  scaleText: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['set-map-mode', 'fit-all'])
+</script>

src/views/MonitorView/MonitorView.vue

@@ -19,20 +19,12 @@
     />
 
     <div class="map-panel">
-      <div class="map-toolbar">
-        <button class="map-type" type="button" :class="{ active: mapMode === 'satellite' }" @click="setMapMode('satellite')">卫星</button>
-        <button class="map-type" type="button" :class="{ active: mapMode === 'street' }" @click="setMapMode('street')">地图</button>
-        <button class="icon-button" title="查看全部设备" @click="fitAll"><svg><use href="#i-maximize" /></svg></button>
-      </div>
-
-      <div class="map-legend">
-        <span><i class="green"></i>在线机巢</span>
-        <span><i class="blue"></i>飞行中</span>
-        <span><i class="red"></i>告警</span>
-        <span><i class="gray"></i>离线</span>
-      </div>
-      <div class="map-scale">{{ mapScaleText }}</div>
-
+      <MonitorMapChrome
+        :map-mode="mapMode"
+        :scale-text="mapScaleText"
+        @set-map-mode="setMapMode"
+        @fit-all="fitAll"
+      >
         <CommandProgressFloat
           :open="commandProgress.open"
           :title="commandProgress.title"
@@ -44,6 +36,7 @@
           :terminal-label="commandProgressTerminalLabel"
           @close="closeCommandProgress"
         />
+      </MonitorMapChrome>
     </div>
 
     <MonitorDetailPanel
@@ -96,6 +89,7 @@ import MonitorDetailPanel from '@/components/MonitorDetailPanel.vue'
 import MonitorDeviceList from '@/components/MonitorDeviceList.vue'
 import DockStatusDialog from '@/components/DockStatusDialog.vue'
 import CommandProgressFloat from '@/components/CommandProgressFloat.vue'
+import MonitorMapChrome from '@/components/MonitorMapChrome.vue'
 import { getLivePlayURL, heartbeatLive, joinLive, leaveLive } from '@/api/live'
 import request from '@/utils/http'
 import * as urls from '@/config/urls'