refactor: ♻️ 重构优化导航栏代码

src/layout/components/NavBar/index.vue

@@ -1,25 +1,30 @@
 <template>
   <div class="navbar">
-    <div class="navbar__left">
-      <!-- 展开/收缩菜单  -->
+    <div class="flex-y-center">
+      <!-- 菜单折叠按钮 -->
       <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
-      <!-- 面包屑 -->
+      <!-- 面包屑导航 -->
       <Breadcrumb />
     </div>
-    <!-- 导航栏右侧 -->
-    <NavbarRight />
+    <!-- 导航栏操作区域 -->
+    <div class="navbar__actions">
+      <NavbarActions />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useAppStore } from "@/store";
+import Hamburger from "@/components/Hamburger/index.vue";
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+import NavbarActions from "./components/NavbarActions.vue";
 
 const appStore = useAppStore();
 
-// 侧边栏是否打开
+// 侧边栏展开状态
 const isSidebarOpened = computed(() => appStore.sidebar.opened);
 
-// 展开/收缩菜单
+// 切换侧边栏展开/折叠状态
 function toggleSideBar() {
   appStore.toggleSidebar();
 }
@@ -32,7 +37,7 @@ function toggleSideBar() {
   height: $navbar-height;
   background: var(--el-bg-color);
 
-  &__left {
+  &__actions {
     display: flex;
     align-items: center;
   }