From 6299b6d45f83dea0eb610bdf73f9307c40ea21c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Mon, 28 Apr 2025 17:44:11 +0800
Subject: [PATCH] PinPuYi

---
 src/components/PinPuYi/CONST.ts      |  37 +++++
 src/components/PinPuYi/Helvetica.css |   4 +-
 src/components/PinPuYi/PinPuYi.vue   | 231 +++++++++++++--------------
 3 files changed, 150 insertions(+), 122 deletions(-)
 create mode 100644 src/components/PinPuYi/CONST.ts

diff --git a/src/components/PinPuYi/CONST.ts b/src/components/PinPuYi/CONST.ts
new file mode 100644
index 0000000..65e19d6
--- /dev/null
+++ b/src/components/PinPuYi/CONST.ts
@@ -0,0 +1,37 @@
+export enum E_选项卡菜单 {
+  频率单位列表 = '频率单位列表',
+  频率菜单列表 = '频率菜单列表',
+}
+
+/* 值是在屏幕上显示的值。 */
+export enum E_选项卡菜单Freq菜单列表的项目 {
+  CenterFreq = 'Center',
+  StartFreq = 'Start',
+  StopFreq = 'Stop',
+  // CFStep = 'CFStep',
+  // FreqOffset = 'FreqOffset',
+  // SingnalTrack = 'SingnalTrack',
+  // ScaleType = 'ScaleType',
+}
+
+export enum E_Freq单位 {
+  GHz = 'GHz',
+  Hz = 'Hz',
+  kHz = 'kHz',
+  MHz = 'MHz',
+}
+
+export enum E_数字键盘按键 {
+  Dot = '.',
+  Num0 = 0,
+  Num1 = 1,
+  Num2 = 2,
+  Num3 = 3,
+  Num4 = 4,
+  Num5 = 5,
+  Num6 = 6,
+  Num7 = 7,
+  Num8 = 8,
+  Num9 = 9,
+  PlusMinus = '+/-',
+}
diff --git a/src/components/PinPuYi/Helvetica.css b/src/components/PinPuYi/Helvetica.css
index 67ec674..090db2b 100644
--- a/src/components/PinPuYi/Helvetica.css
+++ b/src/components/PinPuYi/Helvetica.css
@@ -1,5 +1,7 @@
 @font-face {
   font-family: 'Helvetica Custom';
+  font-style: normal;
+  font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
   src: url('fonts/Helvetica-Light-05.eot');
   src:
     url('fonts/Helvetica-Light-05.eot?#iefix') format('embedded-opentype'),
@@ -7,7 +9,5 @@
     url('fonts/Helvetica-Light-05.woff') format('woff'),
     url('fonts/Helvetica-Light-05.ttf') format('truetype'),
     url('fonts/Helvetica-Light-05.svg#Helvetica') format('svg');
-  font-weight: 400; /* 400 通常代表 'normal' 或 'regular' */
-  font-style: normal;
   font-display: swap; /* 推荐 */
 }
diff --git a/src/components/PinPuYi/PinPuYi.vue b/src/components/PinPuYi/PinPuYi.vue
index f09db6a..a476405 100644
--- a/src/components/PinPuYi/PinPuYi.vue
+++ b/src/components/PinPuYi/PinPuYi.vue
@@ -2,51 +2,14 @@
 <script setup lang="ts">
 import { $enum } from 'ts-enum-util';
 
+import { E_Freq单位, E_数字键盘按键, E_选项卡菜单, E_选项卡菜单Freq菜单列表的项目 } from './CONST';
 import 设备照片 from './pin-pu-yi-bg.png';
 
