xt-element-ui 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -20,7 +20,6 @@
     "@vue/cli-service": "~4.5.19",
     "sass": "^1.56.0",
     "sass-loader": "^10.5.2",
-    "vue": "^2.6.10",
     "vuepress": "^1.9.10",
     "vuepress-plugin-demo-container": "^0.2.0",
     "vuepress-theme-reco": "^1.6.17"
@@ -36,8 +35,8 @@
   "dependencies": {
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
-    "vue-server-renderer": "^2.7.14",
-    "xt-element-ui": "^2.0.2"
+    "vue": "^2.6.10",
+    "vue-server-renderer": "^2.7.14"
   },
   "keywords": [
     "vue",
@@ -66,8 +65,8 @@
     "url": "https://github.com/JobWebNie/xt-element-ui.git"
   },
   "engines": {
-    "node": "18.20.4",
-    "npm": ">=8.0.0"
+    "node": ">=12.0.0",
+    "npm": ">=6.0.0"
   },
   "browserslist": [
     "> 1%",

package/src/components/xt-button/style/index.scss

@@ -2,39 +2,39 @@
 
 .xt-button {
   padding: 8px 16px;
-  border-radius: var(--xt-border-radius-base);
-  font-size: var(--xt-font-size-base);
+  border-radius: var(--xt-border-radius-small);
+  font-size: var(--xt-font-size-small);
   border: 1px solid var(--xt-border-color, #dcdfe6);
   transition: all 0.3s;
   &-default{
-    background-color: var(--el-bg-color-page, #ffffff);
+    background-color: var(--xt-bg-color-page, #ffffff);
     border: 1px solid var(--xt-border-color, #303133);
-    color: var(--el-text-color-primary, #303133);
+    color: var(--xt-text-color-primary, #303133);
   }
   &-primary{
-    background-color: var(--el-color-primary, #ffffff);
-    border-color: var(--el-color-primary, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
+    background-color: var(--xt-color-primary, #ffffff);
+    border-color: var(--xt-color-primary, #ffffff);
+    color: var(--xt-color-white, #ffffff);
   }
   &-success{
-    background-color: var(--el-color-success, #ffffff);
-    border-color: var(--el-color-success, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
+    background-color: var(--xt-color-primary, #ffffff);
+    border-color: var(--xt-color-primary, #ffffff);
+    color: var(--xt-color-white, #ffffff);
   }
   &-warning{
-    background-color: var(--el-color-warning, #ffffff);
-    border-color: var(--el-color-warning, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
+    background-color: var(--xt-color-warning, #ffffff);
+    border-color: var(--xt-color-warning, #ffffff);
+    color: var(--xt-color-white, #ffffff);
   }
   &-danger{
-    background-color: var(--el-color-danger, #ffffff);
-    border-color: var(--el-color-danger, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
+    background-color: var(--xt-color-danger, #ffffff);
+    border-color: var(--xt-color-danger, #ffffff);
+    color: var(--xt-color-white, #ffffff);
   }
   &-info{
-    background-color: var(--el-color-info, #ffffff);
-    border-color: var(--el-color-info, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
+    background-color: var(--xt-color-info, #ffffff);
+    border-color: var(--xt-color-info, #ffffff);
+    color: var(--xt-color-white, #ffffff);
   }
 
   &:hover {
@@ -42,26 +42,27 @@
   }
 }
 
-/* small size - 字体大小 12px */
+
+/* mini size - 字体大小 12px */
 .xt-button-mini {
   padding: 2px 4px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
+  font-size: var(--xt-font-size-mini);
 }
 
 /* small size - 字体大小 14px */
 .xt-button-small {
   padding: 5px 10px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
+  font-size:var(--xt-font-size-small);
 }
 
 /* medium size - 字体大小 16px */
 .xt-button-medium {
   padding: 8px 16px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
+  font-size: var(--xt-font-size-medium);
 }
 
 /* large size - 字体大小 18px */
 .xt-button-large {
   padding: 11px 22px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
+  font-size: var(--xt-font-size-large);
 }

package/src/components/xt-card/style/index.scss

@@ -1,19 +1,18 @@
 // XtCard 组件样式
-@import '../../../styles/element-theme.scss';
 @import '../../../styles/variables.scss';
 
 .xt-card {
   border-radius: 8px;
   transition: all 0.3s;
   font-size: var(--xt-card-font-size, 14px);
-  background-color: var(--el-bg-color-block, #ffffff);
-  color: var(--el-text-color-primary, #303133);
-  border-color: var(--el-border-color, #303133);
+  background-color: var(--xt-bg-color, #ffffff);
+  color: var(--xt-text-color-primary, #303133);
+  border-color: var(--xt-border-color, #ebeef5);
   
   .el-card__header {
     padding: var(--xt-card-header-padding, 16px 20px);
-    border-bottom: 1px solid var(--el-border-color, #ebeef5);
-    background-color: var(--el-bg-color-block-head, #ffffff);
+    border-bottom: 1px solid var(--xt-border-color, #ebeef5);
+    background-color: var(--xt-bg-color, #ffffff);
     font-weight: 600;
   }
   
@@ -60,7 +59,7 @@
 
 .xt-card-never {
   box-shadow: none;
-  border: 1px solid var(--el-border-color, #ebeef5);
+  border: 1px solid var(--xt-border-color, #ebeef5);
 }
 
 .xt-card-no-border {

package/src/components/xt-input/style/index.scss

@@ -12,7 +12,7 @@
   --xt-input-disabled-text-color: var(--xt-text-color-placeholder, #c0c4cc);
   --xt-input-disabled-border-color: var(--xt-border-color-light, #e4e7ed);
   --xt-input-focus-color: var(--xt-color-primary, #1890ff);
-  --xt-input-border-radius: var(--xt-border-radius-base, 4px);
+  --xt-input-border-radius: var(--xt-border-radius-small, 4px);
   --xt-input-font-size: var(--xt-font-size-base, 14px);
   --xt-input-height: 32px;
   --xt-input-padding-x: 15px;

package/src/components/xt-step-price/style/index.scss

@@ -4,7 +4,7 @@
   padding: 12px 16px;
   background-color: var(--xt-fill-color-blank, #ffffff);
   border: 1px solid var(--xt-border-color-lighter, #ebeef5);
-  border-radius: var(--xt-border-radius-base, 4px);
+  border-radius: var(--xt-border-radius-small, 4px);
 
   &__header {
     display: flex;
@@ -46,7 +46,7 @@
   padding: 8px 12px;
   gap: 8px;
   background-color: var(--xt-fill-color-light, #f5f7fa);
-  border-radius: var(--xt-border-radius-base, 4px);
+  border-radius: var(--xt-border-radius-small, 4px);
   transition: background-color var(--xt-transition-duration-fast, 0.2s) ease;
 
   &:hover {

package/src/components/xt-text/index.vue

@@ -64,8 +64,8 @@ export default {
     },
     size: {
       type: String,
-      default: 'base',
-      validator: (val) => ['extra-large', 'large', 'medium', 'base', 'small', 'extra-small'].includes(val)
+      default: 'small',
+      validator: (val) => ['extra-large', 'large', 'medium', 'small', 'mini', 'extra-small'].includes(val)
     },
     bold: {
       type: Boolean,

package/src/components/xt-text/style/index.scss

@@ -7,27 +7,27 @@
 
 // 字体大小 - 使用增量方式
 .xt-text--extra-large {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-large);
+  font-size: var(--xt-font-size-extra-large);
 }
 
 .xt-text--large {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
+  font-size: var(--xt-font-size-large);
 }
 
 .xt-text--medium {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
+  font-size: var(--xt-font-size-medium);
 }
 
-.xt-text--base {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
+.xt-text--small {
+  font-size: var(--xt-font-size-small);
 }
 
-.xt-text--small {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-small);
+.xt-text--mini {
+  font-size: calc(var(--xt-font-size-mini));
 }
 
 .xt-text--extra-small {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
+  font-size: calc(var(--xt-font-size-extra-small));
 }
 
 // 不同类型文字颜色

package/src/components/xt-time/style/index.scss

@@ -9,8 +9,8 @@
 .xt-time--extra-large { font-size: var(--xt-font-size-extra-large, 20px); }
 .xt-time--large       { font-size: var(--xt-font-size-large, 18px); }
 .xt-time--medium      { font-size: var(--xt-font-size-medium, 16px); }
-.xt-time--base        { font-size: var(--xt-font-size-base, 14px); }
-.xt-time--small       { font-size: var(--xt-font-size-small, 13px); }
+.xt-time--base        { font-size: var(--xt-font-size-small, 14px); }
+.xt-time--small       { font-size: var(--xt-font-size-mini, 13px); }
 .xt-time--extra-small { font-size: var(--xt-font-size-extra-small, 12px); }
 
 /* 加粗 */

package/src/styles/css-variables.scss

@@ -1,23 +1,15 @@
 @import './theme/index.scss';
 
 :root {
-  // ============================
-  // 基础变量（参考 Element Plus）
-  // ============================
-  color-scheme: light;
-  
-  // 基础颜色
   --xt-color-white: #ffffff;
   --xt-color-black: #000000;
-  
-  // RGB 值
+
   --xt-color-primary-rgb: 24, 144, 255;
   --xt-color-success-rgb: 103, 194, 58;
   --xt-color-warning-rgb: 230, 162, 60;
   --xt-color-danger-rgb: 245, 108, 108;
   --xt-color-info-rgb: 144, 147, 153;
-  
-  // 主色调系列 (#1890ff)
+
   --xt-color-primary: #1890ff;
   --xt-color-success: #67c23a;
   --xt-color-warning: #e6a23c;
@@ -25,7 +17,6 @@
   --xt-color-error: #f56c6c;
   --xt-color-info: #909399;
 
-  // Primary 渐变色系 (#1890ff)
   --xt-color-primary-light-3: rgb(93, 177, 255);
   --xt-color-primary-light-5: rgb(140, 200, 255);
   --xt-color-primary-light-7: rgb(186, 222, 255);
@@ -33,7 +24,6 @@
   --xt-color-primary-light-9: rgb(232, 244, 255);
   --xt-color-primary-dark-2: rgb(19, 115, 204);
 
-  // Success 渐变色系
   --xt-color-success-light-3: rgb(149, 212, 117);
   --xt-color-success-light-5: rgb(179, 225, 157);
   --xt-color-success-light-7: rgb(209, 237, 196);
@@ -41,7 +31,6 @@
   --xt-color-success-light-9: rgb(240, 249, 235);
   --xt-color-success-dark-2: rgb(82, 155, 46);
 
-  // Warning 渐变色系
   --xt-color-warning-light-3: rgb(238, 190, 119);
   --xt-color-warning-light-5: rgb(243, 209, 158);
   --xt-color-warning-light-7: rgb(248, 227, 197);
@@ -49,7 +38,6 @@
   --xt-color-warning-light-9: rgb(253, 246, 236);
   --xt-color-warning-dark-2: rgb(184, 130, 48);
 
-  // Danger 渐变色系
   --xt-color-danger-light-3: rgb(248, 152, 152);
   --xt-color-danger-light-5: rgb(250, 182, 182);
   --xt-color-danger-light-7: rgb(252, 211, 211);
@@ -57,7 +45,6 @@
   --xt-color-danger-light-9: rgb(254, 240, 240);
   --xt-color-danger-dark-2: rgb(196, 86, 86);
 
-  // Error 渐变色系
   --xt-color-error-light-3: rgb(248, 152, 152);
   --xt-color-error-light-5: rgb(250, 182, 182);
   --xt-color-error-light-7: rgb(252, 211, 211);
@@ -65,7 +52,6 @@
   --xt-color-error-light-9: rgb(254, 240, 240);
   --xt-color-error-dark-2: rgb(196, 86, 86);
 
-  // Info 渐变色系
   --xt-color-info-light-3: rgb(177, 179, 184);
   --xt-color-info-light-5: rgb(200, 201, 204);
   --xt-color-info-light-7: rgb(222, 223, 224);
@@ -73,19 +59,18 @@
   --xt-color-info-light-9: rgb(244, 244, 245);
   --xt-color-info-dark-2: rgb(115, 118, 122);
 
-  // 背景颜色
   --xt-bg-color: #ffffff;
   --xt-bg-color-page: #f2f3f5;
   --xt-bg-color-overlay: #ffffff;
+  --xt-bg-color-block: #ffffff;
+  --xt-bg-color-block-head: #ffffff;
 
-  // 文字颜色
   --xt-text-color-primary: #303133;
   --xt-text-color-regular: #606266;
   --xt-text-color-secondary: #909399;
   --xt-text-color-placeholder: #a8abb2;
   --xt-text-color-disabled: #c0c4cc;
 
-  // 边框颜色
   --xt-border-color: #dcdfe6;
   --xt-border-color-light: #e4e7ed;
   --xt-border-color-lighter: #ebeef5;
@@ -93,7 +78,6 @@
   --xt-border-color-dark: #d4d7de;
   --xt-border-color-darker: #cdd0d6;
 
-  // 填充颜色
   --xt-fill-color: #f0f2f5;
   --xt-fill-color-light: #f5f7fa;
   --xt-fill-color-lighter: #fafafa;
@@ -102,58 +86,50 @@
   --xt-fill-color-darker: #e6e8eb;
   --xt-fill-color-blank: #ffffff;
 
-  // 阴影
   --xt-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
   --xt-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
   --xt-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
   --xt-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
 
-  // 禁用状态颜色
   --xt-disabled-bg-color: var(--xt-fill-color-light);
   --xt-disabled-text-color: var(--xt-text-color-placeholder);
   --xt-disabled-border-color: var(--xt-border-color-light);
 
-  // 遮罩颜色
   --xt-overlay-color: rgba(0, 0, 0, .8);
   --xt-overlay-color-light: rgba(0, 0, 0, .7);
   --xt-overlay-color-lighter: rgba(0, 0, 0, .5);
   --xt-mask-color: rgba(255, 255, 255, .9);
   --xt-mask-color-extra-light: rgba(255, 255, 255, .3);
 
-  // 边框
   --xt-border-width: 1px;
   --xt-border-style: solid;
   --xt-border-color-hover: var(--xt-text-color-disabled);
   --xt-border: var(--xt-border-width) var(--xt-border-style) var(--xt-border-color);
 
-  // SVG 灰度
   --xt-svg-monochrome-grey: var(--xt-border-color);
 
-  // 字体大小
-  --xt-font-size-extra-large: 20px;
-  --xt-font-size-large: 18px;
-  --xt-font-size-medium: 16px;
-  --xt-font-size-base: 14px;
-  --xt-font-size-small: 13px;
-  --xt-font-size-extra-small: 12px;
+  --xt-font-size-increment: 0px;
+
+  --xt-font-size-extra-large: calc(24px + var(--xt-font-size-increment));
+  --xt-font-size-large: calc(18px + var(--xt-font-size-increment));
+  --xt-font-size-medium: calc(16px + var(--xt-font-size-increment));
+  --xt-font-size-small: calc(14px + var(--xt-font-size-increment));
+  --xt-font-size-mini: calc(12px + var(--xt-font-size-increment));
+  --xt-font-size-extra-small: calc(10px + var(--xt-font-size-increment));
 
-  // 字体
   --xt-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   --xt-font-weight-primary: 500;
   --xt-font-line-height-primary: 24px;
 
-  // 层级
   --xt-index-normal: 1;
   --xt-index-top: 1000;
   --xt-index-popper: 2000;
 
-  // 圆角
-  --xt-border-radius-base: 4px;
-  --xt-border-radius-small: 2px;
+  --xt-border-radius-small: 4px;
+  --xt-border-radius-mini: 2px;
   --xt-border-radius-round: 20px;
   --xt-border-radius-circle: 100%;
 
-  // 过渡动画
   --xt-transition-duration: .3s;
   --xt-transition-duration-fast: .2s;
   --xt-transition-function-ease-in-out-bezier: cubic-bezier(.645, .045, .355, 1);
@@ -166,12 +142,10 @@
   --xt-transition-box-shadow: box-shadow var(--xt-transition-duration-fast) var(--xt-transition-function-ease-in-out-bezier);
   --xt-transition-color: color var(--xt-transition-duration-fast) var(--xt-transition-function-ease-in-out-bezier);
 
-  // 组件尺寸
   --xt-component-size-large: 40px;
   --xt-component-size: 32px;
   --xt-component-size-small: 24px;
 
-  // 间距
   --xt-spacing-xs: 8px;
   --xt-spacing-sm: 12px;
   --xt-spacing-md: 16px;
@@ -179,9 +153,6 @@
   --xt-spacing-xl: 32px;
 }
 
-// ============================
-// 暗色主题（参考 Element Plus）
-// ============================
 :root[data-theme="dark"],
 [data-theme="dark"], html.dark {
     color-scheme: dark;
@@ -234,6 +205,8 @@
     --xt-bg-color-page: #0a0a0a;
     --xt-bg-color: #141414;
     --xt-bg-color-overlay: #1d1e1f;
+    --xt-bg-color-block: #141414;
+    --xt-bg-color-block-head: #1d1e1f;
     --xt-text-color-primary: #E5EAF3;
     --xt-text-color-regular: #CFD3DC;
     --xt-text-color-secondary: #A3A6AD;
@@ -255,3 +228,15 @@
     --xt-mask-color: rgba(0, 0, 0, .8);
     --xt-mask-color-extra-light: rgba(0, 0, 0, .3)
 }
+
+[data-size="large"] {
+  --xt-font-size-increment: 4px;
+}
+
+[data-size="medium"] {
+  --xt-font-size-increment: 2px;
+}
+
+[data-size="small"] {
+  --xt-font-size-increment: 0px;
+}

package/src/styles/theme/font.scss

@@ -1,13 +1,13 @@
-$xt-font-size-extra-large: 20px;             // 特大字体基础值
+$xt-font-size-extra-large: 22px;             // 特大字体基础值
 $xt-font-size-large: 18px;                   // 大字体基础值
 $xt-font-size-medium: 16px;                  // 中等字体基础值
-$xt-font-size-base: 14px;                    // 基准字体 - Element UI 默认
-$xt-font-size-small: 13px;                   // 小字体基础值
+$xt-font-size-small: 14px;                    // 基准字体 - Element UI 默认
+$xt-font-size-mini: 13px;                   // 小字体基础值
 $xt-font-size-extra-small: 12px;             // 特小字体基础值
 
 $xt-font-size-increment-extra-small: -2px;   // 特小尺寸增量
-$xt-font-size-increment-small: -1px;          // 小尺寸增量
-$xt-font-size-increment-base: 0px;            // 基准尺寸增量
+$xt-font-size-increment-mini: -1px;          // 小尺寸增量
+$xt-font-size-increment-small: 0px;            // 基准尺寸增量
 $xt-font-size-increment-medium: 2px;          // 中尺寸增量
 $xt-font-size-increment-large: 4px;           // 大尺寸增量
-$xt-font-size-increment-extra-large: 6px;     // 特大尺寸增量
+$xt-font-size-increment-extra-large: 8px;     // 特大尺寸增量

package/src/styles/variables-export.scss

@@ -50,8 +50,8 @@
   xtFontSizeExtraLarge: #{$xt-font-size-extra-large};   // 特大字体
   xtFontSizeLarge: #{$xt-font-size-large};              // 大字体
   xtFontSizeMedium: #{$xt-font-size-medium};            // 中等字体
-  xtFontSizeBase: #{$xt-font-size-base};                // 基准字体
-  xtFontSizeSmall: #{$xt-font-size-small};              // 小字体
+  xtFontSizeBase: #{$xt-font-size-small};                // 基准字体
+  xtFontSizeSmall: #{$xt-font-size-mini};              // 小字体
   xtFontSizeExtraSmall: #{$xt-font-size-extra-small};   // 特小字体
 
   // ===========================

package/src/styles/element-theme.scss

@@ -1,118 +0,0 @@
-@import './variables.scss';
-
-/* Element UI 风格主题 */
-:root {
-  /* 主色调 */
-  --el-color-primary: #409eff;
-  --el-color-primary-light-3: #79bbff;
-  --el-color-primary-light-5: #a0cfff;
-  --el-color-primary-light-7: #c6e2ff;
-  --el-color-primary-light-8: #d9ecff;
-  --el-color-primary-light-9: #ecf5ff;
-  
-  --el-color-success: #67c23a;
-  --el-color-warning: #e6a23c;
-  --el-color-danger: #f56c6c;
-  --el-color-info: #909399;
-  
-  /* 文字颜色 */
-  --el-text-color-primary: #303133;
-  --el-text-color-regular: #606266;
-  --el-text-color-secondary: #909399;
-  --el-text-color-placeholder: #c0c4cc;
-  --el-text-color-disabled: #c0c4cc;
-  --el-text-color-white: #ffffff;
-  
-  /* 背景色 */
-  --el-bg-color: #ffffff;
-  --el-bg-color-page: #f5f7fa;
-  --el-bg-color-block: #ffffff;
-  --el-bg-color-block-head: #ffffff;
-  --el-bg-color-overlay: #ffffff;
-  
-  /* 边框颜色 */
-  --el-border-color: #dcdfe6;
-  --el-border-color-light: #e4e7ed;
-  --el-border-color-lighter: #ebeef5;
-  --el-border-color-extra-light: #f2f6fc;
-  
-  /* 字体大小 */
-  --el-font-size-extra-large: 20px;
-  --el-font-size-large: 18px;
-  --el-font-size-medium: 16px;
-  --el-font-size-base: 14px;
-  --el-font-size-small: 13px;
-  --el-font-size-extra-small: 12px;
-  
-  /* 间距 */
-  --el-spacing-xs: 4px;
-  --el-spacing-sm: 8px;
-  --el-spacing-md: 12px;
-  --el-spacing-lg: 16px;
-  --el-spacing-xl: 20px;
-  
-  /* 圆角 */
-  --el-border-radius-base: 4px;
-  --el-border-radius-small: 2px;
-  --el-border-radius-round: 20px;
-  --el-border-radius-circle: 50%;
-  
-  /* 阴影 */
-  --el-box-shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  --el-box-shadow-dark: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
-  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
-  
-  /* 动画 */
-  --el-transition-duration: 0.3s;
-  --el-transition-duration-fast: 0.2s;
-}
-
-
-/* 深色主题 */
-:root[data-theme="dark"],
-[data-theme="dark"], html.dark {
-  --el-color-primary: #409eff;
-  --el-text-color-primary: #ffffff;
-  --el-color-primary-light-9: #1d1e1f;
-  
-  --el-text-color-primary: #e5eaf3;
-  --el-text-color-regular: #cbd0d9;
-  --el-text-color-secondary: #a3a6ad;
-  --el-text-color-placeholder: #8d9095;
-  
-  --el-bg-color: #1d1e1f;
-  --el-bg-color-page: #0b141d;
-  --el-bg-color-block: #15222e;
-  --el-bg-color-block-head: #2b4155;
-  --el-bg-color-overlay: #1d1e1f;
-  
-  --el-border-color: #2b4155;
-  --el-border-color-light: #515253;
-  --el-border-color-lighter: #565758;
-  --el-border-color-extra-light: #5c5c5d;
-}
-
-
-/* 大字体主题 */
-[data-size="large"] {
-  --el-font-size-base: 16px;
-  --el-font-size-medium: 18px;
-  --el-font-size-large: 20px;
-  
-  --el-spacing-xs: 5px;
-  --el-spacing-sm: 10px;
-  --el-spacing-md: 15px;
-  --el-spacing-lg: 20px;
-}
-
-/* 小字体主题 */
-[data-size="small"] {
-  --el-font-size-base: 12px;
-  --el-font-size-small: 11px;
-  --el-font-size-extra-small: 10px;
-  
-  --el-spacing-xs: 3px;
-  --el-spacing-sm: 6px;
-  --el-spacing-md: 9px;
-  --el-spacing-lg: 12px;
-}