FPGA_WebLab/src/views/Project/BottomBar.vue

<template>
  <div class="h-full flex flex-col gap-7">
    <div class="tabs tabs-box flex-shrink-0 shadow-xl mx-5">
      <label class="tab">
        <input
          type="radio"
          name="function-bar"
          id="1"
          :checked="checkID === 1"
          @change="handleTabChange"
        />
        <TerminalIcon class="icon" />
        日志终端
      </label>
      <label class="tab">
        <input
          type="radio"
          name="function-bar"
          id="2"
          :checked="checkID === 2"
          @change="handleTabChange"
        />
        <VideoIcon class="icon" />
        HTTP视频流
      </label>
      <label class="tab">
        <input
          type="radio"
          name="function-bar"
          id="3"
          :checked="checkID === 3"
          @change="handleTabChange"
        />
        <SquareActivityIcon class="icon" />
        示波器
      </label>
      <label class="tab">
        <input
          type="radio"
          name="function-bar"
          id="4"
          :checked="checkID === 4"
          @change="handleTabChange"
        />
        <Binary class="icon" />
        逻辑分析仪
      </label>
      <label class="tab">
        <input
          type="radio"
          name="function-bar"
          id="5"
          :checked="checkID === 5"
          @change="handleTabChange"
        />
        <Hand class="icon" />
        嵌入式逻辑分析仪
      </label>
      <!-- 全屏按钮 -->
      <button
        class="fullscreen-btn ml-auto btn btn-ghost btn-sm"
        @click="toggleFullscreen"
        :title="isFullscreen ? '退出全屏' : '全屏'"
      >
        <MaximizeIcon v-if="!isFullscreen" class="icon" />
        <MinimizeIcon v-else class="icon" />
      </button>
    </div>
    <!-- 主页面 -->
    <div class="flex-1 overflow-hidden">
      <div v-if="checkID === 1" class="h-full overflow-y-auto"></div>
      <div v-else-if="checkID === 2" class="h-full overflow-y-auto">
        <VideoStreamView />
      </div>
      <div v-else-if="checkID === 3" class="h-full overflow-y-auto">
        <OscilloscopeView />
      </div>
      <div v-else-if="checkID === 4" class="h-full overflow-y-auto">
        <LogicAnalyzerView />
      </div>
      <div v-else-if="checkID === 5" class="h-full overflow-y-auto">
        <Debugger />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  VideoIcon,
  SquareActivityIcon,
  TerminalIcon,
  MaximizeIcon,
  MinimizeIcon,
  Binary,
  Hand,
} from "lucide-vue-next";
import { useLocalStorage } from "@vueuse/core";
import VideoStreamView from "@/views/Project/VideoStream.vue";
import OscilloscopeView from "@/views/Project/Oscilloscope.vue";
import LogicAnalyzerView from "@/views/Project/LogicAnalyzer.vue";
import { isNull, toNumber } from "lodash";
import { onMounted, ref, watch } from "vue";
import Debugger from "./Debugger.vue";
import { useProvideLogicAnalyzer } from "@/components/LogicAnalyzer";
import { useProvideWaveformManager } from "@/components/WaveformDisplay/WaveformManager";
import { useProvideOscilloscope } from "@/components/Oscilloscope/OscilloscopeManager";

const analyzer = useProvideLogicAnalyzer();
const waveformManager = useProvideWaveformManager();
const oscilloscopeManager = useProvideOscilloscope();

waveformManager.logicData.value = waveformManager.generateTestData();

const checkID = useLocalStorage("checkID", 1);

// 定义事件
const emit = defineEmits<{
  toggleFullscreen: [];
}>();

// 接收父组件传递的全屏状态
const props = defineProps<{
  isFullscreen?: boolean;
}>();

const isFullscreen = ref(props.isFullscreen || false);

// 监听props变化
watch(
  () => props.isFullscreen,
  (newVal) => {
    isFullscreen.value = newVal || false;
  },
);

function handleTabChange(event: Event) {
  const target = event.currentTarget as HTMLInputElement;
  if (isNull(target)) return;

  checkID.value = toNumber(target.id);
}

function toggleFullscreen() {
  emit("toggleFullscreen");
}
</script>

<style scoped lang="postcss">
@import "@/assets/main.css";

.icon {
  @apply h-4 w-4 opacity-70 mr-1.5;
}

.tabs {
  @apply relative flex items-center;
}

.fullscreen-btn {
  @apply flex items-center justify-center p-2 rounded-lg transition-colors;
}

.fullscreen-btn .icon {
  @apply mr-0;
}
</style>