From 5b531e75db05d1b82c1a6c063de51c98ab56dc21 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 29 Mar 2024 17:00:29 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E9=87=8D=E6=9E=84=E5=A4=9A=E4=B8=BB?=
=?UTF-8?q?=E9=A2=98=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/NavigationBar/index.vue | 2 +-
src/styles/element-plus.css | 90 +++++++++++++++++
src/styles/index.scss | 4 +-
src/styles/theme/core/index.scss | 1 -
src/styles/theme/core/vxe-table.scss | 60 ------------
src/styles/theme/dark-blue/element-plus.css | 48 ---------
src/styles/theme/dark-blue/index.scss | 1 -
src/styles/theme/dark-blue/variables.scss | 8 +-
src/styles/theme/dark/variables.scss | 6 --
src/styles/variables.css | 1 +
src/styles/vxe-table.css | 97 +++++++++++++++++++
11 files changed, 193 insertions(+), 125 deletions(-)
create mode 100644 src/styles/element-plus.css
delete mode 100644 src/styles/theme/core/vxe-table.scss
delete mode 100644 src/styles/theme/dark-blue/element-plus.css
create mode 100644 src/styles/vxe-table.css
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index b651b91..e8413e9 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/src/layouts/components/NavigationBar/index.vue
@@ -104,7 +104,7 @@ const logout = () => {
:deep(.el-sub-menu) {
&.is-active {
.el-sub-menu__title {
- color: var(--el-menu-active-color) !important;
+ color: var(--el-color-primary) !important;
}
}
}
diff --git a/src/styles/element-plus.css b/src/styles/element-plus.css
new file mode 100644
index 0000000..6337bc1
--- /dev/null
+++ b/src/styles/element-plus.css
@@ -0,0 +1,90 @@
+/**
+ * dark-blue 主题模式下的 Element Plus CSS 变量
+ * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
+ * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
+ */
+
+/** 基础颜色 */
+html.dark-blue {
+ /** color-primary */
+ --el-color-primary: #00bb99;
+ --el-color-primary-light-3: #00bb99b3;
+ --el-color-primary-light-5: #00bb9980;
+ --el-color-primary-light-7: #00bb994d;
+ --el-color-primary-light-8: #00bb9933;
+ --el-color-primary-light-9: #00bb991a;
+ --el-color-primary-dark-2: #00bb99;
+ /** color-success */
+ --el-color-success: #67c23a;
+ --el-color-success-light-3: #67c23ab3;
+ --el-color-success-light-5: #67c23a80;
+ --el-color-success-light-7: #67c23a4d;
+ --el-color-success-light-8: #67c23a33;
+ --el-color-success-light-9: #67c23a1a;
+ --el-color-success-dark-2: #67c23a;
+ /** color-warning */
+ --el-color-warning: #e6a23c;
+ --el-color-warning-light-3: #e6a23cb3;
+ --el-color-warning-light-5: #e6a23c80;
+ --el-color-warning-light-7: #e6a23c4d;
+ --el-color-warning-light-8: #e6a23c33;
+ --el-color-warning-light-9: #e6a23c1a;
+ --el-color-warning-dark-2: #e6a23c;
+ /** color-danger */
+ --el-color-danger: #f56c6c;
+ --el-color-danger-light-3: #f56c6cb3;
+ --el-color-danger-light-5: #f56c6c80;
+ --el-color-danger-light-7: #f56c6c4d;
+ --el-color-danger-light-8: #f56c6c33;
+ --el-color-danger-light-9: #f56c6c1a;
+ --el-color-danger-dark-2: #f56c6c;
+ /** color-error */
+ --el-color-error: #f56c6c;
+ --el-color-error-light-3: #f56c6cb3;
+ --el-color-error-light-5: #f56c6c80;
+ --el-color-error-light-7: #f56c6c4d;
+ --el-color-error-light-8: #f56c6c33;
+ --el-color-error-light-9: #f56c6c1a;
+ --el-color-error-dark-2: #f56c6c;
+ /** color-info */
+ --el-color-info: #909399;
+ --el-color-info-light-3: #909399b3;
+ --el-color-info-light-5: #90939980;
+ --el-color-info-light-7: #9093994d;
+ --el-color-info-light-8: #90939933;
+ --el-color-info-light-9: #9093991a;
+ --el-color-info-dark-2: #909399;
+ /** text-color */
+ --el-text-color-primary: #e5eaf3;
+ --el-text-color-regular: #cfd3dc;
+ --el-text-color-secondary: #a3a6ad;
+ --el-text-color-placeholder: #8d9095;
+ --el-text-color-disabled: #6c6e72;
+ /** border-color */
+ --el-border-color-darker: #003380;
+ --el-border-color-dark: #003380;
+ --el-border-color: #003380;
+ --el-border-color-light: #003380;
+ --el-border-color-lighter: #003380;
+ --el-border-color-extra-light: #003380;
+ /** fill-color */
+ --el-fill-color-darker: #002b6b;
+ --el-fill-color-dark: #002b6b;
+ --el-fill-color: #002b6b;
+ --el-fill-color-light: #002359;
+ --el-fill-color-lighter: #002359;
+ --el-fill-color-blank: #001b44;
+ --el-fill-color-extra-light: #001b44;
+ /** bg-color */
+ --el-bg-color-page: #001535;
+ --el-bg-color: #001b44;
+ --el-bg-color-overlay: #002359;
+ /** mask-color */
+ --el-mask-color: rgba(0, 0, 0, 0.5);
+ --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+}
+
+/** button */
+html.dark-blue .el-button {
+ --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4f2865d..0204c4a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,12 +3,14 @@
// Transition
@import "./transition.scss";
// Element Plus
+@import "./element-plus.css";
@import "./element-plus.scss";
// Vxe Table
+@import "./vxe-table.css";
@import "./vxe-table.scss";
// 注册多主题
@import "./theme/register.scss";
-// mixin
+// Mixins
@import "./mixins.scss";
// View Transition
@import "./view-transition.scss";
diff --git a/src/styles/theme/core/index.scss b/src/styles/theme/core/index.scss
index d50e92e..5bfe156 100644
--- a/src/styles/theme/core/index.scss
+++ b/src/styles/theme/core/index.scss
@@ -1,5 +1,4 @@
.#{$theme-name} {
@import "./layouts.scss";
@import "./element-plus.scss";
- @import "./vxe-table.scss";
}
diff --git a/src/styles/theme/core/vxe-table.scss b/src/styles/theme/core/vxe-table.scss
deleted file mode 100644
index 3f0b333..0000000
--- a/src/styles/theme/core/vxe-table.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Vxe Table CSS 变量
- * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
- */
-
-* {
- /*color*/
- --vxe-font-color: #{$font-color};
- --vxe-primary-color: #{$theme-color};
- --vxe-success-color: #{$theme-color};
-
- /*input/radio/checkbox*/
- --vxe-input-border-color: #{$theme-color};
- --vxe-input-disabled-color: #{$theme-color};
- --vxe-input-disabled-background-color: #{lighten($theme-bg-color, 12%)};
-
- /*popup*/
- --vxe-table-popup-border-color: #{$border-color};
-
- /*table*/
- --vxe-table-header-font-color: #{$font-color};
- --vxe-table-border-color: #{$border-color};
- --vxe-table-header-background-color: #{lighten($theme-bg-color, 8%)};
- --vxe-table-body-background-color: #{lighten($theme-bg-color, 4%)};
- --vxe-table-row-hover-background-color: #{lighten($theme-bg-color, 8%)};
- --vxe-table-row-current-background-color: #{lighten($theme-bg-color, 8%)};
- --vxe-table-row-hover-current-background-color: #{lighten($theme-bg-color, 8%)};
- --vxe-table-checkbox-range-background-color: #{lighten($theme-bg-color, 8%)};
-
- /*loading*/
- --vxe-loading-color: #{$theme-color};
- --vxe-loading-background-color: #{rgba($theme-bg-color, 0.5)};
-
- /*toolbar*/
- --vxe-toolbar-background-color: #{lighten($theme-bg-color, 4%)};
- --vxe-toolbar-custom-active-background-color: #{lighten($theme-bg-color, 16%)};
- --vxe-toolbar-panel-background-color: #{lighten($theme-bg-color, 4%)};
-
- /*pager*/
- --vxe-pager-background-color: #{lighten($theme-bg-color, 4%)};
-
- /*modal*/
- --vxe-modal-header-background-color: #{lighten($theme-bg-color, 4%)};
- --vxe-modal-body-background-color: #{lighten($theme-bg-color, 4%)};
- --vxe-modal-border-color: #{$border-color};
-
- /*button*/
- --vxe-button-default-background-color: #{lighten($theme-bg-color, 8%)};
-
- /*input*/
- --vxe-input-background-color: #{lighten($theme-bg-color, 4%)};
- --vxe-input-panel-background-color: #{lighten($theme-bg-color, 4%)};
-
- /*form*/
- --vxe-form-background-color: #{lighten($theme-bg-color, 4%)};
-
- /*select*/
- --vxe-select-option-hover-background-color: #{lighten($theme-bg-color, 8%)};
- --vxe-select-panel-background-color: #{lighten($theme-bg-color, 4%)};
-}
diff --git a/src/styles/theme/dark-blue/element-plus.css b/src/styles/theme/dark-blue/element-plus.css
deleted file mode 100644
index 70949e2..0000000
--- a/src/styles/theme/dark-blue/element-plus.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * dark-blue 主题下的 Element Plus CSS 变量
- * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
- * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
- */
-
-html.dark-blue {
- /** color */
- --el-color-primary: #00bb99;
- --el-color-primary-light-3: #00bb99a2;
- --el-color-primary-light-7: #00bb9948;
- --el-color-primary-light-8: #00bb9932;
- --el-color-primary-light-9: #00bb9916;
- --el-color-primary-dark-2: #00bb99;
- /** text-color */
- --el-text-color-primary: #e5eaf3;
- --el-text-color-regular: #cfd3dc;
- --el-text-color-secondary: #a3a6ad;
- --el-text-color-placeholder: #8d9095;
- --el-text-color-disabled: #6c6e72;
- /** border-color */
- --el-border-color-darker: #003380;
- --el-border-color-dark: #003380;
- --el-border-color: #003380;
- --el-border-color-light: #003380;
- --el-border-color-lighter: #003380;
- --el-border-color-extra-light: #003380;
- /** fill-color */
- --el-fill-color-darker: #042d6b;
- --el-fill-color-dark: #042d6b;
- --el-fill-color: #042d6b;
- --el-fill-color-light: #032659;
- --el-fill-color-lighter: #032659;
- --el-fill-color-blank: #031e47;
- --el-fill-color-extra-light: #031e47;
- /** bg-color */
- --el-bg-color-page: #001535;
- --el-bg-color: #031e47;
- --el-bg-color-overlay: #032659;
- /** mask */
- --el-mask-color: rgba(0, 0, 0, 0.5);
- --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
-}
-
-/** button */
-html.dark-blue .el-button {
- --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
-}
diff --git a/src/styles/theme/dark-blue/index.scss b/src/styles/theme/dark-blue/index.scss
index e417e25..d39200d 100644
--- a/src/styles/theme/dark-blue/index.scss
+++ b/src/styles/theme/dark-blue/index.scss
@@ -1,3 +1,2 @@
-@use "./element-plus.css";
@import "./variables.scss";
@import "../core/index.scss";
diff --git a/src/styles/theme/dark-blue/variables.scss b/src/styles/theme/dark-blue/variables.scss
index 96bc8a0..2add393 100644
--- a/src/styles/theme/dark-blue/variables.scss
+++ b/src/styles/theme/dark-blue/variables.scss
@@ -3,12 +3,6 @@
// 主题名称
$theme-name: "dark-blue";
// 主题背景颜色
-$theme-bg-color: #031e47;
-// 主题色
-$theme-color: #00bb99;
-// 默认文字颜色
-$font-color: #cfd3dc;
+$theme-bg-color: #001b44;
// active 状态下文字颜色
$active-font-color: #ffffff;
-// 边框颜色
-$border-color: #003380;
diff --git a/src/styles/theme/dark/variables.scss b/src/styles/theme/dark/variables.scss
index e50d695..312cb3d 100644
--- a/src/styles/theme/dark/variables.scss
+++ b/src/styles/theme/dark/variables.scss
@@ -4,11 +4,5 @@
$theme-name: "dark";
// 主题背景颜色
$theme-bg-color: #141414;
-// 主题色
-$theme-color: #409eff;
-// 默认文字颜色
-$font-color: #cfd3dc;
// active 状态下文字颜色
$active-font-color: #ffffff;
-// 边框颜色
-$border-color: #4c4d4f;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index b0c9121..3dc7942 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,4 +1,5 @@
/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
+
:root {
/** Body */
--v3-body-text-color: var(--el-text-color-primary);
diff --git a/src/styles/vxe-table.css b/src/styles/vxe-table.css
new file mode 100644
index 0000000..8b9766f
--- /dev/null
+++ b/src/styles/vxe-table.css
@@ -0,0 +1,97 @@
+/**
+ * 所有主题模式下的 Vxe Table CSS 变量
+ * 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
+ * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
+ */
+
+:root {
+ /*color*/
+ --vxe-font-color: var(--el-text-color-regular);
+ --vxe-primary-color: var(--el-color-primary);
+ --vxe-success-color: var(--el-color-success);
+ --vxe-info-color: var(--el-color-info);
+ --vxe-warning-color: var(--el-color-warning);
+ --vxe-danger-color: var(--el-color-danger);
+
+ --vxe-font-lighten-color: var(--el-text-color-primary);
+ --vxe-primary-lighten-color: var(--el-color-primary-light-3);
+ --vxe-success-lighten-color: var(--el-color-success-light-3);
+ --vxe-info-lighten-color: var(--el-color-info-light-3);
+ --vxe-warning-lighten-color: var(--el-color-warning-light-3);
+ --vxe-danger-lighten-color: var(--el-color-danger-light-3);
+
+ --vxe-font-darken-color: var(--el-text-color-secondary);
+ --vxe-primary-darken-color: var(--el-color-primary-dark-2);
+ --vxe-success-darken-color: var(--el-color-success-dark-2);
+ --vxe-info-darken-color: var(--el-color-info-dark-2);
+ --vxe-warning-darken-color: var(--el-color-warning-dark-2);
+ --vxe-danger-darken-color: var(--el-color-danger-dark-2);
+
+ --vxe-font-disabled-color: var(--el-text-color-disabled);
+ --vxe-primary-disabled-color: var(--el-color-primary-light-5);
+ --vxe-success-disabled-color: var(--el-color-success-light-5);
+ --vxe-info-disabled-color: var(--el-color-info-light-5);
+ --vxe-warning-disabled-color: var(--el-color-warning-light-5);
+ --vxe-danger-disabled-color: var(--el-color-danger-light-5);
+
+ /*input/radio/checkbox*/
+ --vxe-input-border-color: var(--el-border-color);
+ --vxe-input-disabled-color: var(--el-text-color-disabled);
+ --vxe-input-disabled-background-color: var(--el-fill-color-light);
+ --vxe-input-placeholder-color: var(--el-text-color-placeholder);
+
+ /*popup*/
+ --vxe-table-popup-border-color: var(--el-border-color);
+
+ /*table*/
+ --vxe-table-header-font-color: var(--el-text-color-regular);
+ --vxe-table-footer-font-color: var(--el-text-color-regular);
+ --vxe-table-border-color: var(--el-border-color);
+ --vxe-table-header-background-color: var(--el-bg-color);
+ --vxe-table-body-background-color: var(--el-bg-color);
+ --vxe-table-footer-background-color: var(--el-bg-color);
+
+ --vxe-table-row-hover-background-color: var(--el-fill-color-light);
+ --vxe-table-row-current-background-color: var(--el-fill-color-light);
+ --vxe-table-row-hover-current-background-color: var(--el-fill-color-light);
+
+ --vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
+
+ /*menu*/
+ --vxe-table-menu-background-color: var(--el-bg-color-overlay);
+
+ /*loading*/
+ --vxe-loading-color: var(--el-color-primary);
+ --vxe-loading-background-color: var(--el-mask-color);
+
+ /*validate*/
+ --vxe-table-validate-error-color: var(--el-color-danger);
+
+ /*toolbar*/
+ --vxe-toolbar-background-color: var(--el-bg-color);
+ --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
+ --vxe-toolbar-panel-background-color: var(--el-bg-color);
+
+ /*pager*/
+ --vxe-pager-background-color: var(--el-bg-color);
+
+ /*modal*/
+ --vxe-modal-header-background-color: var(--el-bg-color);
+ --vxe-modal-body-background-color: var(--el-bg-color);
+ --vxe-modal-border-color: var(--el-border-color);
+
+ /*button*/
+ --vxe-button-default-background-color: var(--el-bg-color-overlay);
+
+ /*input*/
+ --vxe-input-background-color: var(--el-fill-color-blank);
+ --vxe-input-panel-background-color: var(--el-fill-color-blank);
+
+ /*form*/
+ --vxe-form-background-color: var(--el-bg-color);
+ --vxe-form-validate-error-color: var(--el-color-danger);
+
+ /*select*/
+ --vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
+ --vxe-select-panel-background-color: var(--el-bg-color);
+}