feat: improve code

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

@@ -1,6 +1,7 @@
-import { Field, FormPath } from '@formily/core';
+import { Field } from '@formily/core';
-import { connect, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
+import { connect, useField, useFieldSchema } from '@formily/react';
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { useComponent } from '..';
 import { CollectionFieldProvider } from './CollectionFieldProvider';
 import { useCollectionField } from './hooks';
 
@@ -9,9 +10,7 @@ const InternalField: React.FC = (props) => {
   const field = useField<Field>();
   const fieldSchema = useFieldSchema();
   const { uiSchema } = useCollectionField();
-  console.log('uiSchema', uiSchema);
+  const component = useComponent(uiSchema?.['x-component']);
-  const options = useContext(SchemaOptionsContext);
-  const component = FormPath.getIn(options?.components, uiSchema['x-component']);
   const setFieldProps = (key, value) => {
     field[key] = typeof field[key] === 'undefined' ? value : field[key];
   };
@@ -22,6 +21,9 @@ const InternalField: React.FC = (props) => {
   };
   // TODO: 初步适配
   useEffect(() => {
+    if (!uiSchema) {
+      return;
+    }
     setFieldProps('title', uiSchema.title);
     setFieldProps('description', uiSchema.description);
     setFieldProps('initialValue', uiSchema.default);
@@ -29,7 +31,10 @@ const InternalField: React.FC = (props) => {
     // @ts-ignore
     field.dataSource = uiSchema.enum;
     field.component = [component, uiSchema['x-component-props']];
-  }, [uiSchema.title, uiSchema.description, uiSchema.required]);
+  }, [uiSchema?.title, uiSchema?.description, uiSchema?.required]);
+  if (!uiSchema) {
+    return null;
+  }
   return React.createElement(component, props);
 };
 

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

