neo-cmp-cli 1.3.6 → 1.3.8

package/README.md

@@ -12,11 +12,11 @@ neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.
 
 ### 内置的自定义组件模板
 创建自定义组件时（执行初始化命令 neo init）可选用。
-- **React 模板**: [react-custom-cmp-template](https://github.com/wibetter/react-custom-cmp-template)
-- **React + TS 模板**: [react-ts-custom-cmp-template](https://github.com/wibetter/react-ts-custom-cmp-template)
-- **Antd 模板**: [antd-custom-cmp-template](https://github.com/wibetter/antd-custom-cmp-template) Antd 自定义组件
-- **Neo 模板**: [neo-custom-cmp-template](https://github.com/wibetter/neo-custom-cmp-template) 支持使用 Neo 实体数据源（内置 Neo Open API 使用示例）
-- **Echarts 模板**: [echarts-custom-cmp-template](https://github.com/wibetter/echarts-custom-cmp-template) Echarts 图表自定义组件
+- **React 模板**: [react-custom-cmp-template](https://github.com/wibetter/react-custom-cmp-template) 
+- **React + TS 模板**: [react-ts-custom-cmp-template](https://github.com/wibetter/react-ts-custom-cmp-template) 内置信息卡片列表展示组件示例
+- **Antd 模板**: [antd-custom-cmp-template](https://github.com/wibetter/antd-custom-cmp-template) 内置 Antd UI 组件实现的数据仪表板展示组件示例
+- **Neo 模板**: [neo-custom-cmp-template](https://github.com/wibetter/neo-custom-cmp-template) 支持使用平台实体数据源（内置平台实体数据对象的增删改查示例组件）
+- **Echarts 模板**: [echarts-custom-cmp-template](https://github.com/wibetter/echarts-custom-cmp-template) Echarts 图表自定义组件（含 高德地图展示组件示例）
 - **Vue2 模板**: [vue2-custom-cmp-template](https://github.com/wibetter/vue2-custom-cmp-template) Vue2.0 自定义组件
 
 ## 快速开始

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "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.8",
     "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.8",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",

package/src/template/echarts-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/echarts-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/)
+