neo-cmp-cli 1.3.7 → 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.7",
+  "version": "1.3.8",
   "description": "前端脚手架：自定义组件开发工具，支持react 和 vue2.0技术栈。",
   "keywords": [
     "neo-cli",

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

@@ -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.7",
+    "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

@@ -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.7",
+    "neo-cmp-cli": "^1.3.8",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",

package/src/template/{react-ts-custom-cmp-template → echarts-custom-cmp-template}/src/components/map-widget/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getUrlParam } from '../../utils/url';
 import './style.scss';
 
 // 扩展 Window 接口以支持 AMap
@@ -28,6 +29,7 @@ interface MapWidgetState {
   isLoading: boolean;
   error?: string;
   currentAddress?: string;
+  urlLocationName?: string;
 }
 
 /**
@@ -47,30 +49,33 @@ export default class MapWidget extends React.PureComponent<
 
   private mapContainer: string = 'map-widget-container';
 
+  private locationName?: string = '';
+
   constructor(props: MapWidgetProps) {
     super(props);
+
     this.state = {
-      isLoading: true,
+      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>,
-    prevState: Readonly<MapWidgetState>,
-    snapshot?: any,
-  ): void {
+  componentDidUpdate(prevProps: Readonly<MapWidgetProps>): void {
     const { longitude, latitude, locationName, zoom = 14 } = this.props;
     const {
       longitude: prevLongitude,
       latitude: prevLatitude,
-      locationName: prevLocationName,
       zoom: prevZoom = 14,
+      locationName: prevLocationName,
     } = prevProps;
     if (
       longitude !== prevLongitude ||
@@ -78,17 +83,42 @@ export default class MapWidget extends React.PureComponent<
       locationName !== prevLocationName ||
       zoom !== prevZoom
     ) {
-      this.initMap();
+      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);
+        },
+      );
+    }
+  };
+
   /**
    * 动态加载高德地图脚本
    */
@@ -100,6 +130,10 @@ export default class MapWidget extends React.PureComponent<
       return;
     }
 
+    this.setState({
+      isLoading: true,
+    });
+
     // 使用 NeoCRM 部署的高德地图脚本: 使用企业内部部署的高德地图脚本，无需单独申请 API Key
     const scriptUrl = 'https://neors.ingageapp.com/base/js/amap_2.0.5.21.js';
     // 备用方案：使用高德官方API（需要申请key）
