neo-cmp-cli 1.5.6 → 1.6.0-beta.10

package/README.md

@@ -21,72 +21,82 @@ neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.
 
 ## 快速开始
 
-### 方法一：全局安装自定义组件开发工具
-##### 1) 全局安装
+#### 1) 全局安装自定义组件开发工具
 ```bash
 yarn global add neo-cmp-cli
 # 或
 npm i -g neo-cmp-cli
 ```
-##### 2) 创建自定义组件（默认 React+TS，可用 -t 指定模板，-n 指定自定义组件名称）
-```bash
-neo init -t=react-ts
-```
-##### 3) 进入自定义组件项目根目录，安装依赖并运行
+
+#### 2) 创建自定义组件项目
 ```bash
-# 创建自定义组件项目
+# 方式一：创建空的自定义组件项目
 neo createProject
 
-# 也可以根据模板创建自定义组件项目
+# 方式二：根据模板创建自定义组件项目（默认 React+TS，可用 -t 指定模板，-n 指定自定义组件名称）
 neo init
+```
+
+#### 3) 进入自定义组件项目根目录，安装依赖并运行
+```bash
+cd xxCmpProject
+```
 
+#### 4) 创建自定义组件
+```bash
 # 在当前项目中创建一个自定义组件
 neo createCmp
+```
+默认在当前项目 src/components/ 目录下新增自定义组件。
 
+#### 5) 本地预览自定义组件内容
+```bash
 # 预览自定义组件内容
 neo preview
-
-# 外链调试（在平台线上预览与调试）
-neo linkDebug
-
-# 构建并发布到 NeoCRM（需自行添加授权配置，并确保 package.json 的 name 唯一、version 不重复）
-neo pushCmp
 ```
+执行成功后，默认自动打开本地浏览器预览自定义组件内容。
 
-### 方法二：在现有业务项目中使用自定义组件开发工具
-此方式可用于将现有业务组件发布成平台可用自定义组件。
-
-##### 1) 安装到当前项目，并添加开发依赖
-使用以下安装命令时会自动将 neo-cmp-cli 添加成当前项目开发依赖
+#### 6) 外链调试（在 NeoCRM 端预览与调试）
 ```bash
-yarn add neo-cmp-cli --dev
-# 或
-npm i neo-cmp-cli --save-dev
-```
-##### 2) 在 package.json 添加可用执行脚本
-```bash
-"preview": "neo preview",
-"linkDebug": "neo linkDebug",
-"pushCmp": "neo pushCmp"
+neo linkDebug
 ```
-##### 3) 初始化配置文件
+需在NeoCRM / 页面设计器端启动 debug 模式，并添加控制台输出的外链脚本地址，方可在页面设计器端使用当前自定义组件。
+
+#### 7) 构建并发布到 NeoCRM
 ```bash
-neo config init
+neo pushCmp
 ```
