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>