xt-element-ui 2.0.2 → 2.0.4

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

@@ -0,0 +1,261 @@
+<template>
+  <div class="xt-scroll-arrow" :class="[`xt-scroll-arrow--${direction}`]" :style="containerStyle">
+    <div 
+      v-if="showLeftArrow" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--left"
+      @click="scrollLeft"
+    >
+      <i class="el-icon-arrow-left"></i>
+    </div>
+
+    <div ref="scrollContainer" class="xt-scroll-arrow__content" @scroll="handleScroll" @click="handleClick">
+      <slot></slot>
+    </div>
+
+    <div 
+      v-if="showRightArrow" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--right"
+      @click="scrollRight"
+    >
+      <i class="el-icon-arrow-right"></i>
+    </div>
+
+    <div 
+      v-if="showTopArrow && direction === 'vertical'" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--top"
+      @click="scrollTop"
+    >
+      <i class="el-icon-arrow-up"></i>
+    </div>
+
+    <div 
+      v-if="showBottomArrow && direction === 'vertical'" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--bottom"
+      @click="scrollBottom"
+    >
+      <i class="el-icon-arrow-down"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtScrollArrow',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    scrollStep: {
+      type: Number,
+      default: 100
+    },
+    autoHide: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: [String, Number],
+      default: ''
+    },
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+    appendMode: {
+      type: Boolean,
+      default: false
+    },
+    clickMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showLeftArrow: false,
+      showRightArrow: false,
+      showTopArrow: false,
+      showBottomArrow: false
+    }
+  },
+  computed: {
+    containerStyle() {
+      const style = {}
+      if (this.height) {
+        style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
+      }
+      if (this.width) {
+        style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
+      }
+      return style
+    }
+  },
+  watch: {
+    direction() {
+      this.$nextTick(() => {
+        this.checkScroll()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.checkScroll()
+    })
+    this.addResizeObserver()
+    this.addMutationObserver()
+  },
+  beforeDestroy() {
+    this.removeResizeObserver()
+    this.removeMutationObserver()
+  },
+  methods: {
+    addResizeObserver() {
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.$nextTick(() => {
+            this.checkScroll()
+          })
+        })
+        const container = this.$refs.scrollContainer
+        if (container) {
+          this.resizeObserver.observe(container)
+        }
+      }
+    },
+    removeResizeObserver() {
+      if (this.resizeObserver) {
+        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
+
+      if (this.direction === 'horizontal') {
+        const scrollLeft = container.scrollLeft
+        const scrollWidth = container.scrollWidth
+        const clientWidth = container.clientWidth
+        const maxScroll = scrollWidth - clientWidth
+
+        this.showTopArrow = false
+        this.showBottomArrow = false
+
+        if (this.autoHide) {
+          this.showLeftArrow = scrollLeft > 0
+          this.showRightArrow = maxScroll > 0 && scrollLeft < maxScroll
+        } else {
+          this.showLeftArrow = maxScroll > 0
+          this.showRightArrow = maxScroll > 0
+        }
+      } else {
+        const scrollTop = container.scrollTop
+        const scrollHeight = container.scrollHeight
+        const clientHeight = container.clientHeight
+        const maxScroll = scrollHeight - clientHeight
+
+        this.showLeftArrow = false
+        this.showRightArrow = false
+
+        if (this.autoHide) {
+          this.showTopArrow = scrollTop > 0
+          this.showBottomArrow = maxScroll > 0 && scrollTop < maxScroll
+        } else {
+          this.showTopArrow = maxScroll > 0
+          this.showBottomArrow = maxScroll > 0
+        }
+      }
+    },
+    handleScroll() {
+      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) {
+        container.scrollBy({ left: -this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollRight() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ left: this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollTop() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ top: -this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollBottom() {
+      const container = this.$refs.scrollContainer
+      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' })
+      }
+    }
+  }
+}
+</script>

package/src/components/xt-scroll-arrow/style/index.scss

@@ -0,0 +1,89 @@
+@import '../../../styles/variables.scss';
+
+.xt-scroll-arrow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__btn {
+    position: absolute;
+    z-index: 10;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      background: rgba(255, 255, 255, 1);
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &--left {
+      left: 8px;
+    }
+
+    &--right {
+      right: 8px;
+    }
+
+    &--top {
+      top: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+
+      &:active {
+        transform: translateX(-50%) scale(0.95);
+      }
+    }
+
+    &--bottom {
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+
+      &:active {
+        transform: translateX(-50%) scale(0.95);
+      }
+    }
+  }
+}

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

@@ -37,6 +37,14 @@ import XtDatePicker from './components/xt-date-picker'
 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 = [
@@ -60,7 +68,15 @@ const components = [
   XtDatePicker,
   XtChart,
   XtIcon,
-  XtTable
+  XtTable,
+  XtScrollArrow,
+  XtBar,
+  XtLine,
+  XtPie,
+  XtMulti,
+  XtPage,
+  XtSelectTree,
+  XtUpload
 ]
 
 const install = function (Vue, options = {}) {
@@ -129,7 +145,15 @@ export default {
   XtBadge,
   XtDatePicker,
   XtIcon,
-  XtTable
+  XtTable,
+  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>