From 58cfdebcca56fe9789642acb794e917b7ac01b48 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 19 Jul 2023 09:05:55 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E9=A1=B6=E9=83=A8=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=BC=80=E5=8F=91=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/LeftMode.vue                       |  1 +
 src/layouts/LeftTopMode.vue                    |  1 +
 src/layouts/TopMode.vue                        |  4 +---
 src/layouts/components/Logo/index.vue          | 10 +---------
 src/layouts/components/NavigationBar/index.vue | 13 +++++++------
 src/layouts/components/Sidebar/index.vue       |  6 ++++--
 src/styles/theme/core/element-plus.scss        | 11 +++++++----
 src/styles/theme/core/layouts.scss             | 15 ++++++---------
 8 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index fa50740..d92daf9 100644
--- a/src/layouts/LeftMode.vue
+++ b/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%;
diff --git a/src/layouts/LeftTopMode.vue b/src/layouts/LeftTopMode.vue
index 8588654..4848b69 100644
--- a/src/layouts/LeftTopMode.vue
+++ b/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);
 }
 
diff --git a/src/layouts/TopMode.vue b/src/layouts/TopMode.vue
index 313f0ac..87cf2bc 100644
--- a/src/layouts/TopMode.vue
+++ b/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);
   }
diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue
index c420c75..aab1c33 100644
--- a/src/layouts/components/Logo/index.vue
+++ b/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 {
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index ffbb6fc..40c49ac 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/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;
-    width: 992px;
-    height: 100%;
+    flex: 1;
+    :deep(.el-menu) {
+      background-color: transparent;
+    }
   }
   .right-menu {
-    float: right;
     margin-right: 10px;
     height: 100%;
     display: flex;
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index 711a5fe..7c2e058 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/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;
diff --git a/src/styles/theme/core/element-plus.scss b/src/styles/theme/core/element-plus.scss
index 102a940..f008604 100644
--- a/src/styles/theme/core/element-plus.scss
+++ b/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;
+  }
 }
diff --git a/src/styles/theme/core/layouts.scss b/src/styles/theme/core/layouts.scss
index 231a01c..66570d9 100644
--- a/src/styles/theme/core/layouts.scss
+++ b/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;
   }