feat: 添加功能底栏

src/components/FunctionBar.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="tabs tabs-box flex-shrink-0">
+      <label class="tab">
+        <input
+          type="radio"
+          name="function-bar"
+          id="1"
+          checked
+          @change="handleTabChange"
+        />
+        <TerminalIcon class="icon" />
+        日志终端
+      </label>
+      <label class="tab">
+        <input
+          type="radio"
+          name="function-bar"
+          id="2"
+          @change="handleTabChange"
+        />
+        <VideoIcon class="icon" />
+        HTTP视频流
+      </label>
+      <label class="tab">
+        <input
+          type="radio"
+          name="function-bar"
+          id="3"
+          @change="handleTabChange"
+        />
+        <SquareActivityIcon class="icon" />
+        示波器
+      </label>
+    </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>
+  </div>
+</template>
+<script setup lang="ts">
+import { VideoIcon, SquareActivityIcon, TerminalIcon } from "lucide-vue-next";
+import VideoStreamView from "@/views/VideoStreamView.vue";
+import OscilloscopeView from "@/views/OscilloscopeView.vue";
+import { isNull, toNumber } from "lodash";
+import { ref } from "vue";
+
+const checkID = ref(1);
+
+function handleTabChange(event: Event) {
+  const target = event.currentTarget as HTMLInputElement;
+  if (isNull(target)) return;
+
+  checkID.value = toNumber(target.id);
+}
+</script>
+
+<style scoped>
+@import "../assets/main.css";
+
+.icon {
+  @apply h-4 w-4 opacity-70 mr-1.5;
+}
+</style>

src/components/Navbar.vue

@@ -50,18 +50,6 @@
               测试功能
             </router-link>
           </li>
-          <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <router-link to="/video-stream" class="text-base font-medium">
-              <Video class="icon" />
-              HTTP视频流
-            </router-link>
-          </li>
-          <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <router-link to="/oscilloscope" class="text-base font-medium">
-              <SquareActivity class="icon" />
-              示波器
-            </router-link>
-          </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/markdown-test" class="text-base font-medium">
               <FileText class="icon" />