xt-element-ui 1.2.8 → 1.3.1

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

@@ -1,37 +1,66 @@
-<template>
-  <div class="xt-input">
-    <el-input
-      :value="value"
-      :placeholder="placeholder"
-      :style="inputStyle"
-      @input="$emit('input', $event)"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'XtInput',
-  props: {
-    value: [String, Number],
-    placeholder: {
-      type: String,
-      default: '请输入内容'
-    },
-    color: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    inputStyle() {
-      if (this.color) {
-        return {
-          '--xt-input-focus-color': this.color
-        }
-      }
-      return {}
-    }
-  }
-}
-</script>
+<template>
+  <div
+    class="xt-input"
+    :class="[
+      size ? 'xt-input--' + size : '',
+      { 'is-disabled': disabled }
+    ]"
+  >
+    <el-input
+      :value="value"
+      :placeholder="placeholder"
+      :type="type"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+      :style="inputStyle"
+      @input="$emit('input', $event)"
+      @change="$emit('change', $event)"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtInput',
+  props: {
+    value: [String, Number],
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    inputStyle() {
+      if (this.color) {
+        return {
+          '--xt-input-focus-color': this.color
+        }
+      }
+      return {}
+    }
+  }
+}
+</script>

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

@@ -1,27 +1,84 @@
 @import '../../../styles/variables.scss';
 
