style: 重新调整结构

src/components/Navbar.vue

@@ -83,14 +83,10 @@
             tabindex="0"
             role="button"
             class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300 flex items-center gap-2"
-            @click="isUserMenuOpen = !isUserMenuOpen"
           >
             <User class="h-5 w-5" />
             <span class="font-medium">{{ userName }}</span>
-            <ChevronDownIcon
-              class="icon"
-              :class="{ 'rotate-180': isUserMenuOpen }"
-            />
+            <ChevronDownIcon class="icon transition-transform duration-300 dropdown-icon" />
           </div>
           <ul
             tabindex="0"
@@ -196,4 +192,9 @@ onMounted(() => {
 .icon {
   @apply h-5 w-5 opacity-70;
 }
+
+.dropdown[open] .dropdown-icon,
+.dropdown:focus-within .dropdown-icon {
+  transform: rotate(180deg);
+}
 </style>

src/router/index.ts

@@ -2,12 +2,10 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
 import LabView from "../views/LabView.vue";
-import ProjectView from "../views/ProjectView.vue";
+import ProjectView from "../views/Project/Index.vue";
 import TestView from "../views/TestView.vue";
-import UserView from "../views/UserView.vue";
+import UserView from "@/views/User/Index.vue";
 import AdminView from "../views/AdminView.vue";
-import VideoStreamView from "../views/VideoStreamView.vue";
-import OscilloscopeView from "@/views/OscilloscopeView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

src/views/Project/BottomBar.vue

@@ -46,8 +46,8 @@
 </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 VideoStreamView from "@/views/Project/VideoStream.vue";
+import OscilloscopeView from "@/views/Project/Oscilloscope.vue";
 import { isNull, toNumber } from "lodash";
 import { ref } from "vue";
 

src/views/Project/Index.vue

@@ -94,7 +94,7 @@ import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
 import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
 import PropertyPanel from "@/components/PropertyPanel.vue";
 import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
-import FunctionBar from "@/components/FunctionBar.vue";
+import FunctionBar from "@/views/Project/BottomBar.vue";
 import { useProvideComponentManager } from "@/components/LabCanvas";
 import type { DiagramData } from "@/components/LabCanvas";
 import { useAlertStore } from "@/components/Alert";

src/views/User/Index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="min-h-screen bg-base-100 container mx-auto p-6 space-y-6 flex flex-row">
+    <ul class="menu bg-base-200 w-56 gap-2 rounded-2xl p-5">
+      <li id="1" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 1 }">用户信息</a>
+      </li>
+      <li id="2" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 2 }">Item 2</a>
+      </li>
+    </ul>
+    <div class="divider divider-horizontal h-full"></div>
+    <div class="card bg-base-200 w-300"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toNumber } from "lodash";
+import { ref } from "vue";
+
+const activePage = ref(1);
+
+function setActivePage(event: Event) {
+  const target = event.currentTarget as HTMLLinkElement;
+  activePage.value = toNumber(target.id);
+}
+</script>
+
+<style scoped>
+.menu-active {
+  position: relative;
+}
+
+.menu-active::before {
+  content: "";
+  position: absolute;
+  left: -12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 80%;
+  background-color: var(--color-primary);
+  border-radius: 2px;
+}
+</style>

src/views/UserView.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="min-h-screen bg-base-100 container mx-auto p-6 space-y-6">
-    <ul class="menu bg-base-200 w-56 gap-2 rounded-2xl">
-      <li><a>Item 1</a></li>
-      <li><a>Item 2</a></li>
-      <li><a>Item 3</a></li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>