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

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";