FPGA_WebLab/src/components/LogicAnalyzer/TriggerSettings.vue

<template>
  <div class="space-y-6">
    <!-- 通道配置 -->
    <div class="form-control">
      <!-- 全局触发模式选择和通道组配置 -->
      <div class="flex flex-col lg:flex-row justify-between gap-4 my-4 mx-2">
        <!-- 左侧：全局触发模式和通道组选择 -->
        <div class="flex flex-col lg:flex-row gap-4">
          <div class="flex flex-row gap-2 items-center">
            <label class="label">
              <span class="label-text text-sm">全局触发逻辑</span>
            </label>
            <select
              v-model="currentGlobalMode"
              @change="setGlobalMode(currentGlobalMode)"
              class="select select-sm select-bordered"
            >
              <option
                v-for="mode in globalModes"
                :key="mode.value"
                :value="mode.value"
              >
                {{ mode.label }} - {{ mode.description }}
              </option>
            </select>
          </div>

          <div class="flex flex-row gap-2 items-center">
            <label class="label">
              <span class="label-text text-sm">通道组</span>
            </label>
            <select
              v-model="currentChannelDiv"
              @change="setChannelDiv(currentChannelDiv)"
              class="select select-sm select-bordered"
            >
              <option
                v-for="option in channelDivOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </div>

          <div class="flex flex-row gap-2 items-center">
            <label class="label">
              <span class="label-text text-sm">捕获深度</span>
            </label>
            <select
              v-model="captureLength"
              class="select select-sm select-bordered"
            >
              <option
                v-for="option in captureLengthOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </div>

          <div class="flex flex-row gap-2 items-center">
            <label class="label">
              <span class="label-text text-sm">预捕获深度</span>
            </label>
            <select
              v-model="preCaptureLength"
              class="select select-sm select-bordered"
            >
              <option
                v-for="option in preCaptureLengthOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </div>
        </div>

        <!-- 右侧：操作按钮 -->
        <div class="flex flex-row gap-2">
          <button @click="resetConfiguration" class="btn btn-outline btn-sm">
            重置配置
          </button>
        </div>
      </div>
      <!-- 通道列表 -->
      <div class="space-y-2">
        <!-- 表头 -->
        <div
          class="flex items-center gap-2 p-2 bg-base-300 rounded-lg text-sm font-medium"
        >
          <span class="w-16">通道</span>
          <span class="w-32">标签</span>
          <span class="w-16">颜色</span>
          <span class="w-32">触发操作</span>
          <span class="w-32">触发值</span>
        </div>

        <!-- 通道配置网格 - 根据当前通道组动态显示 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
          <div
            v-for="(channel, index) in channels.filter(ch => ch.enabled)"
            :key="index"
            class="flex items-center gap-2 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
          >
            <!-- 通道编号和颜色指示 -->
            <div class="flex items-center gap-2 w-16">
              <span class="font-mono font-medium">CH{{ channels.indexOf(channel) }}</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 w-32">
              <input
                type="text"
                v-model="channel.label"
                :placeholder="`通道 ${channels.indexOf(channel)}`"
                class="input input-sm input-bordered w-full"
              />
            </div>

            <!-- 颜色选择 -->
            <div class="form-control w-16">
              <input
                type="color"
                v-model="channel.color"
                class="w-8 h-8 rounded border-2 border-base-300 cursor-pointer"
              />
            </div>

            <!-- 触发操作符选择 -->
            <select
              v-model="signalConfigs[channels.indexOf(channel)].operator"
              class="select select-sm select-bordered w-32"
            >
              <option
                v-for="op in operators"
                :key="op.value"
                :value="op.value"
              >
                {{ op.label }}
              </option>
            </select>

            <!-- 触发信号值选择 -->
            <select
              v-model="signalConfigs[channels.indexOf(channel)].value"
              class="select select-sm select-bordered w-32"
            >
              <option
                v-for="val in signalValues"
                :key="val.value"
                :value="val.value"
              >
                {{ val.label }}
              </option>
            </select>
          </div>
        </div>

        <!-- 当没有启用通道时的提示 -->
        <div v-if="enabledChannelCount === 0" class="text-center py-8 text-base-content/60">
          <p class="text-lg font-medium">未启用任何通道</p>
          <p class="text-sm">请选择通道组来配置逻辑分析仪</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRequiredInjection } from "@/utils/Common";
import { useLogicAnalyzerState } from "./LogicAnalyzerManager";

const {
  currentGlobalMode,
  currentChannelDiv,
  captureLength,
  preCaptureLength,
  isApplying,
  channels,
  signalConfigs,
  enabledChannelCount,
  globalModes,
  operators,
  signalValues,
  channelDivOptions,
  captureLengthOptions,
  preCaptureLengthOptions,
  setChannelDiv,
  setGlobalMode,
  resetConfiguration,
} = useRequiredInjection(useLogicAnalyzerState);
</script>