neo-cmp-cli 1.3.6 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "前端脚手架：自定义组件开发工具，支持react 和 vue2.0技术栈。",
   "keywords": [
     "neo-cli",

package/src/template/antd-custom-cmp-template/package.json

@@ -37,7 +37,7 @@
     "url": "https://github.com/wibetter/antd-custom-cmp-template/issues"
   },
   "dependencies": {
-    "neo-register": "^1.0.3",
+    "neo-register": "^1.0.5",
     "antd": "4.9.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
-    "neo-cmp-cli": "^1.3.5",
+    "neo-cmp-cli": "^1.3.7",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/echarts-custom-cmp-template/package.json

@@ -37,7 +37,7 @@
     "url": "https://github.com/wibetter/echarts-custom-cmp-template/issues"
   },
   "dependencies": {
-    "neo-register": "^1.0.3",
+    "neo-register": "^1.0.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "echarts": "^5.5.1"
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
-    "neo-cmp-cli": "^1.3.5",
+    "neo-cmp-cli": "^1.3.7",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",

package/src/template/neo-custom-cmp-template/package.json

@@ -38,7 +38,7 @@
     "url": "https://github.com/wibetter/neo-custom-cmp-template/issues"
   },
   "dependencies": {
-    "neo-register": "^1.0.3",
+    "neo-register": "^1.0.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "axios": "^0.27.2",
@@ -52,7 +52,7 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
     "@types/axios": "^0.14.0",
-    "neo-cmp-cli": "^1.3.5",
+    "neo-cmp-cli": "^1.3.7",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/neo-custom-cmp-template/src/assets/img/custom-form.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760606213824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M258.133333 128A106.666667 106.666667 0 0 0 362.666667 213.333333h298.666666a106.666667 106.666667 0 0 0 104.533334-85.333333h87.424A128 128 0 0 1 981.333333 255.744v597.845333A127.872 127.872 0 0 1 853.290667 981.333333H170.666667A128 128 0 0 1 42.666667 853.589333V255.744A127.872 127.872 0 0 1 170.709333 128H258.133333zM298.666667 384a42.666667 42.666667 0 1 0 0 85.333333h256a42.666667 42.666667 0 0 0 0-85.333333H298.666667z m0 170.666667a42.666667 42.666667 0 0 0 0 85.333333h426.666666a42.666667 42.666667 0 0 0 0-85.333333H298.666667z m0 170.666666a42.666667 42.666667 0 0 0 0 85.333334h256a42.666667 42.666667 0 0 0 0-85.333334H298.666667zM362.666667 42.666667h298.666666a64 64 0 0 1 0 128h-298.666666a64 64 0 0 1 0-128z" p-id="2397" fill="#0764f5"></path></svg>

package/src/template/neo-custom-cmp-template/src/assets/img/data-list.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1759212323849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3505" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M202.8 408.1c-55 0-99.7 44.7-99.7 99.7s44.7 99.7 99.7 99.7c40.7 0 75.8-24.6 91.3-59.7h639v-80h-639c-15.5-35.1-50.6-59.7-91.3-59.7z m0 157c-31.6 0-57.3-25.7-57.3-57.3 0-31.6 25.7-57.3 57.3-57.3 31.6 0 57.3 25.7 57.3 57.3 0 31.6-25.7 57.3-57.3 57.3zM202.8 739.3c-55 0-99.7 44.7-99.7 99.7s44.7 99.7 99.7 99.7c40.7 0 75.8-24.6 91.3-59.7h639v-80h-639c-15.5-35.1-50.6-59.7-91.3-59.7z m0 157c-31.6 0-57.3-25.7-57.3-57.3 0-31.6 25.7-57.3 57.3-57.3 31.6 0 57.3 25.7 57.3 57.3 0 31.6-25.7 57.3-57.3 57.3zM295.1 149.5c-14.9-36.4-50.6-62.1-92.3-62.1-55 0-99.7 44.7-99.7 99.7s44.7 99.7 99.7 99.7c39.8 0 74.2-23.5 90.2-57.3h640v-80H295.1z m-92.3 95c-31.6 0-57.3-25.7-57.3-57.3 0-31.6 25.7-57.3 57.3-57.3 31.6 0 57.3 25.7 57.3 57.3 0 31.5-25.7 57.3-57.3 57.3zM519.6 641.8H933v80H519.6zM519.6 308.6H933v80H519.6z" fill="#0764f5" p-id="3506"></path></svg>

package/src/template/react-custom-cmp-template/package.json

@@ -37,14 +37,14 @@
     "url": "https://github.com/wibetter/react-custom-cmp-template/issues"
   },
   "dependencies": {
-    "neo-register": "^1.0.3",
+    "neo-register": "^1.0.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.3.5",
+    "neo-cmp-cli": "^1.3.7",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/react-ts-custom-cmp-template/package.json

@@ -37,7 +37,7 @@
     "url": "https://github.com/wibetter/react-ts-custom-cmp-template/issues"
   },
   "dependencies": {
-    "neo-register": "^1.0.3",
+    "neo-register": "^1.0.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
@@ -46,7 +46,7 @@
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
-    "neo-cmp-cli": "^1.3.5",
+    "neo-cmp-cli": "^1.3.7",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/react-ts-custom-cmp-template/src/assets/img/map.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760670196857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4651" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M485.888 626.496 512 663.488l26.112-36.992c1.088-1.472 107.392-151.68 140.864-189.184C715.776 396.224 736 343.168 736 288 736 164.544 635.52 64 512 64s-224 100.48-224 224c0 55.232 20.224 108.288 57.088 149.376C378.624 474.816 484.8 625.024 485.888 626.496zM512 128c88.256 0 160 71.808 160 160 0 39.424-14.464 77.312-40.768 106.688C606.016 422.912 546.624 504.64 512 552.896 477.44 504.64 418.048 422.912 392.768 394.688 366.528 365.376 352 327.488 352 288 352 199.808 423.744 128 512 128zM512 384c52.928 0 96-43.072 96-96S564.928 192 512 192 416 235.072 416 288 459.072 384 512 384zM512 256c17.6 0 32 14.336 32 32S529.6 320 512 320 480 305.664 480 288 494.4 256 512 256zM960 129.024l0 703.168L680 960 384 832l-320 127.36L64 258.176l168.256-67.904C227.264 211.456 224 233.28 224 256c0 2.176 0.512 4.224 0.576 6.4L128 301.376l0 563.648 192-76.416L320 476.032c18.048 23.36 41.472 55.104 64 86.144l0 200.96 1.024-0.384 24.384 10.56L640 872.96 640 562.304c22.976-31.616 46.208-63.168 64-86.144l0 402.56 192-87.68L896 228.608l-97.536 44.544C798.784 267.392 800 261.76 800 256c0-17.664-2.176-34.752-5.184-51.584L960 129.024z" p-id="4652" fill="#0764f5"></path></svg>

package/src/template/react-ts-custom-cmp-template/src/components/map-widget/README.md

@@ -0,0 +1,125 @@
+# 地图展示组件
+
+地图展示组件，支持传入地理坐标或位置名称来展示地图区域，并标注当前位置。
+
+## 功能特性
+
+- ✅ 支持通过经纬度坐标定位
+- ✅ 支持通过地址名称定位（自动地理编码）
+- ✅ 支持自定义缩放级别
+- ✅ 支持自定义标记点标题
+- ✅ 支持点击标记查看详细地址
+- ✅ 支持自定义地图高度
+- ✅ 响应式设计，适配移动端
+- ✅ 优雅的加载和错误状态提示
+
+## 使用方式
+
+### 1. 通过经纬度定位
+
+```tsx
+<MapWidget
+  longitude={116.397428}
+  latitude={39.90923}
+  markerTitle="北京天安门"
+  zoom={15}
+  height={400}
+/>
+```
+
+### 2. 通过地址名称定位
+
+```tsx
+<MapWidget
+  locationName="北京市天安门广场"
+  markerTitle="天安门广场"
+  zoom={15}
+  height={400}
+/>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| longitude | number | 116.397428 | 经度（-180 到 180）|
+| latitude | number | 39.90923 | 纬度（-90 到 90）|
+| locationName | string | - | 位置名称（优先级高于经纬度）|
+| zoom | number | 14 | 地图缩放级别（3-18）|
+| markerTitle | string | '当前位置' | 标记点标题 |
+| height | number | 400 | 地图容器高度（像素）|
+
+## 注意事项
+
+1. **地图脚本配置**：
+   - 当前使用的是企业内部部署的高德地图脚本：`https://neors.ingageapp.com/base/js/amap_2.0.5.21.js`
+   - 参考了 `neo-ui-component-web` 项目的实现方式
+   - 如需使用高德官方 API，可以：
+     - 前往[高德开放平台](https://lbs.amap.com/)申请 Web 端 API Key
+     - 在 `index.tsx` 的 `loadAMapScript` 方法中取消注释备用方案代码
+     - 替换 `amapKey` 为你的 API Key
+
+2. **定位方式优先级**：
+   - 如果同时提供了 `locationName` 和经纬度，优先使用 `locationName`
+   - 如果都未提供，默认显示北京天安门位置
+
+3. **地理编码说明**：
+   - 使用 `locationName` 时，会自动调用高德地图的地理编码服务
+   - 建议提供完整的地址信息以提高解析准确度
+   - 地理编码仅支持中国大陆地区
+
+4. **性能优化**：
+   - 地图脚本采用动态加载方式，不会影响页面初始加载速度
+   - 地图实例在组件销毁时会自动清理，避免内存泄漏
+   - 已加载的脚本会被缓存，重复使用不会重复加载
+
+## 示例场景
+
+### 场景1：展示公司地址
+```tsx
+<MapWidget
+  locationName="上海市浦东新区世纪大道XXX号"
+  markerTitle="公司总部"
+  zoom={16}
+  height={500}
+/>
+```
+
+### 场景2：展示多个城市坐标
+```tsx
+// 北京
+<MapWidget longitude={116.397428} latitude={39.90923} markerTitle="北京" />
+
+// 上海
+<MapWidget longitude={121.473701} latitude={31.230416} markerTitle="上海" />
+
+// 深圳
+<MapWidget longitude={114.057868} latitude={22.543099} markerTitle="深圳" />
+```
+
+### 场景3：移动端展示
+组件已自动适配移动端，会根据屏幕尺寸调整样式和布局。
+
+## 技术实现
+
+- 基于高德地图 Web API 2.0
+- 使用 React Class Component
+- TypeScript 类型支持
+- SCSS 样式预处理
+- 动态脚本加载
+
+## 浏览器兼容性
+
+- Chrome >= 60
+- Firefox >= 60
+- Safari >= 11
+- Edge >= 79
+
+## 更新日志
+
+### v1.0.0 (2025-10-17)
+- ✨ 初始版本发布
+- ✨ 支持经纬度和地址名称定位
+- ✨ 支持标记点和信息窗体
+- ✨ 响应式设计
+

package/src/template/react-ts-custom-cmp-template/src/components/map-widget/USAGE.md

@@ -0,0 +1,190 @@
+# 地图组件快速使用指南
+
+## 快速开始
+
+### 1. 基本使用（经纬度定位）
+
+```tsx
+import MapWidget from './components/map-widget';
+
+// 在你的页面或组件中使用
+<MapWidget
+  longitude={116.397428}
+  latitude={39.90923}
+  markerTitle="北京天安门"
+  zoom={15}
+  height={400}
+/>
+```
+
+### 2. 使用地址名称定位
+
+```tsx
+<MapWidget
+  locationName="北京市天安门广场"
+  markerTitle="天安门广场"
+  zoom={15}
+  height={500}
+/>
+```
+
+### 3. 在 Neo 平台中使用
+
+在 Neo 低代码平台的页面编辑器中：
+
+1. 从左侧组件面板找到「地图组件」
+2. 拖拽到页面中
+3. 在右侧属性面板配置：
+   - **位置名称**：输入地址（如"上海市浦东新区世纪大道"）
+   - **或使用经纬度**：
+     - 经度：如 121.473701
+     - 纬度：如 31.230416
+   - **标记点标题**：设置标记点显示的文字
+   - **缩放级别**：3-18，推荐 14-16
+   - **地图高度**：默认 400px，可自定义
+
+## 常用城市坐标
+
+| 城市 | 经度 | 纬度 |
+|------|------|------|
+| 北京 | 116.397428 | 39.90923 |
+| 上海 | 121.473701 | 31.230416 |
+| 广州 | 113.264385 | 23.129112 |
+| 深圳 | 114.057868 | 22.543099 |
+| 杭州 | 120.155070 | 30.274084 |
+| 成都 | 104.065735 | 30.659462 |
+| 西安 | 108.948024 | 34.263161 |
+| 武汉 | 114.298572 | 30.584355 |
+| 南京 | 118.767413 | 32.041544 |
+| 重庆 | 106.504962 | 29.533155 |
+
+## 配置说明
+
+### 优先级规则
+
+1. 如果同时设置了「位置名称」和「经纬度」，优先使用「位置名称」
+2. 如果都未设置，默认显示北京天安门
+
+### 地址搜索提示
+
+使用「位置名称」进行定位时，建议提供完整地址以提高准确度：
+
+✅ **好的示例**：
+- "北京市朝阳区建国门外大街1号"
+- "上海市浦东新区世纪大道88号"
+- "广州市天河区珠江新城花城大道"
+
+❌ **不好的示例**：
+- "建国门" （太模糊）
+- "天河" （太宽泛）
+- "世纪大道" （没有城市信息）
+
+### 缩放级别参考
+
+- **3-7**：省级/国家级视图
+- **8-11**：城市级视图
+- **12-14**：区县级视图（默认）
+- **15-16**：街道级视图
+- **17-18**：建筑物级视图
+
+## 常见问题
+
+### Q1: 地图无法显示？
+
+**可能原因**：
+1. 网络连接问题
+2. 地图脚本加载失败
+3. 提供的地址无法解析
+
+**解决方案**：
+- 检查网络连接
+- 查看浏览器控制台错误信息
+- 尝试使用经纬度而不是地址名称
+- 确认地址格式正确
+
+### Q2: 地址定位不准确？
+
+**解决方案**：
+- 提供更完整的地址信息
+- 包含省市区县信息
+- 使用标准地址格式
+- 或直接使用经纬度坐标
+
+### Q3: 如何获取某个地点的经纬度？
+
+**方法**：
+1. 访问 [高德地图坐标拾取器](https://lbs.amap.com/tools/picker)
+2. 搜索或点击地图上的位置
+3. 复制显示的经纬度坐标
+4. 注意：高德地图的顺序是 [经度, 纬度]
+
+### Q4: 支持国外地址吗？
+
+**说明**：
+- 当前使用高德地图，主要支持中国大陆地区
+- 国外地址可能无法准确定位
+- 如需支持国外地址，需要切换到谷歌地图或其他国际地图服务
+
+## 进阶使用
+
+### 动态更新位置
+
+如果需要根据用户输入或数据动态更新地图位置，可以通过修改组件的 props 来实现：
+
+```tsx
+class MyPage extends React.Component {
+  state = {
+    longitude: 116.397428,
+    latitude: 39.90923,
+  };
+
+  updateLocation = (lng, lat) => {
+    this.setState({
+      longitude: lng,
+      latitude: lat,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.updateLocation(121.473701, 31.230416)}>
+          定位到上海
+        </button>
+        <MapWidget
+          longitude={this.state.longitude}
+          latitude={this.state.latitude}
+          markerTitle="当前位置"
+          zoom={15}
+        />
+      </div>
+    );
+  }
+}
+```
+
+### 自定义地图样式
+
+如果需要自定义地图的外观，可以修改 `style.scss` 文件：
+
+```scss
+// 修改标题栏颜色
+.map-widget-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  // 改为你喜欢的颜色
+}
+
+// 修改信息窗体样式
+.map-info-window {
+  padding: 12px;
+  // 自定义样式
+}
+```
+
+## 技术支持
+
+如有问题，请参考：
+- [高德地图 Web API 文档](https://lbs.amap.com/api/javascript-api/summary)
+- [React 组件开发文档](https://react.docschina.org/)
+- [TypeScript 手册](https://www.typescriptlang.org/docs/)
+

package/src/template/react-ts-custom-cmp-template/src/components/map-widget/index.tsx

@@ -0,0 +1,347 @@
+import * as React from 'react';
+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;
+}
+
+/**
+ * 地图展示组件
+ * 支持传入经纬度坐标或位置名称，展示对应的地图区域并标注当前位置
+ * 基于高德地图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';
+
+  constructor(props: MapWidgetProps) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      error: undefined,
+      currentAddress: '',
+    };
+  }
+
+  componentDidMount() {
+    this.loadAMapScript();
+  }
+
+  componentDidUpdate(
+    prevProps: Readonly<MapWidgetProps>,
+    prevState: Readonly<MapWidgetState>,
+    snapshot?: any,
+  ): void {
+    const { longitude, latitude, locationName, zoom = 14 } = this.props;
+    const {
+      longitude: prevLongitude,
+      latitude: prevLatitude,
+      locationName: prevLocationName,
+      zoom: prevZoom = 14,
+    } = prevProps;
+    if (
+      longitude !== prevLongitude ||
+      latitude !== prevLatitude ||
+      locationName !== prevLocationName ||
+      zoom !== prevZoom
+    ) {
+      this.initMap();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.map) {
+      this.map.destroy();
+      this.map = null;
+    }
+  }
+
+  /**
+   * 动态加载高德地图脚本
+   */
+  loadAMapScript = () => {
+    // 检查是否已加载
+    if (window.AMap) {
+      this.AMap = window.AMap;
+      this.initMap();
+      return;
+    }
+
+    // 使用 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();
+    };
+
+    script.onerror = () => {
+      this.setState({
+        isLoading: false,
+        error: '地图加载失败，请检查网络连接或配置地图API Key',
+      });
+    };
+
+    document.head.appendChild(script);
+  };
+
+  /**
+   * 初始化地图
+   */
+  initMap = () => {
+    const { longitude, latitude, locationName, zoom = 14 } = this.props;
+
+    // 如果提供了位置名称，先进行地理编码
+    if (locationName) {
+      this.geocodeAddress(locationName, 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({
+            isLoading: false,
+            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);
+
+      this.setState({
+        isLoading: false,
+      });
+    } catch (error) {
+      console.log('地图初始化失败 / error:', error);
+      this.setState({
+        isLoading: false,
+        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/react-ts-custom-cmp-template/src/components/map-widget/model.ts

@@ -0,0 +1,105 @@
+/**
+ * @file 地图组件对接编辑器的描述文件
+ */
+export class MapWidgetModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'map-widget';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '地图组件';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = '地图展示组件，支持传入经纬度或地址名称';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/map.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    label: '地图组件',
+    // longitude: 116.397428, // 北京天安门经度
+    // latitude: 39.90923, // 北京天安门纬度
+    locationName: '北京市天安门广场', // 位置名称（可选）
+    zoom: 14, // 缩放级别
+    markerTitle: '当前位置', // 标记点标题
+    height: 400, // 地图高度
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '地图组件',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  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: '地图容器的高度（像素）',
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default MapWidgetModel;

package/src/template/react-ts-custom-cmp-template/src/components/map-widget/style.scss

@@ -0,0 +1,192 @@
+// 地图组件样式文件
+.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;
+}

package/src/template/vue2-custom-cmp-template/package.json

@@ -37,14 +37,14 @@
     "url": "https://github.com/wibetter/vue2-custom-cmp-template/issues"
   },
   "dependencies": {
-    "neo-register": "^1.0.3",
+    "neo-register": "^1.0.5",
     "vue": "^2.6.14",
     "element-ui": "^2.15.12"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.3.5",
+    "neo-cmp-cli": "^1.3.7",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",