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

src/layout/components/Sidebar/index.vue

@@ -1,25 +1,28 @@
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <!-- 混合布局的顶部的Sidebar -->
-    <div v-if="layout == LayoutEnum.MIX" class="flex w-full">
-      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+    <!-- 混合布局顶部  -->
+    <div v-if="isMixLayout" class="flex w-full">
+      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <SidebarMixTopMenu class="flex-1" />
-      <NavbarAction />
+      <NavbarRight />
     </div>
-    <!-- 左侧和顶部布局的Sidebar -->
+
+    <!-- 顶部布局顶部 || 左侧布局左侧 -->
     <template v-else>
-      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <el-scrollbar>
         <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
       </el-scrollbar>
-      <NavbarAction v-if="layout === LayoutEnum.TOP" />
+
+      <!-- 顶部布局导航 -->
+      <NavbarRight v-if="isTopLayout" />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 import { LayoutEnum } from "@/enums/LayoutEnum";
+import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -27,6 +30,10 @@ const permissionStore = usePermissionStore();
 
 const sidebarLogo = computed(() => settingsStore.sidebarLogo);
 const layout = computed(() => settingsStore.layout);
+
+const isMixLayout = computed(() => layout.value === LayoutEnum.MIX);
+const isTopLayout = computed(() => layout.value === LayoutEnum.TOP);
+const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
 </script>
 
 <style lang="scss" scoped>