add: 逻辑分析仪可设置采样频率

src/components/LogicAnalyzer/TriggerSettings.vue

@@ -81,6 +81,44 @@
               {{ currentChannelDivDescription }}
             </p>
           </div>
+          <div class="flex flex-col gap-2">
+            <label class="block text-sm font-semibold antialiased text-slate-800">
+              采样频率
+            </label>
+            <div class="relative w-[200px]">
+              <button 
+                tabindex="0" 
+                type="button" 
+                class="flex items-center gap-4 justify-between h-max outline-none focus:outline-none text-slate-600 bg-transparent ring-transparent border border-slate-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none select-none text-start text-sm rounded-md py-2 px-2.5 ring shadow-sm hover:border-slate-800 hover:ring-slate-800/10 focus:border-slate-800 focus:ring-slate-800/10 w-full"
+                @click="toggleClockDivDropdown"
+                :aria-expanded="showClockDivDropdown"
+                aria-haspopup="listbox" 
+                role="combobox"
+              >
+                <span>{{ currentClockDivLabel }}</span>
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-[1em] w-[1em] translate-x-0.5 stroke-[1.5]">
+                  <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+                  <path d="M17 16L12 21L7 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+              </button>
+              <input readonly style="display:none" :value="currentclockDiv" />
+              <!-- 下拉菜单 -->
+              <div v-if="showClockDivDropdown" class="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-md shadow-lg z-50">
+                <div
+                  v-for="option in ClockDivOptions"
+                  :key="option.value"
+                  @click="selectClockDiv(option.value)"
+                  class="px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
+                  :class="{ 'bg-slate-100': option.value === currentclockDiv }"
+                >
+                  {{ option.label }}
+                </div>
+              </div>
+            </div>
+            <p class="flex items-center text-xs text-slate-400">
+              {{ currentClockDivDescription }}
+            </p>
+          </div>
           <div class="flex flex-col gap-2">
             <label class="block text-sm font-semibold antialiased">
               捕获深度
@@ -277,6 +315,7 @@ import { useLogicAnalyzerState } from "./LogicAnalyzerManager";
 const {
   currentGlobalMode,
   currentChannelDiv,
+  currentclockDiv,
   captureLength,
   preCaptureLength,
   isApplying,
@@ -287,6 +326,7 @@ const {
   operators,
   signalValues,
   channelDivOptions,
+  ClockDivOptions,
   CAPTURE_LENGTH_MIN,
   CAPTURE_LENGTH_MAX,
   PRE_CAPTURE_LENGTH_MIN,
@@ -296,12 +336,14 @@ const {
   setPreCaptureLength,
   setChannelDiv,
   setGlobalMode,
+  setClockDiv,
   resetConfiguration,
 } = useRequiredInjection(useLogicAnalyzerState);
 
 // 下拉菜单状态
 const showGlobalModeDropdown = ref(false);
 const showChannelDivDropdown = ref(false);
+const showClockDivDropdown = ref(false);
 
 // 处理捕获深度变化
 const handleCaptureLengthChange = () => {
@@ -362,11 +404,24 @@ const currentChannelDivDescription = computed(() => {
   return option ? option.description : '';
 });
 
+// 计算属性：获取当前采样频率的标签
+const currentClockDivLabel = computed(() => {
+  const option = ClockDivOptions.find(opt => opt.value === currentclockDiv.value);
+  return option ? option.label : '';
+});
+
+// 计算属性：获取当前采样频率的描述
+const currentClockDivDescription = computed(() => {
+  const option = ClockDivOptions.find(opt => opt.value === currentclockDiv.value);
+  return option ? option.description : '';
+});
+
 // 全局模式下拉菜单相关函数
 const toggleGlobalModeDropdown = () => {
   showGlobalModeDropdown.value = !showGlobalModeDropdown.value;
   if (showGlobalModeDropdown.value) {
     showChannelDivDropdown.value = false;
+    showClockDivDropdown.value = false;
   }
 };
 
@@ -380,6 +435,7 @@ const toggleChannelDivDropdown = () => {
   showChannelDivDropdown.value = !showChannelDivDropdown.value;
   if (showChannelDivDropdown.value) {
     showGlobalModeDropdown.value = false;
+    showClockDivDropdown.value = false;
   }
 };
 
@@ -388,12 +444,27 @@ const selectChannelDiv = (value: number) => {
   showChannelDivDropdown.value = false;
 };
 
+// 采样频率下拉菜单相关函数
+const toggleClockDivDropdown = () => {
+  showClockDivDropdown.value = !showClockDivDropdown.value;
+  if (showClockDivDropdown.value) {
+    showGlobalModeDropdown.value = false;
+    showChannelDivDropdown.value = false;
+  }
+};
+
+const selectClockDiv = (value: any) => {
+  setClockDiv(value);
+  showClockDivDropdown.value = false;
+};
+
 // 点击其他地方关闭下拉菜单
 const handleClickOutside = (event: MouseEvent) => {
   const target = event.target as HTMLElement;
   if (!target.closest('.relative')) {
     showGlobalModeDropdown.value = false;
     showChannelDivDropdown.value = false;
+    showClockDivDropdown.value = false;
   }
 };