xt-element-ui 1.2.6 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -59,10 +59,10 @@
   "bugs": {
     "url": "https://github.com/JobWebNie/xt-element-ui/issues"
   },
-  "homepage": "https://JobWebNie.github.io/xt-element-ui/",
-  "repository": {
+  "homepage": "https://jobwebnie.github.io/xt-element-ui/",
+   "repository": {
     "type": "git",
-    "url": "git+https://github.com/JobWebNie/xt-element-ui.git"
+    "url": "https://github.com/JobWebNie/xt-element-ui.git"
   },
   "engines": {
     "node": ">=12.0.0",

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

@@ -42,7 +42,7 @@ export default {
       color: "#ffffff"
     },
     itemStyle: {
-      borderColor: variables.xtColorBorder
+      borderColor: "#dcdfe6"
     }
   },
   gauge: {
@@ -83,11 +83,12 @@ export default {
     }
   },
   tooltip: {
-    backgroundColor: variables.xtColorBgOverlay,
-    borderColor: variables.xtColorBorder,
+    backgroundColor: "#333333",
     borderWidth: 1,
+    borderColor: "#dcdfe6",
     textStyle: {
       color: "#fff"
     }
-  }
+  },
+  trigger: "axis"
 };

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

@@ -102,6 +102,7 @@ export default {
   tooltip: {
     borderWidth: 1,
     backgroundColor: "#ffffff",
+    borderColor: "#dcdfe6",
     textStyle: {
       color: "#333333"
     },

package/src/components/ex-date-picker/index.js

@@ -0,0 +1,2 @@
+import ExDatePicker from './index.vue'
+export default ExDatePicker

package/src/components/{xt-date-picker → ex-date-picker}/index.vue

@@ -20,7 +20,7 @@ const typeFormatEnum = {
 import FlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
-  name: "XtDatePicker",
+  name: "ExDatePicker",
   components: {
     FlexBox,
     Quarter

package/src/components/index.scss

@@ -21,6 +21,12 @@
 // Text 组件样式
 @import './xt-text/style/index.scss';
 
+// StepPrice 组件样式
+@import './xt-step-price/style/index.scss';
+
+// Time 组件样式
+@import './xt-time/style/index.scss';
+
 // ExButton 组件样式
 @import './ex-button/style/index.scss';
 

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

@@ -10,7 +10,9 @@
             </div>
           </div>
           <div style="flex: 1; height: 100%;">
-            <xt-text size="extra-large" :type="type"><i class="el-icon-user"></i></xt-text>
+            <slot name="icon">
+              <xt-text size="extra-large" :type="type"><i class="el-icon-user"></i></xt-text>
+            </slot>
           </div>
         </xt-flex-box>
       </ex-card>

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

@@ -0,0 +1,2 @@
+import XtStepPrice from './index.vue'
+export default XtStepPrice

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

@@ -0,0 +1,270 @@
+<template>
+  <div class="xt-step-price" :class="{ 'is-disabled': disabled }">
+    <div v-if="title || $slots.header" class="xt-step-price__header">
+      <xt-text v-if="title" bold size="medium">{{ title }}</xt-text>
+      <slot name="header" />
+      <el-button
+        v-if="!disabled && !isLimitReached"
+        type="primary"
+        size="small"
+        icon="el-icon-plus"
+        plain
+        @click="onAdd"
+      >新增阶梯</el-button>
+      <xt-text v-if="isLimitReached" size="small" type-color="info">已达上限（{{ localItems.length }}/{{ limit }}）</xt-text>
+    </div>
+
+    <div class="xt-step-price__list">
+      <XtStepPriceItem
+        v-for="(item, idx) in localItems"
+        :key="idx"
+        :value="item"
+        :index="idx"
+        :is-first="idx === 0"
+        :is-last="idx === localItems.length - 1"
+        :items-length="localItems.length"
+        :removable="idx !== 0"
+        :min-locked="idx !== 0 ? true : false"
+        :unit="unit"
+        :precision="precision"
+        :left-bracket="leftBracket"
+        :right-bracket="rightBracket"
+        :field-keys="fieldKeys"
+        :disabled="disabled"
+        @input="(val) => onItemInput(val, idx)"
+        @max-change="onMaxChange"
+        @min-change="onMinChange"
+        @delete="onDelete"
+      />
+    </div>
+
+    <div v-if="localItems.length === 0" class="xt-step-price__empty">
+      <span>暂无数据，点击右上角「新增阶梯」开始配置</span>
+    </div>
+
+    <div v-if="tip || $slots.tip" class="xt-step-price__tip">
+      <slot name="tip">
+        <xt-text size="small" type-color="warning">{{ tip }}</xt-text>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import XtStepPriceItem from '../xt-step-price-item/index.vue'
+
+export default {
+  name: 'XtStepPrice',
+
+  components: { XtStepPriceItem },
+
+  computed: {
+    keyMin() { return (this.fieldKeys && this.fieldKeys.min) || 'min' },
+    keyMax() { return (this.fieldKeys && this.fieldKeys.max) || 'max' },
+    keyPrice() { return (this.fieldKeys && this.fieldKeys.price) || 'price' },
+    isLimitReached() {
+      const lim = Number(this.limit)
+      return lim > 0 && this.localItems.length >= lim
+    }
+  },
+
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    title: { type: String, default: '' },
+    unit: { type: String, default: '元' },
+    precision: { type: Number, default: 2 },
+    // 左括号：默认 '['，传空字符串则不显示
+    leftBracket: { type: String, default: '[' },
+    // 右括号：默认 null，走内置逻辑（只有1条为 ']'，多条为 ')'）；传具体值则强制使用
+    rightBracket: { type: String, default: null },
+    // 字段名映射：{ min, max, price }，允许传入的 value 使用自定义字段名
+    fieldKeys: {
+      type: Object,
+      default: () => ({ min: 'min', max: 'max', price: 'price' })
+    },
+    // 阶梯数量上限；<= 0 表示不限制
+    limit: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false },
+    tip: {
+      type: String,
+      default: '区间左闭右闭 [min, max]，最后一级为 [min, +∞)，保证连续且不重叠。'
+    },
+    // 默认初始值：当传入空数组时，是否自动生成首条默认阶梯 [0, +∞)
+    defaultFirst: { type: Boolean, default: true }
+  },
+
+  data() {
+    return {
+      localItems: this.normalize(this.value)
+    }
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.localItems = this.normalize(val)
+      }
+    }
+  },
+
+  methods: {
+    // 统一数字转换：空值/非法值一律转为 fallback（默认 0）
+    safeNumber(v, fallback = 0) {
+      if (v === null || v === undefined || v === '' || v === Infinity || v === -Infinity) return fallback
+      const n = Number(v)
+      return isNaN(n) ? fallback : n
+    },
+
+    cloneItems(items) {
+      if (!Array.isArray(items)) return []
+      return items.map((it) => ({
+        [this.keyMin]: this.safeNumber(it && it[this.keyMin], 0),
+        [this.keyMax]: (it && it[this.keyMax] == null) || (it && it[this.keyMax] === '') ? null : this.safeNumber(it[this.keyMax], null),
+        [this.keyPrice]: this.safeNumber(it && it[this.keyPrice], 0)
+      }))
+    },
+
+    normalize(items) {
+      const list = this.cloneItems(items)
+      if (list.length === 0 && this.defaultFirst) {
+        list.push({ [this.keyMin]: 0, [this.keyMax]: null, [this.keyPrice]: 0 })
+      }
+      this.ensureContinuity(list)
+      return list
+    },
+
+    // 保证 items 连续且不重叠：items[i].max === items[i+1].min，首条 min === 0，末条 max === null
+    ensureContinuity(list) {
+      if (!Array.isArray(list) || list.length === 0) return
+      list[0][this.keyMin] = 0
+
+      for (let i = 0; i < list.length; i++) {
+        const cur = list[i]
+        const next = list[i + 1]
+        const curMin = this.safeNumber(cur[this.keyMin], 0)
+        if (next) {
+          let curMax = this.safeNumber(cur[this.keyMax], curMin + 1)
+          if (curMax <= curMin) curMax = curMin + 1
+          cur[this.keyMax] = curMax
+          next[this.keyMin] = curMax
+        } else {
+          cur[this.keyMax] = null
+        }
+        cur[this.keyPrice] = this.safeNumber(cur[this.keyPrice], 0)
+      }
+    },
+
+    emit() {
+      this.ensureContinuity(this.localItems)
+      const cloned = this.cloneItems(this.localItems)
+      this.$emit('input', cloned)
+      this.$emit('change', cloned)
+    },
+
+    onItemInput(val, idx) {
+      const cur = this.localItems[idx]
+      if (!cur) return
+      if (val && val[this.keyPrice] !== undefined) cur[this.keyPrice] = this.safeNumber(val[this.keyPrice], 0)
+    },
+
+    onMaxChange(val, idx) {
+      const cur = this.localItems[idx]
+      if (!cur) return
+      const n = this.safeNumber(val, this.safeNumber(cur[this.keyMin], 0) + 1)
+      cur[this.keyMax] = n
+      const next = this.localItems[idx + 1]
+      if (next) next[this.keyMin] = n
+      this.emit()
+    },
+
+    onMinChange(val, idx) {
+      const cur = this.localItems[idx]
+      if (!cur) return
+      if (idx === 0) {
+        cur[this.keyMin] = 0
+      } else {
+        const n = this.safeNumber(val, this.safeNumber(cur[this.keyMin], 0))
+        cur[this.keyMin] = n
+        const prev = this.localItems[idx - 1]
+        if (prev) prev[this.keyMax] = n
+      }
+      this.emit()
+    },
+
+    onAdd() {
+      const list = this.localItems
+      const lim = Number(this.limit)
+      if (lim > 0 && list.length >= lim) return
+
+      // 场景 1：空数组 —— 直接 push 一条 [0, +∞)
+      if (list.length === 0) {
+        list.push({
+          [this.keyMin]: 0,
+          [this.keyMax]: null,
+          [this.keyPrice]: 10
+        })
+        this.emit()
+        return
+      }
+
+      // 场景 2：已有数据 —— 在末条前插入新条
+      const last = list[list.length - 1]
+      const newMin = this.safeNumber(last[this.keyMin], 0)
+      const newMax = newMin + 1
+
+      // 新条 price：优先继承「倒数第二条」的 price，其次用末条 price（>0 时），否则默认 10
+      const prev = list[list.length - 2]
+      let newPrice = 10
+      if (prev) {
+        newPrice = this.safeNumber(prev[this.keyPrice], 10)
+      } else {
+        const lastPrice = this.safeNumber(last[this.keyPrice], 0)
+        newPrice = lastPrice > 0 ? lastPrice : 10
+      }
+
+      // 关键修复：构造全新数组，避免 splice 导致 Vue 组件复用 & 响应式不同步
+      //   新条 = { newMin, newMax, newPrice }
+      //   新末条 = { min: newMax, max: null, price: newPrice }
+      const newArr = [
+        ...list.slice(0, -1),
+        {
+          [this.keyMin]: newMin,
+          [this.keyMax]: newMax,
+          [this.keyPrice]: newPrice
+        },
+        {
+          [this.keyMin]: newMax,
+          [this.keyMax]: null,
+          [this.keyPrice]: newPrice
+        }
+      ]
+
+      this.localItems = newArr
+      this.emit()
+    },
+
+    onDelete(idx) {
+      const list = this.localItems
+      if (list.length <= 1) return // 至少保留一条
+      if (idx === 0) return // 首条不允许删除，保证区间起点始终为 0
+      const cur = list[idx]
+      const prev = list[idx - 1]
+      const next = list[idx + 1]
+      if (prev && next) {
+        prev[this.keyMax] = cur[this.keyMax] == null ? null : Number(cur[this.keyMax])
+      } else if (prev && !next) {
+        prev[this.keyMax] = null
+      } else if (!prev && next) {
+        next[this.keyMin] = 0
+      }
+      list.splice(idx, 1)
+      this.emit()
+    }
+  }
+}
+</script>