-.xt-input .el-input__inner {
+// 基础变量定义 - 通过组件顶层设置统一的 CSS 变量
+.xt-input {
+  --xt-input-bg-color: var(--xt-fill-color-blank, #ffffff);
+  --xt-input-text-color: var(--xt-text-color-regular, #606266);
+  --xt-input-border-color: var(--xt-border-color, #dcdfe6);
+  --xt-input-border-color-hover: var(--xt-border-color-dark, #c0c4cc);
+  --xt-input-border-color-focus: var(--xt-color-primary, #1890ff);
+  --xt-input-placeholder-color: var(--xt-text-color-placeholder, #c0c4cc);
+  --xt-input-disabled-bg-color: var(--xt-fill-color-light, #f5f7fa);
+  --xt-input-disabled-text-color: var(--xt-text-color-placeholder, #c0c4cc);
+  --xt-input-disabled-border-color: var(--xt-border-color-light, #e4e7ed);
   --xt-input-focus-color: var(--xt-color-primary, #1890ff);
-  
-  background-color: var(--xt-input-bg-color, #ffffff);
-  border-color: var(--xt-input-border-color, #DCDFE6);
-  color: var(--xt-input-text-color, #303133);
-  font-size: var(--xt-font-size-base, 14px);
+  --xt-input-border-radius: var(--xt-border-radius-base, 4px);
+  --xt-input-font-size: var(--xt-font-size-base, 14px);
+  --xt-input-height: 32px;
+  --xt-input-padding-x: 15px;
+}
+
+// 尺寸：small
+.xt-input--small {
+  --xt-input-height: 28px;
+  --xt-input-font-size: var(--xt-font-size-small, 12px);
+  --xt-input-padding-x: 10px;
+}
+
+// 尺寸：medium（默认，无需单独覆盖）
+.xt-input--medium {
+  --xt-input-height: 32px;
+  --xt-input-font-size: var(--xt-font-size-base, 14px);
+  --xt-input-padding-x: 15px;
+}
+
+// 尺寸：large
+.xt-input--large {
+  --xt-input-height: 40px;
+  --xt-input-font-size: var(--xt-font-size-large, 16px);
+  --xt-input-padding-x: 16px;
+}
+
+// 内部结构样式（Element UI 2.x 结构）
+.xt-input .el-input {
+  height: var(--xt-input-height);
+}
+
+.xt-input .el-input__inner {
+  background-color: var(--xt-input-bg-color);
+  border-color: var(--xt-input-border-color);
+  color: var(--xt-input-text-color);
+  font-size: var(--xt-input-font-size);
+  border-radius: var(--xt-input-border-radius);
+  height: var(--xt-input-height);
+  line-height: var(--xt-input-height);
+  padding: 0 var(--xt-input-padding-x);
+  transition: border-color var(--xt-transition-duration-fast, 0.2s) ease;
 }
 
 .xt-input .el-input__inner::placeholder {
-  color: var(--xt-input-placeholder-color, #C0C4CC);
+  color: var(--xt-input-placeholder-color);
 }
 
+// hover 状态
+.xt-input .el-input__inner:hover {
+  border-color: var(--xt-input-border-color-hover);
+}
+
+// focus 状态
 .xt-input .el-input__inner:focus {
-  border-color: var(--xt-input-focus-color);
+  border-color: var(--xt-input-border-color-focus);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-input-focus-color) 20%, transparent);
 }
 
-.xt-input .el-input {
-  height: var(--xt-input-height, 32px);
+// disabled 状态
+.xt-input.is-disabled .el-input__inner {
+  background-color: var(--xt-input-disabled-bg-color);
+  border-color: var(--xt-input-disabled-border-color);
+  color: var(--xt-input-disabled-text-color);
+  cursor: not-allowed;
 }
 
-.xt-input .el-input .el-input__wrapper {
-  padding: 0 var(--xt-input-padding-x, 15px);
-}
+.xt-input.is-disabled .el-input__inner::placeholder {
+  color: var(--xt-input-disabled-text-color);
+}

package/src/components/xt-map/adapters/amap.js

@@ -0,0 +1,235 @@
+/**
+ * 高德地图适配器 (AMap)
+ * 以高德为基准，所有 xt-map 枚举直接映射
+ */
+
+import { MapAdapterBase } from './base'
+import { hasGlobal } from '../loaders/script-loader'
+
+const A_MAP_MAP_TYPES = {
+  standard: 'amap',           // 标准/矢量
+  satellite: 'satellite',     // 卫星
+  hybrid: 'satellite',        // 混合（卫星+路网，用卫星+路网图层组合实现）
+  traffic: 'traffic'          // 实时路况（叠加在 standard 上）
+}
+
+// 高德地图样式 ID（主题映射）
+const A_MAP_STYLES = {
+  light: 'amap://styles/normal',
+  dark: 'amap://styles/dark'
+}
+
+export class AMapAdapter extends MapAdapterBase {
+  constructor(container, options = {}) {
+    super(container, options)
+    this._mapTypeMap = { ...A_MAP_MAP_TYPES }
+    this._trafficLayer = null       // 路况图层引用
+    this._satelliteLayer = null     // 卫星图层
+    this._roadnetLayer = null       // 路网图层（用于 hybrid）
+    this._currentLayers = []        // 当前叠加图层
+  }
+
+  getScriptUrl() {
+    if (this.apiUrl) return this.apiUrl
+    if (!this.apiKey) {
+      console.warn('[XtMap] 高德地图需要配置 apiKey')
+      return ''
+    }
+    // 高德 2.0 Web API
+    return `https://webapi.amap.com/maps?v=2.0&key=${encodeURIComponent(this.apiKey)}&plugin=AMap.Scale,AMap.ToolBar`
+  }
+
+  /**
+   * 脚本加载前设置高德 2.0 安全密钥
+   */
+  beforeLoadScript() {
+    const securityJsCode = this.options.securityJsCode || (typeof window !== 'undefined' && window._AMapSecurityConfig && window._AMapSecurityConfig.securityJsCode) || ''
+    if (securityJsCode && typeof window !== 'undefined') {
+      window._AMapSecurityConfig = {
+        securityJsCode: securityJsCode
+      }
+    }
+  }
+
+  isSdkLoaded() {
+    return hasGlobal('AMap') && typeof window.AMap === 'function'
+  }
+
+  async createMap() {
+    const AMap = window.AMap
+    if (!AMap) throw new Error('[XtMap] 高德地图 SDK 未加载')
+
+    const mapOptions = {
+      center: this.center,
+      zoom: this.zoom,
+      mapStyle: A_MAP_STYLES[this.theme] || A_MAP_STYLES.light,
+      viewMode: '2D',
+      resizeEnable: true
+    }
+
+    this.mapInstance = new AMap.Map(this.container, mapOptions)
+
+    // 应用地图类型
+    this._applyMapType(this.mapType)
+
+    // 绑定事件（延迟到地图就绪后）
+    await new Promise((resolve) => {
+      this.mapInstance.on('complete', () => resolve())
+      // 兜底：1秒后强制 resolve
+      setTimeout(resolve, 1500)
+    })
+
+    // 重新绑定已注册事件
+    for (const [eventName, handler] of this.eventHandlers.entries()) {
+      this._bindEvent(eventName, handler)
+    }
+  }
+
+  _applyMapType(type) {
+    if (!this.mapInstance) return
+    const AMap = window.AMap
+    if (!AMap) return
+
+    // 清除所有叠加图层
+    this._clearLayers()
+
+    try {
+      // 设置底图样式
+      this.mapInstance.setMapStyle(A_MAP_STYLES[this.theme] || A_MAP_STYLES.light)
+
+      if (type === 'satellite') {
+        this._satelliteLayer = new AMap.TileLayer.Satellite()
+        this.mapInstance.add(this._satelliteLayer)
+        this._currentLayers.push(this._satelliteLayer)
+      } else if (type === 'hybrid') {
+        // 卫星 + 路网
+        this._satelliteLayer = new AMap.TileLayer.Satellite()
+        this._roadnetLayer = new AMap.TileLayer.RoadNet()
+        this.mapInstance.add([this._satelliteLayer, this._roadnetLayer])
+        this._currentLayers.push(this._satelliteLayer, this._roadnetLayer)
+      } else if (type === 'traffic') {
+        // 路况图层叠加在 standard 上
+        this._trafficLayer = new AMap.TileLayer.Traffic({
+          autoRefresh: true,
+          interval: 180
+        })
+        this.mapInstance.add(this._trafficLayer)
+        this._currentLayers.push(this._trafficLayer)
+      }
+    } catch (e) {
+      console.warn('[XtMap] 设置地图类型失败:', e)
+    }
+  }
+
+  _clearLayers() {
+    if (!this.mapInstance) return
+    try {
+      if (this._currentLayers.length > 0) {
+        this.mapInstance.remove(this._currentLayers)
+      }
+    } catch (e) {
+      // 忽略
+    }
+    this._currentLayers = []
+    this._trafficLayer = null
+    this._satelliteLayer = null
+    this._roadnetLayer = null
+  }
+
+  _applyTheme(theme) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.setMapStyle(A_MAP_STYLES[theme] || A_MAP_STYLES.light)
+      // 主题变更可能影响图层显示，重新应用地图类型
+      this._applyMapType(this.mapType)
+    } catch (e) {
+      console.warn('[XtMap] 设置主题失败:', e)
+    }
+  }
+
+  _applyCenter(center) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.setCenter(center)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyZoom(zoom) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.setZoom(zoom)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  getCenter() {
+    if (this.mapInstance && this.mapInstance.getCenter) {
+      const c = this.mapInstance.getCenter()
+      return [c.lng, c.lat]
+    }
+    return this.center
+  }
+
+  getZoom() {
+    if (this.mapInstance && this.mapInstance.getZoom) {
+      return this.mapInstance.getZoom()
+    }
+    return this.zoom
+  }
+
+  _bindEvent(eventName, handler) {
+    if (!this.mapInstance) return
+    try {
+      // 统一事件名映射
+      const eventMap = {
+        click: 'click',
+        moveend: 'moveend',
+        zoomend: 'zoomend',
+        zoomchange: 'zoomchange',
+        mapmove: 'mapmove',
+        complete: 'complete',
+        resize: 'resize'
+      }
+      const nativeEvent = eventMap[eventName] || eventName
+      this.mapInstance.on(nativeEvent, (e) => {
+        // 统一事件参数格式
+        const normalized = {
+          originalEvent: e,
+          lnglat: e && e.lnglat ? [e.lnglat.lng, e.lnglat.lat] : null
+        }
+        handler(normalized)
+      })
+    } catch (err) {
+      console.warn('[XtMap] 事件绑定失败:', eventName, err)
+    }
+  }
+
+  _unbindEvent(eventName, handler) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.off(eventName, handler)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyResize() {
+    if (this.mapInstance && this.mapInstance.resize) {
+      try {
+        this.mapInstance.resize()
+      } catch (e) {
+        // 忽略
+      }
+    }
+  }
+
+  destroy() {
+    this._clearLayers()
+    super.destroy()
+  }
+}
+
+export default AMapAdapter

package/src/components/xt-map/adapters/baidu.js

@@ -0,0 +1,254 @@
+/**
+ * 百度地图适配器 (BMap / Baidu)
+ * 百度地图 JS API 3.0 支持自定义样式
+ */
+
+import { MapAdapterBase } from './base'
+import { hasGlobal } from '../loaders/script-loader'
+
+// 百度地图类型映射
+const BAIDU_MAP_TYPES = {
+  standard: 'BMAP_NORMAL_MAP',
+  satellite: 'BMAP_SATELLITE_MAP',
+  hybrid: 'BMAP_HYBRID_MAP',
+  traffic: 'BMAP_NORMAL_MAP'    // 路况通过图层叠加
+}
+
+// 百度地图自定义样式 ID（主题）
+// light: 官方 normal 样式
+// dark: 午夜蓝 dark 样式
+const BAIDU_STYLES = {
+  light: { style: 'normal' },
+  dark: { style: 'dark' }
+}
+
+export class BaiduAdapter extends MapAdapterBase {
+  constructor(container, options = {}) {
+    super(container, options)
+    this._mapTypeMap = { ...BAIDU_MAP_TYPES }
+    this._coordType = options.baiduCoordType || 'bd09ll'
+    this._trafficLayer = null
+    this._callbackName = null
+  }
+
+  getScriptUrl() {
+    if (this.apiUrl) return this.apiUrl
+    if (!this.apiKey) {
+      console.warn('[XtMap] 百度地图需要配置 apiKey (ak)')
+      return ''
+    }
+    // 注意：_callbackName 在 beforeLoadScript 中已注册
+    return `https://api.map.baidu.com/api?v=3.0&ak=${encodeURIComponent(this.apiKey)}&callback=${this._callbackName}`
+  }
+
+  /**
+   * 脚本加载前注册百度 SDK 回调函数
+   */
+  beforeLoadScript() {
+    // 生成唯一 callback 名称，支持多实例
+    this._callbackName = `__xt_map_baidu_${Date.now()}_${Math.floor(Math.random() * 100000)}`
+    // 注册全局 callback（百度地图 SDK 加载完成后调用）
+    if (typeof window !== 'undefined') {
+      window[this._callbackName] = () => {
+        // 空实现，仅用于触发 Promise resolve
+      }
+    }
+  }
+
+  isSdkLoaded() {
+    return hasGlobal('BMap') && typeof window.BMap === 'function'
+  }
+
+  async createMap() {
+    const BMap = window.BMap
+    if (!BMap) throw new Error('[XtMap] 百度地图 SDK 未加载')
+
+    const mapOptions = {
+      enableMapClick: false
+    }
+
+    this.mapInstance = new BMap.Map(this.container, mapOptions)
+    this.mapInstance.centerAndZoom(new BMap.Point(this.center[0], this.center[1]), this.zoom)
+    this.mapInstance.enableScrollWheelZoom(true)
+
+    // 应用地图类型
+    this._applyMapType(this.mapType)
+
+    // 应用主题
+    this._applyTheme(this.theme)
+
+    // 等待地图就绪
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    for (const [eventName, handler] of this.eventHandlers.entries()) {
+      this._bindEvent(eventName, handler)
+    }
+  }
+
+  _applyMapType(type) {
+    if (!this.mapInstance || !window.BMap) return
+
+    try {
+      // 清除路况图层
+      if (this._trafficLayer) {
+        try {
+          this.mapInstance.removeTileLayer(this._trafficLayer)
+        } catch (e) {}
+        this._trafficLayer = null
+      }
+
+      if (type === 'satellite') {
+        this.mapInstance.setMapType(window.BMAP_SATELLITE_MAP || 1)
+      } else if (type === 'hybrid') {
+        this.mapInstance.setMapType(window.BMAP_HYBRID_MAP || 2)
+      } else if (type === 'traffic') {
+        this.mapInstance.setMapType(window.BMAP_NORMAL_MAP || 0)
+        // 叠加路况图层
+        try {
+          const BMap = window.BMap
+          this._trafficLayer = new BMap.TrafficLayer()
+          this.mapInstance.addTileLayer(this._trafficLayer)
+        } catch (e) {
+          console.warn('[XtMap] 百度地图加载路况图层失败:', e)
+        }
+      } else {
+        this.mapInstance.setMapType(window.BMAP_NORMAL_MAP || 0)
+      }
+    } catch (e) {
+      console.warn('[XtMap] 百度地图切换地图类型失败:', e)
+    }
+  }
+
+  _applyTheme(theme) {
+    if (!this.mapInstance || !window.BMap) return
+    try {
+      // 百度 3.0 通过 setMapStyle 设置主题样式
+      const styleConfig = BAIDU_STYLES[theme] || BAIDU_STYLES.light
+      if (this.mapInstance.setMapStyleV2) {
+        // 新版 API
+        this.mapInstance.setMapStyleV2({ styleId: styleConfig.style === 'dark' ? 'midnight' : '' })
+      } else if (this.mapInstance.setMapStyle) {
+        // 旧版 API
+        const styleJson = theme === 'dark' ? this._getDarkStyleJson() : null
+        if (styleJson) {
+          this.mapInstance.setMapStyle({ styleJson: styleJson })
+        }
+      }
+    } catch (e) {
+      console.warn('[XtMap] 百度地图设置主题失败:', e)
+    }
+  }
+
+  /**
+   * 简易百度地图 dark 样式 JSON 配置
+   */
+  _getDarkStyleJson() {
+    return [
+      { featureType: 'land', elementType: 'geometry', stylers: { color: '#1a1a1a' } },
+      { featureType: 'water', elementType: 'geometry', stylers: { color: '#0a1a2a' } },
+      { featureType: 'green', elementType: 'geometry', stylers: { color: '#0a2a1a' } },
+      { featureType: 'building', elementType: 'geometry', stylers: { color: '#2a2a2a' } },
+      { featureType: 'highway', elementType: 'geometry', stylers: { color: '#3a3a3a' } },
+      { featureType: 'highway', elementType: 'geometry.stroke', stylers: { color: '#4a4a4a' } },
+      { featureType: 'arterial', elementType: 'geometry', stylers: { color: '#333333' } },
+      { featureType: 'arterial', elementType: 'geometry.stroke', stylers: { color: '#3d3d3d' } },
+      { featureType: 'local', elementType: 'geometry', stylers: { color: '#2a2a2a' } },
+      { featureType: 'railway', elementType: 'geometry', stylers: { color: '#3a3a3a' } },
+      { featureType: 'subway', elementType: 'geometry', stylers: { color: '#3a3a3a' } },
+      { featureType: 'boundary', elementType: 'geometry', stylers: { color: '#666666' } },
+      { featureType: 'district', elementType: 'labels.text.fill', stylers: { color: '#888888' } },
+      { featureType: 'poi', elementType: 'labels', stylers: { visibility: 'off' } }
+    ]
+  }
+
+  _applyCenter(center) {
+    if (!this.mapInstance || !window.BMap) return
+    try {
+      this.mapInstance.centerAndZoom(new window.BMap.Point(center[0], center[1]), this.zoom)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyZoom(zoom) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.setZoom(zoom)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  getCenter() {
+    if (this.mapInstance && this.mapInstance.getCenter) {
+      const c = this.mapInstance.getCenter()
+      if (c) return [c.lng, c.lat]
+    }
+    return this.center
+  }
+
+  getZoom() {
+    if (this.mapInstance && this.mapInstance.getZoom) {
+      return this.mapInstance.getZoom()
+    }
+    return this.zoom
+  }
+
+  _bindEvent(eventName, handler) {
+    if (!this.mapInstance) return
+    try {
+      const eventMap = {
+        click: 'click',
+        moveend: 'moveend',
+        zoomend: 'zoomend',
+        zoomchange: 'zoomend',
+        mapmove: 'movestart'
+      }
+      const nativeEvent = eventMap[eventName] || eventName
+      this.mapInstance.addEventListener(nativeEvent, (e) => {
+        const normalized = {
+          originalEvent: e,
+          lnglat: e && e.point ? [e.point.lng, e.point.lat] : null
+        }
+        handler(normalized)
+      })
+    } catch (err) {
+      console.warn('[XtMap] 百度地图事件绑定失败:', eventName, err)
+    }
+  }
+
+  _unbindEvent(eventName, handler) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.removeEventListener(eventName, handler)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyResize() {
+    if (this.mapInstance && this.mapInstance.enableResize) {
+      try {
+        // 百度地图默认启用 resize，无需手动调用
+        if (typeof this.mapInstance.checkResize === 'function') {
+          this.mapInstance.checkResize()
+        }
+      } catch (e) {
+        // 忽略
+      }
+    }
+  }
+
+  destroy() {
+    if (this._callbackName && typeof window !== 'undefined') {
+      try {
+        delete window[this._callbackName]
+      } catch (e) {
+        // 忽略
+      }
+    }
+    super.destroy()
+  }
+}
+
+export default BaiduAdapter