fix: 🐛 混合、顶部导航栏模式固定header下间距，混合模式左侧菜单高度不固定等样式问题修复

Former-commit-id: 63df66449582f41a710f761457e4afd21113aeb7

src/layout/components/AppMain.vue

@@ -28,7 +28,7 @@ const tagsViewStore = useTagsViewStore();
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: 34px;
 }
 
 .hasTagsView {
@@ -42,4 +42,31 @@ const tagsViewStore = useTagsViewStore();
     padding-top: 84px;
   }
 }
+
+.isMix {
+  .app-main {
+    height: calc(100vh - 50px);
+    overflow-y: auto;
+  }
+
+  .hasTagsView {
+    .app-main {
+      /* 84 = navbar + tags-view = 50 + 34 */
+      height: calc(100vh - 84px);
+    }
+
+    .fixed-header + .app-main {
+      min-height: calc(100vh - 50px);
+      padding-top: 34px;
+    }
+  }
+}
+
+.isTop {
+  .hasTagsView {
+    .fixed-header + .app-main {
+      padding-top: 34px;
+    }
+  }
+}
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -10,6 +10,8 @@ defineProps({
   },
 });
 
+const layout = computed(() => settingsStore.layout);
+
 const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
 </script>
 
@@ -25,7 +27,7 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
         to="/"
       >
         <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
-        <span v-else class="ml-3 text-white text-sm font-bold"
+        <span v-if="layout == 'top'" class="ml-3 text-white text-sm font-bold"
           >vue3-element-admin</span
         >
       </router-link>

src/layout/index.vue

@@ -124,23 +124,6 @@ function toggleSideBar() {
   }
 }
 
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
-  transition: width 0.28s;
-}
-
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.mobile .fixed-header {
-  width: 100%;
-}
-
 .drawer-bg {
   position: absolute;
   top: 0;
@@ -231,8 +214,11 @@ function toggleSideBar() {
 
 .openSidebar {
   .mix-wrap {
-    .el-menu {
+    .left-wrap {
       width: $sideBarWidth;
+    }
+
+    .el-menu {
       border: none;
     }
   }

src/layout/main.vue

@@ -55,3 +55,33 @@ watchEffect(() => {
     </RightPanel>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.isTop .fixed-header {
+  width: 100% !important;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+
+.isMix,
+.isTop {
+  .fixed-header {
+    top: 50px;
+  }
+}
+</style>

src/settings.ts

@@ -1,10 +1,11 @@
-// 系统设置
+/**
+ * 系统设置
+ */
 interface DefaultSettings {
   /**
    * 系统title
    */
   title: string;
-
   /**
    * 是否显示设置
    */
@@ -22,21 +23,21 @@ interface DefaultSettings {
    */
   sidebarLogo: boolean;
   /**
-   * 导航栏布局
+   * 导航栏布局(left|top|mix)
    */
   layout: string;
   /**
-   * 主题模式
+   * 主题模式(dark|light)
    */
   theme: string;
 
   /**
-   * 布局大小
+   * 布局大小(default |large |small)
    */
   size: string;
 
   /**
-   * 语言
+   * 语言( zh-cn| en)
    */
   language: string;
 }
@@ -47,16 +48,10 @@ const defaultSettings: DefaultSettings = {
   tagsView: true,
   fixedHeader: false,
   sidebarLogo: true,
-  layout: "mix",
+  layout: "mix", // 默认混合模式
-  /**
+  theme: "dark", // 默认暗黑模式
-   *  主题模式
+  size: "default",
-   *
+  language: "zh-cn",
-   * dark:暗黑模式
-   * light: 明亮模式
-   */
-  theme: "dark",
-  size: "default", // default |large |small
-  language: "zh-cn", // zh-cn| en
 };
 
 export default defaultSettings;

src/store/modules/settings.ts

@@ -1,15 +1,18 @@
 import { defineStore } from "pinia";
 import defaultSettings from "@/settings";
-import { useStorage } from "@vueuse/core";
 
 export const useSettingsStore = defineStore("setting", () => {
   // state
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
 
   const showSettings = ref<boolean>(defaultSettings.showSettings);
-  const fixedHeader = ref<boolean>(defaultSettings.fixedHeader);
   const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
 
+  const fixedHeader = useStorage<boolean>(
+    "fixedHeader",
+    defaultSettings.fixedHeader
+  );
+
   const layout = useStorage<string>("layout", defaultSettings.layout);
 
   // actions
@@ -31,8 +34,6 @@ export const useSettingsStore = defineStore("setting", () => {
       case "layout":
         layout.value = value;
         break;
-      default:
-        break;
     }
   }
 

src/styles/sidebar.scss

@@ -83,14 +83,11 @@
     }
   }
 
-  .left-wrap {
-    .svg-icon {
-      margin-top: -2px;
-      margin-right: 12px;
-    }
-  }
-
   .hideSidebar {
+    .left-wrap {
+      width: 54px;
+    }
+
     .sidebar-container {
       width: 54px !important;
 
@@ -100,7 +97,7 @@
 
       .header {
         .logo-wrap {
-          width: 63px !important;
+          width: 54px !important;
           transition: transform 0.28s;
         }
       }