PinPuYi.vue

src/components/PinPuYi/Helvetica.css

@@ -1,12 +1,13 @@
 @font-face {
-    font-family: 'Helvetica Custom';
+  font-family: 'Helvetica Custom';
-    src: url('fonts/Helvetica-Light-05.eot');
+  src: url('fonts/Helvetica-Light-05.eot');
-    src: url('fonts/Helvetica-Light-05.eot?#iefix') format('embedded-opentype'),
+  src:
-         url('fonts/Helvetica-Light-05.woff2') format('woff2'),
+    url('fonts/Helvetica-Light-05.eot?#iefix') format('embedded-opentype'),
-         url('fonts/Helvetica-Light-05.woff') format('woff'),
+    url('fonts/Helvetica-Light-05.woff2') format('woff2'),
-         url('fonts/Helvetica-Light-05.ttf')  format('truetype'),
+    url('fonts/Helvetica-Light-05.woff') format('woff'),
-         url('fonts/Helvetica-Light-05.svg#Helvetica') format('svg');
+    url('fonts/Helvetica-Light-05.ttf') format('truetype'),
-    font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
+    url('fonts/Helvetica-Light-05.svg#Helvetica') format('svg');
-    font-style: normal;
+  font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
-    font-display: swap; /* 推荐 */
+  font-style: normal;
-}
+  font-display: swap; /* 推荐 */
+}

src/components/PinPuYi/PinPuYi.vue

@@ -4,62 +4,263 @@ import { $enum } from 'ts-enum-util';
 
 import DeviceImage from './pin-pu-yi-bg.png';
 