package/src/components/xt-step-price/style/index.scss

@@ -0,0 +1,115 @@
+.xt-step-price {
+  padding: 12px 16px;
+  background-color: #ffffff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__empty {
+    padding: 24px;
+    text-align: center;
+    color: #909399;
+    font-size: 13px;
+  }
+
+  &__tip {
+    margin-top: 12px;
+    color: #909399;
+    font-size: 12px;
+    line-height: 1.6;
+  }
+
+  &.is-disabled {
+    background-color: #fafafa;
+    opacity: 0.85;
+    pointer-events: none;
+  }
+}
+
+.xt-step-price-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #ecf0f4;
+  }
+
+  &__range {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    color: #606266;
+    font-size: 13px;
+  }
+
+  &__bracket {
+    margin: 0 4px;
+    color: #909399;
+    font-weight: 600;
+  }
+
+  &__comma {
+    margin: 0 6px;
+    color: #909399;
+  }
+
+  &__infinity {
+    display: inline-block;
+    min-width: 60px;
+    text-align: center;
+    color: #c0c4cc;
+    font-size: 13px;
+  }
+
+  &__arrow {
+    margin: 0 12px;
+    color: #409eff;
+    font-weight: 600;
+  }
+
+  &__price {
+    display: inline-flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &__unit {
+    margin-left: 8px;
+    color: #606266;
+    font-size: 13px;
+  }
+
+  &__input {
+    width: 80px;
+    text-align: center;
+
+    &--price {
+      width: 140px;
+    }
+  }
+
+  &__delete {
+    margin-left: 12px;
+    color: #f56c6c !important;
+  }
+
+  &__delete:hover {
+    color: #f78989 !important;
+  }
+}

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

