From 3c4f8f90eb006e2012744566a895d80baf20b623 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 30 Apr 2024 21:31:25 +0800
Subject: [PATCH 1/3] =?UTF-8?q?wip:=20=E4=B8=BB=E9=A2=98=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E5=85=A8=E9=9D=A2=E9=87=87=E7=94=A8=20css=20var?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/LeftMode.vue                      |  4 ++
 .../components/NavigationBar/index.vue        | 10 -----
 src/layouts/components/Sidebar/index.vue      | 38 +++++++++++--------
 src/styles/element-plus.css                   |  2 +-
 src/styles/index.scss                         |  4 +-
 src/styles/variables.css                      | 18 ++++++++-
 src/styles/vxe-table.css                      |  4 +-
 7 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index 5b6d0545..588bab4b 100644
--- a/src/layouts/LeftMode.vue
+++ b/src/layouts/LeftMode.vue
@@ -67,6 +67,10 @@ $transition-time: 0.35s;
 
 .sidebar-container {
   background-color: var(--v3-sidebar-menu-bg-color);
+  --el-menu-bg-color: var(--v3-sidebar-menu-bg-color);
+  --el-menu-hover-bg-color: var(--v3-sidebar-menu-hover-bg-color);
+  --el-menu-text-color: var(--v3-sidebar-menu-text-color);
+  --el-menu-active-color: var(--v3-sidebar-menu-active-text-color);
   transition: width $transition-time;
   width: var(--v3-sidebar-width) !important;
   height: 100%;
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index e8413e93..5bec4697 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/src/layouts/components/NavigationBar/index.vue
@@ -98,16 +98,6 @@ const logout = () => {
     flex: 1;
     // 设置 min-width 是为了让 Sidebar 里的 el-menu 宽度自适应
     min-width: 0px;
-    :deep(.el-menu) {
-      background-color: transparent;
-    }
-    :deep(.el-sub-menu) {
-      &.is-active {
-        .el-sub-menu__title {
-          color: var(--el-color-primary) !important;
-        }
-      }
-    }
   }
   .right-menu {
     margin-right: 10px;
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index 29f6a567..5c321a34 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -8,11 +8,11 @@ import SidebarItem from "./SidebarItem.vue"
 import Logo from "../Logo/index.vue"
 import { useDevice } from "@/hooks/useDevice"
 import { useLayoutMode } from "@/hooks/useLayoutMode"
-import { getCssVariableValue } from "@/utils"
+// import { getCssVariableValue } from "@/utils"
 
-const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
-const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
-const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
+// const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
+// const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
+// const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
 
 const { isMobile } = useDevice()
 const { isLeft, isTop } = useLayoutMode()
@@ -31,15 +31,15 @@ const activeMenu = computed(() => {
 const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
 const isCollapse = computed(() => !appStore.sidebar.opened)
 const isLogo = computed(() => isLeft.value && settingsStore.showLogo)
-const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
-const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
-const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
+// const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
+// const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
+// const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
 const sidebarMenuItemHeight = computed(() => {
   return !isTop.value ? "var(--v3-sidebar-menu-item-height)" : "var(--v3-navigationbar-height)"
 })
-const sidebarMenuHoverBgColor = computed(() => {
-  return !isTop.value ? "var(--v3-sidebar-menu-hover-bg-color)" : "transparent"
-})
+// const sidebarMenuHoverBgColor = computed(() => {
+//   return !isTop.value ? "var(--v3-sidebar-menu-hover-bg-color)" : "transparent"
+// })
 const tipLineWidth = computed(() => {
   return !isTop.value ? "2px" : "0px"
 })
@@ -56,12 +56,10 @@ const hiddenScrollbarVerticalBar = computed(() => {
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse && !isTop"
-        :background-color="backgroundColor"
-        :text-color="textColor"
-        :active-text-color="activeTextColor"
         :unique-opened="true"
         :collapse-transition="false"
         :mode="isTop && !isMobile ? 'horizontal' : 'vertical'"
+        popper-class="xxx"
       >
         <SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
@@ -69,6 +67,15 @@ const hiddenScrollbarVerticalBar = computed(() => {
   </div>
 </template>
 
+<style lang="scss">
+.xxx {
+  --el-menu-bg-color: var(--v3-sidebar-menu-bg-color);
+  --el-menu-hover-bg-color: var(--v3-sidebar-menu-hover-bg-color);
+  --el-menu-text-color: var(--v3-sidebar-menu-text-color);
+  --el-menu-active-color: var(--v3-sidebar-menu-active-text-color);
+}
+</style>
+
 <style lang="scss" scoped>
 %tip-line {
   &::before {
@@ -130,14 +137,15 @@ const hiddenScrollbarVerticalBar = computed(() => {
   line-height: v-bind(sidebarMenuItemHeight);
   &.is-active,
   &:hover {
-    background-color: v-bind(sidebarMenuHoverBgColor);
+    // background-color: v-bind(sidebarMenuHoverBgColor);
+    // background-color: var(--v3-sidebar-menu-hover-bg-color);
   }
 }
 
 :deep(.el-sub-menu) {
   &.is-active {
     > .el-sub-menu__title {
-      color: v-bind(activeTextColor) !important;
+      // color: v-bind(activeTextColor) !important;
     }
   }
 }
diff --git a/src/styles/element-plus.css b/src/styles/element-plus.css
index 6337bc19..3866dbfe 100644
--- a/src/styles/element-plus.css
+++ b/src/styles/element-plus.css
@@ -1,5 +1,5 @@
 /**
- * dark-blue 主题模式下的 Element Plus CSS 变量
+ * 自定义 Element Plus CSS 变量
  * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
  * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
  */
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0204c4a9..dc0cb9b6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,4 @@
-// 全局 CSS 变量
+// 项目 CSS 变量
 @import "./variables.css";
 // Transition
 @import "./transition.scss";
@@ -9,7 +9,7 @@
 @import "./vxe-table.css";
 @import "./vxe-table.scss";
 // 注册多主题
-@import "./theme/register.scss";
+// @import "./theme/register.scss";
 // Mixins
 @import "./mixins.scss";
 // View Transition
diff --git a/src/styles/variables.css b/src/styles/variables.css
index d97caca5..fe9485d2 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,4 +1,4 @@
-/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
+/** 项目 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
 
 :root {
   /** Body */
@@ -44,6 +44,22 @@
   --v3-rightpanel-button-bg-color: #001428;
 }
 
+/** dark 主题模式 */
+html.dark {
+  --v3-sidebar-menu-bg-color: var(--el-bg-color);
+  --v3-sidebar-menu-hover-bg-color: var(--el-bg-color-overlay);
+  --v3-sidebar-menu-text-color: #cfd3dc;
+  --v3-sidebar-menu-active-text-color: #ffffff;
+}
+
+/** dark-blue 主题模式 */
+html.dark-blue {
+  --v3-sidebar-menu-bg-color: var(--el-bg-color);
+  --v3-sidebar-menu-hover-bg-color: var(--el-bg-color-overlay);
+  --v3-sidebar-menu-text-color: #cfd3dc;
+  --v3-sidebar-menu-active-text-color: #ffffff;
+}
+
 /** 内容区放大时，将不需要的组件隐藏 */
 body.content-large {
   /** Header 区域 = TagsView 组件 */
diff --git a/src/styles/vxe-table.css b/src/styles/vxe-table.css
index 13bd1d4b..c5311ff1 100644
--- a/src/styles/vxe-table.css
+++ b/src/styles/vxe-table.css
@@ -1,6 +1,6 @@
 /**
- * 所有主题模式下的 Vxe Table CSS 变量
- * 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
+ * 自定义 Vxe Table CSS 变量
+ * 用 Element Plus CSS 变量来覆写 Vxe Table CSS 变量，目的是让 Vxe Table 在不同主题模式下都跟随 Element Plus 的颜色
  * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
  */
 

From 5eff651c88dcd6c3d74df0c9a2335e7bcba9a403 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 9 Aug 2024 18:06:59 +0800
Subject: [PATCH 2/3] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E4=B8=80?=
 =?UTF-8?q?=E7=82=B9=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/element-plus.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/element-plus.css b/src/styles/element-plus.css
index 3866dbfe..67225e30 100644
--- a/src/styles/element-plus.css
+++ b/src/styles/element-plus.css
@@ -2,6 +2,7 @@
  * 自定义 Element Plus CSS 变量
  * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
  * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
+ * 由于 Element Plus 自带默认主题模式和 dark 主题模式，所以这里只新增 dark-blue 主题模式下的变量，但你也可以根据需求自行在这里定义每个模式的变量~
  */
 
 /** 基础颜色 */

From 2d5a68d1770e62504d1e795a4a2e84afa2759511 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 9 Aug 2024 18:07:51 +0800
Subject: [PATCH 3/3] style: lint

---
 src/layouts/LeftMode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index 588bab4b..dbb798e8 100644
--- a/src/layouts/LeftMode.vue
+++ b/src/layouts/LeftMode.vue
@@ -66,11 +66,11 @@ $transition-time: 0.35s;
 }
 
 .sidebar-container {
-  background-color: var(--v3-sidebar-menu-bg-color);
   --el-menu-bg-color: var(--v3-sidebar-menu-bg-color);
   --el-menu-hover-bg-color: var(--v3-sidebar-menu-hover-bg-color);
   --el-menu-text-color: var(--v3-sidebar-menu-text-color);
   --el-menu-active-color: var(--v3-sidebar-menu-active-text-color);
+  background-color: var(--v3-sidebar-menu-bg-color);
   transition: width $transition-time;
   width: var(--v3-sidebar-width) !important;
   height: 100%;