wip: vxe-table 适配主题模式

pnpm-lock.yaml

@@ -1372,7 +1372,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001423
+      caniuse-lite: 1.0.30001425
       electron-to-chromium: 1.4.284
       node-releases: 2.0.6
       update-browserslist-db: 1.0.10_browserslist@4.21.4
@@ -1419,8 +1419,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite/1.0.30001423:
-    resolution: {integrity: sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==}
+  /caniuse-lite/1.0.30001425:
+    resolution: {integrity: sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw==}
     dev: true
 
   /chalk/1.1.3:

src/styles/theme/core/index.scss

@@ -3,5 +3,6 @@
   @import "./login.scss";
   @import "./error-page.scss";
   @import "./element-plus.scss";
+  @import "./vxe-table.scss";
   @import "./other.scss";
 }

src/styles/theme/core/vxe-table.scss

@@ -0,0 +1,48 @@
+/**
+ * VxeTable CSS 变量
+ * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss
+ */
+
+/** font */
+$vxe-font-color: $font-color;
+
+/** color */
+// $vxe-primary-color: $active-theme-bg-color;
+// $vxe-success-color: $active-theme-bg-color;
+
+/** table */
+$vxe-table-font-color: $font-color;
+$vxe-table-border-color: $border-color;
+$vxe-table-header-background-color: lighten($theme-bg-color, 4%);
+$vxe-table-body-background-color: lighten($theme-bg-color, 4%);
+$vxe-table-row-hover-background-color: lighten($theme-bg-color, 8%);
+$vxe-table-checkbox-range-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%);
+
+/** toolbar */
+$vxe-toolbar-background-color: $theme-bg-color;
+
+/** pager */
+$vxe-pager-background-color: lighten($theme-bg-color, 4%);
+
+/** modal */
+$vxe-modal-header-background-color: $theme-bg-color;
+$vxe-modal-body-background-color: $theme-bg-color;
+$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, 8%);
+$vxe-input-panel-background-color: lighten($theme-bg-color, 8%);
+
+/** 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%);
+
+@import "vxe-table/styles/index.scss";

src/styles/theme/dark-blue/element-plus.css

@@ -1,19 +1,19 @@
 /**
- * dark-blue 主题下的 Element Plus CSS 变量
+ * dark-blue 主题下的 ElementPlus CSS 变量
  * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
  */
 
 html.dark-blue {
-  /* color */
+  /** color */
   --el-color-primary: #01efb7bb;
   --el-color-success: #01efb7bb;
-  /* text-color */
+  /** text-color */
   --el-text-color-primary: rgba(255, 255, 255, 0.8);
   --el-text-color-regular: rgba(255, 255, 255, 0.8);
   --el-text-color-secondary: rgba(255, 255, 255, 0.8);
   --el-text-color-placeholder: rgba(255, 255, 255, 0.8);
   --el-text-color-disabled: rgba(255, 255, 255, 0.3);
-  /* border-color */
+  /** border-color */
   --el-border-color: #01efb755;
   --el-border-color-light: #01efb755;
   --el-border-color-lighter: #01efb755;
@@ -21,7 +21,7 @@ html.dark-blue {
   --el-fill-color: #01efb710;
   --el-fill-color-light: #01efb710;
   --el-fill-color-blank: #031e47;
-  /* bg-color */
+  /** bg-color */
   --el-bg-color: #021633;
   --el-bg-color-overlay: #021633;
   /** mask */

src/styles/theme/dark-blue/variables.scss

@@ -7,7 +7,7 @@ $theme-bg-color: #021633;
 // active 状态下主题背景颜色
 $active-theme-bg-color: var(--el-color-primary);
 // 默认文字颜色
-$font-color: #ffffffee;
+$font-color: rgba(255, 255, 255, 0.8);
 // active 状态下文字颜色
 $active-font-color: #fff;
 // hover 状态下文字颜色

src/styles/vxe-table.scss

@@ -4,28 +4,28 @@
   // 表单
   &--form-wrapper {
     .vxe-form {
-      padding: 10px 20px;
-      margin-bottom: 20px;
+      padding: 10px 20px !important;
+      margin-bottom: 20px !important;
     }
   }
 
   // 工具栏
   &--toolbar-wrapper {
     .vxe-toolbar {
-      padding: 20px;
+      padding: 20px !important;
     }
   }
 
   // 分页
   &--pager-wrapper {
     .vxe-pager {
-      height: 70px;
+      height: 70px !important;
       &--wrapper {
         @media screen and (max-width: 750px) {
           .vxe-pager--total,
           .vxe-pager--sizes,
           .vxe-pager--jump {
-            display: none;
+            display: none !important;
           }
         }
       }

src/views/table/vxe-table/tsx/RoleColumnSolts.tsx

@@ -4,7 +4,7 @@ const solts: VxeColumnPropTypes.Slots = {
   default: ({ row, column }) => {
     const cellValue = row[column.field]
     const type = cellValue === "admin" ? "" : "warning"
-    return [<span class={`el-tag el-tag--${type}`}>{cellValue}</span>]
+    return [<span class={`el-tag el-tag--${type} el-tag--plain`}>{cellValue}</span>]
   }
 }