xt-element-ui 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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,8 +36,8 @@
   "dependencies": {
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
-    "sass": "^1.32.13",
-    "vue-server-renderer": "^2.7.14"
+    "vue-server-renderer": "^2.7.14",
+    "xt-element-ui": "^2.0.2"
   },
   "keywords": [
     "vue",

package/src/components/index.scss

@@ -40,4 +40,7 @@
 @import './xt-tabs/style/index.scss';
 
 // Badge 组件样式
-@import './xt-badge/style/index.scss';
+@import './xt-badge/style/index.scss';
+
+// ScrollArrow 组件样式
+@import './xt-scroll-arrow/style/index.scss';

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/utils.js

@@ -114,6 +114,7 @@ EchartsUtil.EchartsUtil = {
 };
 
 EchartsUtil.chartInstanceList = [];
+EchartsUtil.resizeObserverList = [];
 
 // === 极简模式（simpleMode）预设配置 ===
 // 极简模式：隐藏图例、隐藏坐标轴/网格线、缩小内边距、简化 tooltip、去除动画装饰
@@ -417,6 +418,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 +460,12 @@ EchartsUtil.destroyAll = function() {
   });
   
   this.chartInstanceList = [];
+  
+  this.resizeObserverList.forEach(function(item) {
+    item.observer.disconnect();
+  });
+  
+  this.resizeObserverList = [];
 };
 
 export default EchartsUtil;

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,

package/src/components/xt-scroll-arrow/index.js

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