FPGA_WebLab/src/components/LogicAnalyzer/ChannelConfig.vue

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