chore: 升级 vxe-table 并适配主题切换 (#177)

Co-authored-by: pany <[email protected]>

package.json

@@ -40,9 +40,9 @@
     "screenfull": "6.0.2",
     "vue": "3.4.21",
     "vue-router": "4.3.0",
-    "vxe-table": "4.4.1",
-    "vxe-table-plugin-element": "3.0.7",
-    "xe-utils": "3.5.11"
+    "vxe-table": "4.5.21",
+    "vxe-table-plugin-element": "4.0.1",
+    "xe-utils": "3.5.22"
   },
   "devDependencies": {
     "@types/js-cookie": "3.0.6",

src/plugins/vxe-table/index.ts

@@ -7,7 +7,7 @@ import VXETablePluginElement from "vxe-table-plugin-element"
 VXETable.use(VXETablePluginElement)
 
 /** 全局默认参数 */
-VXETable.setup({
+VXETable.config({
   /** 全局尺寸 */
   size: "medium",
   /** 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡 */

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

@@ -1,58 +1,55 @@
 /**
- * Vxe Table SCSS 变量
- * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss
+ * Vxe Table CSS 变量
+ * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
  */
 
-/** font */
-$vxe-font-color: $font-color;
-
-/** 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-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%);
-
-/** 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: $vxe-input-background-color;
-
-/** 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";
+* {
+  /*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-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%)};
+
+  /*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%)};
+}