xt-element-ui 1.2.8 → 1.3.1

package/src/components/xt-map/provider.vue

@@ -0,0 +1,200 @@
+<template>
+  <div :class="['xt-map-provider', { 'xt-map-provider--dark': mergedTheme === 'dark' }]" :style="wrapperStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {
+  getMapConfig,
+  setMapConfig,
+  setMapProvider,
+  setMapApiKey,
+  setMapApiUrl,
+  setMapType,
+  setMapTheme,
+  setMapCenter,
+  setMapZoom,
+  setMapPlugins,
+  setSecurityJsCode,
+  getMapProvider,
+  getMapApiKey,
+  getMapApiUrl,
+  getMapType,
+  getMapTheme,
+  getMapCenter,
+  getMapZoom,
+  getMapPlugins,
+  MAP_PROVIDERS,
+  MAP_TYPES,
+  MAP_THEMES,
+  onMapConfigChange
+} from './config/xt-map-config'
+
+export default {
+  name: 'XtMapProvider',
+
+  props: {
+    provider: {
+      type: String,
+      default: '',
+      validator: (val) => val === '' || MAP_PROVIDERS.includes(val)
+    },
+    apiKey: {
+      type: String,
+      default: ''
+    },
+    apiUrl: {
+      type: String,
+      default: ''
+    },
+    mapType: {
+      type: String,
+      default: '',
+      validator: (val) => val === '' || MAP_TYPES.includes(val)
+    },
+    theme: {
+      type: String,
+      default: '',
+      validator: (val) => val === '' || MAP_THEMES.includes(val)
+    },
+    center: {
+      type: Array,
+      default: () => null
+    },
+    zoom: {
+      type: Number,
+      default: null
+    },
+    plugins: {
+      type: Array,
+      default: () => []
+    },
+    securityJsCode: {
+      type: String,
+      default: ''
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      mergedTheme: this.theme || getMapTheme() || 'light'
+    }
+  },
+
+  computed: {
+    wrapperStyle() {
+      return {}
+    }
+  },
+
+  watch: {
+    provider: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapProvider(newVal)
+      }
+    },
+    apiKey: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapApiKey(newVal)
+      }
+    },
+    apiUrl: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapApiUrl(newVal)
+      }
+    },
+    mapType: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapType(newVal)
+      }
+    },
+    theme: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          setMapTheme(newVal)
+          this.mergedTheme = newVal
+        }
+      }
+    },
+    center: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapCenter(newVal)
+      }
+    },
+    zoom: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal !== null && newVal !== undefined) setMapZoom(newVal)
+      }
+    },
+    plugins: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal.length > 0) setMapPlugins(newVal)
+      }
+    },
+    securityJsCode: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setSecurityJsCode(newVal)
+      }
+    }
+  },
+
+  provide() {
+    return {
+      xtMapConfig: {
+        getProvider: () => this.provider || getMapProvider(),
+        getApiKey: () => this.apiKey || getMapApiKey(),
+        getApiUrl: () => this.apiUrl || getMapApiUrl(),
+        getMapType: () => this.mapType || getMapType(),
+        getTheme: () => this.theme || getMapTheme(),
+        getCenter: () => this.center || getMapCenter(),
+        getZoom: () => this.zoom !== null ? this.zoom : getMapZoom(),
+        getPlugins: () => this.plugins.length > 0 ? this.plugins : getMapPlugins(),
+        getConfig: () => ({
+          provider: this.provider || getMapProvider(),
+          apiKey: this.apiKey || getMapApiKey(),
+          apiUrl: this.apiUrl || getMapApiUrl(),
+          mapType: this.mapType || getMapType(),
+          theme: this.theme || getMapTheme(),
+          center: this.center || getMapCenter(),
+          zoom: this.zoom !== null ? this.zoom : getMapZoom()
+        })
+      }
+    }
+  },
+
+  created() {
+    this._unsubscribe = onMapConfigChange((key, value) => {
+      if (key === 'theme') this.mergedTheme = this.theme || value
+    })
+  },
+
+  beforeDestroy() {
+    if (this._unsubscribe) this._unsubscribe()
+  }
+}
+</script>
+
+<style scoped>
+.xt-map-provider {
+  width: 100%;
+  height: 100%;
+}
+
+.xt-map-provider--dark {
+  background-color: transparent;
+}
+</style>

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

