neo-cmp-cli 1.2.25 → 1.2.26

package/README.md

@@ -31,7 +31,7 @@ npm i -g neo-cmp-cli
 ```bash
 neo init -t=react-ts
 ```
-3) 安装依赖并运行
+3) 进入自定义组件项目目录，安装依赖并运行
 ```bash
 # 预览自定义组件内容
 neo preview
@@ -76,21 +76,75 @@ npm run publish2oss
 - **neo linkDebug**: 外链调试模式，在平台端页面设计器中调试自定义组件。
 - **neo publish2oss**: 构建并上传到对象存储（可自定义配置对象存储）。
 
-## 自动识别自定义组件
+## 开发须知
+#### 1、默认自动识别自定义组件
 - **自动生成入口配置**: 当 `entry` 未配置时，自动从 `src/components` 目录下扫描并识别自定义组件，`src/components` 下的子目录名称作为自定义组件的 cmpType，并以其目录下的 `index.ts/.tsx/.js/.jsx` 文件作为组件内容文件，model.[tj]s 作为模型内容文件；
 - **自动注册自定义组件**: 当 `entry` 未配置时，自动生成自定义组件注册文件和模型注册文件，并注入到构建脚本中，无需用户手动编写注册文件 [neo-register](https://www.npmjs.com/package/neo-register)。
 
-## 支持本地构建并发布到对象存储（OSS）
+#### 2、如何设置自定义组件配置项
+通过 neo init 初始化的自定义组件，默认自带组件模型文件，所以和页面设计器关联的信息均在此文件定义（详细见 model 文件中的注释说明），其中 propsSchema 用于添加自定义组件的属性配置面板，当前可用的配置项类型请见 [neo-register 使用文档](https://www.npmjs.com/package/neo-register)。
+
+#### 3、在自定义组件使用平台实体数据源
+可使用 OpenAPI SDK 对接平台实体数据源，详细使用方法见 [neo-open-api](https://www.npmjs.com/package/neo-open-api)。
+
+#### 4、支持本地构建并发布到对象存储（OSS）
 执行 `neo publish2oss` 即可构建并上传到对象存储。发布前请确保：
 - **package.json 的 name 唯一**
 - **version 不重复**
 - 已按需配置对象存储参数（支持自定义）
 
-支持发布指定自定义组件：
+##### 支持发布指定自定义组件：
 执行 `neo publish2oss --cmpType=xxCmp`
 
-## 配置说明（neo.config.js）
-neo-cmp-cli 默认提供完整配置；如需自定义，使用 `neo config init` 生成 `neo.config.js` 并按需修改。
+##### 支持自定义对象存储配置
+```javascript
+module.exports = {
+  publish2oss: {
+    // 用于构建并发布至 OSS 的相关配置
+    //【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    // NODE_ENV: 'production',
+    // cssExtract: false, // 不额外提取css文件
+    ossType: 'ali', // oss类型：ali、baidu
+    ossConfig: {
+      endpoint: 'https://oss-cn-beijing.aliyuncs.com',
+      AccessKeyId: 'xxx',
+      AccessKeySecret: 'xx',
+      bucket: 'neo-cmp-xx-bucket' // 存储桶名称
+    },
+    assetsRoot: resolve('dist') // 上传指定目录下的脚本文件
+  },
+}
+```
+
+#### 5、默认复用平台第三方依赖
+自定义组件构建过程中默认会剔除掉平台已有依赖模块（比如 antd、echarts、axios、lodash 等），确保自定义组件构建后的资源体积较小。
+
+##### 自定义组件可直接使用的第三方依赖包（NeoCRM 平台预置）：
+- react: '^16.13.1',
+- react-dom: '^16.13.1',
+- mobx: '^6.3.0',
+- mobx-react: '^7.0.0',
+- mobx-state-tree' '^5.4.0',
+- echarts: '5.4.2',
+- antd: '4.9.4',
+- antd-mobile: '2.3.4',
+- @ant-design/icons: '^4.8.0',
+- video-react: '0.14.1',
+- axios: '^0.27.2',
+- classnames: '^2.3.2',
+- qs: '^6.11.0',
+- lodash: '^4.17.21',
+- neo-ui-component-web: '^1.0.0',
+- neo-ui-common' '^1.0.0',
+- neo-open-api: '^1.0.11',
+- amis: '^1.1.5'
+
+备注：自定义组件中请使用依赖包支持的版本，如版本不匹配运行时可能出现异常。
+
+## 项目工程配置说明（neo.config.js）
+neo-cmp-cli 默认提供完整配置； 
+如需自定义，使用 `neo config init` 生成 `neo.config.js` 并按需修改。
+
 以下为常用配置示例（片段可自由组合）。
 
 ### 1) 基础规范与检查

package/package.json

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

package/src/template/neo-custom-cmp-template/src/components/contact-form/index.tsx

@@ -8,6 +8,7 @@ import './style.scss';
 
 interface ContactFormProps {
   title: string;
+  showSubmitButton?: boolean;
   data?: any;
 }
 
@@ -150,7 +151,7 @@ export default class ContactForm extends React.PureComponent<
   }
 
   render() {
-    const { title } = this.props;
+    const { title, showSubmitButton } = this.props;
     const { formData, loading, entityTypeList } = this.state;
     const curAmisData = this.props.data || {};
     const systemInfo = curAmisData.__NeoSystemInfo || {};
@@ -222,22 +223,24 @@ export default class ContactForm extends React.PureComponent<
               </Select>
             </Form.Item>
 
-            <Form.Item className="form-actions">
-              <Button
-                onClick={this.resetForm}
-                disabled={loading}
-                style={{ marginRight: 8 }}
-              >
-                重置
-              </Button>
-              <Button
-                type="primary"
-                onClick={this.handleSubmit}
-                loading={loading}
-              >
-                保存联系人
-              </Button>
-            </Form.Item>
+            {showSubmitButton && (
+              <Form.Item className="form-actions">
+                <Button
+                  onClick={this.resetForm}
+                  disabled={loading}
+                  style={{ marginRight: 8 }}
+                >
+                  重置
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={this.handleSubmit}
+                  loading={loading}
+                >
+                  保存联系人
+                </Button>
+              </Form.Item>
+            )}
           </Form>
         </Card>
       </div>

package/src/template/neo-custom-cmp-template/src/components/contact-form/model.ts

@@ -25,6 +25,7 @@ export class ContactFormModel {
   defaultComProps = {
     title: '创建联系人',
     label: '联系人表单',
+    showSubmitButton: true,
   };
 
   // 设计器端预览时展示的默认数据
@@ -43,6 +44,12 @@ export class ContactFormModel {
       value: '创建联系人',
       placeholder: '请输入表单标题',
     },
+    {
+      type: 'switch',
+      name: 'showSubmitButton',
+      label: '显示提交按钮',
+      value: true,
+    },
   ];
 
   // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高

package/src/template/neo-custom-cmp-template/src/components/object-form/README.md

@@ -0,0 +1,176 @@
+# Object Form 对象表单组件
+
+基于 XObject 的对象表单组件，专门用于新增对象数据，支持动态字段渲染和多种字段类型。
+备注：使用 Neo Open API SDK（neo-open-api）提供的方法实现数据对象的新增操作。
+
+## 功能特性
+
+- 📝 **动态表单渲染**：根据 XObject 字段描述自动生成表单项
+- ➕ **数据新增**：支持向 Neo 平台新增数据记录
+- 🎨 **多种字段类型**：支持文本、数字、日期、下拉选择等多种字段类型
+- 📐 **响应式布局**：支持单列和双列布局，适配不同屏幕尺寸
+- ✅ **表单验证**：自动根据字段配置进行必填验证
+- 🔄 **表单重置**：支持快速重置表单内容
+- 🎯 **成功提示**：提交成功后显示友好的提示信息
+- ⚙️ **属性配置**：支持通过编辑器配置组件属性
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| formTitle | string | '新增数据' | 表单标题 |
+| xObjectDataApi | object | - | 实体数据源配置，包含 xObjectApiKey 和 fields |
+| xObjectDataApi.xObjectApiKey | string | '' | 数据对象的 API Key |
+| xObjectDataApi.fields | string[] | [] | 要显示的字段列表（可选，不传则显示所有字段） |
+| columnCount | 1 \| 2 | 1 | 表单列数（1列或2列） |
+| showResetButton | boolean | true | 是否显示重置按钮 |
+| onSuccess | function | - | 提交成功后的回调函数 |
+
+## 使用方法
+
+### 1. 在编辑器中使用
+
+1. 从组件面板拖拽 "对象表单" 组件到页面
+2. 在右侧属性面板中选择要操作的数据对象
+3. 选择要在表单中显示的字段
+4. 配置表单标题、列数等属性
+5. 保存并预览
+
+### 2. 代码中使用
+
+```tsx
+import ObjectForm from './components/object-form';
+
+// 基础使用
+<ObjectForm
+  formTitle="新增联系人"
+  xObjectDataApi={{
+    xObjectApiKey: 'customContact__c',
+    fields: ['name', 'phone__c', 'email__c'],
+  }}
+  columnCount={2}
+  showResetButton={true}
+  onSuccess={(data) => {
+    console.log('提交成功:', data);
+  }}
+/>
+```
+
+## 支持的字段类型
+
+组件支持以下字段类型，并自动渲染对应的输入组件：
+
+| 字段类型 | 输入组件 | 说明 |
+|---------|---------|------|
+| text | Input | 单行文本输入框 |
+| textarea | TextArea | 多行文本输入框 |
+| int / float | InputNumber | 数字输入框 |
+| email | Input (email) | 邮箱输入框 |
+| phone | Input (tel) | 电话号码输入框 |
+| url | Input (url) | URL 输入框 |
+| date | DatePicker | 日期选择器 |
+| datetime | DatePicker | 日期时间选择器 |
+| time | DatePicker | 时间选择器 |
+| picklist | Select | 单选下拉框 |
+| multipicklist | Select (multiple) | 多选下拉框 |
+| entityType | Select | 业务类型选择器 |
+
+## 技术实现
+
+### 核心依赖
+
+- **Ant Design**：UI 组件库
+- **React**：前端框架
+- **TypeScript**：类型支持
+- **Neo Open API**：数据操作 SDK
+
+### 数据流程
+
+1. **初始化**：组件挂载时获取字段描述和业务类型列表
+2. **表单生成**：根据字段描述动态生成表单项
+3. **数据验证**：提交前进行必填字段验证
+4. **数据提交**：使用 `xObject.create` 创建新记录
+5. **结果反馈**：显示成功或失败提示
+
+### 表单布局
+
+组件支持两种布局模式：
+
+- **单列布局**：适合字段较多或需要宽输入框的场景
+- **双列布局**：适合字段较少或需要紧凑布局的场景
+
+## 样式定制
+
+组件提供了完整的 SCSS 样式文件，支持以下定制：
+
+- 表单样式（标签、输入框、间距等）
+- 按钮样式（颜色、大小、位置等）
+- 成功提示样式（动画、颜色等）
+- 响应式设计（移动端适配）
+
+## 注意事项
+
+1. **权限要求**：确保用户有对应 XObject 的写入权限
+2. **必填字段**：表单会根据字段的 required 属性进行验证
+3. **日期格式**：日期类型字段会自动转换为时间戳格式提交
+4. **错误处理**：组件内置了完善的错误处理和用户提示
+5. **字段过滤**：如果指定了 fields 参数，只会显示指定的字段
+
+## 扩展开发
+
+如需扩展功能，可以：
+
+1. **添加字段类型支持**：在 `renderForm()` 方法中添加新的字段类型
+2. **自定义验证规则**：在表单项的 rules 中添加自定义验证
+3. **添加提交前处理**：在 `handleSubmit()` 方法中添加数据预处理逻辑
+4. **自定义样式**：修改 `style.scss` 文件定制组件外观
+5. **添加回调事件**：扩展组件 props 支持更多回调事件
+
+## 示例场景
+
+### 场景一：客户信息录入
+
+```tsx
+<ObjectForm
+  formTitle="新增客户"
+  xObjectDataApi={{
+    xObjectApiKey: 'account',
+    fields: ['name', 'industry', 'phone', 'email', 'website'],
+  }}
+  columnCount={2}
+  onSuccess={(data) => {
+    message.success('客户创建成功');
+    // 跳转到客户详情页
+  }}
+/>
+```
+
+### 场景二：联系人快速录入
+
+```tsx
+<ObjectForm
+  formTitle="新增联系人"
+  xObjectDataApi={{
+    xObjectApiKey: 'customContact__c',
+    fields: ['name', 'phone__c', 'email__c'],
+  }}
+  columnCount={1}
+  showResetButton={true}
+/>
+```
+
+### 场景三：自定义对象数据录入
+
+```tsx
+<ObjectForm
+  formTitle="新增订单"
+  xObjectDataApi={{
+    xObjectApiKey: 'customOrder__c',
+  }}
+  columnCount={2}
+  onSuccess={(data) => {
+    console.log('订单创建成功:', data);
+  }}
+/>
+```
+