xt-element-ui 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.3",
+  "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,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-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.vue

@@ -8,7 +8,7 @@
       <i class="el-icon-arrow-left"></i>
     </div>
 
-    <div ref="scrollContainer" class="xt-scroll-arrow__content" @scroll="handleScroll">
+    <div ref="scrollContainer" class="xt-scroll-arrow__content" @scroll="handleScroll" @click="handleClick">
       <slot></slot>
     </div>
 
@@ -62,6 +62,14 @@ export default {
     width: {
       type: [String, Number],
       default: ''
+    },
+    appendMode: {
+      type: Boolean,
+      default: false
+    },
+    clickMode: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -96,9 +104,11 @@ export default {
       this.checkScroll()
     })
     this.addResizeObserver()
+    this.addMutationObserver()
   },
   beforeDestroy() {
     this.removeResizeObserver()
+    this.removeMutationObserver()
   },
   methods: {
     addResizeObserver() {
@@ -119,6 +129,30 @@ export default {
         this.resizeObserver.disconnect()
       }
     },
+    addMutationObserver() {
+      if (typeof MutationObserver !== 'undefined') {
+        this.mutationObserver = new MutationObserver(() => {
+          this.$nextTick(() => {
+            this.checkScroll()
+            if (this.appendMode) {
+              this.scrollToEnd()
+            }
+          })
+        })
+        const container = this.$refs.scrollContainer
+        if (container) {
+          this.mutationObserver.observe(container, {
+            childList: true,
+            subtree: true
+          })
+        }
+      }
+    },
+    removeMutationObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect()
+      }
+    },
     checkScroll() {
       const container = this.$refs.scrollContainer
       if (!container) return
@@ -161,6 +195,34 @@ export default {
       this.checkScroll()
       this.$emit('scroll', this.$refs.scrollContainer)
     },
+    handleClick(e) {
+      if (!this.clickMode) return
+      const container = this.$refs.scrollContainer
+      if (!container) return
+      
+      const target = e.target
+      if (!target || target === container) return
+      
+      const containerRect = container.getBoundingClientRect()
+      const targetRect = target.getBoundingClientRect()
+      
+      const isVisible = (
+        targetRect.left >= containerRect.left &&
+        targetRect.right <= containerRect.right &&
+        targetRect.top >= containerRect.top &&
+        targetRect.bottom <= containerRect.bottom
+      )
+      
+      if (!isVisible) {
+        if (this.direction === 'horizontal') {
+          const scrollLeft = target.offsetLeft - (container.clientWidth - targetRect.width) / 2
+          container.scrollTo({ left: scrollLeft, behavior: 'smooth' })
+        } else {
+          const scrollTop = target.offsetTop - (container.clientHeight - targetRect.height) / 2
+          container.scrollTo({ top: scrollTop, behavior: 'smooth' })
+        }
+      }
+    },
     scrollLeft() {
       const container = this.$refs.scrollContainer
       if (container) {
@@ -184,6 +246,15 @@ export default {
       if (container) {
         container.scrollBy({ top: this.scrollStep, behavior: 'smooth' })
       }
+    },
+    scrollToEnd() {
+      const container = this.$refs.scrollContainer
+      if (!container) return
+      if (this.direction === 'horizontal') {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' })
+      } else {
+        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
+      }
     }
   }
 }

package/src/components/xt-select-tree/index.vue

@@ -331,9 +331,6 @@ export default {
   }
   .el-input{
     &:hover:not(.is-disabled) {
-      .el-input__inner{
-        @include border_color("borderColor");
-      }
       &.is-selected.isclearable{
         .el-input__icon{
           &.close{
@@ -349,9 +346,6 @@ export default {
       .el-input__icon-arrow-down{
         transition: rotate(-180deg);
       }
-      .el-input__inner{
-        @include border_color("$subMenuActiveText");
-      }
     }
   }
 }
@@ -380,7 +374,6 @@ export default {
 }
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
   color: #409EFF;
-  @include font_color("primaryColor");
   font-weight: bold;
 }
 </style>

package/src/components/xt-step-price/index.vue

@@ -33,6 +33,7 @@
         :right-bracket="rightBracket"
         :field-keys="fieldKeys"
         :disabled="disabled"
+        :allow-negative="allowNegative"
         @input="(val) => onItemInput(val, idx)"
         @max-change="onMaxChange"
         @min-change="onMinChange"
@@ -100,6 +101,7 @@ export default {
     // 阶梯增量：新增/校正时，下一条阶梯的 min = 当前 max = 当前 min + step（默认 1）
     step: { type: Number, default: 10 },
     disabled: { type: Boolean, default: false },
+    allowNegative: { type: Boolean, default: false },
     tip: {
       type: String,
       default: '区间左闭右闭 [min, max]，最后一级为 [min, +∞)，保证连续且不重叠。'
@@ -217,7 +219,7 @@ export default {
             message: `第${i + 1}${this.stepName}价格不能为空`,
             type: 'error'
           })
-        } else if (price < 0) {
+        } else if (price < 0 && !this.allowNegative) {
           errors.push({
             field: `stepPrice[${i}].price`,
             message: `第${i + 1}${this.stepName}价格不能为负数`,
@@ -231,7 +233,7 @@ export default {
             message: `第${i + 1}${this.stepName}下限不能为空`,
             type: 'error'
           })
-        } else if (min < 0) {
+        } else if (min < 0 && !this.allowNegative) {
           errors.push({
             field: `stepPrice[${i}].min`,
             message: `第${i + 1}${this.stepName}下限不能为负数`,

package/src/components/xt-step-price-item/index.vue

@@ -67,6 +67,7 @@ export default {
     itemsLength: { type: Number, default: 1 },
     removable: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
+    allowNegative: { type: Boolean, default: false },
     minLocked: { type: Boolean, default: false },
     unit: { type: String, default: '元' },
     precision: { type: Number, default: 2 },
@@ -187,7 +188,7 @@ export default {
         return
       }
       let v = this.safeNumber(rawVal, 0)
-      if (v < 0) v = 0
+      if (v < 0 && !this.allowNegative) v = 0
       v = Number(v.toFixed(this.precision))
       this.priceInput = v
       this.emitChange({ [this.keyPrice]: v })

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

@@ -37,8 +37,8 @@
 </template>
 <script>
 import ImageViewer from "./preview.vue";
-import { getToken } from "@/utils/auth";
 export default {
+  name: "XtUpload",
   components: {
     ImageViewer
   },
@@ -58,6 +58,10 @@ export default {
       default: "",
       required: true
     },
+    accessToken: {
+      type: String,
+      default: ""
+    },
     autoUpload: {
       type: Boolean,
       default: true
@@ -111,14 +115,7 @@ export default {
   },
   data() {
     return {
-      accessToken: getToken(),
       YSSQP: this.baseUrl,
-      // upload: {
-      //   data: { accessToken: getToken() },
-      //   limit: 5,
-      //   accept: ".jpg,.png,.pdf",
-      //   multiple: false
-      // },
       previewVisible: false,
       uploading: false,
       imageUrl: "",