neo-cmp-cli 1.13.19 → 1.13.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +206 -609
  2. package/dist/config/auth.config.js +1 -1
  3. package/dist/neo/neoRequire.js +1 -1
  4. package/dist/package.json.js +1 -1
  5. package/package.json +1 -2
  6. package/template/antd-custom-cmp-template/package.json +1 -1
  7. package/template/asset-manage-template/package.json +2 -2
  8. package/template/echarts-custom-cmp-template/package.json +1 -1
  9. package/template/empty-custom-cmp-template/package.json +2 -2
  10. package/template/map-custom-cmp-template/package.json +1 -1
  11. package/template/neo-bi-cmps/package.json +2 -2
  12. package/template/neo-custom-cmp-template/package.json +2 -2
  13. package/template/neo-custom-cmp-template/src/components/customApi__c/README.md +90 -0
  14. package/template/neo-custom-cmp-template/src/components/customApi__c/index.tsx +184 -0
  15. package/template/neo-custom-cmp-template/src/components/customApi__c/model.ts +53 -0
  16. package/template/neo-custom-cmp-template/src/components/customApi__c/style.scss +116 -0
  17. package/template/neo-custom-cmp-template/src/components/entityTable__c/index.tsx +5 -1
  18. package/template/neo-custom-cmp-template/src/components/simpleCmp__c/index.tsx +4 -1
  19. package/template/neo-h5-cmps/neo.config.js +1 -1
  20. package/template/neo-h5-cmps/package.json +2 -2
  21. package/template/neo-h5-cmps/src/components/entityList__c/index.tsx +0 -1
  22. package/template/neo-order-cmps/package.json +2 -2
  23. package/template/neo-pipeline-cmps/package.json +2 -2
  24. package/template/neo-pipeline-cmps/src/components/showHealthResult__c/index.tsx +2 -1
  25. package/template/neo-web-entity-grid/package.json +2 -2
  26. package/template/neo-web-form/package.json +2 -2
  27. package/template/react-custom-cmp-template/package.json +1 -1
  28. package/template/react-ts-custom-cmp-template/package.json +1 -1
  29. package/template/vue2-custom-cmp-template/package.json +1 -1
  30. package/docs/H5/347/253/257 NeoEntityList /344/275/277/347/224/250/350/257/264/346/230/216.md" +0 -293
  31. package/docs/Web/347/253/257 NeoEntityGrid /344/275/277/347/224/250/350/257/264/346/230/216.md" +0 -1206
  32. package/docs//345/217/257/347/224/250/345/261/236/346/200/247/351/205/215/347/275/256/351/241/271.md +0 -801
  33. package/docs//351/200/232/347/224/250/344/273/243/347/220/206/346/216/245/345/217/243/forward.zip +0 -0
  34. package/docs//351/200/232/347/224/250/344/273/243/347/220/206/346/216/245/345/217/243//350/207/252/345/256/232/344/271/211API:/351/200/232/347/224/250/344/273/243/347/220/206/346/216/245/345/217/243/344/275/277/347/224/250/350/257/264/346/230/216.md +0 -13
package/README.md CHANGED
@@ -1,44 +1,45 @@
1
1
  # Neo 自定义组件开发工具
2
2
 
