wip: 顶部布局模式开发中

src/layouts/LeftMode.vue

@@ -67,6 +67,7 @@ $transition-time: 0.35s;
 }
 
 .sidebar-container {
+  background-color: var(--v3-sidebar-menu-bg-color);
   transition: width $transition-time;
   width: var(--v3-sidebar-width) !important;
   height: 100%;

src/layouts/LeftTopMode.vue

@@ -63,6 +63,7 @@ $transition-time: 0.35s;
 }
 
 .layout-header {
+  background-color: var(--v3-header-bg-color);
   box-shadow: var(--el-box-shadow-lighter);
 }
 

src/layouts/TopMode.vue

@@ -52,6 +52,7 @@ $transition-time: 0.35s;
 }
 
 .layout-header {
+  background-color: var(--v3-header-bg-color);
   box-shadow: var(--el-box-shadow-lighter);
 }
 
@@ -67,9 +68,6 @@ $transition-time: 0.35s;
 }
 
 .hasTagsView {
-  .sidebar-container {
-    padding-top: var(--v3-header-height);
-  }
   .app-main {
     padding-top: var(--v3-header-height);
   }

src/layouts/components/Logo/index.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { computed } from "vue"
 import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
-import { getCssVariableValue } from "@/utils"
 import logo from "@/assets/layouts/logo.png?url"
 import logoText1 from "@/assets/layouts/logo-text-1.png?url"
 import logoText2 from "@/assets/layouts/logo-text-2.png?url"
@@ -17,12 +15,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const settingsStore = useSettingsStore()
 const { layoutMode } = storeToRefs(settingsStore)
-
-const bgCloor = computed(() => {
-  return layoutMode.value !== "left"
-    ? getCssVariableValue("--v3-header-bg-color")
-    : getCssVariableValue("--v3-sidebar-menu-bg-color")
-})
 </script>
 
 <template>
@@ -44,7 +36,7 @@ const bgCloor = computed(() => {
   width: 100%;
   height: var(--v3-header-height);
   line-height: var(--v3-header-height);
-  background-color: v-bind(bgCloor);
+  background-color: transparent;
   text-align: center;
   overflow: hidden;
   .layout-logo {

src/layouts/components/NavigationBar/index.vue

@@ -77,28 +77,29 @@ const logout = () => {
   height: var(--v3-navigationbar-height);
   overflow: hidden;
   background: var(--v3-header-bg-color);
+  display: flex;
+  justify-content: space-between;
   .hamburger {
     display: flex;
     align-items: center;
     height: 100%;
-    float: left;
     padding: 0 15px;
     cursor: pointer;
   }
   .breadcrumb {
-    float: left;
+    flex: 1;
     // 参考 Bootstrap 的响应式设计将宽度设置为 576
     @media screen and (max-width: 576px) {
       display: none;
     }
   }
   .sidebar {
-    float: left;
+    flex: 1;
-    width: 992px;
+    :deep(.el-menu) {
-    height: 100%;
+      background-color: transparent;
+    }
   }
   .right-menu {
-    float: right;
     margin-right: 10px;
     height: 100%;
     display: flex;

src/layouts/components/Sidebar/index.vue

@@ -93,12 +93,14 @@ const tipLineWidth = computed(() => {
 
 .has-logo {
   .el-scrollbar {
-    height: calc(100% - var(--v3-header-height));
+    // 多 1% 是为了在左侧模式时侧边栏最底部不显示 1px 左右的白色线条
+    height: calc(101% - var(--v3-header-height));
   }
 }
 
 .el-scrollbar {
-  height: 100%;
+  // 多 5% 是为了在顶部模式时不显示垂直滚动条
+  height: 105%;
   :deep(.scrollbar-wrapper) {
     // 限制水平宽度
     overflow-x: hidden !important;

src/styles/theme/core/element-plus.scss

@@ -4,17 +4,17 @@
 .el-popper {
   border: none !important;
   .el-menu {
-    background-color: lighten($theme-bg-color, 4%) !important;
+    background-color: lighten($theme-bg-color, 2%) !important;
     .el-menu-item {
-      background-color: lighten($theme-bg-color, 4%) !important;
+      background-color: lighten($theme-bg-color, 2%) !important;
       &.is-active,
       &:hover {
-        background-color: lighten($theme-bg-color, 8%) !important;
+        background-color: lighten($theme-bg-color, 6%) !important;
         color: $active-font-color !important;
       }
     }
     .el-sub-menu__title {
-      background-color: lighten($theme-bg-color, 4%) !important;
+      background-color: lighten($theme-bg-color, 2%) !important;
     }
     .el-sub-menu {
       &.is-active {
@@ -24,4 +24,7 @@
       }
     }
   }
+  .el-menu--horizontal {
+    border: none;
+  }
 }

src/styles/theme/core/layouts.scss

@@ -9,26 +9,22 @@
 }
 
 .app-wrapper {
-  // Logo
-  .layout-logo-container {
-    background-color: lighten($theme-bg-color, 2%) !important;
-  }
-
   // 侧边栏
   .sidebar-container {
+    background-color: lighten($theme-bg-color, 2%);
     .el-menu {
-      background-color: lighten($theme-bg-color, 4%) !important;
+      background-color: lighten($theme-bg-color, 2%) !important;
       .el-menu-item {
-        background-color: lighten($theme-bg-color, 4%) !important;
+        background-color: lighten($theme-bg-color, 2%) !important;
         &.is-active,
         &:hover {
-          background-color: lighten($theme-bg-color, 8%) !important;
+          background-color: lighten($theme-bg-color, 6%) !important;
           color: $active-font-color !important;
         }
       }
     }
     .el-sub-menu__title {
-      background-color: lighten($theme-bg-color, 4%) !important;
+      background-color: lighten($theme-bg-color, 2%) !important;
     }
     .el-sub-menu {
       &.is-active {
@@ -41,6 +37,7 @@
 
   // Header
   .layout-header {
+    background-color: $theme-bg-color;
     border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
   }