xt-element-ui 1.2.5 → 1.2.7

package/src/components/ex-chart/utils.js

@@ -1,16 +1,10 @@
 import themeWhite from "./theme/white";
 import themeDark from "./theme/dark";
-import themeBlue from "./theme/blue";
-import themeStarry from "./theme/starry";
-import themeOrange from "./theme/orange";
 
 const themeKeys = {
   "default": themeWhite,
   "white": themeWhite,
-  "dark": themeDark,
-  "blue": themeBlue,
-  "starry": themeStarry,
-  "orange": themeOrange
+  "dark": themeDark
 };
 
 // echarts 仅在客户端加载，避免 SSR 编译/渲染报错
@@ -121,6 +115,153 @@ EchartsUtil.EchartsUtil = {
 
 EchartsUtil.chartInstanceList = [];
 
+// === 极简模式（simpleMode）预设配置 ===
+// 极简模式：隐藏图例、隐藏坐标轴/网格线、缩小内边距、简化 tooltip、去除动画装饰
+
+EchartsUtil.simpleModeOption = {
+  legend: { show: false },
+  tooltip: {
+    borderWidth: 0,
+    extraCssText: "box-shadow: 0 2px 8px rgba(0,0,0,0.12);"
+  },
+  grid: {
+    top: "5%",
+    left: "5%",
+    right: "5%",
+    bottom: "5%",
+    containLabel: true
+  },
+  xAxis: {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false }
+  },
+  yAxis: {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false },
+    axisLabel: { show: false }
+  },
+  animationDuration: 300,
+  animationEasing: "linear"
+};
+
+// 各类图表的极简模式特殊配置
+EchartsUtil.simpleModeByType = {
+  bar: {
+    series: {
+      barWidth: "60%",
+      label: { show: false },
+      markPoint: null,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 6,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0,0,0,0.15)"
+        }
+      }
+    }
+  },
+  line: {
+    series: {
+      symbol: "none",
+      smooth: true,
+      symbolSize: 0,
+      label: { show: false },
+      areaStyle: null
+    }
+  },
+  pie: {
+    legend: { show: false },
+    title: { show: false },
+    series: {
+      radius: ["40%", "72%"],
+      label: { show: false },
+      labelLine: { show: false }
+    }
+  },
+  multi: {
+    legend: { show: false },
+    grid: {
+      top: "8%",
+      left: "5%",
+      right: "5%",
+      bottom: "5%",
+      containLabel: true
+    }
+  }
+};
+
+// 深拷贝 + 深合并工具
+function deepMerge(target, source) {
+  if (source == null) return target;
+  if (Array.isArray(source)) return source.slice();
+  if (typeof source !== "object") return source;
+  if (target == null || typeof target !== "object") {
+    return JSON.parse(JSON.stringify(source));
+  }
+  const result = Array.isArray(target) ? target.slice() : Object.assign({}, target);
+  Object.keys(source).forEach(key => {
+    const src = source[key];
+    if (src === null || src === undefined) {
+      if (source.hasOwnProperty(key)) result[key] = src;
+      return;
+    }
+    if (typeof src === "object") {
+      result[key] = deepMerge(result[key], src);
+    } else {
+      result[key] = src;
+    }
+  });
+  return result;
+}
+
+// 对 option 应用极简模式（会保留调用方显式设置的值）
+EchartsUtil.applySimpleMode = function(option, type) {
+  if (!option || typeof option !== "object") return option;
+
+  const base = JSON.parse(JSON.stringify(EchartsUtil.simpleModeOption));
+  const typeConfig = EchartsUtil.simpleModeByType[type] || {};
+  const merged = deepMerge(base, typeConfig);
+
+  // 合并 base 与 typeConfig 到当前 option
+  Object.keys(merged).forEach(key => {
+    if (key === "series") return; // series 单独处理
+    if (option[key] == null) {
+      option[key] = merged[key];
+    } else if (typeof option[key] === "object" && typeof merged[key] === "object" && !Array.isArray(option[key])) {
+      option[key] = deepMerge(merged[key], option[key]);
+    }
+    // 若调用方已有原始值则保留（不覆盖）
+  });
+
+  // series 处理：若存在则对每个 series 应用简化配置
+  if (option.series && Array.isArray(option.series)) {
+    const simpleSeries = (merged.series || {});
+    option.series = option.series.map(s => {
+      if (s == null || typeof s !== "object") return s;
+      return deepMerge(simpleSeries, s); // 调用方的值优先级更高
+    });
+  }
+
+  // 特殊：xAxis / yAxis 可能是数组
+  ["xAxis", "yAxis"].forEach(axisKey => {
+    if (option[axisKey] != null && typeof option[axisKey] === "object") {
+      const simpleAxis = merged[axisKey] || {};
+      if (Array.isArray(option[axisKey])) {
+        option[axisKey] = option[axisKey].map(axis => {
+          if (axis == null || typeof axis !== "object") return axis;
+          return deepMerge(simpleAxis, axis);
+        });
+      } else {
+        option[axisKey] = deepMerge(simpleAxis, option[axisKey]);
+      }
+    }
+  });
+
+  return option;
+};
+
 EchartsUtil.mergeOptions = function(themeOption, customOption) {
   return Object.assign({}, themeOption, customOption);
 };

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,
+      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() {
+      debugger
+      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