-enum 选项卡菜单 {
+enum E_选项卡菜单 {
   Freq菜单列表 = 'Freq菜单列表',
   Freq单位列表 = 'Freq单位列表',
 }
 
-enum 选项卡菜单Freq菜单列表的项目 {
+/* 值是在屏幕上显示的值。 */
-  CenterFreq = 'CenterFreq',
+enum E_选项卡菜单Freq菜单列表的项目 {
-  StartFreq = 'StartFreq',
+  CenterFreq = 'Center',
-  StopFreq = 'StopFreq',
+  StartFreq = 'Start',
+  StopFreq = 'Stop',
   // CFStep = 'CFStep',
   // FreqOffset = 'FreqOffset',
   // SingnalTrack = 'SingnalTrack',
   // ScaleType = 'ScaleType',
 }
 
-enum Freq单位 {
+enum E_Freq单位 {
   GHz = 'GHz',
   MHz = 'MHz',
   kHz = 'kHz',
   Hz = 'Hz',
 }
 
+enum E_数字键盘按键 {
+  Num7 = 7,
+  Num8 = 8,
+  Num9 = 9,
+  Num4 = 4,
+  Num5 = 5,
+  Num6 = 6,
+  Num1 = 1,
+  Num2 = 2,
+  Num3 = 3,
+  Num0 = 0,
+  Dot = '.',
+  PlusMinus = '+/-',
+}
+
 const state = reactive({
-  选项卡当前显示: 选项卡菜单.Freq菜单列表,
+  选项卡当前显示: E_选项卡菜单.Freq菜单列表,
   Freq状态: {
     输入状态: {
-      选中的Freq菜单列表的项目: null as null | 选项卡菜单Freq菜单列表的项目,
+      选中的Freq菜单列表的项目: null as null | E_选项卡菜单Freq菜单列表的项目,
-      输入的值: null as null | number,
+      输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
-      选中的单位: null as null | Freq单位,
+      选中的单位: null as null | E_Freq单位,
     },
     center: {
-      value: 1.5,
+      value: 0,
-      unit: Freq单位.GHz,
+      unit: E_Freq单位.Hz,
     },
     start: {
       value: 0,
-      unit: Freq单位.Hz,
+      unit: E_Freq单位.Hz,
     },
     stop: {
-      value: 3,
+      value: 0,
-      unit: Freq单位.MHz,
+      unit: E_Freq单位.Hz,
     },
   },
 });
 
 const 选项卡标题 = computed(() =>
   $enum.mapValue(state.选项卡当前显示).with({
-    [选项卡菜单.Freq菜单列表]: 'Freq/Channel',
+    [E_选项卡菜单.Freq菜单列表]: 'Freq/Channel',
-    [选项卡菜单.Freq单位列表]: '',
+    [E_选项卡菜单.Freq单位列表]: '',
   }),
 );
+
+function 执行点击屏幕右边的按钮(按钮序号: number) {
+  console.group('🔘 点击屏幕右边的按钮', { 按钮序号 });
+  if (state.选项卡当前显示 === E_选项卡菜单.Freq菜单列表) {
+    switch (按钮序号) {
+      case 1: {
+        state.Freq状态.输入状态.选中的Freq菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.CenterFreq;
+        console.debug('设置 Freq 输入状态为 CenterFreq');
+        break;
+      }
+      case 2: {
+        state.Freq状态.输入状态.选中的Freq菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StartFreq;
+        console.debug('设置 Freq 输入状态为 StartFreq');
+        break;
+      }
+      case 3: {
+        state.Freq状态.输入状态.选中的Freq菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StopFreq;
+        console.debug('设置 Freq 输入状态为 StopFreq');
+        break;
+      }
+      default: {
+        console.debug('这个按键还没有实现');
+        break;
+      }
+    }
+  }
+
+  if (state.选项卡当前显示 === E_选项卡菜单.Freq单位列表) {
+    let selectedUnit: E_Freq单位 | null = null;
+    switch (按钮序号) {
+      case 1: {
+        selectedUnit = E_Freq单位.GHz;
+        break;
+      }
+      case 2: {
+        selectedUnit = E_Freq单位.MHz;
+        break;
+      }
+      case 3: {
+        selectedUnit = E_Freq单位.kHz;
+        break;
+      }
+      case 4: {
+        selectedUnit = E_Freq单位.Hz;
+        break;
+      }
+      default: {
+        console.warn('无效的单位按钮序号:', 按钮序号);
+        console.groupEnd();
+        return;
+      } // 不处理无效按钮 (5, 6, 7)
+    }
+
+    const tempInputString = state.Freq状态.输入状态.输入的值临时输入字符串;
+    const selectedFreqItem = state.Freq状态.输入状态.选中的Freq菜单列表的项目;
+
+    // 必须有临时输入值和选中的 Freq 项目才能确认
+    if (!tempInputString || !selectedFreqItem) {
+      console.warn('输入未完成或未选择 Freq 项目，无法确认单位。', { tempInputString, selectedFreqItem });
+      console.groupEnd();
+      return;
+    }
+
+    const inputValue = Number.parseFloat(tempInputString);
+
+    // 校验解析结果
+    if (Number.isNaN(inputValue)) {
+      console.warn('无法将临时输入解析为有效数字:', tempInputString);
+      // 暂时不清除临时输入，允许用户修正或重新选择单位
+      console.groupEnd();
+      return;
+    }
+
+    console.debug('确认单位:', selectedUnit, '值为:', inputValue);
+
+    // 根据选中的 Freq 项目更新对应的状态
+    switch (selectedFreqItem) {
+      case E_选项卡菜单Freq菜单列表的项目.CenterFreq: {
+        state.Freq状态.center.value = inputValue;
+        state.Freq状态.center.unit = selectedUnit;
+        console.debug('更新 CenterFreq:', state.Freq状态.center);
+        break;
+      }
+      case E_选项卡菜单Freq菜单列表的项目.StartFreq: {
+        state.Freq状态.start.value = inputValue;
+        state.Freq状态.start.unit = selectedUnit;
+        console.debug('更新 StartFreq:', state.Freq状态.start);
+        break;
+      }
+      case E_选项卡菜单Freq菜单列表的项目.StopFreq: {
+        state.Freq状态.stop.value = inputValue;
+        state.Freq状态.stop.unit = selectedUnit;
+        console.debug('更新 StopFreq:', state.Freq状态.stop);
+        break;
+      }
+    }
+
+    // 重置整个输入状态，为下一次输入做准备
+    state.Freq状态.输入状态.选中的Freq菜单列表的项目 = null;
+    state.Freq状态.输入状态.输入的值临时输入字符串 = null;
+    state.Freq状态.输入状态.选中的单位 = null; // 清除旧的确认单位
+    console.debug('输入状态已重置');
+
+    // 操作完成，切换回 Freq 菜单列表
+    state.选项卡当前显示 = E_选项卡菜单.Freq菜单列表;
+    console.debug('切换回 Freq 菜单列表');
+  }
+  console.groupEnd();
+}
+
+function 执行点击数字按钮(按钮值: E_数字键盘按键) {
+  console.group('🔢 点击数字按钮', { 按钮值 });
+
+  // 检查是否已选择 Freq 菜单项
+  if (!state.Freq状态.输入状态.选中的Freq菜单列表的项目) {
+    console.warn('请先选择一个 Freq 菜单项 (Center, Start, Stop)');
+    console.groupEnd();
+    return;
+  }
+
+  // 使用 临时输入字符串，如果为 null 则视为空字符串
+  const 当前临时输入 = state.Freq状态.输入状态.输入的值临时输入字符串 ?? '';
+
+  switch (按钮值) {
+    case E_数字键盘按键.Dot: {
+      // 只有在当前临时输入不包含小数点时才允许添加
+      if (当前临时输入.includes('.')) {
+        console.debug('已存在小数点，忽略本次输入');
+      } else {
+        // 如果当前为空，则为 '0.'，否则追加 '.'
+        state.Freq状态.输入状态.输入的值临时输入字符串 = 当前临时输入 ? 当前临时输入 + '.' : '0.';
+        console.debug('输入小数点，临时字符串:', state.Freq状态.输入状态.输入的值临时输入字符串);
+      }
+      break;
+    }
+
+    case E_数字键盘按键.Num0:
+    case E_数字键盘按键.Num1:
+    case E_数字键盘按键.Num2:
+    case E_数字键盘按键.Num3:
+    case E_数字键盘按键.Num4:
+    case E_数字键盘按键.Num5:
+    case E_数字键盘按键.Num6:
+    case E_数字键盘按键.Num7:
+    case E_数字键盘按键.Num8:
+    case E_数字键盘按键.Num9: {
+      // 直接拼接数字到临时字符串
+      // 特殊处理：如果当前是 '0'，则替换为新数字；如果是 '-0'，则替换为 '-'+新数字
+      if (当前临时输入 === '0') {
+        state.Freq状态.输入状态.输入的值临时输入字符串 = String(按钮值);
+      } else if (当前临时输入 === '-0') {
+        state.Freq状态.输入状态.输入的值临时输入字符串 = '-' + String(按钮值);
+      } else {
+        state.Freq状态.输入状态.输入的值临时输入字符串 = 当前临时输入 + String(按钮值);
+      }
+      console.debug('输入数字，临时字符串:', state.Freq状态.输入状态.输入的值临时输入字符串);
+      break;
+    }
+    case E_数字键盘按键.PlusMinus: {
+      // +/- 逻辑操作临时字符串
+      if (当前临时输入.startsWith('-')) {
+        // 如果已经是负数，移除负号
+        state.Freq状态.输入状态.输入的值临时输入字符串 = 当前临时输入.slice(1);
+      } else if (当前临时输入 && 当前临时输入 !== '0' && 当前临时输入 !== '0.') {
+        // 如果是正数且不为0或0.，添加负号
+        state.Freq状态.输入状态.输入的值临时输入字符串 = '-' + 当前临时输入;
+      } else if (当前临时输入 === '' || 当前临时输入 === '0' || 当前临时输入 === '0.') {
+        // 如果是空或0或0.，变成负号开头
+        state.Freq状态.输入状态.输入的值临时输入字符串 = '-';
+      } else {
+        // 其他情况（例如只有一个'-'）不允许切换
+        console.debug('无法切换正负号');
+      }
+      console.debug('切换正负号，临时字符串:', state.Freq状态.输入状态.输入的值临时输入字符串);
+      break;
+    }
+    default: {
+      // 处理未预期的按钮值（理论上不应发生）
+      console.warn('未知的数字键盘按键:', 按钮值);
+    }
+  }
+  state.选项卡当前显示 = E_选项卡菜单.Freq单位列表;
+
+  console.groupEnd();
+}
 </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 }
+    { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state }
   }}</pre>
   <div class="relative wrp">
     <img :src="DeviceImage" alt="频谱仪设备照片" />
