From 53250a28ddb6bd7067283fca5e3db9ae153bd457 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Sun, 18 Feb 2024 23:23:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E5=B8=83=E5=B1=80=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain/index.vue       |  6 ++++
 src/layout/components/Settings/index.vue      | 17 ++++++-----
 .../Sidebar/components/SidebarLogo.vue        |  6 ++++
 src/layout/components/Sidebar/index.vue       |  5 ++--
 src/layout/index.vue                          | 28 +++++++++++++------
 5 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/layout/components/AppMain/index.vue b/src/layout/components/AppMain/index.vue
index da80b7a9..ca1ef366 100644
--- a/src/layout/components/AppMain/index.vue
+++ b/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>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index f697056c..b3badee9 100644
--- a/src/layout/components/Settings/index.vue
+++ b/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);
   }
 }
 
diff --git a/src/layout/components/Sidebar/components/SidebarLogo.vue b/src/layout/components/Sidebar/components/SidebarLogo.vue
index d62b4da9..49328f11 100644
--- a/src/layout/components/Sidebar/components/SidebarLogo.vue
+++ b/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>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index acebe79a..a39a849d 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 732151e6..5991f7bf 100644
--- a/src/layout/index.vue
+++ b/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);
   }