feat: 实现逻辑分析仪的捕获功能

src/components/LogicAnalyzer/LogicAnalyzerManager.ts

@@ -262,6 +262,11 @@ const [useProvideLogicAnalyzer, useLogicAnalyzerState] = createInjectionState(
 
         // 2. 轮询捕获状态
         const pollCaptureStatus = async (): Promise<boolean> => {
+          // 如果不再处于捕获状态，说明被停止了
+          if (!isCapturing.value) {
+            return false;
+          }
+
           const status = await client.getCaptureStatus();
 
           // 检查是否捕获完成
@@ -285,7 +290,13 @@ const [useProvideLogicAnalyzer, useLogicAnalyzerState] = createInjectionState(
         };
 
         // 等待捕获完成
-        await pollCaptureStatus();
+        const captureCompleted = await pollCaptureStatus();
+        
+        // 如果捕获被停止，不继续处理数据
+        if (!captureCompleted) {
+          alert?.info("捕获已停止", 2000);
+          return;
+        }
 
         // 3. 获取捕获数据
         const base64Data = await client.getCaptureData();
@@ -341,6 +352,35 @@ const [useProvideLogicAnalyzer, useLogicAnalyzerState] = createInjectionState(
       }
     };
 
+    const stopCapture = async () => {
+      // 检查是否正在捕获
+      if (!isCapturing.value) {
+        alert.warn("当前没有正在进行的捕获操作", 2000);
+        return;
+      }
+
+      try {
+        const client = AuthManager.createAuthenticatedLogicAnalyzerClient();
+        
+        // 执行强制捕获来停止当前捕获
+        const forceSuccess = await client.setCaptureMode(false, true);
+        if (!forceSuccess) {
+          throw new Error("无法执行强制捕获");
+        }
+
+        // 设置捕获状态为false，这会使轮询停止
+        isCapturing.value = false;
+        
+        alert?.info("正在停止捕获...", 2000);
+      } catch (error) {
+        console.error("停止捕获失败:", error);
+        alert?.error(
+          `停止捕获失败: ${error instanceof Error ? error.message : "未知错误"}`,
+          3000,
+        );
+      }
+    };
+
     // 添加检查操作状态的计算属性
     const isOperationInProgress = computed(
       () => isApplying.value || isCapturing.value || operationMutex.isLocked(),
@@ -446,6 +486,7 @@ const [useProvideLogicAnalyzer, useLogicAnalyzerState] = createInjectionState(
       resetConfiguration,
       setLogicData,
       startCapture,
+      stopCapture, // 添加停止捕获方法
       generateTestData,
     };
   },

src/components/LogicAnalyzer/LogicalWaveFormDisplay.vue

@@ -24,7 +24,7 @@
         <p class="text-sm text-slate-500">点击下方按钮生成测试数据用于观察</p>
       </div>
 
-      <button
+      <!-- <button
         class="group relative px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-blue-300 active:scale-95"
         @click="analyzer.generateTestData"
       >
@@ -37,6 +37,34 @@
         <div
           class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 rounded-lg transition-opacity duration-200"
         ></div>
+      </button> -->
+      <button
+        class="group relative px-8 py-3 bg-gradient-to-r text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 active:scale-95"
+        :class="{
+          'from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus:ring-blue-300':
+            !analyzer.isCapturing.value,
+          'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 focus:ring-red-300':
+            analyzer.isCapturing.value,
+        }"
+        :disabled="
+          analyzer.isOperationInProgress.value && !analyzer.isCapturing.value
+        "
+        @click="
+          analyzer.isCapturing.value
+            ? analyzer.stopCapture()
+            : analyzer.startCapture()
+        "
+      >
+        <span class="flex items-center gap-2">
+          <template v-if="analyzer.isCapturing.value">
+            <Square class="w-5 h-5" />
+            停止捕获
+          </template>
+          <template v-else>
+            <Play class="w-5 h-5" />
+            开始捕获
+          </template>
+        </span>
       </button>
     </div>
   </div>
@@ -45,7 +73,7 @@
 <script setup lang="ts">
 import { computed, shallowRef } from "vue";
 import VChart from "vue-echarts";
-import { RefreshCcw } from "lucide-vue-next";
+import { RefreshCcw, Play, Square } from "lucide-vue-next";
 
 // Echarts
 import { use } from "echarts/core";