@@ -70,39 +271,60 @@ const 选项卡标题 = computed(() =>
     >
       <!-- 上下还有一个 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]">
+        <template v-for="n in 7" :key="`按钮${n}`">
-          <span>1</span>
+          <li
-        </li>
+            @click="执行点击屏幕右边的按钮(n)"
-        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+            class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] bg-gray-500/70!"
-          <span>2</span>
+          >
-        </li>
+            <span>{{ n }}.</span>
-        <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          </li>
-          <span>3</span>
+        </template>
-        </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="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-black">
+      <div
+        v-if="state.Freq状态.输入状态.选中的Freq菜单列表的项目"
+        data-box="显示输入的 Freq/Channel 的值"
+        class="flex flex-col gap-y-[0px] text-white bg-pink-200/50 absolute left-[40px] top-[140px] lh-[1.2]"
+      >
+        <!-- 优先显示临时输入字符串，如果为空，则显示默认或已确认的值 -->
+        <div>{{ state.Freq状态.输入状态.选中的Freq菜单列表的项目 }}</div>
+        <div>
+          <template v-if="state.Freq状态.输入状态.输入的值临时输入字符串 !== null">
+            {{ state.Freq状态.输入状态.输入的值临时输入字符串 }}
+            <!-- 输入过程中不显示单位，等待单位确认 -->
+          </template>
+          <template
+            v-else-if="state.Freq状态.输入状态.选中的Freq菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.CenterFreq"
+          >
+            {{ state.Freq状态.center.value }} {{ state.Freq状态.center.unit }}
+          </template>
+          <template
+            v-else-if="state.Freq状态.输入状态.选中的Freq菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StartFreq"
+          >
+            {{ state.Freq状态.start.value }} {{ state.Freq状态.start.unit }}
+          </template>
+          <template
+            v-else-if="state.Freq状态.输入状态.选中的Freq菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StopFreq"
+          >
+            {{ state.Freq状态.stop.value }} {{ state.Freq状态.stop.unit }}
+          </template>
+          <template v-else>
+            <!-- 没有选中项目，也没有临时输入时显示默认 -->
+            0.000000000 Hz
+          </template>
+        </div>
+      </div>
+
       <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]"