-enum E_选项卡菜单 {
-  频率菜单列表 = '频率菜单列表',
-  频率单位列表 = '频率单位列表',
-}
-
-/* 值是在屏幕上显示的值。 */
-enum E_选项卡菜单Freq菜单列表的项目 {
-  CenterFreq = 'Center',
-  StartFreq = 'Start',
-  StopFreq = 'Stop',
-  // CFStep = 'CFStep',
-  // FreqOffset = 'FreqOffset',
-  // SingnalTrack = 'SingnalTrack',
-  // ScaleType = 'ScaleType',
-}
-
-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({
   选项卡当前显示: E_选项卡菜单.频率菜单列表,
   频率状态: {
     输入状态: {
-      选中的频率菜单列表的项目: null as null | E_选项卡菜单Freq菜单列表的项目,
+      选中的频率菜单列表的项目: null as E_选项卡菜单Freq菜单列表的项目 | null,
       输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
     },
     center: {
@@ -128,7 +91,10 @@ function 执行点击屏幕右边的按钮(按钮序号: number) {
 
     // 必须有临时输入值和选中的 Freq 项目才能确认
     if (!tempInputString || !selectedFreqItem) {
-      console.warn('输入未完成或未选择 Freq 项目，无法确认单位。', { tempInputString, selectedFreqItem });
+      console.warn('输入未完成或未选择 Freq 项目，无法确认单位。', {
+        tempInputString,
+        selectedFreqItem,
+      });
       console.groupEnd();
       return;
     }
@@ -199,7 +165,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
         console.debug('已存在小数点，忽略本次输入');
       } else {
         // 如果当前为空，则为 '0.'，否则追加 '.'
-        state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入 ? 当前临时输入 + '.' : '0.';
+        state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入 ? `${当前临时输入}.` : '0.';
         console.debug('输入小数点，临时字符串:', state.频率状态.输入状态.输入的值临时输入字符串);
       }
       break;
@@ -220,7 +186,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
       if (当前临时输入 === '0') {
         state.频率状态.输入状态.输入的值临时输入字符串 = String(按钮值);
       } else if (当前临时输入 === '-0') {
-        state.频率状态.输入状态.输入的值临时输入字符串 = '-' + String(按钮值);
+        state.频率状态.输入状态.输入的值临时输入字符串 = `-${String(按钮值)}`;
       } else {
         state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入 + String(按钮值);
       }
@@ -234,7 +200,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
         state.频率状态.输入状态.输入的值临时输入字符串 = 当前临时输入.slice(1);
       } else if (当前临时输入 && 当前临时输入 !== '0' && 当前临时输入 !== '0.') {
         // 如果是正数且不为0或0.，添加负号
-        state.频率状态.输入状态.输入的值临时输入字符串 = '-' + 当前临时输入;
+        state.频率状态.输入状态.输入的值临时输入字符串 = `-${当前临时输入}`;
       } else if (当前临时输入 === '' || 当前临时输入 === '0' || 当前临时输入 === '0.') {
         // 如果是空或0或0.，变成负号开头
         state.频率状态.输入状态.输入的值临时输入字符串 = '-';
@@ -255,24 +221,26 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
   console.groupEnd();
 }
 
-const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
-const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png'].default);
+const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', {
+  eager: true,
+});
+const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png']!.default);
 watch(
   () => state.频率状态.center.value,
   () => {
-    屏幕照片.value = img_modules['./imgs/屏幕_1.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_1.png']!.default;
   },
 );
 watch(
   () => state.频率状态.start.value,
   () => {
-    屏幕照片.value = img_modules['./imgs/屏幕_2.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_2.png']!.default;
   },
 );
 watch(
   () => state.频率状态.stop.value,
   () => {
-    屏幕照片.value = img_modules['./imgs/屏幕_3.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_3.png']!.default;
   },
 );
 watchEffect(() => {
@@ -281,35 +249,35 @@ watchEffect(() => {
 </script>
 
 <template>
-  <pre v-if="$__DEV__" class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
+  <!-- <pre v-if="$__DEV__" class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
     { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state }
-  }}</pre>
-  <div class="relative wrp">
+  }}</pre> -->
+  <div class="wrp relative">
     <img :src="设备照片" alt="频谱仪设备" />
 
     <div
+      class="absolute left-[640px] top-[174px] flex w-[55px] flex-col gap-y-[4px] overflow-visible text-black"
       data-box="屏幕右边的按钮"
-      class="flex flex-col overflow-visible gap-y-[4px] w-[55px] absolute top-[174px] left-[640px] text-black"
     >
       <!-- 上下还有一个 ESC / RETURN -->
-      <ul class="flex overflow-visible flex-col justify-around gap-y-[4px] h-[300px]" data-box="屏幕右边按钮列表">
+      <ul class="flex h-[300px] flex-col justify-around gap-y-[4px] overflow-visible" data-box="屏幕右边按钮列表">
         <template v-for="n in 7" :key="`按钮${n}`">
           <li
+            class="lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-visible rounded-[2px] text-[12px]"
             @click="执行点击屏幕右边的按钮(n)"
-            class="overflow-visible flex-1 flex flex-col gap-y-[0px] lh-[1.2] text-[12px] rounded-[2px]"
           >
-            <button class="ppy-btn w-full! h-full!">{{ n }}.</button>
+            <button class="ppy-btn !h-full !w-full">{{ n }}.</button>
           </li>
         </template>
       </ul>
     </div>
 
-    <div data-box="屏幕" class="absolute top-[140px] left-[195px] w-[430px] h-[350px] bg-black">
-      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute top-0 left-0 w-[340px]! h-[330px]!" />
+    <div class="absolute left-[195px] top-[140px] h-[350px] w-[430px] bg-black" data-box="屏幕">
+      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute left-0 top-0 !h-[330px] !w-[340px]" />
       <div
         v-if="state.频率状态.输入状态.选中的频率菜单列表的项目"
+        class="lh-[1.2] absolute left-[40px] top-[140px] flex flex-col gap-y-[0px] bg-gray-500/100 text-white"
         data-box="显示输入的 Freq/Channel 的值"
-        class="flex flex-col gap-y-[0px] text-white bg-gray-500/100 absolute left-[40px] top-[140px] lh-[1.2]"
       >
         <!-- 优先显示临时输入字符串，如果为空，则显示默认或已确认的值 -->
         <div>{{ state.频率状态.输入状态.选中的频率菜单列表的项目 }}</div>
@@ -341,94 +309,97 @@ watchEffect(() => {
       </div>
 
       <div
+        class="absolute bottom-[15px] right-0 top-0 flex w-[80px] flex-col gap-y-[4px] text-black"
         data-box="屏幕右侧的选项卡"
-        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 bg-[#AFAFAF]" data-box="菜单标题">
+        <div class="menu-item lh-[30px] h-[30px] overflow-hidden bg-[#AFAFAF] text-center" data-box="菜单标题">
           {{ 选项卡标题 }}
         </div>
 
         <ul
           v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
-          class="h-[300px] flex flex-col justify-around gap-y-[4px]"
+          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
           data-box="频率菜单列表"
         >
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>Center Freq</span>
-            <span>{{ state.频率状态.center.value }} {{ state.频率状态.center.unit }}</span>
+            {{ state.频率状态.center.value }}
+            {{ state.频率状态.center.unit }}
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>Start Freq</span>
-            <span>{{ state.频率状态.start.value }} {{ state.频率状态.start.unit }}</span>
+            {{ state.频率状态.start.value }}
+            {{ state.频率状态.start.unit }}
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>Stop Freq</span>
-            <span>{{ state.频率状态.stop.value }} {{ state.频率状态.stop.unit }}</span>
+            {{ state.频率状态.stop.value }}
+            {{ state.频率状态.stop.unit }}
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <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] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <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] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>#Singnal Track</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>#Scale Type</span>
           </li>
         </ul>
 
         <ul
           v-if="state.选项卡当前显示 === E_选项卡菜单.频率单位列表"
-          class="flex-1 flex flex-col justify-around gap-y-[4px]"
+          class="flex flex-1 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] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>GHz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>MHz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>KHz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
             <span>Hz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
+          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
         </ul>
       </div>
     </div>
 
-    <div class="absolute top-[120px] left-[768px] ppy-btns h-[415px] overflow-visible!" data-box="机器右边按键">
+    <div class="ppy-btns absolute left-[768px] top-[120px] h-[415px] !overflow-visible" data-box="机器右边按键">
       <!-- 左上角. 长的 -->
-      <div class="flex flex-col gap-y-[18px] overflow-visible!">
-        <button class="ppy-btn w-[62px]!">Freq<br />Channel</button>
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
+      <div class="flex flex-col gap-y-[18px] !overflow-visible">
+        <button class="ppy-btn !w-[62px]">Freq<br />Channel</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
         <!-- SPAN<br />X Scale -->
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        <button class="ppy-btn w-[62px]! opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
+        <button class="ppy-btn !w-[62px] opacity-0">#</button>
       </div>
-      <div class="grid grid-cols-3 gap-[16.5px] mt-[20px] overflow-visible!" data-box="数字键盘区域">
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num7)" class="ppy-btn">7</button>
-        <button @click="执行点击数字按钮(E_数字键盘按键.Num8)" class="ppy-btn">8</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 class="mt-[20px] grid grid-cols-3 gap-[16.5px] !overflow-visible" data-box="数字键盘区域">
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num7)">7</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num8)">8</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num9)">9</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num4)">4</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num5)">5</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num6)">6</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num1)">1</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num2)">2</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num3)">3</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num0)">0</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Dot)">.</button>
+        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)">+/-</button>
       </div>
     </div>
   </div>