@@ -28,21 +28,6 @@ const getSchema = (schema: IField): ISchema => {
         },
         title: '{{ t("Add field") }}',
         properties: {
-          type: {
-            'x-component': 'CollectionField',
-            'x-decorator': 'FormItem',
-          },
-          'uiSchema.title': {
-            type: 'number',
-            title: '{{ t("Field display name") }}',
-            required: true,
-            'x-component': 'Input',
-            'x-decorator': 'FormItem',
-          },
-          name: {
-            'x-component': 'CollectionField',
-            'x-decorator': 'FormItem',
-          },
           // @ts-ignore
           ...schema.properties,
           footer: {

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

@@ -1,5 +1,6 @@
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import cloneDeep from 'lodash/cloneDeep';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAPIClient } from '../../api-client';
@@ -20,29 +21,10 @@ const getSchema = (schema: IField): ISchema => {
         'x-component': 'Action.Drawer',
         'x-decorator': 'Form',
         'x-decorator-props': {
-          initialValue: {
+          initialValue: cloneDeep(schema.default),
-            ...schema.default,
-            name: `f_${uid()}`,
-          },
         },
         title: '{{ t("Edit field") }}',
         properties: {
-          type: {
-            'x-component': 'CollectionField',
-            'x-decorator': 'FormItem',
-          },
-          'uiSchema.title': {
-            type: 'number',
-            title: '{{ t("Field display name") }}',
-            required: true,
-            'x-component': 'Input',
-            'x-decorator': 'FormItem',
-          },
-          name: {
-            'x-component': 'CollectionField',
-            'x-decorator': 'FormItem',
-            'x-disabled': true,
-          },
           // @ts-ignore
           ...schema.properties,
           footer: {

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

@@ -35,7 +35,10 @@ export const options = Object.keys(groupLabels).map((groupName) => {
     label: groupLabels[groupName],
     children: Object.keys(fields[groupName] || {})
       .map((type) => {
+        const field = fields[groupName][type];
         return {
+          value: type,
+          label: field.title,
           name: type,
           ...fields[groupName][type],
         };

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

@@ -1,5 +1,6 @@
 import { ISchema } from '@formily/react';
 import { CollectionOptions } from '../../types';
+import { options } from '../interfaces';
 
 const collection: CollectionOptions = {
   name: 'fields',
@@ -28,7 +29,8 @@ const collection: CollectionOptions = {
       uiSchema: {
         title: '{{ t("Field interface") }}',
         type: 'string',
-        'x-component': 'Input',
+        'x-component': 'Select',
+        enum: options as any,
       },
     },
     {
@@ -94,6 +96,12 @@ export const collectionFieldSchema: ISchema = {
           type: 'void',
           title: '{{ t("Delete") }}',
           'x-component': 'Action',
+          "x-component-props": {
+            confirm: {
+              title: "{{t('Delete record')}}",
+              content: "{{t('Are you sure you want to delete it?')}}",
+            },
+          }
         },
         create: {
           type: 'void',
@@ -176,6 +184,10 @@ export const collectionFieldSchema: ISchema = {
                   title: '{{ t("Delete") }}',
                   'x-component': 'Action.Link',
                   'x-component-props': {
+                    confirm: {
+                      title: "{{t('Delete record')}}",
+                      content: "{{t('Are you sure you want to delete it?')}}",
+                    },
                     useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
                   },
                 },

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

@@ -79,6 +79,12 @@ export const collectionSchema: ISchema = {
               type: 'void',
               title: '{{ t("Delete") }}',
               'x-component': 'Action',
+              'x-component-props': {
+                confirm: {
+                  title: "{{t('Delete record')}}",
+                  content: "{{t('Are you sure you want to delete it?')}}",
+                },
+              },
             },
             create: {
               type: 'void',
@@ -101,6 +107,7 @@ export const collectionSchema: ISchema = {
                     name: {
                       'x-component': 'CollectionField',
                       'x-decorator': 'FormItem',
+                      default: '{{ randomString("t_") }}',
                     },
                     footer: {
                       type: 'void',
@@ -248,6 +255,10 @@ export const collectionSchema: ISchema = {
                       title: '{{ t("Delete") }}',
                       'x-component': 'Action.Link',
                       'x-component-props': {
+                        confirm: {
+                          title: "{{t('Delete record')}}",
+                          content: "{{t('Are you sure you want to delete it?')}}",
+                        },
                         useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
                       },
                     },

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

@@ -9,6 +9,9 @@ export const useCollectionField = () => {
   const record = useRecord();
   const api = useAPIClient();
   const ctx = useContext(CollectionFieldContext);
+  if (!ctx) {
+    return {} as any;
+  }
   const resourceName = `${ctx?.collectinName || collection?.name}.${ctx.name}`;
   const resource = api?.resource(resourceName, record[ctx.sourceKey]);
   return {

packages/client/src/collection-manager/interfaces/attachment.ts

@@ -0,0 +1,50 @@
+import { uid } from '@formily/shared';
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const attachment: IField = {
+  name: 'attachment',
+  type: 'object',
+  group: 'media',
+  title: '{{t("Attachment")}}',
+  isAssociation: true,
+  default: {
+    type: 'belongsToMany',
+    target: 'attachments',
+    // name,
+    uiSchema: {
+      type: 'array',
+      // title,
+      'x-component': 'Upload.Attachment',
+      'x-decorator': 'FormItem',
+      'x-designable-bar': 'Upload.DesignableBar',
+    },
+  },
+  initialize: (values: any) => {
+    if (!values.through) {
+      values.through = `t_${uid()}`;
+    }
+    if (!values.foreignKey) {
+      values.foreignKey = `f_${uid()}`;
+    }
+    if (!values.otherKey) {
+      values.otherKey = `f_${uid()}`;
+    }
+    if (!values.sourceKey) {
+      values.sourceKey = 'id';
+    }
+    if (!values.targetKey) {
+      values.targetKey = 'id';
+    }
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.x-component-props.multiple': {
+      type: 'boolean',
+      'x-content': "{{t('Allow uploading multiple files')}}",
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox',
+      default: true,
+    },
+  },
+};

packages/client/src/collection-manager/interfaces/checkbox.ts

@@ -1,3 +1,4 @@
+import { defaultProps } from './properties';
 import { IField } from './types';
 
 export const checkbox: IField = {
@@ -14,7 +15,9 @@ export const checkbox: IField = {
       'x-component': 'Checkbox',
     },
   },
-  properties: {},
+  properties: {
+    ...defaultProps,
+  },
   operators: [
     { label: '{{t("Yes")}}', value: '$isTruly', selected: true, noValue: true },
     { label: '{{t("No")}}', value: '$isFalsy', noValue: true },

packages/client/src/collection-manager/interfaces/checkboxGroup.ts

@@ -1,4 +1,4 @@
-import { dataSource } from './properties';
+import { dataSource, defaultProps } from './properties';
 import { IField } from './types';
 
 export const checkboxGroup: IField = {
@@ -17,6 +17,7 @@ export const checkboxGroup: IField = {
     },
   },
   properties: {
+    ...defaultProps,
     'uiSchema.enum': dataSource,
   },
 };

packages/client/src/collection-manager/interfaces/chinaRegion.ts

@@ -1,4 +1,5 @@
 import { uid } from '@formily/shared';
+import { defaultProps } from './properties';
 import { IField } from './types';
 
 export const chinaRegion: IField = {
@@ -48,6 +49,7 @@ export const chinaRegion: IField = {
     }
   },
   properties: {
+    ...defaultProps,
     'uiSchema.x-component-props.maxLevel': {
       type: 'number',
       'x-component': 'Radio.Group',

packages/client/src/collection-manager/interfaces/createdAt.ts

@@ -1,4 +1,4 @@
-import { dateTimeProps } from './properties';
+import { dateTimeProps, defaultProps } from './properties';
 import { IField } from './types';
 
 export const createdAt: IField = {
@@ -21,6 +21,7 @@ export const createdAt: IField = {
     },
   },
   properties: {
+    ...defaultProps,
     ...dateTimeProps,
   },
 };

packages/client/src/collection-manager/interfaces/createdBy.ts

@@ -0,0 +1,32 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const createdBy: IField = {
+  name: 'createdBy',
+  type: 'object',
+  group: 'systemInfo',
+  order: 3,
+  title: '{{t("Created by")}}',
+  isAssociation: true,
+  default: {
+    type: 'belongsTo',
+    target: 'users',
+    foreignKey: 'createdById',
+    // name,
+    uiSchema: {
+      type: 'object',
+      title: '{{t("Created by")}}',
+      'x-component': 'RecordPicker',
+      'x-component-props': {
+        fieldNames: {
+          value: 'id',
+          label: 'nickname',
+        },
+      },
+      'x-read-pretty': true,
+    },
+  },
+  properties: {
+    ...defaultProps,
+  },
+};

packages/client/src/collection-manager/interfaces/datetime.ts

@@ -0,0 +1,37 @@
+import { dateTimeProps, defaultProps } from './properties';
+import { IField } from './types';
+
+export const datetime: IField = {
+  name: 'datetime',
+  type: 'object',
+  group: 'datetime',
+  order: 1,
+  title: '{{t("Datetime")}}',
+  sortable: true,
+  default: {
+    type: 'date',
+    // name,
+    uiSchema: {
+      type: 'datetime',
+      // title,
+      'x-component': 'DatePicker',
+      'x-component-props': {
+        showTime: false,
+      },
+    },
+  },
+  properties: {
+    ...defaultProps,
+    ...dateTimeProps,
+  },
+  operators: [
+    { label: "{{ t('is') }}", value: '$dateOn', selected: true },
+    { label: "{{ t('is not') }}", value: '$dateNotOn' },
+    { label: "{{ t('is before') }}", value: '$dateBefore' },
+    { label: "{{ t('is after') }}", value: '$dateAfter' },
+    { label: "{{ t('is on or after') }}", value: '$dateNotBefore' },
+    { label: "{{ t('is on or before') }}", value: '$dateNotAfter' },
+    { label: "{{ t('is empty') }}", value: '$null', noValue: true },
+    { label: "{{ t('is not empty') }}", value: '$notNull', noValue: true },
+  ],
+};

packages/client/src/collection-manager/interfaces/email.ts

@@ -1,3 +1,5 @@
+import { input } from './input';
+import { defaultProps } from './properties';
 import { IField } from './types';
 
 export const email: IField = {
@@ -14,9 +16,11 @@ export const email: IField = {
       type: 'string',
       // title,
       'x-component': 'Input',
-      'x-decorator': 'FormItem',
       'x-validator': 'email',
-      'x-designable-bar': 'Input.DesignableBar',
     },
   },
+  properties: {
+    ...defaultProps,
+  },
+  operators: input.operators,
 };

packages/client/src/collection-manager/interfaces/icon.ts

@@ -0,0 +1,22 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const icon: IField = {
+  name: 'icon',
+  type: 'object',
+  group: 'basic',
+  order: 8,
+  title: '{{t("Icon")}}',
+  default: {
+    type: 'string',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'IconPicker',
+    },
+  },
+  properties: {
+    ...defaultProps,
+  },
+};

packages/client/src/collection-manager/interfaces/index.ts

@@ -1,8 +1,25 @@
+export * from './attachment';
 export * from './checkbox';
 export * from './checkboxGroup';
 export * from './chinaRegion';
 export * from './createdAt';
+export * from './createdBy';
+export * from './datetime';
 export * from './email';
+export * from './icon';
 export * from './input';
+export * from './linkTo';
+export * from './markdown';
+export * from './multipleSelect';
+export * from './number';
+export * from './password';
+export * from './percent';
+export * from './phone';
+export * from './radioGroup';
+export * from './select';
+export * from './subTable';
 export * from './textarea';
+export * from './time';
+export * from './updatedAt';
+export * from './updatedBy';
 

packages/client/src/collection-manager/interfaces/input.ts

@@ -1,3 +1,4 @@
+import { defaultProps } from './properties';
 import { IField } from './types';
 
 export const input: IField = {
@@ -16,6 +17,7 @@ export const input: IField = {
     },
   },
   properties: {
+    ...defaultProps,
   },
   operators: [
     { label: '{{t("contains")}}', value: '$includes', selected: true },

packages/client/src/collection-manager/interfaces/linkTo.ts

@@ -0,0 +1,70 @@
+import { uid } from '@formily/shared';
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const linkTo: IField = {
+  name: 'linkTo',
+  type: 'object',
+  group: 'relation',
+  order: 1,
+  title: '{{t("Link to")}}',
+  isAssociation: true,
+  default: {
+    type: 'belongsToMany',
+    // name,
+    uiSchema: {
+      type: 'array',
+      // title,
+      'x-component': 'Select.Drawer',
+      'x-component-props': {},
+    },
+  },
+  initialize: (values: any) => {
+    if (values.dataType === 'belongsToMany') {
+      if (!values.through) {
+        values.through = `t_${uid()}`;
+      }
+      if (!values.foreignKey) {
+        values.foreignKey = `f_${uid()}`;
+      }
+      if (!values.otherKey) {
+        values.otherKey = `f_${uid()}`;
+      }
+      if (!values.sourceKey) {
+        values.sourceKey = 'id';
+      }
+      if (!values.targetKey) {
+        if (values.target === 'roles') {
+          values.targetKey = 'name';
+        } else {
+          values.targetKey = 'id';
+        }
+      }
+    }
+  },
+  properties: {
+    ...defaultProps,
+    target: {
+      type: 'string',
+      title: '{{t("Related collection")}}',
+      required: true,
+      // 'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+    },
+    // 'uiSchema.x-component-props.fieldNames.label': {
+    //   type: 'string',
+    //   title: '要显示的标题字段',
+    //   required: true,
+    //   'x-reactions': ['{{useAsyncDataSource(loadCollectionFields)}}'],
+    //   'x-decorator': 'FormItem',
+    //   'x-component': 'Select',
+    // },
+    'uiSchema.x-component-props.multiple': {
+      type: 'boolean',
+      'x-content': '{{t("Allow linking to multiple records")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox',
+    },
+  },
+};

packages/client/src/collection-manager/interfaces/markdown.ts

@@ -0,0 +1,21 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const markdown: IField = {
+  name: 'markdown',
+  type: 'object',
+  title: 'Markdown',
+  group: 'media',
+  default: {
+    type: 'text',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'Markdown',
+    },
+  },
+  properties: {
+    ...defaultProps,
+  },
+};

packages/client/src/collection-manager/interfaces/multipleSelect.ts

@@ -0,0 +1,54 @@
+import { dataSource, defaultProps } from './properties';
+import { IField } from './types';
+
+export const multipleSelect: IField = {
+  name: 'multipleSelect',
+  type: 'object',
+  group: 'choices',
+  order: 3,
+  title: '{{t("Multiple select")}}',
+  default: {
+    type: 'json',
+    // name,
+    uiSchema: {
+      type: 'array',
+      // title,
+      'x-component': 'Select',
+      'x-component-props': {
+        mode: 'multiple',
+      },
+      'x-decorator': 'FormItem',
+      'x-designable-bar': 'Select.DesignableBar',
+      enum: [],
+    },
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.enum': dataSource,
+  },
+  operations: [
+    {
+      label: '{{t("is")}}',
+      value: '$match',
+      selected: true,
+      schema: { 'x-component': 'Select' },
+    },
+    {
+      label: '{{t("is not")}}',
+      value: '$notMatch',
+      schema: { 'x-component': 'Select' },
+    },
+    {
+      label: '{{t("contains")}}',
+      value: '$anyOf',
+      schema: { 'x-component': 'Select' },
+    },
+    {
+      label: '{{t("does not contain")}}',
+      value: '$noneOf',
+      schema: { 'x-component': 'Select' },
+    },
+    { label: '{{t("is empty")}}', value: '$null', noValue: true },
+    { label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
+  ],
+};

packages/client/src/collection-manager/interfaces/number.ts

@@ -0,0 +1,52 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const number: IField = {
+  name: 'number',
+  type: 'object',
+  group: 'basic',
+  order: 5,
+  title: '{{t("Number")}}',
+  sortable: true,
+  default: {
+    type: 'float',
+    // name,
+    uiSchema: {
+      type: 'number',
+      // title,
+      'x-component': 'InputNumber',
+      'x-component-props': {
+        stringMode: true,
+        step: '0',
+      },
+    },
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.x-component-props.step': {
+      type: 'string',
+      title: '{{t("Precision")}}',
+      'x-component': 'Select',
+      'x-decorator': 'FormItem',
+      default: '0',
+      enum: [
+        { value: '0', label: '1' },
+        { value: '0.1', label: '1.0' },
+        { value: '0.01', label: '1.00' },
+        { value: '0.001', label: '1.000' },
+        { value: '0.0001', label: '1.0000' },
+        { value: '0.00001', label: '1.00000' },
+      ],
+    },
+  },
+  operations: [
+    { label: '{{t("=")}}', value: '$eq', selected: true },
+    { label: '{{t("≠")}}', value: '$ne' },
+    { label: '{{t(">")}}', value: '$gt' },
+    { label: '{{t("≥")}}', value: '$gte' },
+    { label: '{{t("<")}}', value: '$lt' },
+    { label: '{{t("≤")}}', value: '$lte' },
+    { label: '{{t("is empty")}}', value: '$null', noValue: true },
+    { label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
+  ],
+};

packages/client/src/collection-manager/interfaces/password.ts

@@ -0,0 +1,24 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const password: IField = {
+  name: 'password',
+  type: 'object',
+  group: 'basic',
+  order: 7,
+  title: '{{t("Password")}}',
+  default: {
+    type: 'password',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'Password',
+      'x-decorator': 'FormItem',
+      'x-designable-bar': 'Password.DesignableBar',
+    },
+  },
+  properties: {
+    ...defaultProps,
+  },
+};

packages/client/src/collection-manager/interfaces/percent.ts

@@ -0,0 +1,47 @@
+import { number } from './number';
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const percent: IField = {
+  name: 'percent',
+  type: 'object',
+  group: 'basic',
+  order: 6,
+  title: '{{t("Percent")}}',
+  sortable: true,
+  default: {
+    type: 'float',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'InputNumber',
+      'x-component-props': {
+        stringMode: true,
+        step: '0',
+        addonAfter: '%',
+      },
+      'x-decorator': 'FormItem',
+      'x-designable-bar': 'InputNumber.DesignableBar',
+    },
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.x-component-props.step': {
+      type: 'string',
+      title: '{{t("Precision")}}',
+      'x-component': 'Select',
+      'x-decorator': 'FormItem',
+      default: '0',
+      enum: [
+        { value: '0', label: '1' },
+        { value: '0.1', label: '1.0' },
+        { value: '0.01', label: '1.00' },
+        { value: '0.001', label: '1.000' },
+        { value: '0.0001', label: '1.0000' },
+        { value: '0.00001', label: '1.00000' },
+      ],
+    },
+  },
+  operators: number.operators,
+};

packages/client/src/collection-manager/interfaces/phone.ts

@@ -0,0 +1,28 @@
+import { input } from './input';
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const phone: IField = {
+  name: 'phone',
+  type: 'object',
+  group: 'basic',
+  order: 3,
+  title: '{{t("Phone")}}',
+  sortable: true,
+  default: {
+    type: 'string',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+      'x-validator': 'phone',
+      'x-designable-bar': 'Input.DesignableBar',
+    },
+  },
+  properties: {
+    ...defaultProps,
+  },
+  operators: input.operators,
+};

packages/client/src/collection-manager/interfaces/radioGroup.ts

@@ -0,0 +1,25 @@
+import { dataSource, defaultProps } from './properties';
+import { select } from './select';
+import { IField } from './types';
+
+export const radioGroup: IField = {
+  name: 'radioGroup',
+  type: 'object',
+  group: 'choices',
+  order: 4,
+  title: '{{t("Radio group")}}',
+  default: {
+    type: 'string',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'Radio.Group',
+    },
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.enum': dataSource,
+  },
+  operators: select.operators,
+};

packages/client/src/collection-manager/interfaces/select.ts

@@ -0,0 +1,55 @@
+import { dataSource, defaultProps } from './properties';
+import { IField } from './types';
+
+export const select: IField = {
+  name: 'select',
+  type: 'object',
+  group: 'choices',
+  order: 2,
+  title: '{{t("Single select")}}',
+  default: {
+    type: 'string',
+    // name,
+    uiSchema: {
+      type: 'string',
+      // title,
+      'x-component': 'Select',
+      enum: [],
+    },
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.enum': dataSource,
+  },
+  operators: [
+    {
+      label: '{{t("is")}}',
+      value: '$eq',
+      selected: true,
+      schema: { 'x-component': 'Select' },
+    },
+    {
+      label: '{{t("is not")}}',
+      value: '$ne',
+      schema: { 'x-component': 'Select' },
+    },
+    {
+      label: '{{t("contains")}}',
+      value: '$in',
+      schema: {
+        'x-component': 'Select',
+        'x-component-props': { mode: 'tags' },
+      },
+    },
+    {
+      label: '{{t("does not contain")}}',
+      value: '$notIn',
+      schema: {
+        'x-component': 'Select',
+        'x-component-props': { mode: 'tags' },
+      },
+    },
+    { label: '{{t("is empty")}}', value: '$null', noValue: true },
+    { label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
+  ],
+};

packages/client/src/collection-manager/interfaces/subTable.ts

@@ -0,0 +1,41 @@
+import { uid } from '@formily/shared';
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const subTable: IField = {
+  name: 'subTable',
+  type: 'object',
+  group: 'relation',
+  order: 2,
+  title: '{{t("Sub-table")}}',
+  isAssociation: true,
+  disabled: true,
+  default: {
+    type: 'hasMany',
+    // name,
+    uiSchema: {
+      type: 'array',
+      // title,
+      'x-component': 'Table',
+      'x-component-props': {},
+      enum: [],
+    },
+  },
+  initialize: (values: any) => {
+    if (!values.target) {
+      values.target = `t_${uid()}`;
+    }
+    if (!values.foreignKey) {
+      values.foreignKey = `f_${uid()}`;
+    }
+  },
+  properties: {
+    ...defaultProps,
+    // children: {
+    //   type: 'array',
+    //   title: '{{t("Sub-table fields")}}',
+    //   'x-decorator': 'FormItem',
+    //   'x-component': 'DatabaseField',
+    // },
+  },
+};

packages/client/src/collection-manager/interfaces/textarea.ts

@@ -1,3 +1,4 @@
+import { defaultProps } from './properties';
 import { IField } from './types';
 
 export const textarea: IField = {
@@ -15,5 +16,7 @@ export const textarea: IField = {
       'x-component': 'Input.TextArea',
     },
   },
-  properties: {},
+  properties: {
+    ...defaultProps,
+  },
 };

packages/client/src/collection-manager/interfaces/time.ts

@@ -0,0 +1,45 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const time: IField = {
+  name: 'time',
+  type: 'object',
+  group: 'datetime',
+  order: 2,
+  title: '{{t("Time")}}',
+  sortable: true,
+  default: {
+    type: 'time',
+    // name,
+    uiSchema: {
+      type: 'string',
+      'x-component': 'TimePicker',
+    },
+  },
+  properties: {
+    ...defaultProps,
+    'uiSchema.x-component-props.format': {
+      type: 'string',
+      title: '{{t("Time format")}}',
+      'x-component': 'Radio.Group',
+      'x-decorator': 'FormItem',
+      default: 'HH:mm:ss',
+      enum: [
+        {
+          label: '{{t("12 hour")}}',
+          value: 'hh:mm:ss a',
+        },
+        {
+          label: '{{t("24 hour")}}',
+          value: 'HH:mm:ss',
+        },
+      ],
+    },
+  },
+  operators: [
+    { label: '{{t("is")}}', value: '$eq', selected: true },
+    { label: '{{t("is not")}}', value: '$neq' },
+    { label: '{{t("is empty")}}', value: '$null', noValue: true },
+    { label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
+  ],
+};

packages/client/src/collection-manager/interfaces/types.ts

@@ -8,5 +8,6 @@ interface IDefault {
 
 export interface IField extends ISchema {
   default?: IDefault;
+  operators?: any[];
   [key: string]: any;
 }

packages/client/src/collection-manager/interfaces/updatedAt.ts

@@ -0,0 +1,29 @@
+import { datetime } from './datetime';
+import { dateTimeProps, defaultProps } from './properties';
+import { IField } from './types';
+
+export const updatedAt: IField = {
+  name: 'updatedAt',
+  type: 'object',
+  group: 'systemInfo',
+  order: 2,
+  title: '{{t("Last updated at")}}',
+  sortable: true,
+  default: {
+    type: 'date',
+    field: 'updated_at',
+    // name,
+    uiSchema: {
+      type: 'datetime',
+      title: '{{t("Last updated at")}}',
+      'x-component': 'DatePicker',
+      'x-component-props': {},
+      'x-read-pretty': true,
+    },
+  },
+  properties: {
+    ...defaultProps,
+    ...dateTimeProps,
+  },
+  operators: datetime.operators,
+};

packages/client/src/collection-manager/interfaces/updatedBy.ts

@@ -0,0 +1,31 @@
+import { defaultProps } from './properties';
+import { IField } from './types';
+
+export const updatedBy: IField = {
+  name: 'updatedBy',
+  type: 'object',
+  group: 'systemInfo',
+  order: 4,
+  title: '{{t("Last updated by")}}',
+  isAssociation: true,
+  default: {
+    type: 'belongsTo',
+    target: 'users',
+    foreignKey: 'updatedById',
+    uiSchema: {
+      type: 'object',
+      title: '{{t("Last updated by")}}',
+      'x-component': 'Select.Drawer',
+      'x-component-props': {
+        fieldNames: {
+          value: 'id',
+          label: 'nickname',
+        },
+      },
+      'x-read-pretty': true,
+    },
+  },
+  properties: {
+    ...defaultProps,
+  },
+};

packages/client/src/route-switch/antd/admin-layout/index.tsx

@@ -39,6 +39,10 @@ export function AdminLayout(props: any) {
             uid={route.uiSchemaUid}
             scope={{ onSelect, sideMenuRef, defaultSelectedUid }}
             schemaTransform={(data) => {
+              if (!data) {
+                return data;
+              }
+              data['x-component-props'] = data['x-component-props'] || {};
               data['x-component-props']['defaultSelectedUid'] = defaultSelectedUid;
               return data;
             }}

packages/client/src/schema-component/antd/AntdSchemaComponentProvider.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import * as components from '.';
+import * as common from '../common';
 import { SchemaComponentOptions } from '../core/SchemaComponentOptions';
 
 export const AntdSchemaComponentProvider = (props) => {
   const { children } = props;
-  return <SchemaComponentOptions components={{ ...(components as any) }}>{children}</SchemaComponentOptions>;
+  return <SchemaComponentOptions components={{ ...components, ...common } as any}>{children}</SchemaComponentOptions>;
 };

packages/client/src/schema-component/antd/action/Action.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { observer, useField } from '@formily/react';
-import { Button } from 'antd';
+import { Button, Modal } from 'antd';
 import classnames from 'classnames';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -63,7 +63,7 @@ export const actionDesignerCss = css`
 `;
 
 export const Action: ComposedAction = observer((props: any) => {
-  const { openMode, containerRefKey, component, useAction = useA, onClick, className, ...others } = props;
+  const { confirm, openMode, containerRefKey, component, useAction = useA, onClick, className, ...others } = props;
   const [visible, setVisible] = useState(false);
   const Designer = useDesigner();
   const field = useField();
@@ -73,9 +73,19 @@ export const Action: ComposedAction = observer((props: any) => {
       <SortableItem
         {...others}
         onClick={(e) => {
-          onClick && onClick(e);
+          const onOk = () => {
+            onClick?.(e);
             setVisible(true);
             run();
+          };
+          if (confirm) {
+            Modal.confirm({
+              ...confirm,
+              onOk,
+            });
+          } else {
+            onOk();
+          }
         }}
         component={component || Button}
         className={classnames(className, actionDesignerCss)}
@@ -102,7 +112,7 @@ Action.Designer = () => {
 };
 
 Action.Link = observer((props) => {
-  return <Action {...props} component={Link} className={'nb-action-link'}/>;
+  return <Action {...props} component={Link} className={'nb-action-link'} />;
 });
 
 Action.Drawer = ActionDrawer;

packages/client/src/schema-component/antd/action/ActionBar.tsx

@@ -1,6 +1,7 @@
 import { observer, RecursionField, useFieldSchema } from '@formily/react';
 import { Space } from 'antd';
 import React from 'react';
+import { DndContext } from '../../common';
 import { useComponent } from '../../hooks';
 
 export const ActionBar = observer((props: any) => {
@@ -18,6 +19,7 @@ export const ActionBar = observer((props: any) => {
   return (
     <div style={{ display: 'flex', justifyContent: 'space-between', ...style }} {...others}>
       <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+        <DndContext>
           <Space>
             {fieldSchema.mapProperties((schema, key) => {
               if (schema['x-align'] !== 'left') {
@@ -34,6 +36,7 @@ export const ActionBar = observer((props: any) => {
               return <RecursionField key={key} name={key} schema={schema} />;
             })}
           </Space>
+        </DndContext>
       </div>
       {ActionInitializer && <ActionInitializer />}
     </div>

packages/client/src/schema-component/antd/array-table/ArrayTable.tsx

@@ -1,7 +1,10 @@
+import { css } from '@emotion/css';
 import { ArrayField } from '@formily/core';
 import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { Table, TableColumnProps } from 'antd';
+import cls from 'classnames';
 import React from 'react';
+import { DndContext } from '../..';
 import { RecordProvider } from '../../../';
 import { useComponent } from '../../hooks';
 
@@ -23,6 +26,7 @@ const useTableColumns = () => {
       return {
         title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
         dataIndex: s.name,
+        key: s.name,
         render: (v, record) => {
           const index = field.value?.indexOf(record);
           return (
@@ -39,8 +43,8 @@ const useTableColumns = () => {
   }
   return columns.concat({
     title: <Initializer />,
-    dataIndex: 'TableColumnInitializer',
+    dataIndex: 'TABLE_COLUMN_INITIALIZER',
-    key: 'TableColumnInitializer',
+    key: 'TABLE_COLUMN_INITIALIZER',
   });
 };
 
@@ -49,13 +53,49 @@ type ArrayTableType = React.FC<any> & {
   mixin?: (T: any) => void;
 };
 
+export const components = {
+  header: {
+    wrapper: (props) => {
+      return (
+        <DndContext>
+          <thead {...props} />
+        </DndContext>
+      );
+    },
+    cell: (props) => {
+      return (
+        <th
+          {...props}
+          className={cls(
+            props.className,
+            css`
+              &:hover .general-schema-designer {
+                display: block;
+              }
+            `,
+          )}
+        />
+      );
+    },
+  },
+  body: {
+    wrapper: (props) => {
+      return (
+        <DndContext>
+          <tbody {...props} />
+        </DndContext>
+      );
+    },
+  },
+};
+
 export const ArrayTable: ArrayTableType = observer((props) => {
   const field = useField<ArrayField>();
   const columns = useTableColumns();
   const { onChange, ...others } = props;
   return (
     <div>
-      <Table {...others} columns={columns} dataSource={field.value?.slice()} />
+      <Table {...others} components={components} columns={columns} dataSource={field.value?.slice()} />
     </div>
   );
 });

packages/client/src/schema-component/antd/menu/Menu.Designer.tsx

@@ -6,7 +6,18 @@ export const MenuDesigner = () => {
   const field = useField();
   return (
     <GeneralSchemaDesigner>
-      <SchemaSettings.Item>编辑</SchemaSettings.Item>
+      <SchemaSettings.Popup
+        schema={{
+          type: 'void',
+          'x-component': 'Action.Modal',
+          'x-decorator': 'Form',
+          'x-component-props': {
+            title: '标题',
+          },
+        }}
+      >
+        编辑
+      </SchemaSettings.Popup>
       <SchemaSettings.Divider />
       <SchemaSettings.Remove />
     </GeneralSchemaDesigner>

packages/client/src/schema-component/common/dnd-context/index.tsx

@@ -49,7 +49,12 @@ const useDragEnd = () => {
 export const DndContext = observer((props) => {
   return (
     <DndKitContext collisionDetection={rectIntersection} onDragEnd={useDragEnd()}>
-      <DragOverlay>
+      <DragOverlay
+        dropAnimation={{
+          duration: 10,
+          easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+        }}
+      >
         <span style={{ whiteSpace: 'nowrap' }}>拖拽中</span>
       </DragOverlay>
       {props.children}

packages/client/src/schema-component/core/SchemaComponentProvider.tsx

@@ -1,20 +1,24 @@
-import React, { useMemo, useState } from 'react';
-import { uid } from '@formily/shared';
 import { createForm } from '@formily/core';
-import { useCookieState } from 'ahooks';
-import { useTranslation } from 'react-i18next';
 import { FormProvider } from '@formily/react';
-import { ISchemaComponentProvider } from '../types';
+import { uid } from '@formily/shared';
+import { useCookieState } from 'ahooks';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { SchemaComponentContext } from '../context';
+import { ISchemaComponentProvider } from '../types';
 import { SchemaComponentOptions } from './SchemaComponentOptions';
 
+const randomString = (prefix: string = '') => {
+  return `${prefix}${uid()}`;
+};
+
 export const SchemaComponentProvider: React.FC<ISchemaComponentProvider> = (props) => {
   const { components, children } = props;
   const [, setUid] = useState(uid());
   const [formId, setFormId] = useState(uid());
   const form = props.form || useMemo(() => createForm(), [formId]);
   const { t } = useTranslation();
-  const scope = { ...props.scope, t };
+  const scope = { ...props.scope, t, randomString };
   const [active, setActive] = useCookieState('useCookieDesignable');
   return (
     <SchemaComponentContext.Provider

packages/client/src/schema-initializer/Initializers/BlockInitializer/TableBlock.tsx

@@ -59,6 +59,7 @@ const createSchema = (collectionName) => {
             properties: {
               actions: {
                 type: 'void',
+                'x-decorator': 'DndContext',
                 'x-component': 'Space',
                 'x-component-props': {
                   split: '|',

packages/client/src/schema-initializer/Initializers/FormItemInitializer/index.tsx

@@ -13,7 +13,7 @@ const useFormItems = () => {
     return {
       type: 'item',
       title: field?.uiSchema?.title || field.name,
-      component: InitializeFormItem,
+      component: FormItem,
       schema: {
         name: field.name,
         'x-designer': 'FormItem.Designer',
@@ -74,7 +74,7 @@ const useCurrentFieldSchema = (path: string) => {
 
 const itemWrap = SchemaInitializer.itemWrap;
 
-const InitializeFormItem = itemWrap((props) => {
+const FormItem = itemWrap((props) => {
   const { item, insert } = props;
   const { schema, exists, remove } = useCurrentFieldSchema(item.schema['x-collection-field']);
   return (
@@ -95,8 +95,10 @@ const InitializeFormItem = itemWrap((props) => {
   );
 });
 
-const InitializeTextFormItem = itemWrap((props) => {
+const TextItem = itemWrap((props) => {
   const { insert } = props;
+  const { t } = useTranslation();
+
   return (
     <SchemaInitializer.Item
       onClick={() => {
@@ -107,7 +109,7 @@ const InitializeTextFormItem = itemWrap((props) => {
           'x-designer': 'Markdown.Void.Designer',
           'x-component': 'Markdown.Void',
           'x-component-props': {
-            content: '# Markdown content',
+            content: t('This is a demo text, **supports Markdown syntax**.'),
           },
         });
       }}
@@ -133,7 +135,7 @@ export const FormItemInitializer = observer((props: any) => {
         {
           type: 'item',
           title: t('Add text'),
-          component: InitializeTextFormItem,
+          component: TextItem,
         },
       ]}
     >

packages/client/src/schema-initializer/Initializers/PopupFormActionInitializer/index.tsx

@@ -0,0 +1,95 @@
+import { observer, useFieldSchema } from '@formily/react';
+import { Switch } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SchemaInitializer } from '../..';
+import { useDesignable } from '../../../schema-component';
+
+const useCurrentActionSchema = (action: string) => {
+  const fieldSchema = useFieldSchema();
+  const { remove } = useDesignable();
+  const schema = fieldSchema.reduceProperties((buf, s) => {
+    if (s['x-action'] === action) {
+      return s;
+    }
+    return buf;
+  });
+  return {
+    schema,
+    exists: !!schema,
+    remove() {
+      schema && remove(schema);
+    },
+  };
+};
+
+const InitializeAction = SchemaInitializer.itemWrap((props) => {
+  const { item, insert } = props;
+  const { exists, remove } = useCurrentActionSchema(item.schema['x-action']);
+  return (
+    <SchemaInitializer.Item
+      onClick={() => {
+        if (exists) {
+          return remove();
+        }
+        insert({
+          type: 'void',
+          'x-designer': 'Action.Designer',
+          'x-component': 'Action',
+          ...item.schema,
+        });
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        {item.title}
+        <Switch style={{ marginLeft: 20 }} size={'small'} checked={exists} />
+      </div>
+    </SchemaInitializer.Item>
+  );
+});
+
+export const PopupFormActionInitializer = observer((props: any) => {
+  const { t } = useTranslation();
+  return (
+    <SchemaInitializer.Button
+      insertPosition={'beforeEnd'}
+      items={[
+        {
+          type: 'itemGroup',
+          title: t('Enable actions'),
+          children: [
+            {
+              type: 'item',
+              title: t('Submit'),
+              component: InitializeAction,
+              schema: {
+                title: '{{ t("Submit") }}',
+                'x-action': 'submit',
+                'x-component': 'Action',
+                'x-component-props': {
+                  type: 'primary',
+                  useAction: '{{ cm.useCreateAction }}',
+                },
+              },
+            },
+            {
+              type: 'item',
+              title: t('Cancel'),
+              component: InitializeAction,
+              schema: {
+                title: '{{ t("Cancel") }}',
+                'x-action': 'cancel',
+                'x-component': 'Action',
+                'x-component-props': {
+                  useAction: '{{ cm.useCancelAction }}',
+                },
+              },
+            },
+          ],
+        },
+      ]}
+    >
+      {t('Configure actions')}
+    </SchemaInitializer.Button>
+  );
+});

packages/client/src/schema-initializer/Initializers/TableActionInitializer/index.tsx

@@ -100,20 +100,15 @@ export const TableActionInitializer = observer((props: any) => {
                         type: 'void',
                         'x-component': 'Action.Container.Footer',
                         properties: {
-                          action1: {
+                          actions: {
-                            title: '{{ t("Cancel") }}',
+                            type: 'void',
-                            'x-component': 'Action',
+                            'x-action-initializer': 'PopupFormActionInitializer',
+                            'x-decorator': 'DndContext',
+                            'x-component': 'ActionBar',
                             'x-component-props': {
-                              useAction: '{{ cm.useCancelAction }}',
+                              layout: 'one-column',
-                            },
-                          },
-                          action2: {
-                            title: '{{ t("Submit") }}',
-                            'x-component': 'Action',
-                            'x-component-props': {
-                              type: 'primary',
-                              useAction: '{{ cm.useCreateAction }}',
                             },
+                            properties: {},
                           },
                         },
                       },
@@ -130,6 +125,10 @@ export const TableActionInitializer = observer((props: any) => {
                 title: '{{ t("Delete") }}',
                 'x-action': 'destroy',
                 'x-component-props': {
+                  confirm: {
+                    title: "{{t('Delete record')}}",
+                    content: "{{t('Are you sure you want to delete it?')}}",
+                  },
                   useAction: '{{ cm.useBulkDestroyAction }}',
                 },
               },

packages/client/src/schema-initializer/Initializers/TableRecordActionInitializer/index.tsx

@@ -204,20 +204,15 @@ export const TableRecordActionInitializer = observer((props: any) => {
                             'x-component': 'ActionBar',
                             'x-component-props': {},
                             properties: {
-                              action1: {
+                              actions: {
-                                title: '{{ t("Cancel") }}',
+                                type: 'void',
-                                'x-component': 'Action',
+                                'x-action-initializer': 'PopupFormActionInitializer',
+                                'x-decorator': 'DndContext',
+                                'x-component': 'ActionBar',
                                 'x-component-props': {
-                                  useAction: '{{ cm.useCancelAction }}',
+                                  layout: 'one-column',
-                                },
-                              },
-                              action2: {
-                                title: '{{ t("Submit") }}',
-                                'x-component': 'Action',
-                                'x-component-props': {
-                                  type: 'primary',
-                                  useAction: '{{ cm.useUpdateAction }}',
                                 },
+                                properties: {},
                               },
                             },
                           },
@@ -236,6 +231,10 @@ export const TableRecordActionInitializer = observer((props: any) => {
                 title: '{{ t("Delete") }}',
                 'x-action': 'destroy',
                 'x-component-props': {
+                  confirm: {
+                    title: "{{t('Delete record')}}",
+                    content: "{{t('Are you sure you want to delete it?')}}",
+                  },
                   useAction: '{{ cm.useDestroyAction }}',
                 },
               },

packages/client/src/schema-initializer/Initializers/index.ts

@@ -2,6 +2,7 @@ export * from './BlockInitializer';
 export * from './DetailsActionInitializer';
 export * from './FormActionInitializer';
 export * from './FormItemInitializer';
+export * from './PopupFormActionInitializer';
 export * from './RecordBlockInitializer';
 export * from './TableActionInitializer';
 export * from './TableColumnInitializer';

packages/client/src/schema-settings/SchemaSettings.tsx

@@ -1,8 +1,10 @@
 import { GeneralField } from '@formily/core';
 import { ISchema, Schema } from '@formily/react';
-import { Dropdown, Menu, MenuItemProps } from 'antd';
+import { uid } from '@formily/shared';
-import React, { createContext, useContext } from 'react';
+import { Dropdown, Menu, MenuItemProps, Modal } from 'antd';
-import { Designable } from '..';
+import React, { createContext, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionContext, Designable, SchemaComponent } from '..';
 
 interface SchemaSettingsProps {
   title?: any;
@@ -32,6 +34,7 @@ type SchemaSettingsNested = {
   Remove?: React.FC<RemoveProps>;
   Item?: React.FC<MenuItemProps>;
   Divider?: React.FC;
+  Popup?: React.FC<MenuItemProps & { schema?: ISchema }>;
   [key: string]: any;
 };
 
@@ -68,6 +71,7 @@ SchemaSettings.Item = (props) => {
     <Menu.Item
       {...props}
       onClick={(info) => {
+        //
         info.domEvent.preventDefault();
         info.domEvent.stopPropagation();
         props?.onClick?.(info);
@@ -92,18 +96,26 @@ SchemaSettings.Divider = (props) => {
 };
 
 SchemaSettings.Remove = (props: any) => {
-  const { removeParentsIfNoChildren, breakRemoveOn } = props;
+  const { confirm, removeParentsIfNoChildren, breakRemoveOn } = props;
   const { dn } = useSchemaSettings();
+  const { t } = useTranslation();
   return (
     <SchemaSettings.Item
       onClick={() => {
+        Modal.confirm({
+          title: t('Delete block'),
+          content: t('Are you sure you want to delete it?'),
+          ...confirm,
+          onOk() {
             dn.remove(null, {
               removeParentsIfNoChildren,
               breakRemoveOn,
             });
+          },
+        });
       }}
     >
-      移除
+      {t('Delete')}
     </SchemaSettings.Item>
   );
 };
@@ -116,10 +128,34 @@ SchemaSettings.SwitchItem = (props) => {
   return null;
 };
 
-SchemaSettings.ModalItem = (props) => {
+SchemaSettings.Popup = (props) => {
-  return null;
+  const { schema, ...others } = props;
+  const [visible, setVisible] = useState(false);
+  return (
+    <ActionContext.Provider value={{ visible, setVisible }}>
+      <SchemaSettings.Item
+        {...others}
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        {props.children || props.title}
+      </SchemaSettings.Item>
+      <SchemaComponent
+        schema={{
+          name: uid(),
+          ...schema,
+        }}
+      />
+    </ActionContext.Provider>
+  );
 };
 
 SchemaSettings.DrawerItem = (props) => {
-  return null;
+  const [visible, setVisible] = useState(false);
+  return (
+    <ActionContext.Provider value={{ visible, setVisible }}>
+      <SchemaSettings.Item {...props}>{props.children || props.title}</SchemaSettings.Item>
+    </ActionContext.Provider>
+  );
 };