+        class="flex flex-col gap-y-[4px] w-[80px] text-black 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菜单列表"
+          v-if="state.选项卡当前显示 === E_选项卡菜单.Freq菜单列表"
           class="h-[300px] flex flex-col justify-around gap-y-[4px]"
           data-box="FreqChannel菜单列表"
         >
@@ -119,24 +341,24 @@ const 选项卡标题 = computed(() =>
             <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>
+            <span>#CF Step</span>
             <span>0.0000 hz</span>
             <span>X</span>
           </li>
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
-            <span>Freq Offset</span>
+            <span>#Freq Offset</span>
             <span>0.0000 Hz</span>
           </li>
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
-            <span>Singnal Track</span>
+            <span>#Singnal Track</span>
           </li>
           <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
-            <span>Scale Type</span>
+            <span>#Scale Type</span>
           </li>
         </ul>
 
         <ul
-          v-if="state.选项卡当前显示 === 选项卡菜单.Freq单位列表"
+          v-if="state.选项卡当前显示 === E_选项卡菜单.Freq单位列表"
           class="flex-1 flex flex-col justify-around gap-y-[4px]"
           data-box="FreqChannel单位列表"
         >
@@ -163,16 +385,26 @@ const 选项卡标题 = computed(() =>
       <!-- 左上角. 长的 -->
       <div class="flex flex-col gap-y-[18px]">
         <button class="ppy-btn w-[62px]!">Freq<br />Channel</button>
-        <button class="ppy-btn w-[62px]!">SPAN<br />X Scale</button>
+        <button class="ppy-btn w-[62px]!">#</button
+        ><!-- SPAN<br />X Scale -->
         <button class="ppy-btn w-[62px]!">#</button>
         <button class="ppy-btn w-[62px]!">#</button>
         <button class="ppy-btn w-[62px]!">#</button>
       </div>
-      <div class="flex flex-col gap-y-[16.5px] mt-[20px]">
+      <!-- 数字键盘区域 -->
-        <button class="ppy-btn">7</button>
+      <div class="grid grid-cols-3 gap-[16.5px] mt-[20px]">
-        <button class="ppy-btn">4</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num7)" class="ppy-btn">7</button>
-        <button class="ppy-btn">1</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num8)" class="ppy-btn">8</button>
-        <button class="ppy-btn">0</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num9)" class="ppy-btn">9</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num4)" class="ppy-btn">4</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num5)" class="ppy-btn">5</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num6)" class="ppy-btn">6</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num1)" class="ppy-btn">1</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num2)" class="ppy-btn">2</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num3)" class="ppy-btn">3</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Num0)" class="ppy-btn">0</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.Dot)" class="ppy-btn">.</button>
+        <button @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)" class="ppy-btn">+/-</button>
       </div>
     </div>
   </div>
@@ -207,8 +439,9 @@ img {
 }
 
 .menu-item {
+  @apply bg-gray-200/50 p-[2px] rounded-[2px];
   font-size: 12px;
-  border: 1px solid white;
+  /* border: 1px solid white; */
 }
 [alt='频谱仪设备照片'] {
   opacity: 1;

src/main.ts

@@ -1,7 +1,12 @@
 import './styles';
+
+import { LogLevels } from 'consola';
+
 import App from './App.vue';
 import { setupPlugins } from './plugins';
 
 const autoInstallModules = import.meta.glob('./plugins/*.ts', { eager: true });
 
 setupPlugins(createApp(App), autoInstallModules).mount('#app');
+
+consola.level = LogLevels.verbose;