neo-cmp-cli 1.8.2 → 1.8.3

package/src/template/echarts-custom-cmp-template/src/components/mapWidget/index.tsx

@@ -1,385 +0,0 @@
-import * as React from 'react';
-import { getUrlParam } from '../../utils/url';
-import './style.scss';
-
-// 扩展 Window 接口以支持 AMap
-declare global {
-  interface Window {
-    AMap: any;
-  }
-}
-
-interface MapWidgetProps {
-  // 经度
-  longitude?: number;
-  // 纬度
-  latitude?: number;
-  // 位置名称（支持地址搜索）
-  locationName?: string;
-  // 地图缩放级别 (3-18)
-  zoom?: number;
-  // 标记点标题
-  markerTitle?: string;
-  // 地图高度
-  height?: number;
-  data?: any;
-}
-
-interface MapWidgetState {
-  isLoading: boolean;
-  error?: string;
-  currentAddress?: string;
-  urlLocationName?: string;
-}
-
-/**
- * 地图展示组件
- * 支持传入经纬度坐标或位置名称，展示对应的地图区域并标注当前位置
- * 基于高德地图API实现
- */
-export default class MapWidget extends React.PureComponent<
-  MapWidgetProps,
-  MapWidgetState
-> {
-  private map: any = null;
-
-  private AMap: any = null;
-
-  private marker: any = null;
-
-  private mapContainer: string = 'map-widget-container';
-
-  private locationName?: string = '';
-
-  constructor(props: MapWidgetProps) {
-    super(props);
-
-    this.state = {
-      isLoading: false,
-      error: undefined,
-      currentAddress: '',
-      urlLocationName: getUrlParam('location') || props.locationName || '',
-    };
-  }
-
-  componentDidMount() {
-    this.loadAMapScript();
-    // 监听 URL 变化
-    window.addEventListener('popstate', this.handleUrlChange);
-    window.addEventListener('hashchange', this.handleUrlChange);
-  }
-
-  componentDidUpdate(prevProps: Readonly<MapWidgetProps>): void {
-    const { longitude, latitude, locationName, zoom = 14 } = this.props;
-    const {
-      longitude: prevLongitude,
-      latitude: prevLatitude,
-      zoom: prevZoom = 14,
-      locationName: prevLocationName,
-    } = prevProps;
-    if (
-      longitude !== prevLongitude ||
-      latitude !== prevLatitude ||
-      locationName !== prevLocationName ||
-      zoom !== prevZoom
-    ) {
-      this.initMap(locationName);
-    }
-  }
-
-  componentWillUnmount() {
-    // 移除 URL 监听器
-    window.removeEventListener('popstate', this.handleUrlChange);
-    window.removeEventListener('hashchange', this.handleUrlChange);
-
-    if (this.map) {
-      this.map.destroy();
-      this.map = null;
-    }
-  }
-
-  /**
-   * 处理 URL 变化事件
-   */
-  handleUrlChange = () => {
-    const newLocationName = getUrlParam('location');
-
-    // 如果 URL 中的 location 参数发生变化，则重新初始化地图
-    if (newLocationName !== this.locationName) {
-      this.setState(
-        {
-          urlLocationName: newLocationName,
-          error: undefined,
-        },
-        () => {
-          // 重新初始化地图
-          this.initMap(newLocationName);
-        },
-      );
-    }
-  };
-
-  /**
-   * 动态加载高德地图脚本
-   */
-  loadAMapScript = () => {
-    // 检查是否已加载
-    if (window.AMap) {
-      this.AMap = window.AMap;
-      this.initMap();
-      return;
-    }
-
-    this.setState({
-      isLoading: true,
-    });
-
-    // 使用 NeoCRM 部署的高德地图脚本: 使用企业内部部署的高德地图脚本，无需单独申请 API Key
-    const scriptUrl = 'https://neors.ingageapp.com/base/js/amap_2.0.5.21.js';
-    // 备用方案：使用高德官方API（需要申请key）
-    // const amapKey = 'your-amap-key-here';
-    // const scriptUrl = `https://webapi.amap.com/maps?v=2.0&key=${amapKey}&plugin=AMap.Geocoder,AMap.Marker`;
-
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = scriptUrl;
-    script.async = true;
-
-    script.onload = () => {
-      this.AMap = window.AMap;
-      this.initMap();
-
-      this.setState({
-        isLoading: false,
-      });
-    };
-
-    script.onerror = () => {
-      this.setState({
-        isLoading: false,
-        error: '地图加载失败，请检查网络连接或配置地图API Key',
-      });
-    };
-
-    document.head.appendChild(script);
-  };
-
-  /**
-   * 初始化地图
-   */
-  initMap = (_locationName?: string) => {
-    const { longitude, latitude, locationName, zoom = 14 } = this.props;
-    const { urlLocationName } = this.state;
-
-    // 优先使用 URL 中的 location 参数
-    const finalLocationName = _locationName || urlLocationName || locationName;
-
-    this.locationName = finalLocationName;
-
-    // 如果提供了位置名称（URL 或 props），先进行地理编码
-    if (finalLocationName) {
-      this.geocodeAddress(finalLocationName, zoom);
-    }
-    // 如果提供了经纬度，直接初始化地图
-    else if (longitude !== undefined && latitude !== undefined) {
-      this.createMap([longitude, latitude], zoom);
-    }
-    // 默认显示北京天安门
-    else {
-      this.createMap([116.397428, 39.90923], zoom);
-    }
-  };
-
-  /**
-   * 地理编码：先将地址转换为经纬度，再创建地图
-   */
-  geocodeAddress = (address: string, zoom: number) => {
-    if (!this.AMap) {
-      return;
-    }
-
-    // 动态加载 Geocoder 插件
-    this.AMap.plugin('AMap.Geocoder', () => {
-      const geocoder = new this.AMap.Geocoder();
-
-      geocoder.getLocation(address, (status: string, result: any) => {
-        if (status === 'complete' && result.geocodes.length > 0) {
-          const location = result.geocodes[0].location;
-          this.createMap([location.lng, location.lat], zoom);
-          this.setState({
-            currentAddress: result.geocodes[0].formattedAddress,
-          });
-        } else {
-          this.setState({
-            error: `地址解析失败: ${address}`,
-          });
-          // 使用默认位置
-          this.createMap([116.397428, 39.90923], zoom);
-        }
-      });
-    });
-  };
-
-  /**
-   * 创建地图实例
-   */
-  createMap = (center: [number, number], zoom: number) => {
-    if (!this.AMap) {
-      return;
-    }
-
-    try {
-      // 创建地图实例
-      this.map = new this.AMap.Map(this.mapContainer, {
-        zoom,
-        center,
-        resizeEnable: true,
-        viewMode: '2D',
-      });
-
-      // 添加标记点
-      this.addMarker(center);
-
-      // 获取当前位置的地址信息
-      this.getAddressByLocation(center);
-    } catch (error) {
-      console.log('地图初始化失败 / error:', error);
-      this.setState({
-        error: '地图初始化失败',
-      });
-    }
-  };
-
-  /**
-   * 添加标记点
-   */
-  addMarker = (position: [number, number]) => {
-    if (!this.AMap || !this.map) {
-      return;
-    }
-
-    const { markerTitle } = this.props;
-
-    // 移除已存在的标记
-    if (this.marker) {
-      this.map.remove(this.marker);
-    }
-
-    // 创建自定义红色图标
-    const redIcon = new this.AMap.Icon({
-      size: new this.AMap.Size(50, 68),
-      image:
-        '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
-      imageSize: new this.AMap.Size(50, 68),
-    });
-
-    // 创建标记点（红色）
-    this.marker = new this.AMap.Marker({
-      position,
-      title: markerTitle || '当前位置',
-      map: this.map,
-      anchor: 'bottom-center',
-      icon: redIcon,
-    });
-
-    // 点击标记显示信息窗体
-    this.marker.on('click', () => {
-      const infoWindow = new this.AMap.InfoWindow({
-        content: `<div class="map-info-window">
-          <div class="info-title">${markerTitle || '当前位置'}</div>
-          <div class="info-address">${
-            this.state.currentAddress || '正在获取地址...'
-          }</div>
-        </div>`,
-        offset: new this.AMap.Pixel(0, -30),
-      });
-      infoWindow.open(this.map, position);
-    });
-  };
-
-  /**
-   * 逆地理编码：根据经纬度获取地址信息
-   */
-  getAddressByLocation = (location: [number, number]) => {
-    if (!this.AMap) {
-      return;
-    }
-
-    // 动态加载 Geocoder 插件
-    this.AMap.plugin('AMap.Geocoder', () => {
-      const geocoder = new this.AMap.Geocoder();
-
-      geocoder.getAddress(location, (status: string, result: any) => {
-        if (status === 'complete' && result.regeocode) {
-          this.setState({
-            currentAddress: result.regeocode.formattedAddress,
-          });
-        }
-      });
-    });
-  };
-
-  render() {
-    const { height = 400, data } = this.props;
-    const { isLoading, error } = this.state;
-
-    const curAmisData = data || {};
-    const systemInfo = curAmisData.__NeoSystemInfo || {};
-
-    console.log('this.props:', this.props);
-
-    return (
-      <div className="map-widget-wrapper">
-        {/* 
-          // 地图头部: 显示地图标题和当前位置地址
-        <div className="map-widget-header">
-          <h3 className="map-widget-title">
-            地图展示
-            {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
-          </h3>
-          {this.state.currentAddress && (
-            <div className="map-widget-address">
-              <span className="address-icon">📍</span>
-              <span className="address-text">{this.state.currentAddress}</span>
-            </div>
-          )}
-        </div>
-        */}
-        <div className="map-widget-container-wrapper" style={{ height }}>
-          {isLoading && (
-            <div className="map-loading">
-              <div className="loading-spinner"></div>
-              <div className="loading-text">地图加载中...</div>
-            </div>
-          )}
-
-          {error && (
-            <div className="map-error">
-              <div className="error-icon">⚠️</div>
-              <div className="error-text">{error}</div>
-            </div>
-          )}
-
-          <div
-            id={this.mapContainer}
-            className="map-widget-container"
-            style={{ display: isLoading || error ? 'none' : 'block' }}
-          ></div>
-        </div>
-
-        <div className="map-widget-footer">
-          <div className="map-info">
-            <span className="info-label">经度：</span>
-            <span className="info-value">{this.props.longitude || '-'}</span>
-            <span className="info-separator">|</span>
-            <span className="info-label">纬度：</span>
-            <span className="info-value">{this.props.latitude || '-'}</span>
-            <span className="info-separator">|</span>
-            <span className="info-label">缩放：</span>
-            <span className="info-value">{this.props.zoom || 14}</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

package/src/template/echarts-custom-cmp-template/src/components/mapWidget/model.ts

@@ -1,107 +0,0 @@
-/**
- * @file 地图组件对接编辑器的描述文件
- */
-export class MapWidgetModel {
-  /**
-   * cmpType 为自定义组件名称，用于标识组件的唯一性
-   * 在构建时根据当前组件目录名称自动生成
-   */
-  // cmpType: string = 'map-widget';
-
-  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
-  label: string = '地图组件';
-
-  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
-  description: string = '地图展示组件，支持传入经纬度或地址名称';
-
-  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
-  // tags: string[] = ['自定义组件'];
-
-  /** 
-   * 用于设置组件支持的页面类型
-   * 
-   * 当前 NeoCRM 平台存在的页面类型：
-   * all:	1	全页面
-   * indexPage:	2	首页
-   * entityListPage:	3	实体列表页
-   * entityFormPage:	4	实体表单页
-   * entityDetailPage:	5	实体详情页
-   * customPage:	6	自定义页面
-   * bizPage:	7	业务页面
-   */
-  // targetPage: string[] = ['customPage'];
-
-  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
-  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/map.svg';
-
-  // 初次插入页面的默认属性数据
-  defaultComProps = {
-    label: '地图组件',
-    // longitude: 116.397428, // 北京天安门经度
-    // latitude: 39.90923, // 北京天安门纬度
-    locationName: '北京市天安门广场', // 位置名称（可选）
-    zoom: 14, // 缩放级别
-    markerTitle: '当前位置', // 标记点标题
-    height: 400, // 地图高度
-  };
-
-  /**
-   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
-   */
-  propsSchema = [
-    {
-      type: 'text',
-      name: 'locationName',
-      label: '位置名称',
-      placeholder: '例如：北京市天安门广场',
-      description: '输入地址名称自动定位（优先级高于经纬度）',
-    },
-    {
-      type: 'number',
-      name: 'longitude',
-      label: '经度',
-      // value: 116.397428,
-      min: -180,
-      max: 180,
-      step: 0.000001,
-      precision: 6,
-    },
-    {
-      type: 'number',
-      name: 'latitude',
-      label: '纬度',
-      // value: 39.90923,
-      min: -90,
-      max: 90,
-      step: 0.000001,
-      precision: 6,
-    },
-    {
-      type: 'text',
-      name: 'markerTitle',
-      label: '标记点标题',
-      value: '当前位置',
-    },
-    {
-      type: 'number',
-      name: 'zoom',
-      label: '缩放级别',
-      value: 14,
-      min: 3,
-      max: 18,
-      description: '地图缩放级别，3-18之间，数值越大越详细',
-    },
-    {
-      type: 'number',
-      name: 'height',
-      label: '地图高度',
-      value: 400,
-      min: 200,
-      max: 800,
-      step: 50,
-      description: '地图容器的高度（像素）',
-    },
-  ];
-}
-
-export default MapWidgetModel;

package/src/template/echarts-custom-cmp-template/src/components/mapWidget/style.scss

@@ -1,192 +0,0 @@
-// 地图组件样式文件
-.map-widget-wrapper {
-  width: 100%;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-
-  .map-widget-header {
-    padding: 16px 20px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: #fff;
-
-    .map-widget-title {
-      margin: 0 0 8px 0;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .map-widget-address {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      opacity: 0.95;
-
-      .address-icon {
-        margin-right: 6px;
-        font-size: 16px;
-      }
-
-      .address-text {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .map-widget-container-wrapper {
-    position: relative;
-    background: #f5f5f5;
-
-    .map-widget-container {
-      width: 100%;
-      height: 100%;
-    }
-
-    .map-loading {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      background: #fafafa;
-
-      .loading-spinner {
-        width: 40px;
-        height: 40px;
-        border: 4px solid #e0e0e0;
-        border-top-color: #667eea;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-      }
-
-      .loading-text {
-        margin-top: 16px;
-        color: #666;
-        font-size: 14px;
-      }
-    }
-
-    .map-error {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      background: #fff5f5;
-
-      .error-icon {
-        font-size: 48px;
-        margin-bottom: 16px;
-      }
-
-      .error-text {
-        color: #f56c6c;
-        font-size: 14px;
-        text-align: center;
-        padding: 0 20px;
-      }
-    }
-  }
-
-  .map-widget-footer {
-    padding: 12px 20px;
-    background: #fafafa;
-    border-top: 1px solid #e8e8e8;
-
-    .map-info {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      color: #666;
-
-      .info-label {
-        color: #999;
-        margin-right: 4px;
-      }
-
-      .info-value {
-        color: #333;
-        font-weight: 500;
-      }
-
-      .info-separator {
-        margin: 0 12px;
-        color: #d9d9d9;
-      }
-    }
-  }
-
-  // 信息窗体样式
-  .map-info-window {
-    padding: 12px;
-    min-width: 200px;
-
-    .info-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 8px;
-    }
-
-    .info-address {
-      font-size: 12px;
-      color: #666;
-      line-height: 1.5;
-    }
-  }
-}
-
-// 加载动画
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-// 响应式适配
-@media (max-width: 768px) {
-  .map-widget-wrapper {
-    .map-widget-header {
-      padding: 12px 16px;
-
-      .map-widget-title {
-        font-size: 16px;
-      }
-
-      .map-widget-address {
-        font-size: 12px;
-      }
-    }
-
-    .map-widget-footer {
-      padding: 10px 16px;
-
-      .map-info {
-        font-size: 11px;
-
-        .info-separator {
-          margin: 0 8px;
-        }
-      }
-    }
-  }
-}
-
-// 高德地图样式覆盖
-.amap-logo,
-.amap-copyright {
-  display: none !important;
-}
-
-.amap-marker-label {
-  border: none;
-  background-color: transparent;
-}