@@ -0,0 +1,2 @@
+import XtStepPriceItem from './index.vue'
+export default XtStepPriceItem

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

@@ -0,0 +1,183 @@
+<template>
+  <div class="xt-step-price-item">
+    <div class="xt-step-price-item__range">
+      <span class="xt-step-price-item__bracket">{{ finalLeftBracket }}</span>
+      <el-input
+        v-model.number="minInput"
+        :disabled="disabled || minLocked"
+        size="small"
+        class="xt-step-price-item__input"
+        @blur="onMinBlur"
+      />
+      <span class="xt-step-price-item__comma">,</span>
+      <el-input
+        v-if="!isLast"
+        v-model.number="maxInput"
+        :disabled="disabled"
+        size="small"
+        class="xt-step-price-item__input"
+        @blur="onMaxBlur"
+      />
+      <span v-else class="xt-step-price-item__infinity">+∞</span>
+      <span class="xt-step-price-item__bracket">{{ finalRightBracket }}</span>
+    </div>
+
+    <span class="xt-step-price-item__arrow">→</span>
+
+    <div class="xt-step-price-item__price">
+      <el-input
+        v-model.number="priceInput"
+        :disabled="disabled"
+        size="small"
+        placeholder="价格"
+        class="xt-step-price-item__input xt-step-price-item__input--price"
+        @blur="onPriceBlur"
+      />
+      <span class="xt-step-price-item__unit">{{ unit }}</span>
+    </div>
+
+    <el-button
+      v-if="!disabled && removable && itemsLength > 1"
+      type="text"
+      icon="el-icon-delete"
+      class="xt-step-price-item__delete"
+      @click="onDelete"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtStepPriceItem',
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+      default: () => ({ min: 0, max: null, price: 0 })
+    },
+    index: { type: Number, default: 0 },
+    isFirst: { type: Boolean, default: false },
+    isLast: { type: Boolean, default: false },
+    itemsLength: { type: Number, default: 1 },
+    removable: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    minLocked: { type: Boolean, default: false },
+    unit: { type: String, default: '元' },
+    precision: { type: Number, default: 2 },
+    // 左括号：默认 '['，传空则不显示
+    leftBracket: { type: String, default: '[' },
+    // 右括号：默认 null，走内置规则（只有1条为 ']'，多条为 ')'）；传值则强制使用
+    rightBracket: { type: String, default: null },
+    // 字段名映射：{ min, max, price }，允许传入的 value 使用自定义字段名
+    fieldKeys: {
+      type: Object,
+      default: () => ({ min: 'min', max: 'max', price: 'price' })
+    }
+  },
+
+  computed: {
+    keyMin() { return (this.fieldKeys && this.fieldKeys.min) || 'min' },
+    keyMax() { return (this.fieldKeys && this.fieldKeys.max) || 'max' },
+    keyPrice() { return (this.fieldKeys && this.fieldKeys.price) || 'price' },
+    finalRightBracket() {
+      if (this.rightBracket !== null && this.rightBracket !== undefined && this.rightBracket !== '') return this.rightBracket
+      return this.itemsLength === 1 ? ']' : ')'
+    },
+    finalLeftBracket() {
+      return (this.leftBracket === null || this.leftBracket === undefined) ? '[' : this.leftBracket
+    }
+  },
+
+  data() {
+    const { minVal, maxVal, priceVal } = this.getPriceItem(this.value)
+    return {
+      minInput: minVal,
+      maxInput: maxVal,
+      priceInput: priceVal
+    }
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { minVal, maxVal, priceVal } = this.getPriceItem(val)
+        this.minInput = minVal
+        this.maxInput = maxVal
+        this.priceInput = priceVal
+      }
+    },
+    isLast(val) {
+      if (val) {
+        this.maxInput = null
+      } else {
+        const minVal = this.safeNumber(this.minInput, 0)
+        const v = this.value
+        this.maxInput = this.safeNumber(v && v[this.keyMax], minVal + 1)
+      }
+    }
+  },
+
+  methods: {
+    getPriceItem(value) {
+      const v = value
+      const minVal = this.safeNumber(v && v[this.keyMin], 0)
+      const maxVal = this.isLast ? null : this.safeNumber(v && v[this.keyMax], minVal + 1)
+      const priceVal = this.safeNumber(v && v[this.keyPrice], 0)
+      return {
+        minVal,
+        maxVal,
+        priceVal
+      }
+    },
+    // 统一兜底：非数字输入一律转为 fallback（默认 0）
+    safeNumber(v, fallback = 0) {
+      if (v === null || v === undefined || v === '' || v === Infinity || v === -Infinity) return fallback
+      const n = Number(v)
+      return isNaN(n) ? fallback : n
+    },
+
+    emitChange(partial) {
+      const next = {
+        [this.keyMin]: this.minInput,
+        [this.keyMax]: this.isLast ? null : this.maxInput,
+        [this.keyPrice]: this.priceInput,
+        ...partial
+      }
+      this.$emit('input', next)
+      this.$emit('change', next, this.index)
+    },
+
+    onMinBlur() {
+      const v = this.safeNumber(this.minInput, 0)
+      this.minInput = v
+      this.$emit('min-change', v, this.index)
+      this.emitChange({ [this.keyMin]: v })
+    },
+
+    onMaxBlur() {
+      if (this.isLast) return
+      const minVal = this.safeNumber(this.minInput, 0)
+      let v = this.safeNumber(this.maxInput, minVal + 1)
+      if (v <= minVal) v = minVal + 1
+      this.maxInput = v
+      this.$emit('max-change', v, this.index)
+      this.emitChange({ [this.keyMax]: v })
+    },
+
+    onPriceBlur() {
+      let v = this.safeNumber(this.priceInput, 0)
+      if (v < 0) v = 0
+      v = Number(v.toFixed(this.precision))
+      this.priceInput = v
+      this.emitChange({ [this.keyPrice]: v })
+    },
+
+    onDelete() {
+      this.$emit('delete', this.index)
+    }
+  }
+}
+</script>

package/src/components/xt-time/index.js

@@ -0,0 +1,2 @@
+import XtTime from './index.vue'
+export default XtTime