3
- neo-cmp-cli Neo 自定义组件开发工具,基于 [AKFun](https://github.com/wibetter/akfun) 的工程能力,提供初始化、编译构建、预览调试、热更新、多技术栈支持和发布等功能。
3
+ **neo-cmp-cli** 是面向 Neo 平台的自定义组件开发工具。它基于 [AKFun](https://github.com/wibetter/akfun) 的工程能力,提供项目初始化、编译构建、本地预览与热更新、多技术栈支持以及发布到 NeoCRM 等能力。
4
4
 
5
- ## 📑 目录
5
+ ## 目录
6
6
 
7
7
  - [主要特性](#主要特性)
8
8
  - [内置模板](#内置模板)
9
9
  - [快速开始](#快速开始)
10
10
  - [命令参考](#命令参考)
11
- - [授权配置](#授权配置)
12
- - [开发指南](#开发指南)
13
- - [配置说明](#配置说明)
11
+ - [CLI 常见问题](#cli-使用相关常见问题)
12
+ - [登录与授权](#登录授权配置)
13
+ - [组件开发说明](#组件开发说明)
14
+ - [前端工程配置](#前端工程配置说明)
14
15
 
15
16
  ---
16
17
 
17
- ## 主要特性
18
+ ## 主要特性
18
19
 
19
- - **零配置**: 内置默认配置(前端工程最佳实践),开箱可用
20
- - **多技术体系支持**: 支持 Vue2、React、React+TypeScript 多种技术栈类型自定义组件的调试、构建与发布
21
- - **多种构建类型**: 本地预览(含热更新/代理)、外链调试、库构建(UMD/ESM)、部署&发布
22
- - **灵活可配**: 支持构建入口、别名、代理、公共样式注入、ESLint/StyleLintBabel/Loader/Plugin 扩展等配置
23
- - **样式与规范**: 内置 Autoprefixer、Sass、PostCSS、ESLint、StyleLint
24
- - **发布至 NeoCRM 平台**: 支持一键发布到 NeoCRM 平台的能力,需自行补充授权配置
20
+ - **零配置**:内置符合前端工程实践的默认配置,开箱即用。
21
+ - **多技术栈**:支持 Vue2、React、React + TypeScript 等类型的自定义组件调试、构建与发布。
22
+ - **多种构建形态**:本地预览(含热更新与代理)、外链调试、库构建(UMD / ESM)、部署与发布。
23
+ - **灵活可配**:可配置构建入口、路径别名、代理、公共样式注入、ESLint / StyleLint、以及 Babel / Loader / Plugin 等扩展。
24
+ - **样式与规范**:内置 Autoprefixer、Sass、PostCSS、ESLint、StyleLint
25
+ - **对接 NeoCRM**:支持将组件发布到 NeoCRM 平台(需按文档完成授权配置)。
25
26
 
26
- ## 📦 内置模板
27
+ ## 内置模板
27
28
 
28
- 执行 `neo init` 时,CLI 会以列表展示可选模板;也可同时传入 `-t`(模板类型)与 `-n`(项目名称)跳过交互,直接从本仓库内置的 `template/` 目录初始化相应组件模板工程。
29
+ 执行 `neo init` 时,CLI 会以交互列表展示可选模板;若同时传入 `-t`(模板类型)与 `-n`(项目名称),可跳过交互,直接从本仓库 `template/` 目录初始化对应模板工程。
29
30
 
30
31
  | 模板类型 | 说明 | 参考仓库 |
31
- |-------------|------|----------|
32
- | `neo-web-entity-grid` | Web 端列表组件模板:含基础大列表、Picker 列表等示例组件 | (随 CLI 内置) |
33
- | `neo-h5-cmps` | H5 端业务组件模板:含全局搜索、数据列表、数据 Tabs、打开 AI 对话页等示例组件 | [neo-h5-cmps](https://github.com/wibetter/neo-h5-cmps) |
34
- | `neo` | 自定义业务组件模板:含实体表单、实体数据详情、实体数据表格等示例组件 | [neo-custom-cmp-template](https://github.com/wibetter/neo-custom-cmp-template) |
35
- | `neo-bi-cmps` | 数值指标组件模板: 可配置展示实体数据源中指标数据 | [neo-bi-cmps](https://github.com/xsy-neoui/neo-bi-cmps) |
36
- | `echarts` | ECharts 组件模板:含基于 ECharts 的图表示例组件(地图场景请使用 `amap` 模板) | [echarts-custom-cmp-template](https://github.com/wibetter/echarts-custom-cmp-template) |
32
+ | --- | --- | --- |
33
+ | `neo-web-entity-grid` | Web 端列表组件模板:含基础大列表、Picker 列表等示例 | (随 CLI 内置) |
34
+ | `neo-h5-cmps` | H5 端业务组件模板:含全局搜索、数据列表、数据 Tabs、打开 AI 对话页等示例 | [neo-h5-cmps](https://github.com/wibetter/neo-h5-cmps) |
35
+ | `neo` | 自定义业务组件模板:含实体表单、实体详情、实体数据表格等示例 | [neo-custom-cmp-template](https://github.com/wibetter/neo-custom-cmp-template) |
36
+ | `neo-bi-cmps` | 数值指标组件模板:可配置展示实体数据源中的指标数据 | [neo-bi-cmps](https://github.com/xsy-neoui/neo-bi-cmps) |
37
+ | `echarts` | ECharts 组件模板:含基于 ECharts 的图表示例(地图场景请使用 `amap` 模板) | [echarts-custom-cmp-template](https://github.com/wibetter/echarts-custom-cmp-template) |
37
38
  | `antd` | Ant Design 组件模板:含数据仪表板、搜索组件等示例 | [antd-custom-cmp-template](https://github.com/wibetter/antd-custom-cmp-template) |
38
- | `amap` | 地图组件模板:含基于高德地图 API 的示例组件 | [map-custom-cmp-template](https://github.com/wibetter/map-custom-cmp-template) |
39
+ | `amap` | 地图组件模板:含基于高德地图 API 的示例 | [map-custom-cmp-template](https://github.com/wibetter/map-custom-cmp-template) |
39
40
  | `vue2` | Vue2 组件模板:含基于 Vue2 的示例组件 | [vue2-custom-cmp-template](https://github.com/wibetter/vue2-custom-cmp-template) |
40
41
 
41
- **非交互创建示例**(需同时提供 `-t` 与 `-n`):
42
+ **非交互创建**(须同时提供 `-t` 与 `-n`)示例:
42
43
 
43
44
  ```bash
44
45
  neo init -t neo-web-entity-grid -n myWebListCmp
@@ -50,20 +51,21 @@ neo init -t amap -n myMapCmp
50
51
  neo init -t vue2 -n myVue2Cmp
51
52
  ```
52
53
 
53
- > **说明**:本地拷贝模式(默认)下,`templateList` 中仍保留 `react-ts`、`react` 等目录时,可通过 `neo init -t react-ts -n xxx` 等方式创建,但已不再出现在上述交互列表中;`react`(非 TS)模板在 CLI 侧已标记为废弃,建议优先选用上表中的模板。
54
+ > **说明**:在默认的本地拷贝模式下,若 `templateList` 中仍保留 `react-ts`、`react` 等目录,可通过 `neo init -t react-ts -n xxx` 等方式创建,但这些模板不会出现在上述交互列表中。`react`(非 TypeScript)模板在 CLI 侧已标记为废弃,建议优先选用上表中的模板。
54
55
 
55
56
  ---
56
57
 
57
- ## 🚀 快速开始
58
+ ## 快速开始
58
59
 
59
60
  ### 1. 安装工具
60
61
 
61
62
  ```bash
62
63
  yarn global add neo-cmp-cli --registry https://registry.npmmirror.com
63
- # 或(备注:使用国内淘宝的NPM源安装)
64
+ #
64
65
  npm i -g neo-cmp-cli --registry=https://registry.npmmirror.com
65
66
  ```
66
- 说明: 默认使用 国内淘宝的NPM源 安装 neo-cmp-cli,提高安装速度。
67
+
68
+ > **说明**:示例命令使用 [npmmirror](https://www.npmmirror.com/) 镜像,以加快安装速度;也可改用默认 npm 源。
67
69
 
68
70
  ### 2. 创建项目
69
71
 
@@ -71,7 +73,7 @@ npm i -g neo-cmp-cli --registry=https://registry.npmmirror.com
71
73
  # 方式一:创建空的自定义组件项目
72
74
  neo create project
73
75
 
74
- # 方式二:根据模板创建自定义组件项目(交互选择模板;或 neo init -t <类型> -n <项目名称> 非交互)
76
+ # 方式二:按模板创建(交互选择模板;或使用 neo init -t <类型> -n <名称> 非交互)
75
77
  neo init
76
78
  ```
77
79
 
@@ -91,729 +93,326 @@ yarn install
91
93
  neo create cmp
92
94
  ```
93
95
 
94
- 默认在当前项目 `src/components/` 目录下新增自定义组件。
96
+ 默认在 `src/components/` 下新增自定义组件目录。
95
97
 
96
98
  ### 5. 本地预览
97
99
 
98
100
  ```bash
99
- # 预览自定义组件内容
100
101
  neo preview
101
102
  ```
102
103
 
103
- 执行成功后,默认自动打开本地浏览器预览自定义组件内容。
104
+ 命令成功执行后,一般会默认打开浏览器进行预览。
104
105
 
105
- ### 6. 外链调试(在 NeoCRM 端预览与调试)
106
+ ### 6. 外链调试(在 NeoCRM / 页面设计器中调试)
106
107
 
107
108
  ```bash
108
109
  neo linkDebug
109
110
  ```
110
111
 
111
- > **提示**:需在 NeoCRM / 页面设计器端启动 debug 模式,并添加控制台输出的外链脚本地址,方可在页面设计器端使用当前自定义组件。详细步骤请参考 [本地调试自定义组件](#本地调试自定义组件)。
112
+ > **提示**:需在 NeoCRM 或页面设计器中开启 debug 模式,并将控制台输出的外链脚本地址加入「外部链接」。详细步骤见下文 [本地调试自定义组件](#2-本地调试自定义组件)。
112
113
 
113
- ### 7. 发布到 NeoCRM 平台
114
+ ### 7. 发布到 NeoCRM
114
115
 
115
116
  ```bash
116
117
  neo push cmp
117
118
  ```
118
119
 
119
- > **提示**:发布前请确保 `package.json` `name` 唯一、`version` 不重复,并已配置 NeoCRM 平台授权信息。详细说明请参考 [发布自定义组件至 NeoCRM](#发布自定义组件至-neocrm)。
120
+ > **提示**:发布前请确认 `package.json` `name` 在平台内唯一、`version` 未与已发布版本冲突,并完成 NeoCRM 授权配置。详见 [发布自定义组件至 NeoCRM](#3-发布自定义组件至-neocrm)。
120
121
 
121
122
  ---
122
123
 
123
- ## 📋 命令参考
124
+ ## 命令参考
124
125
 
125
126
  | 命令 | 说明 | 参数 |
126
- |------|------|------|
127
- | `neo init` | 根据模板创建自定义组件项目 | `-t` / `--type` 模板类型(见 [内置模板](#内置模板)),`-n` / `--name` 项目名称;两者同时传入时为非交互 |
128
- | `neo create project` | 创建自定义组件空项目(不含任何自定义组件) | `--name` 指定项目名称 |
129
- | `neo create cmp` | 在当前项目中创建一个自定义组件 | `--name` 指定组件名称,`--targetDevice` / `-d` 指定项目类型 |
130
- | `neo login` | 登录 NeoCRM 平台(OAuth2 授权模式) | `-e` / `--env` 环境类型 |
131
- | `neo logout` | 登出 NeoCRM 平台 | - |
132
- | `neo preview` | 本地预览自定义组件内容,默认支持热更新与接口代理。(备注:当自定义组件使用 neo-ui-common 或者 neo-ui-component-web 时则不支持本地预览。) | `--name` 指定组件名称 |
133
- | `neo linkDebug` | 外链调试模式,在平台端页面设计器中调试自定义组件 | `--platform` 指定调试设备类型,`--name` 指定组件名称 |
134
- | `neo push cmp` | 构建并发布到 NeoCRM 平台 | `--name` 指定组件名称 |
135
- | `neo pull cmp` | 拉取线上自定义组件(NeoCRM 平台)至当前项目 | `--name` 指定组件名称 |
136
- | `neo delete cmp` | 删除线上自定义组件(NeoCRM 平台) | `--name` 指定组件名称 |
137
-
138
- ## 常见问题
139
-
140
- **Q1: 在 Windows VSCode 控制台执行 neo 相关命令出现报错**
141
- A: 如果提示“在此系统上禁止运行脚本”,这个可能是 Windows 客户端的默认安全策略影响,可尝试在控制台输入以下命令解决:
127
+ | --- | --- | --- |
128
+ | `neo init` | 按模板创建自定义组件项目 | `-t` / `--type` 模板类型(见 [内置模板](#内置模板)),`-n` / `--name` 项目名称;两者同时传入时为非交互模式 |
129
+ | `neo create project` | 创建空项目(不含任何自定义组件) | `--name` 指定项目名称 |
130
+ | `neo create cmp` | 在当前项目中创建一个自定义组件 | `--name` 组件名,`--targetDevice` / `-d` 指定目标设备类型 |
131
+ | `neo login` | 登录 NeoCRMOAuth2 | `-e` / `--env` 环境类型 |
132
+ | `neo logout` | 登出 NeoCRM | |
133
+ | `neo preview` | 本地预览,默认支持热更新与接口代理。若组件依赖 `neo-ui-common` `neo-ui-component-web`,则不支持本地预览 | `--name` 指定组件名 |
134
+ | `neo linkDebug` | 外链调试,在页面设计器中调试自定义组件 | `--platform` 调试设备类型,`--name` 组件名 |
135
+ | `neo push cmp` | 构建并发布到 NeoCRM | `--name` 组件名 |
136
+ | `neo pull cmp` | NeoCRM 拉取线上组件到当前项目 | `--name` 组件名 |
137
+ | `neo delete cmp` | 删除 NeoCRM 上的指定自定义组件 | `--name` 组件名 |
142
138
 
143
- ```bash
144
- Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser
139
+ ## CLI 使用相关常见问题
140
+
141
+ **Q1:在 Windows 的 VS Code 终端中执行 `neo` 相关命令报错**
142
+
143
+ A:若提示「在此系统上禁止运行脚本」,多为 PowerShell 执行策略限制。可在当前用户范围放宽策略(需自行评估安全策略是否适用):
144
+
145
+ ```powershell
146
+ Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser
145
147
  ```
146
148
 
147
- 说明:以上命令用于设置 允许当前用户在此 Windows 客户端执行所有脚本。[关于 PowerShell 执行策略](https://learn.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.5)
149
+ > 说明:上述命令允许当前用户在 Windows 上执行脚本。更多背景见 Microsoft 文档:[about_Execution_Policies](https://learn.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.5)
148
150
 
149
- **Q2: 使用 neo-cmp-cli 时,提示 “无法将 xxx 项识别为 cmdlet、函数、脚本文件或可运行程序的名称**
150
- A: 这个报错是 Windows 最典型的环境变量 PATH 问题,PowerShell 找不到你安装的 CLI 命令所在的文件夹。可按以下 三个步骤把 npm 全局路径加到 PATH:
151
+ **Q2:提示「无法将“xxx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称」**
151
152
 
152
- 步骤1: 查看 npm 全局安装路径(自动获取)
153
- ```bash
153
+ A:多为 **PATH** 未包含 npm 全局可执行文件目录。可按下面步骤将 npm 全局路径加入 PATH(PowerShell 示例):
154
+
155
+ **步骤 1**:查看 npm 全局前缀路径
156
+
157
+ ```powershell
154
158
  $npmPath = npm config get prefix
155
159
  ```
156
160
 
157
- 步骤2: 把路径加到当前终端 PATH(立刻生效)
158
- ```bash
161
+ **步骤 2**:将路径加入当前会话的 PATH(立即生效)
162
+
163
+ ```powershell
159
164
  $env:PATH += ";$npmPath"
160
165
  ```
161
166
 
162
- 步骤3: 永久写入系统环境变量(以后重启也能用)
163
- ```bash
167
+ **步骤 3**:写入用户级环境变量(新开终端仍生效)
168
+
169
+ ```powershell
164
170
  [Environment]::SetEnvironmentVariable("PATH", $env:PATH + ";$npmPath", "User")
165
171
  ```
166
172
 
167
- 说明: 出现以上问题,通常是因为安装 Node 时没有勾选「Automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes.」。
173
+ > **说明**:若安装 Node.js 时未勾选安装必要工具等选项,也可能导致全局命令不可用;请结合本机安装方式排查。
168
174
 
169
175
  ---
170
176
 
171
- ## 🔐 授权配置
177
+ ## 登录授权配置
172
178
 
173
- 使用 `neo push cmp`、`neo pull cmp`、`neo delete cmp` 等命令与 NeoCRM 平台交互时,需要配置授权信息。
179
+ 使用 `neo push cmp`、`neo pull cmp`、`neo delete cmp` 等与 NeoCRM 交互前,需要完成授权。
174
180
 
175
- ### 方式一:OAuth2 登录授权(推荐)
181
+ ### 方式一:OAuth2 登录(推荐)
176
182
 
177
- OAuth2 授权码模式更加安全可靠,无需用户配置账户名和密码。
183
+ OAuth2 授权码模式无需在配置文件中保存账户密码,相对更安全。
178
184
 
179
185
  #### 使用步骤
180
186
 
181
- 1. **登录 NeoCRM 平台**
187
+ 1. **登录 NeoCRM**
188
+
182
189
  ```bash
183
190
  neo login
184
191
  ```
185
-
186
- 执行流程:
187
- - 自动打开浏览器访问授权页面
188
- - 在浏览器中输入 NeoCRM 账号密码进行登录(需选择对应的租户)
189
- - 授权成功后自动跳转回本地(附带 code)
190
- - cli 端 通过 code 获取 Token,并自动保存到项目的 `.neo-cli/token.json` 文件中
191
-
192
- 2. **登出 NeoCRM 平台**
192
+
193
+ 典型流程:
194
+
195
+ - 自动打开浏览器进入授权页;
196
+ - 在浏览器中登录 NeoCRM(需选择对应租户);
197
+ - 授权成功后跳转回本地(携带 `code`);
198
+ - CLI 用 `code` 换取 Token,并写入项目内 `.neo-cli/token.json`。
199
+
200
+ 2. **登出**
201
+
193
202
  ```bash
194
203
  neo logout
195
204
  ```
196
-
197
- 功能:清除本地保存的 token 文件,下次使用需要重新登录。
198
205
 
199
- ##### neo login 选择「自定义环境」时的授权配置示例
206
+ 会清除本地保存的 token,下次使用需重新登录。
207
+
208
+ ##### 在 `neo login` 中选择「自定义环境」时的配置示例
200
209
 
201
210
  ```javascript
202
211
  // neo.config.js
203
212
  module.exports = {
204
213
  neoConfig: {
205
214
  neoBaseURL: 'https://crm-xx.xiaoshouyi.com', // 平台根地址(默认:https://crm.xiaoshouyi.com)
206
- loginURL: 'https://login-xx.xiaoshouyi.com/auc/oauth2/auth', // 登录授权 URL(用于获取 code)
207
- tokenAPI: 'https://login-xx.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址
215
+ loginURL: 'https://login-xx.xiaoshouyi.com/auc/oauth2/auth', // 授权页 URL(获取 code)
216
+ tokenAPI: 'https://login-xx.xiaoshouyi.com/auc/oauth2/token', // 换取 Token 的接口
208
217
  },
209
218
  }
210
219
  ```
211
220
 
212
221
  #### Token 有效期
213
222
 
214
- - **access_token**:默认有效期 2 小时
215
- - **refresh_token**:默认有效期 30
216
- - 系统会在 access_token 过期前 5 分钟自动刷新
217
- - 如果 refresh_token 也过期,需要重新执行 `neo login`
223
+ - **access_token**:默认约 2 小时有效;
224
+ - **refresh_token**:默认约 30 天有效;
225
+ - 系统会在 access_token 过期前约 5 分钟尝试自动刷新;
226
+ - refresh_token 也过期,需重新执行 `neo login`。
227
+
228
+ #### 授权登录常见问题
218
229
 
219
- #### 常见问题
230
+ **Q1:浏览器没有自动打开?**
220
231
 
221
- **Q1: 浏览器无法自动打开怎么办?**
222
- A: 命令行会输出授权 URL,手动复制到浏览器中打开即可。
232
+ A:命令行会打印授权 URL,复制到浏览器中打开即可。
223
233
 
224
- **Q2: Token 刷新失败怎么办?**
225
- A: 如果 refresh_token 也过期(默认 30 天),需要重新执行 `neo login`。同时检查网络连接是否正常。
234
+ **Q2Token 刷新失败?**
226
235
 
227
- **Q3: 授权登录后没有正常跳回 redirect_uri**
228
- A: 可能被浏览器安装的插件影响,目前已知会影响授权登录的浏览器插件有:Neo UI Extension,请关闭插件后重试。
236
+ A:若 refresh_token 已过期,需重新执行 `neo login`;同时检查网络是否正常。
229
237
 
230
- ### 方式二:密码授权配置
238
+ **Q3:登录后没有正确跳回 redirect_uri?**
231
239
 
232
- 在项目根目录的 `neo.config.js` 文件中添加 NeoCRM 平台授权配置:
240
+ A:可能被浏览器扩展干扰;已知 **Neo UI Extension** 可能影响授权流程,可暂时关闭后重试。
241
+
242
+ ### 方式二:密码模式
243
+
244
+ 在项目根目录 `neo.config.js` 中配置 NeoCRM 授权(示例):
233
245
 
234
246
  ```javascript
235
247
  module.exports = {
236
248
  neoConfig: {
237
249
  neoBaseURL: 'https://crm-cd.xiaoshouyi.com', // 平台根地址(默认:https://crm.xiaoshouyi.com)
238
- tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 获取接口地址
239
- // NeoCRM 授权配置
250
+ tokenAPI: 'https://login-cd.xiaoshouyi.com/auc/oauth2/token', // Token 接口
240
251
  authType: 'password',
241
252
  auth: {
242
- client_id: 'xx', // 客户端 ID,从创建连接器的客户端信息中获取(Client_Id)
243
- client_secret: 'xxx', // 客户端秘钥,从创建连接器的客户端信息中获取(Client_Secret)
244
- username: 'xx', // 用户在销售易系统中的用户名
253
+ client_id: 'xx', // 客户端 ID(连接器中的 Client_Id)
254
+ client_secret: 'xxx', // 客户端密钥(Client_Secret)
255
+ username: 'xx', // 销售易用户名
245
256
  /**
246
- * password 用户在销售易系统中的账号密码加上 8 位安全令牌。
247
- * 例如,用户密码为 123456,安全令牌为 ABCDEFGH,则 password 的值应为 123456ABCDEFGH。
257
+ * password 为「账户密码 + 8 位安全令牌」直接拼接(无空格)。
258
+ * 例如密码为 123456、安全令牌为 ABCDEFGH,则填 123456ABCDEFGH。
248
259
  */
249
- password: 'xx xx' // 用户账户密码 + 8 位安全令牌
260
+ password: 'xxx', // 替换为实际「密码 + 安全令牌」
250
261
  },
251
262
  },
252
263
  }
253
264
  ```
254
265
 
255
- #### 授权配置获取方式
266
+ #### 如何获取配置项
256
267
 
257
- 1. **客户端 ID 和客户端秘钥**:需通过创建连接器获取
258
- - 访问 [销售易文档中心](https://doc.xiaoshouyi.com) / 创建连接器
259
- - 创建连接器后,从客户端信息中获取 `Client_Id` 和 `Client_Secret`
268
+ 1. **client_id / client_secret**
269
+ 通过「创建连接器」在客户端信息中获取 `Client_Id` 与 `Client_Secret`。可参考 [销售易文档中心](https://doc.xiaoshouyi.com) 中相关说明。
260
270
 
261
- 2. **安全令牌**:如何获取安全令牌
262
- - 访问 [销售易文档中心](https://doc.xiaoshouyi.com) / OAuth安全认证 / 密码模式 / 获取令牌
263
- - 按照文档说明获取 8 位安全令牌
264
- - `password` 字段 = 用户账户密码 + 8 位安全令牌(直接拼接,无空格或分隔符)
271
+ 2. **安全令牌与 password 字段**
272
+ 在文档中心 OAuth 相关章节(如密码模式、获取令牌)按说明获取 8 位安全令牌;`password` 一般为「登录密码 + 8 位安全令牌」直接拼接(无额外空格或分隔符,具体以官方文档为准)。
265
273
 
266
- ### OAuth2 模式 vs 密码模式
274
+ ### OAuth2 与密码模式对比
267
275
 
268
276
  | 特性 | OAuth2 授权码模式 | 密码模式 |
269
- |------|------------------|---------|
270
- | 安全性 | 高(无需在配置文件中存储密码) | ⚠️ 较低(需要配置密码和安全令牌) |
271
- | Token 刷新 | 自动刷新 | 自动刷新 |
272
- | 有效期 | 2 小时(可自动刷新) | 永不过期 |
273
- | 推荐程度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
277
+ | --- | --- | --- |
278
+ | 安全性 | 较高(不在配置中存明文密码) | 较低(需配置密码与令牌) |
279
+ | Token 刷新 | 支持自动刷新 | 支持自动刷新 |
280
+ | 有效期 | access_token 约 2 小时(可刷新) | 视平台与 refresh 策略而定(见官方文档) |
281
+ | 推荐程度 | 优先推荐 | 备选 |
274
282
 
275
283
  ---
276
284
 
277
- ## 📖 开发指南
285
+ ## 组件开发说明
278
286
 
279
287
  ### 1. 默认自动识别自定义组件
280
288
 
281
- - **自动生成入口配置**:当 `entry` 未配置时,自动从 `src/components` 目录下扫描并识别自定义组件,`src/components` 下的子目录名称作为自定义组件的名称,并以其目录下的 `index.ts/.tsx/.js/.jsx` 文件作为组件内容文件,`model.[tj]s` 作为模型内容文件
282
- - **自动注册自定义组件**:当 `entry` 未配置时,自动生成自定义组件注册文件和模型注册文件,并注入到构建脚本中,无需用户手动编写注册文件([neo-register](https://www.npmjs.com/package/neo-register)
283
- - **构建时自动增加样式隔离**:发布和 linkDebug 调试自定义组件时会自动给组件增加样式隔离(默认处理组件目录下的 (index|style).(scss|less) 样式文件),避免影响 Neo 平台样式。此模式对自定义组件根节点的样式命名有一定的规范要求(需要和组件名称保持一致),不符合规范会导致根节点样式失效。如需关闭此功能,请在 neo.config.js / webpack 中将 disableAutoAddStyleScope 设置为 true
284
-
285
- ### 2. 设置自定义组件属性配置项
286
-
287
- 通过 `neo init` 初始化的自定义组件,默认自带组件模型文件,所有和页面设计器关联的信息均在此文件中定义(详细见 model 文件中的注释说明)。
288
-
289
- 自定义组件模型文件中可以设置的属性:
290
-
291
- | 属性名 | 默认值 | 使用说明 |
292
- |-------|------------------|---------------|
293
- | cmpType | 在构建时根据当前组件目录名称自动生成 | 组件类型标识,用于标识组件的唯一性 |
294
- | label | - | 组件名称,用于设置在编辑器左侧组件面板中展示的名称 |
295
- | description | - | 组件描述,用于设置在编辑器左侧组件面板中展示的描述 |
296
- | iconUrl | - | 组件图标,用于设置在编辑器左侧组件面板中展示的图标 |
297
- | tags | ['自定义组件'] | 分类标签,用于设置在编辑器左侧组件面板哪个分类中展示 |
298
- | exposedToDesigner | true | 是否在页面设计器端可见 |
299
- | enableDuplicate | true | 在设计器中是否允许多次使用 |
300
- | targetPage | ['all'] | 适配的页面类型 |
301
- | targetObject | ['all'] | 支持的实体类型 |
302
- | targetApplication | ['all'] | 支持的应用类型 |
303
- | targetDevice | 'all' | 支持的设备类型 |
304
- | defaultComProps | - | 初次插入页面的默认属性数据 |
305
- | propsSchema | - | 定义组件在编辑器中可配置的属性 |
306
-
307
- 说明1:其中 `propsSchema` 用于添加自定义组件的属性配置面板,可用的配置项类型请见 [neo-register 使用文档](https://www.npmjs.com/package/neo-register)。
308
-
309
- 说明2:当前 NeoCRM 平台存在的页面类型:
310
- - all: 所有页面类型
311
- - indexPage: 首页
312
- - entityListPage: 实体列表页
313
- - entityFormPage: 实体表单页
314
- - entityDetailPage: 实体详情页
315
- - customPage: 自定义页面
316
- - bizPage: 业务页面
317
-
318
- ### 3. 使用平台实体数据源
319
-
320
- 可在自定义组件中使用 OpenAPI SDK 对接平台实体数据源,详细使用方法见 [neo-open-api](https://www.npmjs.com/package/neo-open-api)。
321
-
322
- ```typescript
323
- import { xObject } from 'neo-open-api';
324
-
325
- // 查询联系人列表
326
- const {data: contacts} = await xObject.query({
327
- xObjectApiKey: 'Contact',
328
- fields: ['name', 'phone', 'email'],
329
- page: 1,
330
- pageSize: 20,
331
- orderBy: 'createdAt desc'
332
- });
333
-
334
- // 创建新联系人
335
- const {data: newContact} = await xObject.create('Contact', {
336
- data: {
337
- name: '王五',
338
- phone: '13700137000',
339
- email: 'wangwu@example.com'
340
- }
341
- });
342
-
343
- // 更新联系人
344
- const {data: updatedContact} = await xObject.update('Contact', newContact.id, {
345
- data: {
346
- name: '王五(更新)'
347
- }
348
- });
349
-
350
- // 获取联系人详情
351
- const {data: contactDetail} = await xObject.get('Contact', newContact.id);
352
-
353
- // 删除联系人
354
- await xObject.delete('Contact', newContact.id);
355
- ```
356
-
357
-
358
- ### 4. 使用平台自定义API
359
-
360
- 可在自定义组件中使用 OpenAPI SDK 对接平台自定义API,详细使用方法见 [neo-open-api](https://www.npmjs.com/package/neo-open-api)。
361
-
362
- ```typescript
363
- import { customApi } from 'neo-open-api';
364
-
365
- // 基本用法
366
- const result = await customApi.run({
367
- apiUrl: '/rest/custom/api/endpoint', // 自定义API地址
368
- methodType: 'POST', // 请求方法,如 'GET', 'POST', 'PUT', 'DELETE' 等(可选,默认为 'POST')
369
- data: { // 请求数据
370
- key1: 'value1',
371
- key2: 'value2'
372
- }
373
- });
374
- ```
375
-
376
- **参数说明:**
377
- - `apiUrl`: 自定义API的完整地址(必填)
378
- - `methodType` 或 `method`: 请求方法,默认为 'POST'
379
- - `data`: 请求数据对象,会被包装在 `data` 字段中发送
380
-
381
- **返回结果:**
382
- ```typescript
383
- {
384
- status: boolean, // 返回 true 表示执行成功
385
- code: number | string, // 返回码
386
- msg: string, // 一般用于返回错误信息
387
- data: any // API返回的数据
388
- }
389
- ```
390
-
391
- **使用示例:**
392
- ```typescript
393
- import { customApi } from 'neo-open-api';
394
-
395
- // 执行自定义API
396
- const result = await customApi.run({
397
- apiUrl: '/rest/custom/api/processData',
398
- methodType: 'POST',
399
- data: {
400
- param1: 'value1',
401
- param2: 'value2'
402
- }
403
- });
404
- ```
405
-
406
- ### 5. 添加事件动作
407
-
408
- 以下说明如何在自定义组件中添加 **可触发事件**、**可执行动作(组件函数)**,以及(不推荐)**广播事件**,以便在 Neo 页面设计器的属性面板 / 事件配置中完成事件与动作绑定。
409
-
410
- #### 添加可触发的组件事件
411
-
412
- **1. 在组件中添加可触发的事件**
413
-
414
- **步骤 1:** 从 `neo-ui-common` 导入 `NeoEvent`。
415
-
416
- > **备注:** 无需单独安装 `neo-ui-common`,组件在 Neo 平台运行时会自动注入。
417
-
418
- ```typescript
419
- // 引入 neo-ui-common / NeoEvent
420
- // @ts-ignore
421
- import { NeoEvent } from 'neo-ui-common';
422
- ```
423
-
424
- **步骤 2:** 使用 `@NeoEvent.dispatch` 将某个方法声明为可由设计器绑定的触发事件方法。
425
-
426
- ```typescript
427
- /**
428
- * 表单提交事件
429
- */
430
- @NeoEvent.dispatch
431
- onSubmit() {
432
- console.log('触发了表单提交事件:', this.props);
433
- }
434
- ```
435
-
436
- **2. 在组件模型中声明会触发的事件**
437
-
438
- 上述步骤仅在运行时定义了事件方法,页面设计器还不知道该组件对外暴露哪些事件,因此需要在 **组件模型**(如 `*Model` 描述类)中声明:
439
-
440
- ```typescript
441
- /**
442
- * @file Object Form 表单组件对接编辑器的描述文件
443
- * @description 定义组件在 Neo 平台编辑器中的配置信息
444
- */
445
- export class EntityFormModel {
446
- // ... 组件模型其他内容
447
-
448
- /**
449
- * 声明当前组件会触发的所有事件
450
- * 备注:页面设计器端可用于进行事件绑定,在组件属性配置模式中配置事件动作
451
- */
452
- events = [
453
- {
454
- apiKey: 'onSubmit', // 事件名称(需与组件方法名一致)
455
- label: '提交表单后', // 设计器中展示的名称
456
- helpText: '表单提交后触发该事件', // 信息图标 hover 时的提示文本
457
- },
458
- ];
459
- }
460
- ```
461
-
462
- **3. 发布自定义组件**
463
-
464
- 发布后即可在页面设计器 / 属性配置面板中看到该组件可绑定的事件列表。
465
-
466
- ---
467
-
468
- #### 添加可执行的组件动作(组件函数)
469
-
470
- **1. 在组件中添加可执行的组件动作方法**
471
-
472
- **步骤 1:** 导入 `NeoEvent`(同上,无需安装 `neo-ui-common`)。
473
-
474
- ```typescript
475
- // 引入 neo-ui-common / NeoEvent
476
- // @ts-ignore
477
- import { NeoEvent } from 'neo-ui-common';
478
- ```
479
-
480
- **步骤 2:** 使用 `@NeoEvent.function` 将方法声明为可被其他组件或事件流调用的 **组件动作**。
481
-
482
- ```typescript
483
- /**
484
- * 加载表格数据
485
- * @param page 页码,默认为 1
486
- * @param pageSize 每页条数,默认为 10
487
- */
488
- @NeoEvent.function
489
- async loadData(page = 1, pageSize = 10) {
490
- const { xObjectApiKey } = this.props.xObjectDataApi || {};
491
- if (!xObjectApiKey) return;
492
-
493
- this.setState({ loading: true, error: null });
494
-
495
- try {
496
- const result = await xObject.query(this.props.xObjectDataApi);
497
-
498
- if (result && result.status) {
499
- const records = result.data || [];
500
- const totalSize = result.totalSize || 0;
501
-
502
- this.setState({
503
- dataSource: records,
504
- pagination: {
505
- current: page,
506
- pageSize,
507
- total: totalSize,
508
- },
509
- loading: false,
510
- });
511
- } else {
512
- this.setState({
513
- error: result?.msg || '获取数据失败',
514
- loading: false,
515
- });
516
- }
517
- } catch (error: any) {
518
- this.setState({
519
- error: error.message || '获取数据失败',
520
- loading: false,
521
- });
522
- }
523
- }
524
- ```
525
- 【备注】 如果组件方法中涉及 this 的使用,请在 constructor 构造函数中 将当前组件上下文绑定方法,确保组件方法在外部执行时this不丢失。(比如: this.loadData = this.loadData.bind(this))
526
-
527
- > 示例中使用了 `xObject.query`,请确保已从 `neo-open-api` 引入 `xObject`,并与实际业务 props 一致。
528
-
529
- **2. 在组件模型中声明可使用的组件函数**
289
+ - **扫描与入口**:CLI `src/components` 扫描子目录;子目录名为组件名;以目录下 `index.ts` / `tsx` / `js` / `jsx` 为组件入口,`model.ts` / `model.js` 为模型文件。
290
+ - **自动注册**:发布时会生成注册相关文件并注入构建流程,一般无需手写注册代码(参见 [neo-register](https://www.npmjs.com/package/neo-register))。
291
+ - **样式隔离**:发布或 `linkDebug` 时会对组件样式做隔离处理(默认处理目录下 `(index|style).(scss|less)` 等)。根节点请使用**与组件目录名一致**的类名(className),避免被样式隔离策略影响。若需关闭,可在 `neo.config.js` webpack 相关配置中将 `disableAutoAddStyleScope` 设为 `true`。
530
292
 
531
- 同样需要在模型中声明,设计器才能识别出可被调用的组件动作:
293
+ ### 2. 本地调试自定义组件
532
294
 
533
- ```typescript
534
- /**
535
- * @file XObject 表格组件对接编辑器的描述文件
536
- * @description 定义组件在 Neo 平台编辑器中的配置信息
537
- */
538
- export class EntityFormModel {
539
- // ... 组件模型其他内容
540
-
541
- // 当前组件支持的函数列表(其他组件可触发当前组件的函数)
542
- functions = [
543
- {
544
- apiKey: 'loadData',
545
- label: '刷新表格',
546
- helpTextKey: '刷新当前表格数据',
547
- },
548
- {
549
- apiKey: 'handleDelete',
550
- label: '删除记录',
551
- helpTextKey: '删除表格中指定记录',
552
- funcInParams: [
553
- {
554
- apiKey: 'id',
555
- label: '记录ID',
556
- type: 'String',
557
- required: true,
558
- },
559
- ],
560
- },
561
- ];
562
- }
563
- ```
564
-
565
- **3. 发布自定义组件**
566
-
567
- 发布后在页面设计器 / 属性配置面板 / 事件配置面板中可看到并选用上述组件函数(组件动作)。
568
-
569
- ---
570
-
571
- #### 广播事件(不推荐使用)
572
-
573
- 全局广播自由度高、难以追踪,请优先使用 **可触发事件 + 组件函数** 的声明式能力。
574
-
575
- **1. 在组件中触发广播事件**
576
-
577
- ```typescript
578
- // @ts-ignore
579
- import { NeoEvent } from 'neo-ui-common';
580
-
581
- componentDidMount() {
582
- // ... 其他代码
583
- console.log('触发了一个广播事件 entityFormInit。');
584
- NeoEvent.broadcast('entityFormInit', this.props);
585
- }
586
- ```
587
-
588
- **2. 在组件中接收广播事件**
589
-
590
- ```typescript
591
- // @ts-ignore
592
- import { NeoEvent } from 'neo-ui-common';
593
-
594
- componentDidMount() {
595
- // ... 其他代码
596
- NeoEvent.listen('entityFormInit', (eventData: any) => {
597
- console.log('EntityCardList 监听到了广播事件 entityFormInit: ', eventData);
598
- // ... 其他逻辑
599
- });
600
- }
601
- ```
602
-
603
- 事件名在 `broadcast` 与 `listen` 中需保持一致。
604
-
605
- ### 6. 默认复用平台第三方依赖
606
-
607
- 自定义组件构建过程中默认会剔除掉平台已有依赖模块(比如 antd、echarts、axios、lodash 等),确保自定义组件构建后的资源体积较小。
608
-
609
- #### 平台预置的第三方依赖包
610
-
611
- 自定义组件可直接使用以下第三方依赖包(NeoCRM 平台预置):
612
-
613
- | 依赖包 | 版本 |
614
- |--------|------|
615
- | react | ^16.13.1 |
616
- | react-dom | ^16.13.1 |
617
- | mobx | ^6.3.0 |
618
- | mobx-react | ^7.0.0 |
619
- | mobx-state-tree | ^5.4.0 |
620
- | echarts | 5.4.2 |
621
- | antd | 4.9.4 |
622
- | antd-mobile | 2.3.4 |
623
- | @ant-design/icons | ^4.8.0 |
624
- | video-react | 0.14.1 |
625
- | axios | ^0.27.2 |
626
- | classnames | ^2.3.2 |
627
- | qs | ^6.11.0 |
628
- | lodash | ^4.17.21 |
629
- | neo-ui-component-web | ^1.0.0 |
630
- | neo-ui-common | ^1.0.0 |
631
- | neo-open-api | ^1.1.9 |
632
- | amis | ^1.1.5 |
633
-
634
- > **注意**:自定义组件中请使用依赖包支持的版本,如版本不匹配运行时可能出现异常。
635
-
636
- ### 7. 本地调试自定义组件
637
-
638
- #### 步骤 1:启动外链调试模式
295
+ #### 步骤 1:启动外链调试
639
296
 
640
297
  ```bash
641
298
  neo linkDebug
642
299
  ```
643
300
 
644
- 启动成功后,当前命令控制台会输出一个可使用的外链脚本地址(通常为 `http://localhost:1024/index.js`)。
301
+ 成功后,终端会输出可使用的脚本地址(常见为 `http://localhost:1024/index.js`)。
645
302
 
646
- #### 步骤 2:登录 Neo 平台,打开页面设计器,并开启 debug 模式
303
+ #### 步骤 2:在设计器中开启 debug
647
304
 
648
- 在页面设计器 URL 后添加 `debug=true` 参数并重新访问,即可开启 debug 模式。
305
+ 在页面设计器 URL 后追加 `debug=true` 并重新访问。
649
306
 
650
- #### 步骤 3:添加外链脚本地址
307
+ #### 步骤 3:添加外链脚本
651
308
 
652
- 页面设计器开启 debug 模式后,左侧会展示**外部链接**管理面板。将第 1 步生成的「外链脚本地址」添加进来,即可在此页面设计器 / 组件物料面板中看到对应自定义组件。
309
+ 在设计器左侧「外部链接」面板中,将上一步输出的脚本地址加入,即可在物料中看到对应自定义组件。
653
310
 
654
- ### 8. 发布自定义组件至 NeoCRM
311
+ ### 3. 发布自定义组件至 NeoCRM
655
312
 
656
- 执行 `neo push cmp` 即可构建并发布自定义组件至 NeoCRM 平台,其构建后资源也会上传到 NeoCRM 平台端提供的 CDN 中。
313
+ 执行 `neo push cmp` 会构建组件并将资源发布到 NeoCRM(含平台 CDN 流程,以实际环境为准)。
657
314
 
658
- #### 使用方式
315
+ #### 用法
659
316
 
660
317
  ```bash
661
- # 方式一:交互式选择要发布的自定义组件
318
+ # 交互选择要发布的组件
662
319
  neo push cmp
663
320
 
664
- # 方式二:直接指定要发布的自定义组件名称
321
+ # 指定组件名
665
322
  neo push cmp --name=xxCmp
666
323
  # 或
667
324
  neo push cmp -n xxCmp
668
325
  ```
669
326
 
670
- #### 发布前请确保
327
+ #### 发布前检查
671
328
 
672
- - ✅ **package.json 的 name 唯一**:确保当前项目的 `package.json` 中的 `name` 字段在 NeoCRM 平台中唯一
673
- - ✅ **version 不重复**:每次发布时,请更新 `package.json` 中的 `version` 字段,确保版本号不重复
674
- - **已配置 NeoCRM 平台授权信息**:在 `neo.config.js` 中配置 `neoConfig.auth` 或使用 `neo login` 登录
675
- - **自定义组件已正确构建**:确保组件代码可以正常构建,且 `dist` 目录下有对应的构建产物
676
- - **组件模型文件存在**:确保组件目录下有 `model.ts` 或 `model.js` 文件,且正确导出了模型类
329
+ - `package.json` **`name`** NeoCRM 中唯一;
330
+ - **`version`** 与已发布版本不冲突(每次发布按需递增);
331
+ - 已完成 **NeoCRM 授权**(`neo.config.js` `neo login`);
332
+ - 组件能 **正常构建**,`dist` 中有对应产物;
333
+ - 组件目录存在 **`model.ts` 或 `model.js`**,且正确导出模型。
677
334
 
678
335
  #### 注意事项
679
336
 
680
- - **版本管理**:每次发布前务必更新 `package.json` 中的 `version` 字段,避免版本冲突
681
- - **组件名称唯一性**:确保 `package.json` 中的 `name` 字段在平台中唯一
682
- - **模型文件要求**:组件必须包含有效的模型文件(`model.ts` 或 `model.js`),且正确导出模型类
683
- - **技术栈一致性**:确保组件使用的技术栈与项目配置一致(React、React+TS、Vue2 等)
684
- - **构建产物完整性**:确保 `dist` 目录下包含组件的 JS 文件和模型文件(`xxCmp.js` 和 `xxCmpModel.js`)
685
- - **网络连接**:发布过程需要网络连接,确保可以访问 NeoCRM 平台和 OSS 服务
337
+ - 发布前务必更新 `version`,避免冲突;
338
+ - 组件名 / 包名在平台内需唯一;
339
+ - 技术栈需与项目配置一致(React、React+TS、Vue2 等);
340
+ - 发布过程需稳定访问 NeoCRM 与对象存储等相关服务。
341
+
342
+ #### 发布常见问题
686
343
 
687
- #### 常见问题
344
+ **Q:提示「未找到 NeoCRM 平台授权配置」?**
688
345
 
689
- **Q: 发布失败,提示"未找到 NeoCRM 平台授权配置"**
690
- A: 请检查 `neo.config.js` 文件中是否配置了 `neoConfig.auth`,或使用 `neo login` 进行 OAuth2 登录授权。
346
+ A:检查 `neo.config.js` 是否配置 `neoConfig.auth`,或先执行 `neo login`。
691
347
 
692
- **Q: 发布失败,提示"未找到自定义组件模型文件"**
693
- A: 请确保组件目录下有 `model.ts` 或 `model.js` 文件,且构建后在 `dist` 目录下生成了对应的 `xxCmpModel.js` 文件。
348
+ **Q:提示「未找到自定义组件模型文件」?**
694
349
 
695
- **Q: 发布失败,提示"获取 token 失败(授权配置错误)"**
696
- A: 请检查 `neo.config.js` 文件中是否配置了 `neoConfig.auth`,确保所有授权字段都已正确填写。
350
+ A:确认存在 `model.ts` / `model.js`,且构建产物中含对应的 `xxCmpModel.js`。
697
351
 
698
- #### 线上 NeoCRM 端使用
352
+ **Q:提示「获取 token 失败(授权配置错误)」?**
699
353
 
700
- 发布成功后,即可在对应租户环境下的页面设计器和表单设计器中使用此自定义组件。
354
+ A:核对 `neo.config.js` 中授权字段是否完整、正确。
701
355
 
702
- ### 9. 拉取线上自定义组件至本地项目
356
+ #### NeoCRM 中使用
703
357
 
704
- 执行 `neo pull cmp` 即可从 NeoCRM 平台拉取自定义组件源码到当前项目。该命令会将线上自定义组件的源码下载并解析到当前项目的 `src/components` 目录下。
358
+ 发布成功后,可在对应租户下的页面设计器、表单设计器等环境中使用该组件。
705
359
 
706
- #### 使用方式
360
+ ### 4. 拉取线上组件到本地
361
+
362
+ `neo pull cmp` 会从 NeoCRM 拉取组件源码到当前项目的 `src/components`。
707
363
 
708
364
  ```bash
709
- # 方式一:交互式选择要拉取的自定义组件
710
365
  neo pull cmp
711
-
712
- # 方式二:直接指定要拉取的自定义组件名称
713
366
  neo pull cmp --name=xxCmp
714
- # 或
715
367
  neo pull cmp -n xxCmp
716
368
  ```
717
369
 
718
- #### 拉取前请确保
719
-
720
- - ✅ **已配置 NeoCRM 平台授权信息**(`neo.config.js` 中的 `neoConfig.auth` 或使用 `neo login`)
721
- - ✅ **当前项目目录中不存在同名自定义组件**(`./src/components` 目录下)
722
- - ✅ **拉取的组件与当前项目技术栈一致**(React、React+TS、Vue2 等)
370
+ **拉取前**:已完成授权;`./src/components` 下不存在同名目录;线上组件技术栈与当前项目一致。
723
371
 
724
- #### 注意事项
725
-
726
- - 拉取的自定义组件会覆盖本地同名组件,请谨慎操作
727
- - 如果组件源码中包含新增的依赖包,拉取完成后会提示执行 `npm install` 或 `yarn install`
728
- - zip 源文件会保留在 `.neo-cli/zip-source` 目录下,可手动删除
372
+ **注意**:会覆盖本地同名目录;若有新依赖,拉取后按提示执行 `npm install` / `yarn install`;zip 等中间文件可能留在 `.neo-cli/zip-source`,可按需清理。
729
373
 
730
- ### 10. 删除线上自定义组件
374
+ ### 5. 删除线上自定义组件
731
375
 
732
- 执行 `neo delete cmp` 即可从 NeoCRM 平台删除指定的自定义组件。该命令会删除平台上的自定义组件,删除后该组件将无法在页面设计器和表单设计器中使用。
733
-
734
- #### 使用方式
376
+ `neo delete cmp` 会从 NeoCRM **删除**指定组件,删除后设计器中无法再选用(请谨慎操作)。
735
377
 
736
378
  ```bash
737
- # 方式一:交互式选择要删除的自定义组件
738
379
  neo delete cmp
739
-
740
- # 方式二:直接指定要删除的自定义组件名称
741
380
  neo delete cmp --name=xxCmp
742
- # 或
743
381
  neo delete cmp -n xxCmp
744
382
  ```
745
383
 
746
- #### 删除前请确保
747
-
748
- - ✅ **已配置 NeoCRM 平台授权信息**(`neo.config.js` 中的 `neoConfig.auth` 或使用 `neo login`)
749
- - ✅ **确认要删除的组件名称正确**,删除操作不可恢复
750
-
751
- #### 注意事项
752
-
753
- - ⚠️ **删除操作不可恢复**:删除后的自定义组件将无法恢复,请谨慎操作
754
- - ⚠️ **影响范围**:删除组件后,所有使用该组件的页面和表单将受到影响,请确保没有正在使用的场景
755
- - 💡 **建议先备份**:删除前建议先使用 `neo pull cmp` 拉取组件源码到本地进行备份
756
-
757
- ### 11. 自定义组件之间实现模块共享
758
-
759
- **步骤 1**:在自定义组件A(customCmpA)/ 配置文件中定义要共享出来的模块A(xxModuleA)
760
-
761
- ```javascript
762
- // customCmpA 组件的 neo.config.js
763
- module.exports = {
764
- neoCommonModule: {
765
- // exports: ['xxModule'], // 数组写法,用于导出当前自定义组件中的第三方依赖模块
766
- exports: { 'xxModuleA': path.resolve('./src/components/xxModuleA') }, // 对象写法,可用于导出自定义组件中的某个内容模块(需要使用绝对路径导出)
767
- },
768
- }
769
- ```
770
-
771
- **步骤 2**:在自定义组件B(customCmpB)/ 配置文件中声明需要使用自定义组件 A 分享出来的模块(xxModuleA)
772
-
773
- ```javascript
774
- // customCmpB 组件的 neo.config.js
775
- module.exports = {
776
- neoCommonModule: {
777
- remoteDeps: ['customCmpA'], // 远程依赖(自定义组件),表示当前自定义组件 B 会用到哪些自定义组件
778
- externals: ['xxModuleA'], // 自定义组件中需要剔除的外部模块(远程自定义组件中分享出来的模块),仅支持数组写法,需要和 remoteDeps 配合使用
779
- },
780
- }
781
- ```
782
-
783
- **步骤 3**:在自定义组件B 中使用自定义组件 A 分享出来的模块(xxModuleA)
384
+ **删除前**:已完成授权;再次确认组件名。**删除不可恢复**,且会影响已引用该组件的页面 / 表单;建议必要时先用 `neo pull cmp` 备份源码。
784
385
 
785
- ```javascript
786
- import xxModuleA from 'xxModuleA'; // 导入自定义组件 A 共享出来的模块
787
- ```
386
+ ---
788
387
 
789
- ## ⚙️ 配置说明
388
+ ## 前端工程配置说明
790
389
 
791
- neo-cmp-cli 默认提供完整配置;如需自定义,使用 `neo config init` 生成 `neo.config.js` 并按需修改。
390
+ neo-cmp-cli 内置一套完整默认配置;若需自定义,可执行 `neo config init` 生成 `neo.config.js` 后按需修改。
792
391
 
793
- 以下为常用配置示例(片段可自由组合)。
392
+ 以下为常用配置片段(可按需组合)。
794
393
 
795
394
  ### 基础配置
796
395
 
797
- #### 1. 代码规范与检查相关配置
396
+ #### 1. 代码规范(ESLint / StyleLint)
798
397
 
799
398
  ```javascript
800
399
  module.exports = {
801
400
  settings: {
802
- enableESLint: true, // 是否开启ESLint,默认开启ESLint检测代码格式
803
- enableESLintFix: false, // 是否ESLint自动修正代码格式
804
- enableStyleLint: true, // 是否开启StyleLint,默认开启StyleLint检测代码格式
805
- enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
401
+ enableESLint: true, // 是否启用 ESLint
402
+ enableESLintFix: false, // 是否自动修复 ESLint 问题
403
+ enableStyleLint: true, // 是否启用 StyleLint
404
+ enableStyleLintFix: false, // 是否自动修复 StyleLint 问题
806
405
  },
807
406
  }
808
407
  ```
809
408
 
810
- #### 2. 构建入口配置
409
+ #### 2. 构建入口
811
410
 
812
- > **提示**:当未配置 `entry` 时,cli 默认从 `src/components` 目录下扫描并识别自定义组件,并自动生成对应的 entry 构建入口配置。
411
+ > **提示**:未配置 `entry` 时,CLI 默认扫描 `src/components` 并生成各组件的 entry
813
412
 
814
- 优先级:`linkDebug/build2lib/pushCmp.entry` > `webpack.entry`
413
+ 优先级:`linkDebug` / `build2lib` / `pushCmp` 的 `entry` > `webpack.entry`。
815
414
 
816
- 如需自定义构建入口配置,请按如下结构调整项目工程配置文件(`neo.config.js`):
415
+ 自定义示例:
817
416
 
818
417
  ```javascript
819
418
  module.exports = {
@@ -826,56 +425,55 @@ module.exports = {
826
425
  }
827
426
  ```
828
427
 
829
- > **备注**:详细配置方法请查看 Webpack 官网 [关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry)。
428
+ > 更多说明见 Webpack 文档:[entry](https://www.webpackjs.com/configuration/entry-context/#entry)。
830
429
 
831
- #### 3. 解析配置(extensions/alias)
430
+ #### 3. 解析(extensions / alias)
832
431
 
833
432
  ```javascript
834
433
  module.exports = {
835
434
  webpack: {
836
435
  resolve: {
837
- extensions: ['.js', '.jsx', '.vue', 'json'],
436
+ extensions: ['.js', '.jsx', '.vue', '.json'],
838
437
  alias: {},
839
438
  },
840
439
  },
841
440
  }
842
441
  ```
843
442
 
844
- > **备注**:
845
- > - extensions 的详细配置方法请查看 Webpack 官网 [关于resolve-extensions的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-extensions)
846
- > - alias 的详细配置方法请查看 Webpack 官网 [关于resolve-alias的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-alias)
443
+ > - [resolve.extensions](https://www.webpackjs.com/configuration/resolve/#resolve-extensions)
444
+ > - [resolve.alias](https://www.webpackjs.com/configuration/resolve/#resolve-alias)
847
445
 
848
- #### 4. 页面模板与公共样式资源
446
+ #### 4. 页面模板与公共样式
849
447
 
850
448
  ```javascript
851
449
  module.exports = {
852
450
  webpack: {
853
- template: '', // 自定义页面模板路径
854
- sassResources: [], // sassResources 中添加的 样式文件会作为项目的公共SASS内容(变量、mixin、function等)
451
+ template: '', // 自定义 HTML 模板路径
452
+ sassResources: [], // 作为全局注入的 Sass 资源(变量、mixin 等)
855
453
  },
856
454
  }
857
455
  ```
858
456
 
859
457
  ### 高级配置
860
458
 
861
- #### 5. 依赖打包策略(忽略 node_modules
459
+ #### 5. 依赖打包策略(ignoreNodeModules
862
460
 
863
461
  ```javascript
864
462
  module.exports = {
865
463
  webpack: {
866
- ignoreNodeModules: true, // 打包时是否忽略 node_modules,默认为false
867
- allowList: [], // 用于配置会注入bundle中的依赖包(ignoreNodeModules 为 true 时生效)
464
+ ignoreNodeModules: true, // 是否忽略 node_modules(默认 false
465
+ allowList: [], // ignoreNodeModules 为 true 时仍打入 bundle 的包
868
466
  },
869
467
  }
870
468
  ```
871
469
 
872
- #### 6. TypeScript 声明文件与工程目录
470
+ #### 6. TypeScript 声明与扫描目录
873
471
 
874
472
  ```javascript
875
473
  module.exports = {
876
474
  webpack: {
877
- createDeclaration: false, // 可选择是否生成ts声明文件,默认为false
878
- projectDir: ['./src'], // 构建项目中,设置生效的目录(可同时设置多个目录),用于提高前端工程执行效率。可以不配置,默认为['./src']
475
+ createDeclaration: false, // 是否生成 .d.ts
476
+ projectDir: ['./src'], // 生效目录,可多个;默认 ['./src']
879
477
  },
880
478
  }
881
479
  ```
@@ -895,7 +493,7 @@ module.exports = {
895
493
  }
896
494
  ```
897
495
 
898
- #### 8. 本地开发代理与 HTTPS
496
+ #### 8. 本地预览代理与 HTTPS
899
497
 
900
498
  ```javascript
901
499
  module.exports = {
@@ -906,11 +504,10 @@ module.exports = {
906
504
  }
907
505
  ```
908
506
 
909
- > **备注**:
910
- > - [关于proxyTable的配置方法](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy)
911
- > - 启用 HTTPS 后,若浏览器提示不安全,可在 Chrome 地址栏打开 `chrome://flags/#allow-insecure-localhost` 并设置为 Enabled
507
+ > - [devServer.proxy](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy)
508
+ > - 启用 HTTPS 后若浏览器提示不安全,可在 Chrome 中打开 `chrome://flags/#allow-insecure-localhost` 并启用对应选项(以浏览器版本为准)。
912
509
 
913
- #### 9. 库构建(UMD/ESM)
510
+ #### 9. 库构建(UMD / ESM)
914
511
 
915
512
  ```javascript
916
513
  module.exports = {
@@ -930,14 +527,14 @@ module.exports = {
930
527
  }
931
528
  ```
932
529
 
933
- #### 10. 自定义 Loader / Plugin / Babel Plugins
530
+ #### 10. 自定义 Loader / Plugin / Babel 插件
934
531
 
935
532
  ```javascript
936
533
  module.exports = {
937
534
  webpack: {
938
- moduleRules: [], // 用于添加自定义 loaders
939
- plugins: [], // 用于添加自定义 plugins
940
- babelPlugins: [ // 用于添加自定义 Babel plugins
535
+ moduleRules: [],
536
+ plugins: [],
537
+ babelPlugins: [
941
538
  [
942
539
  'component',
943
540
  { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' },
@@ -947,9 +544,9 @@ module.exports = {
947
544
  }
948
545
  ```
949
546
 
950
- > **备注**:以上自定义 babelPlugins 用于实现 [element-ui 组件按需引入](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)。
547
+ > 上例常用于 [Element UI 按需引入](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)。
951
548
 
952
- 也支持以函数形式动态调整内置 Babel Plugins:
549
+ 也支持用函数动态调整内置 Babel 插件列表:
953
550
 
954
551
  ```javascript
955
552
  module.exports = {
@@ -964,4 +561,4 @@ module.exports = {
964
561
 
965
562
  ---
966
563
 
967
- 如需更多细节与高级用法,请参考模板项目与源码注释。
564
+ 更多细节请参考各模板项目与源码内注释。