PinPuYi.vue

src/components/PinPuYi/PinPuYi.vue

@@ -1,27 +1,122 @@
 <!-- 频谱仪 -->
 <script setup lang="ts">
+import { $enum } from 'ts-enum-util';
+
 import DeviceImage from './pin-pu-yi-bg.png';
+
+enum 选项卡菜单 {
+  Freq菜单列表 = 'Freq菜单列表',
+  Freq单位列表 = 'Freq单位列表',
+}
+
+enum 选项卡菜单Freq菜单列表的项目 {
+  CenterFreq = 'CenterFreq',
+  StartFreq = 'StartFreq',
+  StopFreq = 'StopFreq',
+  // CFStep = 'CFStep',
+  // FreqOffset = 'FreqOffset',
+  // SingnalTrack = 'SingnalTrack',
+  // ScaleType = 'ScaleType',
+}
+
+enum Freq单位 {
+  GHz = 'GHz',
+  MHz = 'MHz',
+  kHz = 'kHz',
+  Hz = 'Hz',
+}
+
+const state = reactive({
+  选项卡当前显示: 选项卡菜单.Freq菜单列表,
+  Freq状态: {
+    输入状态: {
+      选中的Freq菜单列表的项目: null as null | 选项卡菜单Freq菜单列表的项目,
+      输入的值: null as null | number,
+      选中的单位: null as null | Freq单位,
+    },
+    center: {
+      value: 1.5,
+      unit: Freq单位.GHz,
+    },
+    start: {
+      value: 0,
+      unit: Freq单位.Hz,
+    },
+    stop: {
+      value: 3,
+      unit: Freq单位.MHz,
+    },
+  },
+});
+
+const 选项卡标题 = computed(() =>
+  $enum.mapValue(state.选项卡当前显示).with({
+    [选项卡菜单.Freq菜单列表]: 'Freq/Channel',
+    [选项卡菜单.Freq单位列表]: '',
+  }),
+);
 </script>
 
 <template>
+  <pre class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
+    { 选项卡菜单7个: $enum(选项卡菜单).getValues(), ...state }
+  }}</pre>
   <div class="relative wrp">
     <img :src="DeviceImage" alt="频谱仪设备照片" />
 
-    <div data-box="屏幕" class="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-black/50">
-      <div class="flex flex-col gap-y-[4px] w-[80px] text-black bg-gray-200/50 absolute right-0 top-0 bottom-[15px]">
-        <div class="h-[30px] overflow-hidden menu-item" data-box="菜单标题">Freq/Channel</div>
-        <ul class="flex-1 flex flex-col justify-around gap-y-[4px]" data-box="FreqChannel菜单列表">
+    <div
+      data-box="屏幕右边的按钮"
+      class="flex flex-col gap-y-[4px] w-[55px] absolute top-[174px] left-[640px] text-black"
+    >
+      <!-- 上下还有一个 ESC / RETURN -->
+      <ul class="flex flex-col justify-around gap-y-[4px] h-[300px]" data-box="按钮列表">
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>1</span>
+        </li>
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>2</span>
+        </li>
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>3</span>
+        </li>
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>4</span>
+        </li>
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>5</span>
+        </li>
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>6</span>
+        </li>
+        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <span>7</span>
+        </li>
+      </ul>
+    </div>
+
+    <div data-box="屏幕" class="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-red">
+      <div
+        data-box="屏幕右侧的选项卡"
+        class="flex flex-col gap-y-[4px] w-[80px] text-black bg-pink-200/50 absolute right-0 top-0 bottom-[15px]"
+      >
+        <div class="h-[30px] overflow-hidden menu-item lh-[30px] text-center" data-box="菜单标题">{{ 选项卡标题 }}</div>
+
+        <ul
+          v-if="state.选项卡当前显示 === 选项卡菜单.Freq菜单列表"
+          class="h-[300px] flex flex-col justify-around gap-y-[4px]"
+          data-box="FreqChannel菜单列表"
+        >
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
             <span>Center Freq</span>
-            <span>1.50 Ghz</span>
+            <span>{{ state.Freq状态.center.value }} {{ state.Freq状态.center.unit }}</span>
           </li>
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
             <span>Start Freq</span>
-            <span>0.000000 hz</span>
+            <span>{{ state.Freq状态.start.value }} {{ state.Freq状态.start.unit }}</span>
           </li>
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
             <span>Stop Freq</span>
-            <span>3.0000 MHz</span>
+            <span>{{ state.Freq状态.stop.value }} {{ state.Freq状态.stop.unit }}</span>
           </li>
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
             <span>CF Step</span>
@@ -39,6 +134,28 @@ import DeviceImage from './pin-pu-yi-bg.png';
             <span>Scale Type</span>
           </li>
         </ul>
+
+        <ul
+          v-if="state.选项卡当前显示 === 选项卡菜单.Freq单位列表"
+          class="flex-1 flex flex-col justify-around gap-y-[4px]"
+          data-box="FreqChannel单位列表"
+        >
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+            <span>GHz</span>
+          </li>
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+            <span>MHz</span>
+          </li>
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+            <span>KHz</span>
+          </li>
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+            <span>Hz</span>
+          </li>
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]"></li>
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]"></li>
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]"></li>
+        </ul>
       </div>
     </div>