feat: improve code

packages/actions/src/actions/list.ts

@@ -1,7 +1,6 @@
+import { ActionParams } from '@nocobase/resourcer';
 import { Context } from '..';
 import { getRepositoryFromParams } from './utils';
-import { Repository } from '@nocobase/database';
-import { ActionParams } from '@nocobase/resourcer';
 
 export const DEFAULT_PAGE = 1;
 export const DEFAULT_PER_PAGE = 20;
@@ -41,8 +40,8 @@ async function listWithPagination(ctx: Context) {
   ctx.body = {
     count,
     rows,
-    page,
+    page: Number(page),
-    pageSize,
+    pageSize: Number(pageSize),
     totalPage: totalPage(count, pageSize),
   };
 }

packages/client/src/acl/Configuration/schemas/roleCollections.ts

@@ -66,7 +66,7 @@ export const roleCollectionsSchema: ISchema = {
     table1: {
       type: 'void',
       'x-uid': 'input',
-      'x-component': 'VoidTable',
+      'x-component': 'Table.Void',
       'x-component-props': {
         rowKey: 'name',
         // rowSelection: {
@@ -77,8 +77,8 @@ export const roleCollectionsSchema: ISchema = {
       properties: {
         column1: {
           type: 'void',
-          'x-decorator': 'TableColumnDecorator',
+          'x-decorator': 'Table.Column.Decorator',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             title: {
               type: 'number',
@@ -89,8 +89,8 @@ export const roleCollectionsSchema: ISchema = {
         },
         column2: {
           type: 'void',
-          'x-decorator': 'TableColumnDecorator',
+          'x-decorator': 'Table.Column.Decorator',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             name: {
               type: 'string',
@@ -102,7 +102,7 @@ export const roleCollectionsSchema: ISchema = {
         column3: {
           type: 'void',
           title: 'Actions',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             actions: {
               type: 'void',

packages/client/src/acl/Configuration/schemas/roles.ts

@@ -122,9 +122,9 @@ export const roleSchema: ISchema = {
         table: {
           type: 'void',
           'x-uid': 'input',
-          'x-component': 'VoidTable',
+          'x-component': 'Table.Void',
           'x-component-props': {
-            rowKey: 'id',
+            rowKey: 'name',
             rowSelection: {
               type: 'checkbox',
             },
@@ -133,8 +133,8 @@ export const roleSchema: ISchema = {
           properties: {
             column1: {
               type: 'void',
-              'x-decorator': 'TableColumnDecorator',
+              'x-decorator': 'Table.Column.Decorator',
-              'x-component': 'VoidTable.Column',
+              'x-component': 'Table.Column',
               properties: {
                 title: {
                   type: 'number',
@@ -145,8 +145,8 @@ export const roleSchema: ISchema = {
             },
             column2: {
               type: 'void',
-              'x-decorator': 'TableColumnDecorator',
+              'x-decorator': 'Table.Column.Decorator',
-              'x-component': 'VoidTable.Column',
+              'x-component': 'Table.Column',
               properties: {
                 name: {
                   type: 'string',
@@ -158,7 +158,7 @@ export const roleSchema: ISchema = {
             column3: {
               type: 'void',
               title: 'Actions',
-              'x-component': 'VoidTable.Column',
+              'x-component': 'Table.Column',
               properties: {
                 actions: {
                   type: 'void',

packages/client/src/api-client/hooks/useRequest.ts

@@ -1,4 +1,5 @@
 import { merge } from '@formily/shared';
+import { useSetState } from 'ahooks';
 import { default as useReq } from 'ahooks/lib/useRequest';
 import { Options } from 'ahooks/lib/useRequest/src/types';
 import { AxiosRequestConfig } from 'axios';
@@ -20,6 +21,9 @@ export function useRequest<P>(
   service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
   options: Options<any, any> & { uid?: string } = {},
 ) {
+  // 缓存用途
+  const [state, setState] = useSetState({});
+  console.log('state, setState', state);
   const api = useContext(APIClientContext);
   if (typeof service === 'function') {
     const result = useReq(service, {
@@ -31,7 +35,7 @@ export function useRequest<P>(
         }
       },
     });
-    return result;
+    return { ...result, state, setState };
   }
   const result = useReq(
     async (params = {}) => {
@@ -56,5 +60,5 @@ export function useRequest<P>(
       },
     },
   );
-  return result;
+  return { ...result, state, setState };
 }

packages/client/src/collection-manager/Configuration/AddFieldAction.tsx

@@ -1,4 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons';
+import { ArrayTable } from '@formily/antd';
 import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import { Button, Dropdown, Menu } from 'antd';
@@ -9,7 +10,6 @@ import { ActionContext, SchemaComponent, useCompile } from '../../schema-compone
 import { useCreateAction } from '../action-hooks';
 import { useCollectionManager } from '../hooks';
 import { IField } from '../interfaces/types';
-import { ArrayTable } from './ArrayTable';
 import { options } from './interfaces';
 
 const getSchema = (schema: IField): ISchema => {

packages/client/src/collection-manager/Configuration/ArrayTable.tsx

@@ -1,25 +0,0 @@
-import { ArrayBase, ArrayTable as FormilyArrayTable } from '@formily/antd';
-import { connect } from '@formily/react';
-import React, { Fragment } from 'react';
-
-export const ArrayTable: any = connect((props) => {
-  const { onChange } = props;
-  return (
-    <FormilyArrayTable
-      {...props}
-      onChange={(value) => {
-        console.log('onChange', value);
-        onChange(value);
-      }}
-    />
-  );
-});
-
-ArrayTable.displayName = 'ArrayTable'
-
-ArrayTable.Column = () => {
-  return <Fragment />
-}
-
-ArrayBase.mixin(ArrayTable)
-

packages/client/src/collection-manager/Configuration/EditFieldAction.tsx

@@ -1,3 +1,4 @@
+import { ArrayTable } from '@formily/antd';
 import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import cloneDeep from 'lodash/cloneDeep';
@@ -9,7 +10,6 @@ import { ActionContext, SchemaComponent } from '../../schema-component';
 import { useUpdateAction } from '../action-hooks';
 import { useCollectionManager } from '../hooks';
 import { IField } from '../interfaces/types';
-import { ArrayTable } from './ArrayTable';
 
 const getSchema = (schema: IField): ISchema => {
   if (!schema) {

packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts

@@ -73,7 +73,7 @@ export const collectionFieldSchema: ISchema = {
       params: {
         pageSize: 50,
         filter: {},
-        // sort: ['sort'],
+        sort: ['sort'],
         appends: ['uiSchema'],
       },
     },
@@ -96,12 +96,13 @@ export const collectionFieldSchema: ISchema = {
           type: 'void',
           title: '{{ t("Delete") }}',
           'x-component': 'Action',
-          "x-component-props": {
+          'x-component-props': {
+            useAction: '{{ cm.useBulkDestroyActionAndRefreshCM }}',
             confirm: {
               title: "{{t('Delete record')}}",
               content: "{{t('Are you sure you want to delete it?')}}",
             },
-          }
+          },
         },
         create: {
           type: 'void',
@@ -116,9 +117,9 @@ export const collectionFieldSchema: ISchema = {
     table: {
       type: 'void',
       'x-uid': 'input',
-      'x-component': 'VoidTable',
+      'x-component': 'Table.Void',
       'x-component-props': {
-        rowKey: 'id',
+        rowKey: 'name',
         rowSelection: {
           type: 'checkbox',
         },
@@ -128,7 +129,7 @@ export const collectionFieldSchema: ISchema = {
         column1: {
           type: 'void',
           title: '{{ t("Field display name") }}',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             'uiSchema.title': {
               type: 'number',
@@ -139,8 +140,8 @@ export const collectionFieldSchema: ISchema = {
         },
         column2: {
           type: 'void',
-          'x-decorator': 'TableColumnDecorator',
+          'x-decorator': 'Table.Column.Decorator',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             name: {
               'x-component': 'CollectionField',
@@ -150,8 +151,8 @@ export const collectionFieldSchema: ISchema = {
         },
         column3: {
           type: 'void',
-          'x-decorator': 'TableColumnDecorator',
+          'x-decorator': 'Table.Column.Decorator',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             interface: {
               'x-component': 'CollectionField',
@@ -162,7 +163,7 @@ export const collectionFieldSchema: ISchema = {
         column4: {
           type: 'void',
           title: '{{ t("Actions") }}',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             actions: {
               type: 'void',

packages/client/src/collection-manager/Configuration/schemas/collections.ts

@@ -80,6 +80,7 @@ export const collectionSchema: ISchema = {
               title: '{{ t("Delete") }}',
               'x-component': 'Action',
               'x-component-props': {
+                useAction: '{{ cm.useBulkDestroyActionAndRefreshCM }}',
                 confirm: {
                   title: "{{t('Delete record')}}",
                   content: "{{t('Are you sure you want to delete it?')}}",
@@ -141,9 +142,9 @@ export const collectionSchema: ISchema = {
         table: {
           type: 'void',
           'x-uid': 'input',
-          'x-component': 'VoidTable',
+          'x-component': 'Table.Void',
           'x-component-props': {
-            rowKey: 'id',
+            rowKey: 'name',
             rowSelection: {
               type: 'checkbox',
             },
@@ -152,8 +153,8 @@ export const collectionSchema: ISchema = {
           properties: {
             column1: {
               type: 'void',
-              'x-decorator': 'TableColumnDecorator',
+              'x-decorator': 'Table.Column.Decorator',
-              'x-component': 'VoidTable.Column',
+              'x-component': 'Table.Column',
               properties: {
                 title: {
                   'x-component': 'CollectionField',
@@ -163,8 +164,8 @@ export const collectionSchema: ISchema = {
             },
             column2: {
               type: 'void',
-              'x-decorator': 'TableColumnDecorator',
+              'x-decorator': 'Table.Column.Decorator',
-              'x-component': 'VoidTable.Column',
+              'x-component': 'Table.Column',
               properties: {
                 name: {
                   type: 'string',
@@ -176,7 +177,7 @@ export const collectionSchema: ISchema = {
             column3: {
               type: 'void',
               title: '{{ t("Actions") }}',
-              'x-component': 'VoidTable.Column',
+              'x-component': 'Table.Column',
               properties: {
                 actions: {
                   type: 'void',

packages/client/src/collection-manager/ResourceActionProvider.tsx

@@ -4,7 +4,7 @@ import { useCollectionManager } from '.';
 import { CollectionProvider, useRecord } from '..';
 import { useAPIClient, useRequest } from '../api-client';
 
-export const ResourceActionContext = createContext<Result<any, any>>(null);
+export const ResourceActionContext = createContext<Result<any, any> & { state?: any; setState?: any }>(null);
 
 interface ResourceActionProviderProps {
   type?: 'association' | 'collection';
@@ -82,5 +82,11 @@ export const useDataSourceFromRAC = (options: any) => {
 
 export const useResourceContext = () => {
   const { type, resource, collection, association } = useContext(ResourceContext);
-  return { type, resource, collection, association, targetKey: association?.targetKey || collection?.targetKey || 'id' };
+  return {
+    type,
+    resource,
+    collection,
+    association,
+    targetKey: association?.targetKey || collection?.targetKey || 'id',
+  };
 };

packages/client/src/collection-manager/action-hooks.ts

@@ -74,12 +74,18 @@ export const useDestroyAction = () => {
 };
 
 export const useBulkDestroyAction = () => {
-  const { refresh } = useResourceActionContext();
+  const { state, setState, refresh } = useResourceActionContext();
   const { resource, targetKey } = useResourceContext();
-  const { [targetKey]: filterByTk } = useRecord();
   return {
     async run() {
-      await resource.destroy({ filterByTk });
+      await resource.destroy({
+        filter: {
+          [targetKey]: {
+            $in: state?.selectedRowKeys || [],
+          },
+        },
+      });
+      setState?.({ selectedRowKeys: [] });
       refresh();
     },
   };
@@ -125,3 +131,14 @@ export const useDestroyActionAndRefreshCM = () => {
     },
   };
 };
+
+export const useBulkDestroyActionAndRefreshCM = () => {
+  const { run } = useBulkDestroyAction();
+  const { refreshCM } = useCollectionManager();
+  return {
+    async run() {
+      await run();
+      await refreshCM();
+    },
+  };
+};

packages/client/src/schema-component/antd/array-table/index.md

@@ -1,45 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# ArrayTable - 表格（数据录入） <Badge>待定</Badge>
-
-ArrayTable 更侧重于数据录入，如果需要动态的表格数据展示，请使用 [VoidTable](void-table)。
-
-## JSON Schema
-
-ArrayTable 的 props 与 antd 的 [Table](https://ant.design/components/table/#API) 基本一致。但并不直接用 Table 组件的 columns 和 dataSource。dataSource 由表单提供，默认值写在 default 里；为了更好的支持 columns 的渲染，添加了 ArrayTable.Column 用于配置表格列，ArrayTable.Column 写在 properties 里，属性与 antd 的 [Table.Column](https://ant.design/components/table/#Column) 一致。
-
-```ts
-{
-  type: 'array',
-  'x-component': 'ArrayTable',
-  default: [
-    { id: 1, name: 'Name1' },
-    { id: 2, name: 'Name2' },
-    { id: 3, name: 'Name3' },
-  ],
-  properties: {
-    column1: {
-      type: 'void',
-      'x-component': 'ArrayTable.Column',
-      'x-component-props': {
-        title: 'Name',
-      },
-      properties: {
-        name: {
-          type: 'string',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-}
-```
-
-## Examples
-
-<code src="./demos/demo1.tsx"/>

packages/client/src/schema-component/antd/array-table/index.ts

@@ -1,6 +0,0 @@
-export * from './ArrayTable';
-export * from './TableColumnActionBar';
-export * from './TableColumnDecorator';
-export * from './TableColumnDeigner';
-export * from './TableRecordActionDesigner';
-

packages/client/src/schema-component/antd/form/Form.tsx

@@ -104,7 +104,12 @@ Form.Designer = () => {
   const { name, title } = useCollection();
   return (
     <GeneralSchemaDesigner title={title || name}>
-      <SchemaSettings.Remove />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
     </GeneralSchemaDesigner>
   );
 };

packages/client/src/schema-component/antd/grid/demos/demo3.tsx

@@ -9,8 +9,7 @@ import {
   Markdown,
   SchemaComponent,
   SchemaComponentProvider,
-  SchemaInitializerProvider,
+  SchemaInitializerProvider
-  VoidTable
 } from '@nocobase/client';
 import React from 'react';
 
@@ -39,7 +38,7 @@ const schema: ISchema = {
 
 export default function App() {
   return (
-    <SchemaComponentProvider components={{ BlockItem, Block, Grid, CardItem, Markdown, Form, VoidTable }}>
+    <SchemaComponentProvider components={{ BlockItem, Block, Grid, CardItem, Markdown, Form }}>
       <SchemaInitializerProvider>
         <SchemaComponent schema={schema} />
       </SchemaInitializerProvider>

packages/client/src/schema-component/antd/index.ts

@@ -1,5 +1,4 @@
 export * from './action';
-export * from './array-table';
 export * from './block-item';
 export * from './calendar';
 export * from './card-item';
@@ -22,12 +21,11 @@ export * from './page';
 export * from './password';
 export * from './radio';
 export * from './record-picker';
-export * from './row-selection';
 export * from './select';
 export * from './space';
+export * from './table';
 export * from './tabs';
 export * from './time-picker';
 export * from './tree-select';
 export * from './upload';
-export * from './void-table';
 

packages/client/src/schema-component/antd/row-selection/demos/apiClient.ts

@@ -1,35 +0,0 @@
-import { uid } from '@formily/shared';
-import { APIClient } from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-import _ from 'lodash';
-
-export const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
-
-mock.onGet('/posts:list').reply(async (config) => {
-  // const [{ pageSize }] = config.params;
-  const pageSize = config.params.pageSize || 10;
-  const page = config.params.page || 1;
-  console.log(pageSize, page, config.params);
-  await sleep(1000);
-  return [
-    200,
-    {
-      data: _.range(pageSize).map((v) => {
-        return {
-          id: v + (page - 1) * pageSize,
-          name: uid(),
-        };
-      }),
-      meta: {
-        count: 100,
-        pageSize,
-        page,
-      },
-    },
-  ];
-});
-

packages/client/src/schema-component/antd/row-selection/demos/demo1.tsx

@@ -1,88 +0,0 @@
-/**
- * title: 勾选
- */
-import { ISchema } from '@formily/react';
-import {
-  APIClientProvider,
-  Input,
-  RowSelection,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useAPIClient
-} from '@nocobase/client';
-import React from 'react';
-import { apiClient } from './apiClient';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    hello: {
-      'x-component': 'Hello',
-    },
-    table1: {
-      type: 'string',
-      default: 1,
-      'x-uid': 'input',
-      'x-component': 'RowSelection',
-      'x-component-props': {
-        rowKey: 'id',
-        rowSelection: {
-          type: 'radio',
-        },
-        pagination: {
-          // current: 2,
-          pageSize: 2,
-        },
-        request: {
-          resource: 'posts',
-          action: 'list',
-          params: {
-            filter: {},
-            // pageSize: 5,
-          },
-        },
-      },
-      properties: {
-        column1: {
-          type: 'void',
-          title: 'Name',
-          'x-component': 'RowSelection.Column',
-          properties: {
-            name: {
-              type: 'string',
-              'x-component': 'Input',
-              'x-read-pretty': true,
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-const Hello = () => {
-  const api = useAPIClient();
-  return (
-    <div
-      onClick={() => {
-        const service = api.service('input');
-        if (!service) {
-          return;
-        }
-        service.run({ ...service.params[0], page: 3 });
-      }}
-    >
-      Hello
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <SchemaComponentProvider components={{ Hello, Input, RowSelection }}>
-        <SchemaComponent schema={schema} />
-      </SchemaComponentProvider>
-    </APIClientProvider>
-  );
-};

packages/client/src/schema-component/antd/row-selection/index.md

@@ -1,90 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# RowSelection - 行选择器 <Badge>待定</Badge>
-
-用表格视图展示可选项数据，功能上与 Radio.Group 和 CheckBox.Group 一致。
-
-## JSON Schema
-
-[rowSelection](https://ant.design/components/table/#rowSelection)
-
-单选
-
-```ts
-{
-  type: 'number',
-  'x-component': 'RowSelection',
-  'x-component-props': {
-    rowKey: 'id',
-    rowSelection: {
-      type: 'radio',
-    },
-    dataSource: [
-      { id: 1, name: 'Name1' },
-      { id: 2, name: 'Name2' },
-      { id: 3, name: 'Name3' },
-    ],
-  },
-  default: 1,
-  properties: {
-    column1: {
-      type: 'void',
-      'x-component': 'VoidTable.Column',
-      'x-component-props': {
-        title: 'Name',
-      },
-      properties: {
-        name: {
-          type: 'string',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-}
-```
-
-多选
-
-```ts
-{
-  type: 'number',
-  'x-component': 'RowSelection',
-  'x-component-props': {
-    rowKey: 'id',
-    rowSelection: {
-      type: 'radio',
-    },
-    dataSource: [
-      { id: 1, name: 'Name1' },
-      { id: 2, name: 'Name2' },
-      { id: 3, name: 'Name3' },
-    ],
-  },
-  default: 1,
-  properties: {
-    column1: {
-      type: 'void',
-      'x-component': 'VoidTable.Column',
-      'x-component-props': {
-        title: 'Name',
-      },
-      properties: {
-        name: {
-          type: 'string',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-}
-```
-
-## Examples
-
-<code src="./demos/demo1.tsx">

packages/client/src/schema-component/antd/row-selection/index.ts

@@ -1 +0,0 @@
-export * from './RowSelection';

packages/client/src/schema-component/antd/table/Table.Array.tsx

@@ -47,11 +47,6 @@ const useTableColumns = () => {
   });
 };
 
-type ArrayTableType = React.FC<any> & {
-  Column?: React.FC<any>;
-  mixin?: (T: any) => void;
-};
-
 export const components = {
   header: {
     wrapper: (props) => {
@@ -88,7 +83,7 @@ export const components = {
   },
 };
 
-export const ArrayTable: ArrayTableType = observer((props) => {
+export const TableArray: React.FC<any> = observer((props) => {
   const field = useField<ArrayField>();
   const columns = useTableColumns();
   const { onChange, ...others } = props;
@@ -98,13 +93,3 @@ export const ArrayTable: ArrayTableType = observer((props) => {
     </div>
   );
 });
-
-ArrayTable.Column = (props) => {
-  const field = useField();
-  console.log('field.title', field.title);
-  return <div>{field.title}</div>;
-};
-
-ArrayTable.mixin = (Table: any) => {
-  Table.Column = ArrayTable.Column;
-};

packages/client/src/schema-component/antd/table/Table.Column.tsx

@@ -0,0 +1,7 @@
+import { useField } from '@formily/react';
+import React from 'react';
+
+export const TableColumn = (props) => {
+  const field = useField();
+  return <div>{field.title}</div>;
+};

packages/client/src/schema-component/antd/table/Table.RowActionDesigner.tsx

@@ -5,10 +5,9 @@ import React from 'react';
 import { DragHandler } from '../../../schema-component';
 import { useSchemaInitializer } from '../../../schema-initializer';
 
-export const TableRecordActionDesigner = (props: any) => {
+export const TableRowActionDesigner = (props: any) => {
   const fieldSchema = useFieldSchema();
   const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
-  console.log("fieldSchema['x-initializer']", fieldSchema['x-initializer'])
   return (
     <div className={'general-schema-designer'}>
       <div className={'general-schema-designer-icons'}>

packages/client/src/schema-component/antd/table/Table.RowSelection.tsx

@@ -3,20 +3,19 @@ import { observer, useField } from '@formily/react';
 import { isArr, isValid } from '@formily/shared';
 import { TableProps } from 'antd';
 import React from 'react';
-import { VoidTable } from '../void-table';
+import { TableVoid } from './Table.Void';
 
-type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: boolean; };
+type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: boolean };
 
 const toArr = (value: any) => (isArr(value) ? value : isValid(value) ? [value] : []);
 
-export const RowSelection = observer((props: Props) => {
+export const TableRowSelection = observer((props: Props) => {
   const { rowKey = 'id', objectValue } = props;
   const field = useField<Field>();
-  console.log('field.value', field.value)
   const rowSelection: any = {
     type: 'checkbox',
     ...props.rowSelection,
-    selectedRowKeys: toArr(field.value).map(val => typeof val === 'object' ? val[rowKey as any] : val),
+    selectedRowKeys: toArr(field.value).map((val) => (typeof val === 'object' ? val[rowKey as any] : val)),
     onChange(selectedRowKeys: any[], selectedRows?: any) {
       if (rowSelection.type === 'checkbox') {
         props.onChange(objectValue ? selectedRows : selectedRowKeys);
@@ -25,7 +24,5 @@ export const RowSelection = observer((props: Props) => {
       }
     },
   };
-  return <VoidTable {...props} rowSelection={rowSelection} />;
+  return <TableVoid {...props} rowSelection={rowSelection} />;
 });
-
-VoidTable.mixin(RowSelection);

packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useCollection } from '../../../collection-manager';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 
-export const VoidTableDesigner = () => {
+export const TableVoidDesigner = () => {
   const { name, title } = useCollection();
   return (
     <GeneralSchemaDesigner title={title || name}>

packages/client/src/schema-component/antd/table/Table.Void.tsx

@@ -6,21 +6,18 @@ import { cloneDeep } from 'lodash';
 import React, { useMemo } from 'react';
 import { AsyncDataProvider, useRequest } from '../../../';
 import { useAttach } from '../../hooks';
-import { ArrayTable } from '../array-table';
+import { TableArray } from './Table.Array';
-import { VoidTableDesigner } from './VoidTable.Designer';
 
-type VoidTableProps = TableProps<any> & {
+type TableVoidProps = TableProps<any> & {
   request?: any;
-  useDataSource?: (options?: Options<any, any> & { uid?: string }, props?: any) => Result<any, any>;
+  useDataSource?: (
-};
+    options?: Options<any, any> & { uid?: string },
-
+    props?: any,
-type VoidTableType = React.FC<VoidTableProps> & {
+  ) => Result<any, any> & { state?: any; setState?: any };
-  Column?: React.FC<any>;
-  Designer?: any;
-  mixin?: (T: any) => void;
 };
 
 const usePaginationProps = (props: TableProps<any> & { request?: any }, service): TablePaginationConfig | false => {
+  console.log('f.componentProps.pagination', props);
   if (props.pagination === false) {
     return false;
   }
@@ -72,12 +69,12 @@ const useDef = (options, props) => {
   return useRequest(useRequestProps(props), options);
 };
 
-export const VoidTable: VoidTableType = observer((props) => {
+export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
   const { useDataSource = useDef } = props;
   const field = useField<Field>();
   const fieldSchema = useFieldSchema();
   const form = useMemo(() => createForm(), []);
-  const f = useAttach(form.createArrayField({ name: fieldSchema.name }));
+  const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
   const result = useDataSource(
     {
       uid: fieldSchema['x-uid'],
@@ -94,21 +91,30 @@ export const VoidTable: VoidTableType = observer((props) => {
         }
         field.componentProps.pagination.current = data?.meta?.page || 1;
         field.componentProps.pagination.pageSize = data?.meta?.pageSize || 10;
+        console.log('f.componentProps.pagination', field.componentProps.pagination);
       },
     },
     props,
   );
+  const others = {
+    rowSelection: props.rowSelection
+      ? {
+          type: 'checkbox',
+          ...props.rowSelection,
+          selectedRowKeys: result?.state?.selectedRowKeys || [],
+          onChange(selectedRowKeys: any[]) {
+            result?.setState?.({ selectedRowKeys });
+          },
+        }
+      : undefined,
+  };
   return (
     <AsyncDataProvider value={result}>
       <FormContext.Provider value={form}>
         <FieldContext.Provider value={f}>
-          <ArrayTable {...props} loading={result?.loading} pagination={usePaginationProps(props, result)} />
+          <TableArray {...props} {...others} loading={result?.loading} pagination={usePaginationProps(props, result)} />
         </FieldContext.Provider>
       </FormContext.Provider>
     </AsyncDataProvider>
   );
 });
-
-VoidTable.Designer = VoidTableDesigner;
-VoidTable.mixin = ArrayTable.mixin;
-ArrayTable.mixin(VoidTable);

packages/client/src/schema-component/antd/table/demos/demo1.tsx

@@ -1,9 +1,5 @@
-/**
- * title: 勾选
- */
-import { FormItem } from '@formily/antd';
 import { ISchema } from '@formily/react';
-import { ArrayTable, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import { Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client';
 import React from 'react';
 
 const schema: ISchema = {
@@ -17,24 +13,18 @@ const schema: ISchema = {
         { id: 2, name: 'Name2' },
         { id: 3, name: 'Name3' },
       ],
-      'x-decorator': 'FormItem',
+      'x-component': 'Table.Array',
-      'x-component': 'ArrayTable',
       'x-component-props': {
         rowKey: 'id',
-      },
+        rowSelection: {
-      'x-reactions': {
+          type: 'checkbox',
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
         },
       },
       properties: {
         column1: {
           type: 'void',
           title: 'Name',
-          'x-component': 'ArrayTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             name: {
               type: 'string',
@@ -45,22 +35,12 @@ const schema: ISchema = {
         },
       },
     },
-    read: {
-      type: 'array',
-      title: `阅读模式`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'ArrayTable',
-      'x-component-props': {
-        rowKey: 'id',
-      },
-    },
   },
 };
 
 export default () => {
   return (
-    <SchemaComponentProvider components={{ Input, ArrayTable, FormItem }}>
+    <SchemaComponentProvider components={{ Table, Input }}>
       <SchemaComponent schema={schema} />
     </SchemaComponentProvider>
   );

packages/client/src/schema-component/antd/table/demos/demo2.tsx

@@ -0,0 +1,47 @@
+import { ISchema } from '@formily/react';
+import { Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client';
+import React from 'react';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'array',
+      title: `编辑模式`,
+      'x-component': 'Table.Void',
+      'x-component-props': {
+        rowKey: 'id',
+        rowSelection: {
+          type: 'checkbox',
+        },
+        dataSource: [
+          { id: 1, name: 'Name1' },
+          { id: 2, name: 'Name2' },
+          { id: 3, name: 'Name3' },
+        ],
+      },
+      properties: {
+        column1: {
+          type: 'void',
+          title: 'Name',
+          'x-component': 'Table.Column',
+          properties: {
+            name: {
+              type: 'string',
+              'x-component': 'Input',
+              'x-read-pretty': true,
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Table, Input }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/client/src/schema-component/antd/table/demos/demo3.tsx

@@ -0,0 +1,47 @@
+import { ISchema } from '@formily/react';
+import { Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client';
+import React from 'react';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'array',
+      title: `编辑模式`,
+      'x-component': 'Table.RowSelection',
+      'x-component-props': {
+        rowKey: 'id',
+        rowSelection: {
+          type: 'checkbox',
+        },
+        dataSource: [
+          { id: 1, name: 'Name1' },
+          { id: 2, name: 'Name2' },
+          { id: 3, name: 'Name3' },
+        ],
+      },
+      properties: {
+        column1: {
+          type: 'void',
+          title: 'Name',
+          'x-component': 'Table.Column',
+          properties: {
+            name: {
+              type: 'string',
+              'x-component': 'Input',
+              'x-read-pretty': true,
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Table, Input }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/client/src/schema-component/antd/table/index.md

@@ -0,0 +1,20 @@
+# Table
+
+表格有三个使用场景
+
+- `Table.Void`
+- `Table.RowSelection`
+- `Table.Array`
+
+
+## Table.Array
+
+<code src="./demos/demo1.tsx" />
+
+## Table.Void
+
+<code src="./demos/demo2.tsx" />
+
+## Table.RowSelection
+
+<code src="./demos/demo3.tsx" />

packages/client/src/schema-component/antd/table/index.tsx

@@ -0,0 +1,23 @@
+import { TableArray } from './Table.Array';
+import { TableColumn } from './Table.Column';
+import { TableColumnActionBar } from './Table.Column.ActionBar';
+import { TableColumnDecorator } from './Table.Column.Decorator';
+import { TableColumnDeigner } from './Table.Column.Deigner';
+import { TableRowActionDesigner } from './Table.RowActionDesigner';
+import { TableRowSelection } from './Table.RowSelection';
+import { TableVoid } from './Table.Void';
+import { TableVoidDesigner } from './Table.Void.Designer';
+
+export const Table: any = () => null;
+
+Table.Array = TableArray;
+Table.Void = TableVoid;
+Table.Void.Designer = TableVoidDesigner;
+Table.RowSelection = TableRowSelection;
+
+Table.Column = TableColumn;
+Table.Column.ActionBar = TableColumnActionBar;
+Table.Column.Decorator = TableColumnDecorator;
+Table.Column.Deigner = TableColumnDeigner;
+
+Table.RowActionDesigner = TableRowActionDesigner;

packages/client/src/schema-component/antd/void-table/demos/apiClient.ts

@@ -1,39 +0,0 @@
-import { uid } from '@formily/shared';
-import { APIClient } from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-import _ from 'lodash';
-
-export const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
-
-mock.onGet('/posts:list').reply(async (config) => {
-  // const [{ pageSize }] = config.params;
-  const pageSize = config.params.pageSize || 10;
-  const page = config.params.page || 1;
-  console.log(pageSize, page, config.params);
-  await sleep(1000);
-  return [
-    200,
-    {
-      data: _.range(pageSize).map((v) => {
-        return {
-          id: v + (page - 1) * pageSize,
-          name: uid(),
-          date: '2022-01-02 22:22:22',
-          createdBy: [
-            { id: 1, name: 'name1' },
-          ],
-        };
-      }),
-      meta: {
-        count: 100,
-        pageSize,
-        page,
-      },
-    },
-  ];
-});
-

packages/client/src/schema-component/antd/void-table/demos/demo1.tsx

@@ -1,87 +0,0 @@
-/**
- * title: 勾选
- */
-import { ISchema } from '@formily/react';
-import {
-  APIClientProvider,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useAPIClient,
-  VoidTable
-} from '@nocobase/client';
-import React from 'react';
-import { apiClient } from './apiClient';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    hello: {
-      'x-component': 'Hello',
-    },
-    table1: {
-      type: 'void',
-      'x-uid': 'input',
-      'x-component': 'VoidTable',
-      'x-component-props': {
-        rowKey: 'id',
-        rowSelection: {
-          type: 'checkbox',
-        },
-        pagination: {
-          current: 2,
-          pageSize: 2,
-        },
-        request: {
-          resource: 'posts',
-          action: 'list',
-          params: {
-            filter: {},
-            // pageSize: 5,
-          },
-        },
-      },
-      properties: {
-        column1: {
-          type: 'void',
-          title: 'Name',
-          'x-component': 'VoidTable.Column',
-          properties: {
-            name: {
-              type: 'string',
-              'x-component': 'Input',
-              'x-read-pretty': true,
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-const Hello = () => {
-  const api = useAPIClient();
-  return (
-    <div
-      onClick={() => {
-        const service = api.service('input');
-        if (!service) {
-          return;
-        }
-        service.run({ ...service.params[0], page: 3 });
-      }}
-    >
-      Hello
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <SchemaComponentProvider components={{ Hello, Input, VoidTable }}>
-        <SchemaComponent schema={schema} />
-      </SchemaComponentProvider>
-    </APIClientProvider>
-  );
-};

packages/client/src/schema-component/antd/void-table/demos/demo2.tsx

@@ -1,238 +0,0 @@
-import { ISchema, observer, useField, useFieldSchema } from '@formily/react';
-import {
-  AntdSchemaComponentProvider,
-  APIClientProvider,
-  CollectionManagerProvider,
-  SchemaComponent,
-  SchemaComponentProvider
-} from '@nocobase/client';
-import { Button } from 'antd';
-import React from 'react';
-import { apiClient } from './apiClient';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    block1: {
-      type: 'void',
-      'x-decorator': 'CollectionProvider',
-      'x-decorator-props': {
-        name: 'posts',
-      },
-      'x-component': 'ResourceActionProvider',
-      'x-component-props': {
-        request: {
-          resource: 'posts',
-          action: 'list',
-          params: {
-            pageSize: 5,
-            filter: {},
-            sort: [],
-            appends: [],
-          },
-        },
-      },
-      properties: {
-        settings: {
-          'x-component': 'SimpleSettingsForm',
-        },
-        table1: {
-          type: 'void',
-          'x-uid': 'input',
-          'x-component': 'VoidTable',
-          'x-component-props': {
-            rowKey: 'id',
-            rowSelection: {
-              type: 'checkbox',
-            },
-            useDataSource: '{{ useDataSourceFromRAC }}',
-          },
-          properties: {
-            column1: {
-              type: 'void',
-              // title: 'ID',
-              'x-decorator': 'TableColumnDecorator',
-              'x-component': 'VoidTable.Column',
-              properties: {
-                id: {
-                  type: 'number',
-                  'x-component': 'CollectionField',
-                  'x-read-pretty': true,
-                },
-              },
-            },
-            column2: {
-              type: 'void',
-              // title: 'Name',
-              'x-decorator': 'TableColumnDecorator',
-              'x-component': 'VoidTable.Column',
-              properties: {
-                name: {
-                  type: 'string',
-                  'x-component': 'CollectionField',
-                  'x-read-pretty': true,
-                },
-              },
-            },
-            column3: {
-              type: 'void',
-              // title: 'Name',
-              'x-decorator': 'TableColumnDecorator',
-              'x-component': 'VoidTable.Column',
-              properties: {
-                date: {
-                  type: 'string',
-                  'x-component': 'CollectionField',
-                  'x-read-pretty': true,
-                },
-              },
-            },
-            column4: {
-              type: 'void',
-              // title: 'Name',
-              'x-decorator': 'TableColumnDecorator',
-              'x-component': 'VoidTable.Column',
-              properties: {
-                createdBy: {
-                  'x-component': 'CollectionField',
-                  'x-read-pretty': true,
-                  properties: {
-                    item: {
-                      'x-component': 'RecordPicker.SelectedItem',
-                      properties: {
-                        drawer1: {
-                          'x-component': 'Action.Drawer',
-                          type: 'void',
-                          title: 'Drawer Title',
-                          properties: {
-                            hello1: {
-                              'x-content': 'Hello',
-                              title: 'T1',
-                            },
-                            footer1: {
-                              'x-component': 'Action.Drawer.Footer',
-                              type: 'void',
-                              properties: {
-                                close1: {
-                                  type: 'void',
-                                  title: 'Close',
-                                  'x-component': 'Action',
-                                  'x-component-props': {
-                                    // useAction: '{{ useCloseAction }}',
-                                  },
-                                },
-                              },
-                            },
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-const collections = [
-  {
-    name: 'posts',
-    fields: [
-      {
-        type: 'integer',
-        name: 'id',
-        interface: 'input',
-        uiSchema: {
-          title: 'ID1',
-          type: 'number',
-          'x-component': 'InputNumber',
-          required: true,
-          description: 'description1',
-        } as ISchema,
-      },
-      {
-        type: 'string',
-        name: 'name',
-        interface: 'input',
-        uiSchema: {
-          title: 'Name1',
-          type: 'string',
-          'x-component': 'Input',
-          required: true,
-          description: 'description1',
-        } as ISchema,
-      },
-      {
-        type: 'string',
-        name: 'date',
-        interface: 'datetime',
-        uiSchema: {
-          type: 'boolean',
-          title: `Date1`,
-          'x-read-pretty': true,
-          'x-decorator': 'FormItem',
-          'x-component': 'DatePicker',
-          'x-component-props': {
-            dateFormat: 'YYYY/MM/DD',
-            // showTime: true,
-          },
-        },
-      },
-      {
-        type: 'belongsToMany',
-        name: 'createdBy',
-        target: 'users',
-        foreignKey: 'createdById',
-        uiSchema: {
-          type: 'array',
-          title: `创建人`,
-          // default: [
-          //   { id: 1, name: 'name1' },
-          //   { id: 2, name: 'name2' },
-          // ],
-          'x-decorator': 'FormItem',
-          'x-component': 'RecordPicker',
-        },
-      },
-    ],
-  },
-];
-
-const SimpleSettingsForm = observer(() => {
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          fieldSchema.parent['x-component-props']['request']['params']['pageSize'] = 20;
-          field.query('.').take((f) => {
-            f.componentProps.request.params.pageSize = 20;
-          });
-        }}
-      >
-        Edit
-      </Button>
-      <br />
-      <br />
-    </div>
-  );
-});
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <SchemaComponentProvider>
-        <AntdSchemaComponentProvider>
-          <CollectionManagerProvider collections={collections}>
-            <SchemaComponent schema={schema} components={{ SimpleSettingsForm }} />
-          </CollectionManagerProvider>
-        </AntdSchemaComponentProvider>
-      </SchemaComponentProvider>
-    </APIClientProvider>
-  );
-};

packages/client/src/schema-component/antd/void-table/index.md

@@ -1,251 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# VoidTable - 表格（数据展示） <Badge>待定</Badge>
-
-VoidTable 只用作数据展示，如果需要可以录入数据的表格字段，请使用 [ArrayTable](array-table)。
-
-## Examples
-
-VoidTable 的 props 与 antd 的 [Table](https://ant.design/components/table/#API) 一致。
-
-### 基础使用
-
-```tsx
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  APIClientProvider,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useAPIClient,
-  VoidTable
-} from '@nocobase/client';
-import _ from 'lodash';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    table1: {
-      type: 'void',
-      'x-component': 'VoidTable',
-      'x-component-props': {
-        rowKey: 'id',
-        rowSelection: {
-          type: 'checkbox',
-        },
-        dataSource: _.range(5).map((v) => {
-          return {
-            id: v,
-            name: uid(),
-          };
-        }),
-      },
-      properties: {
-        column1: {
-          type: 'void',
-          title: 'Name',
-          'x-component': 'VoidTable.Column',
-          properties: {
-            name: {
-              type: 'string',
-              'x-component': 'Input',
-              'x-read-pretty': true,
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Input, VoidTable }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};
-```
-
-### 分页
-
-```tsx
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  APIClientProvider,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useAPIClient,
-  VoidTable
-} from '@nocobase/client';
-import _ from 'lodash';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    table1: {
-      type: 'void',
-      'x-component': 'VoidTable',
-      'x-component-props': {
-        rowKey: 'id',
-        rowSelection: {
-          type: 'checkbox',
-        },
-        dataSource: _.range(50).map((v) => {
-          return {
-            id: v,
-            name: uid(),
-          };
-        }),
-      },
-      properties: {
-        column1: {
-          type: 'void',
-          title: 'Name',
-          'x-component': 'VoidTable.Column',
-          properties: {
-            name: {
-              type: 'string',
-              'x-component': 'Input',
-              'x-read-pretty': true,
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Input, VoidTable }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};
-```
-
-### 不分页
-
-```tsx
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  APIClientProvider,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useAPIClient,
-  VoidTable
-} from '@nocobase/client';
-import _ from 'lodash';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    table1: {
-      type: 'void',
-      'x-uid': 'input',
-      'x-component': 'VoidTable',
-      'x-component-props': {
-        rowKey: 'id',
-        rowSelection: {
-          type: 'checkbox',
-        },
-        pagination: false,
-        dataSource: _.range(12).map((v) => {
-          return {
-            id: v,
-            name: uid(),
-          };
-        }),
-      },
-      properties: {
-        column1: {
-          type: 'void',
-          title: 'Name',
-          'x-component': 'VoidTable.Column',
-          properties: {
-            name: {
-              type: 'string',
-              'x-component': 'Input',
-              'x-read-pretty': true,
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Input, VoidTable }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};
-```
-
-### 异步数据
-
-<code src="./demos/demo1.tsx">
-
-### CollectionProvider + ResourceActionProvider
-
-<code src="./demos/demo2.tsx">
-
-大纲
-
-```tsx | pure
-<CollectionProvider> {/* 属于哪个 collection */}
-  <ResourceActionProvider> {/* 发起请求，将请求结果存到上下文共享给子组件 */}
-    <SettingsForm /> {/* 区块的配置表单 */}
-    <ActionBar /> {/* 操作区 */}
-    <Table/> {/* 具体的组件，如 Table、Form、Calendar 等 */}
-  </ResourceActionProvider>
-</CollectionProvider>
-```
-
-通过 CollectionProvider 和 ResourceActionProvider 来解决数据区块配置和数据请求，与具体组件无关，所有区块通用。在里面可以放任意东西。
-
-嵌套使用的情况
-
-```tsx | pure
-<CollectionProvider> {/* 属于哪个 collection */}
-  <ResourceActionProvider> {/* 发起请求，将请求结果存到上下文共享给子组件 */}
-    <SettingsForm /> {/* 区块的配置表单 */}
-    <ActionBar /> {/* 操作区 */}
-    <Table> {/* 具体的组件 */}
-      <Table.Column>
-        <SettingsForm /> {/* 表格列的配置表单 */}
-        <RecordProvider> {/* 列表数据的行记录 */}
-          <CollectionField>
-            <CollectionFieldProvider> {/* 是哪个字段 */}
-              <CollectionProvider> {/* 关联字段的关联表 collection */}
-                <ResourceActionProvider> {/* 可能也会发起请求，如查看详情 */}
-                  <SettingsForm />
-                  <ActionBar />
-                  <Table />
-                </ResourceActionProvider>
-              </CollectionProvider>
-            </CollectionFieldProvider>
-          </CollectionField>
-        </RecordProvider>
-      </Table.Column>
-      <Table.Column></Table.Column>  {/* 会有很多列 */}
-    </Table>
-  </ResourceActionProvider>
-</CollectionProvider>
-```

packages/client/src/schema-component/antd/void-table/index.ts

@@ -1 +0,0 @@
-export * from './VoidTable';

packages/client/src/schema-initializer/Initializers/FormActionInitializers.tsx

@@ -1,17 +1,17 @@
 // 普通表单的操作配置
 export const FormActionInitializers = {
-  title: 'Configure actions',
+  title: '{{t("Configure actions")}}',
   items: [
     {
       type: 'itemGroup',
-      title: 'Enable actions',
+      title: '{{t("Enable actions")}}',
       children: [
         {
           type: 'item',
-          title: '{{ t("Submit") }}',
+          title: '{{t("Submit")}}',
           component: 'ActionInitializer',
           schema: {
-            title: '{{ t("Submit") }}',
+            title: '{{t("Submit")}}',
             'x-action': 'submit',
             'x-align': 'left',
             'x-component': 'Action',

packages/client/src/schema-initializer/Initializers/Items/TableBlockInitializer.tsx

@@ -23,7 +23,7 @@ const createSchema = (collectionName) => {
         },
       },
     },
-    'x-designer': 'VoidTable.Designer',
+    'x-designer': 'Table.Void.Designer',
     'x-component': 'CardItem',
     properties: {
       actions: {
@@ -39,7 +39,7 @@ const createSchema = (collectionName) => {
       },
       table: {
         type: 'void',
-        'x-component': 'VoidTable',
+        'x-component': 'Table.Void',
         'x-component-props': {
           rowKey: 'id',
           rowSelection: {
@@ -52,9 +52,9 @@ const createSchema = (collectionName) => {
           actions: {
             type: 'void',
             title: '{{ t("Actions") }}',
-            'x-decorator': 'TableColumnActionBar',
+            'x-decorator': 'Table.Column.ActionBar',
-            'x-component': 'VoidTable.Column',
+            'x-component': 'Table.Column',
-            'x-designer': 'TableRecordActionDesigner',
+            'x-designer': 'Table.RowActionDesigner',
             'x-initializer': 'TableRecordActionInitializers',
             properties: {
               actions: {

packages/client/src/schema-initializer/Initializers/TableColumnInitializers.tsx

@@ -14,7 +14,7 @@ export const TableColumnInitializers = (props: any) => {
           type: 'void',
           'x-decorator': 'TableColumnDecorator',
           'x-designer': 'TableColumnDeigner',
-          'x-component': 'VoidTable.Column',
+          'x-component': 'Table.Column',
           properties: {
             [s.name]: {
               'x-read-pretty': true,