xt-element-ui 2.0.4 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -66,8 +66,8 @@
     "url": "https://github.com/JobWebNie/xt-element-ui.git"
   },
   "engines": {
-    "node": ">=12.0.0",
-    "npm": ">=6.0.0"
+    "node": "18.20.4",
+    "npm": ">=8.0.0"
   },
   "browserslist": [
     "> 1%",

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

@@ -1,10 +1,5 @@
 <template>
-  <span class="xt-badge" :class="[
-    `xt-badge--${type}`,
-    { 'xt-badge--dot': isDot },
-    { 'xt-badge--hidden': hidden },
-    { 'xt-badge--fixed': fixed }
-  ]">
+  <span :class="rootClasses">
     <span class="xt-badge__content">
       <slot></slot>
     </span>
@@ -13,9 +8,9 @@
       class="xt-badge__badge"
       :style="badgeStyle"
     >
-      <template v-if="isDot"></template>
-      <template v-else-if="showOverflow && value > max">{{ max }}+</template>
-      <template v-else>{{ value }}</template>
+      <span v-if="isDot"></span>
+      <span v-else-if="isOverflow">{{ overflowText }}</span>
+      <span v-else>{{ value }}</span>
     </span>
   </span>
 </template>
@@ -59,12 +54,27 @@ export default {
     }
   },
   computed: {
+    rootClasses() {
+      return [
+        'xt-badge',
+        `xt-badge--${this.type}`,
+        { 'xt-badge--dot': this.isDot },
+        { 'xt-badge--hidden': this.hidden },
+        { 'xt-badge--fixed': this.fixed }
+      ]
+    },
     badgeStyle() {
       const style = {}
       if (this.color) {
         style.backgroundColor = this.color
       }
       return style
+    },
+    overflowText() {
+      return this.max + '+'
+    },
+    isOverflow() {
+      return this.showOverflow && this.value > this.max
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <el-button 
-    class="ex-button" 
+    class="xt-button" 
     :class="buttonClasses"
     v-bind="$attrs" 
     @click="handleClick"
@@ -49,8 +49,8 @@ export default {
     },
     buttonClasses() {
       return [
-        `ex-button-${this.finalSize}`,
-        `ex-button-${this.type}`
+        `xt-button-${this.finalSize}`,
+        `xt-button-${this.type}`
       ]
     }
   },

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

@@ -1,6 +1,6 @@
 @import '../../../styles/variables.scss';
 
-.ex-button {
+.xt-button {
   padding: 8px 16px;
   border-radius: var(--xt-border-radius-base);
   font-size: var(--xt-font-size-base);
@@ -43,25 +43,25 @@
 }
 
 /* small size - 字体大小 12px */
-.ex-button-mini {
+.xt-button-mini {
   padding: 2px 4px;
   font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
 }
 
 /* small size - 字体大小 14px */
-.ex-button-small {
+.xt-button-small {
   padding: 5px 10px;
   font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
 }
 
 /* medium size - 字体大小 16px */
-.ex-button-medium {
+.xt-button-medium {
   padding: 8px 16px;
   font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
 }
 
 /* large size - 字体大小 18px */
-.ex-button-large {
+.xt-button-large {
   padding: 11px 22px;
   font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
 }

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

@@ -1,6 +1,6 @@
 <template>
   <el-card 
-    class="ex-card" 
+    class="xt-card" 
     :class="cardClasses"
     v-bind="$attrs"
   >
@@ -55,10 +55,10 @@ export default {
     },
     cardClasses() {
       return [
-        `ex-card-${this.shadow}`,
-        `ex-card-${this.finalSize}`,
+        `xt-card-${this.shadow}`,
+        `xt-card-${this.finalSize}`,
         {
-          'ex-card-no-border': !this.bordered,
+          'xt-card-no-border': !this.bordered,
           [this.bodyClass]: this.bodyClass
         }
       ]

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

@@ -2,27 +2,27 @@
 @import '../../../styles/element-theme.scss';
 @import '../../../styles/variables.scss';
 
-.ex-card {
+.xt-card {
   border-radius: 8px;
   transition: all 0.3s;
-  font-size: var(--ex-card-font-size, 14px);
+  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);
   
   .el-card__header {
-    padding: var(--ex-card-header-padding, 16px 20px);
+    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);
     font-weight: 600;
   }
   
   .el-card__body {
-    padding: var(--ex-card-body-padding, 20px);
+    padding: var(--xt-card-body-padding, 20px);
   }
 }
 
-.ex-card-small {
+.xt-card-small {
   font-size: 12px;
   
   .el-card__header {
@@ -30,7 +30,7 @@
   }
 }
 
-.ex-card-medium {
+.xt-card-medium {
   font-size: 14px;
   
   .el-card__header {
@@ -38,7 +38,7 @@
   }
 }
 
-.ex-card-large {
+.xt-card-large {
   font-size: 16px;
   
   .el-card__header {
@@ -46,11 +46,11 @@
   }
 }
 
-.ex-card-always {
+.xt-card-always {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
-.ex-card-hover {
+.xt-card-hover {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   
   &:hover {
@@ -58,12 +58,12 @@
   }
 }
 
-.ex-card-never {
+.xt-card-never {
   box-shadow: none;
   border: 1px solid var(--el-border-color, #ebeef5);
 }
 
-.ex-card-no-border {
+.xt-card-no-border {
   border: none;
   
   .el-card__header {

package/src/components/xt-chart/XtLine.vue

@@ -115,14 +115,8 @@ export default {
           right: "30",
           bottom: "20"
         },
-        xAxis: [{
+        xAxis: {
           type: "category",
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: "dashed"
-            }
-          },
           axisLabel: {
             interval: this.intervalvalue
           },
@@ -130,7 +124,7 @@ export default {
           data: _self.chartData.map((item) => {
             return item[keys.label];
           })
-        }],
+        },
         yAxis: {
           type: "value",
           axisLine: {

package/src/components/xt-chart/theme/dark.js

@@ -1,22 +1,21 @@
 
 import variables from '../../../styles/variables-export.scss'
 export default {
-  color: ["#0de7ff", "#a782ff", "#fcdd60", "#0de7ff", "#ffc5a1", "#6291ae", "#13ce66"],
+  color: ["#1060ff", "#6648fe", "#26ddff", "#1bae94", "#ff8041", "#3a5dca", "#c7dd4b"],
   backgroundColor: "#000",
   textStyle: {
     fontFamily: "Microsoft YaHei, sans-serif"
   },
   title: {
     textStyle: {
-      color: "#ffffff"
+      color: "#ffffff",
+      fontSize: 16
     },
     subtextStyle: {
-      color: "#ffffff"
+      color: "#ffffff",
+      fontSize: 12
     }
   },
-  axisLabel: {
-    color: "#ffffff"
-  },
   line: {
     itemStyle: {
     },
@@ -48,6 +47,16 @@ export default {
       borderColor: "#dcdfe6"
     }
   },
+  valueAxis: {
+    axisLabel: {
+      color: "#ffffff"
+    }
+  },
+  categoryAxis: {
+    axisLabel: {
+      color: "#ffffff"
+    }
+  },
   gauge: {
     axisLine: {
       lineStyle: {
@@ -60,14 +69,28 @@ export default {
       borderColor: "#ffffff"
     }
   },
-  axisLine: {
-    lineStyle: {
-      color: "#DCDFE6"
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
     }
   },
-  axisTick: {
-    lineStyle: {
-      color: "#DCDFE6"
+  yAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
     }
   },
   splitLine: {

package/src/components/xt-chart/theme/white.js

@@ -45,6 +45,11 @@ export default {
       borderColor: "#fff"
     }
   },
+  valueAxis: {
+    axisLabel: {
+      color: "#666666"
+    }
+  },
   gauge: {
     axisLine: {
       lineStyle: {

package/src/components/xt-chart/utils.js

@@ -312,6 +312,34 @@ EchartsUtil.applyFontSize = function(themeOption, size) {
     }
   }
   
+  // 调整坐标轴标签字体大小和颜色
+  const applyAxisLabel = function(axis) {
+    if (!axis) return;
+    if (!axis.axisLabel) {
+      axis.axisLabel = {};
+    }
+    if (result.axisLabel && result.axisLabel.color) {
+      axis.axisLabel.color = result.axisLabel.color;
+    }
+    axis.axisLabel.fontSize = fontSizeConfig.axisLabel;
+  };
+  
+  if (result.xAxis) {
+    if (Array.isArray(result.xAxis)) {
+      result.xAxis.forEach(applyAxisLabel);
+    } else {
+      applyAxisLabel(result.xAxis);
+    }
+  }
+  
+  if (result.yAxis) {
+    if (Array.isArray(result.yAxis)) {
+      result.yAxis.forEach(applyAxisLabel);
+    } else {
+      applyAxisLabel(result.yAxis);
+    }
+  }
+  
   return result;
 };
 

package/src/components/xt-config-provider/index.vue

@@ -1,5 +1,9 @@
 <script>
 import EchartsUtil from '../xt-chart/utils.js'
+
+// SSR 兼容：Node.js 环境中 HTMLElement 不存在
+const HTMLElementType = typeof HTMLElement !== 'undefined' ? HTMLElement : Object
+
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
@@ -107,7 +111,7 @@ export default {
       default: false
     },
     proxyElement: {
-      type: [HTMLElement, String, Object],
+      type: [HTMLElementType, String, Object],
       default: null,
       description: '代理元素，将样式应用到该元素上。支持 HTMLElement、CSS选择器字符串或 ref 对象'
     },

package/src/components/xt-list/index.js

@@ -0,0 +1,8 @@
+import XtList from './index.vue'
+
+XtList.install = function (Vue) {
+  Vue.component(XtList.name, XtList)
+}
+
+export default XtList
+export { XtList }