xt-element-ui 1.2.7 → 1.3.0

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

@@ -3,14 +3,14 @@
     <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
+      <xt-button
         v-if="!disabled && !isLimitReached"
         type="primary"
         size="small"
         icon="el-icon-plus"
         plain
         @click="onAdd"
-      >新增阶梯</el-button>
+      >新增档位</xt-button>
       <xt-text v-if="isLimitReached" size="small" type-color="info">已达上限（{{ localItems.length }}/{{ limit }}）</xt-text>
     </div>
 
@@ -27,6 +27,7 @@
         :min-locked="idx !== 0 ? true : false"
         :unit="unit"
         :precision="precision"
+        :step="step"
         :left-bracket="leftBracket"
         :right-bracket="rightBracket"
         :field-keys="fieldKeys"
@@ -39,7 +40,7 @@
     </div>
 
     <div v-if="localItems.length === 0" class="xt-step-price__empty">
-      <span>暂无数据，点击右上角「新增阶梯」开始配置</span>
+      <span>暂无数据，点击右上角「新增档位」开始配置</span>
     </div>
 
     <div v-if="tip || $slots.tip" class="xt-step-price__tip">
@@ -87,6 +88,8 @@ export default {
     },
     // 阶梯数量上限；<= 0 表示不限制
     limit: { type: Number, default: 0 },
