vue-ts-example/src/components/PinPuYi/PinPuYi.vue

<!-- 频谱仪 -->
<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="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>{{ 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>{{ 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>{{ 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>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>0.0000 Hz</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <span>Singnal Track</span>
          </li>
          <li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
            <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>

    <div class="absolute top-[120px] left-[768px] ppy-btns h-[415px]" data-box="按键">
      <!-- 左上角. 长的 -->
      <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>
        <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>
        <button class="ppy-btn">4</button>
        <button class="ppy-btn">1</button>
        <button class="ppy-btn">0</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url('./Helvetica.css');
.wrp {
  font-family: 'Helvetica Custom';
}
.wrp * {
  overflow: hidden;
}

img {
  width: calc(2554px * 0.5);
  height: calc(1626px * 0.5);
  max-width: fit-content;
  max-height: fit-content;
}

.ppy-btn {
  height: 30px;
  width: 36px;
  border: 1px solid green;
  overflow: hidden;
  font-size: 10px;
  text-align: left;
  line-height: 1.2;
  padding-left: 2px;
  border-radius: 4px;
}

.menu-item {
  font-size: 12px;
  border: 1px solid white;
}
[alt='频谱仪设备照片'] {
  opacity: 1;
  transition: opacity 0.3s;
}

/* li,
.ppy-btns,
[data-box='屏幕'],
[data-box='菜单标题'] {
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
} */
</style>