xt-element-ui 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.19",
+    "sass": "^1.56.0",
     "sass-loader": "^10.5.2",
     "vue": "^2.6.10",
     "vuepress": "^1.9.10",
@@ -35,7 +36,6 @@
   "dependencies": {
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
-    "sass": "^1.32.13",
     "vue-server-renderer": "^2.7.14",
     "xt-element-ui": "^2.0.2"
   },

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-chart/XtBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="barchart" class="bar-box"></div>
+  <div ref="barchart" class="bar-box" :style="chartStyle"></div>
 </template>
 <script>
 import EchartsUtil from "./utils";
@@ -28,6 +28,18 @@ export default {
       type: String,
       default: "medium"
     },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    ratio: {
+      type: Number,
+      default: null
+    },
     fieldKeys: {
       type: Object,
       default: () => ({ label: "label", value: "value", data: "data" })
@@ -75,6 +87,18 @@ export default {
       name: "数量"
     };
   },
+  computed: {
+    chartStyle() {
+      const style = {};
+      if (this.width) style.width = this.width;
+      if (this.ratio) {
+        style.aspectRatio = this.ratio;
+      } else if (this.height) {
+        style.height = this.height;
+      }
+      return style;
+    }
+  },
   watch: {
     chartData: {
       deep: true,
@@ -96,6 +120,13 @@ export default {
   },
   mounted() {
     this.initChart();
+    EchartsUtil.bindResizeObserver(this.$refs.barchart, this.myChart);
+  },
+  beforeUnmount() {
+    EchartsUtil.unbindResizeObserver(this.$refs.barchart);
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
   },
   methods: {
     initChart() {
@@ -171,12 +202,6 @@ export default {
         series: {
           name: _self.unit,
           type: "bar",
-          markPoint: {
-            data: [
-              { type: "min", name: "Min" },
-              { type: "max", name: "Max" }
-            ]
-          },
           avoidLabelOverlap: true,
           data: _self.chartData.map((item, ind) => {
             const label = item[keys.label];
@@ -192,9 +217,6 @@ export default {
         },
         dataZoom: _self.showZoom ? [{ height: 20, bottom: 0 }] : [],
       };
-      if (!this.markPoint) {
-        this.$delete(option.series[0], "markPoint");
-      }
       if (this.simpleMode) {
         EchartsUtil.applySimpleMode(option, "bar");
       }
@@ -208,5 +230,6 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
+  min-height: 100px;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="linechart" class="line-box"></div>
+  <div ref="linechart" class="line-box" :style="chartStyle"></div>
 </template>
 <script>
 import EchartsUtil from "./utils";
@@ -11,6 +11,18 @@ export default {
       type: String,
       default: "medium"
     },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    ratio: {
+      type: Number,
+      default: null
+    },
     chartData: {
       type: Array,
       default: () => {
@@ -47,6 +59,18 @@ export default {
       myChart: null
     };
   },
+  computed: {
+    chartStyle() {
+      const style = {};
+      if (this.width) style.width = this.width;
+      if (this.ratio) {
+        style.aspectRatio = this.ratio;
+      } else if (this.height) {
+        style.height = this.height;
+      }
+      return style;
+    }
+  },
   watch: {
     chartData: {
       deep: true,
@@ -68,6 +92,13 @@ export default {
   },
   mounted() {
     this.initChart();
+    EchartsUtil.bindResizeObserver(this.$refs.linechart, this.myChart);
+  },
+  beforeUnmount() {
+    EchartsUtil.unbindResizeObserver(this.$refs.linechart);
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
   },
   methods: {
     initChart() {
@@ -154,5 +185,6 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
+  min-height: 100px;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="multilinechart" class="multiline-box"></div>
+  <div ref="multilinechart" class="multiline-box" :style="chartStyle"></div>
 </template>
 <script>
 import EchartsUtil from "./utils";
@@ -11,6 +11,18 @@ export default {
       type: String,
       default: "medium"
     },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    ratio: {
+      type: Number,
+      default: null
+    },
     fieldKeys: {
       type: Object,
       default: () => ({ label: "label", value: "value", data: "data" })
@@ -102,6 +114,18 @@ export default {
       myChart: null
     };
   },
+  computed: {
+    chartStyle() {
+      const style = {};
+      if (this.width) style.width = this.width;
+      if (this.ratio) {
+        style.aspectRatio = this.ratio;
+      } else if (this.height) {
+        style.height = this.height;
+      }
+      return style;
+    }
+  },
   watch: {
     chartData: {
       deep: true,
@@ -110,16 +134,25 @@ export default {
         this.myChart && this.myChart.dispose();
         this.myChart = null;
         _self.initChart();
+        EchartsUtil.bindResizeObserver(this.$refs.multilinechart, this.myChart);
       }
     },
     theme(newVal) {
       this.myChart && this.myChart.dispose();
       this.myChart = null;
       this.initChart();
+      EchartsUtil.bindResizeObserver(this.$refs.multilinechart, this.myChart);
     }
   },
   mounted() {
     this.initChart();
+    EchartsUtil.bindResizeObserver(this.$refs.multilinechart, this.myChart);
+  },
+  beforeUnmount() {
+    EchartsUtil.unbindResizeObserver(this.$refs.multilinechart);
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
   },
   methods: {
     initChart() {
@@ -248,5 +281,6 @@ export default {
 .multiline-box{
   height: 100%;
   width: 100%;
+  min-height: 100px;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="piechart" class="pie-box"></div>
+  <div ref="piechart" class="pie-box" :style="chartStyle"></div>
 </template>
 <script>
 import EchartsUtil from "./utils";
@@ -11,6 +11,18 @@ export default {
       type: String,
       default: "medium"
     },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    ratio: {
+      type: Number,
+      default: null
+    },
     chartData: {
       type: Array,
       default: () => {
@@ -61,6 +73,16 @@ export default {
     };
   },
   computed: {
+    chartStyle() {
+      const style = {};
+      if (this.width) style.width = this.width;
+      if (this.ratio) {
+        style.aspectRatio = this.ratio;
+      } else if (this.height) {
+        style.height = this.height;
+      }
+      return style;
+    },
     totalNum() {
       const keys = Object.assign(
         { label: "label", value: "value", data: "data" },
@@ -84,8 +106,15 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.initChart();
+      EchartsUtil.bindResizeObserver(this.$refs.piechart, this.myChart);
     });
   },
+  beforeUnmount() {
+    EchartsUtil.unbindResizeObserver(this.$refs.piechart);
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
+  },
   methods: {
     initChart() {
       const _self = this;
@@ -163,5 +192,6 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
+  min-height: 100px;
 }
 </style>

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

@@ -63,7 +63,6 @@ export default {
   height: 100%;
   width: 100%;
   position: relative;
-  @include font_color("fontColor");
 }
 .left{
   flex: 1;

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

@@ -14,9 +14,6 @@ export default {
       color: "#ffffff"
     }
   },
-  axisLabel: {
-    color: "#ffffff"
-  },
   line: {
     itemStyle: {
     },
@@ -60,14 +57,34 @@ export default {
       borderColor: "#ffffff"
     }
   },
-  axisLine: {
-    lineStyle: {
-      color: "#DCDFE6"
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
+    },
+    axisLabel: {
+      color: "#ffffff"
     }
   },
-  axisTick: {
-    lineStyle: {
-      color: "#DCDFE6"
+  yAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#DCDFE6"
+      }
+    },
+    axisLabel: {
+      color: "#ffffff"
     }
   },
   splitLine: {

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

@@ -45,6 +45,9 @@ export default {
       borderColor: "#fff"
     }
   },
+  axisLabel: {
+    color: "#666666"
+  },
   gauge: {
     axisLine: {
       lineStyle: {
@@ -68,6 +71,9 @@ export default {
         color: "#DFE9EE"
       },
       show: false
+    },
+    axisLabel: {
+      color: "#666666"
     }
   },
   yAxis: {
@@ -87,6 +93,9 @@ export default {
         type: "dashed",
         color: "#DFE9EE"
       }
+    },
+    axisLabel: {
+      color: "#666666"
     }
   },
   splitArea: {

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

@@ -114,6 +114,7 @@ EchartsUtil.EchartsUtil = {
 };
 
 EchartsUtil.chartInstanceList = [];
+EchartsUtil.resizeObserverList = [];
 
 // === 极简模式（simpleMode）预设配置 ===
 // 极简模式：隐藏图例、隐藏坐标轴/网格线、缩小内边距、简化 tooltip、去除动画装饰
@@ -311,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;
 };
 
@@ -417,6 +446,30 @@ EchartsUtil.bindResize = function(chartIns) {
   chartIns._resizeLocked = true;
 };
 
+EchartsUtil.bindResizeObserver = function(dom, chartIns) {
+  if (!dom || !chartIns || typeof ResizeObserver === 'undefined') return;
+  
+  const observer = new ResizeObserver(() => {
+    chartIns.resize();
+  });
+  
+  observer.observe(dom);
+  
+  EchartsUtil.resizeObserverList.push({
+    dom,
+    observer,
+    chartIns
+  });
+};
+
+EchartsUtil.unbindResizeObserver = function(dom) {
+  const index = EchartsUtil.resizeObserverList.findIndex(item => item.dom === dom);
+  if (index !== -1) {
+    EchartsUtil.resizeObserverList[index].observer.disconnect();
+    EchartsUtil.resizeObserverList.splice(index, 1);
+  }
+};
+
 EchartsUtil.destroy = function(chartIns) {
   if (chartIns) {
     chartIns.dispose();
@@ -435,6 +488,12 @@ EchartsUtil.destroyAll = function() {
   });
   
   this.chartInstanceList = [];
+  
+  this.resizeObserverList.forEach(function(item) {
+    item.observer.disconnect();
+  });
+  
+  this.resizeObserverList = [];
 };
 
 export default EchartsUtil;

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-date-picker/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div style="display:inline-block">
-    <FlexBox v-if="dateType=='quarter'" type="inline-flex" class="xt-date-picker" :class="{focus: isfocus}" :style="width?{width: `${width}px`}:{}">
+    <XtFlexBox v-if="dateType=='quarter'" type="inline-flex" class="xt-date-picker" :class="{focus: isfocus}" :style="width?{width: `${width}`}:{}">
       <Quarter v-model="timeStart" :format="format" placeholder="开始时间" quarter-type="quarter-start" clearable></Quarter>
       <span class="separator">{{ separator }}</span>
       <Quarter v-model="timeEnd" :format="format" placeholder="结束时间" quarter-type="quarter-end" clearable></Quarter>
-    </FlexBox>
-    <FlexBox v-else type="inline-flex" class="xt-date" :class="{focus: isfocus}" :style="width?{width: `${width}px`}:{}">
+    </XtFlexBox>
+    <XtFlexBox v-else type="inline-flex" class="xt-date" :class="{focus: isfocus}" :style="width?{width: `${width}px`}:{}">
       <el-date-picker ref="timeStart" key="startSelect" v-model="timeStart" size="small" :disabled="disabled" append-to-body :picker-options="startTimeRange" :format="format" :type="dateType" placeholder="开始时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
       <span class="separator">{{ separator }}</span>
       <el-date-picker ref="timeEnd" key="endSelect" v-model="timeEnd" size="small" :disabled="disabled" append-to-body :picker-options="endTimeRange" :format="format" :type="dateType" placeholder="结束时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
-    </FlexBox>
+    </XtFlexBox>
   </div>
 </template>
 <script>
@@ -17,12 +17,12 @@ const typeFormatEnum = {
   datetime: "yyyy-MM-dd HH:mm", month: "yyyy-MM", year: "yyyy", date: "yyyy-MM-dd", quarter: "yyyy-Qq", week: "yyyy-WW"
 };
 
-import FlexBox from '../xt-flex-box/index.vue'
+import XtFlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
   name: "XtDatePicker",
   components: {
-    FlexBox,
+    XtFlexBox,
     Quarter
   },
   model: {
@@ -49,8 +49,8 @@ export default {
     },
     placeholder: {},
     width: {
-      type: Number,
-      default: 280
+      type: [String],
+      default: '100%'
     }
   },
   data() {

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

@@ -26,7 +26,7 @@ export default {
     showAside: { type: Boolean, default: true },
     diffHeight: {
       type: Number,
-      default: 60
+      default: 0
     },
     minHeight: {
       type: Number,