style(src/assets/styles): 修复：全局样式变量_变量管理更方便

src/assets/styles/element-ui.scss

@@ -47,7 +47,7 @@
 }
 
 // 重写 el-table 的 loading-mask 加载进度蒙层
-.el-loading-mask{
+.el-loading-mask {
   z-index: 1 !important;
 }
 
@@ -161,4 +161,55 @@
 
 .el-table {
   --el-table-border: 2px solid var(--el-table-border-color) !important;
+}
+
+// 暗黑模式下 elementPlus 组件样式修复覆盖
+html.dark {
+
+  /* 表格样式覆盖 */
+  .el-table {
+    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
+    --el-table-header-text-color: var(--el-text-color-regular) !important;
+    --el-table-border-color: var(--el-border-color-light) !important;
+    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
+
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
+        color: var(--el-text-color-regular, #515a6e);
+      }
+    }
+  }
+
+  /* 树组件高亮样式覆盖 */
+  .el-tree {
+    .el-tree-node.is-current>.el-tree-node__content {
+      background-color: var(--el-bg-color-overlay) !important;
+      color: var(--el-color-primary);
+    }
+
+    .el-tree-node__content:hover {
+      background-color: var(--el-bg-color-overlay);
+    }
+  }
+
+  /* 下拉菜单样式覆盖 */
+  .el-dropdown-menu__item:not(.is-disabled):focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    background-color: var(--navbar-hover) !important;
+  }
+
+  /* blockquote样式覆盖 */
+  blockquote {
+    background-color: var(--blockquote-bg) !important;
+    border-left-color: var(--blockquote-border) !important;
+    color: var(--blockquote-text) !important;
+  }
+
+  /* 时间表达式标题样式覆盖 */
+  .popup-result .title {
+    background: var(--cron-border);
+  }
 }
\ No newline at end of file

src/assets/styles/index.scss

@@ -7,6 +7,7 @@
 @import './ruoyi.scss';
 @import './vant.scss';
 @import './font-size.scss';
+@import './plugins/splitpanes.scss';
 
 body {
   height: 100%;

src/assets/styles/plugins/splitpanes.scss

+/* 分割窗格覆盖 */
+.splitpanes {
+  background-color: var(--splitpanes-bg);
+
+  .splitpanes__pane {
+    background-color: var(--splitpanes-bg);
+    border-color: var(--splitpanes-border);
+  }
+
+  .splitpanes__splitter {
+    background-color: var(--splitpanes-splitter-bg);
+    border-color: var(--splitpanes-border);
+
+    &:hover {
+      background-color: var(--splitpanes-splitter-hover-bg);
+    }
+
+    &:before,
+    &:after {
+      background-color: var(--splitpanes-border);
+    }
+  }
+}
\ No newline at end of file

src/assets/styles/sidebar.scss

@@ -9,7 +9,7 @@
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
@@ -23,8 +23,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -69,7 +69,8 @@
       width: 100% !important;
     }
 
-    .el-menu-item, .menu-title {
+    .el-menu-item,
+    .menu-title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -87,7 +88,7 @@
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
+    & .theme-dark .is-active>.el-sub-menu__title {
       color: $base-menu-color-active !important;
     }
 
@@ -155,6 +156,7 @@
             visibility: hidden;
             display: inline-block;
           }
+
           &>i {
             height: 0;
             width: 0;
@@ -235,3 +237,34 @@
     }
   }
 }
