neo-cmp-cli 1.2.12 → 1.2.13

package/src/template/neo-custom-cmp-template/src/components/object-card-list/model.ts

@@ -0,0 +1,66 @@
+/**
+ * @file 数据卡片列表组件对接编辑器的描述文件
+ */
+export class ObjectCardListModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'object-card-list';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '数据卡片列表';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = '展示数据信息的卡片列表组件，支持姓名和手机号展示';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/data-list.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title: '数据卡片列表',
+    label: '数据卡片列表',
+    xObjectDataApi: {
+      xObjectApiKey: 'customContact__c',
+      fields: ['id', 'name', 'phone__c'],
+    },
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '数据卡片列表',
+    title: '数据卡片列表',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  propsSchema = [
+    {
+      type: 'textarea',
+      name: 'title',
+      label: '组件标题',
+      value: '数据卡片列表',
+      placeholder: '请输入组件标题',
+    },
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      placeholder: '请选择实体数据源',
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default ObjectCardListModel;

package/src/template/neo-custom-cmp-template/src/components/object-card-list/style.scss

@@ -0,0 +1,260 @@
+.object-card-list-container {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 6px 12px;
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .card-list-header {
+    flex-shrink: 0;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 12px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .header-title {
+      margin: 0;
+      font-family: PingFangSC-Medium, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.4;
+      color: #262626;
+      flex: 1;
+    }
+
+    .refresh-button {
+      flex-shrink: 0;
+      border-radius: 6px;
+      font-size: 13px;
+      height: 32px;
+      padding: 4px 12px;
+      box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+      transition: all 0.3s ease;
+
+      &:hover {
+        box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      .anticon {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .card-list-content {
+    flex: 1;
+    overflow-y: auto;
+
+    .error-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 300px;
+      padding: 20px;
+
+      .retry-button {
+        padding: 8px 16px;
+        background-color: #1890ff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: #40a9ff;
+        }
+
+        &:active {
+          background-color: #096dd9;
+        }
+      }
+    }
+  }
+
+  .object-card {
+    height: 100%;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    border: 1px solid #f0f0f0;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      transform: translateY(-2px);
+      border-color: #d9d9d9;
+    }
+
+    .ant-card-body {
+      padding: 16px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .object-card-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      gap: 12px;
+
+      .object-avatar {
+        flex-shrink: 0;
+
+        .avatar-icon {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2px solid #fff;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+      }
+
+      .object-info {
+        flex: 1;
+        min-width: 0;
+
+        .object-name,
+        .object-phone {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
+          gap: 6px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .info-icon {
+            font-size: 12px;
+            color: #8c8c8c;
+            flex-shrink: 0;
+          }
+
+          .name-text,
+          .phone-text {
+            font-size: 14px;
+            line-height: 1.4;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .name-text {
+            color: #262626;
+            font-weight: 500;
+          }
+
+          .phone-text {
+            color: #595959;
+            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+              Courier, monospace;
+          }
+        }
+
+        .object-name {
+          margin-bottom: 8px;
+        }
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    margin: 4px 8px;
+    padding: 8px;
+
+    .card-list-header {
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+
+      .header-content {
+        gap: 12px;
+      }
+
+      .header-title {
+        font-size: 16px;
+      }
+
+      .refresh-button {
+        height: 28px;
+        padding: 2px 8px;
+        font-size: 12px;
+
+        .anticon {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .object-card {
+      .ant-card-body {
+        padding: 12px;
+      }
+
+      .object-card-content {
+        gap: 8px;
+
+        .object-avatar {
+          .avatar-icon {
+            width: 40px !important;
+            height: 40px !important;
+            line-height: 40px !important;
+          }
+        }
+
+        .object-info {
+          .object-name,
+          .object-phone {
+            .name-text,
+            .phone-text {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .object-card {
+      .object-card-content {
+        flex-direction: column;
+        text-align: center;
+        gap: 8px;
+
+        .object-info {
+          .object-name,
+          .object-phone {
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 全局样式覆盖
+.ant-spin-container {
+  min-height: 200px;
+}
+
+.ant-empty {
+  padding: 40px 20px;
+}

package/src/template/neo-custom-cmp-template/src/components/xobject-table/README.md

@@ -1,5 +1,6 @@
 # XObject 数据表格组件
-基于 XObject 的数据表格组件，支持增删改查操作，表格列根据 `getXObjectDesc` 返回的 fields 动态生成。
+基于 XObject 的数据表格组件，支持增删改查操作，表格列根据 `xObject.getDesc` 返回的 fields 动态生成。
+备注：使用 Neo Open API SDK（neo-open-api） 提供的方法实现数据对象的增删改查相关操作。
 
 ## 功能特性
 
@@ -58,20 +59,11 @@ import XObjectTable from './components/xobject-table';
 - **React**：前端框架
 - **TypeScript**：类型支持
 
-### 主要方法
-
-- `getXObjectDesc()`：获取 XObject 字段描述
-- `getEntityList()`：获取实体列表
-- `queryXObjectData()`：查询数据列表
-- `createXObject()`：创建数据记录
-- `updateXObject()`：更新数据记录
-- `deleteXObject()`：删除数据记录
-
 ### 数据流程
 
 1. **初始化**：组件挂载时获取实体列表和字段描述
 2. **列生成**：根据字段描述动态生成表格列
-3. **数据加载**：使用 `queryXObjectData` 获取数据列表
+3. **数据加载**：使用 `xObject.query` 获取数据列表
 4. **操作处理**：通过对应的 API 方法处理增删改操作
 
 ## 样式定制

package/src/template/neo-custom-cmp-template/src/components/xobject-table/index.tsx

@@ -29,14 +29,8 @@ import {
   ReloadOutlined,
 } from '@ant-design/icons';
 import moment from 'moment';
-import { queryXObjectData } from '$utils/queryObjectData';
-import {
-  getEntityTypeList,
-  getXObjectDesc,
-  createXObject,
-  updateXObject,
-  deleteXObject,
-} from '$utils/xobjects';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
 import './style.scss';
 
 const { Option } = Select;
@@ -46,7 +40,10 @@ const { Option } = Select;
  */
 interface XObjectTableProps {
   /** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
-  xObjectApiKey: string;
+  xObjectDataApi: {
+    xObjectApiKey: string;
+    fields: string[];
+  };
   /** Neo 平台传递的数据，包含系统信息等 */
   data?: any;
   /** 是否显示新增按钮 */
@@ -87,6 +84,7 @@ interface FieldInfo {
 interface XObjectTableState {
   /** 表格标题 */
   title?: string;
+  fieldList: FieldInfo[];
   /** 表格数据源 */
   dataSource: any[];
   /** 加载状态 */
@@ -109,8 +107,6 @@ interface XObjectTableState {
   form: any;
   /** 业务类型列表 */
   entityTypeList: any[];
-  /** 字段列表 */
-  fieldList: FieldInfo[];
 }
 
 /**
@@ -123,9 +119,12 @@ export default class XObjectTable extends React.PureComponent<
 > {
   constructor(props: XObjectTableProps) {
     super(props);
+    const { xObjectDataApi } = props;
+    const { xObjectApiKey, fields } = xObjectDataApi || {};
 
     // 初始化组件状态
     this.state = {
+      fieldList: [],
       dataSource: [],
       loading: false,
       error: null,
@@ -138,21 +137,21 @@ export default class XObjectTable extends React.PureComponent<
       isEditMode: false,
       editingRecord: null,
       form: null,
-      fieldList: [],
       entityTypeList: [],
     };
 
-    if (this.props.xObjectApiKey) {
+    if (xObjectApiKey) {
       // 初始化字段列表、加载数据和业务类型列表
-      this.loadFieldList().then(() => {
+      this.getEntityTypeList(xObjectApiKey);
+      this.loadFieldList(xObjectApiKey);
+
+      if (fields) {
         this.loadData();
-      });
-      this.getEntityTypeList();
+      }
     }
 
     // 绑定方法上下文
     this.loadData = this.loadData.bind(this);
-    this.loadFieldList = this.loadFieldList.bind(this);
     this.handleAdd = this.handleAdd.bind(this);
     this.handleEdit = this.handleEdit.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
@@ -161,52 +160,53 @@ export default class XObjectTable extends React.PureComponent<
     this.handleTableChange = this.handleTableChange.bind(this);
   }
 
-  /**
-   * 获取业务类型列表
-   * 用于下拉选择框的选项数据
-   */
-  getEntityTypeList() {
-    getEntityTypeList(this.props.xObjectApiKey).then((res: any) => {
-      if (res && res.code === '200') {
-        const result = res.data || {};
-        this.setState({
-          entityTypeList: result.records || [],
-        });
-      }
-    });
-  }
-
   /**
    * 组件更新后执行
    * 当 xObjectApiKey 发生变化时重新加载数据
    */
   async componentDidUpdate(prevProps: XObjectTableProps) {
-    if (prevProps.xObjectApiKey !== this.props.xObjectApiKey) {
-      if (this.props.xObjectApiKey) {
-        await this.loadFieldList();
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    const { xObjectApiKey: prevXObjectApiKey } = prevProps.xObjectDataApi || {};
+    if (xObjectApiKey !== prevXObjectApiKey) {
+      if (xObjectApiKey) {
         this.loadData();
-        this.getEntityTypeList();
+        this.getEntityTypeList(xObjectApiKey);
+        this.loadFieldList(xObjectApiKey);
       } else {
         this.setState({
           dataSource: [],
-          fieldList: [],
         });
       }
     }
   }
 
+  /**
+   * 获取业务类型列表
+   * 用于下拉选择框的选项数据
+   */
+  async getEntityTypeList(xObjectApiKey?: string) {
+    const { xObjectDataApi } = this.props;
+    const curXObjectApiKey = xObjectApiKey || xObjectDataApi?.xObjectApiKey;
+    const result = await xObject.getEntityTypeList(curXObjectApiKey);
+    if (result && result.status) {
+      const records = result.data || [];
+      this.setState({
+        entityTypeList: records,
+      });
+    }
+  }
+
   /**
    * 加载字段列表
    * 从 Neo 平台获取 XObject 的字段描述信息
    */
-  async loadFieldList() {
-    const { xObjectApiKey } = this.props;
+  async loadFieldList(xObjectApiKey?: string) {
     if (!xObjectApiKey) return;
 
     try {
-      const response = await getXObjectDesc(xObjectApiKey);
-      if (response && response.code === '200') {
-        const result = response.data || {};
+      const resultData = await xObject.getDesc(xObjectApiKey);
+      if (resultData && resultData.status) {
+        const result = resultData.data || {};
         const fieldList = result.fields || [];
         this.setState({ fieldList, title: result.label });
       }
@@ -218,13 +218,20 @@ export default class XObjectTable extends React.PureComponent<
 
   /**
    * 生成表格列配置
-   * @param _fieldList 字段列表，可选参数
    * @returns 表格列配置数组
    */
-  generateColumns(_fieldList?: FieldInfo[]) {
-    const { showEditButton, showDeleteButton } = this.props;
+  generateColumns() {
+    const { showEditButton, showDeleteButton, xObjectDataApi } = this.props;
     const { fieldList } = this.state;
-    const curFieldList = _fieldList || fieldList;
+    const { fields } = xObjectDataApi || {};
+    let curFieldList = fieldList;
+
+    if (fields && fields.length > 0) {
+      // 如果 fields 存在，则过滤掉 fieldList 中不存在的字段
+      curFieldList = curFieldList.filter((field) =>
+        fields.includes(field.apiKey),
+      );
+    }
 
     // 根据字段列表生成基础列配置
     const columns: any[] = curFieldList.map((field) => ({
@@ -285,15 +292,14 @@ export default class XObjectTable extends React.PureComponent<
    * @param pageSize 每页条数，默认为 10
    */
   async loadData(page = 1, pageSize = 10) {
-    const { xObjectApiKey } = this.props;
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
     if (!xObjectApiKey) return;
 
     this.setState({ loading: true, error: null });
 
     try {
-      // 获取所有字段的 API Key
-      const fields = this.state.fieldList.map((field) => field.apiKey);
-      const result = await queryXObjectData({
+      // 获取所有字段的 API Key=
+      const result = await xObject.query({
         xObjectApiKey,
         fields,
         page,
@@ -356,11 +362,11 @@ export default class XObjectTable extends React.PureComponent<
    * @param id 要删除的记录 ID
    */
   async handleDelete(id: string) {
-    const { xObjectApiKey } = this.props;
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
     if (!xObjectApiKey) return;
 
     try {
-      const response = await deleteXObject(xObjectApiKey, id);
+      const response = await xObject.delete(xObjectApiKey, id);
       if (response && (response.code === 200 || response.code === '200')) {
         message.success('删除成功');
         // 删除成功后重新加载当前页数据
@@ -383,7 +389,8 @@ export default class XObjectTable extends React.PureComponent<
    */
   handleModalOk() {
     this.state.form?.validateFields().then(async (values: any) => {
-      const { xObjectApiKey } = this.props;
+      const { xObjectApiKey, fields: fieldList } =
+        this.props.xObjectDataApi || {};
       const { isEditMode, editingRecord } = this.state;
 
       try {
@@ -405,13 +412,13 @@ export default class XObjectTable extends React.PureComponent<
               values[fieldKey] = new Date(values[fieldKey]).getTime();
             }
           });
-          response = await updateXObject(xObjectApiKey, editingRecord.id, {
+          response = await xObject.update(xObjectApiKey, editingRecord.id, {
             data: values,
             method: 'PATCH',
           });
         } else {
           // 新增模式：创建新记录
-          response = await createXObject(xObjectApiKey, {
+          response = await xObject.create(xObjectApiKey, {
             data: values,
             method: 'POST',
           });
@@ -463,8 +470,18 @@ export default class XObjectTable extends React.PureComponent<
    * @returns 表单 JSX 元素
    */
   renderForm() {
-    const { fieldList, isEditMode, editingRecord, entityTypeList } = this.state;
-    const { xObjectApiKey } = this.props;
+    const {
+      fieldList: _fieldList,
+      isEditMode,
+      editingRecord,
+      entityTypeList,
+    } = this.state;
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
+    let fieldList = _fieldList;
+
+    if (fields && fields.length > 0) {
+      fieldList = fieldList.filter((field) => fields.includes(field.apiKey));
+    }
 
     // 如果没有选择对象，显示提示信息
     if (!xObjectApiKey) {
@@ -642,6 +659,7 @@ export default class XObjectTable extends React.PureComponent<
     } = this.state;
     const curAmisData = this.props.data || {};
     const systemInfo = curAmisData.__NeoSystemInfo || {};
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
     const columns = this.generateColumns();
 
     return (
@@ -659,7 +677,7 @@ export default class XObjectTable extends React.PureComponent<
                     type="primary"
                     icon={<PlusOutlined />}
                     onClick={this.handleAdd}
-                    disabled={!this.props.xObjectApiKey}
+                    disabled={!xObjectApiKey}
                   >
                     新增
                   </Button>

package/src/template/neo-custom-cmp-template/src/components/xobject-table/model.ts

@@ -27,17 +27,22 @@ export class XObjectTableModel {
   /** 初次插入页面的默认属性数据 */
   defaultComProps = {
     title: '实体数据表格',
-    xObjectApiKey: 'account',
     showAddButton: true,
     showEditButton: true,
     showDeleteButton: true,
-    custom: true,
+    xObjectDataApi: {
+      xObjectApiKey: 'customContact__c',
+      fields: ['id', 'name', 'phone__c'],
+    },
   };
 
   /** 设计器端预览时展示的默认数据 */
   previewComProps = {
     title: '实体数据表格',
-    xObjectApiKey: 'account',
+    xObjectDataApi: {
+      xObjectApiKey: 'customContact__c',
+      fields: ['id', 'name', 'phone__c'],
+    },
   };
 
   /**
@@ -46,6 +51,7 @@ export class XObjectTableModel {
    * 定义组件在编辑器中可配置的属性
    */
   propsSchema = [
+    /*
     {
       type: 'select',
       name: 'custom',
@@ -87,6 +93,18 @@ export class XObjectTableModel {
       value: 'account',
       placeholder: '请选择要操作的实体对象',
     },
+    */
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      value: {
+        xObjectApiKey: 'customContact__c',
+        fields: ['id', 'name', 'phone__c'],
+      },
+      placeholder: '请选择实体数据源',
+      custom: true,
+    },
     {
       type: 'switch',
       name: 'showAddButton',

package/src/template/react-custom-cmp-template/package.json

@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
-    "neo-cmp-cli": "^1.2.12",
+    "neo-cmp-cli": "^1.2.13",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"