neo-cmp-cli 1.8.3 → 1.8.6

package/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/template/echarts-custom-cmp-template/tsconfig.json

@@ -0,0 +1,68 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    /* Basic Options */
+    "target": "esnext",
+    /* 指定编译之后的版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "esnext" /* 指定要使用的模板标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "allowJs": false /* 指定是否允许编译JS文件，默认false,即不编译JS文件. */,
+    // "checkJs": true,                       /* 指定是否检查和报告JS文件中的错误，默认false */
+    "jsx": "react" /* 指定jsx代码用于的开发环境:'preserve','react-native', or 'react'. */,
+    "declaration": false /* 指定是否在编译的时候生成相的d.ts声明文件 */,
+    // "declarationMap": true,                /* 指定编译时是否生成.map文件 */
+    // "sourceMap": true,                     /* 指定编译时是否生成.map文件 */
+    // "outFile": "./",                       /* 指定输出文件合并为一个文件 */
+    // "outDir": "dist", /* 指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹*/
+    // "rootDir": "src", /* 指定编译文件的根目录，编译器会在根目录查找入口文件 */
+    // "composite": true,                     /* 是否编译构建引用项目 */
+    // "removeComments": true,                /* 指定是否将编译后的文件注释删掉，设为true的话即删除注释，默认为false */
+    "noEmit": false /* 不生成编译文件 */,
+    "importHelpers": true /* 指定是否引入tslib里的复制工具函数，默认为false */,
+    // "downlevelIteration": true,            /* 当target为"ES5"或"ES3"时，为"for-of" "spread"和"destructuring"中的迭代器提供完全支持 */
+    "isolatedModules": false /* 指定是否将每个文件作为单独的模块，默认为true */,
+
+    /* Strict Type-Checking Options */
+    "strict": false /* 指定是否启动所有类型检查 */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* Enable strict null checks. */,
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": false /* Report errors on unused locals. */,
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      "@": ["./src"]
+    } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    /* 指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 */
+    "typeRoots": ["./@types", "./node_modules/@types"],
+    // "types": [],                           /* 指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载 */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+    // "suppressImplicitAnyIndexErrors": true /* Suppress --noImplicitAny errors for indexing objects lacking index signatures. See issue #1232 for more details. */
+  },
+  "include": ["src", "test"],
+  "exclude": ["node_modules"]
+}

package/template/empty-cmp/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import './style.scss'; // 组件内容样式
+
+interface CustomCmpProps {
+  title: string;
+  backgroundImage: string;
+  imgCount: number;
+  commentCount: number;
+  data?: any;
+}
+
+export default class CustomCmp extends React.PureComponent<CustomCmpProps> {
+  constructor(props: CustomCmpProps) {
+    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 curBackgroundImage =
+      backgroundImage || 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg';
+    return (
+      <div className="custom-cmp-container">
+        <div className="news-title">
+          {title ||
+            '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
+        </div>
+        <div className="item-imgbox">
+          <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/template/empty-cmp/model.ts

@@ -0,0 +1,79 @@
+/**
+ * @file 自定义组件对接编辑器的描述文件
+ */
+export class CmpModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'xx-custom-cmp';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = 'xx组件';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = 'xx组件详细描述';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  // tags: string[] = ['自定义组件'];
+
+  /** 
+   * 用于设置组件支持的页面类型
+   * 
+   * 当前 NeoCRM 平台存在的页面类型：
+   * all:	1	全页面
+   * indexPage:	2	首页
+   * entityListPage:	3	实体列表页
+   * entityFormPage:	4	实体表单页
+   * entityDetailPage:	5	实体详情页
+   * customPage:	6	自定义页面
+   * bizPage:	7	业务页面
+   */
+  // targetPage: string[] = ['customPage'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title:
+      '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。',
+    label: '信息卡片',
+    backgroundImage: 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg',
+    imgCount: 3,
+    commentCount: 2025,
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  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,
+    },
+  ];
+}
+
+export default CmpModel;

package/template/empty-cmp/style.scss

@@ -0,0 +1,72 @@
+:root {
+  --padding-bottom: 12px;
+}
+
+.custom-cmp-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;
+    }
+  }
+
+  .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;
+  }
+}

package/template/empty-custom-cmp-template/.prettierrc.js

