PinPuYi

src/components/PinPuYi/PinPuYi.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import { $enum } from 'ts-enum-util';
 
-import 设备照片 from './pin-pu-yi-bg-clean.png';
+import 设备照片 from './pin-pu-yi-bg.png';
 
 enum E_选项卡菜单 {
   频率菜单列表 = '频率菜单列表',
@@ -256,16 +256,32 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
 }
 
 const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
-const 屏幕照片 = computed(() => {
+const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png'].default);
-  if (state.频率状态.center.value > 0) return img_modules['./imgs/屏幕_1.png'].default;
+watch(
-  if (state.频率状态.start.value > 0) return img_modules['./imgs/屏幕_2.png'].default;
+  () => state.频率状态.center.value,
-  if (state.频率状态.stop.value > 0) return img_modules['./imgs/屏幕_3.png'].default;
+  () => {
-  return img_modules['./imgs/屏幕_0.png'].default;
+    屏幕照片.value = img_modules['./imgs/屏幕_1.png'].default;
+  },
+);
+watch(
+  () => state.频率状态.start.value,
+  () => {
+    屏幕照片.value = img_modules['./imgs/屏幕_2.png'].default;
+  },
+);
+watch(
+  () => state.频率状态.stop.value,
+  () => {
+    屏幕照片.value = img_modules['./imgs/屏幕_3.png'].default;
+  },
+);
+watchEffect(() => {
+  console.debug(`屏幕照片.value :>> `, 屏幕照片.value);
 });
 </script>
 
 <template>
-  <pre 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">
@@ -273,27 +289,27 @@ const 屏幕照片 = computed(() => {
 
     <div
       data-box="屏幕右边的按钮"
-      class="flex flex-col gap-y-[4px] w-[55px] absolute top-[174px] left-[640px] text-black"
+      class="flex flex-col overflow-visible 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="按钮列表">
+      <ul class="flex overflow-visible flex-col justify-around gap-y-[4px] h-[300px]" data-box="屏幕右边按钮列表">
         <template v-for="n in 7" :key="`按钮${n}`">
           <li
             @click="执行点击屏幕右边的按钮(n)"
-            class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] bg-gray-500/70!"
+            class="overflow-visible flex-1 flex flex-col gap-y-[0px] lh-[1.2] text-[12px] rounded-[2px]"
           >
-            <span>{{ n }}.</span>
+            <button class="ppy-btn w-full! h-full!">{{ n }}.</button>
           </li>
         </template>
       </ul>
     </div>
 
-    <div data-box="屏幕" class="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-black">
+    <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-[380px]! h-[330px]!" />
+      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute top-0 left-0 w-[340px]! h-[330px]!" />
       <div
         v-if="state.频率状态.输入状态.选中的频率菜单列表的项目"
         data-box="显示输入的 Freq/Channel 的值"
-        class="flex flex-col gap-y-[0px] text-white bg-pink-500/100 absolute left-[40px] top-[140px] lh-[1.2]"
+        class="flex flex-col gap-y-[0px] text-white bg-gray-500/100 absolute left-[40px] top-[140px] lh-[1.2]"
       >
         <!-- 优先显示临时输入字符串，如果为空，则显示默认或已确认的值 -->
         <div>{{ state.频率状态.输入状态.选中的频率菜单列表的项目 }}</div>
@@ -328,38 +344,40 @@ const 屏幕照片 = computed(() => {
         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" data-box="菜单标题">{{ 选项卡标题 }}</div>
+        <div class="h-[30px] overflow-hidden menu-item lh-[30px] text-center bg-[#AFAFAF]" data-box="菜单标题">
+          {{ 选项卡标题 }}
+        </div>
 
         <ul
           v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
           class="h-[300px] flex flex-col justify-around gap-y-[4px]"
-          data-box="FreqChannel菜单列表"
+          data-box="频率菜单列表"
         >
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>Center Freq</span>
             <span>{{ state.频率状态.center.value }} {{ state.频率状态.center.unit }}</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>Start Freq</span>
             <span>{{ state.频率状态.start.value }} {{ state.频率状态.start.unit }}</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>Stop Freq</span>
             <span>{{ state.频率状态.stop.value }} {{ state.频率状态.stop.unit }}</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] 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]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] 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]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>#Singnal Track</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>#Scale Type</span>
           </li>
         </ul>
@@ -369,37 +387,36 @@ const 屏幕照片 = computed(() => {
           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]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>GHz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>MHz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <span>KHz</span>
           </li>
-          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
+          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
             <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] overflow-hidden bg-[#AFAFAF]"></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] overflow-hidden bg-[#AFAFAF]"></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] overflow-hidden bg-[#AFAFAF]"></li>
         </ul>
       </div>
     </div>
 
-    <div class="absolute top-[120px] left-[768px] ppy-btns h-[415px]" data-box="按键">
+    <div class="absolute top-[120px] left-[768px] ppy-btns h-[415px] overflow-visible!" data-box="机器右边按键">
       <!-- 左上角. 长的 -->
-      <div class="flex flex-col gap-y-[18px]">
+      <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]!">#</button
+        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        ><!-- SPAN<br />X Scale -->
+        <!-- SPAN<br />X Scale -->
-        <button class="ppy-btn w-[62px]!">#</button>
+        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        <button class="ppy-btn w-[62px]!">#</button>
+        <button class="ppy-btn w-[62px]! opacity-0">#</button>
-        <button class="ppy-btn w-[62px]!">#</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="数字键盘区域">
-      <div class="grid grid-cols-3 gap-[16.5px] mt-[20px]">
         <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>
@@ -422,11 +439,11 @@ const 屏幕照片 = computed(() => {
 .wrp {
   font-family: 'Helvetica Custom';
 }
-.wrp * {
+/* .wrp * {
   overflow: hidden;
-}
+} */
 
-img {
+img[alt='频谱仪设备'] {
   width: calc(2554px * 0.5);
   height: calc(1626px * 0.5);
   max-width: fit-content;
@@ -443,10 +460,35 @@ img {
   line-height: 1.2;
   padding-left: 2px;
   border-radius: 4px;
+
+  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 #b0b0b0; /* 添加边框 */
+  box-shadow:
+    1px 1px 2px rgba(0, 0, 0, 0.2),
+    /* 轻微外阴影 */ -1px -1px 2px rgba(255, 255, 255, 0.8); /* 轻微外高光 */
+  transition: all 0.1s ease-in-out; /* 平滑过渡效果 */
+}
+.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;
+  transform: scale(0.98);
 }
 
 .menu-item {
-  @apply bg-gray-200/50 p-[2px] rounded-[2px];
+  /* @apply bg-gray-200/50 p-[2px]; */
   font-size: 12px;
   /* border: 1px solid white; */
 }