refactor: 抽取 CommandProgressFloat 指令进度浮层

src/components/CommandProgressFloat.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    v-if="open"
+    class="command-progress-float"
+    role="status"
+    aria-live="polite"
+  >
+    <header>
+      <div>
+        <strong>{{ title }}</strong>
+        <small>{{ deviceName }}</small>
+      </div>
+      <button type="button" class="icon-button" title="关闭" @click="$emit('close')">
+        <svg><use href="#i-x" /></svg>
+      </button>
+    </header>
+    <ol>
+      <li :class="{ done: step > 1, active: step === 1 }">
+        <i></i><span>确认下发</span><em>已确认</em>
+      </li>
+      <li :class="{ done: step > 2, active: step === 2 }">
+        <i></i><span>已下发</span><em>{{ step >= 2 ? '等待应答' : '…' }}</em>
+      </li>
+      <li
+        :class="{
+          done: step >= 3 && !error && status === 'acked',
+          active: step === 3,
+          fail: step >= 3 && (status === 'timeout' || status === 'terminal' || !!error),
+        }"
+      >
+        <i></i>
+        <span>{{ terminalLabel }}</span>
+        <em>{{ error || result || '…' }}</em>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  deviceName: { type: String, default: '' },
+  step: { type: Number, default: 1 },
+  status: { type: String, default: '' },
+  result: { type: String, default: '' },
+  error: { type: String, default: '' },
+  terminalLabel: { type: String, default: '' },
+})
+
+defineEmits(['close'])
+</script>

src/views/MonitorView/MonitorView.vue

@@ -54,41 +54,17 @@
       </div>
       <div class="map-scale">{{ mapScaleText }}</div>
 
-      <div
-        v-if="commandProgress.open"
-        class="command-progress-float"
-        role="status"
-        aria-live="polite"
-      >
-        <header>
-          <div>
-            <strong>{{ commandProgress.title }}</strong>
-            <small>{{ commandProgress.deviceName }}</small>
-          </div>
-          <button type="button" class="icon-button" title="关闭" @click="closeCommandProgress">
-            <svg><use href="#i-x" /></svg>
-          </button>
-        </header>
-        <ol>
-          <li :class="{ done: commandProgress.step > 1, active: commandProgress.step === 1 }">
-            <i></i><span>确认下发</span><em>已确认</em>
-          </li>
-          <li :class="{ done: commandProgress.step > 2, active: commandProgress.step === 2 }">
-            <i></i><span>已下发</span><em>{{ commandProgress.step >= 2 ? '等待应答' : '…' }}</em>
-          </li>
-          <li
-            :class="{
-              done: commandProgress.step >= 3 && !commandProgress.error && commandProgress.status === 'acked',
-              active: commandProgress.step === 3,
-              fail: commandProgress.step >= 3 && (commandProgress.status === 'timeout' || commandProgress.status === 'terminal' || !!commandProgress.error),
-            }"
-          >
-            <i></i>
-            <span>{{ commandProgressTerminalLabel }}</span>
-            <em>{{ commandProgress.error || commandProgress.result || '…' }}</em>
-          </li>
-        </ol>
-      </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"
+      />
     </div>
 
     <MonitorDetailPanel
@@ -140,6 +116,7 @@ import { applyChineseLabels } from '@/utils/mapLabels'
 import MonitorDetailPanel from '@/components/MonitorDetailPanel.vue'
 import DockStatusDialog from '@/components/DockStatusDialog.vue'
 import DockDeviceCard from '@/components/DockDeviceCard.vue'
+import CommandProgressFloat from '@/components/CommandProgressFloat.vue'
 import { getLivePlayURL, heartbeatLive, joinLive, leaveLive } from '@/api/live'
 import request from '@/utils/http'
 import * as urls from '@/config/urls'