From d632709089c4dc0d3af0259913ce4c49e4596fe8 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Mon, 31 Aug 2026 14:55:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96=20MonitorMapChro?=
 =?UTF-8?q?me=20=E5=9C=B0=E5=9B=BE=E5=B7=A5=E5=85=B7=E6=9D=A1=E5=9B=BE?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MonitorMapChrome.vue   | 48 +++++++++++++++++++++++++++
 src/views/MonitorView/MonitorView.vue | 44 +++++++++++-------------
 2 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 src/components/MonitorMapChrome.vue

diff --git a/src/components/MonitorMapChrome.vue b/src/components/MonitorMapChrome.vue
new file mode 100644
index 0000000..dffa2bb
--- /dev/null
+++ b/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>
diff --git a/src/views/MonitorView/MonitorView.vue b/src/views/MonitorView/MonitorView.vue
index 541e4cc..8cd489b 100644
--- a/src/views/MonitorView/MonitorView.vue
+++ b/src/views/MonitorView/MonitorView.vue
@@ -19,31 +19,24 @@
     />
 
     <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>
-
-      <CommandProgressFloat
-        :open="commandProgress.open"
-        :title="commandProgress.title"
-        :device-name="commandProgress.deviceName"
-        :step="commandProgress.step"
-        :status="commandProgress.status"
-        :result="commandProgress.result"
-        :error="commandProgress.error"
-        :terminal-label="commandProgressTerminalLabel"
-        @close="closeCommandProgress"
-      />
+      <MonitorMapChrome
+        :map-mode="mapMode"
+        :scale-text="mapScaleText"
+        @set-map-mode="setMapMode"
+        @fit-all="fitAll"
+      >
+        <CommandProgressFloat
+          :open="commandProgress.open"
+          :title="commandProgress.title"
+          :device-name="commandProgress.deviceName"
+          :step="commandProgress.step"
+          :status="commandProgress.status"
+          :result="commandProgress.result"
+          :error="commandProgress.error"
+          :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'