neo-cmp-cli 1.13.1 → 1.13.3

package/template/{neo-web-cmps → neo-web-entity-grid}/src/components/entityGrid3__c/index.tsx

@@ -38,23 +38,31 @@ export default class NeoEntityGridCmp extends React.PureComponent<NeoEntityGridP
       autoHeight,
       height,
       additionalConditions,
+      selectionMode,
       onRecordChange,
+      selectedCount,
+      onSelectedCall,
+      onCancel,
       ...restProps
     } = this.props;
     console.log('entityGrid3__c: ', this.props, this);
 
+    // 关联表信息
+    const referData = this.props.referData || {
+      referObjectApiKey: 'opportunity', // 关联表： 销售机会
+      referItemApiKey: 'accountId', // 关联表对应的外键字段： 客户ID
+    };
+
     return (
       <div className={`entityGrid3__c ${className}`}>
         <NeoEntityGrid
+          // {...restProps}
           render={this.props.render}
           objectApiKey={objectApiKey || 'account'}
           pattern={'pickView'} // Picker 列表（选择器）
-          referData={{
-            referObjectApiKey: 'opportunity', // 关联表
-            referItemApiKey: 'accountId', // 关联表对应的外键字段
-          }}
-          selectionMode="multiple" // 多选模式
-          shouldCloseDialog={true}
+          referData={referData}
+          selectionMode={selectionMode ?? "single"} // 多选模式
+          shouldCloseDialog={restProps.shouldCloseDialog ?? true}
           onRowSelected={(data: any, event: any) => {
             const selectedIds = data.map(({ data }: any) => data.id);
             const selectedNames = data.map(({ data }: any) => data.name);
@@ -72,6 +80,9 @@ export default class NeoEntityGridCmp extends React.PureComponent<NeoEntityGridP
           paginationPageSize={paginationPageSize ?? 20}
           autoHeight={autoHeight ?? false}
           height={height ?? '500px'}
+          selectedCount={selectedCount ?? 3}
+          onCancel={onCancel}
+          onSelectedCall={onSelectedCall}
         />
       </div>
     );

package/template/{neo-web-cmps → neo-web-entity-grid}/src/components/entityGrid3__c/model.ts

@@ -9,10 +9,11 @@ export class NeoEntityGridModel {
   // cmpType: string = 'entityList__c';
 
   // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
-  label: string = 'Picker 列表';
+  label: string = 'Picker列表弹窗';
 
   // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
-  description: string = '数据列表示例: Picker 列表';
+  description: string =
+    '自定义Picker列表弹窗: 自定义 Picker 列表模式的数据选择弹窗，支持在其他自定义组件中使用。';
 
   // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示
   // tags: string[] = ['自定义组件'];

package/template/{neo-web-cmps → neo-web-entity-grid}/src/components/entityGrid4__c/index.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Tooltip } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import './style.scss'; // 组件内容样式
 // @ts-ignore
 import { NeoEntityGrid } from 'neo-ui-component-web';
@@ -67,14 +69,61 @@ export default class NeoEntityGridCmp extends React.PureComponent<NeoEntityGridP
           autoHeight={autoHeight ?? false}
           height={height ?? '500px'}
           customEmptyMsg="暂无数据，请点击「新建」按钮创建"
-          additionalConditions={[
-            {
-              apiKey: 'accountName',
-              value: '测试客户',
-              type: 3, // 筛选条件/操作类型（3: 包含，1: 等于）
-              // item: -11100000100014, // 筛选条件ID
-            },
-          ]}
+          customToolbarButtons={{
+            header: [
+              {
+                id: 'approve-btn',
+                label: '批量审批',
+                icon: 'CheckOne',
+                tooltip: '对选中记录批量审批',
+                onClick: () => {
+                  console.log('批量审批');
+                },
+              },
+            ],
+            footer: [
+              {
+                id: 'export-pdf-btn',
+                label: '导出 PDF',
+                icon: 'FilePdf',
+                onClick: () => console.log('导出 PDF'),
+              },
+              {
+                id: 'status-indicator',
+                label: '同步状态',
+                customRender: (button: any = { syncStatus: 'ok' }) => {
+                  const ok = button.syncStatus === 'ok';
+                  const tip = ok ? '已同步' : '同步失败';
+                  const Icon = ok ? CheckCircleOutlined : CloseCircleOutlined;
+                  return (
+                    <li
+                      key={button.id}
+                      className="entityGrid4__c-status-indicator"
+                    >
+                      <Tooltip
+                        title={tip}
+                        placement="top"
+                        mouseEnterDelay={0.1}
+                      >
+                        <button
+                          type="button"
+                          className={`entityGrid4__c-status-indicator__btn entityGrid4__c-status-indicator__btn--${
+                            ok ? 'ok' : 'error'
+                          }`}
+                          aria-label={`同步状态：${tip}`}
+                        >
+                          <Icon
+                            className="entityGrid4__c-status-indicator__icon"
+                            aria-hidden
+                          />
+                        </button>
+                      </Tooltip>
+                    </li>
+                  );
+                },
+              },
+            ],
+          }}
         />
       </div>
     );

package/template/{neo-web-cmps/src/components/entityGrid2__c → neo-web-entity-grid/src/components/entityGrid4__c}/style.scss

@@ -1,8 +1,4 @@
-:root {
-  --padding-bottom: 12px;
-}
-
-.entityGrid2__c {
+.entityGrid4__c {
   position: relative;
   box-sizing: border-box;
 
@@ -13,7 +9,7 @@
 }
 
 /* 底部工具栏「同步状态」：antd Tooltip + Icon，文案在悬浮时由 Tooltip 展示 */
-.entityGrid2__c .entityGrid2__c-status-indicator {
+.entityGrid4__c .entityGrid4__c-status-indicator {
   display: inline-flex;
   align-items: center;
   margin: 0;
@@ -22,7 +18,7 @@
   vertical-align: middle;
 }
 
-.entityGrid2__c .entityGrid2__c-status-indicator__btn {
+.entityGrid4__c .entityGrid4__c-status-indicator__btn {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -41,26 +37,26 @@
     box-shadow 0.15s ease;
 }
 
-.entityGrid2__c .entityGrid2__c-status-indicator__btn--ok {
+.entityGrid4__c .entityGrid4__c-status-indicator__btn--ok {
   color: #16a34a;
 }
 
-.entityGrid2__c .entityGrid2__c-status-indicator__btn--error {
+.entityGrid4__c .entityGrid4__c-status-indicator__btn--error {
   color: #dc2626;
 }
 
-.entityGrid2__c .entityGrid2__c-status-indicator__btn:hover,
-.entityGrid2__c .entityGrid2__c-status-indicator__btn:focus-visible {
+.entityGrid4__c .entityGrid4__c-status-indicator__btn:hover,
+.entityGrid4__c .entityGrid4__c-status-indicator__btn:focus-visible {
   background: #f9fafb;
   border-color: #d1d5db;
   box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
 }
 
-.entityGrid2__c .entityGrid2__c-status-indicator__btn:focus-visible {
+.entityGrid4__c .entityGrid4__c-status-indicator__btn:focus-visible {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(59, 130, 246, 0.45);
 }
 
-.entityGrid2__c .entityGrid2__c-status-indicator__icon {
+.entityGrid4__c .entityGrid4__c-status-indicator__icon {
   display: block;
   flex-shrink: 0;
   font-size: 18px;

package/template/{neo-web-cmps/src/components/entityGrid2__c → neo-web-entity-grid/src/components/entityGrid__c}/index.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { Tooltip } from 'antd';
-import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import './style.scss'; // 组件内容样式
 // @ts-ignore
 import { NeoEntityGrid } from 'neo-ui-component-web';
@@ -43,10 +41,10 @@ export default class NeoEntityGridCmp extends React.PureComponent<NeoEntityGridP
       onRecordChange,
       ...restProps
     } = this.props;
-    console.log('entityGrid2__c: ', this.props, this);
+    console.log('entityGrid__c: ', this.props, this);
 
     return (
-      <div className={`entityGrid2__c ${className}`}>
+      <div className={`entityGrid__c ${className}`}>
         <NeoEntityGrid
           render={this.props.render}
           objectApiKey={objectApiKey || 'account'}
@@ -69,6 +67,10 @@ export default class NeoEntityGridCmp extends React.PureComponent<NeoEntityGridP
           autoHeight={autoHeight ?? false}
           height={height ?? '500px'}
           customEmptyMsg="暂无数据，请点击「新建」按钮创建"
+          onSinglerClick={(clickData: any) => {
+            console.log('点击了列表项', clickData);
+          }}
+          // 工具栏中补充自定义功能按钮
           customToolbarButtons={{
             header: [
               {

package/template/{neo-web-cmps → neo-web-entity-grid}/src/components/entityGrid__c/model.ts

@@ -13,7 +13,7 @@ export class NeoEntityGridModel {
 
   // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
   description: string =
-    '数据列表示例: 基础大列表，支持搜索、排序、导出、分页等操作';
+    '数据列表示例: 支持 视图切换、搜索、新增、导出、分页等显隐控制，支持自定义工具栏和空占位等配置';
 
   // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示
   // tags: string[] = ['自定义组件'];

package/template/neo-web-entity-grid/src/components/searchForm__c/README.md

@@ -0,0 +1,144 @@
+# SearchFormModel 自定义表单组件
+
+基于 XObject 的对象自定义搜索表单组件，支持动态字段渲染和多种字段类型。
+
+## 功能特性
+
+- 📝 **动态表单渲染**：根据 XObject 字段描述自动生成表单项
+- 🎨 **多种字段类型**：支持文本、数字、日期、下拉选择等多种字段类型
+- 📐 **响应式布局**：支持单列和双列布局，适配不同屏幕尺寸
+- ✅ **表单验证**：自动根据字段配置进行必填验证
+- 🔄 **表单重置**：支持快速重置表单内容
+- 🎯 **成功提示**：提交成功后显示友好的提示信息
+- ⚙️ **属性配置**：支持通过编辑器配置组件属性
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| 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 SearchForm from './components/searchForm__c';
+
+// 基础使用
+<SearchForm
+  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
+<SearchForm
+  formTitle="查询客户信息"
+  xObjectDataApi={{
+    xObjectApiKey: 'account',
+    fields: ['name', 'industry', 'phone', 'email', 'website'],
+  }}
+  columnCount={2}
+  onSuccess={(data) => {
+    message.success('xxx');
+    // 跳转到客户详情页
+  }}
+/>
+```