+    // 阶梯增量：新增/校正时，下一条阶梯的 min = 当前 max = 当前 min + step（默认 1）
+    step: { type: Number, default: 10 },
     disabled: { type: Boolean, default: false },
     tip: {
       type: String,
@@ -105,6 +108,7 @@ export default {
   watch: {
     value: {
       deep: true,
+      immediate: true,
       handler(val) {
         this.localItems = this.normalize(val)
       }
@@ -141,14 +145,15 @@ export default {
     ensureContinuity(list) {
       if (!Array.isArray(list) || list.length === 0) return
       list[0][this.keyMin] = 0
+      const stepVal = this.safeNumber(this.step, 1)
 
       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
+          let curMax = this.safeNumber(cur[this.keyMax], curMin + stepVal)
+          if (curMax <= curMin) curMax = curMin + stepVal
           cur[this.keyMax] = curMax
           next[this.keyMin] = curMax
         } else {
@@ -196,10 +201,10 @@ export default {
     },
 
     onAdd() {
-      debugger
       const list = this.localItems
       const lim = Number(this.limit)
       if (lim > 0 && list.length >= lim) return
+      const stepVal = this.safeNumber(this.step, 1)
 
       // 场景 1：空数组 —— 直接 push 一条 [0, +∞)
       if (list.length === 0) {
@@ -212,10 +217,10 @@ export default {
         return
       }
 
-      // 场景 2：已有数据 —— 在末条前插入新条
+      // 场景 2：已有数据 —— 在末条前插入新条，新条的 max = 末条 min + step
       const last = list[list.length - 1]
       const newMin = this.safeNumber(last[this.keyMin], 0)
-      const newMax = newMin + 1
+      const newMax = newMin + stepVal
 
       // 新条 price：优先继承「倒数第二条」的 price，其次用末条 price（>0 时），否则默认 10
       const prev = list[list.length - 2]
@@ -227,9 +232,6 @@ export default {
         newPrice = lastPrice > 0 ? lastPrice : 10
       }
 
-      // 关键修复：构造全新数组，避免 splice 导致 Vue 组件复用 & 响应式不同步
-      //   新条 = { newMin, newMax, newPrice }
-      //   新末条 = { min: newMax, max: null, price: newPrice }
       const newArr = [
         ...list.slice(0, -1),
         {

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

@@ -1,8 +1,10 @@
+@import '../../../styles/variables.scss';
+
 .xt-step-price {
   padding: 12px 16px;
-  background-color: #ffffff;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
+  background-color: var(--xt-fill-color-blank, #ffffff);
+  border: 1px solid var(--xt-border-color-lighter, #ebeef5);
+  border-radius: var(--xt-border-radius-base, 4px);
 
   &__header {
     display: flex;
@@ -20,19 +22,19 @@
   &__empty {
     padding: 24px;
     text-align: center;
-    color: #909399;
-    font-size: 13px;
+    color: var(--xt-text-color-secondary, #909399);
+    font-size: var(--xt-font-size-small, 13px);
   }
 
   &__tip {
     margin-top: 12px;
-    color: #909399;
-    font-size: 12px;
+    color: var(--xt-text-color-secondary, #909399);
+    font-size: var(--xt-font-size-extra-small, 12px);
     line-height: 1.6;
   }
 
   &.is-disabled {
-    background-color: #fafafa;
+    background-color: var(--xt-fill-color-light, #f5f7fa);
     opacity: 0.85;
     pointer-events: none;
   }
@@ -42,44 +44,50 @@
   display: flex;
   align-items: center;
   padding: 8px 12px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
+  gap: 8px;
+  background-color: var(--xt-fill-color-light, #f5f7fa);
+  border-radius: var(--xt-border-radius-base, 4px);
+  transition: background-color var(--xt-transition-duration-fast, 0.2s) ease;
 
   &:hover {
-    background-color: #ecf0f4;
+    background-color: var(--xt-fill-color, #f0f2f5);
   }
 
   &__range {
     display: inline-flex;
     align-items: center;
     flex: 0 0 auto;
-    color: #606266;
-    font-size: 13px;
+    color: var(--xt-text-color-regular, #606266);
+    font-size: var(--xt-font-size-small, 13px);
+  }
+
+  &__name {
+    color: var(--xt-text-color-primary, #303133);
+    font-weight: 600;
   }
 
   &__bracket {
     margin: 0 4px;
-    color: #909399;
+    color: var(--xt-text-color-secondary, #909399);
     font-weight: 600;
   }
 
   &__comma {
     margin: 0 6px;
-    color: #909399;
+    color: var(--xt-text-color-secondary, #909399);
   }
 
   &__infinity {
     display: inline-block;
-    min-width: 60px;
+    min-width: 80px;
     text-align: center;
-    color: #c0c4cc;
-    font-size: 13px;
+    color: var(--xt-text-color-placeholder, #c0c4cc);
+    font-size: var(--xt-font-size-small, 13px);
   }
 
   &__arrow {
     margin: 0 12px;
-    color: #409eff;
+    color: var(--xt-color-primary, #1890ff);
     font-weight: 600;
   }
 
@@ -91,8 +99,8 @@
 
   &__unit {
     margin-left: 8px;
-    color: #606266;
-    font-size: 13px;
+    color: var(--xt-text-color-regular, #606266);
+    font-size: var(--xt-font-size-small, 13px);
   }
 
   &__input {
@@ -106,10 +114,10 @@
 
   &__delete {
     margin-left: 12px;
-    color: #f56c6c !important;
+    color: var(--xt-color-danger, #f56c6c) !important;
   }
 
   &__delete:hover {
-    color: #f78989 !important;
+    color: var(--xt-color-danger-light-5, #f57786) !important;
   }
 }

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

@@ -2,15 +2,17 @@
   <div class="xt-step-price-item">
     <div class="xt-step-price-item__range">
       <span class="xt-step-price-item__bracket">{{ finalLeftBracket }}</span>
-      <el-input
+      <span v-if="itemsLength > 1" class="xt-step-price-item__name">第{{ index + 1 }}档</span>
+      <span class="xt-step-price-item__bracket">{{ finalRightBracket }}</span>
+      <xt-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
+      <span class="xt-step-price-item__comma">-</span>
+      <xt-input
         v-if="!isLast"
         v-model.number="maxInput"
         :disabled="disabled"
@@ -19,13 +21,11 @@
         @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
+      <xt-input
         v-model.number="priceInput"
         :disabled="disabled"
         size="small"
@@ -36,9 +36,9 @@
       <span class="xt-step-price-item__unit">{{ unit }}</span>
     </div>
 
-    <el-button
+    <xt-button
       v-if="!disabled && removable && itemsLength > 1"
-      type="text"
+      text
       icon="el-icon-delete"
       class="xt-step-price-item__delete"
       @click="onDelete"
@@ -65,6 +65,8 @@ export default {
     minLocked: { type: Boolean, default: false },
     unit: { type: String, default: '元' },
     precision: { type: Number, default: 2 },
+    // 阶梯增量：控制新增/校正时的区间跨度，默认 1
+    step: { type: Number, default: 1 },
     // 左括号：默认 '['，传空则不显示
     leftBracket: { type: String, default: '[' },
     // 右括号：默认 null，走内置规则（只有1条为 ']'，多条为 ')'）；传值则强制使用
@@ -90,10 +92,7 @@ export default {
   },
 
   data() {
-    const v = this.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)
+    const { minVal, maxVal, priceVal } = this.getPriceItem(this.value)
     return {
       minInput: minVal,
       maxInput: maxVal,
@@ -104,11 +103,12 @@ export default {
   watch: {
     value: {
       deep: true,
+      immediate: true,
       handler(val) {
-        const minVal = this.safeNumber(val && val[this.keyMin], 0)
+        const { minVal, maxVal, priceVal } = this.getPriceItem(val)
         this.minInput = minVal
-        this.maxInput = this.isLast ? null : this.safeNumber(val && val[this.keyMax], minVal + 1)
-        this.priceInput = this.safeNumber(val && val[this.keyPrice], 0)
+        this.maxInput = maxVal
+        this.priceInput = priceVal
       }
     },
     isLast(val) {
@@ -123,6 +123,17 @@ export default {
   },
 
   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