@ebiz/designer-components 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizMap.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="ebiz-map">
+    <div v-if="!apiKey && !manualInput" class="manual-input-tip">
+      <div class="tip-content">
+        <p>请输入高德地图API Key，或者</p>
+        <button class="switch-btn" @click="manualInput = true">手动输入经纬度</button>
+        <p class="tip-link">
+          <a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">
+            前往高德地图坐标拾取器获取经纬度
+          </a>
+        </p>
+      </div>
+    </div>
+    
+    <div v-if="manualInput" class="manual-input-container">
+      <div class="input-group">
+        <label>经度：</label>
+        <input 
+          type="number" 
+          step="0.000001" 
+          v-model.number="longitude" 
+          @change="updateCoordinates"
+          placeholder="请输入经度"
+        />
+      </div>
+      <div class="input-group">
+        <label>纬度：</label>
+        <input 
+          type="number" 
+          step="0.000001" 
+          v-model.number="latitude" 
+          @change="updateCoordinates"
+          placeholder="请输入纬度"
+        />
+      </div>
+      <div class="input-actions">
+        <button class="switch-btn" @click="manualInput = false" v-if="apiKey">切换到地图模式</button>
+      </div>
+      <p class="tip-link">
+        <a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">
+          前往高德地图坐标拾取器获取经纬度
+        </a>
+      </p>
+    </div>
+    
+    <div v-if="apiKey && !manualInput">
+      <!-- 搜索框 -->
+      <div class="search-container">
+        <!-- <div class="search-input-group">
+          <input 
+            type="text" 
+            v-model="searchKeyword" 
+            @keyup.enter="searchPlace"
+            placeholder="搜索位置" 
+            class="search-input"
+          />
+          <button class="search-btn" @click="searchPlace">搜索</button>
+        </div> -->
+        <!-- 搜索结果列表 -->
+        <!-- <div class="search-results" v-if="searchResults.length > 0">
+          <div 
+            v-for="(item, index) in searchResults" 
+            :key="index" 
+            class="search-result-item"
+            @click="selectSearchResult(item)"
+          >
+            <div class="result-name">{{ item.name }}</div>
+            <div class="result-address">{{ item.address }}</div>
+          </div>
+        </div> -->
+      </div>
+      
+      <div ref="mapContainer" class="map-container"></div>
+      <div v-if="showMarkerInfo && modelValue" class="marker-info">
+        经度: {{ modelValue[0] }}, 纬度: {{ modelValue[1] }}
+      </div>
+      <div class="map-actions">
+        <button class="switch-btn" @click="manualInput = true">切换到手动输入</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue';
+
+const props = defineProps({
+  /**
+   * 地图中心点经纬度
+   */
+  center: {
+    type: Array,
+    default: () => [116.397428, 39.90923]
+  },
+  /**
+   * 地图缩放级别
+   */
+  zoom: {
+    type: Number,
+    default: 11
+  },
+  /**
+   * 地图类型
+   */
+  mapType: {
+    type: String,
+    default: 'amap',
+    validator: (value) => ['amap', 'bmap'].includes(value)
+  },
+  /**
+   * 地图高度
+   */
+  height: {
+    type: String,
+    default: '400px'
+  },
+  /**
+   * 是否显示标记点信息
+   */
+  showMarkerInfo: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 地图 API Key
+   */
+  apiKey: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 经纬度值
+   */
+  modelValue: {
+    type: Array,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'markerClick', 'mapClick']);
+
+const mapContainer = ref(null);
+const manualInput = ref(!props.apiKey);
+const longitude = ref(props.modelValue ? props.modelValue[0] : props.center[0]);
+const latitude = ref(props.modelValue ? props.modelValue[1] : props.center[1]);
+const mapLoadError = ref(false);
+
+// 搜索相关
+const searchKeyword = ref('');
+const searchResults = ref([]);
+let placeSearch = null; // 高德地图搜索服务
+
+let map = null;
+let marker = null;
+let amapScript = null;
+
+// 更新坐标
+const updateCoordinates = () => {
+  if (longitude.value && latitude.value) {
+    emit('update:modelValue', [longitude.value, latitude.value]);
+  }
+};
+
+// 添加标记点
+const addMarker = (position) => {
+  if (marker) {
+    map.remove(marker);
+  }
+  marker = new window.AMap.Marker({
+    position: position,
+    draggable: true
+  });
+  map.add(marker);
+  
+  // 拖拽结束后更新坐标
+  marker.on('dragend', () => {
+    const position = marker.getPosition();
+    const lnglat = [position.getLng(), position.getLat()];
+    emit('update:modelValue', lnglat);
+    longitude.value = lnglat[0];
+    latitude.value = lnglat[1];
+  });
+  
+  // 点击标记点事件
+  marker.on('click', () => {
+    emit('markerClick', position);
+  });
+};
+
+// 搜索位置
+const searchPlace = () => {
+  if (!searchKeyword.value || !placeSearch) return;
+  
+  placeSearch.search(searchKeyword.value, (status, result) => {
+    if (status === 'complete' && result.info === 'OK') {
+      const pois = result.poiList?.pois || [];
+      searchResults.value = pois.map(poi => ({
+        name: poi.name,
+        address: poi.address,
+        location: [poi.location.lng, poi.location.lat]
+      }));
+    } else {
+      searchResults.value = [];
+    }
+  });
+};
+
+// 选择搜索结果
+const selectSearchResult = (item) => {
+  if (item.location && item.location.length === 2) {
+    const lnglat = item.location;
+    emit('update:modelValue', lnglat);
+    emit('mapClick', lnglat);
+    addMarker(lnglat);
+    map.setCenter(lnglat);
+    searchResults.value = []; // 清空搜索结果
+    searchKeyword.value = item.name; // 更新搜索框内容为选中的地点名称
+    
+    // 同步更新手动输入值
+    longitude.value = lnglat[0];
+    latitude.value = lnglat[1];
+  }
+};
+
+// 监听modelValue更新经纬度输入框
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    longitude.value = newVal[0];
+    latitude.value = newVal[1];
+  }
+}, { deep: true });
+
+// 加载高德地图脚本
+const loadAMapScript = () => {
+  return new Promise((resolve, reject) => {
+    if (window.AMap) {
+      resolve(window.AMap);
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=${props.apiKey}&plugin=AMap.PlaceSearch`;
+    script.onerror = reject;
+    script.onload = () => {
+      resolve(window.AMap);
+    };
+    document.head.appendChild(script);
+    amapScript = script;
+  });
+};
+
+// 清理地图实例
+const cleanupMap = () => {
+  if (map) {
+    map.destroy();
+    map = null;
+  }
+};
+
+// 初始化高德地图
+const initAMap = async () => {
+  if (!props.apiKey || !mapContainer.value) return;
+  
+  try {
+    cleanupMap(); // 清理之前的地图实例
+    mapLoadError.value = false;
+    
+    await loadAMapScript();
+    
+    // 初始化地图
+    map = new window.AMap.Map(mapContainer.value, {
+      zoom: props.zoom,
+      center: props.modelValue || props.center,
+      resizeEnable: true, // 允许缩放
+      viewMode: '2D' // 设置为2D模式，提高性能
+    });
+
+    // 添加标记点
+    if (props.modelValue) {
+      addMarker(props.modelValue);
+    }
+
+    // 点击地图事件
+    map.on('click', (e) => {
+      const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
+      emit('update:modelValue', lnglat);
+      emit('mapClick', lnglat);
+      addMarker(lnglat);
+      
+      // 同步更新手动输入值
+      longitude.value = lnglat[0];
+      latitude.value = lnglat[1];
+    });
+
+    // 添加高德地图内置搜索控件
+    if (props.enableSearch) {
+      // 使用nextTick确保DOM已更新
+      nextTick(() => {
+        initSearchControl();
+      });
+    }
+  } catch (error) {
+    // 出错时设置错误状态并切换到手动输入模式
+    mapLoadError.value = true;
+    manualInput.value = true;
+  }
+};
+
+// 监听 center 变化
+watch(() => props.center, (newVal) => {
+  if (map && newVal) {
+    map.setCenter(newVal);
+  }
+}, { deep: true });
+
+// 监听 zoom 变化
+watch(() => props.zoom, (newVal) => {
+  if (map) {
+    map.setZoom(newVal);
+  }
+});
+
+// 监听 manualInput 变化，切换模式后重新初始化地图
+watch(manualInput, (newVal) => {
+  if (!newVal && props.apiKey) {
+    // 切回地图模式
+    setTimeout(() => {
+      initAMap();
+    }, 0);
+  }
+});
+
+// 监听 apiKey 变化，有Key后可以使用地图
+watch(() => props.apiKey, (newVal) => {
+  if (newVal && !manualInput.value) {
+    setTimeout(() => {
+      initAMap();
+    }, 0);
+  }
+});
+
+onMounted(() => {
+  if (props.apiKey && !manualInput.value && props.mapType === 'amap') {
+    initAMap();
+  }
+  
+  // 如果有初始值，更新输入框
+  if (props.modelValue) {
+    longitude.value = props.modelValue[0];
+    latitude.value = props.modelValue[1];
+  }
+});
+
+onBeforeUnmount(() => {
+  if (map) {
+    map.destroy();
+  }
+  
+  // 清理脚本
+  if (amapScript && amapScript.parentNode) {
+    amapScript.parentNode.removeChild(amapScript);
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-map {
+  position: relative;
+  width: 100%;
+  min-height: 150px;
+}
+
+.map-container {
+  width: 100%;
+  height: v-bind(height);
+}
+
+.marker-info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 10;
+}
+
+.manual-input-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 200px;
+  background-color: #f5f5f5;
+  border: 1px dashed #ccc;
+  border-radius: 4px;
+}
+
+.tip-content {
+  text-align: center;
+}
+
+.manual-input-container {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.input-group {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+}
+
+.input-group label {
+  width: 60px;
+  margin-right: 10px;
+}
+
+.input-group input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.input-actions {
+  margin-bottom: 15px;
+}
+
+.switch-btn {
+  padding: 6px 12px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.switch-btn:hover {
+  background-color: #40a9ff;
+}
+
+.map-actions {
+  margin-top: 10px;
+}
+
+.tip-link {
+  margin-top: 10px;
+  font-size: 13px;
+}
+
+.tip-link a {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+.tip-link a:hover {
+  text-decoration: underline;
+}
+
+/* 搜索框样式 */
+.search-container {
+  position: relative;
+  margin-bottom: 10px;
+  z-index: 20;
+}
+
+.search-input-group {
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px 0 0 4px;
+  font-size: 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.search-btn {
+  padding: 8px 12px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.search-btn:hover {
+  background-color: #40a9ff;
+}
+
+/* 搜索结果列表 */
+.search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 30;
+}
+
+.search-result-item {
+  padding: 10px 15px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+}
+
+.search-result-item:last-child {
+  border-bottom: none;
+}
+
+.search-result-item:hover {
+  background-color: #f5f5f5;
+}
+
+.result-name {
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+
+.result-address {
+  font-size: 12px;
+  color: #666;
+}
+</style> 

package/src/components/EbizTableSort.vue

@@ -20,8 +20,7 @@
               </div>
             </div>
             <div class="sort-footer">
-              <t-button theme="default" variant="outline" @click="addSortItem"
-                v-if="sortItems.length < maxSortItems">
+              <t-button theme="default" variant="outline" @click="addSortItem" v-if="sortItems.length < maxSortItems">
                 <template #icon>
                   <t-icon name="add" />
                 </template>
@@ -33,7 +32,7 @@
       </template>
       <t-button block variant="outline" :title="title">
         <template #icon>
-          <t-icon :name="icon" />
+          <t-icon name="filter"></t-icon>
         </template>
         <div v-if="buttonText">
           {{ buttonText }}

package/src/components/EbizTdesignButtonDialog.vue

@@ -1,16 +1,10 @@
 <template>
   <div class="ebiz-tdesign-button-dialog">
-    <t-button
-      :theme="buttonTheme"
-      :variant="buttonVariant"
-      :size="buttonSize"
-      :block="buttonBlock"
-      :shape="buttonShape"
-      :disabled="buttonDisabled"
-      :loading="buttonLoading"
-      :icon="buttonIcon"
-      @click="handleButtonClick"
-    >
+    <t-button :theme="buttonTheme" :variant="buttonVariant" :size="buttonSize" :block="buttonBlock" :shape="buttonShape"
+      :disabled="buttonDisabled" :loading="buttonLoading" @click="handleButtonClick">
+      <template v-if="buttonIcon" #icon>
+        <t-icon :name="buttonIcon"></t-icon>
+      </template>
       <template v-if="$slots.buttonContent">
         <slot name="buttonContent"></slot>
       </template>
@@ -19,23 +13,11 @@
       </template>
     </t-button>
 
-    <t-dialog
-      v-model:visible="dialogVisible"
-      :header="title || computedTitle"
-      :width="dialogWidth"
-      :top="dialogTop"
-      :attach="dialogAttach"
-      :destroy-on-close="dialogDestroyOnClose"
-      :mode="dialogMode"
-      :placement="dialogPlacement"
-      :show-overlay="dialogShowOverlay"
-      :close-on-esc-keydown="dialogCloseOnEscKeydown"
-      :close-on-overlay-click="dialogCloseOnOverlayClick"
-      :show-footer="dialogShowFooter"
-      @close="handleDialogClose"
-      @confirm="handleDialogConfirm"
-      @cancel="handleDialogCancel"
-    >
+    <t-dialog v-model:visible="dialogVisible" :header="title || computedTitle" :width="dialogWidth" :top="dialogTop"
+      :attach="dialogAttach" :destroy-on-close="dialogDestroyOnClose" :mode="dialogMode" :placement="dialogPlacement"
+      :show-overlay="dialogShowOverlay" :close-on-esc-keydown="dialogCloseOnEscKeydown"
+      :close-on-overlay-click="dialogCloseOnOverlayClick" :show-footer="dialogShowFooter" @close="handleDialogClose"
+      @confirm="handleDialogConfirm" @cancel="handleDialogCancel">
       <template #header>
         <slot name="header">
           <div :class="['dialog-header', dialogType === 'delete' ? 'dialog-header-delete' : '']">
@@ -53,14 +35,14 @@
         </slot>
       </template>
 
-      <template #footer>
+      <!-- <template #footer>
         <slot name="footer">
           <t-space>
             <t-button v-if="cancelText" theme="default" @click="handleDialogCancel">{{ cancelText }}</t-button>
             <t-button v-if="confirmText" theme="primary" :loading="apiLoading" @click="handleDialogConfirm">{{ confirmText }}</t-button>
           </t-space>
         </slot>
-      </template>
+      </template> -->
     </t-dialog>
   </div>
 </template>

package/src/components/TdesignButton.vue

@@ -12,6 +12,7 @@
         :theme="theme"
         :type="type"
         :variant="variant"
+        :icon="icon"
         @click="handleClick"
     >
         <!-- 图标插槽 -->
@@ -115,6 +116,11 @@ defineProps({
         type: String,
         default: 'base',
         validator: (val) => ['base', 'outline', 'dashed', 'text'].includes(val)
+    },
+    // 按钮图标
+    icon: {
+        type: String,
+        default: ''
     }
 });