feat: 持续完善逻辑分析仪的界面

src/components/LogicAnalyzer/ChannelConfig.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="space-y-4">
+    <!-- 通道状态概览 -->
+    <div class="stats stats-horizontal bg-base-100 shadow flex justify-between">
+      <div class="stat">
+        <div class="stat-title">总通道数</div>
+        <div class="stat-value text-primary">8</div>
+        <div class="stat-desc">逻辑分析仪通道</div>
+      </div>
+
+      <div class="stat">
+        <div class="stat-title">启用通道</div>
+        <div class="stat-value text-success">{{ enabledChannelCount }}</div>
+        <div class="stat-desc">当前激活通道</div>
+      </div>
+
+      <div class="stat">
+        <div class="stat-title">采样率</div>
+        <div class="stat-value text-info">100MHz</div>
+        <div class="stat-desc">最大采样频率</div>
+      </div>
+    </div>
+
+    <!-- 通道配置列表 -->
+    <div class="space-y-2">
+      <div class="flex items-center justify-between p-2 bg-base-300 rounded-lg">
+        <span class="font-medium">通道</span>
+        <span class="font-medium">启用</span>
+        <span class="font-medium">标签</span>
+        <span class="font-medium">颜色</span>
+      </div>
+
+      <div
+        v-for="(channel, index) in channels"
+        :key="index"
+        class="flex items-center justify-between p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
+      >
+        <!-- 通道编号 -->
+        <div class="flex items-center gap-2">
+          <span class="font-mono font-medium w-12">CH{{ index }}</span>
+          <div
+            class="w-3 h-3 rounded-full border-2 border-white shadow-sm"
+            :style="{ backgroundColor: channel.color }"
+          ></div>
+        </div>
+
+        <!-- 启用开关 -->
+        <div class="form-control">
+          <input
+            type="checkbox"
+            v-model="channel.enabled"
+            class="toggle toggle-sm toggle-primary"
+            @change="updateChannelStatus(index)"
+          />
+        </div>
+
+        <!-- 通道标签 -->
+        <div class="form-control w-32">
+          <input
+            type="text"
+            v-model="channel.label"
+            :placeholder="`通道 ${index}`"
+            class="input input-sm input-bordered w-full"
+            :disabled="!channel.enabled"
+          />
+        </div>
+
+        <!-- 颜色选择 -->
+        <div class="form-control">
+          <input
+            type="color"
+            v-model="channel.color"
+            class="w-8 h-8 rounded border-2 border-base-300 cursor-pointer"
+            :disabled="!channel.enabled"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 批量操作 -->
+    <div class="flex gap-2 pt-4">
+      <button @click="enableAllChannels" class="btn btn-primary btn-sm">
+        全部启用
+      </button>
+
+      <button @click="disableAllChannels" class="btn btn-outline btn-sm">
+        全部禁用
+      </button>
+
+      <button @click="resetChannelLabels" class="btn btn-outline btn-sm">
+        重置标签
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from "vue";
+
+// 通道接口定义
+interface Channel {
+  enabled: boolean;
+  label: string;
+  color: string;
+}
+
+// 预设配置接口
+interface Preset {
+  name: string;
+  description: string;
+  channels: Partial<Channel>[];
+}
+
+// 默认颜色数组
+const defaultColors = [
+  "#FF5733",
+  "#33FF57",
+  "#3357FF",
+  "#FF33F5",
+  "#F5FF33",
+  "#33FFF5",
+  "#FF8C33",
+  "#8C33FF",
+];
+
+// 通道配置
+const channels = reactive<Channel[]>(
+  Array.from({ length: 8 }, (_, index) => ({
+    enabled: false,
+    label: `CH${index}`,
+    color: defaultColors[index],
+  })),
+);
+
+// 计算启用的通道数量
+const enabledChannelCount = computed(
+  () => channels.filter((channel) => channel.enabled).length,
+);
+
+// 更新通道状态
+const updateChannelStatus = (index: number) => {
+  console.log(`通道 ${index} 状态更新:`, channels[index].enabled);
+};
+
+// 启用所有通道
+const enableAllChannels = () => {
+  channels.forEach((channel) => {
+    channel.enabled = true;
+  });
+};
+
+// 禁用所有通道
+const disableAllChannels = () => {
+  channels.forEach((channel) => {
+    channel.enabled = false;
+  });
+};
+
+// 重置通道标签
+const resetChannelLabels = () => {
+  channels.forEach((channel, index) => {
+    channel.label = `CH${index}`;
+  });
+};
+
+// 应用预设配置
+const applyPreset = (preset: Preset) => {
+  preset.channels.forEach((presetChannel, index) => {
+    if (index < channels.length && presetChannel) {
+      Object.assign(channels[index], presetChannel);
+    }
+  });
+};
+</script>