-##### 4) 开发调试和发布
-```bash
-npm run preview
-npm run linkDebug
-npm run pushCmp
+##### 需自行添加授权配置，并确保 package.json 的 name 唯一、version 不重复。
+```javascript
+module.exports = {
+  neoConfig: {
+    neoBaseURL: 'https://crm-cd.xiaoshouyi.com', // 平台根地址（默认：https://crm.xiaoshouyi.com）
+    tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址（默认：https://login.xiaoshouyi.com/auc/oauth2/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](https://doc.xiaoshouyi.com) / 创建连接器；
+2、如何获取 安全令牌 见：[https://doc.xiaoshouyi.com](https://doc.xiaoshouyi.com) / OAuth安全认证 / 密码模式 / 获取令牌；
+3、发布成功后即可在 NeoCRM 对应租户环境的页面设计器和表单设计器中使用此自定义组件。
 
 ## 常用命令说明
-- **neo init**: 交互式创建自定义组件（支持 -t、--name）。
-- **neo createProject**: 创建自定义组件项目（支持 --name）。
-- **neo createCmp**: 在当前项目中创建一个自定义组件（支持 --name）。
-- **neo preview**: 本地预览自定义组件内容（支持 --name），默认支持热更新与接口代理。
-- **neo linkDebug**: 外链调试模式，在平台端页面设计器中调试自定义组件。
-- **neo publish2oss**: 构建并上传到对象存储（支持 --name，可自定义配置对象存储）。
+- **neo init**: 交互式创建自定义组件（支持 -t、--name）;
+- **neo createProject**: 创建自定义组件项目（支持 --name）;
+- **neo createCmp**: 在当前项目中创建一个自定义组件（支持 --name）;
+- **neo preview**: 本地预览自定义组件内容（支持 --name），默认支持热更新与接口代理;
+- **neo linkDebug**: 外链调试模式，在平台端页面设计器中调试自定义组件;
+- **neo publish2oss**: 构建并上传到对象存储（支持 --name，可自定义配置对象存储）;
 - **neo pushCmp**: 构建并发布到NeoCRM平台（支持 --name，需自行添加授权配置）。
 
 ## 开发须知
@@ -150,14 +160,13 @@ neo linkDebug
 ##### 需自行添加授权配置
 ```javascript
 module.exports = {
-  pushCmp: {
+  neoConfig: {
     neoBaseURL: 'https://crm-cd.xiaoshouyi.com', // 平台根地址（默认：https://crm.xiaoshouyi.com）
     tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址（默认：https://login.xiaoshouyi.com/auc/oauth2/token）
     // NeoCRM 授权配置
-    authConfig: {
+    auth: {
       /**
-       * 客户端 ID 和 客户端秘钥 需通过 创建连接器 获取，
-       * 详细见：https://doc.xiaoshouyi.com / 创建连接器。
+       * 客户端 ID 和 客户端秘钥 需通过 创建连接器 获取
        */
       client_id: 'xx', // 客户端 ID，从创建连接器的客户端信息中获取（Client_Id）
       client_secret: 'xxx', // 客户端秘钥，从创建连接器的客户端信息中获取（Client_Secret）
@@ -165,7 +174,6 @@ module.exports = {
       /**
        * password 为 用户在销售易系统中的账号密码加上 8 位安全令牌。
        * 例如，用户密码为 123456，安全令牌为 ABCDEFGH，则 password 的值应为 123456ABCDEFGH。
-       * 如何获取 安全令牌请见：https://doc.xiaoshouyi.com / OAuth安全认证 / 密码模式 / 获取令牌。
        */
       password: 'xx xx' // 用户账户密码 + 8 位安全令牌
     },
@@ -176,8 +184,12 @@ module.exports = {
 ##### 支持发布指定自定义组件
 执行 `neo pushCmp --name=xxCmp`
 
+##### 线上 NeoCRM 端使用
+发布成功后，即可在对应租户环境下的页面设计器和表单设计器中使用此自定义组件。
+
 #### 7）发布自定义组件至CDN
 执行 `neo publish2oss` 即可构建对应自定义组件，并自动将构建后资源上传到对象存储（OSS）中。  
+备注：请优先使用 neo pushCmp。
 
 ##### 发布前请确保
 - **package.json 的 name 唯一**
@@ -207,6 +219,9 @@ module.exports = {
 ##### 支持发布指定自定义组件
 执行 `neo publish2oss --name=xxCmp`
 
+##### 特别说明
+此发布方式只是将自定义组件构建产物发布到 CDN 上，如要使用自定义组件还需要手动添加到指定租户上（NeoCRM 管理端 / 自定义组件管理页）。
+
 ## 项目工程配置说明（neo.config.js）
 neo-cmp-cli 默认提供完整配置； 
 如需自定义，使用 `neo config init` 生成 `neo.config.js` 并按需修改。

package/package.json

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

package/src/module/index.js

@@ -2,14 +2,16 @@ const figlet = require('figlet'); // 用于输出图形文字
 const yargs = require('yargs'); // 命令行工具
 const chalk = require('chalk'); // 带样式的log输出
 const inquirer = require('inquirer'); // 问答式交互
-
+const ora = require('ora');
 const neoInit = require('./neoInit.js');
 const neoInitByCopy = require('./neoInitByCopy.js');
 const inspect = require('./inspect.js'); // 输出当前项目配置文件
 const neoConfigInit = require('../utils/neoConfigInit.js');
 const { validateProjectName } = require('../utils/projectNameValidator.js');
 const mainAction = require('./main.js'); // 入口文件
-const getCmpTypeByDir = require('../cmpUtils/getCmpTypeByDir.js');
+const getCmpTypeByDir = require('../utils/cmpUtils/getCmpTypeByDir.js');
+const NeoService = require('../neo/neoService.js');
+const curConfig = require('../config/index'); // 获取当前项目根目录下的配置文件
 
 // neo 的 package 文件
 const neoPackage = require('../../package.json');
@@ -67,6 +69,11 @@ yargs
             value: 'react-ts',
             short: 'react-ts'
           },
+          {
+            name: 'Neo 自定义组件（使用平台实体数据源）',
+            value: 'neo',
+            short: 'neo'
+          },
           {
             name: 'antd 自定义组件',
             value: 'antd',
@@ -77,11 +84,6 @@ yargs
             value: 'echarts',
             short: 'echarts'
           },
-          {
-            name: 'Neo 自定义组件',
-            value: 'neo',
-            short: 'neo'
-          },
           /*
           // 暂不提供 react js 模板（react js 模板已废弃）
           {
@@ -169,11 +171,13 @@ yargs
       if (argv.name) {
         mainAction.createCmpProjectByTemplate(argv.name);
       } else {
-        const questions = [{
-          name: 'name',
-          type: 'input',
-          message: '请设置自定义组件项目名称:',
-        }];
+        const questions = [
+          {
+            name: 'name',
+            type: 'input',
+            message: '请设置自定义组件项目名称:'
+          }
+        ];
 
         inquirer.prompt(questions).then((ans) => {
           // 验证项目名称是否合法
@@ -182,9 +186,9 @@ yargs
             console.error(errors.join('\n'));
             process.exit(1);
           }
-  
+
           if (!ans.name) {
-            console.error(errors.join('\n'));
+            console.error('自定义组件项目名称不能为空。');
             process.exit(1);
           } else {
             mainAction.createCmpProjectByTemplate(ans.name);
@@ -210,11 +214,13 @@ yargs
       if (argv.name) {
         mainAction.createCmpByTemplate(argv.name);
       } else {
-        const questions = [{
-          name: 'name',
-          type: 'input',
-          message: '请设置自定义组件名称:',
-        }];
+        const questions = [
+          {
+            name: 'name',
+            type: 'input',
+            message: '请设置自定义组件名称:'
+          }
+        ];
 
         inquirer.prompt(questions).then((ans) => {
           if (!ans.name) {
@@ -227,6 +233,55 @@ yargs
       }
     }
   )
+  .command(
+    'pullCmp [options]',
+    '拉取线上自定义组件',
+    (yargs) => {
+      yargs
+        .reset()
+        .usage(titleTip('Usage') + ': $0 preview [options]')
+        .option('name', {
+          alias: 'n',
+          describe: '自定义组件名称'
+        })
+        .alias('h', 'help');
+    },
+    async (argv) => {
+      if (argv.name) {
+        mainAction.pullCmp(argv.name);
+      } else {
+        // 创建 neoService 实例
+        const neoService = new NeoService(curConfig.neoConfig);
+        const spinner = ora('正在获取自定义组件列表...').start();
+        const cmpList = await neoService.getCustomCmpList();
+        if (cmpList.length === 0) {
+          console.error('当前租户暂无任何自定义组件。');
+          process.exit(1);
+        }
+        spinner.succeed('自定义组件列表获取成功。');
+        const cmpTypeChoices = cmpList.map((cmpItem) => ({
+          name: cmpItem.label,
+          value: cmpItem.cmpType
+        }));
+        const questions = [
+          {
+            name: 'cmpType',
+            type: 'list',
+            message: '请选择要拉取的自定义组件:',
+            choices: cmpTypeChoices
+          }
+        ];
+        inquirer.prompt(questions).then((ans) => {
+          if (!ans.cmpType) {
+            console.error('自定义组件名称不能为空。');
+            process.exit(1);
+          } else {
+            mainAction.pullCmp(ans.cmpType, neoService);
+          }
+        });
+      }
+    }
+  )
   .command(
     'preview [options]',
     '预览指定自定义组件（仅预览组件本身内容）',