频谱仪: 屏幕照片

src/components/PinPuYi/PinPuYi.vue

@@ -2,11 +2,8 @@
 <script setup lang="ts">
 import { $enum } from 'ts-enum-util';
 
-import 临时屏幕照片 from './imgs/临时屏幕.png';
 import 设备照片 from './pin-pu-yi-bg-clean.png';
 
-const 是否显示临时屏幕照片 = false;
-
 enum E_选项卡菜单 {
   频率菜单列表 = '频率菜单列表',
   频率单位列表 = '频率单位列表',
@@ -257,6 +254,14 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
 
   console.groupEnd();
 }
+
+const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
+const 屏幕照片 = computed(() => {
+  if (state.频率状态.center.value > 0) return img_modules['./imgs/屏幕_1.png'].default;
+  if (state.频率状态.start.value > 0) return img_modules['./imgs/屏幕_2.png'].default;
+  if (state.频率状态.stop.value > 0) return img_modules['./imgs/屏幕_3.png'].default;
+  return img_modules['./imgs/屏幕_0.png'].default;
+});
 </script>
 
 <template>
@@ -264,7 +269,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
     { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state }
   }}</pre>
   <div class="relative wrp">
-    <img :src="设备照片" alt="频谱仪设备照片" />
+    <img :src="设备照片" alt="频谱仪设备" />
 
     <div
       data-box="屏幕右边的按钮"
@@ -284,12 +289,7 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
     </div>
 
     <div data-box="屏幕" class="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-black">
-      <img
+      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute top-0 left-0 w-[380px]! h-[330px]!" />
-        :src="临时屏幕照片"
-        alt="频谱仪设备照片"
-        class="absolute top-0 left-0 w-[380px]! h-[330px]!"
-        v-if="是否显示临时屏幕照片"
-      />
       <div
         v-if="state.频率状态.输入状态.选中的频率菜单列表的项目"
         data-box="显示输入的 Freq/Channel 的值"
@@ -450,7 +450,7 @@ img {
   font-size: 12px;
   /* border: 1px solid white; */
 }
-[alt='频谱仪设备照片'] {
+[alt='频谱仪设备'] {
   opacity: 1;
   transition: opacity 0.3s;
 }