neo-cmp-cli 1.8.3 → 1.8.6-beta.1

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

@@ -0,0 +1,151 @@
+/**
+ * @file 图表组件对接编辑器的描述文件
+ */
+export class ChartWidgetModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'chart-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/chart.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    chartType: 'line',
+    title: '销售趋势分析',
+    subtitle: '2025年数据统计',
+    width: 800,
+    height: 400,
+    theme: 'default',
+    showLegend: true,
+    showTooltip: true,
+    showDataZoom: false,
+    showGrid: true,
+    backgroundColor: 'transparent',
+    textColor: '#333',
+    mockData: {
+      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      series: [
+        {
+          name: '销售额',
+          data: [120, 200, 150, 80, 70, 110],
+        },
+      ],
+    },
+    dataConfig: {
+      enableMock: true,
+      dataSource: 'mock',
+    },
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   * 使用 JSON AMIS 表单配置
+   */
+  propsSchema = [
+    {
+      type: 'select',
+      name: 'chartType',
+      label: '图表类型',
+      value: 'line',
+      options: [
+        { label: '折线图', value: 'line' },
+        { label: '柱状图', value: 'bar' },
+        { label: '饼图', value: 'pie' },
+        { label: '散点图', value: 'scatter' },
+        { label: '雷达图', value: 'radar' },
+        { label: '仪表盘', value: 'gauge' },
+        { label: '漏斗图', value: 'funnel' },
+        { label: '桑基图', value: 'sankey' },
+      ],
+      clearable: false,
+    },
+    {
+      type: 'text',
+      name: 'title',
+      label: '主标题',
+      value: '销售趋势分析',
+      placeholder: '请输入图表标题',
+    },
+    {
+      type: 'text',
+      name: 'subtitle',
+      label: '副标题',
+      value: '2025年数据统计',
+      placeholder: '请输入图表副标题',
+    },
+    {
+      type: 'number',
+      name: 'width',
+      label: '宽度',
+      value: 800,
+      min: 200,
+      max: 2000,
+      step: 10,
+    },
+    {
+      type: 'number',
+      name: 'height',
+      label: '高度',
+      value: 400,
+      min: 200,
+      max: 1000,
+      step: 10,
+    },
+    /*
+    // 注释掉未生效的配置项
+    {
+      type: 'color',
+      name: 'backgroundColor',
+      label: '背景颜色',
+      value: 'transparent',
+    },
+    {
+      type: 'color',
+      name: 'textColor',
+      label: '文字颜色',
+      value: '#333',
+    },
+    */
+    {
+      type: 'switch',
+      name: 'showLegend',
+      label: '显示图例',
+      value: true,
+    },
+    {
+      type: 'switch',
+      name: 'showTooltip',
+      label: '显示提示框',
+      value: true,
+    }
+  ];
+}
+
+export default ChartWidgetModel;

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

@@ -0,0 +1,209 @@
+.chart-widget-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, 
+      rgba(255, 255, 255, 0.1) 0%, 
+      rgba(255, 255, 255, 0.05) 50%, 
+      rgba(255, 255, 255, 0.1) 100%);
+    pointer-events: none;
+  }
+
+  .user-info {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+
+    .user-name,
+    .tenant-name {
+      background: rgba(255, 255, 255, 0.9);
+      color: #333;
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      backdrop-filter: blur(10px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .user-name {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      color: white;
+    }
+  }
+
+  .chart-container {
+    position: relative;
+    margin: 0 auto;
+    z-index: 1;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    }
+
+    // ECharts 容器样式增强
+    .echarts-for-react {
+      width: 100% !important;
+      height: 100% !important;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    padding: 15px;
+    
+    .user-info {
+      top: 8px;
+      right: 15px;
+      
+      .user-name,
+      .tenant-name {
+        font-size: 11px;
+        padding: 3px 6px;
+      }
+    }
+  }
+
+  // 深色主题适配
+  &.dark-theme {
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    
+    .chart-container {
+      background: rgba(44, 62, 80, 0.95);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  // 动画效果
+  &.loading {
+    .chart-container {
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 40px;
+        height: 40px;
+        margin: -20px 0 0 -20px;
+        border: 3px solid #f3f3f3;
+        border-top: 3px solid #667eea;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// 图表类型特定样式
+.chart-widget-container {
+  &.line-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+    }
+  }
+
+  &.bar-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
+    }
+  }
+
+  &.pie-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
+    }
+  }
+
+  &.scatter-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(233, 30, 99, 0.1));
+    }
+  }
+
+  &.radar-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(0, 150, 136, 0.1), rgba(0, 188, 212, 0.1));
+    }
+  }
+
+  &.gauge-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(255, 87, 34, 0.1), rgba(255, 152, 0, 0.1));
+    }
+  }
+
+  &.funnel-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(63, 81, 181, 0.1), rgba(103, 58, 183, 0.1));
+    }
+  }
+
+  &.sankey-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(121, 85, 72, 0.1), rgba(96, 125, 139, 0.1));
+    }
+  }
+}
+
+// 全局图表样式覆盖
+.chart-widget-container {
+  .chart-container {
+    // 确保 ECharts 图表在容器内正确显示
+    canvas {
+      border-radius: 8px;
+    }
+    
+    // 图表标题样式
+    .echarts-title {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      font-weight: 600;
+    }
+    
+    // 图例样式
+    .echarts-legend {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    }
+    
+    // 工具提示样式
+    .echarts-tooltip {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    }
+  }
+}

package/template/echarts-custom-cmp-template/src/components/mapWidget/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/template/echarts-custom-cmp-template/src/components/mapWidget/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/)
+