@@ -0,0 +1,77 @@
+.xt-map-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.xt-map-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--xt-map-bg, #f5f5f5);
+  position: relative;
+}
+
+.xt-map-container[data-theme="dark"] {
+  background-color: #1a1a1a;
+}
+
+.xt-map-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  color: #606266;
+  font-size: 14px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.xt-map-container[data-theme="dark"] + .xt-map-loading,
+.xt-map-wrapper[data-theme="dark"] .xt-map-loading {
+  background-color: rgba(30, 30, 30, 0.9);
+  color: #c0c4cc;
+}
+
+.xt-map-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 20px;
+  background-color: rgba(254, 235, 235, 0.95);
+  border: 1px solid #fbc4c4;
+  border-radius: 6px;
+  color: #f56c6c;
+  font-size: 14px;
+  text-align: center;
+  max-width: 80%;
+  z-index: 10;
+}
+
+.xt-map-container[data-theme="dark"] + .xt-map-error,
+.xt-map-wrapper[data-theme="dark"] .xt-map-error {
+  background-color: rgba(60, 30, 30, 0.95);
+  border-color: #7a3a3a;
+  color: #f56c6c;
+}
+
+/* 暗黑模式下对天地图/百度的瓦片反色滤镜兜底 */
+.xt-map-container[data-theme="dark"] img {
+  /* 各适配器内部会自行处理滤镜，这里仅做最低限度兜底 */
+}
+
+/* 暗黑模式下覆盖层的辅助 CSS 变量 */
+.xt-map-container[data-theme="dark"] {
+  --xt-map-overlay-bg: rgba(30, 30, 30, 0.9);
+  --xt-map-overlay-color: #c0c4cc;
+}
+
+.xt-map-container[data-theme="light"] {
+  --xt-map-overlay-bg: rgba(255, 255, 255, 0.95);
+  --xt-map-overlay-color: #606266;
+}

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

@@ -1,2 +1,11 @@
 import XtStepPrice from './index.vue'
+import XtStepPriceItem from '../xt-step-price-item/index.vue'
+
+XtStepPrice.install = function (Vue) {
+  Vue.component(XtStepPrice.name, XtStepPrice)
+  Vue.component(XtStepPriceItem.name, XtStepPriceItem)
+}
+
+// 同时导出组件和 install 方法，支持多种引入方式
 export default XtStepPrice
+export { XtStepPrice, XtStepPriceItem }

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,
@@ -142,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 {
@@ -200,6 +204,7 @@ export default {
       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.js

@@ -1,2 +1,8 @@
 import XtStepPriceItem from './index.vue'
+
+XtStepPriceItem.install = function (Vue) {
+  Vue.component(XtStepPriceItem.name, XtStepPriceItem)
+}
+
 export default XtStepPriceItem
+export { XtStepPriceItem }

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

@@ -2,30 +2,32 @@
   <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"
+        placeholder="下限"
         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"
         size="small"
+        placeholder="上限"
         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
+      <xt-input
         v-model.number="priceInput"
         :disabled="disabled"
         size="small"
@@ -36,9 +38,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 +67,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条为 ']'，多条为 ')'）；传值则强制使用
@@ -82,7 +86,7 @@ export default {
     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 ? ']' : ')'
+      return this.isLast ? ']' : ')'
     },
     finalLeftBracket() {
       return (this.leftBracket === null || this.leftBracket === undefined) ? '[' : this.leftBracket

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

@@ -1,2 +1,8 @@
-import XtText from './index.vue'
-export default XtText
+import XtText from './index.vue'
+
+XtText.install = function (Vue) {
+  Vue.component(XtText.name, XtText)
+}
+
+export default XtText
+export { XtText }

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

@@ -1,2 +1,8 @@
 import XtTime from './index.vue'
+
+XtTime.install = function (Vue) {
+  Vue.component(XtTime.name, XtTime)
+}
+
 export default XtTime
+export { XtTime }

package/src/index.js

@@ -26,6 +26,8 @@ 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 XtMap from './components/xt-map'
+import { XtMapProvider } from './components/xt-map'
 import XtGridBox from './components/xt-grid-box'
 import XtGridItem from './components/xt-grid-item'
 import ExDatePicker from './components/ex-date-picker'
@@ -50,6 +52,8 @@ const components = [
   XtTime,
   XtStepPrice,
   XtStepPriceItem,
+  XtMap,
+  XtMapProvider,
   XtGridBox,
   XtGridItem,
   ExDatePicker,
@@ -140,6 +144,8 @@ export default {
   XtTime,
   XtStepPrice,
   XtStepPriceItem,
+  XtMap,
+  XtMapProvider,
   XtGridBox,
   XtGridItem,
   ExDatePicker,