xt-element-ui 1.2.5 → 1.2.7

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

@@ -0,0 +1,174 @@
+<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 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)
+    return {
+      minInput: minVal,
+      maxInput: maxVal,
+      priceInput: priceVal
+    }
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      handler(val) {
+        const minVal = this.safeNumber(val && val[this.keyMin], 0)
+        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)
+      }
+    },
+    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: {
+    // 统一兜底：非数字输入一律转为 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

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

@@ -0,0 +1,313 @@
+<template>
+  <span
+    class="xt-time"
+    :class="[
+      typeColor ? 'xt-time--' + typeColor : '',
+      'xt-time--' + size,
+      { 'xt-time--bold': bold }
+    ]"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <slot name="prefix">{{ prefix }}</slot>
+
+    <slot>
+      <template v-if="mode === 'text'">
+        <template v-if="displayText !== undefined">{{ displayText }}</template>
+        <template v-else-if="!hideEmpty">{{ emptyText }}</template>
+      </template>
+
+      <template v-else-if="mode === 'now'">
+        {{ nowText }}
+      </template>
+
+      <template v-else-if="mode === 'countdown'">
+        <template v-if="isCountdownFinished">
+          <slot name="finished">{{ finishedText }}</slot>
+        </template>
+        <template v-else>
+          {{ countdownText }}
+        </template>
+      </template>
+    </slot>
+
+    <slot name="suffix">{{ suffix }}</slot>
+  </span>
+</template>
+
+<script>
+const DEFAULT_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+
+function pad(n) {
+  const s = String(n)
+  return s.length < 2 ? '0' + s : s
+}
+
+/**
+ * 根据字符串/数字/Date 解析为 Date 对象
+ * 兼容：时间戳(ms/s)、Date、"2024-01-01"、"2024/01/01 12:00:00"、ISO 字符串
+ */
+function parseDate(value) {
+  if (value === null || value === undefined || value === '') return null
+  if (value instanceof Date) return isNaN(value.getTime()) ? null : value
+
+  // 数字时间戳
+  if (typeof value === 'number') {
+    // 10 位秒级时间戳补 000
+    const t = value < 1e12 ? value * 1000 : value
+    const d = new Date(t)
+    return isNaN(d.getTime()) ? null : d
+  }
+
+  if (typeof value === 'string') {
+    // 纯数字字符串
+    if (/^\d+$/.test(value)) {
+      const n = Number(value)
+      const t = n < 1e12 ? n * 1000 : n
+      const d = new Date(t)
+      return isNaN(d.getTime()) ? null : d
+    }
+    // 将 "-" 统一为 "/"，避免 Safari 下 "YYYY-MM-DD" 解析失败
+    const normalized = value.replace(/-/g, '/')
+    const d = new Date(normalized)
+    return isNaN(d.getTime()) ? null : d
+  }
+
+  return null
+}
+
+/**
+ * 简易 formatDateTime 实现（不依赖外部库）
+ * 支持占位符：YYYY MM DD HH mm ss SSS
+ */
+function formatDateTime(date, fmt) {
+  if (!date) return ''
+  const f = fmt || DEFAULT_FORMAT
+  const map = {
+    YYYY: date.getFullYear(),
+    MM: pad(date.getMonth() + 1),
+    DD: pad(date.getDate()),
+    HH: pad(date.getHours()),
+    mm: pad(date.getMinutes()),
+    ss: pad(date.getSeconds()),
+    SSS: String(date.getMilliseconds()).padStart(3, '0')
+  }
+  return f.replace(/YYYY|MM|DD|HH|mm|ss|SSS/g, (k) => map[k])
+}
+
+export default {
+  name: 'XtTime',
+
+  props: {
+    // 显示模式：now（当前时间实时刷新）/ countdown（倒计时）/ text（格式化日期文本）
+    type: {
+      type: String,
+      default: 'now',
+      validator: (val) => ['now', 'countdown', 'text'].includes(val)
+    },
+
+    // ===== 通用 =====
+    size: {
+      type: String,
+      default: 'base',
+      validator: (val) =>
+        ['extra-large', 'large', 'medium', 'base', 'small', 'extra-small'].includes(val)
+    },
+    typeColor: {
+      type: String,
+      default: '',
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: DEFAULT_FORMAT
+    },
+    prefix: {
+      type: String,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      default: ''
+    },
+    emptyText: {
+      type: String,
+      default: '-'
+    },
+    hideEmpty: {
+      type: Boolean,
+      default: false
+    },
+    interval: {
+      type: Number,
+      default: 1000,
+      validator: (val) => val >= 100
+    },
+
+    // ===== text 模式 =====
+    // 兼容 v-model 用法，也可直接传 value / :value
+    value: {
+      type: [String, Number, Date],
+      default: ''
+    },
+
+    // ===== countdown 模式 =====
+    targetTime: {
+      type: [String, Number, Date],
+      default: ''
+    },
+    // 倒计时显示格式：
+    // DHMS -> 3天 12时 08分 30秒
+    // HMS  -> 12时 08分 30秒（天数自动折算到小时）
+    // MS   -> 08分 30秒（全部折算到分钟）
+    // SEC  -> 3200秒
+    countdownFormat: {
+      type: String,
+      default: 'DHMS',
+      validator: (val) => ['DHMS', 'HMS', 'MS', 'SEC'].includes(val)
+    },
+    finishedText: {
+      type: String,
+      default: '已结束'
+    }
+  },
+
+  data() {
+    return {
+      tick: 0
+    }
+  },
+
+  computed: {
+    mode() {
+      return this.type
+    },
+
+    parsedValue() {
+      return parseDate(this.value)
+    },
+
+    parsedTarget() {
+      return parseDate(this.targetTime)
+    },
+
+    displayText() {
+      if (!this.parsedValue) return undefined
+      return formatDateTime(this.parsedValue, this.format)
+    },
+
+    nowText() {
+      // 通过 tick 触发刷新
+      // eslint-disable-next-line no-unused-vars
+      const _ = this.tick
+      return formatDateTime(new Date(), this.format)
+    },
+
+    // 剩余毫秒数（countdown 模式）
+    remainingMs() {
+      if (this.mode !== 'countdown') return 0
+      // eslint-disable-next-line no-unused-vars
+      const _ = this.tick
+      if (!this.parsedTarget) return 0
+      const diff = this.parsedTarget.getTime() - Date.now()
+      return diff > 0 ? diff : 0
+    },
+
+    isCountdownFinished() {
+      return this.mode === 'countdown' && this.parsedTarget && this.remainingMs <= 0
+    },
+
+    countdownText() {
+      if (!this.parsedTarget) return this.emptyText
+      const total = Math.floor(this.remainingMs / 1000)
+      if (total <= 0) return this.finishedText
+
+      switch (this.countdownFormat) {
+        case 'SEC':
+          return `${total}秒`
+        case 'MS': {
+          const m = Math.floor(total / 60)
+          const s = total % 60
+          return `${pad(m)}分${pad(s)}秒`
+        }
+        case 'HMS': {
+          const h = Math.floor(total / 3600)
+          const m = Math.floor((total % 3600) / 60)
+          const s = total % 60
+          return `${pad(h)}时${pad(m)}分${pad(s)}秒`
+        }
+        case 'DHMS':
+        default: {
+          const d = Math.floor(total / 86400)
+          const h = Math.floor((total % 86400) / 3600)
+          const m = Math.floor((total % 3600) / 60)
+          const s = total % 60
+          return `${d}天${pad(h)}时${pad(m)}分${pad(s)}秒`
+        }
+      }
+    },
+
+    customStyle() {
+      return {}
+    }
+  },
+
+  watch: {
+    type() {
+      this.restartTimer()
+    },
+    interval() {
+      this.restartTimer()
+    }
+  },
+
+  mounted() {
+    this.restartTimer()
+  },
+
+  beforeDestroy() {
+    this.clearTimer()
+  },
+
+  activated() {
+    this.restartTimer()
+  },
+
+  deactivated() {
+    this.clearTimer()
+  },
+
+  methods: {
+    restartTimer() {
+      this.clearTimer()
+      if (this.mode === 'now' || this.mode === 'countdown') {
+        // 立即刷新一次，避免首次渲染时 tick=0 导致的差异
+        this.tick++
+        this._timer = setInterval(() => {
+          this.tick++
+          // 倒计时结束触发 finish 事件
+          if (this.mode === 'countdown' && this.parsedTarget && this.remainingMs <= 0) {
+            this.clearTimer()
+            this.$emit('finish')
+          }
+        }, this.interval)
+      }
+    },
+
+    clearTimer() {
+      if (this._timer) {
+        clearInterval(this._timer)
+        this._timer = null
+      }
+    },
+
+    handleClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+</script>

package/src/components/xt-time/style/index.scss

@@ -0,0 +1,23 @@
+.xt-time {
+  display: inline-block;
+  color: var(--xt-text-color, #303133);
+  font-variant-numeric: tabular-nums;
+  transition: color 0.2s ease;
+}
+
+/* 字号（同步 XtText 的 CSS 变量方案，若未定义则使用 fallback） */
+.xt-time--extra-large { font-size: var(--xt-font-size-extra-large, 20px); }
+.xt-time--large       { font-size: var(--xt-font-size-large, 18px); }
+.xt-time--medium      { font-size: var(--xt-font-size-medium, 16px); }
+.xt-time--base        { font-size: var(--xt-font-size-base, 14px); }
+.xt-time--small       { font-size: var(--xt-font-size-small, 13px); }
+.xt-time--extra-small { font-size: var(--xt-font-size-extra-small, 12px); }
+
+/* 加粗 */
+.xt-time--bold { font-weight: 700; }
+
+/* 颜色语义：与 Element UI/XT 主题色一致 */
+.xt-time--primary { color: var(--xt-color-primary, #409eff); }
+.xt-time--success { color: var(--xt-color-success, #67c23a); }
+.xt-time--warning { color: var(--xt-color-warning, #e6a23c); }
+.xt-time--danger  { color: var(--xt-color-danger, #f56c6c); }

package/src/index.js

@@ -23,9 +23,12 @@ import XtCard from './components/xt-card'
 import XtCardItem from './components/xt-card-item'
 import XtConfigProvider from './components/xt-config-provider'
 import XtText from './components/xt-text'
+import XtTime from './components/xt-time'
+import XtStepPrice from './components/xt-step-price'
+import XtStepPriceItem from './components/xt-step-price-item'
 import XtGridBox from './components/xt-grid-box'
 import XtGridItem from './components/xt-grid-item'
-import XtDatePicker from './components/xt-date-picker'
+import ExDatePicker from './components/ex-date-picker'
 import ExButton from './components/ex-button'
 import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
 import ExCard from './components/ex-card'
@@ -44,9 +47,12 @@ const components = [
   XtCardItem,
   XtConfigProvider,
   XtText,
+  XtTime,
+  XtStepPrice,
+  XtStepPriceItem,
   XtGridBox,
   XtGridItem,
-  XtDatePicker,
+  ExDatePicker,
   ExButton,
   ExChart,
   ExCard,
@@ -131,9 +137,12 @@ export default {
   XtCardItem,
   XtConfigProvider,
   XtText,
+  XtTime,
+  XtStepPrice,
+  XtStepPriceItem,
   XtGridBox,
   XtGridItem,
-  XtDatePicker,
+  ExDatePicker,
   ExButton,
   ExCard,
   ExIcon,

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

@@ -1,91 +0,0 @@
-export default {
-  color: ["#2CDEB3", "#A17EE6", "#E57E40", "#409EFF"],
-  backgroundColor: "#ffffff",
-  textStyle: {
-    fontFamily: "Microsoft YaHei, sans-serif"
-  },
-  title: {
-    textStyle: {
-      color: "#333"
-    },
-    subtextStyle: {
-      color: "#666666"
-    }
-  },
-  line: {
-    itemStyle: {
-    },
-    lineStyle: {
-      width: 2
-    }
-  },
-  bar: {
-    itemStyle: {
-      borderRadius: 4
-    }
-  },
-  pie: {
-    roseType: "radius",
-    label: {
-      color: "#333"
-    }
-  },
-  radar: {
-    indicator: {
-      color: "#666666"
-    }
-  },
-  map: {
-    label: {
-      color: "#333"
-    },
-    itemStyle: {
-      borderColor: "#fff"
-    }
-  },
-  gauge: {
-    axisLine: {
-      lineStyle: {
-        color: [[1, "#5470c6"]]
-      }
-    }
-  },
-  toolbox: {
-    iconStyle: {
-      borderColor: "#666666"
-    }
-  },
-  axisLine: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  axisTick: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  splitLine: {
-    lineStyle: {
-      color: "#ebeef5"
-    }
-  },
-  splitArea: {
-    areaStyle: {
-      color: ["#f7f8fa", "#ffffff"]
-    }
-  },
-  legend: {
-    textStyle: {
-      color: "#666"
-    }
-  },
-  tooltip: {
-    backgroundColor: "rgba(255, 255, 255, 0.95)",
-    borderColor: "#DCDFE6",
-    borderWidth: 1,
-    textStyle: {
-      color: "#333"
-    }
-  }
-};