@@ -436,62 +407,82 @@ watchEffect(() => {
 
 <style scoped>
 @import url('./Helvetica.css');
+
 .wrp {
   font-family: 'Helvetica Custom';
 }
+
 /* .wrp * {
   overflow: hidden;
 } */
 
 img[alt='频谱仪设备'] {
   width: calc(2554px * 0.5);
-  height: calc(1626px * 0.5);
   max-width: fit-content;
+  height: calc(1626px * 0.5);
   max-height: fit-content;
 }
 
 .ppy-btn {
-  height: 30px;
+  display: flex; /* 使用 flex 居中文本 */
+  align-items: center;
+  justify-content: center;
   width: 36px;
-  border: 1px solid green;
+  height: 30px;
+  padding-left: 2px;
   overflow: hidden;
   font-size: 10px;
-  text-align: left;
   line-height: 1.2;
-  padding-left: 2px;
-  border-radius: 4px;
-
+  color: #333; /* 深灰色文字 */
+  text-align: left;
   text-decoration: none;
-  display: flex; /* 使用 flex 居中文本 */
-  justify-content: center;
-  align-items: center;
-  /* width: 100%; */ /* 宽度占满 grid 单元格 */
-  /* height: 100%; */ /* 高度占满 grid 单元格 */
   background-color: #e0e0e0; /* 按钮浅灰色背景 */
-  color: #333333; /* 深灰色文字 */
-  /* font-size: 20px; */ /* 调整字体大小 */
-  /* font-weight: bold; */ /* 字体加粗 */
-  /* border-radius: 4px; */ /* 按钮圆角 */
+  border: 1px solid green;
   border: 1px solid #b0b0b0; /* 添加边框 */
+  border-radius: 4px;
   box-shadow:
-    1px 1px 2px rgba(0, 0, 0, 0.2),
-    /* 轻微外阴影 */ -1px -1px 2px rgba(255, 255, 255, 0.8); /* 轻微外高光 */
+    1px 1px 2px rgb(0 0 0 / 20%),
+    /* 轻微外阴影 */ -1px -1px 2px rgb(255 255 255 / 80%); /* 轻微外高光 */
+
   transition: all 0.1s ease-in-out; /* 平滑过渡效果 */
+
+  /* width: 100%; */
+
+  /* 宽度占满 grid 单元格 */
+
+  /* height: 100%; */
+
+  /* 高度占满 grid 单元格 */
+
+  /* font-size: 20px; */
+
+  /* 调整字体大小 */
+
+  /* font-weight: bold; */
+
+  /* 字体加粗 */
+
+  /* border-radius: 4px; */
+
+  /* 按钮圆角 */
 }
+
 .ppy-btn:active {
   background-color: #d5d5d5;
-  box-shadow:
-    inset 1px 1px 3px rgba(0, 0, 0, 0.3),
-    inset -1px -1px 3px rgba(255, 255, 255, 0.6);
   border-color: #a0a0a0;
+  box-shadow:
+    inset 1px 1px 3px rgb(0 0 0 / 30%),
+    inset -1px -1px 3px rgb(255 255 255 / 60%);
   transform: scale(0.98);
 }
 
 .menu-item {
   /* @apply bg-gray-200/50 p-[2px]; */
   font-size: 12px;
+
   /* border: 1px solid white; */
 }
+
 [alt='频谱仪设备'] {
   opacity: 1;
   transition: opacity 0.3s;