From 179568b64c9d1cb19daa44bedb6f8575173d7c73 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Mon, 31 Aug 2026 14:47:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96=20CommandProgres?=
 =?UTF-8?q?sFloat=20=E6=8C=87=E4=BB=A4=E8=BF=9B=E5=BA=A6=E6=B5=AE=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandProgressFloat.vue | 52 +++++++++++++++++++++++++
 src/views/MonitorView/MonitorView.vue   | 47 ++++++----------------
 2 files changed, 64 insertions(+), 35 deletions(-)
 create mode 100644 src/components/CommandProgressFloat.vue

diff --git a/src/components/CommandProgressFloat.vue b/src/components/CommandProgressFloat.vue
new file mode 100644
index 0000000..10aff07
--- /dev/null
+++ b/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>
diff --git a/src/views/MonitorView/MonitorView.vue b/src/views/MonitorView/MonitorView.vue
index 37029ea..a149504 100644
--- a/src/views/MonitorView/MonitorView.vue
+++ b/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'