xt-element-ui 2.0.3 → 2.0.5

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: "",

package/src/index.js

@@ -38,6 +38,13 @@ import XtChart from './components/xt-chart'  // XtChart 组件（基于 ECharts
 import XtIcon from './components/xt-icon'    // XtIcon 组件（支持 el-icon / svg / 自定义字体）
 import XtTable from './components/xt-table'  // XtTable 组件（基于 ElementUI Table 封装）
 import XtScrollArrow from './components/xt-scroll-arrow'
+import XtBar from './components/xt-chart/XtBar.vue'
+import XtLine from './components/xt-chart/XtLine.vue'
+import XtPie from './components/xt-chart/XtPie.vue'
+import XtMulti from './components/xt-chart/XtMulti.vue'
+import XtPage from './components/xt-page'
+import XtSelectTree from './components/xt-select-tree'
+import XtUpload from './components/xt-upload'
 
 
 const components = [
@@ -62,7 +69,14 @@ const components = [
   XtChart,
   XtIcon,
   XtTable,
-  XtScrollArrow
+  XtScrollArrow,
+  XtBar,
+  XtLine,
+  XtPie,
+  XtMulti,
+  XtPage,
+  XtSelectTree,
+  XtUpload
 ]
 
 const install = function (Vue, options = {}) {
@@ -132,7 +146,14 @@ export default {
   XtDatePicker,
   XtIcon,
   XtTable,
-  XtScrollArrow
+  XtScrollArrow,
+  XtBar,
+  XtLine,
+  XtPie,
+  XtMulti,
+  XtPage,
+  XtSelectTree,
+  XtUpload
 }
 
 // XtChart 组件按需导出（使用时需自行安装 echarts 依赖）

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

@@ -1,93 +0,0 @@
-<template>
-  <FlexBox 
-    v-if="iconType=='border'" 
-    class="xt-card-item is-border" 
-    :class="[iconType=='border'?`is-${type}`:'']" 
-    :style="cardItemStyle" 
-    content="between"
-  >
-    <span class="item__label" v-if="title">
-      <slot name="label">{{ label }}</slot>
-    </span>
-    <span class="item__value">
-      <slot name="value">{{ value }}</slot>
-    </span>
-    <span class="item__unit">
-      <slot name="unit">{{ unit }}</slot>
-    </span>
-  </FlexBox>
-  <FlexBox 
-    v-else 
-    class="xt-card-item" 
-    :direction="direction" 
-    :content="contentAlign"
-  >
-    <slot name="icon">
-      <el-button :type="type" :circle="circle" :round="round" plain :icon="icon"></el-button>
-    </slot>
-    <div class="item__value">
-      <span class="value" :style="valueStyle">
-        <slot name="value">{{ label }}</slot>
-      </span>
-      <div class="unit">{{ value }}</div>
-    </div>
-  </FlexBox>
-</template>
-<script>
-import FlexBox from '../xt-flex-box/index.vue'
-export default {
-  name: "XtCardItem",
-  components: {
-    FlexBox
-  },
-  props: {
-    iconType: { default: "border" },
-    type: { default: "primary" },
-    label: {},
-    value: {},
-    unit: {},
-    icon: {},
-    iconAt: { default: "right" },
-    color: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      circle: false,
-      round: false
-    }
-  },
-  computed: {
-    contentAlign() {
-      return this.iconAt == 'center' ? 'center' : 'start'
-    },
-    direction() {
-      const iconAtMap = {
-        left: 'row',
-        right: 'row-reverse',
-        top: 'column',
-        bottom: 'column-reverse'
-      }
-      return iconAtMap[this.iconAt]
-    },
-    cardItemStyle() {
-      if (this.iconType === 'border' && this.type === 'primary' && this.color) {
-        return {
-          '--xt-card-item-color': this.color
-        }
-      }
-      return {}
-    },
-    valueStyle() {
-      if (this.iconType !== 'border' && this.type === 'primary' && this.color) {
-        return {
-          color: this.color
-        }
-      }
-      return {}
-    }
-  }
-}
-</script>