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>

src/layout/index.vue

@@ -48,13 +48,10 @@
 
 <script setup lang="ts">
 import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
-const permissionStore = usePermissionStore();
-const { width } = useWindowSize();
-
-const WIDTH = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
 
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 const showTagsView = computed(() => settingsStore.tagsView);
@@ -90,6 +87,9 @@ const classObj = computed(() => ({
   "layout-mix": layout.value === "mix",
 }));
 
+const width = useWindowSize().width;
+const WIDTH = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
+
 watchEffect(() => {
   if (width.value < WIDTH) {
     appStore.toggleDevice("mobile");
@@ -166,13 +166,19 @@ function toggleSidebar() {
     }
 
     :deep(.el-menu-item),
-    :deep(.el-sub-menu__title) {
+    :deep(.el-sub-menu__title),
+    :deep(.el-menu--horizontal) {
       height: $navbar-height;
       line-height: $navbar-height;
     }
+
+    :deep(.el-menu--collapse) {
+      width: 100%;
+    }
   }
 
   .main-container {
+    margin-top: $navbar-height;
     margin-left: 0;
   }
 }
@@ -199,9 +205,10 @@ function toggleSidebar() {
     }
   }
 
-  .fixed-header {
-    top: $navbar-height;
-    width: calc(100% - $sidebar-width);
+  &.hideSidebar {
+    .sidebar-container {
+      width: 100% !important;
+    }
   }
 
   .mix-container {
@@ -244,6 +251,10 @@ function toggleSidebar() {
       flex: 1;
       min-width: 0;
       margin-left: 0;
+
+      .fixed-header {
+        top: $navbar-height;
+      }
     }
   }
 }
@@ -262,6 +273,7 @@ function toggleSidebar() {
   }
 
   .fixed-header {
+    left: $sidebar-width-collapsed;
     width: calc(100% - $sidebar-width-collapsed);
   }