diff --git a/docs/en-US/development/client/index.md b/docs/en-US/development/client/index.md
index 83983e138..9f51ef40a 100644
--- a/docs/en-US/development/client/index.md
+++ b/docs/en-US/development/client/index.md
@@ -42,6 +42,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 ```
diff --git a/docs/en-US/development/client/ui-schema-designer/demo1.tsx b/docs/en-US/development/client/ui-schema-designer/demo1.tsx
index 25469fab9..0b6b08ce4 100644
--- a/docs/en-US/development/client/ui-schema-designer/demo1.tsx
+++ b/docs/en-US/development/client/ui-schema-designer/demo1.tsx
@@ -4,27 +4,30 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
-  const { rowKey } = props;
-  const field = useField<ArrayField>();
-  const schema = useFieldSchema();
-  const columnSchemas = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === 'ArrayTable.Column') {
-      buf.push(s);
-    }
-    return buf;
-  }, []);
+const ArrayTable = observer(
+  (props: any) => {
+    const { rowKey } = props;
+    const field = useField<ArrayField>();
+    const schema = useFieldSchema();
+    const columnSchemas = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === 'ArrayTable.Column') {
+        buf.push(s);
+      }
+      return buf;
+    }, []);
 
-  const columns = columnSchemas.map((s) => {
-    return {
-      render: (value, record) => {
-        return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
-      },
-    } as TableColumnType<any>;
-  });
+    const columns = columnSchemas.map((s) => {
+      return {
+        render: (value, record) => {
+          return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
+        },
+      } as TableColumnType<any>;
+    });
 
-  return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+    return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
diff --git a/docs/en-US/development/client/ui-schema-designer/designable.md b/docs/en-US/development/client/ui-schema-designer/designable.md
index 87fc1919f..f725ecd79 100644
--- a/docs/en-US/development/client/ui-schema-designer/designable.md
+++ b/docs/en-US/development/client/ui-schema-designer/designable.md
@@ -180,11 +180,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
@@ -240,7 +240,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -289,7 +289,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (
@@ -316,7 +316,7 @@ export default function App() {
   );
 }
 ```
-## Applications of `x-designer` 
+## Applications of `x-designer`
 
 `x-designer` is usually used only in wrapper components such as BlockItem, CardItem, FormItem, etc.
 
diff --git a/docs/en-US/development/client/ui-schema-designer/extending-schema-components.md b/docs/en-US/development/client/ui-schema-designer/extending-schema-components.md
index 4e269a71c..6178f50ac 100644
--- a/docs/en-US/development/client/ui-schema-designer/extending-schema-components.md
+++ b/docs/en-US/development/client/ui-schema-designer/extending-schema-components.md
@@ -51,13 +51,13 @@ const ReadPretty = (props) => {
 };
 
 const SingleText = connect(
-  Input, 
+  Input,
   mapProps((props, field) => {
     return {
       ...props,
       suffix: '后缀',
     }
-  }), 
+  }),
   mapReadPretty(ReadPretty),
 );
 
@@ -103,7 +103,7 @@ const SingleText = connect(Input);
 const UsedObserver = observer((props) => {
   const form = useForm();
   return <div>UsedObserver: {form.values.t1}</div>
-});
+}, { displayName: 'UsedObserver' });
 
 const NotUsedObserver = (props) => {
   const form = useForm();
@@ -192,7 +192,7 @@ export default () => {
 };
 ```
 
-Comparison of rendering results by property type 
+Comparison of rendering results by property type
 
 ```tsx
 import React from 'react';
@@ -310,7 +310,7 @@ const ArrayList = observer((props) => {
       </ul>
     </>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -367,7 +367,7 @@ const ArrayList = observer((props) => {
       })}
     </ul>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -432,7 +432,7 @@ const ArrayTable = observer((props: any) => {
   });
 
   return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+}, { displayName: 'ArrayTable' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
diff --git a/docs/en-US/development/client/ui-schema-designer/insert-adjacent.md b/docs/en-US/development/client/ui-schema-designer/insert-adjacent.md
index f315f0c28..f910e012a 100644
--- a/docs/en-US/development/client/ui-schema-designer/insert-adjacent.md
+++ b/docs/en-US/development/client/ui-schema-designer/insert-adjacent.md
@@ -116,11 +116,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
diff --git a/docs/en-US/welcome/release/v08-changelog.md b/docs/en-US/welcome/release/v08-changelog.md
index 97cee2d6e..24fc16581 100644
--- a/docs/en-US/welcome/release/v08-changelog.md
+++ b/docs/en-US/welcome/release/v08-changelog.md
@@ -182,6 +182,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 
diff --git a/docs/tr-TR/development/client/ui-schema-designer/demo1.tsx b/docs/tr-TR/development/client/ui-schema-designer/demo1.tsx
index 25469fab9..0b6b08ce4 100644
--- a/docs/tr-TR/development/client/ui-schema-designer/demo1.tsx
+++ b/docs/tr-TR/development/client/ui-schema-designer/demo1.tsx
@@ -4,27 +4,30 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
-  const { rowKey } = props;
-  const field = useField<ArrayField>();
-  const schema = useFieldSchema();
-  const columnSchemas = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === 'ArrayTable.Column') {
-      buf.push(s);
-    }
-    return buf;
-  }, []);
+const ArrayTable = observer(
+  (props: any) => {
+    const { rowKey } = props;
+    const field = useField<ArrayField>();
+    const schema = useFieldSchema();
+    const columnSchemas = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === 'ArrayTable.Column') {
+        buf.push(s);
+      }
+      return buf;
+    }, []);
 
-  const columns = columnSchemas.map((s) => {
-    return {
-      render: (value, record) => {
-        return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
-      },
-    } as TableColumnType<any>;
-  });
+    const columns = columnSchemas.map((s) => {
+      return {
+        render: (value, record) => {
+          return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
+        },
+      } as TableColumnType<any>;
+    });
 
-  return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+    return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
diff --git a/docs/tr-TR/development/client/ui-schema-designer/designable.md b/docs/tr-TR/development/client/ui-schema-designer/designable.md
index 2aaa16b4a..676405e3a 100644
--- a/docs/tr-TR/development/client/ui-schema-designer/designable.md
+++ b/docs/tr-TR/development/client/ui-schema-designer/designable.md
@@ -183,11 +183,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
@@ -243,7 +243,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -292,7 +292,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (
diff --git a/docs/tr-TR/development/client/ui-schema-designer/extending-schema-components.md b/docs/tr-TR/development/client/ui-schema-designer/extending-schema-components.md
index 5fc966819..89bf45c3e 100644
--- a/docs/tr-TR/development/client/ui-schema-designer/extending-schema-components.md
+++ b/docs/tr-TR/development/client/ui-schema-designer/extending-schema-components.md
@@ -51,13 +51,13 @@ const ReadPretty = (props) => {
 };
 
 const SingleText = connect(
-  Input, 
+  Input,
   mapProps((props, field) => {
     return {
       ...props,
       suffix: '后缀',
     }
-  }), 
+  }),
   mapReadPretty(ReadPretty),
 );
 
@@ -103,7 +103,7 @@ const SingleText = connect(Input);
 const UsedObserver = observer((props) => {
   const form = useForm();
   return <div>UsedObserver: {form.values.t1}</div>
-});
+}, { displayName: 'UsedObserver' });
 
 const NotUsedObserver = (props) => {
   const form = useForm();
@@ -193,7 +193,7 @@ export default () => {
 };
 ```
 
-各类型 properties 渲染结果对比 
+各类型 properties 渲染结果对比
 
 ```tsx
 import React from 'react';
@@ -312,7 +312,7 @@ const ArrayList = observer((props) => {
       </ul>
     </>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -369,7 +369,7 @@ const ArrayList = observer((props) => {
       })}
     </ul>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -434,7 +434,7 @@ const ArrayTable = observer((props: any) => {
   });
 
   return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+}, { displayName: 'ArrayTable' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
@@ -515,4 +515,4 @@ export default () => {
     </SchemaComponentProvider>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/tr-TR/development/client/ui-schema-designer/insert-adjacent.md b/docs/tr-TR/development/client/ui-schema-designer/insert-adjacent.md
index f315f0c28..f910e012a 100644
--- a/docs/tr-TR/development/client/ui-schema-designer/insert-adjacent.md
+++ b/docs/tr-TR/development/client/ui-schema-designer/insert-adjacent.md
@@ -116,11 +116,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
diff --git a/docs/zh-CN/development/client/index.md b/docs/zh-CN/development/client/index.md
index d6d44e9fc..d33ac8b86 100644
--- a/docs/zh-CN/development/client/index.md
+++ b/docs/zh-CN/development/client/index.md
@@ -42,6 +42,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 ```
diff --git a/docs/zh-CN/development/client/ui-schema-designer/demo1.tsx b/docs/zh-CN/development/client/ui-schema-designer/demo1.tsx
index 25469fab9..0b6b08ce4 100644
--- a/docs/zh-CN/development/client/ui-schema-designer/demo1.tsx
+++ b/docs/zh-CN/development/client/ui-schema-designer/demo1.tsx
@@ -4,27 +4,30 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
-  const { rowKey } = props;
-  const field = useField<ArrayField>();
-  const schema = useFieldSchema();
-  const columnSchemas = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === 'ArrayTable.Column') {
-      buf.push(s);
-    }
-    return buf;
-  }, []);
+const ArrayTable = observer(
+  (props: any) => {
+    const { rowKey } = props;
+    const field = useField<ArrayField>();
+    const schema = useFieldSchema();
+    const columnSchemas = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === 'ArrayTable.Column') {
+        buf.push(s);
+      }
+      return buf;
+    }, []);
 
-  const columns = columnSchemas.map((s) => {
-    return {
-      render: (value, record) => {
-        return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
-      },
-    } as TableColumnType<any>;
-  });
+    const columns = columnSchemas.map((s) => {
+      return {
+        render: (value, record) => {
+          return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
+        },
+      } as TableColumnType<any>;
+    });
 
-  return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+    return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
diff --git a/docs/zh-CN/development/client/ui-schema-designer/designable.md b/docs/zh-CN/development/client/ui-schema-designer/designable.md
index 2aaa16b4a..676405e3a 100644
--- a/docs/zh-CN/development/client/ui-schema-designer/designable.md
+++ b/docs/zh-CN/development/client/ui-schema-designer/designable.md
@@ -183,11 +183,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
@@ -243,7 +243,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -292,7 +292,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (
diff --git a/docs/zh-CN/development/client/ui-schema-designer/extending-schema-components.md b/docs/zh-CN/development/client/ui-schema-designer/extending-schema-components.md
index 5fc966819..89bf45c3e 100644
--- a/docs/zh-CN/development/client/ui-schema-designer/extending-schema-components.md
+++ b/docs/zh-CN/development/client/ui-schema-designer/extending-schema-components.md
@@ -51,13 +51,13 @@ const ReadPretty = (props) => {
 };
 
 const SingleText = connect(
-  Input, 
+  Input,
   mapProps((props, field) => {
     return {
       ...props,
       suffix: '后缀',
     }
-  }), 
+  }),
   mapReadPretty(ReadPretty),
 );
 
@@ -103,7 +103,7 @@ const SingleText = connect(Input);
 const UsedObserver = observer((props) => {
   const form = useForm();
   return <div>UsedObserver: {form.values.t1}</div>
-});
+}, { displayName: 'UsedObserver' });
 
 const NotUsedObserver = (props) => {
   const form = useForm();
@@ -193,7 +193,7 @@ export default () => {
 };
 ```
 
-各类型 properties 渲染结果对比 
+各类型 properties 渲染结果对比
 
 ```tsx
 import React from 'react';
@@ -312,7 +312,7 @@ const ArrayList = observer((props) => {
       </ul>
     </>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -369,7 +369,7 @@ const ArrayList = observer((props) => {
       })}
     </ul>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -434,7 +434,7 @@ const ArrayTable = observer((props: any) => {
   });
 
   return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+}, { displayName: 'ArrayTable' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
@@ -515,4 +515,4 @@ export default () => {
     </SchemaComponentProvider>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/zh-CN/development/client/ui-schema-designer/insert-adjacent.md b/docs/zh-CN/development/client/ui-schema-designer/insert-adjacent.md
index f315f0c28..f538666b8 100644
--- a/docs/zh-CN/development/client/ui-schema-designer/insert-adjacent.md
+++ b/docs/zh-CN/development/client/ui-schema-designer/insert-adjacent.md
@@ -116,11 +116,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello'  });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
diff --git a/docs/zh-CN/welcome/release/v08-changelog.md b/docs/zh-CN/welcome/release/v08-changelog.md
index c32fc777d..d715df275 100644
--- a/docs/zh-CN/welcome/release/v08-changelog.md
+++ b/docs/zh-CN/welcome/release/v08-changelog.md
@@ -176,6 +176,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 ```
diff --git a/packages/core/cli/templates/plugin/src/client/index.tsx b/packages/core/cli/templates/plugin/src/client/index.tsx
index db735f78d..c04046c36 100644
--- a/packages/core/cli/templates/plugin/src/client/index.tsx
+++ b/packages/core/cli/templates/plugin/src/client/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const CommonMemo = React.memo((props) => {
   return <>{props.children}</>;
 });
+CommonMemo.displayName = 'CommonMemo';
+
+export default CommonMemo;
diff --git a/packages/core/client/intro.md b/packages/core/client/intro.md
index 2cf96c52f..106ff364d 100644
--- a/packages/core/client/intro.md
+++ b/packages/core/client/intro.md
@@ -168,11 +168,11 @@ const App: React.FC = () => {
       <Button type="primary" onClick={showDrawer}>
         Open
       </Button>
-      <Drawer 
-        title="Basic Drawer" 
-        placement="right" 
-        onClose={onClose} 
-        visible={visible} 
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        onClose={onClose}
+        visible={visible}
         footer={
           <Button onClick={onClose}>关闭</Button>
         }
@@ -262,8 +262,8 @@ export default function App() {
     });
   };
   return (
-    <SchemaComponentProvider 
-      form={form} 
+    <SchemaComponentProvider
+      form={form}
       components={{ Drawer, Button }}
     >
       <SchemaComponent schema={schema} scope={{ showDrawer, onClose }} />
@@ -374,7 +374,7 @@ const Action: any = observer((props: any) => {
       <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />
     </VisibleContext.Provider>
   );
-});
+}, { displayName: 'Action' });
 
 Action.Drawer = observer((props: any) => {
   const [visible, setVisible] = useContext(VisibleContext);
@@ -411,13 +411,13 @@ Action.Drawer = observer((props: any) => {
       )}
     </>
   );
-});
+}, { displayName: 'Action.Drawer' });
 
 Action.Drawer.Footer = observer((props: any) => {
   const field = useField();
   const schema = useFieldSchema();
   return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+}, { displayName: 'Action.Drawer.Footer' });
 
 const schema: ISchema = {
   type: 'object',
@@ -500,7 +500,7 @@ const Hello = observer(({ name }) => {
       >更新</Button>
     </div>
   )
-});
+}, { displayName: 'Hello' });
 
 const RouteSchemaComponent = (props) => {
   const route = useRoute();
@@ -678,7 +678,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -727,7 +727,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (
@@ -856,4 +856,4 @@ await respond(ctx);
 - Provider 的顺序怎么处理
 - 如何动态的加载前端模块
 
-未完待续...
\ No newline at end of file
+未完待续...
diff --git a/packages/core/client/package.json b/packages/core/client/package.json
index 313f55d0a..796e1f1b2 100644
--- a/packages/core/client/package.json
+++ b/packages/core/client/package.json
@@ -10,9 +10,9 @@
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
     "@emotion/css": "^11.7.1",
-    "@formily/antd": "2.0.20",
-    "@formily/core": "2.0.20",
-    "@formily/react": "2.0.20",
+    "@formily/antd": "2.2.24",
+    "@formily/core": "2.2.24",
+    "@formily/react": "2.2.24",
     "@nocobase/evaluators": "0.9.4-alpha.2",
     "@nocobase/sdk": "0.9.4-alpha.2",
     "@nocobase/utils": "0.9.4-alpha.2",
diff --git a/packages/core/client/src/application/Application.tsx b/packages/core/client/src/application/Application.tsx
index 79859225c..c1c8c5df8 100644
--- a/packages/core/client/src/application/Application.tsx
+++ b/packages/core/client/src/application/Application.tsx
@@ -61,6 +61,8 @@ const App = React.memo((props: any) => {
   return <C />;
 });
 
+App.displayName = 'App';
+
 export class Application {
   providers = [];
   mainComponent = null;
diff --git a/packages/core/client/src/application/demos/demo1/Hello.tsx b/packages/core/client/src/application/demos/demo1/Hello.tsx
index fe6340ecb..d035a8288 100644
--- a/packages/core/client/src/application/demos/demo1/Hello.tsx
+++ b/packages/core/client/src/application/demos/demo1/Hello.tsx
@@ -3,18 +3,21 @@ import { useDesignable } from '@nocobase/client';
 import { Button } from 'antd';
 import { observer } from '@formily/react';
 
-export const Hello: React.FC<any> = observer(({ name }) => {
-  const { patch, remove } = useDesignable();
-  return (
-    <div>
-      <h1>Hello {name}!</h1>
-      <Button
-        onClick={() => {
-          patch('x-component-props.name', Math.random());
-        }}
-      >
-        更新
-      </Button>
-    </div>
-  );
-});
+export const Hello: React.FC<any> = observer(
+  ({ name }) => {
+    const { patch, remove } = useDesignable();
+    return (
+      <div>
+        <h1>Hello {name}!</h1>
+        <Button
+          onClick={() => {
+            patch('x-component-props.name', Math.random());
+          }}
+        >
+          更新
+        </Button>
+      </div>
+    );
+  },
+  { displayName: 'Hello' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTable.tsx b/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTable.tsx
index 0ca896157..632030811 100644
--- a/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTable.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTable.tsx
@@ -31,36 +31,39 @@ const useDef = (options, props) => {
   }
 };
 
-export const CollectionFieldsTable: React.FC<TableVoidProps> = observer((props) => {
-  const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const form = useMemo(() => createForm(), []);
-  const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
-  const result = useDataSource(
-    {
-      uid: fieldSchema['x-uid'],
-      onSuccess(data) {
-        form.setValues({
-          [fieldSchema.name]: data?.data,
-        });
+export const CollectionFieldsTable: React.FC<TableVoidProps> = observer(
+  (props) => {
+    const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
+    const field = useField<Field>();
+    const fieldSchema = useFieldSchema();
+    const form = useMemo(() => createForm(), []);
+    const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
+    const result = useDataSource(
+      {
+        uid: fieldSchema['x-uid'],
+        onSuccess(data) {
+          form.setValues({
+            [fieldSchema.name]: data?.data,
+          });
+        },
       },
-    },
-    props,
-  );
-  return (
-    <AsyncDataProvider value={result}>
-      <FormContext.Provider value={form}>
-        <FieldContext.Provider value={f}>
-          <CollectionFieldsTableArray
-            {...props}
-            rowKey={rowKey}
-            loading={result?.['loading']}
-            useSelectedRowKeys={useSelectedRowKeys}
-            pagination={false}
-          />
-        </FieldContext.Provider>
-      </FormContext.Provider>
-    </AsyncDataProvider>
-  );
-});
+      props,
+    );
+    return (
+      <AsyncDataProvider value={result}>
+        <FormContext.Provider value={form}>
+          <FieldContext.Provider value={f}>
+            <CollectionFieldsTableArray
+              {...props}
+              rowKey={rowKey}
+              loading={result?.['loading']}
+              useSelectedRowKeys={useSelectedRowKeys}
+              pagination={false}
+            />
+          </FieldContext.Provider>
+        </FormContext.Provider>
+      </AsyncDataProvider>
+    );
+  },
+  { displayName: 'CollectionFieldsTable' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTableArray.tsx b/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTableArray.tsx
index 1356dd31e..6ee23382c 100644
--- a/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTableArray.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTableArray.tsx
@@ -79,149 +79,150 @@ interface CategorizeDataItem {
   data: Array<any>;
 }
 
-export const CollectionFieldsTableArray: React.FC<any> = observer((props) => {
-  const sortKeyArr: Array<CategorizeKey> = ['primaryAndForeignKey', 'relation', 'basic', 'systemInfo'];
-  const field = useField<ArrayField>();
-  const { name } = useRecord();
-  const { t } = useTranslation();
-  const compile = useCompile();
-  const { getInterface, getInheritCollections, getCollection, getCurrentCollectionFields, getInheritedFields } =
-    useCollectionManager();
-  const {
-    showIndex = true,
-    useSelectedRowKeys = useDef,
-    useDataSource = useDefDataSource,
-    onChange,
-    ...others
-  } = props;
-  const [selectedRowKeys, setSelectedRowKeys] = useSelectedRowKeys();
-  const [categorizeData, setCategorizeData] = useState<Array<CategorizeDataItem>>([]);
-  const [expandedKeys, setExpendedKeys] = useState(selectedRowKeys);
-  const inherits = getInheritCollections(name);
-  const currentFields = getCurrentCollectionFields(name);
-  useDataSource({
-    onSuccess(data) {
-      field.value = data?.data || [];
-      const tmpData: Array<CategorizeDataItem> = [];
-      const categorizeMap = new Map<CategorizeKey, any>();
-      const addCategorizeVal = (categorizeKey: CategorizeKey, val) => {
-        let fieldArr = categorizeMap.get(categorizeKey);
-        if (!fieldArr) {
-          fieldArr = [];
-        }
-        fieldArr.push(val);
-        categorizeMap.set(categorizeKey, fieldArr);
-      };
-      field.value.forEach((item) => {
-        const itemInterface = getInterface(item?.interface);
-        if (item?.primaryKey || item.isForeignKey) {
-          addCategorizeVal('primaryAndForeignKey', item);
-          return;
-        }
-        const group = itemInterface?.group as CategorizeKey;
-        switch (group) {
-          case 'systemInfo':
-          case 'relation':
-            addCategorizeVal(group, item);
-            break;
-          default:
-            addCategorizeVal('basic', item);
-        }
-      });
-      if (inherits) {
-        inherits.forEach((v) => {
-          sortKeyArr.push(v);
-          const parentCollection = getCollection(v);
-          parentCollection.fields.map((k) => {
-            if (k.interface) {
-              addCategorizeVal(v, new Proxy(k, {}));
-              field.value.push(new Proxy(k, {}));
-            }
-          });
+export const CollectionFieldsTableArray: React.FC<any> = observer(
+  (props) => {
+    const sortKeyArr: Array<CategorizeKey> = ['primaryAndForeignKey', 'relation', 'basic', 'systemInfo'];
+    const field = useField<ArrayField>();
+    const { name } = useRecord();
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const { getInterface, getInheritCollections, getCollection, getCurrentCollectionFields, getInheritedFields } =
+      useCollectionManager();
+    const {
+      showIndex = true,
+      useSelectedRowKeys = useDef,
+      useDataSource = useDefDataSource,
+      onChange,
+      ...others
+    } = props;
+    const [selectedRowKeys, setSelectedRowKeys] = useSelectedRowKeys();
+    const [categorizeData, setCategorizeData] = useState<Array<CategorizeDataItem>>([]);
+    const [expandedKeys, setExpendedKeys] = useState(selectedRowKeys);
+    const inherits = getInheritCollections(name);
+    const currentFields = getCurrentCollectionFields(name);
+    useDataSource({
+      onSuccess(data) {
+        field.value = data?.data || [];
+        const tmpData: Array<CategorizeDataItem> = [];
+        const categorizeMap = new Map<CategorizeKey, any>();
+        const addCategorizeVal = (categorizeKey: CategorizeKey, val) => {
+          let fieldArr = categorizeMap.get(categorizeKey);
+          if (!fieldArr) {
+            fieldArr = [];
+          }
+          fieldArr.push(val);
+          categorizeMap.set(categorizeKey, fieldArr);
+        };
+        field.value.forEach((item) => {
+          const itemInterface = getInterface(item?.interface);
+          if (item?.primaryKey || item.isForeignKey) {
+            addCategorizeVal('primaryAndForeignKey', item);
+            return;
+          }
+          const group = itemInterface?.group as CategorizeKey;
+          switch (group) {
+            case 'systemInfo':
+            case 'relation':
+              addCategorizeVal(group, item);
+              break;
+            default:
+              addCategorizeVal('basic', item);
+          }
         });
-      }
-      sortKeyArr.forEach((key) => {
-        if (categorizeMap.get(key)?.length > 0) {
-          const parentCollection = getCollection(key);
-          tmpData.push({
-            key,
-            name:
-              t(CategorizeKeyNameMap.get(key)) ||
-              t(`Parent collection fields`) + `(${compile(parentCollection.title)})`,
-            data: categorizeMap.get(key),
+        if (inherits) {
+          inherits.forEach((v) => {
+            sortKeyArr.push(v);
+            const parentCollection = getCollection(v);
+            parentCollection.fields.map((k) => {
+              if (k.interface) {
+                addCategorizeVal(v, new Proxy(k, {}));
+                field.value.push(new Proxy(k, {}));
+              }
+            });
           });
         }
-      });
-      setExpendedKeys(sortKeyArr);
-      setCategorizeData(tmpData);
-    },
-  });
-  const useTableColumns = () => {
-    const schema = useFieldSchema();
-    const { exists, render } = useSchemaInitializer(schema['x-initializer']);
-    const columns = schema
-      .reduceProperties((buf, s) => {
-        if (isColumnComponent(s)) {
-          return buf.concat([s]);
-        }
-      }, [])
-      .map((s: Schema) => {
-        return {
-          title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
-          dataIndex: s.name,
-          key: s.name,
-          render: (v, record) => {
-            const index = findIndex(field.value, record);
-            return (
-              <RecordIndexProvider index={index}>
-                <RecordProvider record={record}>
-                  <RecursionField schema={s} name={index} onlyRenderProperties />
-                </RecordProvider>
-              </RecordIndexProvider>
-            );
-          },
-        } as TableColumnProps<any>;
-      });
-    if (!exists) {
-      return columns;
-    }
-    return columns.concat({
-      title: render(),
-      dataIndex: 'TABLE_COLUMN_INITIALIZER',
-      key: 'TABLE_COLUMN_INITIALIZER',
+        sortKeyArr.forEach((key) => {
+          if (categorizeMap.get(key)?.length > 0) {
+            const parentCollection = getCollection(key);
+            tmpData.push({
+              key,
+              name:
+                t(CategorizeKeyNameMap.get(key)) ||
+                t(`Parent collection fields`) + `(${compile(parentCollection.title)})`,
+              data: categorizeMap.get(key),
+            });
+          }
+        });
+        setExpendedKeys(sortKeyArr);
+        setCategorizeData(tmpData);
+      },
     });
-  };
-
-  const ExpandedRowRender = (record: CategorizeDataItem, index, indent, expanded) => {
-    const columns = useTableColumns();
-    if (!props.loading) {
-      if (inherits.includes(record.key)) {
-        columns.pop();
-        columns.push({
-          title: <RecursionField name={'column4'} schema={overridingSchema as Schema} onlyRenderSelf />,
-          dataIndex: 'column4',
-          key: 'column4',
-          render: (v, record) => {
-            const index = findIndex(field.value, record);
-            return (
-              <RecordIndexProvider index={index}>
-                <RecordProvider record={record}>
-                  <SchemaComponent
-                    scope={{ currentCollection: name }}
-                    schema={overridingSchema as Schema}
-                    name={index}
-                    onlyRenderProperties
-                  />
-                </RecordProvider>
-              </RecordIndexProvider>
-            );
-          },
+    const useTableColumns = () => {
+      const schema = useFieldSchema();
+      const { exists, render } = useSchemaInitializer(schema['x-initializer']);
+      const columns = schema
+        .reduceProperties((buf, s) => {
+          if (isColumnComponent(s)) {
+            return buf.concat([s]);
+          }
+        }, [])
+        .map((s: Schema) => {
+          return {
+            title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
+            dataIndex: s.name,
+            key: s.name,
+            render: (v, record) => {
+              const index = findIndex(field.value, record);
+              return (
+                <RecordIndexProvider index={index}>
+                  <RecordProvider record={record}>
+                    <RecursionField schema={s} name={index} onlyRenderProperties />
+                  </RecordProvider>
+                </RecordIndexProvider>
+              );
+            },
+          } as TableColumnProps<any>;
         });
+      if (!exists) {
+        return columns;
       }
-      const restProps = {
-        rowSelection:
-          props.rowSelection && !inherits.includes(record.key)
-            ? {
+      return columns.concat({
+        title: render(),
+        dataIndex: 'TABLE_COLUMN_INITIALIZER',
+        key: 'TABLE_COLUMN_INITIALIZER',
+      });
+    };
+
+    const ExpandedRowRender = (record: CategorizeDataItem, index, indent, expanded) => {
+      const columns = useTableColumns();
+      if (!props.loading) {
+        if (inherits.includes(record.key)) {
+          columns.pop();
+          columns.push({
+            title: <RecursionField name={'column4'} schema={overridingSchema as Schema} onlyRenderSelf />,
+            dataIndex: 'column4',
+            key: 'column4',
+            render: (v, record) => {
+              const index = findIndex(field.value, record);
+              return (
+                <RecordIndexProvider index={index}>
+                  <RecordProvider record={record}>
+                    <SchemaComponent
+                      scope={{ currentCollection: name }}
+                      schema={overridingSchema as Schema}
+                      name={index}
+                      onlyRenderProperties
+                    />
+                  </RecordProvider>
+                </RecordIndexProvider>
+              );
+            },
+          });
+        }
+        const restProps = {
+          rowSelection:
+            props.rowSelection && !inherits.includes(record.key)
+              ? {
                 type: 'checkbox',
                 selectedRowKeys,
                 onChange(selectedRowKeys: any[]) {
@@ -229,52 +230,54 @@ export const CollectionFieldsTableArray: React.FC<any> = observer((props) => {
                 },
                 ...props.rowSelection,
               }
-            : undefined,
-      };
-      return (
-        <Table
-          {...others}
-          {...restProps}
-          components={components}
-          showHeader={true}
-          columns={columns}
-          dataSource={record.data}
-          pagination={false}
-        />
-      );
-    }
-  };
-  return (
-    <div
-      className={css`
-        .ant-table {
-          overflow-x: auto;
-          overflow-y: hidden;
-        }
-      `}
-    >
-      <Table
-        showHeader={false}
-        loading={props?.loading}
-        columns={groupColumns}
-        dataSource={categorizeData}
-        pagination={false}
-        expandable={{
-          expandedRowRender: ExpandedRowRender,
-          expandedRowKeys: expandedKeys,
-        }}
-        onExpand={(expanded, record) => {
-          let keys = [];
-          if (expanded) {
-            keys = expandedKeys.concat([record.key]);
-          } else {
-            keys = expandedKeys.filter((v) => {
-              return v !== record.key;
-            });
+              : undefined,
+        };
+        return (
+          <Table
+            {...others}
+            {...restProps}
+            components={components}
+            showHeader={true}
+            columns={columns}
+            dataSource={record.data}
+            pagination={false}
+          />
+        );
+      }
+    };
+    return (
+      <div
+        className={css`
+          .ant-table {
+            overflow-x: auto;
+            overflow-y: hidden;
           }
-          setExpendedKeys(keys);
-        }}
-      />
-    </div>
-  );
-});
+        `}
+      >
+        <Table
+          showHeader={false}
+          loading={props?.loading}
+          columns={groupColumns}
+          dataSource={categorizeData}
+          pagination={false}
+          expandable={{
+            expandedRowRender: ExpandedRowRender,
+            expandedRowKeys: expandedKeys,
+          }}
+          onExpand={(expanded, record) => {
+            let keys = [];
+            if (expanded) {
+              keys = expandedKeys.concat([record.key]);
+            } else {
+              keys = expandedKeys.filter((v) => {
+                return v !== record.key;
+              });
+            }
+            setExpendedKeys(keys);
+          }}
+        />
+      </div>
+    );
+  },
+  { displayName: 'CollectionFieldsTableArray' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/ConfigurationTabs.tsx b/packages/core/client/src/collection-manager/Configuration/ConfigurationTabs.tsx
index 945e0a212..8d8324569 100644
--- a/packages/core/client/src/collection-manager/Configuration/ConfigurationTabs.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/ConfigurationTabs.tsx
@@ -50,17 +50,20 @@ function Droppable(props) {
   );
 }
 
-const TabTitle = observer(({ item }: { item: any }) => {
-  return (
-    <Droppable id={item.id.toString()} data={item}>
-      <div>
-        <Draggable id={item.id.toString()} data={item}>
-          <TabBar item={item} />
-        </Draggable>
-      </div>
-    </Droppable>
-  );
-});
+const TabTitle = observer(
+  ({ item }: { item: any }) => {
+    return (
+      <Droppable id={item.id.toString()} data={item}>
+        <div>
+          <Draggable id={item.id.toString()} data={item}>
+            <TabBar item={item} />
+          </Draggable>
+        </div>
+      </Droppable>
+    );
+  },
+  { displayName: 'TabTitle' },
+);
 
 const TabBar = ({ item }) => {
   const compile = useCompile();
@@ -71,45 +74,48 @@ const TabBar = ({ item }) => {
     </span>
   );
 };
-const DndProvider = observer((props) => {
-  const [activeTab, setActiveId] = useState(null);
-  const { refresh } = useContext(CollectionCategroriesContext);
-  const { refresh: refreshCM } = useResourceActionContext();
-  const api = useAPIClient();
-  const onDragEnd = async (props: DragEndEvent) => {
-    const { active, over } = props;
-    setTimeout(() => {
-      setActiveId(null);
-    });
-    if (over && over.id !== active.id) {
-      await api.resource('collectionCategories').move({
-        sourceId: active.id,
-        targetId: over.id,
+const DndProvider = observer(
+  (props) => {
+    const [activeTab, setActiveId] = useState(null);
+    const { refresh } = useContext(CollectionCategroriesContext);
+    const { refresh: refreshCM } = useResourceActionContext();
+    const api = useAPIClient();
+    const onDragEnd = async (props: DragEndEvent) => {
+      const { active, over } = props;
+      setTimeout(() => {
+        setActiveId(null);
       });
-      await refresh();
-      await refreshCM();
+      if (over && over.id !== active.id) {
+        await api.resource('collectionCategories').move({
+          sourceId: active.id,
+          targetId: over.id,
+        });
+        await refresh();
+        await refreshCM();
+      }
+    };
+
+    function onDragStart(event) {
+      setActiveId(event.active?.data.current);
     }
-  };
 
-  function onDragStart(event) {
-    setActiveId(event.active?.data.current);
-  }
-
-  const mouseSensor = useSensor(MouseSensor, {
-    activationConstraint: {
-      distance: 10,
-    },
-  });
-  const sensors = useSensors(mouseSensor);
-  return (
-    <DndContext sensors={sensors} onDragEnd={onDragEnd} onDragStart={onDragStart}>
-      {props.children}
-      <DragOverlay>
-        {activeTab ? <span style={{ whiteSpace: 'nowrap' }}>{<TabBar item={activeTab} />}</span> : null}
-      </DragOverlay>
-    </DndContext>
-  );
-});
+    const mouseSensor = useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 10,
+      },
+    });
+    const sensors = useSensors(mouseSensor);
+    return (
+      <DndContext sensors={sensors} onDragEnd={onDragEnd} onDragStart={onDragStart}>
+        {props.children}
+        <DragOverlay>
+          {activeTab ? <span style={{ whiteSpace: 'nowrap' }}>{<TabBar item={activeTab} />}</span> : null}
+        </DragOverlay>
+      </DndContext>
+    );
+  },
+  { displayName: 'DndProvider' },
+);
 export const ConfigurationTabs = () => {
   const { data, refresh } = useContext(CollectionCategroriesContext);
   const { refresh: refreshCM, run, defaultRequest, setState } = useResourceActionContext();
diff --git a/packages/core/client/src/collection-manager/Configuration/components/CollectionCategory.tsx b/packages/core/client/src/collection-manager/Configuration/components/CollectionCategory.tsx
index e06c0c658..39e9d3e3f 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/CollectionCategory.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/CollectionCategory.tsx
@@ -3,14 +3,17 @@ import { Tag } from 'antd';
 import React from 'react';
 import { useCompile } from '../../../schema-component';
 
-export const CollectionCategory = observer((props: any) => {
-  const { value } = props;
-  const compile = useCompile();
-  return (
-    <>
-      {value.map((item) => {
-        return <Tag color={item.color}>{compile(item?.name)}</Tag>;
-      })}
-    </>
-  );
-});
+export const CollectionCategory = observer(
+  (props: any) => {
+    const { value } = props;
+    const compile = useCompile();
+    return (
+      <>
+        {value.map((item) => {
+          return <Tag color={item.color}>{compile(item?.name)}</Tag>;
+        })}
+      </>
+    );
+  },
+  { displayName: 'CollectionCategory' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/components/CollectionFieldInterface.tsx b/packages/core/client/src/collection-manager/Configuration/components/CollectionFieldInterface.tsx
index ec9b4e6de..6b99c0ac6 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/CollectionFieldInterface.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/CollectionFieldInterface.tsx
@@ -4,13 +4,16 @@ import React from 'react';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const CollectionFieldInterface = observer((props: any) => {
-  const { value } = props;
-  const { getInterface } = useCollectionManager();
-  const compile = useCompile();
-  const schema = getInterface(value);
+export const CollectionFieldInterface = observer(
+  (props: any) => {
+    const { value } = props;
+    const { getInterface } = useCollectionManager();
+    const compile = useCompile();
+    const schema = getInterface(value);
 
-  if (!schema) return null;
+    if (!schema) return null;
 
-  return <Tag>{compile(schema.title)}</Tag>;
-});
+    return <Tag>{compile(schema.title)}</Tag>;
+  },
+  { displayName: 'CollectionFieldInterface' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/components/CollectionTemplate.tsx b/packages/core/client/src/collection-manager/Configuration/components/CollectionTemplate.tsx
index 984c0c305..f1f210452 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/CollectionTemplate.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/CollectionTemplate.tsx
@@ -4,11 +4,14 @@ import React from 'react';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const CollectionTemplate = observer((props: any) => {
-  const { value } = props;
-  const { getTemplate } = useCollectionManager();
-  const compile = useCompile();
-  const schema = getTemplate(value);
+export const CollectionTemplate = observer(
+  (props: any) => {
+    const { value } = props;
+    const { getTemplate } = useCollectionManager();
+    const compile = useCompile();
+    const schema = getTemplate(value);
 
-  return <Tag>{compile(schema?.title || '{{t("General collection")}}')}</Tag>;
-});
+    return <Tag>{compile(schema?.title || '{{t("General collection")}}')}</Tag>;
+  },
+  { displayName: 'CollectionTemplate' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/components/FieldSummary.tsx b/packages/core/client/src/collection-manager/Configuration/components/FieldSummary.tsx
index 846e00224..c42c1362e 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/FieldSummary.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/FieldSummary.tsx
@@ -6,36 +6,39 @@ import { useTranslation } from 'react-i18next';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const FieldSummary = observer((props: any) => {
-  const { schemaKey } = props;
-  const { getInterface } = useCollectionManager();
-  const compile = useCompile();
-  const { t } = useTranslation();
-  const schema = getInterface(schemaKey);
+export const FieldSummary = observer(
+  (props: any) => {
+    const { schemaKey } = props;
+    const { getInterface } = useCollectionManager();
+    const compile = useCompile();
+    const { t } = useTranslation();
+    const schema = getInterface(schemaKey);
 
-  if (!schema) return null;
+    if (!schema) return null;
 
-  return (
-    <div
-      className={css`
-        background: #f6f6f6;
-        margin-bottom: 24px;
-        padding: 16px;
-      `}
-    >
-      <div className={css``}>
-        {t('Field interface')}: <Tag>{compile(schema.title)}</Tag>
-      </div>
-      {schema.description ? (
-        <div
-          className={css`
-            margin-top: 8px;
-            color: rgba(0, 0, 0, 0.45);
-          `}
-        >
-          {compile(schema.description)}
+    return (
+      <div
+        className={css`
+          background: #f6f6f6;
+          margin-bottom: 24px;
+          padding: 16px;
+        `}
+      >
+        <div className={css``}>
+          {t('Field interface')}: <Tag>{compile(schema.title)}</Tag>
         </div>
-      ) : null}
-    </div>
-  );
-});
+        {schema.description ? (
+          <div
+            className={css`
+              margin-top: 8px;
+              color: rgba(0, 0, 0, 0.45);
+            `}
+          >
+            {compile(schema.description)}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+  { displayName: 'FieldSummary' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/components/TemplateSummay.tsx b/packages/core/client/src/collection-manager/Configuration/components/TemplateSummay.tsx
index b6167ef67..a20e7dafb 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/TemplateSummay.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/TemplateSummay.tsx
@@ -6,36 +6,39 @@ import { useTranslation } from 'react-i18next';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const TemplateSummay = observer((props: any) => {
-  const { schemaKey } = props;
-  const { getTemplate } = useCollectionManager();
-  const compile = useCompile();
-  const { t } = useTranslation();
-  const schema = getTemplate(schemaKey);
+export const TemplateSummay = observer(
+  (props: any) => {
+    const { schemaKey } = props;
+    const { getTemplate } = useCollectionManager();
+    const compile = useCompile();
+    const { t } = useTranslation();
+    const schema = getTemplate(schemaKey);
 
-  if (!schema) return null;
+    if (!schema) return null;
 
-  return (
-    <div
-      className={css`
-        background: #f6f6f6;
-        margin-bottom: 24px;
-        padding: 16px;
-      `}
-    >
-      <div className={css``}>
-        {t('Collection template')}: <Tag>{compile(schema.title)}</Tag>
-      </div>
-      {schema.description ? (
-        <div
-          className={css`
-            margin-top: 8px;
-            color: rgba(0, 0, 0, 0.45);
-          `}
-        >
-          {compile(schema.description)}
+    return (
+      <div
+        className={css`
+          background: #f6f6f6;
+          margin-bottom: 24px;
+          padding: 16px;
+        `}
+      >
+        <div className={css``}>
+          {t('Collection template')}: <Tag>{compile(schema.title)}</Tag>
         </div>
-      ) : null}
-    </div>
-  );
-});
+        {schema.description ? (
+          <div
+            className={css`
+              margin-top: 8px;
+              color: rgba(0, 0, 0, 0.45);
+            `}
+          >
+            {compile(schema.description)}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+  { displayName: 'TemplateSummay' },
+);
diff --git a/packages/core/client/src/collection-manager/Configuration/components/index.tsx b/packages/core/client/src/collection-manager/Configuration/components/index.tsx
index d1626b1b9..65a03623f 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/index.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/index.tsx
@@ -6,109 +6,127 @@ import { useRecord } from '../../../record-provider';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const SourceForeignKey = observer(() => {
-  const record = useRecord();
-  const { getCollection } = useCollectionManager();
-  const collection = record?.collectionName ? getCollection(record.collectionName) : record;
-  const field = useField<Field>();
-  const form = useForm();
-  const { getCollectionFields } = useCollectionManager();
-  return (
-    <div>
-      <Select
-        allowClear
-        placeholder={'留空时，自动生成 FK 字段'}
-        disabled={field.disabled}
-        value={field.value}
-        options={getCollectionFields(collection.name)
-          .filter((field) => field.type)
-          .map((field) => {
-            return {
-              label: field?.uiSchema?.title || field.name,
-              value: field.name,
-            };
-          })}
-      />
-    </div>
-  );
-});
+export const SourceForeignKey = observer(
+  () => {
+    const record = useRecord();
+    const { getCollection } = useCollectionManager();
+    const collection = record?.collectionName ? getCollection(record.collectionName) : record;
+    const field = useField<Field>();
+    const form = useForm();
+    const { getCollectionFields } = useCollectionManager();
+    return (
+      <div>
+        <Select
+          allowClear
+          placeholder={'留空时，自动生成 FK 字段'}
+          disabled={field.disabled}
+          value={field.value}
+          options={getCollectionFields(collection.name)
+            .filter((field) => field.type)
+            .map((field) => {
+              return {
+                label: field?.uiSchema?.title || field.name,
+                value: field.name,
+              };
+            })}
+        />
+      </div>
+    );
+  },
+  { displayName: 'SourceForeignKey' },
+);
 
-export const ThroughForeignKey = observer(() => {
-  const field = useField<Field>();
-  const form = useForm();
-  const { getCollectionFields } = useCollectionManager();
-  return (
-    <div>
-      <Select
-        allowClear
-        placeholder={'留空时，自动生成 FK 字段'}
-        disabled={field.disabled}
-        value={field.value}
-        options={getCollectionFields(form.values.through)
-          .filter((field) => field.type)
-          .map((field) => {
-            return {
-              label: field?.uiSchema?.title || field.name,
-              value: field.name,
-            };
-          })}
-      />
-    </div>
-  );
-});
+export const ThroughForeignKey = observer(
+  () => {
+    const field = useField<Field>();
+    const form = useForm();
+    const { getCollectionFields } = useCollectionManager();
+    return (
+      <div>
+        <Select
+          allowClear
+          placeholder={'留空时，自动生成 FK 字段'}
+          disabled={field.disabled}
+          value={field.value}
+          options={getCollectionFields(form.values.through)
+            .filter((field) => field.type)
+            .map((field) => {
+              return {
+                label: field?.uiSchema?.title || field.name,
+                value: field.name,
+              };
+            })}
+        />
+      </div>
+    );
+  },
+  { displayName: 'ThroughForeignKey' },
+);
 
-export const TargetForeignKey = observer(() => {
-  const field = useField<Field>();
-  const form = useForm();
-  const { getCollectionFields } = useCollectionManager();
-  return (
-    <div>
-      <Select
-        allowClear
-        placeholder={'留空时，自动生成 FK 字段'}
-        disabled={field.disabled}
-        value={field.value}
-        options={getCollectionFields(form.values.target)
-          .filter((field) => field.type)
-          .map((field) => {
-            return {
-              label: field?.uiSchema?.title || field.name,
-              value: field.name,
-            };
-          })}
-      />
-    </div>
-  );
-});
+export const TargetForeignKey = observer(
+  () => {
+    const field = useField<Field>();
+    const form = useForm();
+    const { getCollectionFields } = useCollectionManager();
+    return (
+      <div>
+        <Select
+          allowClear
+          placeholder={'留空时，自动生成 FK 字段'}
+          disabled={field.disabled}
+          value={field.value}
+          options={getCollectionFields(form.values.target)
+            .filter((field) => field.type)
+            .map((field) => {
+              return {
+                label: field?.uiSchema?.title || field.name,
+                value: field.name,
+              };
+            })}
+        />
+      </div>
+    );
+  },
+  { displayName: 'TargetForeignKey' },
+);
 
-export const SourceCollection = observer(() => {
-  const record = useRecord();
-  const { getCollection } = useCollectionManager();
-  const collection = record?.collectionName ? getCollection(record.collectionName) : record;
-  const compile = useCompile();
-  return (
-    <div>
-      <Select
-        disabled
-        value={collection.name}
-        options={[{ value: collection.name, label: compile(collection.title) }]}
-      />
-    </div>
-  );
-});
+export const SourceCollection = observer(
+  () => {
+    const record = useRecord();
+    const { getCollection } = useCollectionManager();
+    const collection = record?.collectionName ? getCollection(record.collectionName) : record;
+    const compile = useCompile();
+    return (
+      <div>
+        <Select
+          disabled
+          value={collection.name}
+          options={[{ value: collection.name, label: compile(collection.title) }]}
+        />
+      </div>
+    );
+  },
+  { displayName: 'SourceCollection' },
+);
 
-export const SourceKey = observer(() => {
-  return (
-    <div>
-      <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
-    </div>
-  );
-});
+export const SourceKey = observer(
+  () => {
+    return (
+      <div>
+        <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
+      </div>
+    );
+  },
+  { displayName: 'SourceKey' },
+);
 
-export const TargetKey = observer(() => {
-  return (
-    <div>
-      <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
-    </div>
-  );
-});
+export const TargetKey = observer(
+  () => {
+    return (
+      <div>
+        <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
+      </div>
+    );
+  },
+  { displayName: 'TargetKey' },
+);
diff --git a/packages/core/client/src/collection-manager/sub-table.tsx b/packages/core/client/src/collection-manager/sub-table.tsx
index f69ed28c4..43aa7f146 100644
--- a/packages/core/client/src/collection-manager/sub-table.tsx
+++ b/packages/core/client/src/collection-manager/sub-table.tsx
@@ -166,107 +166,113 @@ export const ds = {
   useDestroyAction,
 };
 
-export const SubFieldDataSourceProvider = observer((props) => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [dataSource, setDataSource] = useState([]);
-  const record = useRecord();
-  const api = useAPIClient();
-  const service = useRequest(
-    () => {
-      if (record.interface === 'subTable') {
-        if (record?.children?.length) {
-          return Promise.resolve({
-            data: record?.children || [],
-          });
+export const SubFieldDataSourceProvider = observer(
+  (props) => {
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [dataSource, setDataSource] = useState([]);
+    const record = useRecord();
+    const api = useAPIClient();
+    const service = useRequest(
+      () => {
+        if (record.interface === 'subTable') {
+          if (record?.children?.length) {
+            return Promise.resolve({
+              data: record?.children || [],
+            });
+          }
+          return api
+            .resource('fields')
+            .list({
+              paginate: false,
+              // appends: ['uiSchema'],
+              sort: 'sort',
+              filter: {
+                parentKey: record.key,
+              },
+            })
+            .then((res) => res?.data);
         }
-        return api
-          .resource('fields')
-          .list({
-            paginate: false,
-            // appends: ['uiSchema'],
-            sort: 'sort',
-            filter: {
-              parentKey: record.key,
-            },
-          })
-          .then((res) => res?.data);
-      }
-      return Promise.resolve({
-        data: [],
-      });
-    },
-    {
-      onSuccess(data) {
-        console.log('dataSource1', data?.data);
-        setDataSource(data?.data);
+        return Promise.resolve({
+          data: [],
+        });
       },
-    },
-  );
-  return (
-    <CollectionProvider collection={collection}>
-      <DataSourceContext.Provider
-        value={{
-          rowKey: 'name',
-          service,
-          dataSource,
-          setDataSource,
-          selectedRowKeys,
-          setSelectedRowKeys,
-        }}
-      >
-        {props.children}
-      </DataSourceContext.Provider>
-    </CollectionProvider>
-  );
-});
+      {
+        onSuccess(data) {
+          console.log('dataSource1', data?.data);
+          setDataSource(data?.data);
+        },
+      },
+    );
+    return (
+      <CollectionProvider collection={collection}>
+        <DataSourceContext.Provider
+          value={{
+            rowKey: 'name',
+            service,
+            dataSource,
+            setDataSource,
+            selectedRowKeys,
+            setSelectedRowKeys,
+          }}
+        >
+          {props.children}
+        </DataSourceContext.Provider>
+      </CollectionProvider>
+    );
+  },
+  { displayName: 'SubFieldDataSourceProvider' },
+);
 
-export const DataSourceProvider = observer((props: any) => {
-  const { rowKey, collection, association } = props;
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [dataSource, setDataSource] = useState([]);
-  const record = useRecord();
-  const api = useAPIClient();
-  const { getCollection } = useCollectionManager();
-  const coll = getCollection(collection);
-  const resourceOf = record?.[association.targetKey || 'id'];
-  const service = useRequest(
-    () => {
-      if (resourceOf) {
-        return api
-          .request({
-            resource: `${association.collectionName}.${association.name}`,
-            resourceOf,
-            action: 'list',
-            params: {
-              appends: coll?.fields?.filter((field) => field.target)?.map((field) => field.name),
-            },
-          })
-          .then((res) => res.data);
-      }
-      return Promise.resolve({
-        data: record?.[association.name] || [],
-      });
-    },
-    {
-      onSuccess(data) {
-        setDataSource(data?.data);
+export const DataSourceProvider = observer(
+  (props: any) => {
+    const { rowKey, collection, association } = props;
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [dataSource, setDataSource] = useState([]);
+    const record = useRecord();
+    const api = useAPIClient();
+    const { getCollection } = useCollectionManager();
+    const coll = getCollection(collection);
+    const resourceOf = record?.[association.targetKey || 'id'];
+    const service = useRequest(
+      () => {
+        if (resourceOf) {
+          return api
+            .request({
+              resource: `${association.collectionName}.${association.name}`,
+              resourceOf,
+              action: 'list',
+              params: {
+                appends: coll?.fields?.filter((field) => field.target)?.map((field) => field.name),
+              },
+            })
+            .then((res) => res.data);
+        }
+        return Promise.resolve({
+          data: record?.[association.name] || [],
+        });
       },
-    },
-  );
-  return (
-    <CollectionProvider collection={coll}>
-      <DataSourceContext.Provider
-        value={{
-          rowKey,
-          service,
-          dataSource,
-          setDataSource,
-          selectedRowKeys,
-          setSelectedRowKeys,
-        }}
-      >
-        {props.children}
-      </DataSourceContext.Provider>
-    </CollectionProvider>
-  );
-});
+      {
+        onSuccess(data) {
+          setDataSource(data?.data);
+        },
+      },
+    );
+    return (
+      <CollectionProvider collection={coll}>
+        <DataSourceContext.Provider
+          value={{
+            rowKey,
+            service,
+            dataSource,
+            setDataSource,
+            selectedRowKeys,
+            setSelectedRowKeys,
+          }}
+        >
+          {props.children}
+        </DataSourceContext.Provider>
+      </CollectionProvider>
+    );
+  },
+  { displayName: 'DataSourceProvider' },
+);
diff --git a/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx b/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx
index b34ae66a4..1dd317068 100644
--- a/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx
+++ b/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx
@@ -217,3 +217,4 @@ function areEqual(prevProps, nextProps) {
 }
 
 export const PreviewFields = React.memo(PreviewCom, areEqual);
+PreviewFields.displayName = 'PreviewFields';
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Container.tsx b/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
index ef09c4c9f..3671855c9 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
@@ -6,21 +6,27 @@ import { ActionModal } from './Action.Modal';
 import { ActionPage } from './Action.Page';
 import { ComposedActionDrawer } from './types';
 
-export const ActionContainer: ComposedActionDrawer = observer((props: any) => {
-  const { openMode } = useActionContext();
-  if (openMode === 'drawer') {
-    return <ActionDrawer footerNodeName={'Action.Container.Footer'} {...props} />;
-  }
-  if (openMode === 'modal') {
-    return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
-  }
-  return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
-});
+export const ActionContainer: ComposedActionDrawer = observer(
+  (props: any) => {
+    const { openMode } = useActionContext();
+    if (openMode === 'drawer') {
+      return <ActionDrawer footerNodeName={'Action.Container.Footer'} {...props} />;
+    }
+    if (openMode === 'modal') {
+      return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
+    }
+    return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
+  },
+  { displayName: 'ActionContainer' },
+);
 
-ActionContainer.Footer = observer(() => {
-  const field = useField();
-  const schema = useFieldSchema();
-  return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+ActionContainer.Footer = observer(
+  () => {
+    const field = useField();
+    const schema = useFieldSchema();
+    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
+  },
+  { displayName: 'ActionContainer.Footer' },
+);
 
 export default ActionContainer;
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
index 2219e5847..6dc6be401 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
@@ -14,111 +14,117 @@ const openSizeWidthMap = new Map<OpenSize, string>([
   ['middle', '50%'],
   ['large', '70%'],
 ]);
-export const ActionDrawer: ComposedActionDrawer = observer((props) => {
-  const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
-  const { t } = useTranslation();
-  const { visible, setVisible, openSize = 'middle' } = useActionContext();
-  const schema = useFieldSchema();
-  const field = useField();
-  const openSizeFromParent = schema.parent?.['x-component-props']?.['openSize'];
-  const finalOpenSize = openSizeFromParent || openSize;
-  const footerSchema = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === footerNodeName) {
-      return s;
-    }
-    return buf;
-  });
-  return (
-    <>
-      {createPortal(
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          <Drawer
-            width={openSizeWidthMap.get(finalOpenSize)}
-            title={field.title}
-            {...others}
-            destroyOnClose
-            open={visible}
-            onClose={() => setVisible(false, true)}
-            className={classNames(
-              others.className,
-              css`
-                &.nb-action-popup {
-                  .ant-drawer-header {
-                    display: none;
-                  }
-
-                  .ant-drawer-body {
-                    padding-top: 14px;
-                  }
-
-                  .ant-drawer-content {
-                    background: #f0f2f5;
-                  }
-                }
-
-                &.nb-record-picker-selector {
-                  .nb-block-item {
-                    margin-bottom: 24px;
-
-                    .general-schema-designer {
-                      top: -8px;
-                      bottom: -8px;
-                      left: -8px;
-                      right: -8px;
-                    }
-                  }
-                }
-              `,
-            )}
-            footer={
-              footerSchema && (
-                <div
-                  className={css`
-                    display: flex;
-                    justify-content: flex-end;
-                    width: 100%;
-
-                    .ant-btn {
-                      margin-right: 8px;
-                    }
-                  `}
-                >
-                  <RecursionField
-                    basePath={field.address}
-                    schema={schema}
-                    onlyRenderProperties
-                    filterProperties={(s) => {
-                      return s['x-component'] === footerNodeName;
-                    }}
-                  />
-                </div>
-              )
-            }
+export const ActionDrawer: ComposedActionDrawer = observer(
+  (props) => {
+    const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
+    const { t } = useTranslation();
+    const { visible, setVisible, openSize = 'middle' } = useActionContext();
+    const schema = useFieldSchema();
+    const field = useField();
+    const openSizeFromParent = schema.parent?.['x-component-props']?.['openSize'];
+    const finalOpenSize = openSizeFromParent || openSize;
+    const footerSchema = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === footerNodeName) {
+        return s;
+      }
+      return buf;
+    });
+    return (
+      <>
+        {createPortal(
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
           >
-            <RecursionField
-              basePath={field.address}
-              schema={schema}
-              onlyRenderProperties
-              filterProperties={(s) => {
-                return s['x-component'] !== footerNodeName;
-              }}
-            />
-          </Drawer>
-        </div>,
-        document.body,
-      )}
-    </>
-  );
-});
+            <Drawer
+              width={openSizeWidthMap.get(finalOpenSize)}
+              title={field.title}
+              {...others}
+              destroyOnClose
+              open={visible}
+              onClose={() => setVisible(false, true)}
+              className={classNames(
+                others.className,
+                css`
+                  &.nb-action-popup {
+                    .ant-drawer-header {
+                      display: none;
+                    }
 
-ActionDrawer.Footer = observer(() => {
-  const field = useField();
-  const schema = useFieldSchema();
-  return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+                    .ant-drawer-body {
+                      padding-top: 14px;
+                    }
+
+                    .ant-drawer-content {
+                      background: #f0f2f5;
+                    }
+                  }
+
+                  &.nb-record-picker-selector {
+                    .nb-block-item {
+                      margin-bottom: 24px;
+
+                      .general-schema-designer {
+                        top: -8px;
+                        bottom: -8px;
+                        left: -8px;
+                        right: -8px;
+                      }
+                    }
+                  }
+                `,
+              )}
+              footer={
+                footerSchema && (
+                  <div
+                    className={css`
+                      display: flex;
+                      justify-content: flex-end;
+                      width: 100%;
+
+                      .ant-btn {
+                        margin-right: 8px;
+                      }
+                    `}
+                  >
+                    <RecursionField
+                      basePath={field.address}
+                      schema={schema}
+                      onlyRenderProperties
+                      filterProperties={(s) => {
+                        return s['x-component'] === footerNodeName;
+                      }}
+                    />
+                  </div>
+                )
+              }
+            >
+              <RecursionField
+                basePath={field.address}
+                schema={schema}
+                onlyRenderProperties
+                filterProperties={(s) => {
+                  return s['x-component'] !== footerNodeName;
+                }}
+              />
+            </Drawer>
+          </div>,
+          document.body,
+        )}
+      </>
+    );
+  },
+  { displayName: 'ActionDrawer' },
+);
+
+ActionDrawer.Footer = observer(
+  () => {
+    const field = useField();
+    const schema = useFieldSchema();
+    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
+  },
+  { displayName: 'ActionDrawer.Footer' },
+);
 
 export default ActionDrawer;
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Link.tsx b/packages/core/client/src/schema-component/antd/action/Action.Link.tsx
index bdd7f0609..0e9db75e3 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Link.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Link.tsx
@@ -3,6 +3,9 @@ import React from 'react';
 import Action from './Action';
 import { ComposedAction } from './types';
 
-export const ActionLink: ComposedAction = observer((props: any) => {
-  return <Action {...props} component={'a'} className={'nb-action-link'} />;
-});
+export const ActionLink: ComposedAction = observer(
+  (props: any) => {
+    return <Action {...props} component={'a'} className={'nb-action-link'} />;
+  },
+  { displayName: 'ActionLink' },
+);
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
index 4ba67ad3c..d54774f90 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
@@ -12,104 +12,110 @@ const openSizeWidthMap = new Map<OpenSize, string>([
   ['middle', '60%'],
   ['large', '80%'],
 ]);
-export const ActionModal: ComposedActionDrawer<ModalProps> = observer((props) => {
-  const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
-  const { visible, setVisible, openSize = 'large' } = useActionContext();
-  const actualWidth = width ?? openSizeWidthMap.get(openSize);
-  const schema = useFieldSchema();
-  const field = useField();
-  const footerSchema = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === footerNodeName) {
-      return s;
-    }
-    return buf;
-  });
-  return (
-    <>
-      {createPortal(
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          <Modal
-            width={actualWidth}
-            title={field.title}
-            {...(others as ModalProps)}
-            destroyOnClose
-            visible={visible}
-            onCancel={() => setVisible(false, true)}
-            className={classNames(
-              others.className,
-              css`
-                &.nb-action-popup {
-                  .ant-modal-header {
-                    display: none;
-                  }
-
-                  .ant-modal-body {
-                    padding-top: 16px;
-                  }
-
-                  .ant-modal-body {
-                    background: #f0f2f5;
-                  }
-
-                  .ant-modal-close-x {
-                    width: 32px;
-                    height: 32px;
-                    line-height: 32px;
-                  }
-                }
-              `,
-            )}
-            footer={
-              footerSchema ? (
-                <div
-                  className={css`
-                    display: flex;
-                    justify-content: flex-end;
-                    width: 100%;
-
-                    .ant-btn {
-                      margin-right: 8px;
-                    }
-                  `}
-                >
-                  <RecursionField
-                    basePath={field.address}
-                    schema={schema}
-                    onlyRenderProperties
-                    filterProperties={(s) => {
-                      return s['x-component'] === footerNodeName;
-                    }}
-                  />
-                </div>
-              ) : (
-                false
-              )
-            }
+export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
+  (props) => {
+    const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
+    const { visible, setVisible, openSize = 'large' } = useActionContext();
+    const actualWidth = width ?? openSizeWidthMap.get(openSize);
+    const schema = useFieldSchema();
+    const field = useField();
+    const footerSchema = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === footerNodeName) {
+        return s;
+      }
+      return buf;
+    });
+    return (
+      <>
+        {createPortal(
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
           >
-            <RecursionField
-              basePath={field.address}
-              schema={schema}
-              onlyRenderProperties
-              filterProperties={(s) => {
-                return s['x-component'] !== footerNodeName;
-              }}
-            />
-          </Modal>
-        </div>,
-        document.body,
-      )}
-    </>
-  );
-});
+            <Modal
+              width={actualWidth}
+              title={field.title}
+              {...(others as ModalProps)}
+              destroyOnClose
+              visible={visible}
+              onCancel={() => setVisible(false, true)}
+              className={classNames(
+                others.className,
+                css`
+                  &.nb-action-popup {
+                    .ant-modal-header {
+                      display: none;
+                    }
 
-ActionModal.Footer = observer(() => {
-  const field = useField();
-  const schema = useFieldSchema();
-  return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+                    .ant-modal-body {
+                      padding-top: 16px;
+                    }
+
+                    .ant-modal-body {
+                      background: #f0f2f5;
+                    }
+
+                    .ant-modal-close-x {
+                      width: 32px;
+                      height: 32px;
+                      line-height: 32px;
+                    }
+                  }
+                `,
+              )}
+              footer={
+                footerSchema ? (
+                  <div
+                    className={css`
+                      display: flex;
+                      justify-content: flex-end;
+                      width: 100%;
+
+                      .ant-btn {
+                        margin-right: 8px;
+                      }
+                    `}
+                  >
+                    <RecursionField
+                      basePath={field.address}
+                      schema={schema}
+                      onlyRenderProperties
+                      filterProperties={(s) => {
+                        return s['x-component'] === footerNodeName;
+                      }}
+                    />
+                  </div>
+                ) : (
+                  false
+                )
+              }
+            >
+              <RecursionField
+                basePath={field.address}
+                schema={schema}
+                onlyRenderProperties
+                filterProperties={(s) => {
+                  return s['x-component'] !== footerNodeName;
+                }}
+              />
+            </Modal>
+          </div>,
+          document.body,
+        )}
+      </>
+    );
+  },
+  { displayName: 'ActionModal' },
+);
+
+ActionModal.Footer = observer(
+  () => {
+    const field = useField();
+    const schema = useFieldSchema();
+    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
+  },
+  { displayName: 'ActionModal.Footer' },
+);
 
 export default ActionModal;
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Page.tsx b/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
index c4c3182c1..207f24d34 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
@@ -10,65 +10,71 @@ const useScope = (key: string) => {
   return scope[key];
 };
 
-export const ActionPage: ComposedActionDrawer = observer((props: any) => {
-  const { footerNodeName = 'Action.Page.Footer', ...others } = props;
-  const { containerRefKey, visible, setVisible } = useActionContext();
-  const containerRef = useScope(containerRefKey);
-  const schema = useFieldSchema();
-  const field = useField();
-  const footerSchema = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === footerNodeName) {
-      return s;
-    }
-    return buf;
-  });
-  return (
-    <>
-      {containerRef?.current &&
-        visible &&
-        createPortal(
-          <div>
-            <RecursionField
-              basePath={field.address}
-              schema={schema}
-              onlyRenderProperties
-              filterProperties={(s) => {
-                return s['x-component'] !== footerNodeName;
-              }}
-            />
-            {footerSchema && (
-              <div
-                className={css`
-                  display: flex;
-                  /* justify-content: flex-end; */
-                  /* flex-direction: row-reverse; */
-                  width: 100%;
-                  .ant-btn {
-                    margin-right: 8px;
-                  }
-                `}
-              >
-                <RecursionField
-                  basePath={field.address}
-                  schema={schema}
-                  onlyRenderProperties
-                  filterProperties={(s) => {
-                    return s['x-component'] === footerNodeName;
-                  }}
-                />
-              </div>
-            )}
-          </div>,
-          containerRef?.current,
-        )}
-    </>
-  );
-});
+export const ActionPage: ComposedActionDrawer = observer(
+  (props: any) => {
+    const { footerNodeName = 'Action.Page.Footer', ...others } = props;
+    const { containerRefKey, visible, setVisible } = useActionContext();
+    const containerRef = useScope(containerRefKey);
+    const schema = useFieldSchema();
+    const field = useField();
+    const footerSchema = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === footerNodeName) {
+        return s;
+      }
+      return buf;
+    });
+    return (
+      <>
+        {containerRef?.current &&
+          visible &&
+          createPortal(
+            <div>
+              <RecursionField
+                basePath={field.address}
+                schema={schema}
+                onlyRenderProperties
+                filterProperties={(s) => {
+                  return s['x-component'] !== footerNodeName;
+                }}
+              />
+              {footerSchema && (
+                <div
+                  className={css`
+                    display: flex;
+                    /* justify-content: flex-end; */
+                    /* flex-direction: row-reverse; */
+                    width: 100%;
+                    .ant-btn {
+                      margin-right: 8px;
+                    }
+                  `}
+                >
+                  <RecursionField
+                    basePath={field.address}
+                    schema={schema}
+                    onlyRenderProperties
+                    filterProperties={(s) => {
+                      return s['x-component'] === footerNodeName;
+                    }}
+                  />
+                </div>
+              )}
+            </div>,
+            containerRef?.current,
+          )}
+      </>
+    );
+  },
+  { displayName: 'ActionPage' },
+);
 
-ActionPage.Footer = observer(() => {
-  const field = useField();
-  const schema = useFieldSchema();
-  return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+ActionPage.Footer = observer(
+  () => {
+    const field = useField();
+    const schema = useFieldSchema();
+    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
+  },
+  { displayName: 'ActionPage.Footer' },
+);
 
 export default ActionPage;
diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx
index 0b4fee8a4..504f21ccd 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
 import { Button, Modal, Popover } from 'antd';
 import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useActionContext } from '../..';
 import { useDesignable } from '../../';
 import { Icon } from '../../../icon';
@@ -64,139 +64,158 @@ export const actionDesignerCss = css`
   }
 `;
 
-export const Action: ComposedAction = observer((props: any) => {
-  const {
-    popover,
-    confirm,
-    openMode: om,
-    containerRefKey,
-    component,
-    useAction = useA,
-    className,
-    icon,
-    title,
-    ...others
-  } = props;
-  const { onClick } = useProps(props);
-  const [visible, setVisible] = useState(false);
-  const [formValueChanged, setFormValueChanged] = useState(false);
-  const Designer = useDesigner();
-  const field = useField<any>();
-  const { run } = useAction();
-  const fieldSchema = useFieldSchema();
-  const compile = useCompile();
-  const form = useForm();
-  const values = useRecord();
-  const designerProps = fieldSchema['x-designer-props'];
-  const openMode = fieldSchema?.['x-component-props']?.['openMode'];
-  const disabled = form.disabled || field.disabled || props.disabled;
-  const openSize = fieldSchema?.['x-component-props']?.['openSize'];
-  const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
-  const { designable } = useDesignable();
-  const tarComponent = useComponent(component) || component;
-  useEffect(() => {
-    field.linkageProperty = {};
-    linkageRules
-      .filter((k) => !k.disabled)
-      .forEach((v) => {
-        return v.actions?.map((h) => {
-          linkageAction(h.operator, field, v.condition, values);
-        });
-      });
-  }, [linkageRules, values, designable]);
-
-  const renderButton = () => {
-    if (!designable && field?.data?.hidden) {
+export const Action: ComposedAction = observer(
+  (props: any) => {
+    const {
+      popover,
+      confirm,
+      openMode: om,
+      containerRefKey,
+      component,
+      useAction = useA,
+      className,
+      icon,
+      title,
+      ...others
+    } = props;
+    const { onClick } = useProps(props);
+    const [visible, setVisible] = useState(false);
+    const [formValueChanged, setFormValueChanged] = useState(false);
+    const Designer = useDesigner();
+    const field = useField<any>();
+    const { run } = useAction();
+    const fieldSchema = useFieldSchema();
+    const compile = useCompile();
+    const form = useForm();
+    const values = useRecord();
+    const designerProps = fieldSchema['x-designer-props'];
+    const openMode = fieldSchema?.['x-component-props']?.['openMode'];
+    const disabled = form.disabled || field.disabled || props.disabled;
+    const openSize = fieldSchema?.['x-component-props']?.['openSize'];
+    const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
+    const { designable } = useDesignable();
+    const tarComponent = useComponent(component) || component;
+    const renderTitle = useMemo(() => {
+      if (title) {
+        return title;
+      }
+      if (fieldSchema.title) {
+        return compile(fieldSchema.title);
+      }
       return null;
-    }
-    return (
-      <SortableItem
-        {...others}
-        loading={field?.data?.loading}
-        icon={<Icon type={icon} />}
-        disabled={disabled}
-        style={{
-          opacity: designable && field?.data?.hidden && 0.1,
-        }}
-        onClick={(e: React.MouseEvent) => {
-          if (!disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            const onOk = () => {
-              onClick?.(e);
-              setVisible(true);
-              run();
-            };
-            if (confirm) {
-              Modal.confirm({
-                ...confirm,
-                onOk,
-              });
-            } else {
-              onOk();
+    }, [compile, fieldSchema.title, title]);
+
+    useEffect(() => {
+      field.linkageProperty = {};
+      linkageRules
+        .filter((k) => !k.disabled)
+        .forEach((v) => {
+          return v.actions?.map((h) => {
+            linkageAction(h.operator, field, v.condition, values);
+          });
+        });
+    }, [linkageRules, values, designable]);
+
+    const renderButton = () => {
+      if (!designable && field?.data?.hidden) {
+        return null;
+      }
+      return (
+        <SortableItem
+          {...others}
+          loading={field?.data?.loading}
+          icon={<Icon type={icon} />}
+          disabled={disabled}
+          style={{
+            opacity: designable && field?.data?.hidden && 0.1,
+          }}
+          onClick={(e: React.MouseEvent) => {
+            if (!disabled) {
+              e.preventDefault();
+              e.stopPropagation();
+              const onOk = () => {
+                onClick?.(e);
+                setVisible(true);
+                run();
+              };
+              if (confirm) {
+                Modal.confirm({
+                  ...confirm,
+                  onOk,
+                });
+              } else {
+                onOk();
+              }
             }
-          }
+          }}
+          component={tarComponent || Button}
+          className={classnames(className, actionDesignerCss)}
+        >
+          {renderTitle}
+          <Designer {...designerProps} />
+        </SortableItem>
+      );
+    };
+
+    return (
+      <ActionContext.Provider
+        value={{
+          button: renderButton(),
+          visible,
+          setVisible,
+          formValueChanged,
+          setFormValueChanged,
+          openMode,
+          openSize,
+          containerRefKey,
+          fieldSchema,
         }}
-        component={tarComponent || Button}
-        className={classnames(className, actionDesignerCss)}
       >
-        {title || compile(fieldSchema.title)}
-        <Designer {...designerProps} />
-      </SortableItem>
+        {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
+        {!popover && renderButton()}
+        {!popover && props.children}
+      </ActionContext.Provider>
     );
-  };
+  },
+  { displayName: 'Action' },
+);
 
-  return (
-    <ActionContext.Provider
-      value={{
-        button: renderButton(),
-        visible,
-        setVisible,
-        formValueChanged,
-        setFormValueChanged,
-        openMode,
-        openSize,
-        containerRefKey,
-        fieldSchema,
-      }}
-    >
-      {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
-      {!popover && renderButton()}
-      {!popover && props.children}
-    </ActionContext.Provider>
-  );
-});
+Action.Popover = observer(
+  (props) => {
+    const { button, visible, setVisible } = useActionContext();
+    return (
+      <Popover
+        {...props}
+        destroyTooltipOnHide
+        open={visible}
+        onOpenChange={(visible) => {
+          setVisible(visible);
+        }}
+        content={props.children}
+      >
+        {button}
+      </Popover>
+    );
+  },
+  { displayName: 'Action.Popover' },
+);
 
-Action.Popover = observer((props) => {
-  const { button, visible, setVisible } = useActionContext();
-  return (
-    <Popover
-      {...props}
-      destroyTooltipOnHide
-      open={visible}
-      onOpenChange={(visible) => {
-        setVisible(visible);
-      }}
-      content={props.children}
-    >
-      {button}
-    </Popover>
-  );
-});
-
-Action.Popover.Footer = observer((props) => {
-  return (
-    <div
-      className={css`
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-      `}
-    >
-      {props.children}
-    </div>
-  );
-});
+Action.Popover.Footer = observer(
+  (props) => {
+    return (
+      <div
+        className={css`
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+        `}
+      >
+        {props.children}
+      </div>
+    );
+  },
+  { displayName: 'Action.Popover.Footer' },
+);
 
 Action.Link = ActionLink;
 Action.Designer = ActionDesigner;
diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
index 16dd8cd6b..39c6cf12c 100644
--- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
+++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
@@ -6,40 +6,41 @@ import { useSchemaInitializer } from '../../../schema-initializer';
 import { DndContext } from '../../common';
 import { useDesignable, useProps } from '../../hooks';
 
-export const ActionBar = observer((props: any) => {
-  const { layout = 'tow-columns', style, spaceProps, ...others } = useProps(props);
-  const fieldSchema = useFieldSchema();
-  const { InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
-  const { designable } = useDesignable();
-  if (layout === 'one-column') {
+export const ActionBar = observer(
+  (props: any) => {
+    const { layout = 'tow-columns', style, spaceProps, ...others } = useProps(props);
+    const fieldSchema = useFieldSchema();
+    const { InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
+    const { designable } = useDesignable();
+    if (layout === 'one-column') {
+      return (
+        <DndContext>
+          <div
+            style={{ display: 'flex', alignItems: 'center', ...style }}
+            {...others}
+            className={cx(others.className, 'nb-action-bar')}
+          >
+            {props.children && (
+              <div style={{ marginRight: 8 }}>
+                <Space {...spaceProps}>
+                  {fieldSchema.mapProperties((schema, key) => {
+                    return <RecursionField key={key} name={key} schema={schema} />;
+                  })}
+                </Space>
+              </div>
+            )}
+            <InitializerComponent />
+          </div>
+        </DndContext>
+      );
+    }
+    const hasActions = Object.keys(fieldSchema.properties ?? {}).length > 0;
     return (
-      <DndContext>
-        <div
-          style={{ display: 'flex', alignItems: 'center', ...style }}
-          {...others}
-          className={cx(others.className, 'nb-action-bar')}
-        >
-          {props.children && (
-            <div style={{ marginRight: 8 }}>
-              <Space {...spaceProps}>
-                {fieldSchema.mapProperties((schema, key) => {
-                  return <RecursionField key={key} name={key} schema={schema} />;
-                })}
-              </Space>
-            </div>
-          )}
-          <InitializerComponent />
-        </div>
-      </DndContext>
-    );
-  }
-  const hasActions = Object.keys(fieldSchema.properties ?? {}).length > 0;
-  return (
-    <div
-      style={
-        !designable && !hasActions
-          ? undefined
-          : {
+      <div
+        style={
+          !designable && !hasActions
+            ? undefined
+            : {
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
@@ -47,38 +48,40 @@ export const ActionBar = observer((props: any) => {
               flexShrink: 0,
               ...style,
             }
-      }
-      {...others}
-      className={cx(others.className, 'nb-action-bar')}
-    >
-      <div
-        className={css`
-          .ant-space:last-child {
-            margin-left: 8px;
-          }
-        `}
-        style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}
+        }
+        {...others}
+        className={cx(others.className, 'nb-action-bar')}
       >
-        <DndContext>
-          <Space {...spaceProps}>
-            {fieldSchema.mapProperties((schema, key) => {
-              if (schema['x-align'] !== 'left') {
-                return null;
-              }
-              return <RecursionField key={key} name={key} schema={schema} />;
-            })}
-          </Space>
-          <Space {...spaceProps}>
-            {fieldSchema.mapProperties((schema, key) => {
-              if (schema['x-align'] === 'left') {
-                return null;
-              }
-              return <RecursionField key={key} name={key} schema={schema} />;
-            })}
-          </Space>
-        </DndContext>
+        <div
+          className={css`
+            .ant-space:last-child {
+              margin-left: 8px;
+            }
+          `}
+          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}
+        >
+          <DndContext>
+            <Space {...spaceProps}>
+              {fieldSchema.mapProperties((schema, key) => {
+                if (schema['x-align'] !== 'left') {
+                  return null;
+                }
+                return <RecursionField key={key} name={key} schema={schema} />;
+              })}
+            </Space>
+            <Space {...spaceProps}>
+              {fieldSchema.mapProperties((schema, key) => {
+                if (schema['x-align'] === 'left') {
+                  return null;
+                }
+                return <RecursionField key={key} name={key} schema={schema} />;
+              })}
+            </Space>
+          </DndContext>
+        </div>
+        <InitializerComponent />
       </div>
-      <InitializerComponent />
-    </div>
-  );
-});
+    );
+  },
+  { displayName: 'ActionBar' },
+);
diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx
index 32ceeafc9..d2d971de4 100644
--- a/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx
+++ b/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx
@@ -18,30 +18,33 @@ const useCloseAction = () => {
   };
 };
 
-const Editable = observer((props) => {
-  const field = useField<Field>();
-  const schema = useFieldSchema();
-  return (
-    <div>
-      <div style={{ marginBottom: 24 }}>
-        打开方式：
-        <Select
-          value={field.componentProps.openMode}
-          style={{ width: 100 }}
-          onChange={(value) => {
-            field.componentProps.openMode = value;
-            schema['x-component-props']['openMode'] = value;
-          }}
-        >
-          <Select.Option value={'drawer'}>Drawer</Select.Option>
-          <Select.Option value={'modal'}>Modal</Select.Option>
-          <Select.Option value={'page'}>Page</Select.Option>
-        </Select>
+const Editable = observer(
+  (props) => {
+    const field = useField<Field>();
+    const schema = useFieldSchema();
+    return (
+      <div>
+        <div style={{ marginBottom: 24 }}>
+          打开方式：
+          <Select
+            value={field.componentProps.openMode}
+            style={{ width: 100 }}
+            onChange={(value) => {
+              field.componentProps.openMode = value;
+              schema['x-component-props']['openMode'] = value;
+            }}
+          >
+            <Select.Option value={'drawer'}>Drawer</Select.Option>
+            <Select.Option value={'modal'}>Modal</Select.Option>
+            <Select.Option value={'page'}>Page</Select.Option>
+          </Select>
+        </div>
+        {props.children}
       </div>
-      {props.children}
-    </div>
-  );
-});
+    );
+  },
+  { displayName: 'Editable' },
+);
 
 const schema: ISchema = {
   type: 'object',
diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx
index 98660d24a..9263ef84d 100644
--- a/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx
+++ b/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx
@@ -71,52 +71,55 @@ function TypeSelect(props) {
   );
 }
 
-const EditOptions = observer((props) => {
-  const record = ArrayTable.useRecord();
-  const field = useField<Field>();
-  console.log(record.type);
-  return (
-    <div>
-      <a
-        onClick={() => {
-          FormDrawer('Pop-up form', () => {
-            return (
-              <FormLayout labelCol={6} wrapperCol={10}>
-                <SchemaField
-                  schema={{
-                    type: 'object',
-                    properties: record.type ? types[record.type] || {} : {},
-                  }}
-                />
-                <FormDrawer.Footer>
-                  <FormButtonGroup align="right">
-                    <Submit
-                      onSubmit={() => {
-                        return new Promise((resolve) => {
-                          setTimeout(resolve, 1000);
-                        });
-                      }}
-                    >
-                      Submit
-                    </Submit>
-                  </FormButtonGroup>
-                </FormDrawer.Footer>
-              </FormLayout>
-            );
-          })
-            .open({
-              initialValues: field.value,
+const EditOptions = observer(
+  (props) => {
+    const record = ArrayTable.useRecord();
+    const field = useField<Field>();
+    console.log(record.type);
+    return (
+      <div>
+        <a
+          onClick={() => {
+            FormDrawer('Pop-up form', () => {
+              return (
+                <FormLayout labelCol={6} wrapperCol={10}>
+                  <SchemaField
+                    schema={{
+                      type: 'object',
+                      properties: record.type ? types[record.type] || {} : {},
+                    }}
+                  />
+                  <FormDrawer.Footer>
+                    <FormButtonGroup align="right">
+                      <Submit
+                        onSubmit={() => {
+                          return new Promise((resolve) => {
+                            setTimeout(resolve, 1000);
+                          });
+                        }}
+                      >
+                        Submit
+                      </Submit>
+                    </FormButtonGroup>
+                  </FormDrawer.Footer>
+                </FormLayout>
+              );
             })
-            .then((values) => {
-              field.value = values;
-            });
-        }}
-      >
-        Edit
-      </a>
-    </div>
-  );
-});
+              .open({
+                initialValues: field.value,
+              })
+              .then((values) => {
+                field.value = values;
+              });
+          }}
+        >
+          Edit
+        </a>
+      </div>
+    );
+  },
+  { displayName: 'EditOptions' },
+);
 
 const SchemaField = createSchemaField({
   components: {
diff --git a/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx b/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx
index 2c81951f3..1278e36d0 100644
--- a/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx
@@ -4,63 +4,66 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useCollectionManager } from '../../../collection-manager';
 import { AssociationFieldContext } from './context';
 
-export const AssociationFieldProvider = observer((props) => {
-  const field = useField<Field>();
-  const { getCollectionJoinField, getCollection } = useCollectionManager();
-  const fieldSchema = useFieldSchema();
-  const allowMultiple = fieldSchema['x-component-props']?.multiple !== false;
-  const allowDissociate = fieldSchema['x-component-props']?.allowDissociate !== false;
+export const AssociationFieldProvider = observer(
+  (props) => {
+    const field = useField<Field>();
+    const { getCollectionJoinField, getCollection } = useCollectionManager();
+    const fieldSchema = useFieldSchema();
+    const allowMultiple = fieldSchema['x-component-props']?.multiple !== false;
+    const allowDissociate = fieldSchema['x-component-props']?.allowDissociate !== false;
 
-  const collectionField = useMemo(
-    () => getCollectionJoinField(fieldSchema['x-collection-field']),
-    [fieldSchema['x-collection-field'], fieldSchema.name],
-  );
-  const isFileCollection = useMemo(
-    () => getCollection(collectionField?.target)?.template === 'file',
-    [fieldSchema['x-collection-field']],
-  );
-  const currentMode = useMemo(
-    () => fieldSchema['x-component-props']?.mode || (isFileCollection ? 'FileManager' : 'Select'),
-    [fieldSchema['x-component-props']?.mode],
-  );
+    const collectionField = useMemo(
+      () => getCollectionJoinField(fieldSchema['x-collection-field']),
+      [fieldSchema['x-collection-field'], fieldSchema.name],
+    );
+    const isFileCollection = useMemo(
+      () => getCollection(collectionField?.target)?.template === 'file',
+      [fieldSchema['x-collection-field']],
+    );
+    const currentMode = useMemo(
+      () => fieldSchema['x-component-props']?.mode || (isFileCollection ? 'FileManager' : 'Select'),
+      [fieldSchema['x-component-props']?.mode],
+    );
 
-  const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    setLoading(true);
-    if (!collectionField) {
-      setLoading(false);
-      return;
-    }
-    if (field.value !== null && field.value !== undefined) {
-      // Nester 子表单时，如果没数据初始化一个 [null] 的占位
-      if (currentMode === 'Nester' && Array.isArray(field.value)) {
-        if (field.value.length === 0 && ['belongsToMany', 'hasMany'].includes(collectionField.type)) {
+    useEffect(() => {
+      setLoading(true);
+      if (!collectionField) {
+        setLoading(false);
+        return;
+      }
+      if (field.value !== null && field.value !== undefined) {
+        // Nester 子表单时，如果没数据初始化一个 [null] 的占位
+        if (currentMode === 'Nester' && Array.isArray(field.value)) {
+          if (field.value.length === 0 && ['belongsToMany', 'hasMany'].includes(collectionField.type)) {
+            field.value = [{}];
+          }
+        }
+        setLoading(false);
+        return;
+      }
+      if (currentMode === 'Nester') {
+        if (['belongsTo', 'hasOne'].includes(collectionField.type)) {
+          field.value = {};
+        } else if (['belongsToMany', 'hasMany'].includes(collectionField.type)) {
           field.value = [{}];
         }
       }
       setLoading(false);
-      return;
-    }
-    if (currentMode === 'Nester') {
-      if (['belongsTo', 'hasOne'].includes(collectionField.type)) {
-        field.value = {};
-      } else if (['belongsToMany', 'hasMany'].includes(collectionField.type)) {
-        field.value = [{}];
-      }
-    }
-    setLoading(false);
-  }, [currentMode, collectionField, field.value]);
+    }, [currentMode, collectionField, field.value]);
 
-  if (loading) {
-    return null;
-  }
+    if (loading) {
+      return null;
+    }
 
-  return collectionField ? (
-    <AssociationFieldContext.Provider
-      value={{ options: collectionField, field, allowMultiple, allowDissociate, currentMode }}
-    >
-      {props.children}
-    </AssociationFieldContext.Provider>
-  ) : null;
-});
+    return collectionField ? (
+      <AssociationFieldContext.Provider
+        value={{ options: collectionField, field, allowMultiple, allowDissociate, currentMode }}
+      >
+        {props.children}
+      </AssociationFieldContext.Provider>
+    ) : null;
+  },
+  { displayName: 'AssociationFieldProvider' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx b/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
index d039ae10e..2eadb26c9 100644
--- a/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx
@@ -11,41 +11,44 @@ export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
   multiple?: boolean;
 };
 
-const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
-  const { fieldNames, objectValue = true } = props;
-  const field: any = useField();
-  const fieldSchema = useFieldSchema();
-  const service = useServiceOptions(props);
-  const isAllowAddNew = fieldSchema['x-add-new'];
-  const value = Array.isArray(props.value) ? props.value.filter(Boolean) : props.value;
+const InternalAssociationSelect = observer(
+  (props: AssociationSelectProps) => {
+    const { fieldNames, objectValue = true } = props;
+    const field: any = useField();
+    const fieldSchema = useFieldSchema();
+    const service = useServiceOptions(props);
+    const isAllowAddNew = fieldSchema['x-add-new'];
+    const value = Array.isArray(props.value) ? props.value.filter(Boolean) : props.value;
 
-  return (
-    <div key={fieldSchema.name}>
-      <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
-        <RemoteSelect
-          style={{ width: '100%' }}
-          {...props}
-          objectValue={objectValue}
-          value={value}
-          service={service}
-        ></RemoteSelect>
+    return (
+      <div key={fieldSchema.name}>
+        <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
+          <RemoteSelect
+            style={{ width: '100%' }}
+            {...props}
+            objectValue={objectValue}
+            value={value}
+            service={service}
+          ></RemoteSelect>
 
-        {isAllowAddNew && (
-          <RecordProvider record={null}>
-            <RecursionField
-              onlyRenderProperties
-              basePath={field.address}
-              schema={fieldSchema}
-              filterProperties={(s) => {
-                return s['x-component'] === 'Action';
-              }}
-            />
-          </RecordProvider>
-        )}
-      </Input.Group>
-    </div>
-  );
-});
+          {isAllowAddNew && (
+            <RecordProvider record={null}>
+              <RecursionField
+                onlyRenderProperties
+                basePath={field.address}
+                schema={fieldSchema}
+                filterProperties={(s) => {
+                  return s['x-component'] === 'Action';
+                }}
+              />
+            </RecordProvider>
+          )}
+        </Input.Group>
+      </div>
+    );
+  },
+  { displayName: 'InternalAssociationSelect' },
+);
 
 interface AssociationSelectInterface {
   (props: any): React.ReactElement;
diff --git a/packages/core/client/src/schema-component/antd/association-field/Editable.tsx b/packages/core/client/src/schema-component/antd/association-field/Editable.tsx
index 76377f6f9..319811852 100644
--- a/packages/core/client/src/schema-component/antd/association-field/Editable.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/Editable.tsx
@@ -12,50 +12,56 @@ import { InternalSubTable } from './InternalSubTable';
 import { CreateRecordAction } from './components/CreateRecordAction';
 import { useAssociationFieldContext } from './hooks';
 
-const EditableAssociationField = observer((props: any) => {
-  const { multiple } = props;
-  const field: Field = useField();
-  const form = useForm();
-  const fieldSchema = useFieldSchema();
-  const { options: collectionField, currentMode } = useAssociationFieldContext();
+const EditableAssociationField = observer(
+  (props: any) => {
+    const { multiple } = props;
+    const field: Field = useField();
+    const form = useForm();
+    const fieldSchema = useFieldSchema();
+    const { options: collectionField, currentMode } = useAssociationFieldContext();
 
-  const useCreateActionProps = () => {
-    const { onClick } = useCAP();
-    const actionField: any = useField();
-    return {
-      async onClick() {
-        await onClick();
-        const { data } = actionField.data?.data?.data || {};
-        if (data) {
-          if (['m2m', 'o2m'].includes(collectionField?.interface) && multiple !== false) {
-            const values = form.getValuesIn(field.path) || [];
-            values.push(data);
-            form.setValuesIn(field.path, values);
-            field.onInput(values);
-          } else {
-            form.setValuesIn(field.path, data);
-            field.onInput(data);
+    const useCreateActionProps = () => {
+      const { onClick } = useCAP();
+      const actionField: any = useField();
+      return {
+        async onClick() {
+          await onClick();
+          const { data } = actionField.data?.data?.data || {};
+          if (data) {
+            if (['m2m', 'o2m'].includes(collectionField?.interface) && multiple !== false) {
+              const values = form.getValuesIn(field.path) || [];
+              values.push(data);
+              form.setValuesIn(field.path, values);
+              field.onInput(values);
+            } else {
+              form.setValuesIn(field.path, data);
+              field.onInput(data);
+            }
           }
-        }
-      },
+        },
+      };
     };
-  };
 
-  return (
-    <SchemaComponentOptions scope={{ useCreateActionProps }} components={{ CreateRecordAction }}>
-      {currentMode === 'Picker' && <InternalPicker {...props} />}
-      {currentMode === 'Nester' && <InternalNester {...props} />}
-      {currentMode === 'Select' && <AssociationSelect {...props} />}
-      {currentMode === 'SubTable' && <InternalSubTable {...props} />}
-      {currentMode === 'FileManager' && <InternalFileManager {...props} />}
-    </SchemaComponentOptions>
-  );
-});
+    return (
+      <SchemaComponentOptions scope={{ useCreateActionProps }} components={{ CreateRecordAction }}>
+        {currentMode === 'Picker' && <InternalPicker {...props} />}
+        {currentMode === 'Nester' && <InternalNester {...props} />}
+        {currentMode === 'Select' && <AssociationSelect {...props} />}
+        {currentMode === 'SubTable' && <InternalSubTable {...props} />}
+        {currentMode === 'FileManager' && <InternalFileManager {...props} />}
+      </SchemaComponentOptions>
+    );
+  },
+  { displayName: 'EditableAssociationField' },
+);
 
-export const Editable = observer((props) => {
-  return (
-    <AssociationFieldProvider>
-      <EditableAssociationField {...props} />
-    </AssociationFieldProvider>
-  );
-});
+export const Editable = observer(
+  (props) => {
+    return (
+      <AssociationFieldProvider>
+        <EditableAssociationField {...props} />
+      </AssociationFieldProvider>
+    );
+  },
+  { displayName: 'Editable' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
index 409b4bb9f..746b06704 100644
--- a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
@@ -60,138 +60,145 @@ const useTableSelectorProps = () => {
   };
 };
 
-export const InternalPicker = observer((props: any) => {
-  const { value, multiple, onChange, quickUpload, selectFile, ...others } = props;
-  const field: any = useField();
-  const fieldNames = useFieldNames(props);
-  const [visibleSelector, setVisibleSelector] = useState(false);
-  const fieldSchema = useFieldSchema();
-  const insertSelector = useInsertSchema('Selector');
-  const { options: collectionField } = useAssociationFieldContext();
-  const compile = useCompile();
-  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
-  const isAllowAddNew = fieldSchema['x-add-new'];
-  const [selectedRows, setSelectedRows] = useState([]);
-  const options = useMemo(() => {
-    if (value && Object.keys(value).length > 0) {
-      const opts = (Array.isArray(value) ? value : value ? [value] : []).filter(Boolean).map((option) => {
-        const label = option?.[fieldNames.label];
-        return {
-          ...option,
-          [fieldNames.label]: getLabelFormatValue(compile(labelUiSchema), compile(label)),
-        };
-      });
-      return opts;
-    }
-    return [];
-  }, [value, fieldNames?.label]);
+export const InternalPicker = observer(
+  (props: any) => {
+    const { value, multiple, onChange, quickUpload, selectFile, ...others } = props;
+    const field: any = useField();
+    const fieldNames = useFieldNames(props);
+    const [visibleSelector, setVisibleSelector] = useState(false);
+    const fieldSchema = useFieldSchema();
+    const insertSelector = useInsertSchema('Selector');
+    const { options: collectionField } = useAssociationFieldContext();
+    const compile = useCompile();
+    const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
+    const isAllowAddNew = fieldSchema['x-add-new'];
+    const [selectedRows, setSelectedRows] = useState([]);
+    const options = useMemo(() => {
+      if (value && Object.keys(value).length > 0) {
+        const opts = (Array.isArray(value) ? value : value ? [value] : []).filter(Boolean).map((option) => {
+          const label = option?.[fieldNames.label];
+          return {
+            ...option,
+            [fieldNames.label]: getLabelFormatValue(compile(labelUiSchema), compile(label)),
+          };
+        });
+        return opts;
+      }
+      return [];
+    }, [value, fieldNames?.label]);
 
-  const pickerProps = {
-    size: 'small',
-    fieldNames,
-    multiple: multiple !== false && ['o2m', 'm2m'].includes(collectionField?.interface),
-    association: {
-      target: collectionField?.target,
-    },
-    options,
-    onChange: props?.onChange,
-    selectedRows,
-    setSelectedRows,
-    collectionField,
-  };
-
-  const getValue = () => {
-    if (multiple == null) return null;
-    return Array.isArray(value) ? value.filter(Boolean)?.map((v) => v?.[fieldNames.value]) : value?.[fieldNames.value];
-  };
-  const getFilter = () => {
-    const targetKey = collectionField?.targetKey || 'id';
-    const list = options.map((option) => option[targetKey]).filter(Boolean);
-    const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {};
-    return filter;
-  };
-  const usePickActionProps = () => {
-    const { setVisible } = useActionContext();
-    const { multiple, selectedRows, onChange, options, collectionField } = useContext(RecordPickerContext);
-    return {
-      onClick() {
-        if (multiple) {
-          onChange(unionBy(selectedRows, options, collectionField?.targetKey || 'id'));
-        } else {
-          onChange(selectedRows?.[0] || null);
-        }
-        setVisible(false);
+    const pickerProps = {
+      size: 'small',
+      fieldNames,
+      multiple: multiple !== false && ['o2m', 'm2m'].includes(collectionField?.interface),
+      association: {
+        target: collectionField?.target,
       },
+      options,
+      onChange: props?.onChange,
+      selectedRows,
+      setSelectedRows,
+      collectionField,
     };
-  };
-  return (
-    <>
-      <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
-        <div style={{ width: '100%' }}>
-          <Select
-            style={{ width: '100%' }}
-            {...others}
-            mode={multiple ? 'multiple' : props.mode}
-            fieldNames={fieldNames}
-            onDropdownVisibleChange={(open) => {
-              insertSelector(schema.Selector);
-              setVisibleSelector(true);
-            }}
-            allowClear
-            onChange={(changed: any) => {
-              if (!changed) {
-                const value = multiple ? [] : null;
-                onChange(value);
-                setSelectedRows(value);
-              } else if (Array.isArray(changed)) {
-                if (!changed.length) {
-                  onChange([]);
-                  setSelectedRows([]);
-                  return;
-                }
-                const values = options?.filter((option) => changed.includes(option[fieldNames.value]));
-                onChange(values);
-                setSelectedRows(values);
-              }
-            }}
-            options={options}
-            value={getValue()}
-            open={false}
-          />
-        </div>
-        {isAllowAddNew && (
-          <RecordProvider record={null}>
-            <RecursionField
-              onlyRenderProperties
-              basePath={field.address}
-              schema={fieldSchema}
-              filterProperties={(s) => {
-                return s['x-component'] === 'Action';
+
+    const getValue = () => {
+      if (multiple == null) return null;
+      return Array.isArray(value)
+        ? value.filter(Boolean)?.map((v) => v?.[fieldNames.value])
+        : value?.[fieldNames.value];
+    };
+    const getFilter = () => {
+      const targetKey = collectionField?.targetKey || 'id';
+      const list = options.map((option) => option[targetKey]).filter(Boolean);
+      const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {};
+      return filter;
+    };
+    const usePickActionProps = () => {
+      const { setVisible } = useActionContext();
+      const { multiple, selectedRows, onChange, options, collectionField } = useContext(RecordPickerContext);
+      return {
+        onClick() {
+          if (multiple) {
+            onChange(unionBy(selectedRows, options, collectionField?.targetKey || 'id'));
+          } else {
+            onChange(selectedRows?.[0] || null);
+          }
+          setVisible(false);
+        },
+      };
+    };
+    return (
+      <>
+        <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
+          <div style={{ width: '100%' }}>
+            <Select
+              style={{ width: '100%' }}
+              {...others}
+              mode={multiple ? 'multiple' : props.mode}
+              fieldNames={fieldNames}
+              onDropdownVisibleChange={(open) => {
+                insertSelector(schema.Selector);
+                setVisibleSelector(true);
               }}
+              allowClear
+              onChange={(changed: any) => {
+                if (!changed) {
+                  const value = multiple ? [] : null;
+                  onChange(value);
+                  setSelectedRows(value);
+                } else if (Array.isArray(changed)) {
+                  if (!changed.length) {
+                    onChange([]);
+                    setSelectedRows([]);
+                    return;
+                  }
+                  const values = options?.filter((option) => changed.includes(option[fieldNames.value]));
+                  onChange(values);
+                  setSelectedRows(values);
+                }
+              }}
+              options={options}
+              value={getValue()}
+              open={false}
             />
-          </RecordProvider>
-        )}
-      </Input.Group>
-      <ActionContext.Provider value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}>
-        <RecordPickerProvider {...pickerProps}>
-          <CollectionProvider name={collectionField?.target}>
-            <FormProvider>
-              <TableSelectorParamsProvider params={{ filter: getFilter() }}>
-                <SchemaComponentOptions scope={{ usePickActionProps, useTableSelectorProps }}>
-                  <RecursionField
-                    onlyRenderProperties
-                    basePath={field.address}
-                    schema={fieldSchema}
-                    filterProperties={(s) => {
-                      return s['x-component'] === 'AssociationField.Selector';
-                    }}
-                  />
-                </SchemaComponentOptions>
-              </TableSelectorParamsProvider>
-            </FormProvider>
-          </CollectionProvider>
-        </RecordPickerProvider>
-      </ActionContext.Provider>
-    </>
-  );
-});
+          </div>
+          {isAllowAddNew && (
+            <RecordProvider record={null}>
+              <RecursionField
+                onlyRenderProperties
+                basePath={field.address}
+                schema={fieldSchema}
+                filterProperties={(s) => {
+                  return s['x-component'] === 'Action';
+                }}
+              />
+            </RecordProvider>
+          )}
+        </Input.Group>
+        <ActionContext.Provider
+          value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}
+        >
+          <RecordPickerProvider {...pickerProps}>
+            <CollectionProvider name={collectionField?.target}>
+              <FormProvider>
+                <TableSelectorParamsProvider params={{ filter: getFilter() }}>
+                  <SchemaComponentOptions scope={{ usePickActionProps, useTableSelectorProps }}>
+                    <RecursionField
+                      onlyRenderProperties
+                      basePath={field.address}
+                      schema={fieldSchema}
+                      filterProperties={(s) => {
+                        return s['x-component'] === 'AssociationField.Selector';
+                      }}
+                    />
+                  </SchemaComponentOptions>
+                </TableSelectorParamsProvider>
+              </FormProvider>
+            </CollectionProvider>
+          </RecordPickerProvider>
+        </ActionContext.Provider>
+      </>
+    );
+  },
+  { displayName: 'InternalPicker' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalViewer.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalViewer.tsx
index 9f70e6042..cefc8ecc2 100644
--- a/packages/core/client/src/schema-component/antd/association-field/InternalViewer.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/InternalViewer.tsx
@@ -22,94 +22,97 @@ const toValue = (value, placeholder) => {
   }
   return value;
 };
-export const ReadPrettyInternalViewer: React.FC = observer((props: any) => {
-  const fieldSchema = useFieldSchema();
-  const recordCtx = useRecord();
-  const { enableLink } = fieldSchema['x-component-props'];
-  // value 做了转换，但 props.value 和原来 useField().value 的值不一致
-  const field = useField();
-  const fieldNames = useFieldNames(props);
-  const [visible, setVisible] = useState(false);
-  const insertViewer = useInsertSchema('Viewer');
-  const { options: collectionField } = useAssociationFieldContext();
-  const [record, setRecord] = useState({});
-  const compile = useCompile();
-  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
-  const { snapshot } = useActionContext();
-  const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
+export const ReadPrettyInternalViewer: React.FC = observer(
+  (props: any) => {
+    const fieldSchema = useFieldSchema();
+    const recordCtx = useRecord();
+    const { enableLink } = fieldSchema['x-component-props'];
+    // value 做了转换，但 props.value 和原来 useField().value 的值不一致
+    const field = useField();
+    const fieldNames = useFieldNames(props);
+    const [visible, setVisible] = useState(false);
+    const insertViewer = useInsertSchema('Viewer');
+    const { options: collectionField } = useAssociationFieldContext();
+    const [record, setRecord] = useState({});
+    const compile = useCompile();
+    const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
+    const { snapshot } = useActionContext();
+    const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
 
-  const renderRecords = () =>
-    toArr(props.value).map((record, index, arr) => {
-      const val = toValue(compile(record?.[fieldNames?.label || 'label']), 'N/A');
-      const text = getLabelFormatValue(compile(labelUiSchema), val, true);
-      return (
-        <Fragment key={`${record.id}_${index}`}>
-          <span>
-            {snapshot ? (
-              text
-            ) : enableLink !== false ? (
-              <a
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  insertViewer(schema.Viewer);
-                  setVisible(true);
-                  setRecord(record);
-                  ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
-                }}
-              >
-                {text}
-              </a>
-            ) : (
-              text
-            )}
-          </span>
-          {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
-        </Fragment>
-      );
-    });
+    const renderRecords = () =>
+      toArr(props.value).map((record, index, arr) => {
+        const val = toValue(compile(record?.[fieldNames?.label || 'label']), 'N/A');
+        const text = getLabelFormatValue(compile(labelUiSchema), val, true);
+        return (
+          <Fragment key={`${record.id}_${index}`}>
+            <span>
+              {snapshot ? (
+                text
+              ) : enableLink !== false ? (
+                <a
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    insertViewer(schema.Viewer);
+                    setVisible(true);
+                    setRecord(record);
+                    ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
+                  }}
+                >
+                  {text}
+                </a>
+              ) : (
+                text
+              )}
+            </span>
+            {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
+          </Fragment>
+        );
+      });
 
-  const renderWithoutTableFieldResourceProvider = () => (
-    <WithoutTableFieldResource.Provider value={true}>
-      <FormProvider>
-        <RecursionField
-          schema={fieldSchema}
-          onlyRenderProperties
-          basePath={field.address}
-          filterProperties={(s) => {
-            return s['x-component'] === 'AssociationField.Viewer';
-          }}
-        />
-      </FormProvider>
-    </WithoutTableFieldResource.Provider>
-  );
-
-  const renderRecordProvider = () => {
-    const collectionFieldNames = fieldSchema?.['x-collection-field']?.split('.');
-
-    return collectionFieldNames && collectionFieldNames.length > 2 ? (
-      <RecordProvider record={recordCtx[collectionFieldNames[1]]}>
-        <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
-      </RecordProvider>
-    ) : (
-      <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
+    const renderWithoutTableFieldResourceProvider = () => (
+      <WithoutTableFieldResource.Provider value={true}>
+        <FormProvider>
+          <RecursionField
+            schema={fieldSchema}
+            onlyRenderProperties
+            basePath={field.address}
+            filterProperties={(s) => {
+              return s['x-component'] === 'AssociationField.Viewer';
+            }}
+          />
+        </FormProvider>
+      </WithoutTableFieldResource.Provider>
     );
-  };
 
-  return (
-    <div>
-      <BlockAssociationContext.Provider value={`${collectionField?.collectionName}.${collectionField?.name}`}>
-        <CollectionProvider name={collectionField?.target ?? collectionField?.targetCollection}>
-          <EllipsisWithTooltip ellipsis={true} ref={ellipsisWithTooltipRef}>
-            {renderRecords()}
-          </EllipsisWithTooltip>
-          <ActionContext.Provider
-            value={{ visible, setVisible, openMode: 'drawer', snapshot: collectionField?.interface === 'snapshot' }}
-          >
-            {renderRecordProvider()}
-          </ActionContext.Provider>
-        </CollectionProvider>
-      </BlockAssociationContext.Provider>
-    </div>
-  );
-});
+    const renderRecordProvider = () => {
+      const collectionFieldNames = fieldSchema?.['x-collection-field']?.split('.');
+
+      return collectionFieldNames && collectionFieldNames.length > 2 ? (
+        <RecordProvider record={recordCtx[collectionFieldNames[1]]}>
+          <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
+        </RecordProvider>
+      ) : (
+        <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
+      );
+    };
+
+    return (
+      <div>
+        <BlockAssociationContext.Provider value={`${collectionField?.collectionName}.${collectionField?.name}`}>
+          <CollectionProvider name={collectionField?.target ?? collectionField?.targetCollection}>
+            <EllipsisWithTooltip ellipsis={true} ref={ellipsisWithTooltipRef}>
+              {renderRecords()}
+            </EllipsisWithTooltip>
+            <ActionContext.Provider
+              value={{ visible, setVisible, openMode: 'drawer', snapshot: collectionField?.interface === 'snapshot' }}
+            >
+              {renderRecordProvider()}
+            </ActionContext.Provider>
+          </CollectionProvider>
+        </BlockAssociationContext.Provider>
+      </div>
+    );
+  },
+  { displayName: 'ReadPrettyInternalViewer' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx
index 2c01c2f33..46e376efb 100644
--- a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx
@@ -25,92 +25,95 @@ const ToOneNester = (props) => {
   return <Card bordered={true}>{props.children}</Card>;
 };
 
-const ToManyNester = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
-  const { t } = useTranslation();
-  return (field.value || []).length > 0 ? (
-    <Card
-      bordered={true}
-      style={{ position: 'relative' }}
-      className={css`
-        > .ant-card-body > .ant-divider:last-child {
-          display: none;
-        }
-      `}
-    >
-      {(field.value || []).map((value, index) => {
-        let allowed = allowDissociate;
-        if (!allowDissociate) {
-          allowed = !value?.[options.targetKey];
-        }
-        return (
-          <>
-            <div style={{ textAlign: 'right' }}>
-              {field.editable && allowMultiple && (
-                <Tooltip key={'add'} title={t('Add new')}>
-                  <PlusOutlined
-                    style={{ zIndex: 1000, marginRight: '10px', color: '#a8a3a3' }}
-                    onClick={() => {
-                      action(() => {
-                        if (!Array.isArray(field.value)) {
-                          field.value = [];
-                        }
-                        spliceArrayState(field as any, {
-                          startIndex: index + 1,
-                          insertCount: 1,
+const ToManyNester = observer(
+  (props) => {
+    const fieldSchema = useFieldSchema();
+    const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
+    const { t } = useTranslation();
+    return (field.value || []).length > 0 ? (
+      <Card
+        bordered={true}
+        style={{ position: 'relative' }}
+        className={css`
+          > .ant-card-body > .ant-divider:last-child {
+            display: none;
+          }
+        `}
+      >
+        {(field.value || []).map((value, index) => {
+          let allowed = allowDissociate;
+          if (!allowDissociate) {
+            allowed = !value?.[options.targetKey];
+          }
+          return (
+            <>
+              <div style={{ textAlign: 'right' }}>
+                {field.editable && allowMultiple && (
+                  <Tooltip key={'add'} title={t('Add new')}>
+                    <PlusOutlined
+                      style={{ zIndex: 1000, marginRight: '10px', color: '#a8a3a3' }}
+                      onClick={() => {
+                        action(() => {
+                          if (!Array.isArray(field.value)) {
+                            field.value = [];
+                          }
+                          spliceArrayState(field as any, {
+                            startIndex: index + 1,
+                            insertCount: 1,
+                          });
+                          field.value.splice(index + 1, 0, {});
+                          return field.onInput(field.value);
                         });
-                        field.value.splice(index + 1, 0, {});
-                        return field.onInput(field.value);
-                      });
-                    }}
-                  />
-                </Tooltip>
-              )}
-              {!field.readPretty && allowed && (
-                <Tooltip key={'remove'} title={t('Remove')}>
-                  <CloseOutlined
-                    style={{ zIndex: 1000, color: '#a8a3a3' }}
-                    onClick={() => {
-                      action(() => {
-                        spliceArrayState(field as any, {
-                          startIndex: index,
-                          deleteCount: 1,
+                      }}
+                    />
+                  </Tooltip>
+                )}
+                {!field.readPretty && allowed && (
+                  <Tooltip key={'remove'} title={t('Remove')}>
+                    <CloseOutlined
+                      style={{ zIndex: 1000, color: '#a8a3a3' }}
+                      onClick={() => {
+                        action(() => {
+                          spliceArrayState(field as any, {
+                            startIndex: index,
+                            deleteCount: 1,
+                          });
+                          field.value.splice(index, 1);
+                          return field.onInput(field.value);
                         });
-                        field.value.splice(index, 1);
-                        return field.onInput(field.value);
-                      });
-                    }}
-                  />
-                </Tooltip>
-              )}
-            </div>
-            <RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
-            <Divider />
-          </>
-        );
-      })}
-    </Card>
-  ) : (
-    <>
-      {field.editable && allowMultiple && (
-        <Tooltip key={'add'} title={t('Add new')}>
-          <Button
-            type={'default'}
-            className={css`
-              border: 1px solid #f0f0f0 !important;
-              box-shadow: none;
-            `}
-            block
-            icon={<PlusOutlined />}
-            onClick={() => {
-              const result = field.value;
-              result.push({});
-              field.value = result;
-            }}
-          ></Button>
-        </Tooltip>
-      )}
-    </>
-  );
-});
+                      }}
+                    />
+                  </Tooltip>
+                )}
+              </div>
+              <RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
+              <Divider />
+            </>
+          );
+        })}
+      </Card>
+    ) : (
+      <>
+        {field.editable && allowMultiple && (
+          <Tooltip key={'add'} title={t('Add new')}>
+            <Button
+              type={'default'}
+              className={css`
+                border: 1px solid #f0f0f0 !important;
+                box-shadow: none;
+              `}
+              block
+              icon={<PlusOutlined />}
+              onClick={() => {
+                const result = field.value;
+                result.push({});
+                field.value = result;
+              }}
+            ></Button>
+          </Tooltip>
+        )}
+      </>
+    );
+  },
+  { displayName: 'ToManyNester' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/association-field/ReadPretty.tsx
index 746478ee5..9362a54f6 100644
--- a/packages/core/client/src/schema-component/antd/association-field/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/ReadPretty.tsx
@@ -7,23 +7,29 @@ import { InternalSubTable } from './InternalSubTable';
 import { FileManageReadPretty } from './FileManager';
 import { useAssociationFieldContext } from './hooks';
 
-const ReadPrettyAssociationField = observer((props: any) => {
-  const { currentMode } = useAssociationFieldContext();
+const ReadPrettyAssociationField = observer(
+  (props: any) => {
+    const { currentMode } = useAssociationFieldContext();
 
-  return (
-    <>
-      {['Select', 'Picker'].includes(currentMode) && <ReadPrettyInternalViewer {...props} />}
-      {currentMode === 'Nester' && <InternalNester {...props} />}
-      {currentMode === 'SubTable' && <InternalSubTable {...props} />}
-      {currentMode === 'FileManager' && <FileManageReadPretty {...props} />}
-    </>
-  );
-});
+    return (
+      <>
+        {['Select', 'Picker'].includes(currentMode) && <ReadPrettyInternalViewer {...props} />}
+        {currentMode === 'Nester' && <InternalNester {...props} />}
+        {currentMode === 'SubTable' && <InternalSubTable {...props} />}
+        {currentMode === 'FileManager' && <FileManageReadPretty {...props} />}
+      </>
+    );
+  },
+  { displayName: 'ReadPrettyAssociationField' },
+);
 
-export const ReadPretty = observer((props) => {
-  return (
-    <AssociationFieldProvider>
-      <ReadPrettyAssociationField {...props} />
-    </AssociationFieldProvider>
-  );
-});
+export const ReadPretty = observer(
+  (props) => {
+    return (
+      <AssociationFieldProvider>
+        <ReadPrettyAssociationField {...props} />
+      </AssociationFieldProvider>
+    );
+  },
+  { displayName: 'ReadPretty' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx b/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
index 8424a13af..6ecbc0e5b 100644
--- a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
@@ -5,24 +5,27 @@ import React from 'react';
 import { Table } from '../table-v2/Table';
 import { useAssociationFieldContext } from './hooks';
 
-export const SubTable: any = observer((props) => {
-  const { field } = useAssociationFieldContext<ArrayField>();
-  return (
-    <div>
-      <Table size={'small'} showIndex field={field} pagination={false} />
-      {field.editable && (
-        <Button
-          type={'dashed'}
-          block
-          style={{ marginTop: 12 }}
-          onClick={() => {
-            field.value = field.value || [];
-            field.value.push({});
-          }}
-        >
-          Add new
-        </Button>
-      )}
-    </div>
-  );
-});
+export const SubTable: any = observer(
+  (props) => {
+    const { field } = useAssociationFieldContext<ArrayField>();
+    return (
+      <div>
+        <Table size={'small'} showIndex field={field} pagination={false} />
+        {field.editable && (
+          <Button
+            type={'dashed'}
+            block
+            style={{ marginTop: 12 }}
+            onClick={() => {
+              field.value = field.value || [];
+              field.value.push({});
+            }}
+          >
+            Add new
+          </Button>
+        )}
+      </div>
+    );
+  },
+  { displayName: 'SubTable' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-field/components/CreateRecordAction.tsx b/packages/core/client/src/schema-component/antd/association-field/components/CreateRecordAction.tsx
index cd5afa7e4..1c14bc215 100644
--- a/packages/core/client/src/schema-component/antd/association-field/components/CreateRecordAction.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/components/CreateRecordAction.tsx
@@ -6,34 +6,37 @@ import { ActionContext, useActionContext } from '../../action';
 import { useAssociationFieldContext, useInsertSchema } from '../hooks';
 import schema from '../schema';
 
-export const CreateRecordAction = observer((props) => {
-  const field: any = useField();
-  const fieldSchema = useFieldSchema();
-  const ctx = useActionContext();
-  const insertAddNewer = useInsertSchema('AddNewer');
-  const { options: collectionField } = useAssociationFieldContext();
-  const [visibleAddNewer, setVisibleAddNewer] = useState(false);
-  const [currentCollection, setCurrentCollection] = useState(collectionField?.target);
-  const addbuttonClick = (name) => {
-    insertAddNewer(schema.AddNewer);
-    setVisibleAddNewer(true);
-    setCurrentCollection(name);
-  };
-  return (
-    <CollectionProvider name={collectionField?.target}>
-      <CreateAction {...props} onClick={(arg) => addbuttonClick(arg)} />
-      <ActionContext.Provider value={{ ...ctx, visible: visibleAddNewer, setVisible: setVisibleAddNewer }}>
-        <CollectionProvider name={currentCollection}>
-          <RecursionField
-            onlyRenderProperties
-            basePath={field.address}
-            schema={fieldSchema}
-            filterProperties={(s) => {
-              return s['x-component'] === 'AssociationField.AddNewer';
-            }}
-          />
-        </CollectionProvider>
-      </ActionContext.Provider>
-    </CollectionProvider>
-  );
-});
+export const CreateRecordAction = observer(
+  (props) => {
+    const field: any = useField();
+    const fieldSchema = useFieldSchema();
+    const ctx = useActionContext();
+    const insertAddNewer = useInsertSchema('AddNewer');
+    const { options: collectionField } = useAssociationFieldContext();
+    const [visibleAddNewer, setVisibleAddNewer] = useState(false);
+    const [currentCollection, setCurrentCollection] = useState(collectionField?.target);
+    const addbuttonClick = (name) => {
+      insertAddNewer(schema.AddNewer);
+      setVisibleAddNewer(true);
+      setCurrentCollection(name);
+    };
+    return (
+      <CollectionProvider name={collectionField?.target}>
+        <CreateAction {...props} onClick={(arg) => addbuttonClick(arg)} />
+        <ActionContext.Provider value={{ ...ctx, visible: visibleAddNewer, setVisible: setVisibleAddNewer }}>
+          <CollectionProvider name={currentCollection}>
+            <RecursionField
+              onlyRenderProperties
+              basePath={field.address}
+              schema={fieldSchema}
+              filterProperties={(s) => {
+                return s['x-component'] === 'AssociationField.AddNewer';
+              }}
+            />
+          </CollectionProvider>
+        </ActionContext.Provider>
+      </CollectionProvider>
+    );
+  },
+  { displayName: 'CreateRecordAction' },
+);
diff --git a/packages/core/client/src/schema-component/antd/association-select/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/association-select/ReadPretty.tsx
index 54fa4ff12..66cbdd103 100644
--- a/packages/core/client/src/schema-component/antd/association-select/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/association-select/ReadPretty.tsx
@@ -4,8 +4,11 @@ import { useFieldTitle } from '../../hooks';
 import { RemoteSelect } from '../remote-select';
 import useServiceOptions from './useServiceOptions';
 
-export const ReadPretty = observer((props: any) => {
-  const service = useServiceOptions(props);
-  useFieldTitle();
-  return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
-});
+export const ReadPretty = observer(
+  (props: any) => {
+    const service = useServiceOptions(props);
+    useFieldTitle();
+    return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
+  },
+  { displayName: 'ReadPretty' },
+);
diff --git a/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx
index b3e462243..5dde65fa2 100644
--- a/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx
@@ -3,15 +3,18 @@ import { uid } from '@formily/shared';
 import { BlockItem, DndContext, DragHandler, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import React from 'react';
 
-const Block = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
-      Block {fieldSchema.name}
-      <DragHandler />
-    </div>
-  );
-});
+const Block = observer(
+  (props) => {
+    const fieldSchema = useFieldSchema();
+    return (
+      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
+        Block {fieldSchema.name}
+        <DragHandler />
+      </div>
+    );
+  },
+  { displayName: 'Block' },
+);
 
 export default function App() {
   return (
diff --git a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx b/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx
index d5a772b1c..54504f800 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx
@@ -190,71 +190,74 @@ const CalendarRecordViewer = (props) => {
   );
 };
 
-export const Calendar: any = observer((props: any) => {
-  const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
-  const [date, setDate] = useState<Date>(new Date());
-  const [view, setView] = useState<(typeof Weeks)[number]>('month');
-  const events = useEvents(dataSource, fieldNames, date, view);
-  const [visible, setVisible] = useState(false);
-  const [record, setRecord] = useState<any>({});
+export const Calendar: any = observer(
+  (props: any) => {
+    const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
+    const [date, setDate] = useState<Date>(new Date());
+    const [view, setView] = useState<(typeof Weeks)[number]>('month');
+    const events = useEvents(dataSource, fieldNames, date, view);
+    const [visible, setVisible] = useState(false);
+    const [record, setRecord] = useState<any>({});
 
-  const components = useMemo(() => {
-    return {
-      toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
-      week: {
-        header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
-      },
-      month: {
-        dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
-      },
-    };
-  }, [showLunar]);
+    const components = useMemo(() => {
+      return {
+        toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
+        week: {
+          header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
+        },
+        month: {
+          dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
+        },
+      };
+    }, [showLunar]);
 
-  return (
-    <div style={{ height: fixedBlock ? '100%' : 700 }}>
-      <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
-      <BigCalendar
-        popup
-        selectable
-        events={events}
-        view={view}
-        views={Weeks}
-        date={date}
-        step={60}
-        showMultiDayTimes
-        messages={messages}
-        onNavigate={setDate}
-        onView={setView}
-        onSelectSlot={(slotInfo) => {
-          console.log('onSelectSlot', slotInfo);
-        }}
-        onDoubleClickEvent={(event) => {
-          console.log('onDoubleClickEvent');
-        }}
-        onSelectEvent={(event) => {
-          const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
-          if (!record) {
-            return;
-          }
-          record.__event = { ...event, start: formatDate(moment(event.start)), end: formatDate(moment(event.end)) };
-
-          setRecord(record);
-          setVisible(true);
-        }}
-        formats={{
-          monthHeaderFormat: 'Y-M',
-          agendaDateFormat: 'M-DD',
-          dayHeaderFormat: 'Y-M-DD',
-          dayRangeHeaderFormat: ({ start, end }, culture, local) => {
-            if (dates.eq(start, end, 'month')) {
-              return local.format(start, 'Y-M', culture);
+    return (
+      <div style={{ height: fixedBlock ? '100%' : 700 }}>
+        <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
+        <BigCalendar
+          popup
+          selectable
+          events={events}
+          view={view}
+          views={Weeks}
+          date={date}
+          step={60}
+          showMultiDayTimes
+          messages={messages}
+          onNavigate={setDate}
+          onView={setView}
+          onSelectSlot={(slotInfo) => {
+            console.log('onSelectSlot', slotInfo);
+          }}
+          onDoubleClickEvent={(event) => {
+            console.log('onDoubleClickEvent');
+          }}
+          onSelectEvent={(event) => {
+            const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
+            if (!record) {
+              return;
             }
-            return `${local.format(start, 'Y-M', culture)} - ${local.format(end, 'Y-M', culture)}`;
-          },
-        }}
-        components={components}
-        localizer={localizer}
-      />
-    </div>
-  );
-});
+            record.__event = { ...event, start: formatDate(moment(event.start)), end: formatDate(moment(event.end)) };
+
+            setRecord(record);
+            setVisible(true);
+          }}
+          formats={{
+            monthHeaderFormat: 'Y-M',
+            agendaDateFormat: 'M-DD',
+            dayHeaderFormat: 'Y-M-DD',
+            dayRangeHeaderFormat: ({ start, end }, culture, local) => {
+              if (dates.eq(start, end, 'month')) {
+                return local.format(start, 'Y-M', culture);
+              }
+              return `${local.format(start, 'Y-M', culture)} - ${local.format(end, 'Y-M', culture)}`;
+            },
+          }}
+          components={components}
+          localizer={localizer}
+        />
+      </div>
+    );
+  },
+  { displayName: 'Calendar' },
+);
diff --git a/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx b/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx
index 00cc4703e..45875df91 100644
--- a/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx
@@ -11,61 +11,64 @@ import { DeleteEventContext } from './Calendar';
 import { formatDate } from './utils';
 const { Text } = Typography;
 
-export const DeleteEvent = observer(() => {
-  const { visible, setVisible } = useActionContext();
-  const { exclude = [], cron, ...record } = useRecord();
-  const { close } = useContext(DeleteEventContext);
-  const startDate = formatDate(moment(record.__parent.__event.start));
-  const filterByTk = useFilterByTk();
-  const { resource, service, __parent } = useBlockRequestContext();
-  const [value, onChange] = useState(startDate);
-  const [loading, setLoading] = useState(false);
-  const onOk = async () => {
-    setLoading(true);
-    if (value === 'all' || !cron) {
-      await resource.destroy({
-        filterByTk,
-      });
-    } else {
-      await resource.update({
-        filterByTk,
-        values: {
-          exclude: (exclude || []).concat(value),
-        },
-      });
-    }
-    setLoading(false);
-    __parent?.service?.refresh?.();
-    service?.refresh?.();
-    setVisible?.(false, true);
-    close();
-  };
+export const DeleteEvent = observer(
+  () => {
+    const { visible, setVisible } = useActionContext();
+    const { exclude = [], cron, ...record } = useRecord();
+    const { close } = useContext(DeleteEventContext);
+    const startDate = formatDate(moment(record.__parent.__event.start));
+    const filterByTk = useFilterByTk();
+    const { resource, service, __parent } = useBlockRequestContext();
+    const [value, onChange] = useState(startDate);
+    const [loading, setLoading] = useState(false);
+    const onOk = async () => {
+      setLoading(true);
+      if (value === 'all' || !cron) {
+        await resource.destroy({
+          filterByTk,
+        });
+      } else {
+        await resource.update({
+          filterByTk,
+          values: {
+            exclude: (exclude || []).concat(value),
+          },
+        });
+      }
+      setLoading(false);
+      __parent?.service?.refresh?.();
+      service?.refresh?.();
+      setVisible?.(false, true);
+      close();
+    };
 
-  const { t } = useTranslation();
-  return createPortal(
-    <Modal
-      title={cron ? t('Delete events') : null}
-      visible={visible}
-      onCancel={() => setVisible(false)}
-      onOk={() => onOk()}
-      confirmLoading={loading}
-    >
-      {cron ? (
-        <Radio.Group value={value} onChange={(event) => onChange(event.target.value)}>
-          <Space direction="vertical">
-            <Radio value={startDate}>{t('This event')}</Radio>
-            <Radio value={`${startDate}_after`}>{t('This and following events')}</Radio>
-            <Radio value="all">{t('All events')}</Radio>
-          </Space>
-        </Radio.Group>
-      ) : (
-        <Text strong style={{ fontSize: '18px' }}>
-          {t('Delete this event?')}
-        </Text>
-      )}
-    </Modal>,
-    document.body,
-  );
-});
+    const { t } = useTranslation();
+    return createPortal(
+      <Modal
+        title={cron ? t('Delete events') : null}
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onOk={() => onOk()}
+        confirmLoading={loading}
+      >
+        {cron ? (
+          <Radio.Group value={value} onChange={(event) => onChange(event.target.value)}>
+            <Space direction="vertical">
+              <Radio value={startDate}>{t('This event')}</Radio>
+              <Radio value={`${startDate}_after`}>{t('This and following events')}</Radio>
+              <Radio value="all">{t('All events')}</Radio>
+            </Space>
+          </Radio.Group>
+        ) : (
+          <Text strong style={{ fontSize: '18px' }}>
+            {t('Delete this event?')}
+          </Text>
+        )}
+      </Modal>,
+      document.body,
+    );
+  },
+  { displayName: 'DeleteEvent' },
+);
 
 export default DeleteEvent;
diff --git a/packages/core/client/src/schema-component/antd/calendar/Event.tsx b/packages/core/client/src/schema-component/antd/calendar/Event.tsx
index 73a9f26f6..4550041ba 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Event.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Event.tsx
@@ -1,6 +1,9 @@
 import { observer } from '@formily/react';
 import React from 'react';
 
-export const Event = observer((props) => {
-  return <>{props.children}</>;
-});
+export const Event = observer(
+  (props) => {
+    return <>{props.children}</>;
+  },
+  { displayName: 'Event' },
+);
diff --git a/packages/core/client/src/schema-component/antd/calendar/Nav.tsx b/packages/core/client/src/schema-component/antd/calendar/Nav.tsx
index 4a8bd3ca3..dd2938323 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Nav.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Nav.tsx
@@ -6,14 +6,17 @@ import { navigate } from 'react-big-calendar/lib/utils/constants';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 
-export const Nav = observer((props) => {
-  const { DesignableBar } = useDesignable();
-  const { onNavigate } = useContext(CalendarToolbarContext);
-  return (
-    <div className="ant-btn-group">
-      <Button icon={<LeftOutlined />} onClick={() => onNavigate(navigate.PREVIOUS)}></Button>
-      <Button icon={<RightOutlined />} onClick={() => onNavigate(navigate.NEXT)}></Button>
-      <DesignableBar />
-    </div>
-  );
-});
+export const Nav = observer(
+  (props) => {
+    const { DesignableBar } = useDesignable();
+    const { onNavigate } = useContext(CalendarToolbarContext);
+    return (
+      <div className="ant-btn-group">
+        <Button icon={<LeftOutlined />} onClick={() => onNavigate(navigate.PREVIOUS)}></Button>
+        <Button icon={<RightOutlined />} onClick={() => onNavigate(navigate.NEXT)}></Button>
+        <DesignableBar />
+      </div>
+    );
+  },
+  { displayName: 'Nav' },
+);
diff --git a/packages/core/client/src/schema-component/antd/calendar/Title.tsx b/packages/core/client/src/schema-component/antd/calendar/Title.tsx
index 7e45128bd..a91f3e1d2 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Title.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Title.tsx
@@ -4,22 +4,25 @@ import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 import { getLunarDay } from './utils';
 
-export const Title = observer(() => {
-  const { DesignableBar } = useDesignable();
-  const { date, view, label, showLunar } = useContext(CalendarToolbarContext);
+export const Title = observer(
+  () => {
+    const { DesignableBar } = useDesignable();
+    const { date, view, label, showLunar } = useContext(CalendarToolbarContext);
 
-  const lunarElement = useMemo(() => {
-    if (!showLunar || view !== 'day') {
-      return;
-    }
-    return <span>{getLunarDay(date)}</span>;
-  }, [view, date, showLunar]);
+    const lunarElement = useMemo(() => {
+      if (!showLunar || view !== 'day') {
+        return;
+      }
+      return <span>{getLunarDay(date)}</span>;
+    }, [view, date, showLunar]);
 
-  return (
-    <div className="ant-btn-group" style={{ fontSize: '1.75em', fontWeight: 300 }}>
-      <span>{label}</span>
-      <span style={{ marginLeft: '4px' }}>{lunarElement}</span>
-      <DesignableBar />
-    </div>
-  );
-});
+    return (
+      <div className="ant-btn-group" style={{ fontSize: '1.75em', fontWeight: 300 }}>
+        <span>{label}</span>
+        <span style={{ marginLeft: '4px' }}>{lunarElement}</span>
+        <DesignableBar />
+      </div>
+    );
+  },
+  { displayName: 'Title' },
+);
diff --git a/packages/core/client/src/schema-component/antd/calendar/Today.tsx b/packages/core/client/src/schema-component/antd/calendar/Today.tsx
index dd8804f7b..a8fa40355 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Today.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Today.tsx
@@ -6,18 +6,21 @@ import { useTranslation } from 'react-i18next';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 
-export const Today = observer((props) => {
-  const { DesignableBar } = useDesignable();
-  const { onNavigate } = useContext(CalendarToolbarContext);
-  const { t } = useTranslation();
-  return (
-    <Button
-      onClick={() => {
-        onNavigate(navigate.TODAY);
-      }}
-    >
-      {t('Today')}
-      <DesignableBar />
-    </Button>
-  );
-});
+export const Today = observer(
+  (props) => {
+    const { DesignableBar } = useDesignable();
+    const { onNavigate } = useContext(CalendarToolbarContext);
+    const { t } = useTranslation();
+    return (
+      <Button
+        onClick={() => {
+          onNavigate(navigate.TODAY);
+        }}
+      >
+        {t('Today')}
+        <DesignableBar />
+      </Button>
+    );
+  },
+  { displayName: 'Today' },
+);
diff --git a/packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx b/packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx
index 027ea36e3..afcda564e 100644
--- a/packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx
@@ -4,22 +4,25 @@ import React, { useContext } from 'react';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 
-export const ViewSelect = observer((props) => {
-  const { DesignableBar } = useDesignable();
-  const {
-    views,
-    view,
-    onView,
-    localizer: { messages },
-  } = useContext(CalendarToolbarContext);
-  return (
-    <div className="ant-btn-group">
-      <Select value={view} onChange={onView}>
-        {views.map((name) => (
-          <Select.Option value={name}>{messages[name]}</Select.Option>
-        ))}
-      </Select>
-      <DesignableBar />
-    </div>
-  );
-});
+export const ViewSelect = observer(
+  (props) => {
+    const { DesignableBar } = useDesignable();
+    const {
+      views,
+      view,
+      onView,
+      localizer: { messages },
+    } = useContext(CalendarToolbarContext);
+    return (
+      <div className="ant-btn-group">
+        <Select value={view} onChange={onView}>
+          {views.map((name) => (
+            <Select.Option value={name}>{messages[name]}</Select.Option>
+          ))}
+        </Select>
+        <DesignableBar />
+      </div>
+    );
+  },
+  { displayName: 'ViewSelect' },
+);
diff --git a/packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx b/packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx
index 3a3dadead..de529c445 100644
--- a/packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx
@@ -58,6 +58,6 @@ export const CollectionSelect = connect(
           ))}
         </div>
       );
-    }),
+    }, { displayName: 'CollectionSelectObserver' }),
   ),
 );
diff --git a/packages/core/client/src/schema-component/antd/filter/Filter.tsx b/packages/core/client/src/schema-component/antd/filter/Filter.tsx
index 245f283a5..db3af32fb 100644
--- a/packages/core/client/src/schema-component/antd/filter/Filter.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/Filter.tsx
@@ -15,35 +15,38 @@ const useDef = (options) => {
   return useRequest(() => Promise.resolve({ data: field.dataSource }), options);
 };
 
-export const Filter: any = observer((props: any) => {
-  const { useDataSource = useDef } = props;
-  const { options, dynamicComponent, className } = useProps(props);
-  const field = useField<ObjectFieldModel>();
-  const fieldSchema = useFieldSchema();
-  useDataSource({
-    onSuccess(data) {
-      field.dataSource = data?.data || [];
-    },
-  });
-  return (
-    <div className={className}>
-      <DatePickerProvider value={{ utc: false }}>
-        <FilterContext.Provider
-          value={{
-            field,
-            fieldSchema,
-            dynamicComponent,
-            options: options || field.dataSource || [],
-            disabled: props.disabled,
-          }}
-        >
-          <FilterGroup {...props} bordered={false} />
-          {/* <pre>{JSON.stringify(field.value, null, 2)}</pre> */}
-        </FilterContext.Provider>
-      </DatePickerProvider>
-    </div>
-  );
-});
+export const Filter: any = observer(
+  (props: any) => {
+    const { useDataSource = useDef } = props;
+    const { options, dynamicComponent, className } = useProps(props);
+    const field = useField<ObjectFieldModel>();
+    const fieldSchema = useFieldSchema();
+    useDataSource({
+      onSuccess(data) {
+        field.dataSource = data?.data || [];
+      },
+    });
+    return (
+      <div className={className}>
+        <DatePickerProvider value={{ utc: false }}>
+          <FilterContext.Provider
+            value={{
+              field,
+              fieldSchema,
+              dynamicComponent,
+              options: options || field.dataSource || [],
+              disabled: props.disabled,
+            }}
+          >
+            <FilterGroup {...props} bordered={false} />
+            {/* <pre>{JSON.stringify(field.value, null, 2)}</pre> */}
+          </FilterContext.Provider>
+        </DatePickerProvider>
+      </div>
+    );
+  },
+  { displayName: 'Filter' },
+);
 
 Filter.SaveDefaultValue = SaveDefaultValue;
 
diff --git a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
index 27623159e..c55432f24 100644
--- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
@@ -11,83 +11,86 @@ import { Action } from '../action';
 
 export const FilterActionContext = createContext<any>(null);
 
-export const FilterAction = observer((props: any) => {
-  const { t } = useTranslation();
-  const field = useField<Field>();
-  const [visible, setVisible] = useState(false);
-  const { designable, dn } = useDesignable();
-  const fieldSchema = useFieldSchema();
-  const form = useMemo<Form>(() => props.form || createForm(), []);
-  const { options, onSubmit, onReset, ...others } = useProps(props);
-  return (
-    <FilterActionContext.Provider value={{ field, fieldSchema, designable, dn }}>
-      <Popover
-        destroyTooltipOnHide
-        placement={'bottomLeft'}
-        open={visible}
-        onOpenChange={(visible) => {
-          setVisible(visible);
-        }}
-        trigger={'click'}
-        content={
-          <form>
-            <FormProvider form={form}>
-              <SchemaComponent
-                schema={{
-                  type: 'object',
-                  properties: {
-                    filter: {
-                      type: 'string',
-                      enum: options || field.dataSource,
-                      default: fieldSchema.default,
-                      'x-component': 'Filter',
-                      'x-component-props': {},
+export const FilterAction = observer(
+  (props: any) => {
+    const { t } = useTranslation();
+    const field = useField<Field>();
+    const [visible, setVisible] = useState(false);
+    const { designable, dn } = useDesignable();
+    const fieldSchema = useFieldSchema();
+    const form = useMemo<Form>(() => props.form || createForm(), []);
+    const { options, onSubmit, onReset, ...others } = useProps(props);
+    return (
+      <FilterActionContext.Provider value={{ field, fieldSchema, designable, dn }}>
+        <Popover
+          destroyTooltipOnHide
+          placement={'bottomLeft'}
+          open={visible}
+          onOpenChange={(visible) => {
+            setVisible(visible);
+          }}
+          trigger={'click'}
+          content={
+            <form>
+              <FormProvider form={form}>
+                <SchemaComponent
+                  schema={{
+                    type: 'object',
+                    properties: {
+                      filter: {
+                        type: 'string',
+                        enum: options || field.dataSource,
+                        default: fieldSchema.default,
+                        'x-component': 'Filter',
+                        'x-component-props': {},
+                      },
                     },
-                  },
-                }}
-              />
-              <div
-                className={css`
-                  display: flex;
-                  justify-content: flex-end;
-                  width: 100%;
-                `}
-              >
-                <Space>
-                  <SaveConditions />
-                  <Button
-                    onClick={async () => {
-                      await form.reset();
-                      onReset?.(form.values);
-                      field.title = t('Filter');
-                      setVisible(false);
-                    }}
-                  >
-                    {t('Reset')}
-                  </Button>
-                  <Button
-                    type={'primary'}
-                    htmlType={'submit'}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onSubmit?.(form.values);
-                      setVisible(false);
-                    }}
-                  >
-                    {t('Submit')}
-                  </Button>
-                </Space>
-              </div>
-            </FormProvider>
-          </form>
-        }
-      >
-        <Action {...others} title={field.title} />
-      </Popover>
-    </FilterActionContext.Provider>
-  );
-});
+                  }}
+                />
+                <div
+                  className={css`
+                    display: flex;
+                    justify-content: flex-end;
+                    width: 100%;
+                  `}
+                >
+                  <Space>
+                    <SaveConditions />
+                    <Button
+                      onClick={async () => {
+                        await form.reset();
+                        onReset?.(form.values);
+                        field.title = t('Filter');
+                        setVisible(false);
+                      }}
+                    >
+                      {t('Reset')}
+                    </Button>
+                    <Button
+                      type={'primary'}
+                      htmlType={'submit'}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onSubmit?.(form.values);
+                        setVisible(false);
+                      }}
+                    >
+                      {t('Submit')}
+                    </Button>
+                  </Space>
+                </div>
+              </FormProvider>
+            </form>
+          }
+        >
+          <Action {...others} title={field.title} />
+        </Popover>
+      </FilterActionContext.Provider>
+    );
+  },
+  { displayName: 'FilterAction' },
+);
 
 const SaveConditions = () => {
   const { fieldSchema, field, designable, dn } = useContext(FilterActionContext);
diff --git a/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx b/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx
index 8f10a6a95..de1ba7066 100644
--- a/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx
@@ -9,56 +9,59 @@ import { RemoveConditionContext } from './context';
 import { DynamicComponent } from './DynamicComponent';
 import { useValues } from './useValues';
 
-export const FilterItem = observer((props: any) => {
-  const { t } = useTranslation();
-  const compile = useCompile();
-  const remove = useContext(RemoveConditionContext);
-  const { schema, fields, operators, dataIndex, operator, setDataIndex, setOperator, value, setValue } = useValues();
-  return (
-    <div style={{ marginBottom: 8 }}>
-      <Space>
-        <Cascader
-          className={css`
-            width: 160px;
-          `}
-          fieldNames={{
-            label: 'title',
-            value: 'name',
-            children: 'children',
-          }}
-          changeOnSelect={false}
-          value={dataIndex}
-          options={compile(fields)}
-          onChange={(value) => {
-            setDataIndex(value);
-          }}
-          placeholder={t('Select Field')}
-        />
-        <Select
-          className={css`
-            min-width: 110px;
-          `}
-          value={operator?.value}
-          options={compile(operators)}
-          onChange={(value) => {
-            setOperator(value);
-          }}
-          placeholder={t('Comparision')}
-        />
-        {!operator?.noValue &&
-          React.createElement(DynamicComponent, {
-            value: value ? value : undefined,
-            schema,
-            onChange(value) {
-              setValue(value);
-            },
-          })}
-        {!props.disabled && (
-          <a>
-            <CloseCircleOutlined onClick={() => remove()} style={{ color: '#bfbfbf' }} />
-          </a>
-        )}
-      </Space>
-    </div>
-  );
-});
+export const FilterItem = observer(
+  (props: any) => {
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const remove = useContext(RemoveConditionContext);
+    const { schema, fields, operators, dataIndex, operator, setDataIndex, setOperator, value, setValue } = useValues();
+    return (
+      <div style={{ marginBottom: 8 }}>
+        <Space>
+          <Cascader
+            className={css`
+              width: 160px;
+            `}
+            fieldNames={{
+              label: 'title',
+              value: 'name',
+              children: 'children',
+            }}
+            changeOnSelect={false}
+            value={dataIndex}
+            options={compile(fields)}
+            onChange={(value) => {
+              setDataIndex(value);
+            }}
+            placeholder={t('Select Field')}
+          />
+          <Select
+            className={css`
+              min-width: 110px;
+            `}
+            value={operator?.value}
+            options={compile(operators)}
+            onChange={(value) => {
+              setOperator(value);
+            }}
+            placeholder={t('Comparision')}
+          />
+          {!operator?.noValue &&
+            React.createElement(DynamicComponent, {
+              value: value ? value : undefined,
+              schema,
+              onChange(value) {
+                setValue(value);
+              },
+            })}
+          {!props.disabled && (
+            <a>
+              <CloseCircleOutlined onClick={() => remove()} style={{ color: '#bfbfbf' }} />
+            </a>
+          )}
+        </Space>
+      </div>
+    );
+  },
+  { displayName: 'FilterItem' },
+);
diff --git a/packages/core/client/src/schema-component/antd/filter/FilterItems.tsx b/packages/core/client/src/schema-component/antd/filter/FilterItems.tsx
index c6064b0a1..8fbd15c1f 100644
--- a/packages/core/client/src/schema-component/antd/filter/FilterItems.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterItems.tsx
@@ -5,17 +5,20 @@ import { RemoveConditionContext } from './context';
 import { FilterGroup } from './FilterGroup';
 import { FilterItem } from './FilterItem';
 
-export const FilterItems = observer((props) => {
-  const field = useField<ArrayFieldModel>();
-  return (
-    <div>
-      {field?.value?.map((item, index) => {
-        return (
-          <RemoveConditionContext.Provider key={index} value={() => field.remove(index)}>
-            <ObjectField name={index} component={[item.$and || item.$or ? FilterGroup : FilterItem]} />
-          </RemoveConditionContext.Provider>
-        );
-      })}
-    </div>
-  );
-});
+export const FilterItems = observer(
+  (props) => {
+    const field = useField<ArrayFieldModel>();
+    return (
+      <div>
+        {field?.value?.map((item, index) => {
+          return (
+            <RemoveConditionContext.Provider key={index} value={() => field.remove(index)}>
+              <ObjectField name={index} component={[item.$and || item.$or ? FilterGroup : FilterItem]} />
+            </RemoveConditionContext.Provider>
+          );
+        })}
+      </div>
+    );
+  },
+  { displayName: 'FilterItems' },
+);
diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
index e4d3380be..3de16bb96 100644
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@@ -53,61 +53,64 @@ const divWrap = (schema: ISchema) => {
   };
 };
 
-export const FormItem: any = observer((props: any) => {
-  useEnsureOperatorsValid();
+export const FormItem: any = observer(
+  (props: any) => {
+    useEnsureOperatorsValid();
 
-  const field = useField<Field>();
-  const ctx = useContext(BlockRequestContext);
-  const schema = useFieldSchema();
-  const variablesCtx = useVariablesCtx();
+    const field = useField<Field>();
+    const ctx = useContext(BlockRequestContext);
+    const schema = useFieldSchema();
+    const variablesCtx = useVariablesCtx();
 
-  useEffect(() => {
-    if (ctx?.block === 'form') {
-      ctx.field.data = ctx.field.data || {};
-      ctx.field.data.activeFields = ctx.field.data.activeFields || new Set();
-      ctx.field.data.activeFields.add(schema.name);
-      // 如果默认值是一个变量，则需要解析之后再显示出来
-      if (isVariable(schema?.default)) {
-        field.setInitialValue?.(parseVariables(schema.default, variablesCtx));
+    useEffect(() => {
+      if (ctx?.block === 'form') {
+        ctx.field.data = ctx.field.data || {};
+        ctx.field.data.activeFields = ctx.field.data.activeFields || new Set();
+        ctx.field.data.activeFields.add(schema.name);
+        // 如果默认值是一个变量，则需要解析之后再显示出来
+        if (isVariable(schema?.default)) {
+          field.setInitialValue?.(parseVariables(schema.default, variablesCtx));
+        }
       }
-    }
-  }, []);
-  const showTitle = schema['x-decorator-props']?.showTitle ?? true;
-  return (
-    <ACLCollectionFieldProvider>
-      <BlockItem className={'nb-form-item'}>
-        <Item
-          className={cx(
-            css`
-              & .ant-space {
-                flex-wrap: wrap;
-              }
-            `,
-            {
-              [css`
-                > .ant-formily-item-label {
-                  display: none;
+    }, []);
+    const showTitle = schema['x-decorator-props']?.showTitle ?? true;
+    return (
+      <ACLCollectionFieldProvider>
+        <BlockItem className={'nb-form-item'}>
+          <Item
+            className={cx(
+              css`
+                & .ant-space {
+                  flex-wrap: wrap;
                 }
-              `]: showTitle === false,
-            },
-          )}
-          {...props}
-          extra={
-            typeof field.description === 'string' ? (
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: HTMLEncode(field.description).split('\n').join('<br/>'),
-                }}
-              />
-            ) : (
-              field.description
-            )
-          }
-        />
-      </BlockItem>
-    </ACLCollectionFieldProvider>
-  );
-});
+              `,
+              {
+                [css`
+                  > .ant-formily-item-label {
+                    display: none;
+                  }
+                `]: showTitle === false,
+              },
+            )}
+            {...props}
+            extra={
+              typeof field.description === 'string' ? (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: HTMLEncode(field.description).split('\n').join('<br/>'),
+                  }}
+                />
+              ) : (
+                field.description
+              )
+            }
+          />
+        </BlockItem>
+      </ACLCollectionFieldProvider>
+    );
+  },
+  { displayName: 'FormItem' },
+);
 
 FormItem.Designer = function Designer() {
   const { getCollectionFields, getInterface, getCollectionJoinField, getCollection } = useCollectionManager();
diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
index 992b4bd2a..0a3023d7f 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
@@ -170,21 +170,24 @@ export const Form: React.FC<FormProps> & {
   FilterDesigner?: any;
   ReadPrettyDesigner?: any;
   Templates?: any;
-} = observer((props) => {
-  const field = useField<Field>();
-  const { form, disabled, ...others } = useProps(props);
-  const formDisabled = disabled || field.disabled;
-  return (
-    <ConfigProvider componentDisabled={formDisabled}>
-      <form>
-        <Spin spinning={field.loading || false}>
-          {form ? (
-            <WithForm form={form} {...others} disabled={formDisabled} />
-          ) : (
-            <WithoutForm {...others} disabled={formDisabled} />
-          )}
-        </Spin>
-      </form>
-    </ConfigProvider>
-  );
-});
+} = observer(
+  (props) => {
+    const field = useField<Field>();
+    const { form, disabled, ...others } = useProps(props);
+    const formDisabled = disabled || field.disabled;
+    return (
+      <ConfigProvider componentDisabled={formDisabled}>
+        <form>
+          <Spin spinning={field.loading || false}>
+            {form ? (
+              <WithForm form={form} {...others} disabled={formDisabled} />
+            ) : (
+              <WithoutForm {...others} disabled={formDisabled} />
+            )}
+          </Spin>
+        </form>
+      </ConfigProvider>
+    );
+  },
+  { displayName: 'Form' },
+);
diff --git a/packages/core/client/src/schema-component/antd/form-v2/FormField.tsx b/packages/core/client/src/schema-component/antd/form-v2/FormField.tsx
index 547e39881..bc217feea 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/FormField.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/FormField.tsx
@@ -4,21 +4,24 @@ import { useFormBlockContext } from '../../../block-provider';
 import { useCollection } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 
-export const FormField: any = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  const { getField } = useCollection();
-  const field = useField();
-  const collectionField = getField(fieldSchema.name);
-  const compile = useCompile();
-  const ctx = useFormBlockContext();
-  useEffect(() => {
-    if (!field.title) {
-      field.title = compile(collectionField?.uiSchema?.title);
-    }
-    if (ctx?.field) {
-      ctx.field.added = ctx.field.added || new Set();
-      ctx.field.added.add(fieldSchema.name);
-    }
-  }, []);
-  return <div>{props.children}</div>;
-});
+export const FormField: any = observer(
+  (props) => {
+    const fieldSchema = useFieldSchema();
+    const { getField } = useCollection();
+    const field = useField();
+    const collectionField = getField(fieldSchema.name);
+    const compile = useCompile();
+    const ctx = useFormBlockContext();
+    useEffect(() => {
+      if (!field.title) {
+        field.title = compile(collectionField?.uiSchema?.title);
+      }
+      if (ctx?.field) {
+        ctx.field.added = ctx.field.added || new Set();
+        ctx.field.added.add(fieldSchema.name);
+      }
+    }, []);
+    return <div>{props.children}</div>;
+  },
+  { displayName: 'FormField' },
+);
diff --git a/packages/core/client/src/schema-component/antd/form/Form.tsx b/packages/core/client/src/schema-component/antd/form/Form.tsx
index 9991f6fae..2a6133a4d 100644
--- a/packages/core/client/src/schema-component/antd/form/Form.tsx
+++ b/packages/core/client/src/schema-component/antd/form/Form.tsx
@@ -83,34 +83,37 @@ const useDefaultValues = (opts: any = {}, props: FormProps = {}) => {
 
 const FormBlockContext = createContext<any>(null);
 
-export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) => {
-  const { request, effects, initialValue, useValues = useDefaultValues, ...others } = props;
-  const fieldSchema = useFieldSchema();
-  const field = useField();
-  const form = useMemo(() => createForm({ effects }), []);
-  const result = useValues(
-    {
-      uid: fieldSchema['x-uid'],
-      async onSuccess(data) {
-        await form.reset();
-        form.setValues(data?.data);
+export const Form: React.FC<FormProps> & { Designer?: any } = observer(
+  (props) => {
+    const { request, effects, initialValue, useValues = useDefaultValues, ...others } = props;
+    const fieldSchema = useFieldSchema();
+    const field = useField();
+    const form = useMemo(() => createForm({ effects }), []);
+    const result = useValues(
+      {
+        uid: fieldSchema['x-uid'],
+        async onSuccess(data) {
+          await form.reset();
+          form.setValues(data?.data);
+        },
       },
-    },
-    props,
-  );
-  const parent = useContext(FormBlockContext);
-  return (
-    <FormBlockContext.Provider value={{ parent, form, result, field, fieldSchema }}>
-      <Spin spinning={result?.loading || false}>
-        {fieldSchema['x-decorator'] === 'Form' ? (
-          <FormDecorator form={form} {...others} />
-        ) : (
-          <FormComponent form={form} {...others} />
-        )}
-      </Spin>
-    </FormBlockContext.Provider>
-  );
-});
+      props,
+    );
+    const parent = useContext(FormBlockContext);
+    return (
+      <FormBlockContext.Provider value={{ parent, form, result, field, fieldSchema }}>
+        <Spin spinning={result?.loading || false}>
+          {fieldSchema['x-decorator'] === 'Form' ? (
+            <FormDecorator form={form} {...others} />
+          ) : (
+            <FormComponent form={form} {...others} />
+          )}
+        </Spin>
+      </FormBlockContext.Provider>
+    );
+  },
+  { displayName: 'Form' },
+);
 
 Form.Designer = () => {
   const { name, title } = useCollection();
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx
index 9eab608bc..5b2778de4 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx
@@ -49,10 +49,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+  const Output = observer(
+    () => {
+      const form = useForm();
+      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+    },
+    { displayName: 'Output' },
+  );
 
   return (
     <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx
index 5f1f243aa..5107888bd 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx
@@ -38,10 +38,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+  const Output = observer(
+    () => {
+      const form = useForm();
+      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx
index 87cf4589f..935390c0d 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx
@@ -38,10 +38,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+  const Output = observer(
+    () => {
+      const form = useForm();
+      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx
index 904fbac89..7849eb7f3 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx
@@ -54,10 +54,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+  const Output = observer(
+    () => {
+      const form = useForm();
+      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+    },
+    { displayName: 'Output' },
+  );
 
   return (
     <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx
index c7494e0d4..83bc545f4 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx
@@ -69,10 +69,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+  const Output = observer(
+    () => {
+      const form = useForm();
+      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx
index 3e44e1ae9..bd664dfaf 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx
@@ -39,10 +39,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
-    const form = useForm();
-    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+  const Output = observer(
+    () => {
+      const form = useForm();
+      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();
diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx
index bba9db056..f695eccf1 100644
--- a/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx
+++ b/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx
@@ -36,10 +36,13 @@ const schema: ISchema = {
   },
 };
 
-const Output = observer(() => {
-  const form = useForm();
-  return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-});
+const Output = observer(
+  () => {
+    const form = useForm();
+    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+  },
+  { displayName: 'Output' },
+);
 
 const useSubmit = () => {
   const form = useForm();
diff --git a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx b/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
index 9cd945680..6453837f0 100644
--- a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
+++ b/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
@@ -127,51 +127,54 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
   return <div className={cls(['g2plot', className])} ref={containerRef} />;
 });
 
-export const G2Plot: any = observer((props: any) => {
-  const { plot, config } = props;
-  const field = useField<Field>();
-  const { t } = useTranslation();
-  const api = useAPIClient();
-  useEffect(() => {
-    field.data = field.data || {};
-    field.data.loading = true;
-    const fn = config?.data;
-    if (typeof fn === 'function') {
-      const result = fn.bind({ api })();
-      if (result?.then) {
-        result.then((data) => {
-          if (Array.isArray(data)) {
-            field.componentProps.config.data = data;
-          }
+export const G2Plot: any = observer(
+  (props: any) => {
+    const { plot, config } = props;
+    const field = useField<Field>();
+    const { t } = useTranslation();
+    const api = useAPIClient();
+    useEffect(() => {
+      field.data = field.data || {};
+      field.data.loading = true;
+      const fn = config?.data;
+      if (typeof fn === 'function') {
+        const result = fn.bind({ api })();
+        if (result?.then) {
+          result.then((data) => {
+            if (Array.isArray(data)) {
+              field.componentProps.config.data = data;
+            }
+            field.data.loading = false;
+          });
+        } else {
           field.data.loading = false;
-        });
+        }
       } else {
         field.data.loading = false;
       }
-    } else {
-      field.data.loading = false;
-    }
-  }, []);
+    }, []);
 
-  if (!plot || !config) {
-    return <div style={{ opacity: 0.3 }}>{t('In configuration')}...</div>;
-  }
-  if (field?.data?.loading !== false) {
-    return <Spin />;
-  }
-  return (
-    <div>
-      {field.title && <h2>{field.title}</h2>}
-      <G2PlotRenderer
-        plot={plots[plot]}
-        config={{
-          ...config,
-          data: Array.isArray(config?.data) ? config.data : [],
-        }}
-      />
-    </div>
-  );
-});
+    if (!plot || !config) {
+      return <div style={{ opacity: 0.3 }}>{t('In configuration')}...</div>;
+    }
+    if (field?.data?.loading !== false) {
+      return <Spin />;
+    }
+    return (
+      <div>
+        {field.title && <h2>{field.title}</h2>}
+        <G2PlotRenderer
+          plot={plots[plot]}
+          config={{
+            ...config,
+            data: Array.isArray(config?.data) ? config.data : [],
+          }}
+        />
+      </div>
+    );
+  },
+  { displayName: 'G2Plot' },
+);
 
 G2Plot.Designer = G2PlotDesigner;
 G2Plot.plots = plots;
diff --git a/packages/core/client/src/schema-component/antd/gantt/components/gantt/Event.tsx b/packages/core/client/src/schema-component/antd/gantt/components/gantt/Event.tsx
index 73a9f26f6..4550041ba 100644
--- a/packages/core/client/src/schema-component/antd/gantt/components/gantt/Event.tsx
+++ b/packages/core/client/src/schema-component/antd/gantt/components/gantt/Event.tsx
@@ -1,6 +1,9 @@
 import { observer } from '@formily/react';
 import React from 'react';
 
-export const Event = observer((props) => {
-  return <>{props.children}</>;
-});
+export const Event = observer(
+  (props) => {
+    return <>{props.children}</>;
+  },
+  { displayName: 'Event' },
+);
diff --git a/packages/core/client/src/schema-component/antd/grid/Block.tsx b/packages/core/client/src/schema-component/antd/grid/Block.tsx
index 210bc4905..410c77a56 100644
--- a/packages/core/client/src/schema-component/antd/grid/Block.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Block.tsx
@@ -2,12 +2,15 @@ import { observer, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { DragHandler } from '../../';
 
-export const Block = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
-      Block {fieldSchema.title}
-      <DragHandler />
-    </div>
-  );
-});
+export const Block = observer(
+  (props) => {
+    const fieldSchema = useFieldSchema();
+    return (
+      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
+        Block {fieldSchema.title}
+        <DragHandler />
+      </div>
+    );
+  },
+  { displayName: 'Block' },
+);
diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
index 049b96ccc..abc4594b4 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -330,45 +330,108 @@ export const useGridRowContext = () => {
   return useContext(GridRowContext);
 };
 
-export const Grid: any = observer((props: any) => {
-  const gridRef = useRef(null);
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const { render, InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
-  const addr = field.address.toString();
-  const rows = useRowProperties();
-  const { setPrintContent } = useFormBlockContext();
+export const Grid: any = observer(
+  (props: any) => {
+    const gridRef = useRef(null);
+    const field = useField();
+    const fieldSchema = useFieldSchema();
+    const { render, InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
+    const addr = field.address.toString();
+    const rows = useRowProperties();
+    const { setPrintContent } = useFormBlockContext();
 
-  useEffect(() => {
-    gridRef.current && setPrintContent?.(gridRef.current);
-  }, [gridRef.current]);
+    useEffect(() => {
+      gridRef.current && setPrintContent?.(gridRef.current);
+    }, [gridRef.current]);
 
-  return (
-    <GridContext.Provider value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}>
-      <div className={'nb-grid'} style={{ position: 'relative' }} ref={gridRef}>
-        <DndWrapper dndContext={props.dndContext}>
-          <RowDivider
-            rows={rows}
+    return (
+      <GridContext.Provider
+        value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}
+      >
+        <div className={'nb-grid'} style={{ position: 'relative' }} ref={gridRef}>
+          <DndWrapper dndContext={props.dndContext}>
+            <RowDivider
+              rows={rows}
+              first
+              id={`${addr}_0`}
+              data={{
+                breakRemoveOn: breakRemoveOnGrid,
+                wrapSchema: wrapRowSchema,
+                insertAdjacent: 'afterBegin',
+                schema: fieldSchema,
+              }}
+            />
+            {rows.map((schema, index) => {
+              return (
+                <React.Fragment key={index}>
+                  <RecursionField name={schema.name} schema={schema} />
+                  <RowDivider
+                    rows={rows}
+                    index={index}
+                    id={`${addr}_${index + 1}`}
+                    data={{
+                      breakRemoveOn: breakRemoveOnGrid,
+                      wrapSchema: wrapRowSchema,
+                      insertAdjacent: 'afterEnd',
+                      schema,
+                    }}
+                  />
+                </React.Fragment>
+              );
+            })}
+          </DndWrapper>
+          <InitializerComponent />
+        </div>
+      </GridContext.Provider>
+    );
+  },
+  { displayName: 'Grid' },
+);
+
+Grid.Row = observer(
+  () => {
+    const field = useField();
+    const fieldSchema = useFieldSchema();
+    const addr = field.address.toString();
+    const cols = useColProperties();
+
+    return (
+      <GridRowContext.Provider value={{ schema: fieldSchema, cols }}>
+        <div
+          className={cls(
+            'nb-grid-row',
+            css`
+              overflow-x: hidden;
+              margin: 0 calc(-1 * var(--nb-spacing));
+              display: flex;
+              position: relative;
+              /* z-index: 0; */
+            `,
+          )}
+        >
+          <ColDivider
+            cols={cols}
             first
             id={`${addr}_0`}
             data={{
-              breakRemoveOn: breakRemoveOnGrid,
-              wrapSchema: wrapRowSchema,
+              breakRemoveOn: breakRemoveOnRow,
+              wrapSchema: wrapColSchema,
               insertAdjacent: 'afterBegin',
               schema: fieldSchema,
             }}
           />
-          {rows.map((schema, index) => {
+          {cols.map((schema, index) => {
             return (
               <React.Fragment key={index}>
                 <RecursionField name={schema.name} schema={schema} />
-                <RowDivider
-                  rows={rows}
+                <ColDivider
+                  cols={cols}
                   index={index}
+                  last={index === cols.length - 1}
                   id={`${addr}_${index + 1}`}
                   data={{
-                    breakRemoveOn: breakRemoveOnGrid,
-                    wrapSchema: wrapRowSchema,
+                    breakRemoveOn: breakRemoveOnRow,
+                    wrapSchema: wrapColSchema,
                     insertAdjacent: 'afterEnd',
                     schema,
                   }}
@@ -376,95 +439,43 @@ export const Grid: any = observer((props: any) => {
               </React.Fragment>
             );
           })}
-        </DndWrapper>
-        <InitializerComponent />
-      </div>
-    </GridContext.Provider>
-  );
-});
+        </div>
+      </GridRowContext.Provider>
+    );
+  },
+  { displayName: 'Grid.Row' },
+);
 
-Grid.Row = observer(() => {
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const addr = field.address.toString();
-  const cols = useColProperties();
+Grid.Col = observer(
+  (props: any) => {
+    const { cols = [] } = useContext(GridRowContext);
+    const schema = useFieldSchema();
+    const field = useField();
 
-  return (
-    <GridRowContext.Provider value={{ schema: fieldSchema, cols }}>
-      <div
-        className={cls(
-          'nb-grid-row',
-          css`
-            overflow-x: hidden;
-            margin: 0 calc(-1 * var(--nb-spacing));
-            display: flex;
-            position: relative;
-            /* z-index: 0; */
-          `,
-        )}
-      >
-        <ColDivider
-          cols={cols}
-          first
-          id={`${addr}_0`}
-          data={{
-            breakRemoveOn: breakRemoveOnRow,
-            wrapSchema: wrapColSchema,
-            insertAdjacent: 'afterBegin',
-            schema: fieldSchema,
-          }}
-        />
-        {cols.map((schema, index) => {
-          return (
-            <React.Fragment key={index}>
-              <RecursionField name={schema.name} schema={schema} />
-              <ColDivider
-                cols={cols}
-                index={index}
-                last={index === cols.length - 1}
-                id={`${addr}_${index + 1}`}
-                data={{
-                  breakRemoveOn: breakRemoveOnRow,
-                  wrapSchema: wrapColSchema,
-                  insertAdjacent: 'afterEnd',
-                  schema,
-                }}
-              />
-            </React.Fragment>
-          );
-        })}
-      </div>
-    </GridRowContext.Provider>
-  );
-});
+    const width = useMemo(() => {
+      let width = '';
+      if (cols?.length) {
+        const w = schema?.['x-component-props']?.['width'] || 100 / cols.length;
+        width = `calc(${w}% - var(--nb-spacing) *  ${(cols.length + 1) / cols.length})`;
+      }
+      return width;
+    }, [cols?.length, schema?.['x-component-props']?.['width']]);
 
-Grid.Col = observer((props: any) => {
-  const { cols = [] } = useContext(GridRowContext);
-  const schema = useFieldSchema();
-  const field = useField();
-
-  const width = useMemo(() => {
-    let width = '';
-    if (cols?.length) {
-      const w = schema?.['x-component-props']?.['width'] || 100 / cols.length;
-      width = `calc(${w}% - var(--nb-spacing) *  ${(cols.length + 1) / cols.length})`;
-    }
-    return width;
-  }, [cols?.length, schema?.['x-component-props']?.['width']]);
-
-  const { setNodeRef } = useDroppable({
-    id: field.address.toString(),
-    data: {
-      insertAdjacent: 'beforeEnd',
-      schema,
-      wrapSchema: (s) => s,
-    },
-  });
-  return (
-    <GridColContext.Provider value={{ cols, schema }}>
-      <div ref={setNodeRef} style={{ width }} className={cls('nb-grid-col')}>
-        {props.children}
-      </div>
-    </GridColContext.Provider>
-  );
-});
+    const { setNodeRef } = useDroppable({
+      id: field.address.toString(),
+      data: {
+        insertAdjacent: 'beforeEnd',
+        schema,
+        wrapSchema: (s) => s,
+      },
+    });
+    return (
+      <GridColContext.Provider value={{ cols, schema }}>
+        <div ref={setNodeRef} style={{ width }} className={cls('nb-grid-col')}>
+          {props.children}
+        </div>
+      </GridColContext.Provider>
+    );
+  },
+  { displayName: 'Grid.Col' },
+);
diff --git a/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx
index 1fc91654b..9d89b1a48 100644
--- a/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx
@@ -2,15 +2,18 @@ import { observer, useFieldSchema } from '@formily/react';
 import { BlockItem, DragHandler, Grid, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import React from 'react';
 
-const Block = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
-      Block {fieldSchema.title}
-      <DragHandler />
-    </div>
-  );
-});
+const Block = observer(
+  (props) => {
+    const fieldSchema = useFieldSchema();
+    return (
+      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
+        Block {fieldSchema.title}
+        <DragHandler />
+      </div>
+    );
+  },
+  { displayName: 'Block' },
+);
 
 const schema = {
   _isJSONSchemaObject: true,
diff --git a/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx b/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx
index a82183b05..1825ee360 100644
--- a/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx
+++ b/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx
@@ -10,98 +10,101 @@ import { RecordProvider } from '../../../record-provider';
 import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
 import { KanbanCardContext } from './context';
 
-export const KanbanCard: any = observer((props: any) => {
-  const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
-    useContext(KanbanCardContext);
-  const fieldSchema = useFieldSchema();
-  const [visible, setVisible] = useState(false);
-  const labelDisabled = fieldSchema['x-label-disabled'];
+export const KanbanCard: any = observer(
+  (props: any) => {
+    const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
+      useContext(KanbanCardContext);
+    const fieldSchema = useFieldSchema();
+    const [visible, setVisible] = useState(false);
+    const labelDisabled = fieldSchema['x-label-disabled'];
 
-  return (
-    <SchemaComponentOptions components={{}} scope={{}}>
-      <Card
-        onClick={(e) => {
-          setVisible(true);
-        }}
-        bordered={false}
-        hoverable
-        style={{ cursor: 'pointer', overflow: 'hidden' }}
-        // bodyStyle={{ paddingBottom: 0 }}
-        className={cls(
-          css`
-            .ant-card-body {
-              padding: 16px;
-            }
-            .nb-row-divider {
-              height: 16px;
-              margin-top: -16px;
-              &:last-child {
-                margin-top: 0;
+    return (
+      <SchemaComponentOptions components={{}} scope={{}}>
+        <Card
+          onClick={(e) => {
+            setVisible(true);
+          }}
+          bordered={false}
+          hoverable
+          style={{ cursor: 'pointer', overflow: 'hidden' }}
+          // bodyStyle={{ paddingBottom: 0 }}
+          className={cls(
+            css`
+              .ant-card-body {
+                padding: 16px;
               }
-            }
-            .ant-description-input {
-              text-overflow: ellipsis;
-              width: 100%;
-              overflow: hidden;
-            }
-            .ant-description-textarea {
-              text-overflow: ellipsis;
-              width: 100%;
-              overflow: hidden;
-            }
-            .ant-formily-item {
-              margin-bottom: 12px;
-            }
-            .nb-grid-row:last-of-type {
-              .nb-grid-col {
-                .nb-form-item:last-of-type {
-                  .ant-formily-item {
-                    margin-bottom: 0;
+              .nb-row-divider {
+                height: 16px;
+                margin-top: -16px;
+                &:last-child {
+                  margin-top: 0;
+                }
+              }
+              .ant-description-input {
+                text-overflow: ellipsis;
+                width: 100%;
+                overflow: hidden;
+              }
+              .ant-description-textarea {
+                text-overflow: ellipsis;
+                width: 100%;
+                overflow: hidden;
+              }
+              .ant-formily-item {
+                margin-bottom: 12px;
+              }
+              .nb-grid-row:last-of-type {
+                .nb-grid-col {
+                  .nb-form-item:last-of-type {
+                    .ant-formily-item {
+                      margin-bottom: 0;
+                    }
                   }
                 }
               }
-            }
-          `,
-          {
-            'kanban-no-label': labelDisabled,
-          },
+            `,
+            {
+              'kanban-no-label': labelDisabled,
+            },
+          )}
+        >
+          <DndContext
+            onDragStart={() => {
+              setDisableCardDrag(true);
+            }}
+            onDragEnd={() => {
+              setDisableCardDrag(false);
+            }}
+          >
+            <FormLayout layout={'vertical'}>
+              <RecursionField
+                basePath={cardField.address.concat(`${columnIndex}.cards.${cardIndex}`)}
+                schema={fieldSchema}
+                onlyRenderProperties
+              />
+            </FormLayout>
+          </DndContext>
+        </Card>
+        {cardViewerSchema && (
+          <ActionContext.Provider
+            value={{
+              openMode: fieldSchema['x-component-props']?.['openMode'] || 'drawer',
+              openSize: fieldSchema['x-component-props']?.['openSize'],
+              visible,
+              setVisible,
+            }}
+          >
+            <RecordProvider record={card}>
+              <RecursionField
+                basePath={cardField.address.concat(`${columnIndex}.cardViewer.${cardIndex}`)}
+                schema={cardViewerSchema}
+                onlyRenderProperties
+              />
+            </RecordProvider>
+          </ActionContext.Provider>
         )}
-      >
-        <DndContext
-          onDragStart={() => {
-            setDisableCardDrag(true);
-          }}
-          onDragEnd={() => {
-            setDisableCardDrag(false);
-          }}
-        >
-          <FormLayout layout={'vertical'}>
-            <RecursionField
-              basePath={cardField.address.concat(`${columnIndex}.cards.${cardIndex}`)}
-              schema={fieldSchema}
-              onlyRenderProperties
-            />
-          </FormLayout>
-        </DndContext>
-      </Card>
-      {cardViewerSchema && (
-        <ActionContext.Provider
-          value={{
-            openMode: fieldSchema['x-component-props']?.['openMode'] || 'drawer',
-            openSize: fieldSchema['x-component-props']?.['openSize'],
-            visible,
-            setVisible,
-          }}
-        >
-          <RecordProvider record={card}>
-            <RecursionField
-              basePath={cardField.address.concat(`${columnIndex}.cardViewer.${cardIndex}`)}
-              schema={cardViewerSchema}
-              onlyRenderProperties
-            />
-          </RecordProvider>
-        </ActionContext.Provider>
-      )}
-    </SchemaComponentOptions>
-  );
-});
+      </SchemaComponentOptions>
+    );
+  },
+  { displayName: 'KanbanCard' },
+);
diff --git a/packages/core/client/src/schema-component/antd/kanban/Kanban.CardViewer.tsx b/packages/core/client/src/schema-component/antd/kanban/Kanban.CardViewer.tsx
index 788523f6d..99fea76b5 100644
--- a/packages/core/client/src/schema-component/antd/kanban/Kanban.CardViewer.tsx
+++ b/packages/core/client/src/schema-component/antd/kanban/Kanban.CardViewer.tsx
@@ -1,5 +1,8 @@
 import { observer } from '@formily/react';
 
-export const KanbanCardViewer: any = observer((props: any) => {
-  return props.children;
-});
+export const KanbanCardViewer: any = observer(
+  (props: any) => {
+    return props.children;
+  },
+  { displayName: 'KanbanCardViewer' },
+);
diff --git a/packages/core/client/src/schema-component/antd/kanban/Kanban.tsx b/packages/core/client/src/schema-component/antd/kanban/Kanban.tsx
index b6e128b60..d5a34f2b5 100644
--- a/packages/core/client/src/schema-component/antd/kanban/Kanban.tsx
+++ b/packages/core/client/src/schema-component/antd/kanban/Kanban.tsx
@@ -55,103 +55,106 @@ export const toColumns = (groupField: any, dataSource: Array<any> = []) => {
   return Object.values(columns);
 };
 
-export const Kanban: any = observer((props: any) => {
-  const { groupField, onCardDragEnd, ...restProps } = useProps(props);
-  const field = useField<ArrayField>();
-  const fieldSchema = useFieldSchema();
-  const [disableCardDrag, setDisableCardDrag] = useState(false);
-  const schemas = useMemo(
-    () =>
-      fieldSchema.reduceProperties(
-        (buf, current) => {
-          if (current['x-component'].endsWith('.Card')) {
-            buf.card = current;
-          } else if (current['x-component'].endsWith('.CardAdder')) {
-            buf.cardAdder = current;
-          } else if (current['x-component'].endsWith('.CardViewer')) {
-            buf.cardViewer = current;
-          }
-          return buf;
-        },
-        { card: null, cardAdder: null, cardViewer: null },
-      ),
-    [],
-  );
-  const handleCardRemove = (card, column) => {
-    const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
-    field.value = updatedBoard.columns;
-  };
-  const handleCardDragEnd = (card, fromColumn, toColumn) => {
-    onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
-    const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
-    field.value = updatedBoard.columns;
-  };
+export const Kanban: any = observer(
+  (props: any) => {
+    const { groupField, onCardDragEnd, ...restProps } = useProps(props);
+    const field = useField<ArrayField>();
+    const fieldSchema = useFieldSchema();
+    const [disableCardDrag, setDisableCardDrag] = useState(false);
+    const schemas = useMemo(
+      () =>
+        fieldSchema.reduceProperties(
+          (buf, current) => {
+            if (current['x-component'].endsWith('.Card')) {
+              buf.card = current;
+            } else if (current['x-component'].endsWith('.CardAdder')) {
+              buf.cardAdder = current;
+            } else if (current['x-component'].endsWith('.CardViewer')) {
+              buf.cardViewer = current;
+            }
+            return buf;
+          },
+          { card: null, cardAdder: null, cardViewer: null },
+        ),
+      [],
+    );
+    const handleCardRemove = (card, column) => {
+      const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
+      field.value = updatedBoard.columns;
+    };
+    const handleCardDragEnd = (card, fromColumn, toColumn) => {
+      onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
+      const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
+      field.value = updatedBoard.columns;
+    };
 
-  return (
-    <Spin
-      wrapperClassName={css`
-        overflow: hidden;
-        height: 100%;
-        > .ant-spin-container {
+    return (
+      <Spin
+        wrapperClassName={css`
+          overflow: hidden;
           height: 100%;
-        }
-      `}
-      spinning={field.loading || false}
-    >
-      <Board
-        {...restProps}
-        allowAddCard={!!schemas.cardAdder}
-        disableColumnDrag
-        cardAdderPosition={'bottom'}
-        disableCardDrag={restProps.disableCardDrag || disableCardDrag}
-        onCardRemove={handleCardRemove}
-        onCardDragEnd={handleCardDragEnd}
-        renderColumnHeader={({ title, color }) => (
-          <div className={'react-kanban-column-header'}>
-            <Tag color={color}>{title}</Tag>
-          </div>
-        )}
-        renderCard={(card, { column, dragging }) => {
-          const columnIndex = field.value?.indexOf(column);
-          const cardIndex = column?.cards?.indexOf(card);
-          return (
-            schemas.card && (
-              <RecordProvider record={card}>
-                <KanbanCardContext.Provider
-                  value={{
-                    setDisableCardDrag,
-                    cardViewerSchema: schemas.cardViewer,
-                    cardField: field,
-                    card,
-                    column,
-                    dragging,
-                    columnIndex,
-                    cardIndex,
-                  }}
-                >
-                  <RecursionField name={schemas.card.name} schema={schemas.card} />
-                </KanbanCardContext.Provider>
-              </RecordProvider>
-            )
-          );
-        }}
-        renderCardAdder={({ column }) => {
-          if (!schemas.cardAdder) {
-            return null;
+          > .ant-spin-container {
+            height: 100%;
           }
-          return (
-            <KanbanColumnContext.Provider value={{ column, groupField }}>
-              <SchemaComponentOptions scope={{ useCreateActionProps }}>
-                <RecursionField name={schemas.cardAdder.name} schema={schemas.cardAdder} />
-              </SchemaComponentOptions>
-            </KanbanColumnContext.Provider>
-          );
-        }}
+        `}
+        spinning={field.loading || false}
       >
-        {{
-          columns: field.value || [],
-        }}
-      </Board>
-    </Spin>
-  );
-});
+        <Board
+          {...restProps}
+          allowAddCard={!!schemas.cardAdder}
+          disableColumnDrag
+          cardAdderPosition={'bottom'}
+          disableCardDrag={restProps.disableCardDrag || disableCardDrag}
+          onCardRemove={handleCardRemove}
+          onCardDragEnd={handleCardDragEnd}
+          renderColumnHeader={({ title, color }) => (
+            <div className={'react-kanban-column-header'}>
+              <Tag color={color}>{title}</Tag>
+            </div>
+          )}
+          renderCard={(card, { column, dragging }) => {
+            const columnIndex = field.value?.indexOf(column);
+            const cardIndex = column?.cards?.indexOf(card);
+            return (
+              schemas.card && (
+                <RecordProvider record={card}>
+                  <KanbanCardContext.Provider
+                    value={{
+                      setDisableCardDrag,
+                      cardViewerSchema: schemas.cardViewer,
+                      cardField: field,
+                      card,
+                      column,
+                      dragging,
+                      columnIndex,
+                      cardIndex,
+                    }}
+                  >
+                    <RecursionField name={schemas.card.name} schema={schemas.card} />
+                  </KanbanCardContext.Provider>
+                </RecordProvider>
+              )
+            );
+          }}
+          renderCardAdder={({ column }) => {
+            if (!schemas.cardAdder) {
+              return null;
+            }
+            return (
+              <KanbanColumnContext.Provider value={{ column, groupField }}>
+                <SchemaComponentOptions scope={{ useCreateActionProps }}>
+                  <RecursionField name={schemas.cardAdder.name} schema={schemas.cardAdder} />
+                </SchemaComponentOptions>
+              </KanbanColumnContext.Provider>
+            );
+          }}
+        >
+          {{
+            columns: field.value || [],
+          }}
+        </Board>
+      </Spin>
+    );
+  },
+  { displayName: 'Kanban' },
+);
diff --git a/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx b/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
index 0ce24b232..04a827ba6 100644
--- a/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
+++ b/packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
@@ -41,44 +41,47 @@ const MarkdownEditor = (props: any) => {
   );
 };
 
-export const MarkdownVoid: any = observer((props: any) => {
-  const { content, className } = props;
-  const field = useField();
-  const schema = useFieldSchema();
-  const { dn } = useDesignable();
-  const { onSave, onCancel } = props;
-  const { html, loading } = useParseMarkdown(content);
-  if (loading) {
-    return <Spin />;
-  }
-  return field?.editable ? (
-    <MarkdownEditor
-      {...props}
-      className
-      defaultValue={content}
-      onCancel={() => {
-        field.editable = false;
-        onCancel?.();
-      }}
-      onSubmit={async (value) => {
-        field.editable = false;
-        schema['x-component-props'] ?? (schema['x-component-props'] = {});
-        schema['x-component-props']['content'] = value;
-        field.componentProps.content = value;
-        onSave?.(schema);
-        dn.emit('patch', {
-          schema: {
-            'x-uid': schema['x-uid'],
-            'x-component-props': {
-              content: value,
+export const MarkdownVoid: any = observer(
+  (props: any) => {
+    const { content, className } = props;
+    const field = useField();
+    const schema = useFieldSchema();
+    const { dn } = useDesignable();
+    const { onSave, onCancel } = props;
+    const { html, loading } = useParseMarkdown(content);
+    if (loading) {
+      return <Spin />;
+    }
+    return field?.editable ? (
+      <MarkdownEditor
+        {...props}
+        className
+        defaultValue={content}
+        onCancel={() => {
+          field.editable = false;
+          onCancel?.();
+        }}
+        onSubmit={async (value) => {
+          field.editable = false;
+          schema['x-component-props'] ?? (schema['x-component-props'] = {});
+          schema['x-component-props']['content'] = value;
+          field.componentProps.content = value;
+          onSave?.(schema);
+          dn.emit('patch', {
+            schema: {
+              'x-uid': schema['x-uid'],
+              'x-component-props': {
+                content: value,
+              },
             },
-          },
-        });
-      }}
-    />
-  ) : (
-    <div className={cls(['nb-markdown', className])} dangerouslySetInnerHTML={{ __html: html }} />
-  );
-});
+          });
+        }}
+      />
+    ) : (
+      <div className={cls(['nb-markdown', className])} dangerouslySetInnerHTML={{ __html: html }} />
+    );
+  },
+  { displayName: 'MarkdownVoid' },
+);
 
 MarkdownVoid.Designer = MarkdownVoidDesigner;
diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx
index fc7eccc78..c22c007d1 100644
--- a/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx
+++ b/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx
@@ -23,24 +23,27 @@ const schema = {
   },
 };
 
-const Editable = observer((props: any) => {
-  const filed = useField<any>();
-  if (filed.editable) {
-    return props.children;
-  }
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          filed.editable = true;
-        }}
-      >
-        编辑
-      </Button>
-      <div>{props.children}</div>
-    </div>
-  );
-});
+const Editable = observer(
+  (props: any) => {
+    const filed = useField<any>();
+    if (filed.editable) {
+      return props.children;
+    }
+    return (
+      <div>
+        <Button
+          onClick={() => {
+            filed.editable = true;
+          }}
+        >
+          编辑
+        </Button>
+        <div>{props.children}</div>
+      </div>
+    );
+  },
+  { displayName: 'Editable' },
+);
 
 export default () => {
   return (
diff --git a/packages/core/client/src/schema-component/antd/menu/Menu.tsx b/packages/core/client/src/schema-component/antd/menu/Menu.tsx
index f0c46d3c5..a2a0a6e32 100644
--- a/packages/core/client/src/schema-component/antd/menu/Menu.tsx
+++ b/packages/core/client/src/schema-component/antd/menu/Menu.tsx
@@ -136,148 +136,149 @@ const useSideMenuRef = () => {
 
 const MenuItemDesignerContext = createContext(null);
 
-export const Menu: ComposedMenu = observer((props) => {
-  const {
-    onSelect,
-    mode,
-    selectedUid,
-    defaultSelectedUid,
-    sideMenuRefScopeKey,
-    defaultSelectedKeys: dSelectedKeys,
-    defaultOpenKeys: dOpenKeys,
-    ...others
-  } = useProps(props);
-  const { t } = useTranslation();
-  const Designer = useDesigner();
-  const schema = useFieldSchema();
-  const { refresh } = useDesignable();
-  const api = useAPIClient();
-  const { render } = useSchemaInitializer(schema['x-initializer']);
-  const sideMenuRef = useSideMenuRef();
-  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState(() => {
-    if (dSelectedKeys) {
-      return dSelectedKeys;
-    }
-    if (defaultSelectedUid) {
-      return findKeysByUid(schema, defaultSelectedUid);
-    }
-    return [];
-  });
-  const [loading, setLoading] = useState(false);
-  const [defaultOpenKeys, setDefaultOpenKeys] = useState(() => {
-    if (['inline', 'mix'].includes(mode)) {
-      return dOpenKeys || defaultSelectedKeys;
-    }
-    return dOpenKeys;
-  });
-  const [sideMenuSchema, setSideMenuSchema] = useState<Schema>(() => {
-    const key = defaultSelectedKeys?.[0] || null;
-    if (mode === 'mix' && key) {
-      const s = schema.properties?.[key];
-      if (s['x-component'] === 'Menu.SubMenu') {
-        return s;
+export const Menu: ComposedMenu = observer(
+  (props) => {
+    const {
+      onSelect,
+      mode,
+      selectedUid,
+      defaultSelectedUid,
+      sideMenuRefScopeKey,
+      defaultSelectedKeys: dSelectedKeys,
+      defaultOpenKeys: dOpenKeys,
+      ...others
+    } = useProps(props);
+    const { t } = useTranslation();
+    const Designer = useDesigner();
+    const schema = useFieldSchema();
+    const { refresh } = useDesignable();
+    const api = useAPIClient();
+    const { render } = useSchemaInitializer(schema['x-initializer']);
+    const sideMenuRef = useSideMenuRef();
+    const [defaultSelectedKeys, setDefaultSelectedKeys] = useState(() => {
+      if (dSelectedKeys) {
+        return dSelectedKeys;
       }
-    }
-    return null;
-  });
-  useEffect(() => {
-    const keys = findKeysByUid(schema, selectedUid);
-    setDefaultSelectedKeys(keys);
-    if (['inline', 'mix'].includes(mode)) {
-      setDefaultOpenKeys(dOpenKeys || keys);
-    }
-    const key = keys?.[0] || null;
-    if (mode === 'mix') {
-      if (key) {
+      if (defaultSelectedUid) {
+        return findKeysByUid(schema, defaultSelectedUid);
+      }
+      return [];
+    });
+    const [loading, setLoading] = useState(false);
+    const [defaultOpenKeys, setDefaultOpenKeys] = useState(() => {
+      if (['inline', 'mix'].includes(mode)) {
+        return dOpenKeys || defaultSelectedKeys;
+      }
+      return dOpenKeys;
+    });
+    const [sideMenuSchema, setSideMenuSchema] = useState<Schema>(() => {
+      const key = defaultSelectedKeys?.[0] || null;
+      if (mode === 'mix' && key) {
         const s = schema.properties?.[key];
         if (s['x-component'] === 'Menu.SubMenu') {
-          setSideMenuSchema(s);
+          return s;
         }
-      } else {
-        setSideMenuSchema(null);
       }
-    }
-  }, [selectedUid]);
-  useEffect(() => {
-    if (['inline', 'mix'].includes(mode)) {
-      setDefaultOpenKeys(defaultSelectedKeys);
-    }
-  }, [defaultSelectedKeys]);
-  useEffect(() => {
-    const sideMenuElement = sideMenuRef?.current as HTMLElement;
-    if (!sideMenuElement) {
-      return;
-    }
-    sideMenuElement.style.display = sideMenuSchema?.['x-component'] === 'Menu.SubMenu' ? 'block' : 'none';
-  }, [sideMenuSchema?.name, sideMenuRef]);
-  const { designable } = useDesignable();
-  return (
-    <DndContext>
-      <MenuItemDesignerContext.Provider value={Designer}>
-        <MenuModeContext.Provider value={mode}>
-          <AntdMenu
-            {...others}
-            style={
-              {
-                // width: mode === 'mix' ? '100%' : undefined,
-              }
-            }
-            className={css`
-              .ant-menu-item:hover {
-                > .ant-menu-title-content > div {
-                  .general-schema-designer {
-                    display: block;
-                  }
+      return null;
+    });
+    useEffect(() => {
+      const keys = findKeysByUid(schema, selectedUid);
+      setDefaultSelectedKeys(keys);
+      if (['inline', 'mix'].includes(mode)) {
+        setDefaultOpenKeys(dOpenKeys || keys);
+      }
+      const key = keys?.[0] || null;
+      if (mode === 'mix') {
+        if (key) {
+          const s = schema.properties?.[key];
+          if (s['x-component'] === 'Menu.SubMenu') {
+            setSideMenuSchema(s);
+          }
+        } else {
+          setSideMenuSchema(null);
+        }
+      }
+    }, [selectedUid]);
+    useEffect(() => {
+      if (['inline', 'mix'].includes(mode)) {
+        setDefaultOpenKeys(defaultSelectedKeys);
+      }
+    }, [defaultSelectedKeys]);
+    useEffect(() => {
+      const sideMenuElement = sideMenuRef?.current as HTMLElement;
+      if (!sideMenuElement) {
+        return;
+      }
+      sideMenuElement.style.display = sideMenuSchema?.['x-component'] === 'Menu.SubMenu' ? 'block' : 'none';
+    }, [sideMenuSchema?.name, sideMenuRef]);
+    const { designable } = useDesignable();
+    return (
+      <DndContext>
+        <MenuItemDesignerContext.Provider value={Designer}>
+          <MenuModeContext.Provider value={mode}>
+            <AntdMenu
+              {...others}
+              style={
+                {
+                  // width: mode === 'mix' ? '100%' : undefined,
                 }
               }
-            `}
-            onSelect={(info: any) => {
-              const s = schema.properties[info.key];
-              if (mode === 'mix') {
-                setSideMenuSchema(s);
-                if (s['x-component'] !== 'Menu.SubMenu') {
-                  onSelect && onSelect(info);
-                } else {
-                  const menuItemSchema = findMenuItem(s);
-                  if (!menuItemSchema) {
-                    return;
+              className={css`
+                .ant-menu-item:hover {
+                  > .ant-menu-title-content > div {
+                    .general-schema-designer {
+                      display: block;
+                    }
                   }
-                  // TODO
-                  setLoading(true);
-                  const keys = findKeysByUid(schema, menuItemSchema['x-uid']);
-                  setDefaultSelectedKeys(keys);
-                  setTimeout(() => {
-                    setLoading(false);
-                  }, 100);
-                  onSelect &&
-                    onSelect({
-                      key: menuItemSchema.name,
-                      item: {
-                        props: {
-                          schema: menuItemSchema,
+                }
+              `}
+              onSelect={(info: any) => {
+                const s = schema.properties[info.key];
+                if (mode === 'mix') {
+                  setSideMenuSchema(s);
+                  if (s['x-component'] !== 'Menu.SubMenu') {
+                    onSelect && onSelect(info);
+                  } else {
+                    const menuItemSchema = findMenuItem(s);
+                    if (!menuItemSchema) {
+                      return;
+                    }
+                    // TODO
+                    setLoading(true);
+                    const keys = findKeysByUid(schema, menuItemSchema['x-uid']);
+                    setDefaultSelectedKeys(keys);
+                    setTimeout(() => {
+                      setLoading(false);
+                    }, 100);
+                    onSelect &&
+                      onSelect({
+                        key: menuItemSchema.name,
+                        item: {
+                          props: {
+                            schema: menuItemSchema,
+                          },
                         },
-                      },
-                    });
+                      });
+                  }
+                } else {
+                  onSelect && onSelect(info);
                 }
-              } else {
-                onSelect && onSelect(info);
-              }
-            }}
-            mode={mode === 'mix' ? 'horizontal' : mode}
-            defaultOpenKeys={defaultOpenKeys}
-            defaultSelectedKeys={defaultSelectedKeys}
-            selectedKeys={defaultSelectedKeys}
-          >
-            {designable && (
-              <AntdMenu.Item disabled key="x-designer-button" style={{ padding: '0 8px', order: 9999 }}>
-                {render({ style: { background: 'none' } })}
-              </AntdMenu.Item>
-            )}
-            {props.children}
-          </AntdMenu>
-          {loading
-            ? null
-            : mode === 'mix' &&
+              }}
+              mode={mode === 'mix' ? 'horizontal' : mode}
+              defaultOpenKeys={defaultOpenKeys}
+              defaultSelectedKeys={defaultSelectedKeys}
+              selectedKeys={defaultSelectedKeys}
+            >
+              {designable && (
+                <AntdMenu.Item disabled key="x-designer-button" style={{ padding: '0 8px', order: 9999 }}>
+                  {render({ style: { background: 'none' } })}
+                </AntdMenu.Item>
+              )}
+              {props.children}
+            </AntdMenu>
+            {loading
+              ? null
+              : mode === 'mix' &&
               sideMenuSchema?.['x-component'] === 'Menu.SubMenu' &&
               sideMenuRef?.current?.firstChild &&
               createPortal(
@@ -290,37 +291,37 @@ export const Menu: ComposedMenu = observer((props) => {
                       onSelect && onSelect(info);
                     }}
                     className={css`
-                      height: 100%;
-                      overflow-y: auto;
-                      overflow-x: hidden;
-                      .ant-menu-item {
-                        > .ant-menu-title-content {
-                          margin-left: -24px;
-                          margin-right: -16px;
-                          padding: 0 16px 0 24px;
-                          > div {
-                            > .general-schema-designer {
-                              right: 6px !important;
+                        height: 100%;
+                        overflow-y: auto;
+                        overflow-x: hidden;
+                        .ant-menu-item {
+                          > .ant-menu-title-content {
+                            margin-left: -24px;
+                            margin-right: -16px;
+                            padding: 0 16px 0 24px;
+                            > div {
+                              > .general-schema-designer {
+                                right: 6px !important;
+                              }
                             }
                           }
                         }
-                      }
-                      .ant-menu-submenu-title {
-                        .ant-menu-title-content {
-                          margin-left: -24px;
-                          margin-right: -34px;
-                          padding: 0 34px 0 24px;
-                          > div {
-                            > .general-schema-designer {
-                              right: 6px !important;
-                            }
-                            > span.anticon {
-                              margin-right: 10px;
+                        .ant-menu-submenu-title {
+                          .ant-menu-title-content {
+                            margin-left: -24px;
+                            margin-right: -34px;
+                            padding: 0 34px 0 24px;
+                            > div {
+                              > .general-schema-designer {
+                                right: 6px !important;
+                              }
+                              > span.anticon {
+                                margin-right: 10px;
+                              }
                             }
                           }
                         }
-                      }
-                    `}
+                      `}
                   >
                     <RecursionField schema={sideMenuSchema} onlyRenderProperties />
                     {render({
@@ -340,117 +341,128 @@ export const Menu: ComposedMenu = observer((props) => {
                 </MenuModeContext.Provider>,
                 sideMenuRef.current.firstChild,
               )}
-        </MenuModeContext.Provider>
-      </MenuItemDesignerContext.Provider>
-    </DndContext>
-  );
-});
+          </MenuModeContext.Provider>
+        </MenuItemDesignerContext.Provider>
+      </DndContext>
+    );
+  },
+  { displayName: 'Menu' },
+);
 
-Menu.Item = observer((props) => {
-  const { icon, ...others } = props;
-  const schema = useFieldSchema();
-  const field = useField();
-  const Designer = useContext(MenuItemDesignerContext);
-  return (
-    <AntdMenu.Item
-      {...others}
-      className={css`
-        :active {
-          background: inherit;
-        }
-      `}
-      key={schema.name}
-      eventKey={schema.name}
-      schema={schema}
-    >
-      <SortableItem className={designerCss} removeParentsIfNoChildren={false}>
-        <Icon type={icon} />
-        <span
-          className={css`
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            width: 100%;
-            vertical-align: middle;
-          `}
-        >
-          {field.title}
-        </span>
-        <Designer />
-      </SortableItem>
-    </AntdMenu.Item>
-  );
-});
-
-Menu.URL = observer((props) => {
-  const { icon, ...others } = props;
-  const schema = useFieldSchema();
-  const field = useField();
-  const Designer = useContext(MenuItemDesignerContext);
-  return (
-    <AntdMenu.Item
-      {...others}
-      className={css`
-        :active {
-          background: inherit;
-        }
-      `}
-      key={schema.name}
-      eventKey={schema.name}
-      schema={schema}
-      onClick={() => {
-        window.open(props.href, '_blank');
-      }}
-    >
-      <SortableItem className={designerCss} removeParentsIfNoChildren={false}>
-        <Icon type={icon} />
-        <span
-          className={css`
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            width: 100%;
-            vertical-align: middle;
-          `}
-        >
-          {field.title}
-        </span>
-        <Designer />
-      </SortableItem>
-    </AntdMenu.Item>
-  );
-});
-
-Menu.SubMenu = observer((props) => {
-  const { icon, ...others } = props;
-  const schema = useFieldSchema();
-  const field = useField();
-  const mode = useContext(MenuModeContext);
-  const Designer = useContext(MenuItemDesignerContext);
-  if (mode === 'mix') {
-    return <Menu.Item {...props} />;
-  }
-  return (
-    <AntdMenu.SubMenu
-      {...others}
-      className={css`
-        :active {
-          background: inherit;
-        }
-      `}
-      key={schema.name}
-      eventKey={schema.name}
-      title={
-        <SortableItem className={subMenuDesignerCss} removeParentsIfNoChildren={false}>
+Menu.Item = observer(
+  (props) => {
+    const { icon, ...others } = props;
+    const schema = useFieldSchema();
+    const field = useField();
+    const Designer = useContext(MenuItemDesignerContext);
+    return (
+      <AntdMenu.Item
+        {...others}
+        className={css`
+          :active {
+            background: inherit;
+          }
+        `}
+        key={schema.name}
+        eventKey={schema.name}
+        schema={schema}
+      >
+        <SortableItem className={designerCss} removeParentsIfNoChildren={false}>
           <Icon type={icon} />
-          {field.title}
+          <span
+            className={css`
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: inline-block;
+              width: 100%;
+              vertical-align: middle;
+            `}
+          >
+            {field.title}
+          </span>
           <Designer />
         </SortableItem>
-      }
-    >
-      <RecursionField schema={schema} onlyRenderProperties />
-    </AntdMenu.SubMenu>
-  );
-});
+      </AntdMenu.Item>
+    );
+  },
+  { displayName: 'MenuItem' },
+);
+
+Menu.URL = observer(
+  (props) => {
+    const { icon, ...others } = props;
+    const schema = useFieldSchema();
+    const field = useField();
+    const Designer = useContext(MenuItemDesignerContext);
+    return (
+      <AntdMenu.Item
+        {...others}
+        className={css`
+          :active {
+            background: inherit;
+          }
+        `}
+        key={schema.name}
+        eventKey={schema.name}
+        schema={schema}
+        onClick={() => {
+          window.open(props.href, '_blank');
+        }}
+      >
+        <SortableItem className={designerCss} removeParentsIfNoChildren={false}>
+          <Icon type={icon} />
+          <span
+            className={css`
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: inline-block;
+              width: 100%;
+              vertical-align: middle;
+            `}
+          >
+            {field.title}
+          </span>
+          <Designer />
+        </SortableItem>
+      </AntdMenu.Item>
+    );
+  },
+  { displayName: 'MenuURL' },
+);
+
+Menu.SubMenu = observer(
+  (props) => {
+    const { icon, ...others } = props;
+    const schema = useFieldSchema();
+    const field = useField();
+    const mode = useContext(MenuModeContext);
+    const Designer = useContext(MenuItemDesignerContext);
+    if (mode === 'mix') {
+      return <Menu.Item {...props} />;
+    }
+    return (
+      <AntdMenu.SubMenu
+        {...others}
+        className={css`
+          :active {
+            background: inherit;
+          }
+        `}
+        key={schema.name}
+        eventKey={schema.name}
+        title={
+          <SortableItem className={subMenuDesignerCss} removeParentsIfNoChildren={false}>
+            <Icon type={icon} />
+            {field.title}
+            <Designer />
+          </SortableItem>
+        }
+      >
+        <RecursionField schema={schema} onlyRenderProperties />
+      </AntdMenu.SubMenu>
+    );
+  },
+  { displayName: 'MenuSubMenu' },
+);
 
 Menu.Designer = MenuDesigner;
diff --git a/packages/core/client/src/schema-component/antd/pagination/index.tsx b/packages/core/client/src/schema-component/antd/pagination/index.tsx
index e0e5c6e76..c58fd8a8a 100644
--- a/packages/core/client/src/schema-component/antd/pagination/index.tsx
+++ b/packages/core/client/src/schema-component/antd/pagination/index.tsx
@@ -3,20 +3,23 @@ import { Pagination as AntdPagination } from 'antd';
 import React, { KeyboardEventHandler } from 'react';
 import { useProps } from '../../hooks/useProps';
 
-export const Pagination = observer((props: any) => {
-  const { hidden, ...others } = useProps(props);
-  if (hidden) {
-    return null;
-  }
-  const onKeypress: KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
+export const Pagination = observer(
+  (props: any) => {
+    const { hidden, ...others } = useProps(props);
+    if (hidden) {
+      return null;
     }
-  };
+    const onKeypress: KeyboardEventHandler<HTMLDivElement> = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    };
 
-  return (
-    <div onKeyPress={onKeypress}>
-      <AntdPagination {...others} />
-    </div>
-  );
-});
+    return (
+      <div onKeyPress={onKeypress}>
+        <AntdPagination {...others} />
+      </div>
+    );
+  },
+  { displayName: 'Pagination' },
+);
diff --git a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
index 7f8e69524..c7fe6ee7e 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
@@ -25,98 +25,101 @@ const toValue = (value, placeholder) => {
   return value;
 };
 
-export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
-  const { ellipsis } = props;
-  const fieldSchema = useFieldSchema();
-  const recordCtx = useRecord();
-  const { getCollectionJoinField } = useCollectionManager();
-  // value 做了转换，但 props.value 和原来 useField().value 的值不一致
-  // const field = useField<Field>();
-  const fieldNames = useFieldNames(props);
-  const [visible, setVisible] = useState(false);
-  const { getField } = useCollection();
-  const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema?.['x-collection-field']);
-  const [record, setRecord] = useState({});
-  const compile = useCompile();
-  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
-  const showFilePicker = isShowFilePicker(labelUiSchema);
-  const { snapshot } = useActionContext();
-  const isTagsMode = fieldSchema['x-component-props']?.mode === 'tags';
+export const ReadPrettyRecordPicker: React.FC = observer(
+  (props: any) => {
+    const { ellipsis } = props;
+    const fieldSchema = useFieldSchema();
+    const recordCtx = useRecord();
+    const { getCollectionJoinField } = useCollectionManager();
+    // value 做了转换，但 props.value 和原来 useField().value 的值不一致
+    // const field = useField<Field>();
+    const fieldNames = useFieldNames(props);
+    const [visible, setVisible] = useState(false);
+    const { getField } = useCollection();
+    const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema?.['x-collection-field']);
+    const [record, setRecord] = useState({});
+    const compile = useCompile();
+    const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
+    const showFilePicker = isShowFilePicker(labelUiSchema);
+    const { snapshot } = useActionContext();
+    const isTagsMode = fieldSchema['x-component-props']?.mode === 'tags';
 
-  const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
+    const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
 
-  if (showFilePicker) {
-    return collectionField ? <Preview {...props} /> : null;
-  }
+    if (showFilePicker) {
+      return collectionField ? <Preview {...props} /> : null;
+    }
 
-  const renderRecords = () =>
-    toArr(props.value).map((record, index, arr) => {
-      const val = toValue(compile(record?.[fieldNames?.label || 'label']), 'N/A');
-      const text = getLabelFormatValue(labelUiSchema, val, true);
-      return (
-        <Fragment key={`${record.id}_${index}`}>
-          <span>
-            {snapshot || isTagsMode ? (
-              text
-            ) : (
-              <a
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  setVisible(true);
-                  setRecord(record);
-                  ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
-                }}
-              >
-                {text}
-              </a>
-            )}
-          </span>
-          {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
-        </Fragment>
-      );
-    });
+    const renderRecords = () =>
+      toArr(props.value).map((record, index, arr) => {
+        const val = toValue(compile(record?.[fieldNames?.label || 'label']), 'N/A');
+        const text = getLabelFormatValue(labelUiSchema, val, true);
+        return (
+          <Fragment key={`${record.id}_${index}`}>
+            <span>
+              {snapshot || isTagsMode ? (
+                text
+              ) : (
+                <a
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setVisible(true);
+                    setRecord(record);
+                    ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
+                  }}
+                >
+                  {text}
+                </a>
+              )}
+            </span>
+            {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
+          </Fragment>
+        );
+      });
 
-  const renderWithoutTableFieldResourceProvider = () => (
-    <WithoutTableFieldResource.Provider value={true}>
-      <FormProvider>
-        <RecursionField
-          schema={fieldSchema}
-          onlyRenderProperties
-          filterProperties={(s) => {
-            return s['x-component'] === 'RecordPicker.Viewer';
-          }}
-        />
-      </FormProvider>
-    </WithoutTableFieldResource.Provider>
-  );
-
-  const renderRecordProvider = () => {
-    const collectionFieldNames = fieldSchema?.['x-collection-field']?.split('.');
-
-    return collectionFieldNames && collectionFieldNames.length > 2 ? (
-      <RecordProvider record={recordCtx[collectionFieldNames[1]]}>
-        <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
-      </RecordProvider>
-    ) : (
-      <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
+    const renderWithoutTableFieldResourceProvider = () => (
+      <WithoutTableFieldResource.Provider value={true}>
+        <FormProvider>
+          <RecursionField
+            schema={fieldSchema}
+            onlyRenderProperties
+            filterProperties={(s) => {
+              return s['x-component'] === 'RecordPicker.Viewer';
+            }}
+          />
+        </FormProvider>
+      </WithoutTableFieldResource.Provider>
     );
-  };
 
-  return collectionField ? (
-    <div>
-      <BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
-        <CollectionProvider name={collectionField.target ?? collectionField.targetCollection}>
-          <EllipsisWithTooltip ellipsis={ellipsis} ref={ellipsisWithTooltipRef}>
-            {renderRecords()}
-          </EllipsisWithTooltip>
-          <ActionContext.Provider
-            value={{ visible, setVisible, openMode: 'drawer', snapshot: collectionField.interface === 'snapshot' }}
-          >
-            {renderRecordProvider()}
-          </ActionContext.Provider>
-        </CollectionProvider>
-      </BlockAssociationContext.Provider>
-    </div>
-  ) : null;
-});
+    const renderRecordProvider = () => {
+      const collectionFieldNames = fieldSchema?.['x-collection-field']?.split('.');
+
+      return collectionFieldNames && collectionFieldNames.length > 2 ? (
+        <RecordProvider record={recordCtx[collectionFieldNames[1]]}>
+          <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
+        </RecordProvider>
+      ) : (
+        <RecordProvider record={record}>{renderWithoutTableFieldResourceProvider()}</RecordProvider>
+      );
+    };
+
+    return collectionField ? (
+      <div>
+        <BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
+          <CollectionProvider name={collectionField.target ?? collectionField.targetCollection}>
+            <EllipsisWithTooltip ellipsis={ellipsis} ref={ellipsisWithTooltipRef}>
+              {renderRecords()}
+            </EllipsisWithTooltip>
+            <ActionContext.Provider
+              value={{ visible, setVisible, openMode: 'drawer', snapshot: collectionField.interface === 'snapshot' }}
+            >
+              {renderRecordProvider()}
+            </ActionContext.Provider>
+          </CollectionProvider>
+        </BlockAssociationContext.Provider>
+      </div>
+    ) : null;
+  },
+  { displayName: 'ReadPrettyRecordPicker' },
+);
diff --git a/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx
index 1452597b6..59ffeb0a7 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx
@@ -6,19 +6,20 @@ import { useRequest } from '../../../api-client';
 import { useRecord } from '../../../record-provider';
 import { useActionContext } from '../action';
 
-export const ReadPretty = observer((props: any) => {
-  const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-  const field = useField<any>();
-  const fieldSchema = useFieldSchema();
-  const record = useRecord();
-  const { snapshot } = useActionContext();
+export const ReadPretty = observer(
+  (props: any) => {
+    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
+    const field = useField<any>();
+    const fieldSchema = useFieldSchema();
+    const record = useRecord();
+    const { snapshot } = useActionContext();
 
-  const { data } = useRequest(
-    snapshot
-      ? async () => ({
+    const { data } = useRequest(
+      snapshot
+        ? async () => ({
           data: record[fieldSchema.name],
         })
-      : {
+        : {
           action: 'list',
           ...props.service,
           params: {
@@ -30,10 +31,12 @@ export const ReadPretty = observer((props: any) => {
             },
           },
         },
-    {
-      refreshDeps: [props.service, field.value],
-    },
-  );
+      {
+        refreshDeps: [props.service, field.value],
+      },
+    );
 
-  return <Select.ReadPretty {...props} options={data?.data}></Select.ReadPretty>;
-});
+    return <Select.ReadPretty {...props} options={data?.data}></Select.ReadPretty>;
+  },
+  { displayName: 'ReadPretty' },
+);
diff --git a/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx
index bc671620a..61a108016 100644
--- a/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/select/ReadPretty.tsx
@@ -12,29 +12,32 @@ type Composed = {
   Object?: React.FC<any>;
 };
 
-export const ReadPretty = observer((props: any) => {
-  const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-  const field = useField<any>();
-  const compile = useCompile();
+export const ReadPretty = observer(
+  (props: any) => {
+    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
+    const field = useField<any>();
+    const compile = useCompile();
 
-  if (!isValid(props.value)) {
-    return <div />;
-  }
-  if (isArrayField(field) && field?.value?.length === 0) {
-    return <div />;
-  }
-  const dataSource = field.dataSource || props.options || [];
-  const options = getCurrentOptions(field.value, dataSource, fieldNames);
+    if (!isValid(props.value)) {
+      return <div />;
+    }
+    if (isArrayField(field) && field?.value?.length === 0) {
+      return <div />;
+    }
+    const dataSource = field.dataSource || props.options || [];
+    const options = getCurrentOptions(field.value, dataSource, fieldNames);
 
-  return (
-    <div>
-      <EllipsisWithTooltip ellipsis={props.ellipsis}>
-        {options.map((option, key) => (
-          <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
-            {compile(option[fieldNames.label])}
-          </Tag>
-        ))}
-      </EllipsisWithTooltip>
-    </div>
-  );
-});
+    return (
+      <div>
+        <EllipsisWithTooltip ellipsis={props.ellipsis}>
+          {options.map((option, key) => (
+            <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
+              {compile(option[fieldNames.label])}
+            </Tag>
+          ))}
+        </EllipsisWithTooltip>
+      </div>
+    );
+  },
+  { displayName: 'ReadPretty' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx
index 4974970dd..2fd39d633 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx
@@ -42,12 +42,15 @@ export const designerCss = css`
   }
 `;
 
-export const TableColumnActionBar = observer((props) => {
-  const Designer = useDesigner();
-  return (
-    <SortableItem className={designerCss}>
-      <Designer />
-      {props.children}
-    </SortableItem>
-  );
-});
+export const TableColumnActionBar = observer(
+  (props) => {
+    const Designer = useDesigner();
+    return (
+      <SortableItem className={designerCss}>
+        <Designer />
+        {props.children}
+      </SortableItem>
+    );
+  },
+  { displayName: 'TableColumnActionBar' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
index 2ea360e4b..af5ab82f7 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@@ -163,164 +163,165 @@ const useValidator = (validator: (value: any) => string) => {
   }, []);
 };
 
-export const Table: any = observer((props: any) => {
-  const { pagination: pagination1, useProps, onChange, ...others1 } = props;
-  const { pagination: pagination2, onClickRow, ...others2 } = useProps?.() || {};
-  const {
-    dragSort = false,
-    showIndex = true,
-    onRowSelectionChange,
-    onChange: onTableChange,
-    rowSelection,
-    rowKey,
-    required,
-    onExpand,
-    ...others
-  } = { ...others1, ...others2 } as any;
-  const field = useArrayField(others);
-  const columns = useTableColumns(others);
-  const schema = useFieldSchema();
-  const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider';
-  const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
-  const { expandFlag } = ctx;
-  const onRowDragEnd = useMemoizedFn(others.onRowDragEnd || (() => {}));
-  const paginationProps = usePaginationProps(pagination1, pagination2);
-  const requiredValidator = field.required || required;
-  const { treeTable } = schema?.parent?.['x-decorator-props'] || {};
-  const [expandedKeys, setExpandesKeys] = useState([]);
-  const [allIncludesChildren, setAllIncludesChildren] = useState([]);
-  const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(field?.data?.selectedRowKeys || []);
-  const [selectedRow, setSelectedRow] = useState([]);
+export const Table: any = observer(
+  (props: any) => {
+    const { pagination: pagination1, useProps, onChange, ...others1 } = props;
+    const { pagination: pagination2, onClickRow, ...others2 } = useProps?.() || {};
+    const {
+      dragSort = false,
+      showIndex = true,
+      onRowSelectionChange,
+      onChange: onTableChange,
+      rowSelection,
+      rowKey,
+      required,
+      onExpand,
+      ...others
+    } = { ...others1, ...others2 } as any;
+    const field = useArrayField(others);
+    const columns = useTableColumns(others);
+    const schema = useFieldSchema();
+    const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider';
+    const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
+    const { expandFlag } = ctx;
+    const onRowDragEnd = useMemoizedFn(others.onRowDragEnd || (() => { }));
+    const paginationProps = usePaginationProps(pagination1, pagination2);
+    const requiredValidator = field.required || required;
+    const { treeTable } = schema?.parent?.['x-decorator-props'] || {};
+    const [expandedKeys, setExpandesKeys] = useState([]);
+    const [allIncludesChildren, setAllIncludesChildren] = useState([]);
+    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(field?.data?.selectedRowKeys || []);
+    const [selectedRow, setSelectedRow] = useState([]);
 
-  let onRow = null,
-    highlightRow = '';
+    let onRow = null,
+      highlightRow = '';
 
-  if (onClickRow) {
-    onRow = (record) => {
-      return {
-        onClick: () => onClickRow(record, setSelectedRow, selectedRow),
+    if (onClickRow) {
+      onRow = (record) => {
+        return {
+          onClick: () => onClickRow(record, setSelectedRow, selectedRow),
+        };
       };
-    };
-    highlightRow = css`
-      & > td {
-        background-color: #caedff !important;
-      }
-      &:hover > td {
-        background-color: #caedff !important;
-      }
-    `;
-  }
-
-  useEffect(() => {
-    field.setValidator((value) => {
-      if (requiredValidator) {
-        return Array.isArray(value) && value.length > 0 ? null : 'The field value is required';
-      }
-      return;
-    });
-  }, [requiredValidator]);
-
-  useEffect(() => {
-    if (treeTable !== false) {
-      const keys = getIdsWithChildren(field.value?.slice?.());
-      setAllIncludesChildren(keys);
+      highlightRow = css`
+        & > td {
+          background-color: #caedff !important;
+        }
+        &:hover > td {
+          background-color: #caedff !important;
+        }
+      `;
     }
-  }, [field.value]);
-  useEffect(() => {
-    if (expandFlag) {
-      setExpandesKeys(allIncludesChildren);
-    } else {
-      setExpandesKeys([]);
-    }
-  }, [expandFlag, allIncludesChildren]);
 
-  const components = useMemo(() => {
-    return {
-      header: {
-        wrapper: (props) => {
-          return (
-            <DndContext>
-              <thead {...props} />
-            </DndContext>
-          );
+    useEffect(() => {
+      field.setValidator((value) => {
+        if (requiredValidator) {
+          return Array.isArray(value) && value.length > 0 ? null : 'The field value is required';
+        }
+        return;
+      });
+    }, [requiredValidator]);
+
+    useEffect(() => {
+      if (treeTable !== false) {
+        const keys = getIdsWithChildren(field.value?.slice?.());
+        setAllIncludesChildren(keys);
+      }
+    }, [field.value]);
+    useEffect(() => {
+      if (expandFlag) {
+        setExpandesKeys(allIncludesChildren);
+      } else {
+        setExpandesKeys([]);
+      }
+    }, [expandFlag, allIncludesChildren]);
+
+    const components = useMemo(() => {
+      return {
+        header: {
+          wrapper: (props) => {
+            return (
+              <DndContext>
+                <thead {...props} />
+              </DndContext>
+            );
+          },
+          cell: (props) => {
+            return (
+              <th
+                {...props}
+                className={cls(
+                  props.className,
+                  css`
+                    max-width: 300px;
+                    white-space: nowrap;
+                    &:hover .general-schema-designer {
+                      display: block;
+                    }
+                  `,
+                )}
+              />
+            );
+          },
         },
-        cell: (props) => {
-          return (
-            <th
+        body: {
+          wrapper: (props) => {
+            return (
+              <DndContext
+                onDragEnd={(e) => {
+                  if (!e.active || !e.over) {
+                    console.warn('move cancel');
+                    return;
+                  }
+
+                  const fromIndex = e.active?.data.current?.sortable?.index;
+                  const toIndex = e.over?.data.current?.sortable?.index;
+                  const from = field.value[fromIndex];
+                  const to = field.value[toIndex];
+                  field.move(fromIndex, toIndex);
+                  onRowDragEnd({ fromIndex, toIndex, from, to });
+                }}
+              >
+                <tbody {...props} />
+              </DndContext>
+            );
+          },
+          row: (props) => {
+            return <SortableRow {...props}></SortableRow>;
+          },
+          cell: (props) => (
+            <td
               {...props}
-              className={cls(
+              className={classNames(
                 props.className,
                 css`
                   max-width: 300px;
                   white-space: nowrap;
-                  &:hover .general-schema-designer {
-                    display: block;
+                  .nb-read-pretty-input-number {
+                    text-align: right;
                   }
                 `,
               )}
             />
-          );
+          ),
         },
-      },
-      body: {
-        wrapper: (props) => {
-          return (
-            <DndContext
-              onDragEnd={(e) => {
-                if (!e.active || !e.over) {
-                  console.warn('move cancel');
-                  return;
-                }
+      };
+    }, [field, onRowDragEnd, dragSort]);
 
-                const fromIndex = e.active?.data.current?.sortable?.index;
-                const toIndex = e.over?.data.current?.sortable?.index;
-                const from = field.value[fromIndex];
-                const to = field.value[toIndex];
-                field.move(fromIndex, toIndex);
-                onRowDragEnd({ fromIndex, toIndex, from, to });
-              }}
-            >
-              <tbody {...props} />
-            </DndContext>
-          );
-        },
-        row: (props) => {
-          return <SortableRow {...props}></SortableRow>;
-        },
-        cell: (props) => (
-          <td
-            {...props}
-            className={classNames(
-              props.className,
-              css`
-                max-width: 300px;
-                white-space: nowrap;
-                .nb-read-pretty-input-number {
-                  text-align: right;
-                }
-              `,
-            )}
-          />
-        ),
-      },
+    const defaultRowKey = (record: any) => {
+      return field.value?.indexOf?.(record);
     };
-  }, [field, onRowDragEnd, dragSort]);
 
-  const defaultRowKey = (record: any) => {
-    return field.value?.indexOf?.(record);
-  };
+    const getRowKey = (record: any) => {
+      if (typeof rowKey === 'string') {
+        return record[rowKey]?.toString();
+      } else {
+        return (rowKey ?? defaultRowKey)(record)?.toString();
+      }
+    };
 
-  const getRowKey = (record: any) => {
-    if (typeof rowKey === 'string') {
-      return record[rowKey]?.toString();
-    } else {
-      return (rowKey ?? defaultRowKey)(record)?.toString();
-    }
-  };
-
-  const restProps = {
-    rowSelection: rowSelection
-      ? {
+    const restProps = {
+      rowSelection: rowSelection
+        ? {
           type: 'checkbox',
           selectedRowKeys: selectedRowKeys,
           onChange(selectedRowKeys: any[], selectedRows: any[]) {
@@ -348,40 +349,40 @@ export const Table: any = observer((props: any) => {
                 className={classNames(
                   checked ? 'checked' : null,
                   css`
-                    position: relative;
-                    display: flex;
-                    float: left;
-                    align-items: center;
-                    justify-content: space-evenly;
-                    padding-right: 8px;
-                    .nb-table-index {
-                      opacity: 0;
-                    }
-                    &:not(.checked) {
-                      .nb-table-index {
-                        opacity: 1;
-                      }
-                    }
-                    &:hover {
+                      position: relative;
+                      display: flex;
+                      float: left;
+                      align-items: center;
+                      justify-content: space-evenly;
+                      padding-right: 8px;
                       .nb-table-index {
                         opacity: 0;
                       }
-                      .nb-origin-node {
-                        display: block;
+                      &:not(.checked) {
+                        .nb-table-index {
+                          opacity: 1;
+                        }
                       }
-                    }
-                  `,
+                      &:hover {
+                        .nb-table-index {
+                          opacity: 0;
+                        }
+                        .nb-origin-node {
+                          display: block;
+                        }
+                      }
+                    `,
                 )}
               >
                 <div
                   className={classNames(
                     checked ? 'checked' : null,
                     css`
-                      position: relative;
-                      display: flex;
-                      align-items: center;
-                      justify-content: space-evenly;
-                    `,
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-evenly;
+                      `,
                   )}
                 >
                   {dragSort && <SortHandle id={getRowKey(record)} />}
@@ -392,13 +393,13 @@ export const Table: any = observer((props: any) => {
                     'nb-origin-node',
                     checked ? 'checked' : null,
                     css`
-                      position: absolute;
-                      right: 50%;
-                      transform: translateX(50%);
-                      &:not(.checked) {
-                        display: none;
-                      }
-                    `,
+                        position: absolute;
+                        right: 50%;
+                        transform: translateX(50%);
+                        &:not(.checked) {
+                          display: none;
+                        }
+                      `,
                   )}
                 >
                   {originNode}
@@ -408,94 +409,96 @@ export const Table: any = observer((props: any) => {
           },
           ...rowSelection,
         }
-      : undefined,
-  };
+        : undefined,
+    };
 
-  const SortableWrapper = useCallback<React.FC>(
-    ({ children }) => {
-      return dragSort
-        ? React.createElement(SortableContext, {
+    const SortableWrapper = useCallback<React.FC>(
+      ({ children }) => {
+        return dragSort
+          ? React.createElement(SortableContext, {
             items: field.value.map(getRowKey),
             children: children,
           })
-        : React.createElement(React.Fragment, {
+          : React.createElement(React.Fragment, {
             children,
           });
-    },
-    [field, dragSort],
-  );
-  const fieldSchema = useFieldSchema();
-  const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock;
+      },
+      [field, dragSort],
+    );
+    const fieldSchema = useFieldSchema();
+    const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock;
 
-  const { height: tableHeight, tableSizeRefCallback } = useTableSize();
+    const { height: tableHeight, tableSizeRefCallback } = useTableSize();
 
-  const scroll = useMemo(() => {
-    return fixedBlock
-      ? {
+    const scroll = useMemo(() => {
+      return fixedBlock
+        ? {
           x: 'max-content',
           y: tableHeight,
         }
-      : {
+        : {
           x: 'max-content',
         };
-  }, [fixedBlock, tableHeight]);
+    }, [fixedBlock, tableHeight]);
 
-  return (
-    <div
-      className={css`
-        height: 100%;
-        overflow: hidden;
-        .ant-table-wrapper {
+    return (
+      <div
+        className={css`
           height: 100%;
-          .ant-spin-nested-loading {
+          overflow: hidden;
+          .ant-table-wrapper {
             height: 100%;
-            .ant-spin-container {
+            .ant-spin-nested-loading {
               height: 100%;
-              display: flex;
-              flex-direction: column;
+              .ant-spin-container {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+              }
             }
           }
-        }
-        .ant-table {
-          overflow-x: auto;
-          overflow-y: hidden;
-        }
-      `}
-    >
-      <SortableWrapper>
-        <AntdTable
-          ref={tableSizeRefCallback}
-          rowKey={rowKey ?? defaultRowKey}
-          dataSource={field?.value?.slice?.()}
-          {...others}
-          {...restProps}
-          pagination={paginationProps}
-          components={components}
-          onChange={(pagination, filters, sorter, extra) => {
-            onTableChange?.(pagination, filters, sorter, extra);
-          }}
-          onRow={onRow}
-          rowClassName={(record) => (selectedRow.includes(record[rowKey]) ? highlightRow : '')}
-          tableLayout={'auto'}
-          scroll={scroll}
-          columns={columns}
-          expandable={{
-            onExpand: (flag, record) => {
-              const newKeys = flag ? [...expandedKeys, record.id] : expandedKeys.filter((i) => record.id !== i);
-              setExpandesKeys(newKeys);
-              onExpand?.(flag, record);
-            },
-            expandedRowKeys: expandedKeys,
-          }}
-        />
-      </SortableWrapper>
-      {field.errors.length > 0 && (
-        <div className="ant-formily-item-error-help ant-formily-item-help ant-formily-item-help-enter ant-formily-item-help-enter-active">
-          {field.errors.map((error) => {
-            return error.messages.map((message) => <div>{message}</div>);
-          })}
-        </div>
-      )}
-    </div>
-  );
-});
+          .ant-table {
+            overflow-x: auto;
+            overflow-y: hidden;
+          }
+        `}
+      >
+        <SortableWrapper>
+          <AntdTable
+            ref={tableSizeRefCallback}
+            rowKey={rowKey ?? defaultRowKey}
+            dataSource={field?.value?.slice?.()}
+            {...others}
+            {...restProps}
+            pagination={paginationProps}
+            components={components}
+            onChange={(pagination, filters, sorter, extra) => {
+              onTableChange?.(pagination, filters, sorter, extra);
+            }}
+            onRow={onRow}
+            rowClassName={(record) => (selectedRow.includes(record[rowKey]) ? highlightRow : '')}
+            tableLayout={'auto'}
+            scroll={scroll}
+            columns={columns}
+            expandable={{
+              onExpand: (flag, record) => {
+                const newKeys = flag ? [...expandedKeys, record.id] : expandedKeys.filter((i) => record.id !== i);
+                setExpandesKeys(newKeys);
+                onExpand?.(flag, record);
+              },
+              expandedRowKeys: expandedKeys,
+            }}
+          />
+        </SortableWrapper>
+        {field.errors.length > 0 && (
+          <div className="ant-formily-item-error-help ant-formily-item-help ant-formily-item-help-enter ant-formily-item-help-enter-active">
+            {field.errors.map((error) => {
+              return error.messages.map((message) => <div>{message}</div>);
+            })}
+          </div>
+        )}
+      </div>
+    );
+  },
+  { displayName: 'Table' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table-v2/TableField.tsx b/packages/core/client/src/schema-component/antd/table-v2/TableField.tsx
index 89097f65c..917afe1cc 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/TableField.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/TableField.tsx
@@ -6,36 +6,42 @@ import { useCollection } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 import { ActionBar } from '../action';
 
-export const TableField: any = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  const { getField } = useCollection();
-  const field = useField<Field>();
-  const collectionField = getField(fieldSchema.name);
-  const compile = useCompile();
-  const ctx = useFormBlockContext();
-  useEffect(() => {
-    if (!field.title) {
-      field.title = compile(collectionField?.uiSchema?.title);
-    }
-    if (ctx?.field) {
-      ctx.field.added = ctx.field.added || new Set();
-      ctx.field.added.add(fieldSchema.name);
-    }
-  }, []);
-  useEffect(() => {
-    field.decoratorProps.asterisk = fieldSchema.required;
-  }, [fieldSchema.required]);
-  return <div>{props.children}</div>;
-});
+export const TableField: any = observer(
+  (props) => {
+    const fieldSchema = useFieldSchema();
+    const { getField } = useCollection();
+    const field = useField<Field>();
+    const collectionField = getField(fieldSchema.name);
+    const compile = useCompile();
+    const ctx = useFormBlockContext();
+    useEffect(() => {
+      if (!field.title) {
+        field.title = compile(collectionField?.uiSchema?.title);
+      }
+      if (ctx?.field) {
+        ctx.field.added = ctx.field.added || new Set();
+        ctx.field.added.add(fieldSchema.name);
+      }
+    }, []);
+    useEffect(() => {
+      field.decoratorProps.asterisk = fieldSchema.required;
+    }, [fieldSchema.required]);
+    return <div>{props.children}</div>;
+  },
+  { displayName: 'TableField' },
+);
 
-TableField.ActionBar = observer((props) => {
-  const form = useForm();
-  if (form.readPretty) {
-    return null;
-  }
-  return (
-    <div style={{ marginBottom: 8, marginTop: -32 }}>
-      <ActionBar {...props} />
-    </div>
-  );
-});
+TableField.ActionBar = observer(
+  (props) => {
+    const form = useForm();
+    if (form.readPretty) {
+      return null;
+    }
+    return (
+      <div style={{ marginBottom: 8, marginTop: -32 }}>
+        <ActionBar {...props} />
+      </div>
+    );
+  },
+  { displayName: 'TableField.ActionBar' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/demo3.tsx
index 05122f50b..c4ec7b365 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/demos/demo3.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/demos/demo3.tsx
@@ -4,27 +4,30 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
-  const { rowKey } = props;
-  const field = useField<ArrayField>();
-  const schema = useFieldSchema();
-  const columnSchemas = schema.reduceProperties((buf, s) => {
-    if (s['x-component'] === 'ArrayTable.Column') {
-      buf.push(s);
-    }
-    return buf;
-  }, []);
+const ArrayTable = observer(
+  (props: any) => {
+    const { rowKey } = props;
+    const field = useField<ArrayField>();
+    const schema = useFieldSchema();
+    const columnSchemas = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === 'ArrayTable.Column') {
+        buf.push(s);
+      }
+      return buf;
+    }, []);
 
-  const columns = columnSchemas.map((s) => {
-    return {
-      render: (value, record) => {
-        return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
-      },
-    } as TableColumnType<any>;
-  });
+    const columns = columnSchemas.map((s) => {
+      return {
+        render: (value, record) => {
+          return <RecursionField name={record.__path} schema={s} onlyRenderProperties />;
+        },
+      } as TableColumnType<any>;
+    });
 
-  return <Table {...props} rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+    return <Table {...props} rowKey={rowKey} columns={columns} dataSource={field.value} />;
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;
diff --git a/packages/core/client/src/schema-component/antd/table/Table.Array.tsx b/packages/core/client/src/schema-component/antd/table/Table.Array.tsx
index b398cea18..daf50e3ef 100644
--- a/packages/core/client/src/schema-component/antd/table/Table.Array.tsx
+++ b/packages/core/client/src/schema-component/antd/table/Table.Array.tsx
@@ -151,28 +151,29 @@ const useDefAction = () => {
   };
 };
 
-export const TableArray: React.FC<any> = observer((props) => {
-  const field = useField<ArrayField>();
-  const columns = useTableColumns();
-  const {
-    dragSort = false,
-    showIndex = true,
-    useSelectedRowKeys = useDef,
-    useDataSource = useDefDataSource,
-    useAction = useDefAction,
-    onChange,
-    ...others
-  } = props;
-  const [selectedRowKeys, setSelectedRowKeys] = useSelectedRowKeys();
-  useDataSource({
-    onSuccess(data) {
-      field.value = data?.data || [];
-    },
-  });
-  const { move } = useAction();
-  const restProps = {
-    rowSelection: props.rowSelection
-      ? {
+export const TableArray: React.FC<any> = observer(
+  (props) => {
+    const field = useField<ArrayField>();
+    const columns = useTableColumns();
+    const {
+      dragSort = false,
+      showIndex = true,
+      useSelectedRowKeys = useDef,
+      useDataSource = useDefDataSource,
+      useAction = useDefAction,
+      onChange,
+      ...others
+    } = props;
+    const [selectedRowKeys, setSelectedRowKeys] = useSelectedRowKeys();
+    useDataSource({
+      onSuccess(data) {
+        field.value = data?.data || [];
+      },
+    });
+    const { move } = useAction();
+    const restProps = {
+      rowSelection: props.rowSelection
+        ? {
           type: 'checkbox',
           selectedRowKeys,
           onChange(selectedRowKeys: any[]) {
@@ -189,39 +190,39 @@ export const TableArray: React.FC<any> = observer((props) => {
                 className={classNames(
                   checked ? 'checked' : null,
                   css`
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-evenly;
-                    padding-right: 8px;
-                    .nb-table-index {
-                      opacity: 0;
-                    }
-                    &:not(.checked) {
-                      .nb-table-index {
-                        opacity: 1;
-                      }
-                    }
-                    &:hover {
+                      position: relative;
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-evenly;
+                      padding-right: 8px;
                       .nb-table-index {
                         opacity: 0;
                       }
-                      .nb-origin-node {
-                        display: block;
+                      &:not(.checked) {
+                        .nb-table-index {
+                          opacity: 1;
+                        }
                       }
-                    }
-                  `,
+                      &:hover {
+                        .nb-table-index {
+                          opacity: 0;
+                        }
+                        .nb-origin-node {
+                          display: block;
+                        }
+                      }
+                    `,
                 )}
               >
                 <div
                   className={classNames(
                     checked ? 'checked' : null,
                     css`
-                      position: relative;
-                      display: flex;
-                      align-items: center;
-                      justify-content: space-evenly;
-                    `,
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-evenly;
+                      `,
                   )}
                 >
                   {dragSort && <SortHandle />}
@@ -232,13 +233,13 @@ export const TableArray: React.FC<any> = observer((props) => {
                     'nb-origin-node',
                     checked ? 'checked' : null,
                     css`
-                      position: absolute;
-                      right: 50%;
-                      transform: translateX(50%);
-                      &:not(.checked) {
-                        display: none;
-                      }
-                    `,
+                        position: absolute;
+                        right: 50%;
+                        transform: translateX(50%);
+                        &:not(.checked) {
+                          display: none;
+                        }
+                      `,
                   )}
                 >
                   {originNode}
@@ -248,43 +249,45 @@ export const TableArray: React.FC<any> = observer((props) => {
           },
           ...props.rowSelection,
         }
-      : undefined,
-  };
+        : undefined,
+    };
 
-  const defaultRowKey = (record: any) => {
-    return field.value?.indexOf?.(record);
-  };
+    const defaultRowKey = (record: any) => {
+      return field.value?.indexOf?.(record);
+    };
 
-  return (
-    <div
-      className={css`
-        .ant-table {
-          overflow-x: auto;
-          overflow-y: hidden;
-        }
-      `}
-    >
-      <ReactDragListView
-        handleSelector={'.drag-handle'}
-        onDragEnd={async (fromIndex, toIndex) => {
-          const from = field.value[fromIndex];
-          const to = field.value[toIndex];
-          field.move(fromIndex, toIndex);
-          await move(from, to);
-        }}
-        lineClassName={css`
-          border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important;
+    return (
+      <div
+        className={css`
+          .ant-table {
+            overflow-x: auto;
+            overflow-y: hidden;
+          }
         `}
       >
-        <Table
-          rowKey={defaultRowKey}
-          {...others}
-          {...restProps}
-          components={components}
-          columns={columns}
-          dataSource={field?.value?.slice?.()}
-        />
-      </ReactDragListView>
-    </div>
-  );
-});
+        <ReactDragListView
+          handleSelector={'.drag-handle'}
+          onDragEnd={async (fromIndex, toIndex) => {
+            const from = field.value[fromIndex];
+            const to = field.value[toIndex];
+            field.move(fromIndex, toIndex);
+            await move(from, to);
+          }}
+          lineClassName={css`
+            border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important;
+          `}
+        >
+          <Table
+            rowKey={defaultRowKey}
+            {...others}
+            {...restProps}
+            components={components}
+            columns={columns}
+            dataSource={field?.value?.slice?.()}
+          />
+        </ReactDragListView>
+      </div>
+    );
+  },
+  { displayName: 'TableArray' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx b/packages/core/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx
index 4974970dd..2fd39d633 100644
--- a/packages/core/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx
+++ b/packages/core/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx
@@ -42,12 +42,15 @@ export const designerCss = css`
   }
 `;
 
-export const TableColumnActionBar = observer((props) => {
-  const Designer = useDesigner();
-  return (
-    <SortableItem className={designerCss}>
-      <Designer />
-      {props.children}
-    </SortableItem>
-  );
-});
+export const TableColumnActionBar = observer(
+  (props) => {
+    const Designer = useDesigner();
+    return (
+      <SortableItem className={designerCss}>
+        <Designer />
+        {props.children}
+      </SortableItem>
+    );
+  },
+  { displayName: 'TableColumnActionBar' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table/Table.RowSelection.tsx b/packages/core/client/src/schema-component/antd/table/Table.RowSelection.tsx
index 1a541ab21..46cdd256a 100644
--- a/packages/core/client/src/schema-component/antd/table/Table.RowSelection.tsx
+++ b/packages/core/client/src/schema-component/antd/table/Table.RowSelection.tsx
@@ -9,20 +9,23 @@ type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: bool
 
 const toArr = (value: any) => (isArr(value) ? value : isValid(value) ? [value] : []);
 
-export const TableRowSelection = observer((props: Props) => {
-  const { rowKey = 'id', objectValue } = props;
-  const field = useField<Field>();
-  const rowSelection: any = {
-    type: 'checkbox',
-    ...props.rowSelection,
-    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);
-      } else {
-        props.onChange([...(objectValue ? selectedRows : selectedRowKeys)].shift());
-      }
-    },
-  };
-  return <TableVoid {...props} rowSelection={rowSelection} />;
-});
+export const TableRowSelection = observer(
+  (props: Props) => {
+    const { rowKey = 'id', objectValue } = props;
+    const field = useField<Field>();
+    const rowSelection: any = {
+      type: 'checkbox',
+      ...props.rowSelection,
+      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);
+        } else {
+          props.onChange([...(objectValue ? selectedRows : selectedRowKeys)].shift());
+        }
+      },
+    };
+    return <TableVoid {...props} rowSelection={rowSelection} />;
+  },
+  { displayName: 'TableRowSelection' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table/Table.Void.tsx b/packages/core/client/src/schema-component/antd/table/Table.Void.tsx
index 6c11408df..3ea22262b 100644
--- a/packages/core/client/src/schema-component/antd/table/Table.Void.tsx
+++ b/packages/core/client/src/schema-component/antd/table/Table.Void.tsx
@@ -80,45 +80,48 @@ const useDefSelectedRowKeys = () => {
   return [result?.state?.selectedRowKeys, (selectedRowKeys) => result?.setState?.({ selectedRowKeys })];
 };
 
-export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
-  const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const form = useMemo(() => createForm(), []);
-  const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
-  const result = useDataSource(
-    {
-      uid: fieldSchema['x-uid'],
-      onSuccess(data) {
-        form.setValues({
-          [fieldSchema.name]: data?.data,
-        });
-        if (field?.componentProps?.pagination === false) {
-          return;
-        }
-        field.componentProps.pagination = field.componentProps.pagination || {};
-        if (data?.meta?.count) {
-          field.componentProps.pagination.total = data?.meta?.count;
-        }
-        field.componentProps.pagination.current = data?.meta?.page || 1;
-        field.componentProps.pagination.pageSize = data?.meta?.pageSize || 10;
+export const TableVoid: React.FC<TableVoidProps> = observer(
+  (props) => {
+    const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
+    const field = useField<Field>();
+    const fieldSchema = useFieldSchema();
+    const form = useMemo(() => createForm(), []);
+    const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
+    const result = useDataSource(
+      {
+        uid: fieldSchema['x-uid'],
+        onSuccess(data) {
+          form.setValues({
+            [fieldSchema.name]: data?.data,
+          });
+          if (field?.componentProps?.pagination === false) {
+            return;
+          }
+          field.componentProps.pagination = field.componentProps.pagination || {};
+          if (data?.meta?.count) {
+            field.componentProps.pagination.total = data?.meta?.count;
+          }
+          field.componentProps.pagination.current = data?.meta?.page || 1;
+          field.componentProps.pagination.pageSize = data?.meta?.pageSize || 10;
+        },
       },
-    },
-    props,
-  );
-  return (
-    <AsyncDataProvider value={result}>
-      <FormContext.Provider value={form}>
-        <FieldContext.Provider value={f}>
-          <TableArray
-            {...props}
-            rowKey={rowKey}
-            useSelectedRowKeys={useSelectedRowKeys}
-            loading={result?.loading}
-            pagination={usePaginationProps(props, result)}
-          />
-        </FieldContext.Provider>
-      </FormContext.Provider>
-    </AsyncDataProvider>
-  );
-});
+      props,
+    );
+    return (
+      <AsyncDataProvider value={result}>
+        <FormContext.Provider value={form}>
+          <FieldContext.Provider value={f}>
+            <TableArray
+              {...props}
+              rowKey={rowKey}
+              useSelectedRowKeys={useSelectedRowKeys}
+              loading={result?.loading}
+              pagination={usePaginationProps(props, result)}
+            />
+          </FieldContext.Provider>
+        </FormContext.Provider>
+      </AsyncDataProvider>
+    );
+  },
+  { displayName: 'TableVoid' },
+);
diff --git a/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx
index 401060530..5946ed766 100644
--- a/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx
+++ b/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx
@@ -184,40 +184,43 @@ const schema: ISchema = {
   },
 };
 
-const DataSourceProvider = observer((props) => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [dataSource, setDataSource] = useState([]);
-  const service = useRequest(
-    () => {
-      return Promise.resolve({
-        data: [
-          { id: 1, name: 'Name1' },
-          { id: 2, name: 'Name2' },
-          { id: 3, name: 'Name3' },
-        ],
-      });
-    },
-    {
-      onSuccess(data) {
-        setDataSource(data.data);
+const DataSourceProvider = observer(
+  (props) => {
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [dataSource, setDataSource] = useState([]);
+    const service = useRequest(
+      () => {
+        return Promise.resolve({
+          data: [
+            { id: 1, name: 'Name1' },
+            { id: 2, name: 'Name2' },
+            { id: 3, name: 'Name3' },
+          ],
+        });
       },
-    },
-  );
-  console.log('dataSource1', dataSource);
-  return (
-    <DataSourceContext.Provider
-      value={{
-        service,
-        dataSource,
-        setDataSource,
-        selectedRowKeys,
-        setSelectedRowKeys,
-      }}
-    >
-      {props.children}
-    </DataSourceContext.Provider>
-  );
-});
+      {
+        onSuccess(data) {
+          setDataSource(data.data);
+        },
+      },
+    );
+    console.log('dataSource1', dataSource);
+    return (
+      <DataSourceContext.Provider
+        value={{
+          service,
+          dataSource,
+          setDataSource,
+          selectedRowKeys,
+          setSelectedRowKeys,
+        }}
+      >
+        {props.children}
+      </DataSourceContext.Provider>
+    );
+  },
+  { displayName: 'DataSourceProvider' },
+);
 
 export default () => {
   return (
diff --git a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
index 3309ac4c6..644f882de 100644
--- a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
+++ b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
@@ -9,28 +9,31 @@ import { DndContext, SortableItem } from '../../common';
 import { useDesigner } from '../../hooks/useDesigner';
 import { TabsDesigner } from './Tabs.Designer';
 
-export const Tabs: any = observer((props: TabsProps) => {
-  const fieldSchema = useFieldSchema();
-  const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
-  return (
-    <DndContext>
-      <AntdTabs
-        style={props.style}
-        tabBarExtraContent={{
-          right: render(),
-        }}
-      >
-        {fieldSchema.mapProperties((schema, key) => {
-          return (
-            <AntdTabs.TabPane tab={<RecursionField name={key} schema={schema} onlyRenderSelf />} key={key}>
-              <RecursionField name={key} schema={schema} onlyRenderProperties />
-            </AntdTabs.TabPane>
-          );
-        })}
-      </AntdTabs>
-    </DndContext>
-  );
-});
+export const Tabs: any = observer(
+  (props: TabsProps) => {
+    const fieldSchema = useFieldSchema();
+    const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
+    return (
+      <DndContext>
+        <AntdTabs
+          style={props.style}
+          tabBarExtraContent={{
+            right: render(),
+          }}
+        >
+          {fieldSchema.mapProperties((schema, key) => {
+            return (
+              <AntdTabs.TabPane tab={<RecursionField name={key} schema={schema} onlyRenderSelf />} key={key}>
+                <RecursionField name={key} schema={schema} onlyRenderProperties />
+              </AntdTabs.TabPane>
+            );
+          })}
+        </AntdTabs>
+      </DndContext>
+    );
+  },
+  { displayName: 'Tabs' },
+);
 
 const designerCss = css`
   position: relative;
@@ -79,15 +82,18 @@ const designerCss = css`
   }
 `;
 
-Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
-  const Designer = useDesigner();
-  const field = useField();
-  return (
-    <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
-      {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
-      <Designer />
-    </SortableItem>
-  );
-});
+Tabs.TabPane = observer(
+  (props: TabPaneProps & { icon?: any }) => {
+    const Designer = useDesigner();
+    const field = useField();
+    return (
+      <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
+        {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
+        <Designer />
+      </SortableItem>
+    );
+  },
+  { displayName: 'TabPane' },
+);
 
 Tabs.Designer = TabsDesigner;
diff --git a/packages/core/client/src/schema-component/antd/tree-select/ReadPretty.tsx b/packages/core/client/src/schema-component/antd/tree-select/ReadPretty.tsx
index 3ee56a384..6e2d14c56 100644
--- a/packages/core/client/src/schema-component/antd/tree-select/ReadPretty.tsx
+++ b/packages/core/client/src/schema-component/antd/tree-select/ReadPretty.tsx
@@ -7,50 +7,53 @@ import { TreeSelectProps } from 'antd/lib/tree-select';
 import cls from 'classnames';
 import React from 'react';
 
-export const ReadPretty: React.FC<TreeSelectProps<any>> = observer((props) => {
-  const field = useField<Field>();
-  const { placeholder } = props;
-  const prefixCls = usePrefixCls('description-tree-select', props);
-  const dataSource = field?.dataSource?.length ? field.dataSource : props?.treeData?.length ? props.treeData : [];
-  const getSelected = () => {
-    const value = props.value;
-    if (props.multiple) {
-      if (props.labelInValue) {
-        return isArr(value) ? value : [];
+export const ReadPretty: React.FC<TreeSelectProps<any>> = observer(
+  (props) => {
+    const field = useField<Field>();
+    const { placeholder } = props;
+    const prefixCls = usePrefixCls('description-tree-select', props);
+    const dataSource = field?.dataSource?.length ? field.dataSource : props?.treeData?.length ? props.treeData : [];
+    const getSelected = () => {
+      const value = props.value;
+      if (props.multiple) {
+        if (props.labelInValue) {
+          return isArr(value) ? value : [];
+        } else {
+          return isArr(value) ? value.map((val) => ({ label: val, value: val })) : [];
+        }
       } else {
-        return isArr(value) ? value.map((val) => ({ label: val, value: val })) : [];
+        if (props.labelInValue) {
+          return value ? [value] : [];
+        } else {
+          return value ? [{ label: value, value }] : [];
+        }
       }
-    } else {
-      if (props.labelInValue) {
-        return value ? [value] : [];
-      } else {
-        return value ? [{ label: value, value }] : [];
-      }
-    }
-  };
+    };
 
-  const findLabel = (value: any, dataSource: any[]) => {
-    for (let i = 0; i < dataSource?.length; i++) {
-      const item = dataSource[i];
-      if (item?.value === value) {
-        return item?.label;
-      } else {
-        const childLabel = findLabel(value, item?.children);
-        if (childLabel) return childLabel;
+    const findLabel = (value: any, dataSource: any[]) => {
+      for (let i = 0; i < dataSource?.length; i++) {
+        const item = dataSource[i];
+        if (item?.value === value) {
+          return item?.label;
+        } else {
+          const childLabel = findLabel(value, item?.children);
+          if (childLabel) return childLabel;
+        }
       }
-    }
-  };
+    };
 
-  const getLabels = () => {
-    const selected = getSelected();
-    if (!selected?.length) return <Tag>{placeholder}</Tag>;
-    return selected.map(({ value, label }, key) => {
-      return <Tag key={key}>{findLabel(value, dataSource) || label || placeholder}</Tag>;
-    });
-  };
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {getLabels()}
-    </div>
-  );
-});
+    const getLabels = () => {
+      const selected = getSelected();
+      if (!selected?.length) return <Tag>{placeholder}</Tag>;
+      return selected.map(({ value, label }, key) => {
+        return <Tag key={key}>{findLabel(value, dataSource) || label || placeholder}</Tag>;
+      });
+    };
+    return (
+      <div className={cls(prefixCls, props.className)} style={props.style}>
+        {getLabels()}
+      </div>
+    );
+  },
+  { displayName: 'ReadPretty' },
+);
diff --git a/packages/core/client/src/schema-component/common/dnd-context/index.tsx b/packages/core/client/src/schema-component/common/dnd-context/index.tsx
index 7ff6c772e..4d2090cad 100644
--- a/packages/core/client/src/schema-component/common/dnd-context/index.tsx
+++ b/packages/core/client/src/schema-component/common/dnd-context/index.tsx
@@ -59,32 +59,35 @@ const useDragEnd = (props?: any) => {
   };
 };
 
-export const DndContext = observer((props: Props) => {
-  const { t } = useTranslation();
-  const [visible, setVisible] = useState(true);
-  return (
-    <DndKitContext
-      collisionDetection={rectIntersection}
-      {...props}
-      onDragStart={(event) => {
-        const { active } = event;
-        const activeSchema = active?.data?.current?.schema;
-        setVisible(!!activeSchema);
-        if (props?.onDragStart) {
-          props?.onDragStart?.(event);
-        }
-      }}
-      onDragEnd={useDragEnd(props)}
-    >
-      <DragOverlay
-        dropAnimation={{
-          duration: 10,
-          easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+export const DndContext = observer(
+  (props: Props) => {
+    const { t } = useTranslation();
+    const [visible, setVisible] = useState(true);
+    return (
+      <DndKitContext
+        collisionDetection={rectIntersection}
+        {...props}
+        onDragStart={(event) => {
+          const { active } = event;
+          const activeSchema = active?.data?.current?.schema;
+          setVisible(!!activeSchema);
+          if (props?.onDragStart) {
+            props?.onDragStart?.(event);
+          }
         }}
+        onDragEnd={useDragEnd(props)}
       >
-        {visible && <span style={{ whiteSpace: 'nowrap' }}>{t('Dragging')}</span>}
-      </DragOverlay>
-      {props.children}
-    </DndKitContext>
-  );
-});
+        <DragOverlay
+          dropAnimation={{
+            duration: 10,
+            easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+          }}
+        >
+          {visible && <span style={{ whiteSpace: 'nowrap' }}>{t('Dragging')}</span>}
+        </DragOverlay>
+        {props.children}
+      </DndKitContext>
+    );
+  },
+  { displayName: 'DndContext' },
+);
diff --git a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
index 761783c3d..d0d0263fd 100644
--- a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
+++ b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
@@ -55,21 +55,24 @@ const useSortableItemId = (props) => {
   return field.address.toString();
 };
 
-export const SortableItem: React.FC<any> = observer((props) => {
-  const { schema, id, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
-  return (
-    <SortableProvider
-      id={id}
-      data={{
-        insertAdjacent: 'afterEnd',
-        schema: schema,
-        removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
-      }}
-    >
-      <Sortable {...others}>{props.children}</Sortable>
-    </SortableProvider>
-  );
-});
+export const SortableItem: React.FC<any> = observer(
+  (props) => {
+    const { schema, id, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
+    return (
+      <SortableProvider
+        id={id}
+        data={{
+          insertAdjacent: 'afterEnd',
+          schema: schema,
+          removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
+        }}
+      >
+        <Sortable {...others}>{props.children}</Sortable>
+      </SortableProvider>
+    );
+  },
+  { displayName: 'SortableItem' },
+);
 
 export const DragHandler = (props) => {
   const { draggable } = useContext(SortableContext);
diff --git a/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx b/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
index 152be0322..8e5918644 100644
--- a/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
+++ b/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
@@ -1,16 +1,22 @@
-import { SchemaExpressionScopeContext, SchemaOptionsContext } from '@formily/react';
+import { ExpressionScope, SchemaComponentsContext, SchemaOptionsContext } from '@formily/react';
 import React, { useContext } from 'react';
 import { ISchemaComponentOptionsProps } from '../types';
 
-export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = (props) => {
-  const { inherit } = props;
+const useSchemaOptionsContext = () => {
   const options = useContext(SchemaOptionsContext);
-  const expressionScope = useContext(SchemaExpressionScopeContext);
-  const scope = { ...options?.scope, ...expressionScope, ...props.scope };
-  const components = { ...options?.components, ...props.components };
+  return options || {};
+};
+
+export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = (props) => {
+  const { children } = props;
+  const options = useSchemaOptionsContext();
+  const components = { ...options.components, ...props.components };
+  const scope = { ...options.scope, ...props.scope };
   return (
     <SchemaOptionsContext.Provider value={{ scope, components }}>
-      <SchemaExpressionScopeContext.Provider value={scope}>{props.children}</SchemaExpressionScopeContext.Provider>
+      <SchemaComponentsContext.Provider value={components}>
+        <ExpressionScope value={scope}>{children}</ExpressionScope>
+      </SchemaComponentsContext.Provider>
     </SchemaOptionsContext.Provider>
   );
 };
diff --git a/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx b/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
index 36b470a6b..fba98a941 100644
--- a/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
+++ b/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
@@ -14,18 +14,30 @@ const randomString = (prefix = '') => {
 
 Schema.silent(true);
 
+const results = {};
+
 const Registry = {
   silent: true,
   compile(expression: string, scope = {}) {
-    if (Registry.silent) {
-      try {
+    const fn = () => {
+      if (Registry.silent) {
+        try {
+          return new Function('$root', `with($root) { return (${expression}); }`)(scope);
+        } catch {
+          return `{{${expression}}}`;
+        }
+      } else {
         return new Function('$root', `with($root) { return (${expression}); }`)(scope);
-      } catch {
-        return `{{${expression}}}`;
       }
-    } else {
-      return new Function('$root', `with($root) { return (${expression}); }`)(scope);
+    };
+    if (results[expression]) {
+      return results[expression];
     }
+    if (expression.trim().startsWith('t(')) {
+      results[expression] = fn();
+      return results[expression];
+    }
+    return fn();
   },
 };
 
diff --git a/packages/core/client/src/schema-component/demos/demo1.tsx b/packages/core/client/src/schema-component/demos/demo1.tsx
index 22c423ef3..a46f567b6 100644
--- a/packages/core/client/src/schema-component/demos/demo1.tsx
+++ b/packages/core/client/src/schema-component/demos/demo1.tsx
@@ -7,58 +7,64 @@ import { observer, Schema, useFieldSchema } from '@formily/react';
 import { Button, Space } from 'antd';
 import { uid } from '@formily/shared';
 
-const Hello = observer((props) => {
-  const { insertAdjacent } = useDesignable();
-  const fieldSchema = useFieldSchema();
-  return (
-    <div>
-      <h1>{fieldSchema.name}</h1>
-      <Space>
-        <Button
-          onClick={() => {
-            insertAdjacent('beforeBegin', {
-              'x-component': 'Hello',
-            });
-          }}
-        >
-          before begin
-        </Button>
-        <Button
-          onClick={() => {
-            insertAdjacent('afterBegin', {
-              'x-component': 'Hello',
-            });
-          }}
-        >
-          after begin
-        </Button>
-        <Button
-          onClick={() => {
-            insertAdjacent('beforeEnd', {
-              'x-component': 'Hello',
-            });
-          }}
-        >
-          before end
-        </Button>
-        <Button
-          onClick={() => {
-            insertAdjacent('afterEnd', {
-              'x-component': 'Hello',
-            });
-          }}
-        >
-          after end
-        </Button>
-      </Space>
-      <div style={{ margin: 50 }}>{props.children}</div>
-    </div>
-  );
-});
+const Hello = observer(
+  (props) => {
+    const { insertAdjacent } = useDesignable();
+    const fieldSchema = useFieldSchema();
+    return (
+      <div>
+        <h1>{fieldSchema.name}</h1>
+        <Space>
+          <Button
+            onClick={() => {
+              insertAdjacent('beforeBegin', {
+                'x-component': 'Hello',
+              });
+            }}
+          >
+            before begin
+          </Button>
+          <Button
+            onClick={() => {
+              insertAdjacent('afterBegin', {
+                'x-component': 'Hello',
+              });
+            }}
+          >
+            after begin
+          </Button>
+          <Button
+            onClick={() => {
+              insertAdjacent('beforeEnd', {
+                'x-component': 'Hello',
+              });
+            }}
+          >
+            before end
+          </Button>
+          <Button
+            onClick={() => {
+              insertAdjacent('afterEnd', {
+                'x-component': 'Hello',
+              });
+            }}
+          >
+            after end
+          </Button>
+        </Space>
+        <div style={{ margin: 50 }}>{props.children}</div>
+      </div>
+    );
+  },
+  { displayName: 'Hello' },
+);
 
-const Page = observer((props) => {
-  return <div>{props.children}</div>;
-});
+const Page = observer(
+  (props) => {
+    return <div>{props.children}</div>;
+  },
+  { displayName: 'Page' },
+);
 
 export default function App() {
   return (
diff --git a/packages/core/client/src/schema-component/hooks/useCompile.ts b/packages/core/client/src/schema-component/hooks/useCompile.ts
index 922ef9885..0d60c7d2a 100644
--- a/packages/core/client/src/schema-component/hooks/useCompile.ts
+++ b/packages/core/client/src/schema-component/hooks/useCompile.ts
@@ -1,13 +1,47 @@
 import { Schema, SchemaExpressionScopeContext, SchemaOptionsContext } from '@formily/react';
-import { useContext } from 'react';
+import { useContext, isValidElement } from 'react';
+
+const compileCache = {};
 
 export const useCompile = () => {
   const options = useContext(SchemaOptionsContext);
   const scope = useContext(SchemaExpressionScopeContext);
   return (source: any, ext?: any) => {
-    if (!source) {
-      return source;
+    let shouldCompile = false;
+    let cacheKey: string;
+
+    // source is i18n, for example: {{ t('Add new') }}
+    if (typeof source === 'string' && source.startsWith('{{')) {
+      shouldCompile = true;
+      cacheKey = source;
     }
-    return Schema.compile(source, { ...options.scope, ...scope, ...ext });
+
+    // source is Component Object, for example: { 'x-component': "Cascader", type: "array", title: "所属地区(行政区划)" }
+    if (source && typeof source === 'object' && !isValidElement(source)) {
+      shouldCompile = true;
+      cacheKey = JSON.stringify(source);
+    }
+
+    // source is Array, for example: [{ 'title': "{{ ('Admin')}}", name: 'admin' }, { 'title': "{{ ('Root')}}", name: 'root' }]
+    if (Array.isArray(source)) {
+      shouldCompile = true;
+    }
+
+    if (shouldCompile) {
+      const mergedScope = { ...options.scope, ...scope, ...ext };
+      if (!cacheKey) {
+        return Schema.compile(source, mergedScope);
+      }
+      try {
+        compileCache[cacheKey] = compileCache[cacheKey] || Schema.compile(source, mergedScope);
+        return compileCache[cacheKey];
+      } catch (e) {
+        console.log('useCompile error', source, e);
+        return Schema.compile(source, mergedScope);
+      }
+    }
+
+    // source is: plain object、string、number、boolean、undefined、null
+    return source;
   };
 };
diff --git a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
index 8b1130ed6..2b71c8f76 100644
--- a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
+++ b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
@@ -22,134 +22,137 @@ export const SchemaInitializer = () => null;
 
 const menuItemGroupCss = 'nb-menu-item-group';
 
-SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
-  const {
-    title,
-    insert,
-    wrap = defaultWrap,
-    items = [],
-    insertPosition = 'beforeEnd',
-    dropdown,
-    component,
-    style,
-    icon,
-    onSuccess,
-    ...others
-  } = props;
-  const compile = useCompile();
-  const { insertAdjacent, findComponent, designable } = useDesignable();
-  const [visible, setVisible] = useState(false);
-  const insertSchema = (schema) => {
-    if (props.insert) {
-      props.insert(wrap(schema));
-    } else {
-      insertAdjacent(insertPosition, wrap(schema), { onSuccess });
-    }
-  };
-  const renderItems = (items: any) => {
-    return items
-      .filter((v) => {
-        return v && (v?.visible ? v.visible() : true);
-      })
-      ?.map((item, indexA) => {
-        if (item.type === 'divider') {
-          return <Menu.Divider key={item.key || `item-${indexA}`} />;
-        }
-        if (item.type === 'item' && item.component) {
-          const Component = findComponent(item.component);
-          item.key = `${item.key || item.title}-${indexA}`;
-          return (
-            Component && (
-              <SchemaInitializerItemContext.Provider
-                key={item.key}
-                value={{
-                  index: indexA,
-                  item,
-                  info: item,
-                  insert: insertSchema,
-                }}
-              >
-                <Component
-                  {...item}
-                  item={{
-                    ...item,
-                    title: compile(item.title),
+SchemaInitializer.Button = observer(
+  (props: SchemaInitializerButtonProps) => {
+    const {
+      title,
+      insert,
+      wrap = defaultWrap,
+      items = [],
+      insertPosition = 'beforeEnd',
+      dropdown,
+      component,
+      style,
+      icon,
+      onSuccess,
+      ...others
+    } = props;
+    const compile = useCompile();
+    const { insertAdjacent, findComponent, designable } = useDesignable();
+    const [visible, setVisible] = useState(false);
+    const insertSchema = (schema) => {
+      if (props.insert) {
+        props.insert(wrap(schema));
+      } else {
+        insertAdjacent(insertPosition, wrap(schema), { onSuccess });
+      }
+    };
+    const renderItems = (items: any) => {
+      return items
+        .filter((v) => {
+          return v && (v?.visible ? v.visible() : true);
+        })
+        ?.map((item, indexA) => {
+          if (item.type === 'divider') {
+            return <Menu.Divider key={item.key || `item-${indexA}`} />;
+          }
+          if (item.type === 'item' && item.component) {
+            const Component = findComponent(item.component);
+            item.key = `${item.key || item.title}-${indexA}`;
+            return (
+              Component && (
+                <SchemaInitializerItemContext.Provider
+                  key={item.key}
+                  value={{
+                    index: indexA,
+                    item,
+                    info: item,
+                    insert: insertSchema,
                   }}
-                  insert={insertSchema}
-                />
-              </SchemaInitializerItemContext.Provider>
-            )
-          );
-        }
-        if (item.type === 'itemGroup') {
-          return (
-            !!item.children?.length && (
-              <Menu.ItemGroup key={item.key || `item-group-${indexA}`} title={compile(item.title)}>
-                {renderItems(item.children)}
-              </Menu.ItemGroup>
-            )
-          );
-        }
-        if (item.type === 'subMenu') {
-          return (
-            !!item.children?.length && (
-              <Menu.SubMenu
-                key={item.key || `item-group-${indexA}`}
-                title={compile(item.title)}
-                popupClassName={menuItemGroupCss}
-              >
-                {renderItems(item.children)}
-              </Menu.SubMenu>
-            )
-          );
-        }
-      });
-  };
-  const menu = <Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>{renderItems(items)}</Menu>;
-  if (!designable && props.designable !== true) {
-    return null;
-  }
-  return (
-    <SchemaInitializerButtonContext.Provider value={{ visible, setVisible }}>
-      <Dropdown
-        className={classNames('nb-schema-initializer-button')}
-        openClassName={`nb-schema-initializer-button-open`}
-        overlayClassName={classNames(
-          'nb-schema-initializer-button-overlay',
-          css`
-            .ant-dropdown-menu-item-group-list {
-              max-height: 40vh;
-              overflow: auto;
-            }
-          `,
-        )}
-        open={visible}
-        onOpenChange={(visible) => {
-          setVisible(visible);
-        }}
-        {...dropdown}
-        overlay={menu}
-      >
-        {component ? (
-          component
-        ) : (
-          <Button
-            type={'dashed'}
-            style={{
-              borderColor: '#f18b62',
-              color: '#f18b62',
-              ...style,
-            }}
-            {...others}
-            icon={<Icon type={icon as string} />}
-          >
-            {compile(props.children || props.title)}
-          </Button>
-        )}
-      </Dropdown>
-    </SchemaInitializerButtonContext.Provider>
-  );
-});
+                >
+                  <Component
+                    {...item}
+                    item={{
+                      ...item,
+                      title: compile(item.title),
+                    }}
+                    insert={insertSchema}
+                  />
+                </SchemaInitializerItemContext.Provider>
+              )
+            );
+          }
+          if (item.type === 'itemGroup') {
+            return (
+              !!item.children?.length && (
+                <Menu.ItemGroup key={item.key || `item-group-${indexA}`} title={compile(item.title)}>
+                  {renderItems(item.children)}
+                </Menu.ItemGroup>
+              )
+            );
+          }
+          if (item.type === 'subMenu') {
+            return (
+              !!item.children?.length && (
+                <Menu.SubMenu
+                  key={item.key || `item-group-${indexA}`}
+                  title={compile(item.title)}
+                  popupClassName={menuItemGroupCss}
+                >
+                  {renderItems(item.children)}
+                </Menu.SubMenu>
+              )
+            );
+          }
+        });
+    };
+    const menu = <Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>{renderItems(items)}</Menu>;
+    if (!designable && props.designable !== true) {
+      return null;
+    }
+    return (
+      <SchemaInitializerButtonContext.Provider value={{ visible, setVisible }}>
+        <Dropdown
+          className={classNames('nb-schema-initializer-button')}
+          openClassName={`nb-schema-initializer-button-open`}
+          overlayClassName={classNames(
+            'nb-schema-initializer-button-overlay',
+            css`
+              .ant-dropdown-menu-item-group-list {
+                max-height: 40vh;
+                overflow: auto;
+              }
+            `,
+          )}
+          open={visible}
+          onOpenChange={(visible) => {
+            setVisible(visible);
+          }}
+          {...dropdown}
+          overlay={menu}
+        >
+          {component ? (
+            component
+          ) : (
+            <Button
+              type={'dashed'}
+              style={{
+                borderColor: '#f18b62',
+                color: '#f18b62',
+                ...style,
+              }}
+              {...others}
+              icon={<Icon type={icon as string} />}
+            >
+              {compile(props.children || props.title)}
+            </Button>
+          )}
+        </Dropdown>
+      </SchemaInitializerButtonContext.Provider>
+    );
+  },
+  { displayName: 'SchemaInitializer.Button' },
+);
 
 SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
   const { index, info } = useContext(SchemaInitializerItemContext);
diff --git a/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx b/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx
index f7b534250..481ee9f61 100644
--- a/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx
+++ b/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx
@@ -80,146 +80,152 @@ const actionAclCheck = (actionPath) => {
   return true;
 };
 
-export const CreateRecordAction = observer((props: any) => {
-  const [visible, setVisible] = useState(false);
-  const collection = useCollection();
-  const fieldSchema = useFieldSchema();
-  const field: any = useField();
-  const [currentCollection, setCurrentCollection] = useState(collection.name);
-  const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
-  const values = useRecord();
-  const ctx = useActionContext();
-  useEffect(() => {
-    field.linkageProperty = {};
-    linkageRules
-      .filter((k) => !k.disabled)
-      .map((v) => {
-        return v.actions?.map((h) => {
-          linkageAction(h.operator, field, v.condition, values);
+export const CreateRecordAction = observer(
+  (props: any) => {
+    const [visible, setVisible] = useState(false);
+    const collection = useCollection();
+    const fieldSchema = useFieldSchema();
+    const field: any = useField();
+    const [currentCollection, setCurrentCollection] = useState(collection.name);
+    const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
+    const values = useRecord();
+    const ctx = useActionContext();
+    useEffect(() => {
+      field.linkageProperty = {};
+      linkageRules
+        .filter((k) => !k.disabled)
+        .map((v) => {
+          return v.actions?.map((h) => {
+            linkageAction(h.operator, field, v.condition, values);
+          });
         });
-      });
-  }, [linkageRules, values]);
-  return (
-    <div className={actionDesignerCss}>
-      <ActionContext.Provider value={{ ...ctx, visible, setVisible }}>
-        <CreateAction
-          {...props}
-          onClick={(name) => {
-            setVisible(true);
-            setCurrentCollection(name);
-          }}
-        />
-        <CollectionProvider name={currentCollection}>
-          <RecursionField schema={fieldSchema} basePath={field.address} onlyRenderProperties />
-        </CollectionProvider>
-      </ActionContext.Provider>
-    </div>
-  );
-});
-
-export const CreateAction = observer((props: any) => {
-  const { onClick } = props;
-  const collection = useCollection();
-  const fieldSchema = useFieldSchema();
-  const enableChildren = fieldSchema['x-enable-children'] || [];
-  const allowAddToCurrent = fieldSchema?.['x-allow-add-to-current'];
-  const field: any = useField();
-  const componentType = field.componentProps.type || 'primary';
-  const { getChildrenCollections } = useCollectionManager();
-  const totalChildCollections = getChildrenCollections(collection.name);
-  const inheritsCollections = enableChildren
-    .map((k) => {
-      if (!k) {
-        return;
-      }
-      const childCollection = totalChildCollections.find((j) => j.name === k.collection);
-      if (!childCollection) {
-        return;
-      }
-      return {
-        ...childCollection,
-        title: k.title || childCollection.title,
-      };
-    })
-    .filter((v) => {
-      return v && actionAclCheck(`${v.name}:create`);
-    });
-  const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
-  const values = useRecord();
-  const compile = useCompile();
-  const { designable } = useDesignable();
-  const icon = props.icon || <PlusOutlined />;
-  const menu = (
-    <Menu>
-      {inheritsCollections.map((option) => {
-        return (
-          <Menu.Item
-            key={option.name}
-            onClick={(info) => {
-              onClick?.(option.name);
+    }, [linkageRules, values]);
+    return (
+      <div className={actionDesignerCss}>
+        <ActionContext.Provider value={{ ...ctx, visible, setVisible }}>
+          <CreateAction
+            {...props}
+            onClick={(name) => {
+              setVisible(true);
+              setCurrentCollection(name);
             }}
-          >
-            {compile(option.title)}
-          </Menu.Item>
-        );
-      })}
-    </Menu>
-  );
-  useEffect(() => {
-    field.linkageProperty = {};
-    linkageRules
-      .filter((k) => !k.disabled)
-      .map((v) => {
-        return v.actions?.map((h) => {
-          linkageAction(h.operator, field, v.condition, values);
-        });
+          />
+          <CollectionProvider name={currentCollection}>
+            <RecursionField schema={fieldSchema} basePath={field.address} onlyRenderProperties />
+          </CollectionProvider>
+        </ActionContext.Provider>
+      </div>
+    );
+  },
+  { displayName: 'CreateRecordAction' },
+);
+
+export const CreateAction = observer(
+  (props: any) => {
+    const { onClick } = props;
+    const collection = useCollection();
+    const fieldSchema = useFieldSchema();
+    const enableChildren = fieldSchema['x-enable-children'] || [];
+    const allowAddToCurrent = fieldSchema?.['x-allow-add-to-current'];
+    const field: any = useField();
+    const componentType = field.componentProps.type || 'primary';
+    const { getChildrenCollections } = useCollectionManager();
+    const totalChildCollections = getChildrenCollections(collection.name);
+    const inheritsCollections = enableChildren
+      .map((k) => {
+        if (!k) {
+          return;
+        }
+        const childCollection = totalChildCollections.find((j) => j.name === k.collection);
+        if (!childCollection) {
+          return;
+        }
+        return {
+          ...childCollection,
+          title: k.title || childCollection.title,
+        };
+      })
+      .filter((v) => {
+        return v && actionAclCheck(`${v.name}:create`);
       });
-  }, [linkageRules, values]);
-  return (
-    <div className={actionDesignerCss}>
-      {inheritsCollections?.length > 0 ? (
-        allowAddToCurrent === undefined || allowAddToCurrent ? (
-          <Dropdown.Button
+    const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
+    const values = useRecord();
+    const compile = useCompile();
+    const { designable } = useDesignable();
+    const icon = props.icon || <PlusOutlined />;
+    const menu = (
+      <Menu>
+        {inheritsCollections.map((option) => {
+          return (
+            <Menu.Item
+              key={option.name}
+              onClick={(info) => {
+                onClick?.(option.name);
+              }}
+            >
+              {compile(option.title)}
+            </Menu.Item>
+          );
+        })}
+      </Menu>
+    );
+    useEffect(() => {
+      field.linkageProperty = {};
+      linkageRules
+        .filter((k) => !k.disabled)
+        .map((v) => {
+          return v.actions?.map((h) => {
+            linkageAction(h.operator, field, v.condition, values);
+          });
+        });
+    }, [linkageRules, values]);
+    return (
+      <div className={actionDesignerCss}>
+        {inheritsCollections?.length > 0 ? (
+          allowAddToCurrent === undefined || allowAddToCurrent ? (
+            <Dropdown.Button
+              type={componentType}
+              icon={<DownOutlined />}
+              buttonsRender={([leftButton, rightButton]) => [
+                leftButton,
+                React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: false }),
+              ]}
+              overlay={menu}
+              onClick={(info) => {
+                onClick?.(collection.name);
+              }}
+            >
+              {icon}
+              {props.children}
+            </Dropdown.Button>
+          ) : (
+            <Dropdown overlay={menu}>
+              {
+                <Button icon={icon} type={componentType}>
+                  {props.children} <DownOutlined />
+                </Button>
+              }
+            </Dropdown>
+          )
+        ) : (
+          <Button
             type={componentType}
-            icon={<DownOutlined />}
-            buttonsRender={([leftButton, rightButton]) => [
-              leftButton,
-              React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: false }),
-            ]}
-            overlay={menu}
+            disabled={field.disabled}
+            danger={componentType === 'danger'}
+            icon={icon}
             onClick={(info) => {
               onClick?.(collection.name);
             }}
+            style={{
+              display: !designable && field?.data?.hidden && 'none',
+              opacity: designable && field?.data?.hidden && 0.1,
+            }}
           >
-            {icon}
             {props.children}
-          </Dropdown.Button>
-        ) : (
-          <Dropdown overlay={menu}>
-            {
-              <Button icon={icon} type={componentType}>
-                {props.children} <DownOutlined />
-              </Button>
-            }
-          </Dropdown>
-        )
-      ) : (
-        <Button
-          type={componentType}
-          disabled={field.disabled}
-          danger={componentType === 'danger'}
-          icon={icon}
-          onClick={(info) => {
-            onClick?.(collection.name);
-          }}
-          style={{
-            display: !designable && field?.data?.hidden && 'none',
-            opacity: designable && field?.data?.hidden && 0.1,
-          }}
-        >
-          {props.children}
-        </Button>
-      )}
-    </div>
-  );
-});
+          </Button>
+        )}
+      </div>
+    );
+  },
+  { displayName: 'CreateAction' },
+);
diff --git a/packages/core/client/src/schema-initializer/demos/demo1.tsx b/packages/core/client/src/schema-initializer/demos/demo1.tsx
index 8801f7a4a..a8b5824a7 100644
--- a/packages/core/client/src/schema-initializer/demos/demo1.tsx
+++ b/packages/core/client/src/schema-initializer/demos/demo1.tsx
@@ -10,14 +10,17 @@ import {
 } from '@nocobase/client';
 import React from 'react';
 
-const Hello = observer((props) => {
-  const field = useField<Field>();
-  return (
-    <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
-      {field.title}
-    </div>
-  );
-});
+const Hello = observer(
+  (props) => {
+    const field = useField<Field>();
+    return (
+      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
+        {field.title}
+      </div>
+    );
+  },
+  { displayName: 'Hello' },
+);
 
 const TableBlockInitializer = SchemaInitializer.itemWrap((props) => {
   const { insert } = props;
@@ -84,10 +87,13 @@ const initializers = {
   },
 };
 
-const AddBlockButton = observer((props: any) => {
-  const { render } = useSchemaInitializer('AddBlock');
-  return <>{render()}</>;
-});
+const AddBlockButton = observer(
+  (props: any) => {
+    const { render } = useSchemaInitializer('AddBlock');
+    return <>{render()}</>;
+  },
+  { displayName: 'AddBlockButton' },
+);
 
 export default function App() {
   return (
diff --git a/packages/core/client/src/schema-items/GeneralSchemaItems.tsx b/packages/core/client/src/schema-items/GeneralSchemaItems.tsx
index 996b0f0c8..c18e0bc97 100644
--- a/packages/core/client/src/schema-items/GeneralSchemaItems.tsx
+++ b/packages/core/client/src/schema-items/GeneralSchemaItems.tsx
@@ -8,154 +8,157 @@ import { SchemaSettings } from '../schema-settings';
 
 export const GeneralSchemaItems: React.FC<{
   required?: boolean;
-}> = observer((props) => {
-  const { required = true } = props;
-  const { getCollectionJoinField } = useCollectionManager();
-  const { getField } = useCollection();
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const { t } = useTranslation();
-  const { dn, refresh } = useDesignable();
-  const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
-  return (
-    <>
-      {collectionField && (
-        <SchemaSettings.ModalItem
-          key="edit-field-title"
-          title={t('Edit field title')}
-          schema={
-            {
-              type: 'object',
-              title: t('Edit field title'),
-              properties: {
-                title: {
-                  title: t('Field title'),
-                  default: field?.title,
-                  description: `${t('Original field title: ')}${collectionField?.uiSchema?.title}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input',
-                  'x-component-props': {},
+}> = observer(
+  (props) => {
+    const { required = true } = props;
+    const { getCollectionJoinField } = useCollectionManager();
+    const { getField } = useCollection();
+    const field = useField<Field>();
+    const fieldSchema = useFieldSchema();
+    const { t } = useTranslation();
+    const { dn, refresh } = useDesignable();
+    const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
+    return (
+      <>
+        {collectionField && (
+          <SchemaSettings.ModalItem
+            key="edit-field-title"
+            title={t('Edit field title')}
+            schema={
+              {
+                type: 'object',
+                title: t('Edit field title'),
+                properties: {
+                  title: {
+                    title: t('Field title'),
+                    default: field?.title,
+                    description: `${t('Original field title: ')}${collectionField?.uiSchema?.title}`,
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input',
+                    'x-component-props': {},
+                  },
+                },
+              } as ISchema
+            }
+            onSubmit={({ title }) => {
+              if (title) {
+                field.title = title;
+                fieldSchema.title = title;
+                dn.emit('patch', {
+                  schema: {
+                    'x-uid': fieldSchema['x-uid'],
+                    title: fieldSchema.title,
+                  },
+                });
+              }
+              dn.refresh();
+            }}
+          />
+        )}
+        <SchemaSettings.SwitchItem
+          checked={fieldSchema['x-decorator-props'] ?? true}
+          title={t('Display title')}
+          onChange={(checked) => {
+            fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
+            fieldSchema['x-decorator-props']['showTitle'] = checked;
+            field.decoratorProps.showTitle = checked;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-decorator-props': {
+                  ...fieldSchema['x-decorator-props'],
+                  showTitle: checked,
                 },
               },
-            } as ISchema
-          }
-          onSubmit={({ title }) => {
-            if (title) {
-              field.title = title;
-              fieldSchema.title = title;
+            });
+            dn.refresh();
+          }}
+        ></SchemaSettings.SwitchItem>
+        {!field.readPretty && (
+          <SchemaSettings.ModalItem
+            key="edit-description"
+            title={t('Edit description')}
+            schema={
+              {
+                type: 'object',
+                title: t('Edit description'),
+                properties: {
+                  description: {
+                    // title: t('Description'),
+                    default: field?.description,
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input.TextArea',
+                    'x-component-props': {},
+                  },
+                },
+              } as ISchema
+            }
+            onSubmit={({ description }) => {
+              field.description = description;
+              fieldSchema.description = description;
               dn.emit('patch', {
                 schema: {
                   'x-uid': fieldSchema['x-uid'],
-                  title: fieldSchema.title,
+                  description: fieldSchema.description,
                 },
               });
+              dn.refresh();
+            }}
+          />
+        )}
+        {field.readPretty && (
+          <SchemaSettings.ModalItem
+            key="edit-tooltip"
+            title={t('Edit tooltip')}
+            schema={
+              {
+                type: 'object',
+                title: t('Edit description'),
+                properties: {
+                  tooltip: {
+                    default: fieldSchema?.['x-decorator-props']?.tooltip,
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input.TextArea',
+                    'x-component-props': {},
+                  },
+                },
+              } as ISchema
             }
-            dn.refresh();
-          }}
-        />
-      )}
-      <SchemaSettings.SwitchItem
-        checked={fieldSchema['x-decorator-props'] ?? true}
-        title={t('Display title')}
-        onChange={(checked) => {
-          fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
-          fieldSchema['x-decorator-props']['showTitle'] = checked;
-          field.decoratorProps.showTitle = checked;
-          dn.emit('patch', {
-            schema: {
-              'x-uid': fieldSchema['x-uid'],
-              'x-decorator-props': {
-                ...fieldSchema['x-decorator-props'],
-                showTitle: checked,
-              },
-            },
-          });
-          dn.refresh();
-        }}
-      ></SchemaSettings.SwitchItem>
-      {!field.readPretty && (
-        <SchemaSettings.ModalItem
-          key="edit-description"
-          title={t('Edit description')}
-          schema={
-            {
-              type: 'object',
-              title: t('Edit description'),
-              properties: {
-                description: {
-                  // title: t('Description'),
-                  default: field?.description,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.TextArea',
-                  'x-component-props': {},
+            onSubmit={({ tooltip }) => {
+              field.decoratorProps.tooltip = tooltip;
+              fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
+              fieldSchema['x-decorator-props']['tooltip'] = tooltip;
+              dn.emit('patch', {
+                schema: {
+                  'x-uid': fieldSchema['x-uid'],
+                  'x-decorator-props': fieldSchema['x-decorator-props'],
                 },
-              },
-            } as ISchema
-          }
-          onSubmit={({ description }) => {
-            field.description = description;
-            fieldSchema.description = description;
-            dn.emit('patch', {
-              schema: {
-                'x-uid': fieldSchema['x-uid'],
-                description: fieldSchema.description,
-              },
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      {field.readPretty && (
-        <SchemaSettings.ModalItem
-          key="edit-tooltip"
-          title={t('Edit tooltip')}
-          schema={
-            {
-              type: 'object',
-              title: t('Edit description'),
-              properties: {
-                tooltip: {
-                  default: fieldSchema?.['x-decorator-props']?.tooltip,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.TextArea',
-                  'x-component-props': {},
-                },
-              },
-            } as ISchema
-          }
-          onSubmit={({ tooltip }) => {
-            field.decoratorProps.tooltip = tooltip;
-            fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
-            fieldSchema['x-decorator-props']['tooltip'] = tooltip;
-            dn.emit('patch', {
-              schema: {
-                'x-uid': fieldSchema['x-uid'],
-                'x-decorator-props': fieldSchema['x-decorator-props'],
-              },
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      {!field.readPretty && fieldSchema['x-component'] !== 'FormField' && required && (
-        <SchemaSettings.SwitchItem
-          key="required"
-          title={t('Required')}
-          checked={fieldSchema.required as boolean}
-          onChange={(required) => {
-            const schema = {
-              ['x-uid']: fieldSchema['x-uid'],
-            };
-            field.required = required;
-            fieldSchema['required'] = required;
-            schema['required'] = required;
-            dn.emit('patch', {
-              schema,
-            });
-            refresh();
-          }}
-        />
-      )}
-    </>
-  );
-});
+              });
+              dn.refresh();
+            }}
+          />
+        )}
+        {!field.readPretty && fieldSchema['x-component'] !== 'FormField' && required && (
+          <SchemaSettings.SwitchItem
+            key="required"
+            title={t('Required')}
+            checked={fieldSchema.required as boolean}
+            onChange={(required) => {
+              const schema = {
+                ['x-uid']: fieldSchema['x-uid'],
+              };
+              field.required = required;
+              fieldSchema['required'] = required;
+              schema['required'] = required;
+              dn.emit('patch', {
+                schema,
+              });
+              refresh();
+            }}
+          />
+        )}
+      </>
+    );
+  },
+  { displayName: 'GeneralSchemaItems' },
+);
diff --git a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx
index c7886670e..d448f6e58 100644
--- a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx
@@ -28,215 +28,218 @@ const Tree = connect(
   }),
 );
 
-export const FormDataTemplates = observer((props: any) => {
-  const { useProps, formSchema, designerCtx } = props;
-  const { defaultValues, collectionName } = useProps();
-  const { collectionList, getEnableFieldTree, onLoadData, onCheck } = useCollectionState(collectionName);
-  const { getCollection, getCollectionField } = useCollectionManager();
-  const { t } = useTranslation();
+export const FormDataTemplates = observer(
+  (props: any) => {
+    const { useProps, formSchema, designerCtx } = props;
+    const { defaultValues, collectionName } = useProps();
+    const { collectionList, getEnableFieldTree, onLoadData, onCheck } = useCollectionState(collectionName);
+    const { getCollection, getCollectionField } = useCollectionManager();
+    const { t } = useTranslation();
 
-  // 不要在后面的数组中依赖 defaultValues，否则会因为 defaultValues 的变化导致 activeData 响应性丢失
-  const activeData = useMemo<ITemplate>(
-    () =>
-      observable(
-        defaultValues || { items: [], display: true, config: { [collectionName]: { titleField: '', filter: {} } } },
-      ),
-    [],
-  );
-
-  const getTargetField = (collectionName: string) => {
-    const collection = getCollection(collectionName);
-    return getCollectionField(
-      `${collectionName}.${activeData?.config[collectionName]?.titleField || collection?.titleField || 'id'}`,
+    // 不要在后面的数组中依赖 defaultValues，否则会因为 defaultValues 的变化导致 activeData 响应性丢失
+    const activeData = useMemo<ITemplate>(
+      () =>
+        observable(
+          defaultValues || { items: [], display: true, config: { [collectionName]: { titleField: '', filter: {} } } },
+        ),
+      [],
     );
-  };
 
-  const getFieldNames = (collectionName: string) => {
-    const collection = getCollection(collectionName);
-    return {
-      label: getLabel(activeData.config?.[collectionName]?.titleField || collection?.titleField || 'id'),
-      value: 'id',
+    const getTargetField = (collectionName: string) => {
+      const collection = getCollection(collectionName);
+      return getCollectionField(
+        `${collectionName}.${activeData?.config[collectionName]?.titleField || collection?.titleField || 'id'}`,
+      );
     };
-  };
 
-  const getFilter = (collectionName: string, value: any) => {
-    const filter = activeData.config?.[collectionName]?.filter;
-    return _.isEmpty(filter) ? {} : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(value)], '$or'));
-  };
+    const getFieldNames = (collectionName: string) => {
+      const collection = getCollection(collectionName);
+      return {
+        label: getLabel(activeData.config?.[collectionName]?.titleField || collection?.titleField || 'id'),
+        value: 'id',
+      };
+    };
 
-  const components = useMemo(() => ({ ArrayCollapse }), []);
-  const scope = useMemo(
-    () => ({
-      getEnableFieldTree,
-      getTargetField,
-      getFieldNames,
-      getFilter,
-      getResource,
-      collectionName,
-    }),
-    [],
-  );
-  const schema = useMemo(
-    () => ({
-      type: 'object',
-      properties: {
-        items: {
-          type: 'array',
-          default: activeData?.items,
-          'x-component': 'ArrayCollapse',
-          'x-decorator': 'FormItem',
-          'x-component-props': {
-            accordion: true,
-          },
+    const getFilter = (collectionName: string, value: any) => {
+      const filter = activeData.config?.[collectionName]?.filter;
+      return _.isEmpty(filter) ? {} : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(value)], '$or'));
+    };
+
+    const components = useMemo(() => ({ ArrayCollapse }), []);
+    const scope = useMemo(
+      () => ({
+        getEnableFieldTree,
+        getTargetField,
+        getFieldNames,
+        getFilter,
+        getResource,
+        collectionName,
+      }),
+      [],
+    );
+    const schema = useMemo(
+      () => ({
+        type: 'object',
+        properties: {
           items: {
-            type: 'object',
-            'x-component': 'ArrayCollapse.CollapsePanel',
+            type: 'array',
+            default: activeData?.items,
+            'x-component': 'ArrayCollapse',
+            'x-decorator': 'FormItem',
             'x-component-props': {
-              extra: [<AsDefaultTemplate key="0" />],
+              accordion: true,
             },
-            properties: {
-              layout: {
-                type: 'void',
-                'x-component': 'FormLayout',
-                'x-component-props': {
-                  layout: 'vertical',
-                },
-                properties: {
-                  collection: {
-                    type: 'string',
-                    title: '{{ t("Collection") }}',
-                    required: true,
-                    description: t('If collection inherits, choose inherited collections as templates'),
-                    default: '{{ collectionName }}',
-                    'x-display': collectionList.length > 1 ? 'visible' : 'hidden',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Select',
-                    'x-component-props': {
-                      options: collectionList,
-                    },
+            items: {
+              type: 'object',
+              'x-component': 'ArrayCollapse.CollapsePanel',
+              'x-component-props': {
+                extra: [<AsDefaultTemplate key="0" />],
+              },
+              properties: {
+                layout: {
+                  type: 'void',
+                  'x-component': 'FormLayout',
+                  'x-component-props': {
+                    layout: 'vertical',
                   },
-                  dataId: {
-                    type: 'number',
-                    title: '{{ t("Template Data") }}',
-                    required: true,
-                    description: t('Select an existing piece of data as the initialization data for the form'),
-                    'x-designer': Designer,
-                    'x-designer-props': {
-                      formSchema,
-                      data: activeData,
-                    },
-                    'x-decorator': 'FormItem',
-                    'x-component': AssociationSelect,
-                    'x-component-props': {
-                      service: {
-                        resource: '{{ $record.collection || collectionName }}',
-                        params: {
-                          filter: '{{ getFilter($self.componentProps.service.resource, $self.value) }}',
-                        },
+                  properties: {
+                    collection: {
+                      type: 'string',
+                      title: '{{ t("Collection") }}',
+                      required: true,
+                      description: t('If collection inherits, choose inherited collections as templates'),
+                      default: '{{ collectionName }}',
+                      'x-display': collectionList.length > 1 ? 'visible' : 'hidden',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Select',
+                      'x-component-props': {
+                        options: collectionList,
                       },
-                      action: 'list',
-                      multiple: false,
-                      objectValue: false,
-                      manual: false,
-                      targetField: '{{ getTargetField($self.componentProps.service.resource) }}',
-                      mapOptions: getMapOptions(),
-                      fieldNames: '{{ getFieldNames($self.componentProps.service.resource) }}',
                     },
-                    'x-reactions': [
-                      {
-                        dependencies: ['.collection'],
-                        fulfill: {
-                          state: {
-                            disabled: '{{ !$deps[0] }}',
-                            componentProps: {
-                              service: {
-                                resource: '{{ getResource($deps[0], $self) }}',
+                    dataId: {
+                      type: 'number',
+                      title: '{{ t("Template Data") }}',
+                      required: true,
+                      description: t('Select an existing piece of data as the initialization data for the form'),
+                      'x-designer': Designer,
+                      'x-designer-props': {
+                        formSchema,
+                        data: activeData,
+                      },
+                      'x-decorator': 'FormItem',
+                      'x-component': AssociationSelect,
+                      'x-component-props': {
+                        service: {
+                          resource: '{{ $record.collection || collectionName }}',
+                          params: {
+                            filter: '{{ getFilter($self.componentProps.service.resource, $self.value) }}',
+                          },
+                        },
+                        action: 'list',
+                        multiple: false,
+                        objectValue: false,
+                        manual: false,
+                        targetField: '{{ getTargetField($self.componentProps.service.resource) }}',
+                        mapOptions: getMapOptions(),
+                        fieldNames: '{{ getFieldNames($self.componentProps.service.resource) }}',
+                      },
+                      'x-reactions': [
+                        {
+                          dependencies: ['.collection'],
+                          fulfill: {
+                            state: {
+                              disabled: '{{ !$deps[0] }}',
+                              componentProps: {
+                                service: {
+                                  resource: '{{ getResource($deps[0], $self) }}',
+                                },
                               },
                             },
                           },
                         },
-                      },
-                    ],
-                  },
-                  fields: {
-                    type: 'array',
-                    title: '{{ t("Data fields") }}',
-                    required: true,
-                    description: t('Only the selected fields will be used as the initialization data for the form'),
-                    'x-decorator': 'FormItem',
-                    'x-component': Tree,
-                    'x-component-props': {
-                      treeData: [],
-                      checkable: true,
-                      checkStrictly: true,
-                      selectable: false,
-                      loadData: onLoadData,
-                      onCheck,
-                      rootStyle: {
-                        padding: '8px 0',
-                        border: '1px solid #d9d9d9',
-                        borderRadius: '2px',
-                        maxHeight: '30vh',
-                        overflow: 'auto',
-                        margin: '2px 0',
-                      },
+                      ],
                     },
-                    'x-reactions': [
-                      {
-                        dependencies: ['.collection'],
-                        fulfill: {
-                          state: {
-                            disabled: '{{ !$deps[0] }}',
-                            componentProps: {
-                              treeData: '{{ getEnableFieldTree($deps[0], $self) }}',
+                    fields: {
+                      type: 'array',
+                      title: '{{ t("Data fields") }}',
+                      required: true,
+                      description: t('Only the selected fields will be used as the initialization data for the form'),
+                      'x-decorator': 'FormItem',
+                      'x-component': Tree,
+                      'x-component-props': {
+                        treeData: [],
+                        checkable: true,
+                        checkStrictly: true,
+                        selectable: false,
+                        loadData: onLoadData,
+                        onCheck,
+                        rootStyle: {
+                          padding: '8px 0',
+                          border: '1px solid #d9d9d9',
+                          borderRadius: '2px',
+                          maxHeight: '30vh',
+                          overflow: 'auto',
+                          margin: '2px 0',
+                        },
+                      },
+                      'x-reactions': [
+                        {
+                          dependencies: ['.collection'],
+                          fulfill: {
+                            state: {
+                              disabled: '{{ !$deps[0] }}',
+                              componentProps: {
+                                treeData: '{{ getEnableFieldTree($deps[0], $self) }}',
+                              },
                             },
                           },
                         },
-                      },
-                    ],
+                      ],
+                    },
                   },
                 },
+                remove: {
+                  type: 'void',
+                  'x-component': 'ArrayCollapse.Remove',
+                },
+                moveUp: {
+                  type: 'void',
+                  'x-component': 'ArrayCollapse.MoveUp',
+                },
+                moveDown: {
+                  type: 'void',
+                  'x-component': 'ArrayCollapse.MoveDown',
+                },
               },
-              remove: {
+            },
+            properties: {
+              add: {
                 type: 'void',
-                'x-component': 'ArrayCollapse.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveDown',
+                title: '{{ t("Add template") }}',
+                'x-component': 'ArrayCollapse.Addition',
               },
             },
           },
-          properties: {
-            add: {
-              type: 'void',
-              title: '{{ t("Add template") }}',
-              'x-component': 'ArrayCollapse.Addition',
-            },
+          display: {
+            type: 'boolean',
+            'x-content': '{{ t("Display data template selector") }}',
+            default: activeData?.display !== false,
+            'x-decorator': 'FormItem',
+            'x-component': 'Checkbox',
           },
         },
-        display: {
-          type: 'boolean',
-          'x-content': '{{ t("Display data template selector") }}',
-          default: activeData?.display !== false,
-          'x-decorator': 'FormItem',
-          'x-component': 'Checkbox',
-        },
-      },
-    }),
-    [],
-  );
+      }),
+      [],
+    );
 
-  return (
-    <SchemaComponentContext.Provider value={{ ...designerCtx, designable: true }}>
-      <SchemaComponent components={components} scope={scope} schema={schema} />
-    </SchemaComponentContext.Provider>
-  );
-});
+    return (
+      <SchemaComponentContext.Provider value={{ ...designerCtx, designable: true }}>
+        <SchemaComponent components={components} scope={scope} schema={schema} />
+      </SchemaComponentContext.Provider>
+    );
+  },
+  { displayName: 'FormDataTemplates' },
+);
 
 export function getLabel(titleField) {
   return titleField || 'label';
diff --git a/packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx b/packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx
index dcae98891..8330d9892 100644
--- a/packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx
@@ -100,129 +100,132 @@ const insertActiveKeys = (activeKeys: number[], index: number) => {
   }, []);
 };
 
-export const ArrayCollapse: ComposedArrayCollapse = observer((props: IArrayCollapseProps) => {
-  const field = useField<ArrayField>();
-  const dataSource = Array.isArray(field.value) ? field.value : [];
-  const [activeKeys, setActiveKeys] = useState<number[]>(
-    takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount),
-  );
-  const schema = useFieldSchema();
-  const prefixCls = 'ant-formily-array-collapse';
-  useEffect(() => {
-    if (!field.modified && dataSource.length) {
-      setActiveKeys(takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount));
-    }
-  }, [dataSource.length, field]);
-  if (!schema) throw new Error('can not found schema object');
-
-  const renderAddition = () => {
-    return schema.reduceProperties((addition, schema, key) => {
-      if (isAdditionComponent(schema)) {
-        return <RecursionField schema={schema} name={key} />;
-      }
-      return addition;
-    }, null);
-  };
-  const renderEmpty = () => {
-    if (dataSource.length) return;
-    return (
-      <Card className={cls(`${prefixCls}-item`, props.className)}>
-        <Empty />
-      </Card>
+export const ArrayCollapse: ComposedArrayCollapse = observer(
+  (props: IArrayCollapseProps) => {
+    const field = useField<ArrayField>();
+    const dataSource = Array.isArray(field.value) ? field.value : [];
+    const [activeKeys, setActiveKeys] = useState<number[]>(
+      takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount),
     );
-  };
+    const schema = useFieldSchema();
+    const prefixCls = 'ant-formily-array-collapse';
+    useEffect(() => {
+      if (!field.modified && dataSource.length) {
+        setActiveKeys(takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount));
+      }
+    }, [dataSource.length, field]);
+    if (!schema) throw new Error('can not found schema object');
 
-  const renderItems = () => {
-    return (
-      <Collapse
-        {...props}
-        activeKey={activeKeys}
-        onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
-        className={cls(`${prefixCls}-item`, props.className)}
-      >
-        {dataSource.map((item, index) => {
-          const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
+    const renderAddition = () => {
+      return schema.reduceProperties((addition, schema, key) => {
+        if (isAdditionComponent(schema)) {
+          return <RecursionField schema={schema} name={key} />;
+        }
+        return addition;
+      }, null);
+    };
+    const renderEmpty = () => {
+      if (dataSource.length) return;
+      return (
+        <Card className={cls(`${prefixCls}-item`, props.className)}>
+          <Empty />
+        </Card>
+      );
+    };
 
-          const panelProps = field.query(`${field.address}.${index}`).get('componentProps');
-          const props: CollapsePanelProps = items['x-component-props'];
-          const header = () => {
-            const header = `${panelProps?.header || props.header || field.title}`;
-            const path = field.address.concat(index);
-            const errors = field.form.queryFeedbacks({
-              type: 'error',
-              address: `${path}.**`,
-            });
-            return (
-              <ArrayBase.Item index={index} record={() => field.value?.[index]}>
+    const renderItems = () => {
+      return (
+        <Collapse
+          {...props}
+          activeKey={activeKeys}
+          onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
+          className={cls(`${prefixCls}-item`, props.className)}
+        >
+          {dataSource.map((item, index) => {
+            const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
+
+            const panelProps = field.query(`${field.address}.${index}`).get('componentProps');
+            const props: CollapsePanelProps = items['x-component-props'];
+            const header = () => {
+              const header = `${panelProps?.header || props.header || field.title}`;
+              const path = field.address.concat(index);
+              const errors = field.form.queryFeedbacks({
+                type: 'error',
+                address: `${path}.**`,
+              });
+              return (
+                <ArrayBase.Item index={index} record={() => field.value?.[index]}>
+                  <RecursionField
+                    schema={items}
+                    name={index}
+                    filterProperties={(schema) => {
+                      if (!isIndexComponent(schema)) return false;
+                      return true;
+                    }}
+                    onlyRenderProperties
+                  />
+                  {errors.length ? (
+                    <Badge size="small" className="errors-badge" count={errors.length}>
+                      {header}
+                    </Badge>
+                  ) : (
+                    <DataTemplateTitle item={item.initialValue || item} index={index} />
+                  )}
+                </ArrayBase.Item>
+              );
+            };
+
+            const extra = (
+              <ArrayBase.Item index={index} record={item}>
                 <RecursionField
                   schema={items}
                   name={index}
                   filterProperties={(schema) => {
-                    if (!isIndexComponent(schema)) return false;
+                    if (!isOperationComponent(schema)) return false;
                     return true;
                   }}
                   onlyRenderProperties
                 />
-                {errors.length ? (
-                  <Badge size="small" className="errors-badge" count={errors.length}>
-                    {header}
-                  </Badge>
-                ) : (
-                  <DataTemplateTitle item={item.initialValue || item} index={index} />
-                )}
+                {panelProps?.extra}
               </ArrayBase.Item>
             );
-          };
 
-          const extra = (
-            <ArrayBase.Item index={index} record={item}>
+            const content = (
               <RecursionField
                 schema={items}
                 name={index}
                 filterProperties={(schema) => {
-                  if (!isOperationComponent(schema)) return false;
+                  if (isIndexComponent(schema)) return false;
+                  if (isOperationComponent(schema)) return false;
                   return true;
                 }}
-                onlyRenderProperties
               />
-              {panelProps?.extra}
-            </ArrayBase.Item>
-          );
-
-          const content = (
-            <RecursionField
-              schema={items}
-              name={index}
-              filterProperties={(schema) => {
-                if (isIndexComponent(schema)) return false;
-                if (isOperationComponent(schema)) return false;
-                return true;
-              }}
-            />
-          );
-          return (
-            <Collapse.Panel {...props} {...panelProps} forceRender key={index} header={header()} extra={extra}>
-              <ArrayBase.Item index={index} key={index} record={item}>
-                {content}
-              </ArrayBase.Item>
-            </Collapse.Panel>
-          );
-        })}
-      </Collapse>
+            );
+            return (
+              <Collapse.Panel {...props} {...panelProps} forceRender key={index} header={header()} extra={extra}>
+                <ArrayBase.Item index={index} key={index} record={item}>
+                  {content}
+                </ArrayBase.Item>
+              </Collapse.Panel>
+            );
+          })}
+        </Collapse>
+      );
+    };
+    return (
+      <ArrayBase
+        onAdd={(index) => {
+          setActiveKeys(insertActiveKeys(activeKeys, index));
+        }}
+      >
+        {renderEmpty()}
+        {renderItems()}
+        {renderAddition()}
+      </ArrayBase>
     );
-  };
-  return (
-    <ArrayBase
-      onAdd={(index) => {
-        setActiveKeys(insertActiveKeys(activeKeys, index));
-      }}
-    >
-      {renderEmpty()}
-      {renderItems()}
-      {renderAddition()}
-    </ArrayBase>
-  );
-});
+  },
+  { displayName: 'ArrayCollapse' },
+);
 
 const CollapsePanel: React.FC<React.PropsWithChildren<CollapsePanelProps>> = ({ children }) => {
   return <Fragment>{children}</Fragment>;
diff --git a/packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx b/packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx
index 8412e4542..281eca7a3 100644
--- a/packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx
@@ -13,143 +13,146 @@ import { removeNullCondition, useCompile, useDesignable } from '../../../schema-
 import { ITemplate } from '../../../schema-component/antd/form-v2/Templates';
 import { FilterDynamicComponent } from '../../../schema-component/antd/table-v2/FilterDynamicComponent';
 
-export const Designer = observer(() => {
-  const { getCollectionFields, getCollectionField, getCollection } = useCollectionManager();
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const { t } = useTranslation();
-  const { dn } = useDesignable();
-  const compile = useCompile();
-  const { formSchema, data } = fieldSchema['x-designer-props'] as {
-    formSchema: ISchema;
-    data?: ITemplate;
-  };
+export const Designer = observer(
+  () => {
+    const { getCollectionFields, getCollectionField, getCollection } = useCollectionManager();
+    const field = useField<Field>();
+    const fieldSchema = useFieldSchema();
+    const { t } = useTranslation();
+    const { dn } = useDesignable();
+    const compile = useCompile();
+    const { formSchema, data } = fieldSchema['x-designer-props'] as {
+      formSchema: ISchema;
+      data?: ITemplate;
+    };
 
-  // 在这里读取 resource 的值，当 resource 变化时，会触发该组件的更新
-  const collectionName = field.componentProps.service.resource;
+    // 在这里读取 resource 的值，当 resource 变化时，会触发该组件的更新
+    const collectionName = field.componentProps.service.resource;
 
-  const collection = getCollection(collectionName);
-  const collectionFields = getCollectionFields(collectionName);
-  const dataSource = useCollectionFilterOptions(collectionName);
+    const collection = getCollection(collectionName);
+    const collectionFields = getCollectionFields(collectionName);
+    const dataSource = useCollectionFilterOptions(collectionName);
 
-  if (!data) {
-    error('data is required');
-    return null;
-  }
-
-  const getFilter = () => data.config?.[collectionName]?.filter || {};
-  const setFilter = (filter) => {
-    try {
-      _.set(data, `config.${collectionName}.filter`, removeNullCondition(filter));
-    } catch (err) {
-      error(err);
+    if (!data) {
+      error('data is required');
+      return null;
     }
-  };
-  const getTitleFIeld = () => data.config?.[collectionName]?.titleField || collection?.titleField || 'id';
-  const setTitleField = (titleField) => {
-    try {
-      _.set(data, `config.${collectionName}.titleField`, titleField);
-    } catch (err) {
-      error(err);
-    }
-  };
 
-  const options = collectionFields
-    .filter((field) => isTitleField(field))
-    .map((field) => ({
-      value: field?.name,
-      label: compile(field?.uiSchema?.title) || field?.name,
-    }));
+    const getFilter = () => data.config?.[collectionName]?.filter || {};
+    const setFilter = (filter) => {
+      try {
+        _.set(data, `config.${collectionName}.filter`, removeNullCondition(filter));
+      } catch (err) {
+        error(err);
+      }
+    };
+    const getTitleFIeld = () => data.config?.[collectionName]?.titleField || collection?.titleField || 'id';
+    const setTitleField = (titleField) => {
+      try {
+        _.set(data, `config.${collectionName}.titleField`, titleField);
+      } catch (err) {
+        error(err);
+      }
+    };
 
-  return (
-    <GeneralSchemaDesigner draggable={false}>
-      <SchemaSettings.ModalItem
-        title={t('Set the data scope')}
-        schema={
-          {
-            type: 'object',
-            title: t('Set the data scope'),
-            properties: {
-              filter: {
-                default: getFilter(),
-                // title: '数据范围',
-                enum: dataSource,
-                'x-component': 'Filter',
-                'x-component-props': {
-                  dynamicComponent: (props) => FilterDynamicComponent({ ...props }),
+    const options = collectionFields
+      .filter((field) => isTitleField(field))
+      .map((field) => ({
+        value: field?.name,
+        label: compile(field?.uiSchema?.title) || field?.name,
+      }));
+
+    return (
+      <GeneralSchemaDesigner draggable={false}>
+        <SchemaSettings.ModalItem
+          title={t('Set the data scope')}
+          schema={
+            {
+              type: 'object',
+              title: t('Set the data scope'),
+              properties: {
+                filter: {
+                  default: getFilter(),
+                  // title: '数据范围',
+                  enum: dataSource,
+                  'x-component': 'Filter',
+                  'x-component-props': {
+                    dynamicComponent: (props) => FilterDynamicComponent({ ...props }),
+                  },
                 },
               },
-            },
-          } as ISchema
-        }
-        onSubmit={({ filter }) => {
-          setFilter(filter);
-
-          try {
-            // 不仅更新当前模板，也更新同级的其它模板
-            field.query('fieldReaction.items.*.layout.dataId').forEach((item) => {
-              if (item.componentProps.service.resource !== collectionName) {
-                return;
-              }
-
-              item.componentProps.service.params = {
-                filter: _.isEmpty(filter)
-                  ? {}
-                  : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(field.value)], '$or')),
-              };
-            });
-          } catch (err) {
-            error(err);
+            } as ISchema
           }
-          formSchema['x-data-templates'] = data;
-          dn.emit('patch', {
-            schema: {
+          onSubmit={({ filter }) => {
+            setFilter(filter);
+
+            try {
+              // 不仅更新当前模板，也更新同级的其它模板
+              field.query('fieldReaction.items.*.layout.dataId').forEach((item) => {
+                if (item.componentProps.service.resource !== collectionName) {
+                  return;
+                }
+
+                item.componentProps.service.params = {
+                  filter: _.isEmpty(filter)
+                    ? {}
+                    : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(field.value)], '$or')),
+                };
+              });
+            } catch (err) {
+              error(err);
+            }
+            formSchema['x-data-templates'] = data;
+            dn.emit('patch', {
+              schema: {
+                ['x-uid']: formSchema['x-uid'],
+                ['x-data-templates']: data,
+              },
+            });
+            dn.refresh();
+          }}
+        />
+        <SelectItem
+          key="title-field"
+          title={t('Title field')}
+          options={options}
+          value={getTitleFIeld()}
+          onChange={(label) => {
+            setTitleField(label);
+
+            try {
+              // 不仅更新当前模板，也更新同级的其它模板
+              field.query('fieldReaction.items.*.layout.dataId').forEach((item) => {
+                if (item.componentProps.service.resource !== collectionName) {
+                  return;
+                }
+
+                item.componentProps.fieldNames.label = label;
+                item.componentProps.targetField = getCollectionField(
+                  `${collectionName}.${label || collection?.titleField || 'id'}`,
+                );
+              });
+            } catch (err) {
+              console.error(err);
+            }
+            formSchema['x-data-templates'] = data;
+
+            const schema = {
               ['x-uid']: formSchema['x-uid'],
               ['x-data-templates']: data,
-            },
-          });
-          dn.refresh();
-        }}
-      />
-      <SelectItem
-        key="title-field"
-        title={t('Title field')}
-        options={options}
-        value={getTitleFIeld()}
-        onChange={(label) => {
-          setTitleField(label);
+            };
 
-          try {
-            // 不仅更新当前模板，也更新同级的其它模板
-            field.query('fieldReaction.items.*.layout.dataId').forEach((item) => {
-              if (item.componentProps.service.resource !== collectionName) {
-                return;
-              }
-
-              item.componentProps.fieldNames.label = label;
-              item.componentProps.targetField = getCollectionField(
-                `${collectionName}.${label || collection?.titleField || 'id'}`,
-              );
+            dn.emit('patch', {
+              schema,
             });
-          } catch (err) {
-            console.error(err);
-          }
-          formSchema['x-data-templates'] = data;
-
-          const schema = {
-            ['x-uid']: formSchema['x-uid'],
-            ['x-data-templates']: data,
-          };
-
-          dn.emit('patch', {
-            schema,
-          });
-          dn.refresh();
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-});
+            dn.refresh();
+          }}
+        />
+      </GeneralSchemaDesigner>
+    );
+  },
+  { displayName: 'Designer' },
+);
 
 export function getSelectedIdFilter(selectedId) {
   return selectedId
diff --git a/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx b/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx
index 45b9c7080..f7d0a7d3a 100644
--- a/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx
+++ b/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx
@@ -4,103 +4,106 @@ import { action } from '@formily/reactive';
 import { SchemaComponent, useCompile } from '../../schema-component';
 import { useCollectionManager } from '../../collection-manager';
 
-export const EnableChildCollections = observer((props: any) => {
-  const { useProps } = props;
-  const { defaultValues, collectionName } = useProps();
-  const form = useForm();
-  const compile = useCompile();
-  const { getChildrenCollections } = useCollectionManager();
-  const childrenCollections = getChildrenCollections(collectionName);
+export const EnableChildCollections = observer(
+  (props: any) => {
+    const { useProps } = props;
+    const { defaultValues, collectionName } = useProps();
+    const form = useForm();
+    const compile = useCompile();
+    const { getChildrenCollections } = useCollectionManager();
+    const childrenCollections = getChildrenCollections(collectionName);
 
-  const useAsyncDataSource = (service: any) => {
-    return (field: any, options?: any) => {
-      field.loading = true;
-      service(field, options).then(
-        action.bound((data: any) => {
-          field.dataSource = data;
-          field.loading = false;
-          if (field.initialValue) {
-            field.disabled = true;
-          }
-        }),
-      );
+    const useAsyncDataSource = (service: any) => {
+      return (field: any, options?: any) => {
+        field.loading = true;
+        service(field, options).then(
+          action.bound((data: any) => {
+            field.dataSource = data;
+            field.loading = false;
+            if (field.initialValue) {
+              field.disabled = true;
+            }
+          }),
+        );
+      };
     };
-  };
-  const loadData = async (field) => {
-    const { childrenCollections: childCollections } = form.values?.enableChildren;
-    return childrenCollections
-      .filter((v) => {
-        return !childCollections.find((k) => k.collection === v.name) || field.initialValue || v.name === field.value;
-      })
-      ?.map((collection: any) => ({
-        label: compile(collection.title),
-        value: collection.name,
-      }));
-  };
-  return (
-    <SchemaComponent
-      schema={{
-        type: 'object',
-        properties: {
-          childrenCollections: {
-            type: 'array',
-            default: defaultValues?.filter((v) => childrenCollections.find((k) => k.name === v.collection)),
-            'x-component': 'ArrayItems',
-            'x-decorator': 'FormItem',
-            items: {
-              type: 'object',
-              properties: {
-                space: {
-                  type: 'void',
-                  'x-component': 'Space',
-                  properties: {
-                    sort: {
-                      type: 'void',
-                      'x-decorator': 'FormItem',
-                      'x-component': 'ArrayItems.SortHandle',
-                    },
-                    collection: {
-                      type: 'string',
-                      'x-decorator': 'FormItem',
-                      required: true,
-                      'x-component': 'Select',
-                      'x-component-props': {
-                        style: {
-                          width: 260,
+    const loadData = async (field) => {
+      const { childrenCollections: childCollections } = form.values?.enableChildren;
+      return childrenCollections
+        .filter((v) => {
+          return !childCollections.find((k) => k.collection === v.name) || field.initialValue || v.name === field.value;
+        })
+        ?.map((collection: any) => ({
+          label: compile(collection.title),
+          value: collection.name,
+        }));
+    };
+    return (
+      <SchemaComponent
+        schema={{
+          type: 'object',
+          properties: {
+            childrenCollections: {
+              type: 'array',
+              default: defaultValues?.filter((v) => childrenCollections.find((k) => k.name === v.collection)),
+              'x-component': 'ArrayItems',
+              'x-decorator': 'FormItem',
+              items: {
+                type: 'object',
+                properties: {
+                  space: {
+                    type: 'void',
+                    'x-component': 'Space',
+                    properties: {
+                      sort: {
+                        type: 'void',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ArrayItems.SortHandle',
+                      },
+                      collection: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        required: true,
+                        'x-component': 'Select',
+                        'x-component-props': {
+                          style: {
+                            width: 260,
+                          },
+                        },
+                        'x-reactions': ['{{useAsyncDataSource(loadData)}}'],
+                      },
+                      title: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {
+                          style: {
+                            width: 235,
+                          },
                         },
                       },
-                      'x-reactions': ['{{useAsyncDataSource(loadData)}}'],
-                    },
-                    title: {
-                      type: 'string',
-                      'x-decorator': 'FormItem',
-                      'x-component': 'Input',
-                      'x-component-props': {
-                        style: {
-                          width: 235,
-                        },
+                      remove: {
+                        type: 'void',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ArrayItems.Remove',
                       },
                     },
-                    remove: {
-                      type: 'void',
-                      'x-decorator': 'FormItem',
-                      'x-component': 'ArrayItems.Remove',
-                    },
                   },
                 },
               },
-            },
-            properties: {
-              add: {
-                type: 'void',
-                title: '{{ t("Add collection") }}',
-                'x-component': 'ArrayItems.Addition',
+              properties: {
+                add: {
+                  type: 'void',
+                  title: '{{ t("Add collection") }}',
+                  'x-component': 'ArrayItems.Addition',
+                },
               },
             },
           },
-        },
-      }}
-      scope={{ useAsyncDataSource, loadData }}
-    />
-  );
-});
+        }}
+        scope={{ useAsyncDataSource, loadData }}
+      />
+    );
+  },
+  { displayName: 'EnableChildCollections' },
+);
diff --git a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx
index 8d7b33d45..16df557ea 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx
@@ -13,82 +13,131 @@ import { useValues } from './useValues';
 import { ActionType } from './type';
 import { ValueDynamicComponent } from './ValueDynamicComponent';
 
-export const FormFieldLinkageRuleAction = observer((props: any) => {
-  const { value, options, collectionName } = props;
-  const { t } = useTranslation();
-  const compile = useCompile();
-  const remove = useContext(RemoveActionContext);
-  const {
-    schema,
-    fields,
-    operator,
-    setDataIndex,
-    setOperator,
-    setValue,
-    value: fieldValue,
-    operators,
-  } = useValues(options);
-  return (
-    <LinkageLogicContext.Provider value={uid()}>
-      <div
-        style={{ marginBottom: 8 }}
-        className={css`
-          .ant-space {
-            display: inline-block;
-          }
-        `}
-      >
-        <Space
+export const FormFieldLinkageRuleAction = observer(
+  (props: any) => {
+    const { value, options, collectionName } = props;
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const remove = useContext(RemoveActionContext);
+    const {
+      schema,
+      fields,
+      operator,
+      setDataIndex,
+      setOperator,
+      setValue,
+      value: fieldValue,
+      operators,
+    } = useValues(options);
+    return (
+      <LinkageLogicContext.Provider value={uid()}>
+        <div
+          style={{ marginBottom: 8 }}
           className={css`
             .ant-space {
               display: inline-block;
             }
-            .ant-space-item {
-              max-width: 95%;
-              display: inline-block;
-              margin: 2px;
-              vertical-align: top;
-            }
           `}
         >
-          <TreeSelect
+          <Space
             className={css`
-              min-width: 160px;
+              .ant-space {
+                display: inline-block;
+              }
+              .ant-space-item {
+                max-width: 95%;
+                display: inline-block;
+                margin: 2px;
+                vertical-align: top;
+              }
             `}
-            fieldNames={{
-              label: 'title',
-              value: 'name',
-              children: 'children',
-            }}
-            treeCheckable={true}
-            value={value?.targetFields}
-            multiple
-            allowClear
-            treeData={compile(fields)}
-            onChange={(value) => {
-              setDataIndex(value);
-            }}
-            placeholder={t('Select Field')}
-          />
+          >
+            <TreeSelect
+              className={css`
+                min-width: 160px;
+              `}
+              fieldNames={{
+                label: 'title',
+                value: 'name',
+                children: 'children',
+              }}
+              treeCheckable={true}
+              value={value?.targetFields}
+              multiple
+              allowClear
+              treeData={compile(fields)}
+              onChange={(value) => {
+                setDataIndex(value);
+              }}
+              placeholder={t('Select Field')}
+            />
+            <Select
+              value={operator}
+              className={css`
+                min-width: 120px;
+              `}
+              options={compile(operators)}
+              onChange={(value) => {
+                setOperator(value);
+              }}
+              placeholder={t('action')}
+            />
+            {[ActionType.Value].includes(operator) && (
+              <ValueDynamicComponent
+                fieldValue={fieldValue}
+                schema={schema}
+                setValue={setValue}
+                collectionName={collectionName}
+              />
+            )}
+            {!props.disabled && (
+              <a>
+                <CloseCircleOutlined onClick={() => remove()} style={{ color: '#bfbfbf' }} />
+              </a>
+            )}
+          </Space>
+        </div>
+      </LinkageLogicContext.Provider>
+    );
+  },
+  { displayName: 'FormFieldLinkageRuleAction' },
+);
+
+export const FormButtonLinkageRuleAction = observer(
+  (props: any) => {
+    const { value, options } = props;
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const [editFalg, setEditFlag] = useState(false);
+    const remove = useContext(RemoveActionContext);
+    const { schema, operator, setOperator, setValue } = useValues(options);
+    const operators = [
+      { label: t('Visible'), value: ActionType.Visible, schema: {} },
+      { label: t('Hidden'), value: ActionType.Hidden, schema: {} },
+      { label: t('Disabled'), value: ActionType.Disabled, schema: {} },
+      { label: t('Enabled'), value: ActionType.Active, schema: {} },
+    ];
+    return (
+      <div style={{ marginBottom: 8 }}>
+        <Space>
           <Select
             value={operator}
-            className={css`
-              min-width: 120px;
-            `}
             options={compile(operators)}
             onChange={(value) => {
+              const flag = [ActionType.Value].includes(value);
+              setEditFlag(flag);
               setOperator(value);
             }}
             placeholder={t('action')}
           />
-          {[ActionType.Value].includes(operator) && (
-            <ValueDynamicComponent
-              fieldValue={fieldValue}
-              schema={schema}
-              setValue={setValue}
-              collectionName={collectionName}
-            />
-          )}
+          {editFalg &&
+            React.createElement(DynamicComponent, {
+              value,
+              schema,
+              onChange(value) {
+                setValue(value);
+              },
+            })}
           {!props.disabled && (
             <a>
               <CloseCircleOutlined onClick={() => remove()} style={{ color: '#bfbfbf' }} />
@@ -96,50 +145,7 @@ export const FormFieldLinkageRuleAction = observer((props: any) => {
           )}
         </Space>
       </div>
-    </LinkageLogicContext.Provider>
-  );
-});
-
-export const FormButtonLinkageRuleAction = observer((props: any) => {
-  const { value, options } = props;
-  const { t } = useTranslation();
-  const compile = useCompile();
-  const [editFalg, setEditFlag] = useState(false);
-  const remove = useContext(RemoveActionContext);
-  const { schema, operator, setOperator, setValue } = useValues(options);
-  const operators = [
-    { label: t('Visible'), value: ActionType.Visible, schema: {} },
-    { label: t('Hidden'), value: ActionType.Hidden, schema: {} },
-    { label: t('Disabled'), value: ActionType.Disabled, schema: {} },
-    { label: t('Enabled'), value: ActionType.Active, schema: {} },
-  ];
-  return (
-    <div style={{ marginBottom: 8 }}>
-      <Space>
-        <Select
-          value={operator}
-          options={compile(operators)}
-          onChange={(value) => {
-            const flag = [ActionType.Value].includes(value);
-            setEditFlag(flag);
-            setOperator(value);
-          }}
-          placeholder={t('action')}
-        />
-        {editFalg &&
-          React.createElement(DynamicComponent, {
-            value,
-            schema,
-            onChange(value) {
-              setValue(value);
-            },
-          })}
-        {!props.disabled && (
-          <a>
-            <CloseCircleOutlined onClick={() => remove()} style={{ color: '#bfbfbf' }} />
-          </a>
-        )}
-      </Space>
-    </div>
-  );
-});
+    );
+  },
+  { displayName: 'FormButtonLinkageRuleAction' },
+);
diff --git a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx
index 61786ed38..a4e2c2b0e 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx
@@ -5,23 +5,26 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { RemoveActionContext } from './context';
 import { FormButtonLinkageRuleAction, FormFieldLinkageRuleAction } from './LinkageRuleAction';
-export const LinkageRuleActions = observer((props: any): any => {
-  const { type, linkageOptions } = props;
-  const field = useField<ArrayFieldModel>();
-  return field?.value?.map((item, index) => {
-    return (
-      <RemoveActionContext.Provider key={index} value={() => field.remove(index)}>
-        <ObjectField
-          name={index}
-          component={[
-            type === 'button' ? FormButtonLinkageRuleAction : FormFieldLinkageRuleAction,
-            { ...props, options: linkageOptions },
-          ]}
-        />
-      </RemoveActionContext.Provider>
-    );
-  });
-});
+export const LinkageRuleActions = observer(
+  (props: any): any => {
+    const { type, linkageOptions } = props;
+    const field = useField<ArrayFieldModel>();
+    return field?.value?.map((item, index) => {
+      return (
+        <RemoveActionContext.Provider key={index} value={() => field.remove(index)}>
+          <ObjectField
+            name={index}
+            component={[
+              type === 'button' ? FormButtonLinkageRuleAction : FormFieldLinkageRuleAction,
+              { ...props, options: linkageOptions },
+            ]}
+          />
+        </RemoveActionContext.Provider>
+      );
+    });
+  },
+  { displayName: 'LinkageRuleActions' },
+);
 
 export const LinkageRuleActionGroup = (props) => {
   const { t } = useTranslation();
diff --git a/packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx b/packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
index e33d2abb6..2ca53412c 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
@@ -91,129 +91,132 @@ const insertActiveKeys = (activeKeys: number[], index: number) => {
   }, []);
 };
 
-export const ArrayCollapse: ComposedArrayCollapse = observer((props: IArrayCollapseProps) => {
-  const field = useField<ArrayField>();
-  const dataSource = Array.isArray(field.value) ? field.value : [];
-  const [activeKeys, setActiveKeys] = useState<number[]>(
-    takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount),
-  );
-  const schema = useFieldSchema();
-  const prefixCls = 'ant-formily-array-collapse';
-  useEffect(() => {
-    if (!field.modified && dataSource.length) {
-      setActiveKeys(takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount));
-    }
-  }, [dataSource.length, field]);
-  if (!schema) throw new Error('can not found schema object');
-
-  const renderAddition = () => {
-    return schema.reduceProperties((addition, schema, key) => {
-      if (isAdditionComponent(schema)) {
-        return <RecursionField schema={schema} name={key} />;
-      }
-      return addition;
-    }, null);
-  };
-  const renderEmpty = () => {
-    if (dataSource.length) return;
-    return (
-      <Card className={cls(`${prefixCls}-item`, props.className)}>
-        <Empty />
-      </Card>
+export const ArrayCollapse: ComposedArrayCollapse = observer(
+  (props: IArrayCollapseProps) => {
+    const field = useField<ArrayField>();
+    const dataSource = Array.isArray(field.value) ? field.value : [];
+    const [activeKeys, setActiveKeys] = useState<number[]>(
+      takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount),
     );
-  };
+    const schema = useFieldSchema();
+    const prefixCls = 'ant-formily-array-collapse';
+    useEffect(() => {
+      if (!field.modified && dataSource.length) {
+        setActiveKeys(takeDefaultActiveKeys(dataSource.length, props.defaultOpenPanelCount));
+      }
+    }, [dataSource.length, field]);
+    if (!schema) throw new Error('can not found schema object');
 
-  const renderItems = () => {
-    return (
-      <Collapse
-        {...props}
-        activeKey={activeKeys}
-        onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
-        className={cls(`${prefixCls}-item`, props.className)}
-      >
-        {dataSource.map((item, index) => {
-          const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
+    const renderAddition = () => {
+      return schema.reduceProperties((addition, schema, key) => {
+        if (isAdditionComponent(schema)) {
+          return <RecursionField schema={schema} name={key} />;
+        }
+        return addition;
+      }, null);
+    };
+    const renderEmpty = () => {
+      if (dataSource.length) return;
+      return (
+        <Card className={cls(`${prefixCls}-item`, props.className)}>
+          <Empty />
+        </Card>
+      );
+    };
 
-          const panelProps = field.query(`${field.address}.${index}`).get('componentProps');
-          const props: CollapsePanelProps = items['x-component-props'];
-          const header = () => {
-            const header = `${panelProps?.header || props.header || field.title}`;
-            const path = field.address.concat(index);
-            const errors = field.form.queryFeedbacks({
-              type: 'error',
-              address: `${path}.**`,
-            });
-            return (
-              <ArrayBase.Item index={index} record={() => field.value?.[index]}>
+    const renderItems = () => {
+      return (
+        <Collapse
+          {...props}
+          activeKey={activeKeys}
+          onChange={(keys: string[]) => setActiveKeys(toArr(keys).map(Number))}
+          className={cls(`${prefixCls}-item`, props.className)}
+        >
+          {dataSource.map((item, index) => {
+            const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
+
+            const panelProps = field.query(`${field.address}.${index}`).get('componentProps');
+            const props: CollapsePanelProps = items['x-component-props'];
+            const header = () => {
+              const header = `${panelProps?.header || props.header || field.title}`;
+              const path = field.address.concat(index);
+              const errors = field.form.queryFeedbacks({
+                type: 'error',
+                address: `${path}.**`,
+              });
+              return (
+                <ArrayBase.Item index={index} record={() => field.value?.[index]}>
+                  <RecursionField
+                    schema={items}
+                    name={index}
+                    filterProperties={(schema) => {
+                      if (!isIndexComponent(schema)) return false;
+                      return true;
+                    }}
+                    onlyRenderProperties
+                  />
+                  {errors.length ? (
+                    <Badge size="small" className="errors-badge" count={errors.length}>
+                      {header}
+                    </Badge>
+                  ) : (
+                    <LinkageRulesTitle item={item.initialValue || item} index={index} />
+                  )}
+                </ArrayBase.Item>
+              );
+            };
+
+            const extra = (
+              <ArrayBase.Item index={index} record={item}>
                 <RecursionField
                   schema={items}
                   name={index}
                   filterProperties={(schema) => {
-                    if (!isIndexComponent(schema)) return false;
+                    if (!isOperationComponent(schema)) return false;
                     return true;
                   }}
                   onlyRenderProperties
                 />
-                {errors.length ? (
-                  <Badge size="small" className="errors-badge" count={errors.length}>
-                    {header}
-                  </Badge>
-                ) : (
-                  <LinkageRulesTitle item={item.initialValue || item} index={index} />
-                )}
+                {panelProps?.extra}
               </ArrayBase.Item>
             );
-          };
 
-          const extra = (
-            <ArrayBase.Item index={index} record={item}>
+            const content = (
               <RecursionField
                 schema={items}
                 name={index}
                 filterProperties={(schema) => {
-                  if (!isOperationComponent(schema)) return false;
+                  if (isIndexComponent(schema)) return false;
+                  if (isOperationComponent(schema)) return false;
                   return true;
                 }}
-                onlyRenderProperties
               />
-              {panelProps?.extra}
-            </ArrayBase.Item>
-          );
-
-          const content = (
-            <RecursionField
-              schema={items}
-              name={index}
-              filterProperties={(schema) => {
-                if (isIndexComponent(schema)) return false;
-                if (isOperationComponent(schema)) return false;
-                return true;
-              }}
-            />
-          );
-          return (
-            <Collapse.Panel {...props} {...panelProps} forceRender key={index} header={header()} extra={extra}>
-              <ArrayBase.Item index={index} key={index} record={item}>
-                {content}
-              </ArrayBase.Item>
-            </Collapse.Panel>
-          );
-        })}
-      </Collapse>
+            );
+            return (
+              <Collapse.Panel {...props} {...panelProps} forceRender key={index} header={header()} extra={extra}>
+                <ArrayBase.Item index={index} key={index} record={item}>
+                  {content}
+                </ArrayBase.Item>
+              </Collapse.Panel>
+            );
+          })}
+        </Collapse>
+      );
+    };
+    return (
+      <ArrayBase
+        onAdd={(index) => {
+          setActiveKeys(insertActiveKeys(activeKeys, index));
+        }}
+      >
+        {renderEmpty()}
+        {renderItems()}
+        {renderAddition()}
+      </ArrayBase>
     );
-  };
-  return (
-    <ArrayBase
-      onAdd={(index) => {
-        setActiveKeys(insertActiveKeys(activeKeys, index));
-      }}
-    >
-      {renderEmpty()}
-      {renderItems()}
-      {renderAddition()}
-    </ArrayBase>
-  );
-});
+  },
+  { displayName: 'ArrayCollapse' },
+);
 
 const CollapsePanel: React.FC<React.PropsWithChildren<CollapsePanelProps>> = ({ children }) => {
   return <Fragment>{children}</Fragment>;
diff --git a/packages/core/client/src/schema-settings/LinkageRules/index.tsx b/packages/core/client/src/schema-settings/LinkageRules/index.tsx
index d6a7b1914..b5ed9136d 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/index.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/index.tsx
@@ -8,113 +8,116 @@ import { LinkageRuleActionGroup } from './LinkageRuleActionGroup';
 import { ArrayCollapse } from './components/LinkageHeader';
 import { EnableLinkage } from './components/EnableLinkage';
 
-export const FormLinkageRules = observer((props: any) => {
-  const fieldSchema = useFieldSchema();
-  const { useProps, dynamicComponent } = props;
-  const { options, defaultValues, collectionName } = useProps();
-  return (
-    <FilterContext.Provider value={{ field: options, fieldSchema, dynamicComponent, options: options || [] }}>
-      <SchemaComponent
-        components={{ ArrayCollapse }}
-        schema={{
-          type: 'object',
-          properties: {
-            rules: {
-              type: 'array',
-              default: defaultValues,
-              'x-component': 'ArrayCollapse',
-              'x-decorator': 'FormItem',
-              'x-component-props': {
-                accordion: true,
-              },
-              items: {
-                type: 'object',
-                'x-component': 'ArrayCollapse.CollapsePanel',
+export const FormLinkageRules = observer(
+  (props: any) => {
+    const fieldSchema = useFieldSchema();
+    const { useProps, dynamicComponent } = props;
+    const { options, defaultValues, collectionName } = useProps();
+    return (
+      <FilterContext.Provider value={{ field: options, fieldSchema, dynamicComponent, options: options || [] }}>
+        <SchemaComponent
+          components={{ ArrayCollapse }}
+          schema={{
+            type: 'object',
+            properties: {
+              rules: {
+                type: 'array',
+                default: defaultValues,
+                'x-component': 'ArrayCollapse',
+                'x-decorator': 'FormItem',
                 'x-component-props': {
-                  extra: [<EnableLinkage />],
+                  accordion: true,
+                },
+                items: {
+                  type: 'object',
+                  'x-component': 'ArrayCollapse.CollapsePanel',
+                  'x-component-props': {
+                    extra: [<EnableLinkage />],
+                  },
+                  properties: {
+                    layout: {
+                      type: 'void',
+                      'x-component': 'FormLayout',
+                      'x-component-props': {
+                        labelStyle: {
+                          marginTop: '6px',
+                        },
+                        labelCol: 8,
+                        wrapperCol: 16,
+                      },
+                      properties: {
+                        conditions: {
+                          'x-component': 'h4',
+                          'x-content': '{{ t("Condition") }}',
+                        },
+                        condition: {
+                          'x-component': 'Filter',
+                          'x-component-props': {
+                            useProps() {
+                              return {
+                                options,
+                                className: css`
+                                  position: relative;
+                                  width: 100%;
+                                  margin-left: 10px;
+                                `,
+                              };
+                            },
+                            dynamicComponent: (props) => FilterDynamicComponent({ ...props, collectionName }),
+                          },
+                        },
+                        actions: {
+                          'x-component': 'h4',
+                          'x-content': '{{ t("Properties") }}',
+                        },
+                        action: {
+                          type: 'void',
+                          'x-component': LinkageRuleActionGroup,
+                          'x-component-props': {
+                            ...props,
+                          },
+                        },
+                      },
+                    },
+                    remove: {
+                      type: 'void',
+                      'x-component': 'ArrayCollapse.Remove',
+                    },
+                    moveUp: {
+                      type: 'void',
+                      'x-component': 'ArrayCollapse.MoveUp',
+                    },
+                    moveDown: {
+                      type: 'void',
+                      'x-component': 'ArrayCollapse.MoveDown',
+                    },
+                    copy: {
+                      type: 'void',
+                      'x-component': 'ArrayCollapse.Copy',
+                    },
+                  },
                 },
                 properties: {
-                  layout: {
+                  add: {
                     type: 'void',
-                    'x-component': 'FormLayout',
-                    'x-component-props': {
-                      labelStyle: {
-                        marginTop: '6px',
-                      },
-                      labelCol: 8,
-                      wrapperCol: 16,
-                    },
-                    properties: {
-                      conditions: {
-                        'x-component': 'h4',
-                        'x-content': '{{ t("Condition") }}',
-                      },
-                      condition: {
-                        'x-component': 'Filter',
-                        'x-component-props': {
-                          useProps() {
-                            return {
-                              options,
-                              className: css`
-                                position: relative;
-                                width: 100%;
-                                margin-left: 10px;
-                              `,
-                            };
-                          },
-                          dynamicComponent: (props) => FilterDynamicComponent({ ...props, collectionName }),
+                    title: '{{ t("Add linkage rule") }}',
+                    'x-component': 'ArrayCollapse.Addition',
+                    'x-reactions': {
+                      dependencies: ['rules'],
+                      fulfill: {
+                        state: {
+                          // disabled: '{{$deps[0].length >= 3}}',
                         },
                       },
-                      actions: {
-                        'x-component': 'h4',
-                        'x-content': '{{ t("Properties") }}',
-                      },
-                      action: {
-                        type: 'void',
-                        'x-component': LinkageRuleActionGroup,
-                        'x-component-props': {
-                          ...props,
-                        },
-                      },
-                    },
-                  },
-                  remove: {
-                    type: 'void',
-                    'x-component': 'ArrayCollapse.Remove',
-                  },
-                  moveUp: {
-                    type: 'void',
-                    'x-component': 'ArrayCollapse.MoveUp',
-                  },
-                  moveDown: {
-                    type: 'void',
-                    'x-component': 'ArrayCollapse.MoveDown',
-                  },
-                  copy: {
-                    type: 'void',
-                    'x-component': 'ArrayCollapse.Copy',
-                  },
-                },
-              },
-              properties: {
-                add: {
-                  type: 'void',
-                  title: '{{ t("Add linkage rule") }}',
-                  'x-component': 'ArrayCollapse.Addition',
-                  'x-reactions': {
-                    dependencies: ['rules'],
-                    fulfill: {
-                      state: {
-                        // disabled: '{{$deps[0].length >= 3}}',
-                      },
                     },
                   },
                 },
               },
             },
-          },
-        }}
-      />
-    </FilterContext.Provider>
-  );
-});
+          }}
+        />
+      </FilterContext.Provider>
+    );
+  },
+  { displayName: 'FormLinkageRules' },
+);
diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx
index f274fcd85..c407f95e6 100644
--- a/packages/core/client/src/schema-settings/SchemaSettings.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx
@@ -772,6 +772,7 @@ SchemaSettings.ActionModalItem = React.memo((props: any) => {
     </>
   );
 });
+SchemaSettings.ActionModalItem.displayName = 'SchemaSettings.ActionModalItem';
 
 SchemaSettings.ModalItem = function ModalItem(props) {
   const {
diff --git a/packages/core/client/src/schema-templates/BlockTemplate.tsx b/packages/core/client/src/schema-templates/BlockTemplate.tsx
index 22ec6bffc..c94040fdc 100644
--- a/packages/core/client/src/schema-templates/BlockTemplate.tsx
+++ b/packages/core/client/src/schema-templates/BlockTemplate.tsx
@@ -10,20 +10,23 @@ export const useBlockTemplateContext = () => {
   return useContext(BlockTemplateContext);
 };
 
-export const BlockTemplate = observer((props: any) => {
-  const { templateId } = props;
-  const { getTemplateById } = useSchemaTemplateManager();
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const { t } = useTranslation();
-  const template = useMemo(() => getTemplateById(templateId), [templateId]);
-  const onSuccess = (data) => {
-    fieldSchema['x-linkage-rules'] = data?.data?.['x-linkage-rules'] || [];
-  };
-  return template ? (
-    <BlockTemplateContext.Provider value={{ dn, field, fieldSchema, template }}>
-      <RemoteSchemaComponent noForm uid={template?.uid} onSuccess={onSuccess} />
-    </BlockTemplateContext.Provider>
-  ) : null;
-});
+export const BlockTemplate = observer(
+  (props: any) => {
+    const { templateId } = props;
+    const { getTemplateById } = useSchemaTemplateManager();
+    const field = useField();
+    const fieldSchema = useFieldSchema();
+    const { dn } = useDesignable();
+    const { t } = useTranslation();
+    const template = useMemo(() => getTemplateById(templateId), [templateId]);
+    const onSuccess = (data) => {
+      fieldSchema['x-linkage-rules'] = data?.data?.['x-linkage-rules'] || [];
+    };
+    return template ? (
+      <BlockTemplateContext.Provider value={{ dn, field, fieldSchema, template }}>
+        <RemoteSchemaComponent noForm uid={template?.uid} onSuccess={onSuccess} />
+      </BlockTemplateContext.Provider>
+    ) : null;
+  },
+  { displayName: 'BlockTemplate' },
+);
diff --git a/packages/core/client/src/settings-form/SettingsForm.tsx b/packages/core/client/src/settings-form/SettingsForm.tsx
index 265ca6408..19259c4d4 100644
--- a/packages/core/client/src/settings-form/SettingsForm.tsx
+++ b/packages/core/client/src/settings-form/SettingsForm.tsx
@@ -29,53 +29,56 @@ export const useSettingsFormContext = () => {
   return useContext(SettingsFormContext);
 };
 
-export const SettingsForm: any = observer((props: any) => {
-  const dn = useDesignable();
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const settingsFormSchema = useMemo(() => new Schema(props.schema), []);
-  const form = useMemo(
-    () =>
-      createForm({
-        initialValues: fieldSchema.toJSON(),
-        effects(form) {
-          onFormValuesChange((form) => {
-            dn.patch(form.values);
-            console.log('form.values', form.values);
-          });
-        },
-      }),
-    [],
-  );
-  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
-  return (
-    <SettingsFormContext.Provider value={{ dn, field, fieldSchema, dropdownVisible, setDropdownVisible }}>
-      <SchemaComponentOptions components={{ SettingsForm }}>
-        <FieldContext.Provider value={null}>
-          <FormContext.Provider value={form}>
-            <FieldContext.Provider value={f}>
-              <Dropdown
-                open={dropdownVisible}
-                onOpenChange={(visible) => setDropdownVisible(visible)}
-                overlayStyle={{ width: 200 }}
-                overlay={
-                  <Menu>
-                    {settingsFormSchema.mapProperties((s, key) => {
-                      return <RecursionField name={key} schema={s} />;
-                    })}
-                  </Menu>
-                }
-              >
-                <a>配置</a>
-              </Dropdown>
-            </FieldContext.Provider>
-          </FormContext.Provider>
-        </FieldContext.Provider>
-      </SchemaComponentOptions>
-    </SettingsFormContext.Provider>
-  );
-});
+export const SettingsForm: any = observer(
+  (props: any) => {
+    const dn = useDesignable();
+    const field = useField<Field>();
+    const fieldSchema = useFieldSchema();
+    const [dropdownVisible, setDropdownVisible] = useState(false);
+    const settingsFormSchema = useMemo(() => new Schema(props.schema), []);
+    const form = useMemo(
+      () =>
+        createForm({
+          initialValues: fieldSchema.toJSON(),
+          effects(form) {
+            onFormValuesChange((form) => {
+              dn.patch(form.values);
+              console.log('form.values', form.values);
+            });
+          },
+        }),
+      [],
+    );
+    const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
+    return (
+      <SettingsFormContext.Provider value={{ dn, field, fieldSchema, dropdownVisible, setDropdownVisible }}>
+        <SchemaComponentOptions components={{ SettingsForm }}>
+          <FieldContext.Provider value={null}>
+            <FormContext.Provider value={form}>
+              <FieldContext.Provider value={f}>
+                <Dropdown
+                  open={dropdownVisible}
+                  onOpenChange={(visible) => setDropdownVisible(visible)}
+                  overlayStyle={{ width: 200 }}
+                  overlay={
+                    <Menu>
+                      {settingsFormSchema.mapProperties((s, key) => {
+                        return <RecursionField name={key} schema={s} />;
+                      })}
+                    </Menu>
+                  }
+                >
+                  <a>配置</a>
+                </Dropdown>
+              </FieldContext.Provider>
+            </FormContext.Provider>
+          </FieldContext.Provider>
+        </SchemaComponentOptions>
+      </SettingsFormContext.Provider>
+    );
+  },
+  { displayName: 'SettingsForm' },
+);
 
 SettingsForm.Divider = () => {
   return <Menu.Divider />;
@@ -110,47 +113,53 @@ SettingsForm.Remove = (props) => {
   );
 };
 
-SettingsForm.Switch = observer(() => {
-  const field = useField<Field>();
-  return (
-    <Menu.Item
-      onClick={() => {
-        field.value = !field.value;
-      }}
-    >
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        {field.title} <Switch checked={!!field.value} />
-      </div>
-    </Menu.Item>
-  );
-});
+SettingsForm.Switch = observer(
+  () => {
+    const field = useField<Field>();
+    return (
+      <Menu.Item
+        onClick={() => {
+          field.value = !field.value;
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          {field.title} <Switch checked={!!field.value} />
+        </div>
+      </Menu.Item>
+    );
+  },
+  { displayName: 'SettingsForm' },
+);
 
-SettingsForm.Select = observer((props) => {
-  const field = useField<Field>();
-  const [open, setOpen] = useState(false);
-  return (
-    <Menu.Item onClick={() => !open && setOpen(true)}>
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        {field.title}
-        <Select
-          open={open}
-          onDropdownVisibleChange={(open) => setOpen(open)}
-          onSelect={() => {
-            setOpen(false);
-          }}
-          onChange={(value) => {
-            field.value = value;
-          }}
-          value={field.value}
-          options={field.dataSource}
-          style={{ width: '60%' }}
-          size={'small'}
-          bordered={false}
-        />
-      </div>
-    </Menu.Item>
-  );
-});
+SettingsForm.Select = observer(
+  (props) => {
+    const field = useField<Field>();
+    const [open, setOpen] = useState(false);
+    return (
+      <Menu.Item onClick={() => !open && setOpen(true)}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          {field.title}
+          <Select
+            open={open}
+            onDropdownVisibleChange={(open) => setOpen(open)}
+            onSelect={() => {
+              setOpen(false);
+            }}
+            onChange={(value) => {
+              field.value = value;
+            }}
+            value={field.value}
+            options={field.dataSource}
+            style={{ width: '60%' }}
+            size={'small'}
+            bordered={false}
+          />
+        </div>
+      </Menu.Item>
+    );
+  },
+  { displayName: 'SettingsForm' },
+);
 
 SettingsForm.Modal = () => {
   const form = useForm();
diff --git a/packages/core/client/src/settings-form/demos/demo1.tsx b/packages/core/client/src/settings-form/demos/demo1.tsx
index 63c74224c..acb14a763 100644
--- a/packages/core/client/src/settings-form/demos/demo1.tsx
+++ b/packages/core/client/src/settings-form/demos/demo1.tsx
@@ -97,16 +97,19 @@ const schema: ISchema = {
   },
 };
 
-const Hello = observer((props: any) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div>
-      <pre>{JSON.stringify(props, null, 2)}</pre>
-      <pre>{JSON.stringify(fieldSchema.toJSON(), null, 2)}</pre>
-      <SettingsForm schema={schema} />
-    </div>
-  );
-});
+const Hello = observer(
+  (props: any) => {
+    const fieldSchema = useFieldSchema();
+    return (
+      <div>
+        <pre>{JSON.stringify(props, null, 2)}</pre>
+        <pre>{JSON.stringify(fieldSchema.toJSON(), null, 2)}</pre>
+        <SettingsForm schema={schema} />
+      </div>
+    );
+  },
+  { displayName: 'Hello' },
+);
 
 export default () => {
   return (
diff --git a/packages/plugins/audit-logs/src/client/components/AuditLogsField.tsx b/packages/plugins/audit-logs/src/client/components/AuditLogsField.tsx
index 2735ba06d..314d1b048 100644
--- a/packages/plugins/audit-logs/src/client/components/AuditLogsField.tsx
+++ b/packages/plugins/audit-logs/src/client/components/AuditLogsField.tsx
@@ -2,15 +2,18 @@ import { EllipsisWithTooltip, useCompile } from '@nocobase/client';
 import React from 'react';
 import { observer, useField } from '@formily/react';
 
-export const AuditLogsField = observer(() => {
-  const field = useField<any>();
-  const compile = useCompile();
-  if (!field.value) {
-    return null;
-  }
-  return (
-    <EllipsisWithTooltip ellipsis>
-      {field.value?.uiSchema?.title ? compile(field.value?.uiSchema?.title) : field.value.name}
-    </EllipsisWithTooltip>
-  );
-});
+export const AuditLogsField = observer(
+  () => {
+    const field = useField<any>();
+    const compile = useCompile();
+    if (!field.value) {
+      return null;
+    }
+    return (
+      <EllipsisWithTooltip ellipsis>
+        {field.value?.uiSchema?.title ? compile(field.value?.uiSchema?.title) : field.value.name}
+      </EllipsisWithTooltip>
+    );
+  },
+  { displayName: 'AuditLogsField' },
+);
diff --git a/packages/plugins/audit-logs/src/client/components/AuditLogsValue.tsx b/packages/plugins/audit-logs/src/client/components/AuditLogsValue.tsx
index fe4f51c25..1e2c1ac08 100644
--- a/packages/plugins/audit-logs/src/client/components/AuditLogsValue.tsx
+++ b/packages/plugins/audit-logs/src/client/components/AuditLogsValue.tsx
@@ -2,22 +2,25 @@ import { EllipsisWithTooltip, FormProvider, SchemaComponent, useRecord } from '@
 import React from 'react';
 import { observer, useField } from '@formily/react';
 
-export const AuditLogsValue = observer(() => {
-  const field = useField<any>();
-  const record = useRecord();
-  if (record.field?.uiSchema) {
-    return (
-      <FormProvider>
-        <SchemaComponent
-          schema={{
-            name: record.field.name,
-            ...record.field?.uiSchema,
-            default: field.value,
-            'x-read-pretty': true,
-          }}
-        />
-      </FormProvider>
-    );
-  }
-  return <EllipsisWithTooltip ellipsis>{field.value ? JSON.stringify(field.value) : null}</EllipsisWithTooltip>;
-});
+export const AuditLogsValue = observer(
+  () => {
+    const field = useField<any>();
+    const record = useRecord();
+    if (record.field?.uiSchema) {
+      return (
+        <FormProvider>
+          <SchemaComponent
+            schema={{
+              name: record.field.name,
+              ...record.field?.uiSchema,
+              default: field.value,
+              'x-read-pretty': true,
+            }}
+          />
+        </FormProvider>
+      );
+    }
+    return <EllipsisWithTooltip ellipsis>{field.value ? JSON.stringify(field.value) : null}</EllipsisWithTooltip>;
+  },
+  { displayName: 'AuditLogsValue' },
+);
diff --git a/packages/plugins/audit-logs/src/client/deplicated/AuditLogs.tsx b/packages/plugins/audit-logs/src/client/deplicated/AuditLogs.tsx
index a60d6c883..8d8781d60 100644
--- a/packages/plugins/audit-logs/src/client/deplicated/AuditLogs.tsx
+++ b/packages/plugins/audit-logs/src/client/deplicated/AuditLogs.tsx
@@ -50,46 +50,58 @@ const collection = {
   ],
 };
 
-const Username = observer(() => {
-  const field = useField<any>();
-  return <div>{field?.value?.nickname || field.value?.id}</div>;
-});
+const Username = observer(
+  () => {
+    const field = useField<any>();
+    return <div>{field?.value?.nickname || field.value?.id}</div>;
+  },
+  { displayName: 'Username' },
+);
 
-const Collection = observer(() => {
-  const field = useField<any>();
-  const { title, name } = field.value || {};
-  const compile = useCompile();
-  return <div>{title ? compile(title) : name}</div>;
-});
+const Collection = observer(
+  () => {
+    const field = useField<any>();
+    const { title, name } = field.value || {};
+    const compile = useCompile();
+    return <div>{title ? compile(title) : name}</div>;
+  },
+  { displayName: 'Collection' },
+);
 
-const Field = observer(() => {
-  const field = useField<any>();
-  const compile = useCompile();
-  if (!field.value) {
-    return null;
-  }
-  return <div>{field.value?.uiSchema?.title ? compile(field.value?.uiSchema?.title) : field.value.name}</div>;
-});
+const Field = observer(
+  () => {
+    const field = useField<any>();
+    const compile = useCompile();
+    if (!field.value) {
+      return null;
+    }
+    return <div>{field.value?.uiSchema?.title ? compile(field.value?.uiSchema?.title) : field.value.name}</div>;
+  },
+  { displayName: 'Field' },
+);
 
-const Value = observer(() => {
-  const field = useField<any>();
-  const record = ArrayTable.useRecord();
-  if (record.field?.uiSchema) {
-    return (
-      <FormProvider>
-        <SchemaComponent
-          schema={{
-            name: record.field.name,
-            ...record.field?.uiSchema,
-            default: field.value,
-            'x-read-pretty': true,
-          }}
-        />
-      </FormProvider>
-    );
-  }
-  return <div>{field.value ? JSON.stringify(field.value) : null}</div>;
-});
+const Value = observer(
+  () => {
+    const field = useField<any>();
+    const record = ArrayTable.useRecord();
+    if (record.field?.uiSchema) {
+      return (
+        <FormProvider>
+          <SchemaComponent
+            schema={{
+              name: record.field.name,
+              ...record.field?.uiSchema,
+              default: field.value,
+              'x-read-pretty': true,
+            }}
+          />
+        </FormProvider>
+      );
+    }
+    return <div>{field.value ? JSON.stringify(field.value) : null}</div>;
+  },
+  { displayName: 'Value' },
+);
 
 const IsAssociationBlock = createContext(null);
 
@@ -446,52 +458,55 @@ export const AuditLogs: any = () => {
   );
 };
 
-AuditLogs.Decorator = observer((props: any) => {
-  const parent = useCollection();
-  const record = useRecord();
-  const { interfaces } = useContext(CollectionManagerContext);
-  let filter = props?.params?.filter;
-  if (parent.name) {
-    const filterByTk = record?.[parent.filterTargetKey || 'id'];
-    if (filter) {
-      filter = {
-        $and: [
-          filter,
-          {
-            collectionName: parent.name,
-            recordId: `${filterByTk}`,
-          },
-        ],
-      };
-    } else {
-      filter = {
-        collectionName: parent.name,
-        recordId: `${filterByTk}`,
-      };
+AuditLogs.Decorator = observer(
+  (props: any) => {
+    const parent = useCollection();
+    const record = useRecord();
+    const { interfaces } = useContext(CollectionManagerContext);
+    let filter = props?.params?.filter;
+    if (parent.name) {
+      const filterByTk = record?.[parent.filterTargetKey || 'id'];
+      if (filter) {
+        filter = {
+          $and: [
+            filter,
+            {
+              collectionName: parent.name,
+              recordId: `${filterByTk}`,
+            },
+          ],
+        };
+      } else {
+        filter = {
+          collectionName: parent.name,
+          recordId: `${filterByTk}`,
+        };
+      }
     }
-  }
-  const defaults = {
-    collection: 'auditLogs',
-    resource: 'auditLogs',
-    action: 'list',
-    params: {
-      pageSize: 20,
-      appends: ['collection', 'user'],
-      ...props.params,
-      filter,
-      sort: '-createdAt',
-    },
-    rowKey: 'id',
-    showIndex: true,
-    dragSort: false,
-  };
-  return (
-    <IsAssociationBlock.Provider value={!!parent.name}>
-      <CollectionManagerProvider collections={[collection]} interfaces={interfaces}>
-        <TableBlockProvider {...defaults}>{props.children}</TableBlockProvider>
-      </CollectionManagerProvider>
-    </IsAssociationBlock.Provider>
-  );
-});
+    const defaults = {
+      collection: 'auditLogs',
+      resource: 'auditLogs',
+      action: 'list',
+      params: {
+        pageSize: 20,
+        appends: ['collection', 'user'],
+        ...props.params,
+        filter,
+        sort: '-createdAt',
+      },
+      rowKey: 'id',
+      showIndex: true,
+      dragSort: false,
+    };
+    return (
+      <IsAssociationBlock.Provider value={!!parent.name}>
+        <CollectionManagerProvider collections={[collection]} interfaces={interfaces}>
+          <TableBlockProvider {...defaults}>{props.children}</TableBlockProvider>
+        </CollectionManagerProvider>
+      </IsAssociationBlock.Provider>
+    );
+  },
+  { displayName: 'AuditLogs.Decorator' },
+);
 
 AuditLogs.Designer = AuditLogsDesigner;
diff --git a/packages/plugins/charts/src/client/ChartBlockInitializer.tsx b/packages/plugins/charts/src/client/ChartBlockInitializer.tsx
index 7c72e24fe..428a7680d 100644
--- a/packages/plugins/charts/src/client/ChartBlockInitializer.tsx
+++ b/packages/plugins/charts/src/client/ChartBlockInitializer.tsx
@@ -20,24 +20,27 @@ import DataSetPreviewTable from './DataSetPreviewTable';
 import { lang, useChartsTranslation } from './locale';
 import { templates } from './templates';
 
-export const Options = observer((props) => {
-  const form = useForm<ChartFormInterface>();
-  const field = useField<Field>();
-  const [s, setSchema] = useState(new Schema({}));
-  const [chartType, setChartType] = useState(form.values.type);
-  useEffect(() => {
-    // form.clearFormGraph('options.*');
-    setChartType(form?.values?.type);
-    if (chartType !== form?.values?.type) {
-      form.clearFormGraph('options.*');
-    }
-    if (form.values.type) {
-      const template = templates.get(form.values.type);
-      setSchema(new Schema(template.configurableProperties || {}));
-    }
-  }, [form.values.type]);
-  return <RecursionField schema={s} />;
-});
+export const Options = observer(
+  (props) => {
+    const form = useForm<ChartFormInterface>();
+    const field = useField<Field>();
+    const [s, setSchema] = useState(new Schema({}));
+    const [chartType, setChartType] = useState(form.values.type);
+    useEffect(() => {
+      // form.clearFormGraph('options.*');
+      setChartType(form?.values?.type);
+      if (chartType !== form?.values?.type) {
+        form.clearFormGraph('options.*');
+      }
+      if (form.values.type) {
+        const template = templates.get(form.values.type);
+        setSchema(new Schema(template.configurableProperties || {}));
+      }
+    }, [form.values.type]);
+    return <RecursionField schema={s} />;
+  },
+  { displayName: 'Options' },
+);
 
 interface ChartFormInterface {
   type: string;
diff --git a/packages/plugins/charts/src/client/index.tsx b/packages/plugins/charts/src/client/index.tsx
index 816ac1d4f..6b1540ae0 100644
--- a/packages/plugins/charts/src/client/index.tsx
+++ b/packages/plugins/charts/src/client/index.tsx
@@ -39,7 +39,7 @@ registerValidateRules({
   },
 });
 
-export default React.memo((props) => {
+const Charts = React.memo((props) => {
   const api = useAPIClient();
   const items = useContext(SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -99,3 +99,6 @@ export default React.memo((props) => {
     </ChartQueryMetadataProvider>
   );
 });
+Charts.displayName = 'Charts';
+
+export default Charts;
diff --git a/packages/plugins/charts/src/client/select/ReadPretty.tsx b/packages/plugins/charts/src/client/select/ReadPretty.tsx
index 98cf93408..391cf7ffb 100644
--- a/packages/plugins/charts/src/client/select/ReadPretty.tsx
+++ b/packages/plugins/charts/src/client/select/ReadPretty.tsx
@@ -11,26 +11,29 @@ type Composed = {
   Object?: React.FC<any>;
 };
 
-export const ReadPretty = observer((props: any) => {
-  const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-  const field = useField<any>();
-  const compile = useCompile();
+export const ReadPretty = observer(
+  (props: any) => {
+    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
+    const field = useField<any>();
+    const compile = useCompile();
 
-  if (!isValid(props.value)) {
-    return <div />;
-  }
-  if (isArrayField(field) && field?.value?.length === 0) {
-    return <div />;
-  }
-  const dataSource = field.dataSource || props.options || [];
-  const options = getCurrentOptions(field.value, dataSource, fieldNames);
-  return (
-    <div>
-      {options.map((option, key) => (
-        <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
-          {compile(option[fieldNames.label])}
-        </Tag>
-      ))}
-    </div>
-  );
-});
+    if (!isValid(props.value)) {
+      return <div />;
+    }
+    if (isArrayField(field) && field?.value?.length === 0) {
+      return <div />;
+    }
+    const dataSource = field.dataSource || props.options || [];
+    const options = getCurrentOptions(field.value, dataSource, fieldNames);
+    return (
+      <div>
+        {options.map((option, key) => (
+          <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
+            {compile(option[fieldNames.label])}
+          </Tag>
+        ))}
+      </div>
+    );
+  },
+  { displayName: 'ReadPretty' },
+);
diff --git a/packages/plugins/error-handler/package.json b/packages/plugins/error-handler/package.json
index 61f160f56..7bd7ac112 100644
--- a/packages/plugins/error-handler/package.json
+++ b/packages/plugins/error-handler/package.json
@@ -9,7 +9,7 @@
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "dependencies": {
-    "@formily/json-schema": "^2.0.15",
+    "@formily/json-schema": "2.2.24",
     "@nocobase/server": "0.9.4-alpha.2"
   },
   "repository": {
diff --git a/packages/plugins/excel-formula-field/src/client/ExcelFormula/index.ts b/packages/plugins/excel-formula-field/src/client/ExcelFormula/index.ts
index b1db4d848..31391e387 100644
--- a/packages/plugins/excel-formula-field/src/client/ExcelFormula/index.ts
+++ b/packages/plugins/excel-formula-field/src/client/ExcelFormula/index.ts
@@ -5,11 +5,13 @@ import { evaluate } from '../../utils/evaluate';
 
 export const ExcelFormula: any = () => null;
 
-ExcelFormula.Result = observer((props) =>
-  React.createElement(Formula.Result, {
-    ...props,
-    evaluate,
-  }),
+ExcelFormula.Result = observer(
+  (props) =>
+    React.createElement(Formula.Result, {
+      ...props,
+      evaluate,
+    }),
+  { displayName: 'ExcelFormula.Result' },
 );
 
 ExcelFormula.Expression = connect((props) => {
diff --git a/packages/plugins/excel-formula-field/src/client/index.tsx b/packages/plugins/excel-formula-field/src/client/index.tsx
index 9fa3adf23..b0069fee5 100644
--- a/packages/plugins/excel-formula-field/src/client/index.tsx
+++ b/packages/plugins/excel-formula-field/src/client/index.tsx
@@ -6,7 +6,7 @@ import { ExcelFormula } from './ExcelFormula';
 
 registerField(excelFormula.group, 'excelFormula', excelFormula);
 
-export default React.memo((props) => {
+const excelFormulaField = React.memo((props) => {
   const ctx = useContext(CollectionManagerContext);
   const { t } = useTranslation();
 
@@ -32,3 +32,7 @@ export default React.memo((props) => {
     </SchemaComponentOptions>
   );
 });
+
+excelFormulaField.displayName = 'excelFormulaField';
+
+export default excelFormulaField;
diff --git a/packages/plugins/file-manager/src/client/StorageOptions.tsx b/packages/plugins/file-manager/src/client/StorageOptions.tsx
index f7fde12fc..d8700e7f1 100644
--- a/packages/plugins/file-manager/src/client/StorageOptions.tsx
+++ b/packages/plugins/file-manager/src/client/StorageOptions.tsx
@@ -121,17 +121,20 @@ const schema = {
   },
 };
 
-export const StorageOptions = observer((props) => {
-  const form = useForm();
-  const field = useField<Field>();
-  const [s, setSchema] = useState(new Schema({}));
-  useEffect(() => {
-    // form.clearFormGraph('options.*');
-    setSchema(new Schema(schema[form.values.type] || {}));
-  }, [form.values.type]);
-  return (
-    <FormLayout layout={'vertical'}>
-      <RecursionField key={form.values.type || 'local'} basePath={field.address} onlyRenderProperties schema={s} />
-    </FormLayout>
-  );
-});
+export const StorageOptions = observer(
+  (props) => {
+    const form = useForm();
+    const field = useField<Field>();
+    const [s, setSchema] = useState(new Schema({}));
+    useEffect(() => {
+      // form.clearFormGraph('options.*');
+      setSchema(new Schema(schema[form.values.type] || {}));
+    }, [form.values.type]);
+    return (
+      <FormLayout layout={'vertical'}>
+        <RecursionField key={form.values.type || 'local'} basePath={field.address} onlyRenderProperties schema={s} />
+      </FormLayout>
+    );
+  },
+  { displayName: 'StorageOptions' },
+);
diff --git a/packages/plugins/formula-field/src/client/index.tsx b/packages/plugins/formula-field/src/client/index.tsx
index 2ca43feed..d2f4c09bf 100644
--- a/packages/plugins/formula-field/src/client/index.tsx
+++ b/packages/plugins/formula-field/src/client/index.tsx
@@ -36,7 +36,7 @@ function renderExpressionDescription(key: string) {
   ) : null;
 }
 
-export default React.memo((props) => {
+const FormulaField = React.memo((props) => {
   const ctx = useContext(CollectionManagerContext);
   return (
     <SchemaComponentOptions
@@ -63,3 +63,6 @@ export default React.memo((props) => {
     </SchemaComponentOptions>
   );
 });
+FormulaField.displayName = 'FormulaField';
+
+export default FormulaField;
diff --git a/packages/plugins/graph-collection-manager/src/client/GraphCollectionProvider.tsx b/packages/plugins/graph-collection-manager/src/client/GraphCollectionProvider.tsx
index 962ea15a0..6c25c77a1 100644
--- a/packages/plugins/graph-collection-manager/src/client/GraphCollectionProvider.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/GraphCollectionProvider.tsx
@@ -39,3 +39,4 @@ export const GraphCollectionProvider = React.memo((props) => {
     </SettingsCenterProvider>
   );
 });
+GraphCollectionProvider.displayName = 'GraphCollectionProvider';
diff --git a/packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx b/packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx
index 781d071cf..ceb206f74 100644
--- a/packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx
@@ -1383,3 +1383,4 @@ export const GraphDrawPage = React.memo(() => {
     </Layout>
   );
 });
+GraphDrawPage.displayName = 'GraphDrawPage';
diff --git a/packages/plugins/graph-collection-manager/src/client/action-hooks.tsx b/packages/plugins/graph-collection-manager/src/client/action-hooks.tsx
index 7d4e852f9..626175a16 100644
--- a/packages/plugins/graph-collection-manager/src/client/action-hooks.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/action-hooks.tsx
@@ -28,15 +28,18 @@ export const useValuesFromRecord = (options, data) => {
   return result;
 };
 
-export const SourceCollection = observer(() => {
-  const { record } = useContext(GraphCollectionContext);
-  const compile = useCompile();
-  return (
-    <div>
-      <Select disabled value={record.name} options={[{ value: record.name, label: compile(record.title) }]} />
-    </div>
-  );
-});
+export const SourceCollection = observer(
+  () => {
+    const { record } = useContext(GraphCollectionContext);
+    const compile = useCompile();
+    return (
+      <div>
+        <Select disabled value={record.name} options={[{ value: record.name, label: compile(record.title) }]} />
+      </div>
+    );
+  },
+  { displayName: 'SourceCollection' },
+);
 
 export const useCancelAction = () => {
   const form = useForm();
diff --git a/packages/plugins/graph-collection-manager/src/client/components/FieldSummary.tsx b/packages/plugins/graph-collection-manager/src/client/components/FieldSummary.tsx
index 7d624ce98..b1fa633c5 100644
--- a/packages/plugins/graph-collection-manager/src/client/components/FieldSummary.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/components/FieldSummary.tsx
@@ -5,36 +5,39 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCompile, useCollectionManager } from '@nocobase/client';
 
-export const FieldSummary = observer((props: any) => {
-  const { schemaKey } = props;
-  const { getInterface } = useCollectionManager();
-  const compile = useCompile();
-  const { t } = useTranslation();
-  const schema = getInterface(schemaKey);
+export const FieldSummary = observer(
+  (props: any) => {
+    const { schemaKey } = props;
+    const { getInterface } = useCollectionManager();
+    const compile = useCompile();
+    const { t } = useTranslation();
+    const schema = getInterface(schemaKey);
 
-  if (!schema) return null;
+    if (!schema) return null;
 
-  return (
-    <div
-      className={css`
-        background: #f6f6f6;
-        margin-bottom: 24px;
-        padding: 16px;
-      `}
-    >
-      <div className={css``}>
-        {t('Field interface')}: <Tag>{compile(schema.title)}</Tag>
-      </div>
-      {schema.description ? (
-        <div
-          className={css`
-            margin-top: 8px;
-            color: rgba(0, 0, 0, 0.45);
-          `}
-        >
-          {compile(schema.description)}
+    return (
+      <div
+        className={css`
+          background: #f6f6f6;
+          margin-bottom: 24px;
+          padding: 16px;
+        `}
+      >
+        <div className={css``}>
+          {t('Field interface')}: <Tag>{compile(schema.title)}</Tag>
         </div>
-      ) : null}
-    </div>
-  );
-});
+        {schema.description ? (
+          <div
+            className={css`
+              margin-top: 8px;
+              color: rgba(0, 0, 0, 0.45);
+            `}
+          >
+            {compile(schema.description)}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+  { displayName: 'FieldSummary' },
+);
diff --git a/packages/plugins/iframe-block/src/client/Iframe.tsx b/packages/plugins/iframe-block/src/client/Iframe.tsx
index f43424956..e60f489fc 100644
--- a/packages/plugins/iframe-block/src/client/Iframe.tsx
+++ b/packages/plugins/iframe-block/src/client/Iframe.tsx
@@ -15,38 +15,41 @@ function isNumeric(str: string | undefined) {
   ); // ...and ensure strings of whitespace fail
 }
 
-export const Iframe: any = observer((props: IIframe & { html?: string; htmlId?: number; mode: string }) => {
-  const { url, htmlId, mode = 'url', height, html, ...others } = props;
+export const Iframe: any = observer(
+  (props: IIframe & { html?: string; htmlId?: number; mode: string }) => {
+    const { url, htmlId, mode = 'url', height, html, ...others } = props;
 
-  const { t } = useTranslation();
-  const api = useAPIClient();
-  const field = useField();
+    const { t } = useTranslation();
+    const api = useAPIClient();
+    const field = useField();
 
-  const src = React.useMemo(() => {
-    if (mode === 'html') {
-      return `/api/iframeHtml:getHtml/${htmlId}?token=${api.auth.getToken()}&v=${field.data?.v || ''}`;
+    const src = React.useMemo(() => {
+      if (mode === 'html') {
+        return `/api/iframeHtml:getHtml/${htmlId}?token=${api.auth.getToken()}&v=${field.data?.v || ''}`;
+      }
+      return url;
+    }, [url, mode, htmlId, field.data?.v]);
+
+    if ((mode === 'url' && !url) || (mode === 'html' && !htmlId)) {
+      return <Card style={{ marginBottom: 24 }}>{t('Please fill in the iframe URL')}</Card>;
     }
-    return url;
-  }, [url, mode, htmlId, field.data?.v]);
 
-  if ((mode === 'url' && !url) || (mode === 'html' && !htmlId)) {
-    return <Card style={{ marginBottom: 24 }}>{t('Please fill in the iframe URL')}</Card>;
-  }
-
-  return (
-    <RIframe
-      url={src}
-      width="100%"
-      display="block"
-      position="relative"
-      styles={{
-        height: isNumeric(height) ? `${height}px` : height,
-        marginBottom: '24px',
-        border: 0,
-      }}
-      {...others}
-    />
-  );
-});
+    return (
+      <RIframe
+        url={src}
+        width="100%"
+        display="block"
+        position="relative"
+        styles={{
+          height: isNumeric(height) ? `${height}px` : height,
+          marginBottom: '24px',
+          border: 0,
+        }}
+        {...others}
+      />
+    );
+  },
+  { displayName: 'Iframe' },
+);
 
 Iframe.Designer = IframeDesigner;
diff --git a/packages/plugins/map/src/client/index.tsx b/packages/plugins/map/src/client/index.tsx
index b41142822..5c2385b91 100644
--- a/packages/plugins/map/src/client/index.tsx
+++ b/packages/plugins/map/src/client/index.tsx
@@ -13,7 +13,7 @@ import { MapInitializer } from './initialize';
 import { useMapTranslation } from './locale';
 import './locale';
 
-export default React.memo((props) => {
+const MapProvider = React.memo((props) => {
   const ctx = useContext(CollectionManagerContext);
   const { t } = useMapTranslation();
   return (
@@ -45,3 +45,6 @@ export default React.memo((props) => {
     </CurrentAppInfoProvider>
   );
 });
+MapProvider.displayName = 'MapProvider';
+
+export default MapProvider;
diff --git a/packages/plugins/math-formula-field/src/client/MathFormula/index.tsx b/packages/plugins/math-formula-field/src/client/MathFormula/index.tsx
index 9d62ae7b9..f66f7e6e1 100644
--- a/packages/plugins/math-formula-field/src/client/MathFormula/index.tsx
+++ b/packages/plugins/math-formula-field/src/client/MathFormula/index.tsx
@@ -5,11 +5,13 @@ import { evaluate } from '../../utils/evaluate';
 
 export const MathFormula: any = () => null;
 
-MathFormula.Result = observer((props) =>
-  React.createElement(Formula.Result, {
-    ...props,
-    evaluate,
-  }),
+MathFormula.Result = observer(
+  (props) =>
+    React.createElement(Formula.Result, {
+      ...props,
+      evaluate,
+    }),
+  { displayName: 'MathFormula.Result' },
 );
 
 MathFormula.Expression = connect((props) => {
diff --git a/packages/plugins/math-formula-field/src/client/index.tsx b/packages/plugins/math-formula-field/src/client/index.tsx
index df05ac1b3..f4af5f197 100644
--- a/packages/plugins/math-formula-field/src/client/index.tsx
+++ b/packages/plugins/math-formula-field/src/client/index.tsx
@@ -6,7 +6,7 @@ import { MathFormula } from './MathFormula';
 
 registerField(mathFormula.group, 'mathFormula', mathFormula);
 
-export default React.memo((props) => {
+const MathFormulaField = React.memo((props) => {
   const ctx = useContext(CollectionManagerContext);
   const { t } = useTranslation();
   return (
@@ -29,3 +29,6 @@ export default React.memo((props) => {
     </SchemaComponentOptions>
   );
 });
+MathFormulaField.displayName = 'MathFormulaField';
+
+export default MathFormulaField;
diff --git a/packages/plugins/oidc/src/client/RedirectURLInput.tsx b/packages/plugins/oidc/src/client/RedirectURLInput.tsx
index f756697c9..830393ace 100644
--- a/packages/plugins/oidc/src/client/RedirectURLInput.tsx
+++ b/packages/plugins/oidc/src/client/RedirectURLInput.tsx
@@ -5,23 +5,26 @@ import { observer, useField, useForm } from '@formily/react';
 import { useEffect } from 'react';
 import { Input, useRecord } from '@nocobase/client';
 
-export const RedirectURLInput = observer(() => {
-  const form = useForm();
-  const field = useField<Field>();
-  const record = useRecord();
+export const RedirectURLInput = observer(
+  () => {
+    const form = useForm();
+    const field = useField<Field>();
+    const record = useRecord();
 
-  const clientId = form.values.clientId ?? record.clientId;
+    const clientId = form.values.clientId ?? record.clientId;
 
-  useEffect(() => {
-    const { protocol, host } = window.location;
-    field.setValue(`${protocol}//${host}/api/oidc:redirect?clientId=${clientId}`);
-  }, [clientId]);
+    useEffect(() => {
+      const { protocol, host } = window.location;
+      field.setValue(`${protocol}//${host}/api/oidc:redirect?clientId=${clientId}`);
+    }, [clientId]);
 
-  return (
-    <div>
-      <FormLayout layout={'vertical'}>
-        <Input disabled value={field.value} />
-      </FormLayout>
-    </div>
-  );
-});
+    return (
+      <div>
+        <FormLayout layout={'vertical'}>
+          <Input disabled value={field.value} />
+        </FormLayout>
+      </div>
+    );
+  },
+  { displayName: 'RedirectURLInput' },
+);
diff --git a/packages/plugins/saml/src/client/RedirectURLInput.tsx b/packages/plugins/saml/src/client/RedirectURLInput.tsx
index 0ebfadba5..976077f11 100644
--- a/packages/plugins/saml/src/client/RedirectURLInput.tsx
+++ b/packages/plugins/saml/src/client/RedirectURLInput.tsx
@@ -5,23 +5,26 @@ import { observer, useField, useForm } from '@formily/react';
 import { useEffect } from 'react';
 import { Input, useRecord } from '@nocobase/client';
 
-export const RedirectURLInput = observer(() => {
-  const form = useForm();
-  const field = useField<Field>();
-  const record = useRecord();
+export const RedirectURLInput = observer(
+  () => {
+    const form = useForm();
+    const field = useField<Field>();
+    const record = useRecord();
 
-  const clientId = form.values.clientId ?? record.clientId;
+    const clientId = form.values.clientId ?? record.clientId;
 
-  useEffect(() => {
-    const { protocol, host } = window.location;
-    field.setValue(`${protocol}//${host}/api/saml:redirect?clientId=${clientId}`);
-  }, [clientId]);
+    useEffect(() => {
+      const { protocol, host } = window.location;
+      field.setValue(`${protocol}//${host}/api/saml:redirect?clientId=${clientId}`);
+    }, [clientId]);
 
-  return (
-    <div>
-      <FormLayout layout={'vertical'}>
-        <Input disabled value={field.value} />
-      </FormLayout>
-    </div>
-  );
-});
+    return (
+      <div>
+        <FormLayout layout={'vertical'}>
+          <Input disabled value={field.value} />
+        </FormLayout>
+      </div>
+    );
+  },
+  { displayName: 'RedirectURLInput' },
+);
diff --git a/packages/plugins/snapshot-field/src/client/index.tsx b/packages/plugins/snapshot-field/src/client/index.tsx
index 859a29af8..caef94573 100644
--- a/packages/plugins/snapshot-field/src/client/index.tsx
+++ b/packages/plugins/snapshot-field/src/client/index.tsx
@@ -14,7 +14,7 @@ import { SnapshotBlockInitializersDetailItem } from './SnapshotBlock/SnapshotBlo
 import { SnapshotBlockProvider } from './SnapshotBlock/SnapshotBlockProvider';
 import { SnapshotRecordPicker } from './SnapshotRecordPicker';
 
-export default React.memo((props) => {
+const SnapshotField = React.memo((props) => {
   useEffect(() => {
     registerField(snapshot.group, snapshot.name as string, snapshot);
   }, []);
@@ -47,3 +47,6 @@ export default React.memo((props) => {
     </CollectionManagerProvider>
   );
 });
+SnapshotField.displayName = 'SnapshotField';
+
+export default SnapshotField;
diff --git a/packages/plugins/ui-schema-storage/package.json b/packages/plugins/ui-schema-storage/package.json
index ef063d4fc..6083b49bb 100644
--- a/packages/plugins/ui-schema-storage/package.json
+++ b/packages/plugins/ui-schema-storage/package.json
@@ -9,7 +9,7 @@
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "devDependencies": {
-    "@formily/json-schema": "2.0.20",
+    "@formily/json-schema": "2.2.24",
     "@nocobase/test": "0.9.4-alpha.2"
   },
   "gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
diff --git a/packages/plugins/verification/src/client/ProviderOptions.tsx b/packages/plugins/verification/src/client/ProviderOptions.tsx
index 74e6d8607..68907db6d 100644
--- a/packages/plugins/verification/src/client/ProviderOptions.tsx
+++ b/packages/plugins/verification/src/client/ProviderOptions.tsx
@@ -5,17 +5,27 @@ import { observer, RecursionField, Schema, useField, useForm } from '@formily/re
 
 import providerTypes from './providerTypes';
 
-export default observer((props) => {
-  const form = useForm();
-  const field = useField<Field>();
-  const [s, setSchema] = useState(new Schema({}));
-  useEffect(() => {
-    form.clearFormGraph('options.*');
-    setSchema(new Schema(providerTypes.get(form.values.type) || {}));
-  }, [form.values.type]);
-  return (
-    <FormLayout layout={'vertical'}>
-      <RecursionField key={form.values.type || 'sms-aliyun'} basePath={field.address} onlyRenderProperties schema={s} />
-    </FormLayout>
-  );
-});
+const Verification = observer(
+  (props) => {
+    const form = useForm();
+    const field = useField<Field>();
+    const [s, setSchema] = useState(new Schema({}));
+    useEffect(() => {
+      form.clearFormGraph('options.*');
+      setSchema(new Schema(providerTypes.get(form.values.type) || {}));
+    }, [form.values.type]);
+    return (
+      <FormLayout layout={'vertical'}>
+        <RecursionField
+          key={form.values.type || 'sms-aliyun'}
+          basePath={field.address}
+          onlyRenderProperties
+          schema={s}
+        />
+      </FormLayout>
+    );
+  },
+  { displayName: 'Verification' },
+);
+
+export default Verification;
diff --git a/packages/plugins/workflow/src/client/components/CollectionFieldset.tsx b/packages/plugins/workflow/src/client/components/CollectionFieldset.tsx
index 0d2b0c499..65319bed0 100644
--- a/packages/plugins/workflow/src/client/components/CollectionFieldset.tsx
+++ b/packages/plugins/workflow/src/client/components/CollectionFieldset.tsx
@@ -33,118 +33,123 @@ function AssociationInput(props) {
 }
 
 // NOTE: observer for watching useProps
-export default observer(({ value, disabled, onChange }: any) => {
-  const { t } = useTranslation();
-  const compile = useCompile();
-  const form = useForm();
-  const { getCollection, getCollectionFields } = useCollectionManager();
-  const { values: config } = useForm();
-  const collectionName = config?.collection;
-  const fields = getCollectionFields(collectionName).filter(
-    (field) =>
-      !field.hidden &&
-      (field.uiSchema ? !field.uiSchema['x-read-pretty'] : false) &&
-      // TODO: should use some field option but not type to control this
-      !['formula'].includes(field.type),
-  );
+const CollectionFieldSet = observer(
+  ({ value, disabled, onChange }: any) => {
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const form = useForm();
+    const { getCollection, getCollectionFields } = useCollectionManager();
+    const { values: config } = useForm();
+    const collectionName = config?.collection;
+    const fields = getCollectionFields(collectionName).filter(
+      (field) =>
+        !field.hidden &&
+        (field.uiSchema ? !field.uiSchema['x-read-pretty'] : false) &&
+        // TODO: should use some field option but not type to control this
+        !['formula'].includes(field.type),
+    );
 
-  const unassignedFields = fields.filter((field) => !value || !(field.name in value));
-  const scope = useWorkflowVariableOptions();
-  const mergedDisabled = disabled || form.disabled;
+    const unassignedFields = fields.filter((field) => !value || !(field.name in value));
+    const scope = useWorkflowVariableOptions();
+    const mergedDisabled = disabled || form.disabled;
 
-  return (
-    <fieldset
-      className={css`
-        margin-top: 0.5em;
+    return (
+      <fieldset
+        className={css`
+          margin-top: 0.5em;
 
-        > .ant-formily-item {
-          flex-direction: column;
+          > .ant-formily-item {
+            flex-direction: column;
 
-          > .ant-formily-item-label {
-            line-height: 32px;
+            > .ant-formily-item-label {
+              line-height: 32px;
+            }
           }
-        }
-      `}
-    >
-      {fields.length ? (
-        <CollectionProvider collection={getCollection(collectionName)}>
-          {fields
-            .filter((field) => value && field.name in value)
-            .map((field) => {
-              // constant for associations to use Input, others to use CollectionField
-              // dynamic values only support belongsTo/hasOne association, other association type should disable
-              const ConstantCompoent = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(field.type)
-                ? AssociationInput
-                : CollectionField;
-              // TODO: try to use <ObjectField> to replace this map
-              return (
-                <Form.Item
-                  key={field.name}
-                  label={compile(field.uiSchema?.title ?? field.name)}
-                  labelAlign="left"
-                  className={css`
-                    .ant-form-item-control-input-content {
-                      display: flex;
-                    }
-                  `}
-                >
-                  <Variable.Input
-                    scope={scope}
-                    value={value[field.name]}
-                    onChange={(next) => {
-                      onChange({ ...value, [field.name]: next });
-                    }}
+        `}
+      >
+        {fields.length ? (
+          <CollectionProvider collection={getCollection(collectionName)}>
+            {fields
+              .filter((field) => value && field.name in value)
+              .map((field) => {
+                // constant for associations to use Input, others to use CollectionField
+                // dynamic values only support belongsTo/hasOne association, other association type should disable
+                const ConstantCompoent = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(field.type)
+                  ? AssociationInput
+                  : CollectionField;
+                // TODO: try to use <ObjectField> to replace this map
+                return (
+                  <Form.Item
+                    key={field.name}
+                    label={compile(field.uiSchema?.title ?? field.name)}
+                    labelAlign="left"
+                    className={css`
+                      .ant-form-item-control-input-content {
+                        display: flex;
+                      }
+                    `}
                   >
-                    <SchemaComponent
-                      schema={{
-                        type: 'void',
-                        properties: {
-                          [field.name]: {
-                            'x-component': ConstantCompoent,
-                            ['x-validator']() {
-                              return '';
+                    <Variable.Input
+                      scope={scope}
+                      value={value[field.name]}
+                      onChange={(next) => {
+                        onChange({ ...value, [field.name]: next });
+                      }}
+                    >
+                      <SchemaComponent
+                        schema={{
+                          type: 'void',
+                          properties: {
+                            [field.name]: {
+                              'x-component': ConstantCompoent,
+                              ['x-validator']() {
+                                return '';
+                              },
                             },
                           },
-                        },
-                      }}
-                    />
-                  </Variable.Input>
-                  {!mergedDisabled ? (
-                    <Button
-                      type="link"
-                      icon={<CloseCircleOutlined />}
-                      onClick={() => {
-                        const { [field.name]: _, ...rest } = value;
-                        onChange(rest);
-                      }}
-                    />
-                  ) : null}
-                </Form.Item>
-              );
-            })}
-          {unassignedFields.length ? (
-            <Dropdown
-              overlay={
-                <Menu
-                  items={unassignedFields.map((field) => ({
-                    key: field.name,
-                    label: compile(field.uiSchema?.title ?? field.name),
-                  }))}
-                  onClick={({ key }) => onChange({ ...value, [key]: null })}
-                  className={css`
-                    max-height: 300px;
-                    overflow-y: auto;
-                  `}
-                />
-              }
-            >
-              <Button icon={<PlusOutlined />}>{t('Add field')}</Button>
-            </Dropdown>
-          ) : null}
-        </CollectionProvider>
-      ) : (
-        <p>{lang('Please select collection first')}</p>
-      )}
-    </fieldset>
-  );
-});
+                        }}
+                      />
+                    </Variable.Input>
+                    {!mergedDisabled ? (
+                      <Button
+                        type="link"
+                        icon={<CloseCircleOutlined />}
+                        onClick={() => {
+                          const { [field.name]: _, ...rest } = value;
+                          onChange(rest);
+                        }}
+                      />
+                    ) : null}
+                  </Form.Item>
+                );
+              })}
+            {unassignedFields.length ? (
+              <Dropdown
+                overlay={
+                  <Menu
+                    items={unassignedFields.map((field) => ({
+                      key: field.name,
+                      label: compile(field.uiSchema?.title ?? field.name),
+                    }))}
+                    onClick={({ key }) => onChange({ ...value, [key]: null })}
+                    className={css`
+                      max-height: 300px;
+                      overflow-y: auto;
+                    `}
+                  />
+                }
+              >
+                <Button icon={<PlusOutlined />}>{t('Add field')}</Button>
+              </Dropdown>
+            ) : null}
+          </CollectionProvider>
+        ) : (
+          <p>{lang('Please select collection first')}</p>
+        )}
+      </fieldset>
+    );
+  },
+  { displayName: 'CollectionFieldSet' },
+);
+
+export default CollectionFieldSet;
diff --git a/packages/plugins/workflow/src/client/components/DynamicExpression.tsx b/packages/plugins/workflow/src/client/components/DynamicExpression.tsx
index 3603385db..8eb852294 100644
--- a/packages/plugins/workflow/src/client/components/DynamicExpression.tsx
+++ b/packages/plugins/workflow/src/client/components/DynamicExpression.tsx
@@ -9,25 +9,28 @@ import { useRecord, Variable } from '@nocobase/client';
 import { NAMESPACE } from '../locale';
 import { useCollectionFieldOptions } from '../variable';
 
-const InternalExpression = observer((props: any) => {
-  const { onChange } = props;
-  const { values } = useForm();
-  const [collection, setCollection] = useState(values?.sourceCollection);
+const InternalExpression = observer(
+  (props: any) => {
+    const { onChange } = props;
+    const { values } = useForm();
+    const [collection, setCollection] = useState(values?.sourceCollection);
 
-  useFormEffects(() => {
-    onFormInitialValuesChange((form) => {
-      setCollection(form.values.sourceCollection);
+    useFormEffects(() => {
+      onFormInitialValuesChange((form) => {
+        setCollection(form.values.sourceCollection);
+      });
+      onFieldInputValueChange('sourceCollection', (f) => {
+        setCollection(f.value);
+        onChange(null);
+      });
     });
-    onFieldInputValueChange('sourceCollection', (f) => {
-      setCollection(f.value);
-      onChange(null);
-    });
-  });
 
-  const options = useCollectionFieldOptions({ collection: collection });
+    const options = useCollectionFieldOptions({ collection: collection });
 
-  return <Variable.TextArea {...props} scope={options} />;
-});
+    return <Variable.TextArea {...props} scope={options} />;
+  },
+  { displayName: 'InternalExpression' },
+);
 
 function Result(props) {
   const { t } = useTranslation();
diff --git a/packages/plugins/workflow/src/client/components/FieldsSelect.tsx b/packages/plugins/workflow/src/client/components/FieldsSelect.tsx
index f44442025..968e2dae5 100644
--- a/packages/plugins/workflow/src/client/components/FieldsSelect.tsx
+++ b/packages/plugins/workflow/src/client/components/FieldsSelect.tsx
@@ -4,22 +4,25 @@ import { observer, useForm } from '@formily/react';
 
 import { useCollectionManager, useCompile } from '@nocobase/client';
 
-export const FieldsSelect = observer((props: any) => {
-  const { filter = () => true, ...others } = props;
-  const compile = useCompile();
-  const { getCollectionFields } = useCollectionManager();
-  const { values } = useForm();
-  const fields = getCollectionFields(values?.collection);
+export const FieldsSelect = observer(
+  (props: any) => {
+    const { filter = () => true, ...others } = props;
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+    const { values } = useForm();
+    const fields = getCollectionFields(values?.collection);
 
-  return (
-    <Select
-      className="full-width"
-      dropdownMatchSelectWidth={false}
-      {...others}
-      options={fields.filter(filter).map((field) => ({
-        label: compile(field.uiSchema?.title),
-        value: field.name,
-      }))}
-    />
-  );
-});
+    return (
+      <Select
+        className="full-width"
+        dropdownMatchSelectWidth={false}
+        {...others}
+        options={fields.filter(filter).map((field) => ({
+          label: compile(field.uiSchema?.title),
+          value: field.name,
+        }))}
+      />
+    );
+  },
+  { displayName: 'FieldsSelect' },
+);
diff --git a/packages/plugins/workflow/src/client/nodes/manual/WorkflowTodo.tsx b/packages/plugins/workflow/src/client/nodes/manual/WorkflowTodo.tsx
index 476359a4d..fa1688c02 100644
--- a/packages/plugins/workflow/src/client/nodes/manual/WorkflowTodo.tsx
+++ b/packages/plugins/workflow/src/client/nodes/manual/WorkflowTodo.tsx
@@ -184,20 +184,29 @@ const todoCollection = {
   ],
 };
 
-const NodeColumn = observer(() => {
-  const field = useField<any>();
-  return field?.value?.title ?? `#${field.value?.id}`;
-});
+const NodeColumn = observer(
+  () => {
+    const field = useField<any>();
+    return field?.value?.title ?? `#${field.value?.id}`;
+  },
+  { displayName: 'NodeColumn' },
+);
 
-const WorkflowColumn = observer(() => {
-  const field = useField<any>();
-  return field?.value?.title ?? `#${field.value?.id}`;
-});
+const WorkflowColumn = observer(
+  () => {
+    const field = useField<any>();
+    return field?.value?.title ?? `#${field.value?.id}`;
+  },
+  { displayName: 'WorkflowColumn' },
+);
 
-const UserColumn = observer(() => {
-  const field = useField<any>();
-  return field?.value?.nickname ?? field.value?.id;
-});
+const UserColumn = observer(
+  () => {
+    const field = useField<any>();
+    return field?.value?.nickname ?? field.value?.id;
+  },
+  { displayName: 'UserColumn' },
+);
 
 export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC } = () => {
   return (
diff --git a/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx b/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx
index 22ff18cc4..d9d24401f 100644
--- a/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx
+++ b/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx
@@ -5,22 +5,25 @@ import { useTranslation } from 'react-i18next';
 
 import { useCollectionManager, useCompile } from '@nocobase/client';
 
-export const DateFieldsSelect: React.FC<any> = observer((props) => {
-  const { t } = useTranslation();
-  const compile = useCompile();
-  const { getCollectionFields } = useCollectionManager();
-  const { values } = useForm();
-  const fields = getCollectionFields(values?.collection);
+export const DateFieldsSelect: React.FC<any> = observer(
+  (props) => {
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+    const { values } = useForm();
+    const fields = getCollectionFields(values?.collection);
 
-  return (
-    <Select placeholder={t('Select Field')} {...props}>
-      {fields
-        .filter((field) => !field.hidden && (field.uiSchema ? field.type === 'date' : false))
-        .map((field) => (
-          <Select.Option key={field.name} value={field.name}>
-            {compile(field.uiSchema?.title)}
-          </Select.Option>
-        ))}
-    </Select>
-  );
-});
+    return (
+      <Select placeholder={t('Select Field')} {...props}>
+        {fields
+          .filter((field) => !field.hidden && (field.uiSchema ? field.type === 'date' : false))
+          .map((field) => (
+            <Select.Option key={field.name} value={field.name}>
+              {compile(field.uiSchema?.title)}
+            </Select.Option>
+          ))}
+      </Select>
+    );
+  },
+  { displayName: 'DateFieldsSelect' },
+);
diff --git a/packages/samples/command/src/client/index.tsx b/packages/samples/command/src/client/index.tsx
index db735f78d..803e7ab47 100644
--- a/packages/samples/command/src/client/index.tsx
+++ b/packages/samples/command/src/client/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const CommandMemo = React.memo((props) => {
   return <>{props.children}</>;
 });
+CommandMemo.displayName = 'CommandMemo';
+
+export default CommandMemo;
diff --git a/packages/samples/custom-block/src/client/index.tsx b/packages/samples/custom-block/src/client/index.tsx
index 776c681a8..a3e714480 100644
--- a/packages/samples/custom-block/src/client/index.tsx
+++ b/packages/samples/custom-block/src/client/index.tsx
@@ -30,7 +30,7 @@ export const HelloBlockInitializer = (props) => {
   );
 };
 
-export default React.memo((props) => {
+const CustomBlock = React.memo((props) => {
   const items = useContext(SchemaInitializerContext);
   const children = items.BlockInitializers.items[2].children;
   children.push({
@@ -45,3 +45,6 @@ export default React.memo((props) => {
     </SchemaComponentOptions>
   );
 });
+CustomBlock.displayName = 'CustomBlock';
+
+export default CustomBlock;
diff --git a/packages/samples/custom-collection-template/src/client/index.tsx b/packages/samples/custom-collection-template/src/client/index.tsx
index 5b8615b3a..4d2090b88 100644
--- a/packages/samples/custom-collection-template/src/client/index.tsx
+++ b/packages/samples/custom-collection-template/src/client/index.tsx
@@ -47,6 +47,9 @@ const myCollectionTemplate: ICollectionTemplate = {
 
 registerTemplate('myCollection', myCollectionTemplate);
 
-export default React.memo((props) => {
+const CustomCollectionTemplateMemo = React.memo((props) => {
   return <>{props.children}</>;
 });
+CustomCollectionTemplateMemo.displayName = 'CustomCollectionTemplateMemo';
+
+export default CustomCollectionTemplateMemo;
diff --git a/packages/samples/custom-page/src/client/index.tsx b/packages/samples/custom-page/src/client/index.tsx
index 289a2fcbd..d5eee3808 100644
--- a/packages/samples/custom-page/src/client/index.tsx
+++ b/packages/samples/custom-page/src/client/index.tsx
@@ -5,7 +5,7 @@ const HelloWorld = () => {
   return <div>Hello ui router</div>;
 };
 
-export default React.memo((props) => {
+const CustomPage = React.memo((props) => {
   const ctx = useContext(RouteSwitchContext);
   ctx.routes.push({
     type: 'route',
@@ -14,3 +14,6 @@ export default React.memo((props) => {
   });
   return <RouteSwitchContext.Provider value={ctx}>{props.children}</RouteSwitchContext.Provider>;
 });
+CustomPage.displayName = 'CustomPage';
+
+export default CustomPage;
diff --git a/packages/samples/custom-signup-page/src/client/index.tsx b/packages/samples/custom-signup-page/src/client/index.tsx
index 349c565aa..58a6d7d72 100644
--- a/packages/samples/custom-signup-page/src/client/index.tsx
+++ b/packages/samples/custom-signup-page/src/client/index.tsx
@@ -23,7 +23,7 @@ const CustomSignupPage = (props) => {
   );
 };
 
-export default React.memo((props) => {
+const CustomSignupPageMemo = React.memo((props) => {
   const ctx = useContext(RouteSwitchContext);
   return (
     <RouteSwitchContext.Provider value={{ ...ctx, components: { ...ctx.components, SignupPage: CustomSignupPage } }}>
@@ -31,3 +31,6 @@ export default React.memo((props) => {
     </RouteSwitchContext.Provider>
   );
 });
+CustomSignupPageMemo.displayName = 'CustomSignupPageMemo';
+
+export default CustomSignupPageMemo;
diff --git a/packages/samples/hello/src/client/index.tsx b/packages/samples/hello/src/client/index.tsx
index 38ef3b388..20acb70b5 100644
--- a/packages/samples/hello/src/client/index.tsx
+++ b/packages/samples/hello/src/client/index.tsx
@@ -36,7 +36,7 @@ export const HelloBlockInitializer = (props) => {
   );
 };
 
-export default React.memo((props) => {
+const Hello = React.memo((props) => {
   const items = useContext(SchemaInitializerContext);
   const children = items.BlockInitializers.items[1].children;
   children.push({
@@ -66,3 +66,6 @@ export default React.memo((props) => {
     </SettingsCenterProvider>
   );
 });
+Hello.displayName = 'Hello';
+
+export default Hello;
diff --git a/packages/samples/ratelimit/src/client/index.tsx b/packages/samples/ratelimit/src/client/index.tsx
index db735f78d..9e38157ed 100644
--- a/packages/samples/ratelimit/src/client/index.tsx
+++ b/packages/samples/ratelimit/src/client/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const RateLimit = React.memo((props) => {
   return <>{props.children}</>;
 });
+RateLimit.displayName = 'RateLimit';
+
+export default RateLimit;
diff --git a/packages/samples/shop-actions/src/client/index.tsx b/packages/samples/shop-actions/src/client/index.tsx
index db735f78d..8379cd12b 100644
--- a/packages/samples/shop-actions/src/client/index.tsx
+++ b/packages/samples/shop-actions/src/client/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const ShopActions = React.memo((props) => {
   return <>{props.children}</>;
 });
+ShopActions.displayName = 'ShopActions';
+
+export default ShopActions;
diff --git a/packages/samples/shop-events/src/client/index.tsx b/packages/samples/shop-events/src/client/index.tsx
index db735f78d..c054f9d35 100644
--- a/packages/samples/shop-events/src/client/index.tsx
+++ b/packages/samples/shop-events/src/client/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const ShopEvents = React.memo((props) => {
   return <>{props.children}</>;
 });
+ShopEvents.displayName = 'ShopEvents';
+
+export default ShopEvents;
diff --git a/packages/samples/shop-i18n/src/client/index.tsx b/packages/samples/shop-i18n/src/client/index.tsx
index 82afa0a1f..d72911be4 100644
--- a/packages/samples/shop-i18n/src/client/index.tsx
+++ b/packages/samples/shop-i18n/src/client/index.tsx
@@ -59,7 +59,7 @@ export const ShopShortcut = () => {
   );
 };
 
-export default React.memo((props) => {
+const ShopI18n = React.memo((props) => {
   const ctx = useContext(PluginManagerContext);
   const { routes, components, ...others } = useContext(RouteSwitchContext);
 
@@ -93,3 +93,5 @@ export default React.memo((props) => {
     </SettingsCenterProvider>
   );
 });
+
+export default ShopI18n;
diff --git a/packages/samples/shop-modeling/src/client/index.tsx b/packages/samples/shop-modeling/src/client/index.tsx
index db735f78d..81f5550c4 100644
--- a/packages/samples/shop-modeling/src/client/index.tsx
+++ b/packages/samples/shop-modeling/src/client/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const ShopModeling = React.memo((props) => {
   return <>{props.children}</>;
 });
+ShopModeling.displayName = 'ShopModeling';
+
+export default ShopModeling;
diff --git a/yarn.lock b/yarn.lock
index c723dd95b..1e6104778 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3107,100 +3107,85 @@
   version "8.39.0"
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
 
-"@formily/antd@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/antd/-/antd-2.0.20.tgz#8a60ce0473ffa55df63c911a4e11330dd0ddfe2b"
+"@formily/antd@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/antd/-/antd-2.2.24.tgz#d536cba6d4691b9c2089efd818cb85681a6d4c9b"
+  integrity sha512-jMrbg63FMQvkwT+y4mum2DE2mRlSuqwd1cuvWiUsH2RkaQM/SQhVdwigIsKFwzj69ujN75IeQCmAhZJIBFoLvQ==
   dependencies:
-    "@formily/core" "2.0.20"
-    "@formily/grid" "2.0.20"
-    "@formily/json-schema" "2.0.20"
-    "@formily/react" "2.0.20"
-    "@formily/reactive" "2.0.20"
-    "@formily/reactive-react" "2.0.20"
-    "@formily/shared" "2.0.20"
+    "@formily/core" "2.2.24"
+    "@formily/grid" "2.2.24"
+    "@formily/json-schema" "2.2.24"
+    "@formily/react" "2.2.24"
+    "@formily/reactive" "2.2.24"
+    "@formily/reactive-react" "2.2.24"
+    "@formily/shared" "2.2.24"
     classnames "^2.2.6"
     react-sortable-hoc "^1.11.0"
     react-sticky-box "^0.9.3"
 
-"@formily/core@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/core/-/core-2.0.20.tgz#a8e8ea74e60d55c4ac61afb467084dcae4948049"
+"@formily/core@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/core/-/core-2.2.24.tgz#b96b72def806ee4c71c0a0279b678ffcc23828bf"
+  integrity sha512-FjyhtSwSxSK18C5L+D2U2uqkVh5J0BnWmk/OyvOGNoQ3gdCHJFyH8gr6NNt11B8xL2oXKIEpaC0nw8iOcGf8eA==
   dependencies:
-    "@formily/reactive" "2.0.20"
-    "@formily/shared" "2.0.20"
-    "@formily/validator" "2.0.20"
+    "@formily/reactive" "2.2.24"
+    "@formily/shared" "2.2.24"
+    "@formily/validator" "2.2.24"
 
-"@formily/core@2.2.21":
-  version "2.2.21"
-  resolved "https://registry.yarnpkg.com/@formily/core/-/core-2.2.21.tgz#fc2a34284f59dce34b985e96ef3092a0648c1f3c"
+"@formily/grid@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/grid/-/grid-2.2.24.tgz#e5e1163ef9597a4417fc2f2f4e438d48c0d3dd59"
+  integrity sha512-w0IWWYDG8NwzdrLRsbUkX/L5OuFATTwyJc+tswtxVi2nrF9hZeHSYwvMh4dBI9rF2l0LKORvnVnk1O/kufnWug==
   dependencies:
-    "@formily/reactive" "2.2.21"
-    "@formily/shared" "2.2.21"
-    "@formily/validator" "2.2.21"
-
-"@formily/grid@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/grid/-/grid-2.0.20.tgz#76a0cabebf9d98f5169f60864cfa29c0204c0088"
-  dependencies:
-    "@formily/reactive" "2.0.20"
+    "@formily/reactive" "2.2.24"
     "@juggle/resize-observer" "^3.3.1"
 
-"@formily/json-schema@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/json-schema/-/json-schema-2.0.20.tgz#1432fba50277e431074eaf96551e162a3528c560"
+"@formily/json-schema@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/json-schema/-/json-schema-2.2.24.tgz#b23b9ae18a24fbcb716cd0e23677c8597abc5689"
+  integrity sha512-3aEMEO5D0B1p5rM/lzWmhx3rYqid4OKzCXAdxBsyicacFK9dVqxlOBt8d6auOsppMZ675q52jSVDxNSgh4xKqg==
   dependencies:
-    "@formily/core" "2.0.20"
-    "@formily/reactive" "2.0.20"
-    "@formily/shared" "2.0.20"
+    "@formily/core" "2.2.24"
+    "@formily/reactive" "2.2.24"
+    "@formily/shared" "2.2.24"
 
-"@formily/json-schema@^2.0.15":
-  version "2.2.21"
-  resolved "https://registry.yarnpkg.com/@formily/json-schema/-/json-schema-2.2.21.tgz#6765dbafd391ac6d642c824ed9c7548ee7e9421f"
+"@formily/path@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/path/-/path-2.2.24.tgz#1c15352dc72f78ef3e8924633a9d8a8182364d6b"
+  integrity sha512-DrRBIPvlqGr7+xQ/74MY/j7WSbUzvWeHOsjfXTIllbijKAdUm+DovpQuHMXR16I3gnuQ8CvyMzCizP9RKVnhzw==
+
+"@formily/react@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/react/-/react-2.2.24.tgz#415ca8df2c445ba43fe596d0a6e8bd4236abe8d6"
+  integrity sha512-Bq5LQzK9u0E8BBwHqWY1jXtbdVAJV/gMkZAssAHVXu01YvDUVugHXcbxuzKZKY5MrZFIyM7Jod0TbhjEPr2bhA==
   dependencies:
-    "@formily/core" "2.2.21"
-    "@formily/reactive" "2.2.21"
-    "@formily/shared" "2.2.21"
-
-"@formily/path@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/path/-/path-2.0.20.tgz#1047cb1737d1878182427bdbebf69a86be8b414f"
-
-"@formily/path@2.2.21":
-  version "2.2.21"
-  resolved "https://registry.yarnpkg.com/@formily/path/-/path-2.2.21.tgz#55b0844dbfb65b1beee1a34525042b575cc7b7f6"
-
-"@formily/react@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/react/-/react-2.0.20.tgz#57d9be728a2a297e11ba1def0da28915707c8d0d"
-  dependencies:
-    "@formily/core" "2.0.20"
-    "@formily/json-schema" "2.0.20"
-    "@formily/reactive" "2.0.20"
-    "@formily/reactive-react" "2.0.20"
-    "@formily/shared" "2.0.20"
-    "@formily/validator" "2.0.20"
+    "@formily/core" "2.2.24"
+    "@formily/json-schema" "2.2.24"
+    "@formily/reactive" "2.2.24"
+    "@formily/reactive-react" "2.2.24"
+    "@formily/shared" "2.2.24"
+    "@formily/validator" "2.2.24"
     hoist-non-react-statics "^3.3.2"
 
-"@formily/reactive-react@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/reactive-react/-/reactive-react-2.0.20.tgz#63ec73aca01f3a8de5ef6e18f07e80b7b72551f8"
+"@formily/reactive-react@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/reactive-react/-/reactive-react-2.2.24.tgz#187e6f07b1aab09f41134c4335200b38afdcc67c"
+  integrity sha512-MSS2ug+19+GzVJFhWjwOp6QWe/Bc3xC9YXYB7lfriJBQCC5lGlX0xaOZNkOH4yFz9OvSR59wwManOpOh329/EQ==
   dependencies:
-    "@formily/reactive" "2.0.20"
+    "@formily/reactive" "2.2.24"
     hoist-non-react-statics "^3.3.2"
 
-"@formily/reactive@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/reactive/-/reactive-2.0.20.tgz#e8701a49e94bb53c362da945170c6eeffe931540"
+"@formily/reactive@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/reactive/-/reactive-2.2.24.tgz#758b0fb26568970cbd326e1abb86f0264713f0c1"
+  integrity sha512-b3+43v7pmUCC8C57XO27M0x+2aE8k6lNndaOuo15Du+tLQyr+g+JBpEZsbIJfy9ScgdK6mIttxIhJiU+xUAmvg==
 
-"@formily/reactive@2.2.21":
-  version "2.2.21"
-  resolved "https://registry.yarnpkg.com/@formily/reactive/-/reactive-2.2.21.tgz#f39eeb13bee086d2a85feab73f5b8eb4bb01e462"
-
-"@formily/shared@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/shared/-/shared-2.0.20.tgz#8d638598ade03a07e67fb66ebb7de2ba0bb57248"
+"@formily/shared@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/shared/-/shared-2.2.24.tgz#f7939d8a36796db7fce580c2e6c52d04fed1b13b"
+  integrity sha512-PU3gBgbybSU6yv/Act2fn5sYnYTuiVJtpiYEMQGyn7wuWguOQfOpIkuaVim4h64PARO8WmnjENeDl5R5evgIYQ==
   dependencies:
-    "@formily/path" "2.0.20"
+    "@formily/path" "2.2.24"
     camel-case "^4.1.1"
     lower-case "^2.0.1"
     no-case "^3.0.4"
@@ -3208,29 +3193,12 @@
     pascal-case "^3.1.1"
     upper-case "^2.0.1"
 
-"@formily/shared@2.2.21":
-  version "2.2.21"
-  resolved "https://registry.yarnpkg.com/@formily/shared/-/shared-2.2.21.tgz#01fbdb9fcf92516a17d4afec204cb10936aaf533"
+"@formily/validator@2.2.24":
+  version "2.2.24"
+  resolved "https://registry.yarnpkg.com/@formily/validator/-/validator-2.2.24.tgz#03fc909fe93694e895d73e6d9e445a9f89bc1d51"
+  integrity sha512-EDZiArnLdDbp2k7/PHknjkX5FgsJXoqWbBrrhXCyzwC2ebBG4VTxWZUB+MWGT17A77Tl7xPsY7JPpJohcuQ+4Q==
   dependencies:
-    "@formily/path" "2.2.21"
-    camel-case "^4.1.1"
-    lower-case "^2.0.1"
-    no-case "^3.0.4"
-    param-case "^3.0.4"
-    pascal-case "^3.1.1"
-    upper-case "^2.0.1"
-
-"@formily/validator@2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@formily/validator/-/validator-2.0.20.tgz#956c612603fe87430efd6193fe683803f0b22b30"
-  dependencies:
-    "@formily/shared" "2.0.20"
-
-"@formily/validator@2.2.21":
-  version "2.2.21"
-  resolved "https://registry.yarnpkg.com/@formily/validator/-/validator-2.2.21.tgz#661d45c9cf1eeac44cb23e5ed03009cfa8548e4a"
-  dependencies:
-    "@formily/shared" "2.2.21"
+    "@formily/shared" "2.2.24"
 
 "@formulajs/formulajs@4.2.0", "@formulajs/formulajs@^4.2.0":
   version "4.2.0"