+
+// 暗黑模式样式覆盖
+html.dark {
+
+  // 侧边栏菜单覆盖 
+  .sidebar-container {
+
+    .el-menu-item,
+    .menu-title {
+      color: var(--el-text-color-regular);
+    }
+
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .theme-dark .el-sub-menu .el-menu-item {
+      background-color: var(--el-bg-color) !important;
+    }
+  }
+
+  /* 顶部栏栏菜单覆盖 */
+  .el-menu--horizontal {
+    .el-menu-item {
+      &:not(.is-disabled) {
+
+        &:hover,
+        &:focus {
+          background-color: var(--navbar-hover) !important;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/assets/styles/variables.module.scss

-// 颜色变量
-
 // base color
 $blue: #324157;
 $light-blue: #333c46;
@@ -41,6 +39,7 @@ $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;
 $--color-info: #909399;
 
+// 导出变量给其他模块使用
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;
@@ -68,33 +67,34 @@ $--color-info: #909399;
   colorInfo: $--color-info;
 }
 
-// CSS变量定义
-/* 亮色模式变量 */
-:root {
-  --sidebar-bg: #{$menuBg};
-  --sidebar-text: #{$menuText};
-  --menu-hover: #{$menuHover};
-  --main-color: #{$mainColor};
-
-  --navbar-bg: #ffffff;
-  --navbar-text: #303133;
-
-  /* splitpanes default-theme 变量 */
-  --splitpanes-default-bg: #ffffff;
-
-}
+/*************** CSS变量定义 ***************/
+// 亮和暗通用变量
+:root {}
 
+/* 亮色模式变量 */
 html {
   --el-gray-1: rgba(0, 0, 0, 0.45);
   --el-gray-2: #666666;
   --el-gray-3: rgb(235, 235, 235);
-  // 表格变量
-  --el-timeout-row: rgb(235, 235, 235);
 
-  /* 主页背景 */
-  .app-main {
-    background-color: #f1f3f8 !important;
-  }
+  // 页面背景
+  --el-bg-color: #f1f3f8; // 主要页面背景颜色
+  --main-color: #{$mainColor}; // （移动端）主要页面背景颜色
+
+  // 表格相关
+  --el-timeout-row: rgb(235, 235, 235); // 表格过期行颜色
+
+  // 侧边栏
+  --sidebar-bg: #{$menuBg}; // 侧边栏
+  --sidebar-text: #{$menuText}; // 侧边栏文字
+  --menu-hover: #{$menuHover}; // 侧边栏菜单悬停
+
+  // 顶部导航
+  --navbar-bg: #ffffff; // 顶部导航栏
+  --navbar-text: #303133; // 顶部导航栏文字
+
+  // splitpanes 默认背景颜色
+  --splitpanes-default-bg: #ffffff;
 }
 
 /* 暗黑模式变量 */
@@ -102,28 +102,35 @@ html.dark {
   --el-gray-1: white;
   --el-gray-2: white;
   --el-gray-3: #1d1e1f;
-  --el-timeout-row: rgb(58, 58, 58);
 
-  /* 默认通用 */
+  // 页面背景
   --el-bg-color: #141414;
-  --el-bg-color-overlay: #1d1e1f;
-  --el-text-color-primary: #ffffff;
-  --el-text-color-regular: #d0d0d0;
-  --el-border-color: #434343;
-  --el-border-color-light: #434343;
 
-  /* 侧边栏 */
+  // 表格相关
+  --el-timeout-row: rgb(58, 58, 58);
+
+  // 侧边栏
   --sidebar-bg: #141414;
   --sidebar-text: #ffffff;
   --menu-hover: #2d2d2d;
   --menu-active-text: #{$menuActiveText};
 
-  /* 顶部导航栏 */
+  // 顶部导航栏
   --navbar-bg: #141414;
   --navbar-text: #ffffff;
   --navbar-hover: #141414;
 
-  /* 标签栏 */
+  // splitpanes default-theme 暗黑模式变量 
+  --splitpanes-default-bg: #141414;
+
+  /*************** 亮模式默认，暗黑模式需要覆盖的变量 ***************/
+  --el-bg-color-overlay: #1d1e1f;
+  --el-text-color-primary: #ffffff;
+  --el-text-color-regular: #d0d0d0;
+  --el-border-color: #434343;
+  --el-border-color-light: #434343;
+
+  // 标签栏
   --tags-bg: #141414;
   --tags-item-bg: #1d1e1f;
   --tags-item-border: #303030;
@@ -131,123 +138,20 @@ html.dark {
   --tags-item-hover: #2d2d2d;
   --tags-close-hover: #64666a;
 
-  /* splitpanes 组件暗黑模式变量 */
+  // splitpanes 组件暗黑模式变量
   --splitpanes-bg: #141414;
   --splitpanes-border: #303030;
   --splitpanes-splitter-bg: #1d1e1f;
   --splitpanes-splitter-hover-bg: #2d2d2d;
 
-  /* blockquote 暗黑模式变量 */
+  // blockquote 暗黑模式变量
   --blockquote-bg: #1d1e1f;
   --blockquote-border: #303030;
   --blockquote-text: #d0d0d0;
 
-  /* Cron 时间表达式 模式变量 */
+  // Cron 时间表达式 模式变量
   --cron-border: #303030;
 
-  /* splitpanes default-theme 暗黑模式变量 */
-  --splitpanes-default-bg: #141414;
 
-  /* 侧边栏菜单覆盖 */
-  .sidebar-container {
-
-    .el-menu-item,
-    .menu-title {
-      color: var(--el-text-color-regular);
-    }
-
-    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
-    & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: var(--el-bg-color) !important;
-    }
-  }
-
-  /* 顶部栏栏菜单覆盖 */
-  .el-menu--horizontal {
-    .el-menu-item {
-      &:not(.is-disabled) {
-
-        &:hover,
-        &:focus {
-          background-color: var(--navbar-hover) !important;
-        }
-      }
-    }
-  }
-
-  /* 分割窗格覆盖 */
-  .splitpanes {
-    background-color: var(--splitpanes-bg);
-
-    .splitpanes__pane {
-      background-color: var(--splitpanes-bg);
-      border-color: var(--splitpanes-border);
-    }
-
-    .splitpanes__splitter {
-      background-color: var(--splitpanes-splitter-bg);
-      border-color: var(--splitpanes-border);
-
-      &:hover {
-        background-color: var(--splitpanes-splitter-hover-bg);
-      }
-
-      &:before,
-      &:after {
-        background-color: var(--splitpanes-border);
-      }
-    }
-  }
-
-  /* 表格样式覆盖 */
-  .el-table {
-    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
-    --el-table-header-text-color: var(--el-text-color-regular) !important;
-    --el-table-border-color: var(--el-border-color-light) !important;
-    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
-
-
-    .el-table__header-wrapper,
-    .el-table__fixed-header-wrapper {
-      th {
-        background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
-        color: var(--el-text-color-regular, #515a6e);
-      }
-    }
-  }
-
-  /* 树组件高亮样式覆盖 */
-  .el-tree {
-    .el-tree-node.is-current>.el-tree-node__content {
-      background-color: var(--el-bg-color-overlay) !important;
-      color: var(--el-color-primary);
-    }
-
-    .el-tree-node__content:hover {
-      background-color: var(--el-bg-color-overlay);
-    }
-  }
-
-  /* 下拉菜单样式覆盖 */
-  .el-dropdown-menu__item:not(.is-disabled):focus,
-  .el-dropdown-menu__item:not(.is-disabled):hover {
-    background-color: var(--navbar-hover) !important;
-  }
-
-  /* blockquote样式覆盖 */
-  blockquote {
-    background-color: var(--blockquote-bg) !important;
-    border-left-color: var(--blockquote-border) !important;
-    color: var(--blockquote-text) !important;
-  }
-
-  /* 时间表达式标题样式覆盖 */
-  .popup-result .title {
-    background: var(--cron-border);
-  }
-
-  /* 主页背景 */
-  .app-main {
-    background-color: #141414 !important;
-  }
+
 }
\ No newline at end of file