From 912eb625f5ff3fa42c328c9a9f0b00380972c292 Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Tue, 22 Jul 2025 02:28:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9ui=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Oscilloscope/OscilloscopeManager.ts  |  9 +++++++--
 .../Oscilloscope/OscilloscopeWaveformDisplay.vue    | 13 ++++---------
 src/views/Project/Oscilloscope.vue                  |  9 +++++++--
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/Oscilloscope/OscilloscopeManager.ts b/src/components/Oscilloscope/OscilloscopeManager.ts
index 821e82d..5b3cee3 100644
--- a/src/components/Oscilloscope/OscilloscopeManager.ts
+++ b/src/components/Oscilloscope/OscilloscopeManager.ts
@@ -1,4 +1,4 @@
-import { createInjectionState } from "@vueuse/core";
+import { autoResetRef, createInjectionState } from "@vueuse/core";
 import { shallowRef, reactive, ref, computed } from "vue";
 import { Mutex } from "async-mutex";
 import {
@@ -83,6 +83,10 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
     alert.info("配置已重置", 2000);
   };
 
+  const clearOscilloscopeData = () => {
+    oscData.value = undefined;
+  }
+
   // 获取数据
   const getOscilloscopeData = async () => {
     try {
@@ -173,6 +177,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
       return;
     }
     isCapturing.value = false;
+    stopAutoRefresh();
     const release = await operationMutex.acquire();
     try {
       const client = AuthManager.createAuthenticatedOscilloscopeApiClient();
@@ -181,7 +186,6 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
       alert.info("捕获已停止", 2000);
     } catch (error) {
       alert.error("停止捕获失败", 3000);
-      isCapturing.value = true;
     } finally {
       release();
     }
@@ -274,6 +278,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
 
     applyConfiguration,
     resetConfiguration,
+    clearOscilloscopeData,
     getOscilloscopeData,
     startCapture,
     stopCapture,
diff --git a/src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue b/src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue
index e0264ea..4c4b801 100644
--- a/src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue
+++ b/src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue
@@ -2,10 +2,7 @@
   <div class="w-full h-100 flex flex-col">
     <!-- 原有内容 -->
     <v-chart v-if="hasData" class="w-full h-full" :option="option" autoresize />
-    <div
-      v-else
-      class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500"
-    >
+    <div v-else class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500">
       <span> 暂无数据 </span>
       <!-- 采集控制按钮 -->
       <div class="flex justify-center items-center mb-2">
@@ -16,13 +13,11 @@
               !oscManager.isCapturing.value,
             'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 focus:ring-red-300':
               oscManager.isCapturing.value,
-          }"
-          @click="
+          }" @click="
             oscManager.isCapturing.value
               ? oscManager.stopCapture()
               : oscManager.startCapture()
-          "
-        >
+            ">
           <span class="flex items-center gap-2">
             <template v-if="oscManager.isCapturing.value">
               <Square class="w-5 h-5" />
@@ -162,7 +157,7 @@ const option = computed((): EChartsOption => {
         saveAsImage: {},
       },
     },
-    dataZoom: [
+    dataZoom: (oscManager.isCapturing.value) ? [] : [
       {
         type: "inside",
         start: 0,
diff --git a/src/views/Project/Oscilloscope.vue b/src/views/Project/Oscilloscope.vue
index 93ac6c1..fc9b869 100644
--- a/src/views/Project/Oscilloscope.vue
+++ b/src/views/Project/Oscilloscope.vue
@@ -8,10 +8,15 @@
             <Activity class="w-5 h-5" />
             波形显示
           </div>
-          <div>
-            <button class="btn btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
+          <div class="flex items-center gap-2">
+            <button class="btn btn-sm btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
               停止捕获
             </button>
+            <div class="flex items-center gap-2">
+              <button class="btn btn-sm btn-error" @click="osc.clearOscilloscopeData">
+                清空
+              </button>
+            </div>
           </div>
         </h2>
         <OscilloscopeWaveformDisplay />