@@ -114,6 +148,10 @@ export default class MapWidget extends React.PureComponent<
     script.onload = () => {
       this.AMap = window.AMap;
       this.initMap();
+
+      this.setState({
+        isLoading: false,
+      });
     };
 
     script.onerror = () => {
@@ -129,12 +167,18 @@ export default class MapWidget extends React.PureComponent<
   /**
    * 初始化地图
    */
-  initMap = () => {
+  initMap = (_locationName?: string) => {
     const { longitude, latitude, locationName, zoom = 14 } = this.props;
+    const { urlLocationName } = this.state;
+
+    // 优先使用 URL 中的 location 参数
+    const finalLocationName = _locationName || urlLocationName || locationName;
 
-    // 如果提供了位置名称，先进行地理编码
-    if (locationName) {
-      this.geocodeAddress(locationName, zoom);
+    this.locationName = finalLocationName;
+
+    // 如果提供了位置名称（URL 或 props），先进行地理编码
+    if (finalLocationName) {
+      this.geocodeAddress(finalLocationName, zoom);
     }
     // 如果提供了经纬度，直接初始化地图
     else if (longitude !== undefined && latitude !== undefined) {
@@ -167,7 +211,6 @@ export default class MapWidget extends React.PureComponent<
           });
         } else {
           this.setState({
-            isLoading: false,
             error: `地址解析失败: ${address}`,
           });
           // 使用默认位置
@@ -199,14 +242,9 @@ export default class MapWidget extends React.PureComponent<
 
       // 获取当前位置的地址信息
       this.getAddressByLocation(center);
-
-      this.setState({
-        isLoading: false,
-      });
     } catch (error) {
       console.log('地图初始化失败 / error:', error);
       this.setState({
-        isLoading: false,
         error: '地图初始化失败',
       });
     }

package/src/template/echarts-custom-cmp-template/src/utils/url.ts

@@ -0,0 +1,82 @@
+/**
+ * 获取URL参数
+ * @returns
+ */
+export function getUrlParams() {
+  const urlParams: { [key: string]: string } = {};
+  let url = window.location.href;
+  if (url.indexOf('?') !== -1) {
+    url = url.substring(url.indexOf('?') + 1, url.length);
+    const urlArr = url.split('&');
+    for (let i = 0, size = urlArr.length; i < size; i++) {
+      const urlArrItem = urlArr[i].split('=');
+      // 对参数值进行 URL 解码，避免中文字符串乱码
+      urlParams[urlArrItem[0]] = urlArrItem[1]
+        ? decodeURIComponent(urlArrItem[1])
+        : '';
+    }
+  }
+  return urlParams;
+}
+
+/**
+ * 从URL参数中提取指定的字段数值
+ * @param paramName 参数名称
+ * @param defaultValue 默认值
+ * @returns 参数值或默认值
+ *
+ * @example
+ * // 从当前页面URL提取debug参数
+ * const debug = getUrlParam('debug', false)
+ *
+ * // 提取数字参数
+ * const page = getUrlParam('page', 1)
+ *
+ * // 提取字符串参数
+ * const mode = getUrlParam('mode', 'production')
+ */
+export function getUrlParam(paramName: string, defaultValue: any = null): any {
+  const urlParams = getUrlParams();
+  const paramValue = urlParams[paramName];
+
+  // 尝试转换数据类型
+  if (paramValue === 'true') return true;
+  if (paramValue === 'false') return false;
+  if (paramValue === 'null') return null;
+  if (paramValue === 'undefined') return undefined;
+
+  // 尝试转换为数字
+  const numValue = Number(paramValue);
+  if (!isNaN(numValue) && isFinite(numValue)) {
+    return numValue;
+  }
+
+  return paramValue ?? defaultValue;
+}
+
+/**
+ * 从URL参数中提取多个字段数值
+ * @param params 参数配置对象，键为参数名，值为默认值
+ * @param url 可选的URL字符串，默认使用当前页面URL
+ * @returns 包含所有参数值的对象
+ *
+ * @example
+ * const params = getUrlParams({
+ *   debug: false,
+ *   mode: 'production',
+ *   page: 1,
+ *   theme: 'light'
+ * })
+ */
+export function getUrlParamsByKeys(
+  params: Record<string, any>,
+  url?: string,
+): Record<string, any> {
+  const result: Record<string, any> = {};
+
+  for (const [paramName, defaultValue] of Object.entries(params)) {
+    result[paramName] = getUrlParam(paramName, defaultValue);
+  }
+
+  return result;
+}

package/src/template/neo-custom-cmp-template/neo.config.js

@@ -80,8 +80,8 @@ module.exports = {
     entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
       // 外链调试（在线上页面设计器端预览自定义组件）
       index: [
-        './src/components/info-card/register.ts',
-        './src/components/info-card/model.ts',
+        './src/components/entity-form/register.ts',
+        './src/components/entity-form/model.ts',
       ],
     },
     NODE_ENV: 'development',
@@ -105,8 +105,8 @@ module.exports = {
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
     NODE_ENV: 'production',
     entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
-      InfoCardModel: './src/components/info-card/model.ts',
-      infoCard: './src/components/info-card/register.ts'
+      InfoCardModel: './src/components/entity-form/model.ts',
+      infoCard: './src/components/entity-form/register.ts'
     },
     cssExtract: false, // 不额外提取css文件
     ossType: 'ali', // oss类型：ali、baidu

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

@@ -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.7",
+    "neo-cmp-cli": "^1.3.8",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

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

@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.3.7",
+    "neo-cmp-cli": "^1.3.8",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/react-ts-custom-cmp-template/neo.config.js

@@ -79,8 +79,8 @@ module.exports = {
     entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
       // 外链调试（在线上页面设计器端预览自定义组件）
       index: [
-        './src/components/info-card/register.ts',
-        './src/components/info-card/model.ts',
+        './src/components/list-widget/register.ts',
+        './src/components/list-widget/model.ts',
       ],
     },
     NODE_ENV: 'development',
@@ -104,8 +104,8 @@ module.exports = {
     【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
     NODE_ENV: 'production',
     entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
-      InfoCardModel: './src/components/info-card/model.ts',
-      infoCard: './src/components/info-card/register.ts'
+      listWidgetModel: './src/components/list-widget/model.ts',
+      listWidget: './src/components/list-widget/register.ts'
     },
     cssExtract: false, // 不额外提取css文件
     ossType: 'ali', // oss类型：ali、baidu

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

@@ -1,6 +1,6 @@
 {
   "name": "react-ts-custom-cmp-template",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "neo自定义组件模板（react&ts技术栈）",
   "keywords": [
     "自定义组件模板",
@@ -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.7",
+    "neo-cmp-cli": "^1.3.8",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

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

@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.3.7",
+    "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/info-card/index.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import './style.scss'; // 组件内容样式
-
-interface InfoCardProps {
-  title: string;
-  backgroundImage: string;
-  imgCount: number;
-  commentCount: number;
-  data?: any;
-}
-
-export default class InfoCard extends React.PureComponent<InfoCardProps> {
-  constructor(props: InfoCardProps) {
-    super(props);
-    this.agreeDataFormat = this.agreeDataFormat.bind(this);
-  }
-
-  agreeDataFormat(agreeData: number) {
-    if (agreeData && agreeData <= 9999) {
-      return agreeData;
-    }
-    if (agreeData && agreeData > 9999) {
-      return `${Math.floor(agreeData / 1000) / 10}w`;
-    }
-    return '';
-  }
-
-  render() {
-    const { title, backgroundImage, imgCount, commentCount } = this.props;
-    console.log('当前自定义组件：', this.props, this);
-    const curAmisData = this.props.data || {};
-
-    const userInfo = curAmisData.__NeoCurrentUser;
-    const systemInfo = curAmisData.__NeoSystemInfo || {};
-
-    const curBackgroundImage =
-      backgroundImage || 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg';
-    return (
-      <div className="info-card-container">
-        <div className="news-title">
-          {title ||
-            '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
-          {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
-        </div>
-        <div className="item-imgbox">
-          {userInfo && userInfo.icon && (
-            <div className="user-info-box">
-              <img src={userInfo.icon} className="user-icon" />
-              <span className="user-name">{userInfo.name}</span>
-            </div>
-          )}
-          <div
-            className="news-img"
-            style={{ backgroundImage: `url(${curBackgroundImage})` }}
-          ></div>
-          {imgCount > 0 && <div className="img-count">{imgCount}</div>}
-        </div>
-        <div className="news-info">
-          <div className="left media-mark">NeoCRM · 低代码平台</div>
-          {commentCount && commentCount > 0 && (
-            <div className="cmt-num right">
-              {this.agreeDataFormat(commentCount)}评
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-}

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

@@ -1,78 +0,0 @@
-/**
- * @file 自定义组件对接编辑器的描述文件
- */
-export class InfoCardModel {
-  /**
-   * cmpType 为自定义组件名称，用于标识组件的唯一性
-   * 在构建时根据当前组件目录名称自动生成
-   */
-  // cmpType: string = 'info-card';
-
-  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
-  label: string = '信息卡片';
-
-  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
-  description: string = '信息展示卡片';
-
-  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
-  tags: string[] = ['自定义组件'];
-
-  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
-  iconSrc: string = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg';
-  // iconSrc = 'https://neo-widgets.bj.bcebos.com/favicon.png';
-
-  // 初次插入页面的默认属性数据
-  defaultComProps = {
-    title:
-      '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。',
-    label: '信息卡片',
-    backgroundImage: 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg',
-    imgCount: 3,
-    commentCount: 2025,
-  };
-
-  // 设计器端预览时展示的默认数据
-  previewComProps = {
-    label: '信息卡片',
-  };
-
-  /**
-   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
-   */
-  propsSchema = [
-    {
-      type: 'textarea',
-      name: 'title',
-      label: '卡片title',
-      value:
-        '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。',
-    },
-    {
-      type: 'text',
-      name: 'backgroundImage',
-      label: '展示图片',
-      value: 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg',
-    },
-    {
-      type: 'number',
-      name: 'imgCount',
-      label: '图片数量',
-      value: 3,
-    },
-    {
-      type: 'number',
-      name: 'commentCount',
-      label: '评论数',
-      value: 2025,
-    },
-  ];
-
-  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
-  /*
-  propsSchemaCreator = (com: any) => {
-    return [];
-  };
-  */
-}
-
-export default InfoCardModel;

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

@@ -1,105 +0,0 @@
-:root {
-  --padding-bottom: 12px;
-}
-
-.info-card-container {
-  position: relative;
-  box-sizing: border-box;
-
-  /* border-bottom: 1px solid #ececec; */
-  margin: 6px 12px;
-  padding: 6px var(--padding-bottom);
-  background-color: #fff;
-
-  .news-title {
-    padding: 6px 0;
-    font-family: PingFangSC-Regular;
-    font-size: 16px;
-    line-height: 22px;
-    color: #5f5e5e;
-  }
-
-  .item-imgbox {
-    position: relative;
-    height: 395px;
-    background: #f0f0f0;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-align: center;
-    overflow: hidden;
-
-    .news-img {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      background-size: contain;
-    }
-
-    .img-count {
-      position: absolute;
-      top: 0;
-      right: 0;
-      padding: 6px 8px;
-      color: #fff;
-      min-width: 60px;
-      text-align: center;
-      line-height: 1.2;
-      background: rgb(0 0 0 / 40%);
-      font-size: 25px;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-
-    .user-info-box {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      width: 100px;
-      min-height: 100px;
-      padding: 6px 8px;
-      color: #fff;
-      min-width: 60px;
-      text-align: center;
-      line-height: 1.2;
-      background: rgb(0 0 0 / 40%);
-      font-size: 25px;
-      box-sizing: border-box;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      .user-icon {
-        width: 64px;
-        height: 64px;
-        border-radius: 50%;
-      }
-
-      .user-name {
-        font-size: 16px;
-        font-weight: 600;
-        margin-top: 10px;
-      }
-    }
-  }
-
-  .news-info {
-    font-family: PingFangSC-Light;
-    height: 28px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .media-mark,
-  .cmt-num {
-    display: inline-block;
-    height: 28px;
-    line-height: 28px;
-    font-family: PingFangSC-Light;
-    font-size: 18px;
-    color: #828282;
-  }
-}