feat: 导航top

Former-commit-id: cc721dfba11eb53d8dc6a082016ef4832d21a516

src/layout/components/Sidebar/Logo.vue

@@ -14,7 +14,9 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
 </script>
 
 <template>
-  <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
+  <div
+    class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)] logo-wrap"
+  >
     <transition name="sidebarLogoFade">
       <router-link
         v-if="collapse"

src/layout/components/Sidebar/index.vue

@@ -14,21 +14,32 @@ const permissionStore = usePermissionStore();
 const appStore = useAppStore();
 const currRoute = useRoute();
 const { sidebarLogo } = storeToRefs(settingsStore);
+const layout = computed(() => settingsStore.layout);
+const showContent = ref(true);
+watch(
+  () => layout.value,
+  () => {
+    showContent.value = false;
+    nextTick(() => {
+      showContent.value = true;
+    });
+  }
+);
 </script>
 
 <template>
-  <div :class="{ 'has-logo': sidebarLogo }">
+  <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
     <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
-    <el-scrollbar>
+    <el-scrollbar v-if="showContent">
       <el-menu
-        :default-active="currRoute.path"
+        :default-active="layout === 'top' ? '-' : currRoute.path"
         :collapse="!appStore.sidebar.opened"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
         :active-text-color="variables.menuActiveText"
         :unique-opened="false"
         :collapse-transition="false"
-        mode="vertical"
+        :mode="layout === 'top' ? 'horizontal' : 'vertical'"
       >
         <sidebar-item
           v-for="route in permissionStore.routes"
@@ -39,5 +50,19 @@ const { sidebarLogo } = storeToRefs(settingsStore);
         />
       </el-menu>
     </el-scrollbar>
+    <NavRight v-if="layout === 'top'" />
   </div>
 </template>
+<style lang="scss" scoped>
+:deep(.setting-container) {
+  .setting-item {
+    color: #fff;
+    .svg-icon {
+      margin-right: 0px;
+    }
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>