@@ -0,0 +1,12 @@
+/*
+  prettier 配置文件
+  更多配置信息：https://prettier.io/docs/en/options.html
+ */
+module.exports = {
+  semi: true, // Semicolons 分号，默认需要分号
+  tabWidth: 2, // 空格，默认 2,
+  useTabs: false,
+  singleQuote: true, // 单引号还是双引号，默认为false 双引号
+  trailingComma: 'all', // 逗号
+  jsxBracketSameLine: false, // 默认为false，Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+};

package/template/empty-custom-cmp-template/README.md

@@ -0,0 +1,154 @@
+### 目录说明
+- src: 自定义组件源码；
+- src/assets: 存放组件静态资源，比如 css、img等；
+- src/components: 存放自定义组件代码，每个自定义组件以自身名称（cmpType 数值）作为目录进行存放；
+- src/components/xxCmp/index: 自定义组件的内容文件；
+- src/components/xxCmp/model: 自定义组件的模型文件，用于对接页面设计器；
+- neo.config.js: neo-cmp-cli 配置文件。
+
+### 组件开发规范
+- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 自定义组件的脚本文件，model.[tj]s 为自定义组件的模型文件（对接页面设计器需要）；
+- 当 neo.config.js 中的 entry 为空或者不存在时，cli 将根据 src/components 目录下的自定义组件结构生成对应的 entry 配置（可在命令控制台查看生成的 entry 配置）；
+- 自定义组件中可用的配置项类型 请见 [当前可用表单项](https://github.com/wibetter/neo-register/blob/master/docs/FormItemType.md)；
+- 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中，避免自定义组件样式相互干扰；
+- 默认开启代码规范检测（含样式内容），如需关闭，请调整 neo.config.js 相关配置；
+- 请使用 react 16版本。
+
+### 自定义组件注册器使用说明
+- [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+备注：预览、调试（linkDebug）和构建发布时 cli 会自动创建对应的注册文件（含 neo-register 的使用），用户无需关注 neo-register。
+
+### 开发说明
+
+1. **安装依赖**
+```bash
+$ npm i 或者 yarn
+```
+
+2. **preview: 组件预览模式（带热更新）**
+> preview模式：用于预览自定义组件内容。
+```bash
+$ npm run preview
+```
+
+3. **linkDebug: 外链调试（在线上页面设计器端预览自定义组件）**
+> linkDebug模式：用于在线上页面设计器中预览和调试自定义组件。
+```bash
+$ npm run linkDebug
+```
+
+4. **发布到 NeoCRM 中**
+> 需要确保 package.json 中的 name 值唯一，version 值不重复。
+```bash
+$ npm run pushCmp
+```
+
+
+### 🔐 授权配置
+
+使用 `neo push cmp`、`neo pull cmp`、`neo delete cmp` 等命令与 NeoCRM 平台交互时，需要配置授权信息。
+
+#### 方式一：OAuth2 登录授权（推荐）
+
+OAuth2 授权码模式更加安全可靠，无需用户配置账户名和密码。
+
+##### 使用步骤
+
+1. **登录 NeoCRM 平台**
+   ```bash
+   neo login
+   ```
+   
+   执行流程：
+   - 自动打开浏览器访问授权页面
+   - 在浏览器中输入 NeoCRM 账号密码进行登录（需选择对应的租户）
+   - 授权成功后自动跳转回本地（附带 code）
+   - cli 端 通过 code 获取 Token，并自动保存到项目的 `.neo-cli/token.json` 文件中
+
+2. **登出 NeoCRM 平台**
+   ```bash
+   neo logout
+   ```
+   
+   功能：清除本地保存的 token 文件，下次使用需要重新登录。
+
+##### 配置示例
+
+```javascript
+// neo.config.js
+module.exports = {
+  neoConfig: {
+    neoBaseURL: 'https://crm-cd.xiaoshouyi.com', // 平台根地址（默认：https://crm.xiaoshouyi.com）
+    // 登录授权 URL（用于获取 code）
+    loginURL: 'https://login-cd.xiaoshouyi.com/auc/oauth2/auth',
+    tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址
+  },
+}
+```
+
+##### Token 有效期
+
+- **access_token**：默认有效期 2 小时
+- **refresh_token**：默认有效期 30 天
+- 系统会在 access_token 过期前 5 分钟自动刷新
+- 如果 refresh_token 也过期，需要重新执行 `neo login`
+
+##### 常见问题
+
+**Q1: 浏览器无法自动打开怎么办？**  
+A: 命令行会输出授权 URL，手动复制到浏览器中打开即可。
+
+**Q2: Token 刷新失败怎么办？**  
+A: 如果 refresh_token 也过期（默认 30 天），需要重新执行 `neo login`。同时检查网络连接是否正常。
+
+**Q3: 授权登录后没有正常跳回 redirect_uri**  
+A: 可能被浏览器安装的插件影响，目前已知会影响授权登录的浏览器插件有：Neo UI Extension，请关闭插件后重试。
+
+#### 方式二：密码授权配置
+
+在项目根目录的 `neo.config.js` 文件中添加 NeoCRM 平台授权配置：
+
+```javascript
+module.exports = {
+  neoConfig: {
+    neoBaseURL: 'https://crm-cd.xiaoshouyi.com', // 平台根地址（默认：https://crm.xiaoshouyi.com）
+    tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址
+    // NeoCRM 授权配置
+    auth: {
+      client_id: 'xx', // 客户端 ID，从创建连接器的客户端信息中获取（Client_Id）
+      client_secret: 'xxx', // 客户端秘钥，从创建连接器的客户端信息中获取（Client_Secret）
+      username: 'xx', // 用户在销售易系统中的用户名
+      /**
+       * password 为 用户在销售易系统中的账号密码加上 8 位安全令牌。
+       * 例如，用户密码为 123456，安全令牌为 ABCDEFGH，则 password 的值应为 123456ABCDEFGH。
+       */
+      password: 'xx xx' // 用户账户密码 + 8 位安全令牌
+    },
+  },
+}
+```
+
+##### 授权配置获取方式
+
+1. **客户端 ID 和客户端秘钥**：需通过创建连接器获取
+   - 访问 [销售易文档中心](https://doc.xiaoshouyi.com) / 创建连接器
+   - 创建连接器后，从客户端信息中获取 `Client_Id` 和 `Client_Secret`
+
+2. **安全令牌**：如何获取安全令牌
+   - 访问 [销售易文档中心](https://doc.xiaoshouyi.com) / OAuth安全认证 / 密码模式 / 获取令牌
+   - 按照文档说明获取 8 位安全令牌
+   - `password` 字段 = 用户账户密码 + 8 位安全令牌（直接拼接，无空格或分隔符）
+
+#### OAuth2 模式 vs 密码模式
+
+| 特性 | OAuth2 授权码模式 | 密码模式 |
+|------|------------------|---------|
+| 安全性 | ✅ 高（无需在配置文件中存储密码） | ⚠️ 较低（需要配置密码和安全令牌） |
+| Token 刷新 | ✅ 自动刷新 | ✅ 自动刷新 |
+| 有效期 | 2 小时（可自动刷新） | 永不过期 |
+| 推荐程度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
+
+---
+
+### 配置项说明（neo-cmp-cli）
+[请查看neo-cmp-cli](https://www.npmjs.com/package/neo-cmp-cli)

package/template/empty-custom-cmp-template/commitlint.config.js

@@ -0,0 +1,59 @@
+/**
+ * https://www.npmjs.com/package/@commitlint/config-conventional\
+ *
+ * Git提交规范-配置文件
+ * Commit message 由Header、Body 和 Footer三个部分组成，其格式如下：
+ *  <type>(<scope>): <subject>
+ *  <BLANK LINE>
+ *   <body>
+ *  <BLANK LINE>
+ *  <footer>
+ *
+ *【备注】
+ * type 用于说明 commit 的类别，常用下面 7 个标识：
+ * scope 用于说明当前功能点作用于哪个页面或者哪个功能模块；
+ * subject 用于简短的描述当前commit，不超过50个字符；
+ * body 用于填写对本次 commit 的详细描述，可以分成多行；
+ * footer 不兼容变动声明，或者关闭 Issue。
+ *
+ * 【type类型取值类型】
+ * feat：新功能（feature）
+ * fix：功能优化
+ * bug：修补bug
+ * docs：文档（documentation）
+ * style：格式（不影响代码运行的变动）
+ * refactor：重构（即不是新增功能，也不是修改bug的代码变动）
+ * test：增加测试
+ * chore：构建过程或辅助工具的变动
+ * build：影响构建系统或外部依赖项的更改（示例范围：gulp，broccoli，npm）
+ * ci：对 CI 配置文件和脚本的更改（示例范围：Travis，Circle，BrowserStack，SauceLabs）
+ * perf：改进性能的代码更改
+ *
+ */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'bug',
+        'docs',
+        'style',
+        'refactor',
+        'test',
+        'chore',
+        'perf',
+        'build',
+        'ci',
+      ],
+    ],
+    'type-empty': [2, 'never'],
+    'scope-empty': [1, 'never'],
+    'subject-full-stop': [0, 'never'],
+    'subject-case': [0, 'never'],
+  },
+};