feat: 完成逻辑分析仪前端设计

src/views/Project/LogicAnalyzer.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="bg-base-100 flex flex-col">
+  <div class="bg-base-100 flex flex-col gap-10 mb-5">
     <!-- 逻辑信号展示 -->
     <div class="card bg-base-200 shadow-xl">
       <div class="card-body">
-        <h2 class="card-title">
-          <Zap class="w-5 h-5" />
-          逻辑信号分析
+        <h2 class="card-title flex justify-between items-center">
+          <div class="flex items-center gap-2">
+            <Zap class="w-5 h-5" />
+            逻辑信号分析
+          </div>
+          <div class="flex items-center gap-2">
+            <button class="btn btn-sm btn-error" @click="handleDeleteData">
+              清空
+            </button>
+          </div>
         </h2>
-        <LogicalWaveFormDisplay :data="generateTestLogicData()" />
+        <LogicalWaveFormDisplay />
       </div>
     </div>
 
     <!-- 触发设置 -->
-    <div class="card bg-base-200 shadow-xl mt-4">
+    <div class="card bg-base-200 shadow-xl">
       <div class="card-body">
         <h2 class="card-title">
           <Settings class="w-5 h-5" />
@@ -21,29 +28,24 @@
         <TriggerSettings />
       </div>
     </div>
-
-    <!-- 通道配置 -->
-    <div class="card bg-base-200 shadow-xl mt-4">
-      <div class="card-body">
-        <h2 class="card-title">
-          <Layers class="w-5 h-5" />
-          通道配置
-        </h2>
-        <ChannelConfig />
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Zap, Settings, Layers } from "lucide-vue-next";
 import { useEquipments } from "@/stores/equipments";
-import { 
-  LogicalWaveFormDisplay, 
+import {
+  LogicalWaveFormDisplay,
   generateTestLogicData,
   TriggerSettings,
-  ChannelConfig 
 } from "@/components/LogicAnalyzer";
+import { useProvideLogicAnalyzer } from "@/components/LogicAnalyzer";
+
+const analyzer = useProvideLogicAnalyzer();
+
+function handleDeleteData() {
+  analyzer.logicData.value = undefined;
+}
 
 // 使用全局设备配置
 const equipments = useEquipments();