fix: 🐛 布局切换问题修复

src/layout/components/AppMain/index.vue

@@ -70,4 +70,10 @@ const cachedViews = computed(() => tagsViewStore.cachedViews); // 缓存页面
     }
   }
 }
+
+.layout-top {
+  .fixed-header + .app-main {
+    padding-top: $tags-view-height;
+  }
+}
 </style>

src/layout/components/Settings/index.vue

@@ -91,9 +91,9 @@ import { Sunny, Moon } from "@element-plus/icons-vue";
 
 const route = useRoute();
 
+const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
-const appStore = useAppStore();
 
 function findOutermostParent(tree: any[], findName: string) {
   let parentMap: any = {};
@@ -122,12 +122,6 @@ function findOutermostParent(tree: any[], findName: string) {
 
   return null;
 }
-const againActiveTop = (newVal: string) => {
-  const parent = findOutermostParent(permissionStore.routes, newVal);
-  if (appStore.activeTopMenu !== parent.path) {
-    appStore.activeTopMenu(parent.path);
-  }
-};
 
 /**
  * 切换布局
@@ -136,6 +130,15 @@ function changeLayout(layout: string) {
   settingsStore.changeSetting({ key: "layout", value: layout });
   if (layout === "mix") {
     route.name && againActiveTop(route.name as string);
+  } else if (layout === "top") {
+    appStore.openSideBar();
+  }
+}
+
+function againActiveTop(newVal: string) {
+  const parent = findOutermostParent(permissionStore.routes, newVal);
+  if (appStore.activeTopMenu !== parent.path) {
+    appStore.activeTopMenu(parent.path);
   }
 }
 

src/layout/components/Sidebar/components/SidebarLogo.vue

@@ -53,5 +53,11 @@ const logo = ref(new URL(`../../../../assets/logo.png`, import.meta.url).href);
   .logo-container {
     width: $sidebar-width;
   }
+
+  &.hideSidebar {
+    .logo-container {
+      width: $sidebar-width-collapsed;
+    }
+  }
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -20,9 +20,10 @@
 <script setup lang="ts">
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
+const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
-const appStore = useAppStore();
-const { sidebarLogo } = settingsStore;
+
+const sidebarLogo = settingsStore.sidebarLogo;
 const layout = computed(() => settingsStore.layout);
 </script>