fix: 修改ui，并修复bug

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,

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
+    <div v-else class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500">
-      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,

src/views/Project/Oscilloscope.vue

@@ -8,10 +8,15 @@
             <Activity class="w-5 h-5" />
             波形显示
           </div>
-          <div>
+          <div class="flex items-center gap-2">
-            <button class="btn btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
+            <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 />