diff --git a/packages/core/client/src/acl/ACLProvider.tsx b/packages/core/client/src/acl/ACLProvider.tsx
index 4467be742..21e9cc5aa 100644
--- a/packages/core/client/src/acl/ACLProvider.tsx
+++ b/packages/core/client/src/acl/ACLProvider.tsx
@@ -14,7 +14,6 @@ import { useApp } from '../application';
 import { useDataSourceKey } from '../data-source/data-source/DataSourceProvider';
 
 export const ACLContext = createContext<any>({});
-ACLContext.displayName = 'ACLContext';
 
 // TODO: delete this,replace by `ACLPlugin`
 export const ACLProvider = (props) => {
@@ -91,7 +90,6 @@ export const useACLContext = () => {
 };
 
 export const ACLActionParamsContext = createContext<any>({});
-ACLActionParamsContext.displayName = 'ACLActionParamsContext';
 
 export const useACLRolesCheck = () => {
   const ctx = useContext(ACLContext);
diff --git a/packages/core/client/src/acl/Configuration/ConfigureCenter.tsx b/packages/core/client/src/acl/Configuration/ConfigureCenter.tsx
index 1b46c83a1..9260f99a2 100644
--- a/packages/core/client/src/acl/Configuration/ConfigureCenter.tsx
+++ b/packages/core/client/src/acl/Configuration/ConfigureCenter.tsx
@@ -31,7 +31,6 @@ const getChildrenKeys = (data = [], arr = []) => {
 };
 
 const SettingMenuContext = createContext(null);
-SettingMenuContext.displayName = 'SettingMenuContext';
 
 export const SettingCenterProvider = (props) => {
   const configureItems = useContext(SettingsCenterContext);
diff --git a/packages/core/client/src/acl/Configuration/MenuItemsProvider.tsx b/packages/core/client/src/acl/Configuration/MenuItemsProvider.tsx
index 5a1210273..658a78f7b 100644
--- a/packages/core/client/src/acl/Configuration/MenuItemsProvider.tsx
+++ b/packages/core/client/src/acl/Configuration/MenuItemsProvider.tsx
@@ -4,7 +4,6 @@ import { useRequest } from '../../api-client';
 import { useAdminSchemaUid } from '../../hooks';
 
 const MenuItemsContext = createContext(null);
-MenuItemsContext.displayName = 'MenuItemsContext';
 
 export const toItems = (properties = {}) => {
   const items = [];
diff --git a/packages/core/client/src/acl/Configuration/PermisionProvider.tsx b/packages/core/client/src/acl/Configuration/PermisionProvider.tsx
index fdaf51b6c..60769f254 100644
--- a/packages/core/client/src/acl/Configuration/PermisionProvider.tsx
+++ b/packages/core/client/src/acl/Configuration/PermisionProvider.tsx
@@ -14,7 +14,6 @@ export const SettingCenterPermissionProvider = (props) => {
 };
 
 export const PermissionContext = createContext<any>(null);
-PermissionContext.displayName = 'PermissionContext';
 
 export const PermissionProvider = (props) => {
   const api = useAPIClient();
diff --git a/packages/core/client/src/acl/Configuration/RoleTable.tsx b/packages/core/client/src/acl/Configuration/RoleTable.tsx
index e9b2adf10..a216c106d 100644
--- a/packages/core/client/src/acl/Configuration/RoleTable.tsx
+++ b/packages/core/client/src/acl/Configuration/RoleTable.tsx
@@ -7,7 +7,6 @@ import { PermissionProvider, SettingCenterPermissionProvider } from '../Configur
 import { roleSchema } from './schemas/roles';
 
 const AvailableActionsContext = createContext([]);
-AvailableActionsContext.displayName = 'AvailableActionsContext';
 
 const AvailableActionsProver: React.FC = (props) => {
   const { data, loading } = useRequest<{
diff --git a/packages/core/client/src/acl/Configuration/RolesResourcesActions.tsx b/packages/core/client/src/acl/Configuration/RolesResourcesActions.tsx
index ffd18139c..7bab834d6 100644
--- a/packages/core/client/src/acl/Configuration/RolesResourcesActions.tsx
+++ b/packages/core/client/src/acl/Configuration/RolesResourcesActions.tsx
@@ -22,7 +22,6 @@ const toActionMap = (arr: any[]) => {
 };
 
 export const RoleResourceCollectionContext = createContext<any>({});
-RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
 
 export const RolesResourcesActions = connect((props) => {
   const { styles } = useStyles();
diff --git a/packages/core/client/src/acl/Configuration/ScopeSelect.tsx b/packages/core/client/src/acl/Configuration/ScopeSelect.tsx
index 1d4c6e484..679bc8636 100644
--- a/packages/core/client/src/acl/Configuration/ScopeSelect.tsx
+++ b/packages/core/client/src/acl/Configuration/ScopeSelect.tsx
@@ -4,7 +4,6 @@ import { FormProvider, SchemaComponent } from '../../schema-component';
 import { scopesSchema } from './schemas/scopes';
 
 const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
-RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
 
 const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
   const [keys, setKeys] = useState([]);
diff --git a/packages/core/client/src/antd-config-provider/index.tsx b/packages/core/client/src/antd-config-provider/index.tsx
index c6bf4bdc5..5e582c49e 100644
--- a/packages/core/client/src/antd-config-provider/index.tsx
+++ b/packages/core/client/src/antd-config-provider/index.tsx
@@ -7,7 +7,6 @@ import { Plugin } from '../application/Plugin';
 import { loadConstrueLocale } from './loadConstrueLocale';
 
 export const AppLangContext = createContext<any>({});
-AppLangContext.displayName = 'AppLangContext';
 
 export const useAppLangContext = () => {
   return useContext(AppLangContext);
diff --git a/packages/core/client/src/api-client/context.ts b/packages/core/client/src/api-client/context.ts
index 1e70ac3ca..71b104c49 100644
--- a/packages/core/client/src/api-client/context.ts
+++ b/packages/core/client/src/api-client/context.ts
@@ -2,4 +2,3 @@ import { createContext } from 'react';
 import { APIClient } from './APIClient';
 
 export const APIClientContext = createContext<APIClient>(new APIClient());
-APIClientContext.displayName = 'APIClientContext';
diff --git a/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx b/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
index 41393dc25..b9391e916 100644
--- a/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
+++ b/packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx
@@ -3,7 +3,6 @@ import { useRequest } from '../api-client';
 import { useAppSpin } from '../application/hooks/useAppSpin';
 
 export const CurrentAppInfoContext = createContext(null);
-CurrentAppInfoContext.displayName = 'CurrentAppInfoContext';
 
 export const useCurrentAppInfo = () => {
   return useContext<{
diff --git a/packages/core/client/src/application/PluginSettingsManager.ts b/packages/core/client/src/application/PluginSettingsManager.ts
index 3a5a12a8a..8c9d2741d 100644
--- a/packages/core/client/src/application/PluginSettingsManager.ts
+++ b/packages/core/client/src/application/PluginSettingsManager.ts
@@ -45,7 +45,6 @@ export class PluginSettingsManager {
   protected settings: Record<string, PluginSettingOptions> = {};
   protected aclSnippets: string[] = [];
   public app: Application;
-  private cachedList = {};
 
   constructor(_pluginSettings: Record<string, PluginSettingOptions>, app: Application) {
     this.app = app;
@@ -142,16 +141,11 @@ export class PluginSettingsManager {
   }
 
   getList(filterAuth = true): PluginSettingsPageType[] {
-    const cacheKey = JSON.stringify(filterAuth);
-    if (this.cachedList[cacheKey]) return this.cachedList[cacheKey];
-
-    return (this.cachedList[cacheKey] = Array.from(
-      new Set(Object.values(this.settings).map((item) => item.topLevelName)),
-    )
+    return Array.from(new Set(Object.values(this.settings).map((item) => item.topLevelName)))
       .sort((a, b) => a.localeCompare(b)) // sort by name
       .map((name) => this.get(name, filterAuth))
       .filter(Boolean)
-      .sort((a, b) => (a.sort || 0) - (b.sort || 0)));
+      .sort((a, b) => (a.sort || 0) - (b.sort || 0));
   }
 
   getAclSnippets() {
diff --git a/packages/core/client/src/application/components/AppComponent.tsx b/packages/core/client/src/application/components/AppComponent.tsx
index 686c0213a..1721d1d2e 100644
--- a/packages/core/client/src/application/components/AppComponent.tsx
+++ b/packages/core/client/src/application/components/AppComponent.tsx
@@ -8,35 +8,32 @@ export interface AppComponentProps {
   app: Application;
 }
 
-export const AppComponent: FC<AppComponentProps> = observer(
-  (props) => {
-    const { app } = props;
-    const handleErrors = useCallback((error: Error, info: { componentStack: string }) => {
-      console.error(error);
-      const err = new Error();
-      err.stack = info.componentStack.trim();
-      console.error(err);
-    }, []);
-    useEffect(() => {
-      app.load();
-    }, [app]);
-    const AppError = app.getComponent('AppError');
-    if (app.loading) return app.renderComponent('AppSpin', { app });
-    if (!app.maintained && app.maintaining) return app.renderComponent('AppMaintaining', { app });
-    if (app.error?.code === 'LOAD_ERROR' || app.error?.code === 'APP_ERROR') {
-      return <AppError app={app} error={app.error} />;
-    }
-    return (
-      <ErrorBoundary
-        FallbackComponent={(props) => <AppError app={app} error={app.error} {...props} />}
-        onError={handleErrors}
-      >
-        <ApplicationContext.Provider value={app}>
-          {app.maintained && app.maintaining && app.renderComponent('AppMaintainingDialog', { app })}
-          {app.renderComponent('AppMain')}
-        </ApplicationContext.Provider>
-      </ErrorBoundary>
-    );
-  },
-  { displayName: 'AppComponent' },
-);
+export const AppComponent: FC<AppComponentProps> = observer((props) => {
+  const { app } = props;
+  const handleErrors = useCallback((error: Error, info: { componentStack: string }) => {
+    console.error(error);
+    const err = new Error();
+    err.stack = info.componentStack.trim();
+    console.error(err);
+  }, []);
+  useEffect(() => {
+    app.load();
+  }, [app]);
+  const AppError = app.getComponent('AppError');
+  if (app.loading) return app.renderComponent('AppSpin', { app });
+  if (!app.maintained && app.maintaining) return app.renderComponent('AppMaintaining', { app });
+  if (app.error?.code === 'LOAD_ERROR' || app.error?.code === 'APP_ERROR') {
+    return <AppError app={app} error={app.error} />;
+  }
+  return (
+    <ErrorBoundary
+      FallbackComponent={(props) => <AppError app={app} error={app.error} {...props} />}
+      onError={handleErrors}
+    >
+      <ApplicationContext.Provider value={app}>
+        {app.maintained && app.maintaining && app.renderComponent('AppMaintainingDialog', { app })}
+        {app.renderComponent('AppMain')}
+      </ApplicationContext.Provider>
+    </ErrorBoundary>
+  );
+});
diff --git a/packages/core/client/src/application/context.ts b/packages/core/client/src/application/context.ts
index ada436a8e..34d49a1a4 100644
--- a/packages/core/client/src/application/context.ts
+++ b/packages/core/client/src/application/context.ts
@@ -2,4 +2,3 @@ import { createContext } from 'react';
 import { Application } from './Application';
 
 export const ApplicationContext = createContext<Application>(null);
-ApplicationContext.displayName = 'ApplicationContext';
diff --git a/packages/core/client/src/application/schema-initializer/hoc/index.tsx b/packages/core/client/src/application/schema-initializer/hoc/index.tsx
index 0309a4659..2f3540893 100644
--- a/packages/core/client/src/application/schema-initializer/hoc/index.tsx
+++ b/packages/core/client/src/application/schema-initializer/hoc/index.tsx
@@ -13,114 +13,113 @@ import { SchemaInitializerOptions } from '../types';
 const defaultWrap = (s: ISchema) => s;
 
 export function withInitializer<T>(C: ComponentType<T>) {
-  const WithInitializer = observer(
-    (props: SchemaInitializerOptions<T>) => {
-      const { designable, insertAdjacent } = useDesignable();
-      const { isInSubTable } = useFlag() || {};
-      const {
-        insert,
-        useInsert,
-        wrap = defaultWrap,
-        insertPosition = 'beforeEnd',
-        onSuccess,
-        designable: propsDesignable,
-        popoverProps,
-        children,
-        popover = true,
+  const WithInitializer = observer((props: SchemaInitializerOptions<T>) => {
+    const { designable, insertAdjacent } = useDesignable();
+    const { isInSubTable } = useFlag() || {};
+    const {
+      insert,
+      useInsert,
+      wrap = defaultWrap,
+      insertPosition = 'beforeEnd',
+      onSuccess,
+      designable: propsDesignable,
+      popoverProps,
+      children,
+      popover = true,
+      style,
+      componentProps,
+    } = props;
+
+    // 插入 schema 的能力
+    const insertCallback = useInsert ? useInsert() : insert;
+    const insertSchema = useCallback(
+      (schema) => {
+        if (insertCallback) {
+          insertCallback(wrap(schema, { isInSubTable }));
+        } else {
+          insertAdjacent(insertPosition, wrap(schema, { isInSubTable }), { onSuccess });
+        }
+      },
+      [insertCallback, wrap, insertAdjacent, insertPosition, onSuccess],
+    );
+
+    const { wrapSSR, hashId, componentCls } = useSchemaInitializerStyles();
+    const [visible, setVisible] = useState(false);
+    const { token } = theme.useToken();
+    const dropdownMaxHeight = useNiceDropdownMaxHeight([visible]);
+
+    const cProps = useMemo(
+      () => ({
+        options: props,
         style,
-        componentProps,
-      } = props;
+        ...componentProps,
+      }),
+      [componentProps, props, style],
+    );
 
-      // 插入 schema 的能力
-      const insertCallback = useInsert ? useInsert() : insert;
-      const insertSchema = useCallback(
-        (schema) => {
-          if (insertCallback) {
-            insertCallback(wrap(schema, { isInSubTable }));
-          } else {
-            insertAdjacent(insertPosition, wrap(schema, { isInSubTable }), { onSuccess });
-          }
-        },
-        [insertCallback, wrap, insertAdjacent, insertPosition, onSuccess],
-      );
+    // designable 为 false 时,不渲染
+    if (!designable && propsDesignable !== true) {
+      return null;
+    }
 
-      const { wrapSSR, hashId, componentCls } = useSchemaInitializerStyles();
-      const [visible, setVisible] = useState(false);
-      const { token } = theme.useToken();
-      const dropdownMaxHeight = useNiceDropdownMaxHeight([visible]);
-
-      const cProps = useMemo(
-        () => ({
+    return (
+      <SchemaInitializerContext.Provider
+        value={{
+          visible,
+          setVisible,
+          insert: insertSchema,
           options: props,
-          style,
-          ...componentProps,
-        }),
-        [componentProps, props, style],
-      );
-
-      // designable 为 false 时,不渲染
-      if (!designable && propsDesignable !== true) {
-        return null;
-      }
-
-      return (
-        <SchemaInitializerContext.Provider
-          value={{
-            visible,
-            setVisible,
-            insert: insertSchema,
-            options: props,
-          }}
-        >
-          {popover === false ? (
-            React.createElement(C, cProps)
-          ) : (
-            <Popover
-              placement={'bottomLeft'}
-              {...popoverProps}
-              arrow={false}
-              overlayClassName={css`
-                .ant-popover-inner {
-                  padding: ${`${token.paddingXXS}px 0`};
-                  .ant-menu-submenu-title {
-                    margin-block: 0;
-                  }
+        }}
+      >
+        {popover === false ? (
+          React.createElement(C, cProps)
+        ) : (
+          <Popover
+            placement={'bottomLeft'}
+            {...popoverProps}
+            arrow={false}
+            overlayClassName={css`
+              .ant-popover-inner {
+                padding: ${`${token.paddingXXS}px 0`};
+                .ant-menu-submenu-title {
+                  margin-block: 0;
                 }
-              `}
-              open={visible}
-              onOpenChange={setVisible}
-              content={wrapSSR(
-                <div
-                  className={`${componentCls} ${hashId}`}
-                  style={{
-                    maxHeight: dropdownMaxHeight,
-                    overflowY: 'auto',
+              }
+            `}
+            open={visible}
+            onOpenChange={setVisible}
+            content={wrapSSR(
+              <div
+                className={`${componentCls} ${hashId}`}
+                style={{
+                  maxHeight: dropdownMaxHeight,
+                  overflowY: 'auto',
+                }}
+              >
+                <ConfigProvider
+                  theme={{
+                    components: {
+                      Menu: {
+                        itemHeight: token.marginXL,
+                        borderRadius: token.borderRadiusSM,
+                        itemBorderRadius: token.borderRadiusSM,
+                        subMenuItemBorderRadius: token.borderRadiusSM,
+                      },
+                    },
                   }}
                 >
-                  <ConfigProvider
-                    theme={{
-                      components: {
-                        Menu: {
-                          itemHeight: token.marginXL,
-                          borderRadius: token.borderRadiusSM,
-                          itemBorderRadius: token.borderRadiusSM,
-                          subMenuItemBorderRadius: token.borderRadiusSM,
-                        },
-                      },
-                    }}
-                  >
-                    {children}
-                  </ConfigProvider>
-                </div>,
-              )}
-            >
-              {React.createElement(C, cProps)}
-            </Popover>
-          )}
-        </SchemaInitializerContext.Provider>
-      );
-    },
-    { displayName: `WithInitializer(${C.displayName || C.name})` },
-  );
+                  {children}
+                </ConfigProvider>
+              </div>,
+            )}
+          >
+            {React.createElement(C, cProps)}
+          </Popover>
+        )}
+      </SchemaInitializerContext.Provider>
+    );
+  });
+
+  WithInitializer.displayName = `WithInitializer(${C.displayName || C.name})`;
   return WithInitializer;
 }
diff --git a/packages/core/client/src/application/schema-initializer/hooks/index.tsx b/packages/core/client/src/application/schema-initializer/hooks/index.tsx
index f534e9e3d..c51d39dc0 100644
--- a/packages/core/client/src/application/schema-initializer/hooks/index.tsx
+++ b/packages/core/client/src/application/schema-initializer/hooks/index.tsx
@@ -11,7 +11,7 @@ export * from './useAriaAttributeOfMenuItem';
 
 export function useSchemaInitializerMenuItems(items: any[], name?: string, onClick?: (args: any) => void) {
   const getMenuItems = useGetSchemaInitializerMenuItems(onClick);
-  return useMemo(() => getMenuItems(items, name), [getMenuItems, items, name]);
+  return getMenuItems(items, name);
 }
 
 export function useGetSchemaInitializerMenuItems(onClick?: (args: any) => void) {
diff --git a/packages/core/client/src/application/schema-settings/components/SchemaSettingsIcon.tsx b/packages/core/client/src/application/schema-settings/components/SchemaSettingsIcon.tsx
index cd6e6e5fa..65a9c1f64 100644
--- a/packages/core/client/src/application/schema-settings/components/SchemaSettingsIcon.tsx
+++ b/packages/core/client/src/application/schema-settings/components/SchemaSettingsIcon.tsx
@@ -13,4 +13,3 @@ export const SchemaSettingsIcon: FC<SchemaSettingOptions> = React.memo((props) =
   const style = useMemo(() => ({ cursor: 'pointer', fontSize: 12 }), []);
   return <MenuOutlined role="button" style={style} aria-label={getAriaLabel('schema-settings', name)} />;
 });
-SchemaSettingsIcon.displayName = 'SchemaSettingsIcon';
diff --git a/packages/core/client/src/async-data-provider/index.tsx b/packages/core/client/src/async-data-provider/index.tsx
index 128738226..80eb21d85 100644
--- a/packages/core/client/src/async-data-provider/index.tsx
+++ b/packages/core/client/src/async-data-provider/index.tsx
@@ -3,7 +3,6 @@ import React, { createContext, useContext } from 'react';
 import { useRequest } from '../api-client';
 
 export const AsyncDataContext = createContext<Result<any, any> & { state?: any; setState?: any }>(null);
-AsyncDataContext.displayName = 'AsyncDataContext';
 
 export interface AsyncDataProviderProps {
   value?: any;
diff --git a/packages/core/client/src/block-provider/BlockProvider.tsx b/packages/core/client/src/block-provider/BlockProvider.tsx
index 13f2229b6..89556f7d5 100644
--- a/packages/core/client/src/block-provider/BlockProvider.tsx
+++ b/packages/core/client/src/block-provider/BlockProvider.tsx
@@ -35,9 +35,7 @@ import { useDataBlockSourceId } from './hooks/useDataBlockSourceId';
  * @deprecated
  */
 export const BlockResourceContext = createContext(null);
-BlockResourceContext.displayName = 'BlockResourceContext';
 export const BlockAssociationContext = createContext(null);
-BlockAssociationContext.displayName = 'BlockAssociationContext';
 
 /**
  * @deprecated
@@ -52,7 +50,6 @@ export const BlockRequestContext_deprecated = createContext<{
   __parent?: any;
   updateAssociationValues?: any[];
 }>({});
-BlockRequestContext_deprecated.displayName = 'BlockRequestContext_deprecated';
 
 export const useBlockResource = () => {
   const resource = useDataBlockResource();
@@ -212,7 +209,6 @@ const BlockContext = createContext<{
   /** 用以区分区块的标识 */
   name: string;
 }>(null);
-BlockContext.displayName = 'BlockContext';
 
 export const useBlockContext = () => {
   return useContext(BlockContext);
diff --git a/packages/core/client/src/block-provider/DetailsBlockProvider.tsx b/packages/core/client/src/block-provider/DetailsBlockProvider.tsx
index 4f228ab21..e0987b2e2 100644
--- a/packages/core/client/src/block-provider/DetailsBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/DetailsBlockProvider.tsx
@@ -9,7 +9,6 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { useParsedFilter } from './hooks';
 
 export const DetailsBlockContext = createContext<any>({});
-DetailsBlockContext.displayName = 'DetailsBlockContext';
 
 const InternalDetailsBlockProvider = (props) => {
   const { action, readPretty } = props;
diff --git a/packages/core/client/src/block-provider/FormBlockProvider.tsx b/packages/core/client/src/block-provider/FormBlockProvider.tsx
index 9c101c144..cce62abcb 100644
--- a/packages/core/client/src/block-provider/FormBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/FormBlockProvider.tsx
@@ -12,7 +12,6 @@ import { TemplateBlockProvider } from './TemplateBlockProvider';
 import { FormActiveFieldsProvider } from './hooks/useFormActiveFields';
 
 export const FormBlockContext = createContext<any>({});
-FormBlockContext.displayName = 'FormBlockContext';
 
 const InternalFormBlockProvider = (props) => {
   const ctx = useFormBlockContext();
diff --git a/packages/core/client/src/block-provider/FormFieldProvider.tsx b/packages/core/client/src/block-provider/FormFieldProvider.tsx
index 58e253f45..8d7a023a8 100644
--- a/packages/core/client/src/block-provider/FormFieldProvider.tsx
+++ b/packages/core/client/src/block-provider/FormFieldProvider.tsx
@@ -10,7 +10,6 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { useFormBlockContext } from './FormBlockProvider';
 
 export const FormFieldContext = createContext<any>({});
-FormFieldContext.displayName = 'FormFieldContext';
 
 const InternalFormFieldProvider = (props) => {
   const { action, readPretty, fieldName } = props;
@@ -76,7 +75,6 @@ const InternalFormFieldProvider = (props) => {
 };
 
 export const WithoutFormFieldResource = createContext(null);
-WithoutFormFieldResource.displayName = 'WithoutFormFieldResource';
 
 export const FormFieldProvider = (props) => {
   return (
diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx
index 517ef47a2..1c52b1ab3 100644
--- a/packages/core/client/src/block-provider/TableBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx
@@ -9,8 +9,6 @@ import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestCont
 import { findFilterTargets, useParsedFilter } from './hooks';
 
 export const TableBlockContext = createContext<any>({});
-TableBlockContext.displayName = 'TableBlockContext';
-
 export function getIdsWithChildren(nodes) {
   const ids = [];
   if (nodes) {
diff --git a/packages/core/client/src/block-provider/TableFieldProvider.tsx b/packages/core/client/src/block-provider/TableFieldProvider.tsx
index 6b14b2e3f..4d7c4e316 100644
--- a/packages/core/client/src/block-provider/TableFieldProvider.tsx
+++ b/packages/core/client/src/block-provider/TableFieldProvider.tsx
@@ -7,7 +7,6 @@ import { useFormBlockContext } from './FormBlockProvider';
 import { useFormFieldContext } from './FormFieldProvider';
 
 export const TableFieldContext = createContext<any>({});
-TableFieldContext.displayName = 'TableFieldContext';
 
 const InternalTableFieldProvider = (props) => {
   const { params = {}, showIndex, dragSort, fieldName } = props;
@@ -123,7 +122,6 @@ export class TableFieldResource {
 }
 
 export const WithoutTableFieldResource = createContext(null);
-WithoutTableFieldResource.displayName = 'WithoutTableFieldResource';
 
 export const TableFieldProvider = (props) => {
   return (
diff --git a/packages/core/client/src/block-provider/TableSelectorProvider.tsx b/packages/core/client/src/block-provider/TableSelectorProvider.tsx
index 4d422b8e8..9f7fe8738 100644
--- a/packages/core/client/src/block-provider/TableSelectorProvider.tsx
+++ b/packages/core/client/src/block-provider/TableSelectorProvider.tsx
@@ -20,9 +20,7 @@ type Params = {
 };
 
 export const TableSelectorContext = createContext<any>({});
-TableSelectorContext.displayName = 'TableSelectorContext';
 const TableSelectorParamsContext = createContext<Params>({}); // 用于传递参数
-TableSelectorParamsContext.displayName = 'TableSelectorParamsContext';
 
 type TableSelectorProviderProps = {
   params: Record<string, any>;
diff --git a/packages/core/client/src/block-provider/TemplateBlockProvider.tsx b/packages/core/client/src/block-provider/TemplateBlockProvider.tsx
index 7da7e65e5..429ba603b 100644
--- a/packages/core/client/src/block-provider/TemplateBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/TemplateBlockProvider.tsx
@@ -5,7 +5,6 @@ const TemplateBlockContext = createContext<{
   templateFinshed?: boolean;
   onTemplateSuccess?: Function;
 }>({});
-TemplateBlockContext.displayName = 'TemplateBlockContext';
 
 export const useTemplateBlockContext = () => {
   return useContext(TemplateBlockContext);
diff --git a/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx b/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
index aca031460..3773fed52 100644
--- a/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
+++ b/packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx
@@ -12,7 +12,6 @@ const CollectionHistoryContext = createContext<CollectionHistoryContextValue>({
   historyCollections: [],
   refreshCH: () => undefined,
 });
-CollectionHistoryContext.displayName = 'CollectionHistoryContext';
 
 export const CollectionHistoryProvider: React.FC = (props) => {
   const api = useAPIClient();
diff --git a/packages/core/client/src/collection-manager/Configuration/components/Summary.tsx b/packages/core/client/src/collection-manager/Configuration/components/Summary.tsx
index eb0e8255f..04b002f05 100644
--- a/packages/core/client/src/collection-manager/Configuration/components/Summary.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/Summary.tsx
@@ -51,4 +51,6 @@ const Summary = observer(
   { displayName: 'Summary' },
 );
 
+Summary.displayName = 'Summary';
+
 export default Summary;
diff --git a/packages/core/client/src/collection-manager/ResourceActionProvider.tsx b/packages/core/client/src/collection-manager/ResourceActionProvider.tsx
index df0cfb8dd..c0e1a87aa 100644
--- a/packages/core/client/src/collection-manager/ResourceActionProvider.tsx
+++ b/packages/core/client/src/collection-manager/ResourceActionProvider.tsx
@@ -8,7 +8,6 @@ import { useAPIClient, useRequest } from '../api-client';
 export const ResourceActionContext = createContext<
   Result<any, any> & { state?: any; setState?: any; dragSort?: boolean; defaultRequest?: any }
 >(null);
-ResourceActionContext.displayName = 'ResourceActionContext';
 
 interface ResourceActionProviderProps {
   type?: 'association' | 'collection';
@@ -19,7 +18,6 @@ interface ResourceActionProviderProps {
 }
 
 const ResourceContext = createContext<any>(null);
-ResourceContext.displayName = 'ResourceContext';
 
 const CollectionResourceActionProvider = (props) => {
   const { collection, request, uid, dragSort } = props;
diff --git a/packages/core/client/src/collection-manager/context.ts b/packages/core/client/src/collection-manager/context.ts
index 75500e9b7..b4996a946 100644
--- a/packages/core/client/src/collection-manager/context.ts
+++ b/packages/core/client/src/collection-manager/context.ts
@@ -1,4 +1,3 @@
 import { createContext } from 'react';
 
 export const CollectionCategroriesContext = createContext({ data: [], refresh: () => {} });
-CollectionCategroriesContext.displayName = 'CollectionCategroriesContext';
diff --git a/packages/core/client/src/collection-manager/sub-table.tsx b/packages/core/client/src/collection-manager/sub-table.tsx
index cc908cba0..eec09e909 100644
--- a/packages/core/client/src/collection-manager/sub-table.tsx
+++ b/packages/core/client/src/collection-manager/sub-table.tsx
@@ -69,7 +69,6 @@ const collection: CollectionOptions = {
 };
 
 export const DataSourceContext_deprecated = createContext(null);
-DataSourceContext_deprecated.displayName = 'DataSourceContext_deprecated';
 
 const useSelectedRowKeys = () => {
   const ctx = useContext(DataSourceContext_deprecated);
diff --git a/packages/core/client/src/collection-manager/templates/components/PresetFields.tsx b/packages/core/client/src/collection-manager/templates/components/PresetFields.tsx
index 81d6180d3..0692e8269 100644
--- a/packages/core/client/src/collection-manager/templates/components/PresetFields.tsx
+++ b/packages/core/client/src/collection-manager/templates/components/PresetFields.tsx
@@ -100,118 +100,115 @@ const getDefaultCollectionFields = (presetFields, values) => {
   // 其他
   return defaults;
 };
-export const PresetFields = observer(
-  (props: any) => {
-    const { getInterface } = useCollectionManager_deprecated();
-    const form = useForm();
-    const compile = useCompile();
-    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-    const { t } = useTranslation();
-    const column = [
-      {
-        title: t('Field'),
-        dataIndex: 'field',
-        key: 'field',
-      },
-      {
-        title: t('Interface'),
-        dataIndex: 'interface',
-        key: 'interface',
-        render: (value) => <Tag>{compile(getInterface(value)?.title)}</Tag>,
-      },
-      {
-        title: t('Description'),
-        dataIndex: 'description',
-        key: 'description',
-      },
-    ];
-    const dataSource = [
-      {
-        field: t('ID'),
-        interface: 'integer',
-        description: t('Primary key, unique identifier, self growth'),
-        name: 'id',
-      },
-      {
-        field: t('Created at'),
-        interface: 'createdAt',
-        description: t('Store the creation time of each record'),
-        name: 'createdAt',
-      },
-      {
-        field: t('Last updated at'),
-        interface: 'updatedAt',
-        description: t('Store the last update time of each record'),
-        name: 'updatedAt',
-      },
-      {
-        field: t('Created by'),
-        interface: 'createdBy',
-        description: t('Store the creation user of each record'),
-        name: 'createdBy',
-      },
+export const PresetFields = observer((props: any) => {
+  const { getInterface } = useCollectionManager_deprecated();
+  const form = useForm();
+  const compile = useCompile();
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const { t } = useTranslation();
+  const column = [
+    {
+      title: t('Field'),
+      dataIndex: 'field',
+      key: 'field',
+    },
+    {
+      title: t('Interface'),
+      dataIndex: 'interface',
+      key: 'interface',
+      render: (value) => <Tag>{compile(getInterface(value)?.title)}</Tag>,
+    },
+    {
+      title: t('Description'),
+      dataIndex: 'description',
+      key: 'description',
+    },
+  ];
+  const dataSource = [
+    {
+      field: t('ID'),
+      interface: 'integer',
+      description: t('Primary key, unique identifier, self growth'),
+      name: 'id',
+    },
+    {
+      field: t('Created at'),
+      interface: 'createdAt',
+      description: t('Store the creation time of each record'),
+      name: 'createdAt',
+    },
+    {
+      field: t('Last updated at'),
+      interface: 'updatedAt',
+      description: t('Store the last update time of each record'),
+      name: 'updatedAt',
+    },
+    {
+      field: t('Created by'),
+      interface: 'createdBy',
+      description: t('Store the creation user of each record'),
+      name: 'createdBy',
+    },
 
-      {
-        field: t('Last updated by'),
-        interface: 'updatedBy',
-        description: t('Store the last update user of each record'),
-        name: 'updatedBy',
-      },
-    ];
-    useEffect(() => {
-      const config = {
-        autoGenId: true,
-        createdAt: true,
-        createdBy: true,
-        updatedAt: true,
-        updatedBy: true,
-      };
-      const initialValue = ['id', 'createdAt', 'createdBy', 'updatedAt', 'updatedBy'];
-      setSelectedRowKeys(initialValue);
-      form.setValues({ ...form.values, ...config });
-    }, []);
-    useEffect(() => {
-      const fields = getDefaultCollectionFields(
-        selectedRowKeys.map((v) => {
-          return {
-            name: v,
-          };
-        }),
-        form.values,
-      );
-      form.setValuesIn('fields', fields);
-    }, [selectedRowKeys]);
-    return (
-      <Table
-        size="small"
-        pagination={false}
-        rowKey="name"
-        bordered
-        scroll={{ x: 600 }}
-        dataSource={dataSource}
-        columns={column}
-        rowSelection={{
-          type: 'checkbox',
-          selectedRowKeys,
-          onChange: (_, selectedRows) => {
-            const fields = getDefaultCollectionFields(selectedRows, form.values);
-            const config = {
-              autoGenId: !!fields.find((v) => v.name === 'id'),
-              createdAt: !!fields.find((v) => v.name === 'createdAt'),
-              createdBy: !!fields.find((v) => v.name === 'createdBy'),
-              updatedAt: !!fields.find((v) => v.name === 'updatedAt'),
-              updatedBy: !!fields.find((v) => v.name === 'updatedBy'),
-            };
-            setSelectedRowKeys(
-              fields?.map?.((v) => {
-                return v.name;
-              }),
-            );
-            form.setValues({ ...form.values, fields, ...config });
-          },
-        }}
-      />
+    {
+      field: t('Last updated by'),
+      interface: 'updatedBy',
+      description: t('Store the last update user of each record'),
+      name: 'updatedBy',
+    },
+  ];
+  useEffect(() => {
+    const config = {
+      autoGenId: true,
+      createdAt: true,
+      createdBy: true,
+      updatedAt: true,
+      updatedBy: true,
+    };
+    const initialValue = ['id', 'createdAt', 'createdBy', 'updatedAt', 'updatedBy'];
+    setSelectedRowKeys(initialValue);
+    form.setValues({ ...form.values, ...config });
+  }, []);
+  useEffect(() => {
+    const fields = getDefaultCollectionFields(
+      selectedRowKeys.map((v) => {
+        return {
+          name: v,
+        };
+      }),
+      form.values,
     );
-  },
-  { displayName: 'PresetFields' },
-);
+    form.setValuesIn('fields', fields);
+  }, [selectedRowKeys]);
+  return (
+    <Table
+      size="small"
+      pagination={false}
+      rowKey="name"
+      bordered
+      scroll={{ x: 600 }}
+      dataSource={dataSource}
+      columns={column}
+      rowSelection={{
+        type: 'checkbox',
+        selectedRowKeys,
+        onChange: (_, selectedRows) => {
+          const fields = getDefaultCollectionFields(selectedRows, form.values);
+          const config = {
+            autoGenId: !!fields.find((v) => v.name === 'id'),
+            createdAt: !!fields.find((v) => v.name === 'createdAt'),
+            createdBy: !!fields.find((v) => v.name === 'createdBy'),
+            updatedAt: !!fields.find((v) => v.name === 'updatedAt'),
+            updatedBy: !!fields.find((v) => v.name === 'updatedBy'),
+          };
+          setSelectedRowKeys(
+            fields?.map?.((v) => {
+              return v.name;
+            }),
+          );
+          form.setValues({ ...form.values, fields, ...config });
+        },
+      }}
+    />
+  );
+});
diff --git a/packages/core/client/src/collection-manager/templates/components/sql-collection/FieldsConfigure.tsx b/packages/core/client/src/collection-manager/templates/components/sql-collection/FieldsConfigure.tsx
index 432526ec1..ff70e0677 100644
--- a/packages/core/client/src/collection-manager/templates/components/sql-collection/FieldsConfigure.tsx
+++ b/packages/core/client/src/collection-manager/templates/components/sql-collection/FieldsConfigure.tsx
@@ -73,225 +73,222 @@ const useSourceFieldsOptions = () => {
   return data;
 };
 
-export const FieldsConfigure = observer(
-  () => {
-    const { t } = useTranslation();
-    const [dataSource, setDataSource] = useState([]);
-    const { data: res, error, loading } = useAsyncData();
-    const { data, fields: sourceFields } = res || {};
-    const field: ArrayField = useField();
-    const { data: curFields } = useContext(ResourceActionContext);
-    const compile = useCompile();
-    const { getInterface, getCollectionField } = useCollectionManager_deprecated();
-    const options = useFieldInterfaceOptions();
+export const FieldsConfigure = observer(() => {
+  const { t } = useTranslation();
+  const [dataSource, setDataSource] = useState([]);
+  const { data: res, error, loading } = useAsyncData();
+  const { data, fields: sourceFields } = res || {};
+  const field: ArrayField = useField();
+  const { data: curFields } = useContext(ResourceActionContext);
+  const compile = useCompile();
+  const { getInterface, getCollectionField } = useCollectionManager_deprecated();
+  const options = useFieldInterfaceOptions();
 
-    const interfaceOptions = useMemo(
-      () =>
-        options
-          .filter((v) => !['relation'].includes(v.key))
-          .map((options, index) => ({
-            ...options,
-            key: index,
-            label: compile(options.label),
-            options: options.children.map((option) => ({
-              ...option,
-              label: compile(option.label),
-            })),
+  const interfaceOptions = useMemo(
+    () =>
+      options
+        .filter((v) => !['relation'].includes(v.key))
+        .map((options, index) => ({
+          ...options,
+          key: index,
+          label: compile(options.label),
+          options: options.children.map((option) => ({
+            ...option,
+            label: compile(option.label),
           })),
-      [compile],
-    );
-    const sourceFieldsOptions = useSourceFieldsOptions();
-
-    const refGetInterface = useRef(getInterface);
-    useEffect(() => {
-      const fieldsMp = new Map();
-      if (!loading) {
-        if (data && data.length) {
-          Object.entries(data?.[0] || {}).forEach(([col, val]) => {
-            const sourceField = sourceFields[col];
-            const fieldInterface = inferInterface(col, val);
-            const defaultConfig = refGetInterface.current(fieldInterface)?.default;
-            const uiSchema = sourceField?.uiSchema || defaultConfig?.uiSchema || {};
-            fieldsMp.set(col, {
-              name: col,
-              interface: sourceField?.interface || fieldInterface,
-              type: sourceField?.type || defaultConfig?.type,
-              source: sourceField?.source,
-              uiSchema: {
-                title: col,
-                ...uiSchema,
-              },
-            });
-          });
-        } else {
-          Object.entries(sourceFields || {}).forEach(([col, val]: [string, any]) =>
-            fieldsMp.set(col, {
-              name: col,
-              ...val,
-              uiSchema: {
-                title: col,
-                ...(val?.uiSchema || {}),
-              },
-            }),
-          );
-        }
-      }
-
-      if (field.value?.length) {
-        field.value.forEach((item) => {
-          if (fieldsMp.has(item.name)) {
-            fieldsMp.set(item.name, item);
-          }
-        });
-      }
-
-      // if (curFields?.data.length) {
-      //   curFields.data.forEach((field: any) => {
-      //     if (fieldsMp.has(field.name)) {
-      //       fieldsMp.set(field.name, field);
-      //     }
-      //   });
-      // }
-
-      const fields = Array.from(fieldsMp.values());
-      if (!fields.length) {
-        return;
-      }
-      setDataSource(fields);
-      field.setValue(fields);
-    }, [loading, data, field, sourceFields, curFields]);
-
-    if (loading) {
-      return <Spin />;
-    }
-    if (!data && !error) {
-      return <Alert showIcon message={t('Please use a valid SELECT or WITH AS statement')} />;
-    }
-    const err = error as any;
-    if (err) {
-      const errMsg =
-        err?.response?.data?.errors?.map?.((item: { message: string }) => item.message).join('\n') || err.message;
-      return <Alert showIcon message={`${t('SQL error: ')}${errMsg}`} type="error" />;
-    }
-
-    const handleFieldChange = (record: any, index: number) => {
-      const fields = [...dataSource];
-      fields.splice(index, 1, record);
-      setDataSource(fields);
-      field.setValue(
-        fields.map((f) => ({
-          ...f,
-          source: typeof f.source === 'string' ? f.source : f.source?.filter?.(Boolean)?.join('.') || null,
         })),
-      );
-    };
+    [compile],
+  );
+  const sourceFieldsOptions = useSourceFieldsOptions();
 
-    const columns = [
-      {
-        title: t('Field name'),
-        dataIndex: 'name',
-        key: 'name',
-        width: 130,
-      },
-      {
-        title: t('Field source'),
-        dataIndex: 'source',
-        key: 'source',
-        width: 200,
-        render: (text: string, record: any, index: number) => {
-          const field = dataSource[index];
-          return (
-            <Cascader
-              defaultValue={typeof text === 'string' ? text?.split('.') : text}
-              allowClear
-              options={compile(sourceFieldsOptions)}
-              placeholder={t('Select field source')}
-              onChange={(value: string[]) => {
-                let sourceField = sourceFields[value?.[1]];
-                if (!sourceField) {
-                  sourceField = getCollectionField(value?.join('.') || '');
-                }
-                handleFieldChange(
-                  {
-                    ...field,
-                    source: value,
-                    interface: sourceField?.interface,
-                    type: sourceField?.type,
-                    uiSchema: sourceField?.uiSchema,
-                  },
-                  index,
-                );
-              }}
-            />
-          );
-        },
-      },
-      {
-        title: t('Field interface'),
-        dataIndex: 'interface',
-        key: 'interface',
-        width: 150,
-        render: (text: string, record: any, index: number) => {
-          const field = dataSource[index];
-          return field.source ? (
-            <Tag>{compile(getInterface(text)?.title) || text}</Tag>
-          ) : (
-            <Select
-              defaultValue={field.interface || 'input'}
-              style={{ width: '100%' }}
-              popupMatchSelectWidth={false}
-              onChange={(value) => {
-                const interfaceConfig = getInterface(value);
-                handleFieldChange(
-                  {
-                    ...field,
-                    interface: value || null,
-                    uiSchema: {
-                      ...interfaceConfig?.default?.uiSchema,
-                      title: interfaceConfig?.default?.uiSchema?.title || field.uiSchema?.title,
-                    },
-                    type: interfaceConfig?.default?.type,
-                  },
-                  index,
-                );
-              }}
-              allowClear={true}
-              options={interfaceOptions}
-            />
-          );
-        },
-      },
-      {
-        title: t('Field display name'),
-        dataIndex: 'title',
-        key: 'title',
-        width: 180,
-        render: (text: string, record: any, index: number) => {
-          const field = dataSource[index];
-          return (
-            <Input
-              value={field.uiSchema?.title || text}
-              defaultValue={field.uiSchema?.title !== undefined ? field.uiSchema.title : field?.name}
-              onChange={(e) =>
-                handleFieldChange({ ...field, uiSchema: { ...field?.uiSchema, title: e.target.value } }, index)
-              }
-            />
-          );
-        },
-      },
-    ];
-    return (
-      <Table
-        bordered
-        size="small"
-        columns={columns}
-        dataSource={dataSource}
-        scroll={{ y: 300 }}
-        pagination={false}
-        rowClassName="editable-row"
-        rowKey="name"
-      />
+  const refGetInterface = useRef(getInterface);
+  useEffect(() => {
+    const fieldsMp = new Map();
+    if (!loading) {
+      if (data && data.length) {
+        Object.entries(data?.[0] || {}).forEach(([col, val]) => {
+          const sourceField = sourceFields[col];
+          const fieldInterface = inferInterface(col, val);
+          const defaultConfig = refGetInterface.current(fieldInterface)?.default;
+          const uiSchema = sourceField?.uiSchema || defaultConfig?.uiSchema || {};
+          fieldsMp.set(col, {
+            name: col,
+            interface: sourceField?.interface || fieldInterface,
+            type: sourceField?.type || defaultConfig?.type,
+            source: sourceField?.source,
+            uiSchema: {
+              title: col,
+              ...uiSchema,
+            },
+          });
+        });
+      } else {
+        Object.entries(sourceFields || {}).forEach(([col, val]: [string, any]) =>
+          fieldsMp.set(col, {
+            name: col,
+            ...val,
+            uiSchema: {
+              title: col,
+              ...(val?.uiSchema || {}),
+            },
+          }),
+        );
+      }
+    }
+
+    if (field.value?.length) {
+      field.value.forEach((item) => {
+        if (fieldsMp.has(item.name)) {
+          fieldsMp.set(item.name, item);
+        }
+      });
+    }
+
+    // if (curFields?.data.length) {
+    //   curFields.data.forEach((field: any) => {
+    //     if (fieldsMp.has(field.name)) {
+    //       fieldsMp.set(field.name, field);
+    //     }
+    //   });
+    // }
+
+    const fields = Array.from(fieldsMp.values());
+    if (!fields.length) {
+      return;
+    }
+    setDataSource(fields);
+    field.setValue(fields);
+  }, [loading, data, field, sourceFields, curFields]);
+
+  if (loading) {
+    return <Spin />;
+  }
+  if (!data && !error) {
+    return <Alert showIcon message={t('Please use a valid SELECT or WITH AS statement')} />;
+  }
+  const err = error as any;
+  if (err) {
+    const errMsg =
+      err?.response?.data?.errors?.map?.((item: { message: string }) => item.message).join('\n') || err.message;
+    return <Alert showIcon message={`${t('SQL error: ')}${errMsg}`} type="error" />;
+  }
+
+  const handleFieldChange = (record: any, index: number) => {
+    const fields = [...dataSource];
+    fields.splice(index, 1, record);
+    setDataSource(fields);
+    field.setValue(
+      fields.map((f) => ({
+        ...f,
+        source: typeof f.source === 'string' ? f.source : f.source?.filter?.(Boolean)?.join('.') || null,
+      })),
     );
-  },
-  { displayName: 'FieldsConfigure' },
-);
+  };
+
+  const columns = [
+    {
+      title: t('Field name'),
+      dataIndex: 'name',
+      key: 'name',
+      width: 130,
+    },
+    {
+      title: t('Field source'),
+      dataIndex: 'source',
+      key: 'source',
+      width: 200,
+      render: (text: string, record: any, index: number) => {
+        const field = dataSource[index];
+        return (
+          <Cascader
+            defaultValue={typeof text === 'string' ? text?.split('.') : text}
+            allowClear
+            options={compile(sourceFieldsOptions)}
+            placeholder={t('Select field source')}
+            onChange={(value: string[]) => {
+              let sourceField = sourceFields[value?.[1]];
+              if (!sourceField) {
+                sourceField = getCollectionField(value?.join('.') || '');
+              }
+              handleFieldChange(
+                {
+                  ...field,
+                  source: value,
+                  interface: sourceField?.interface,
+                  type: sourceField?.type,
+                  uiSchema: sourceField?.uiSchema,
+                },
+                index,
+              );
+            }}
+          />
+        );
+      },
+    },
+    {
+      title: t('Field interface'),
+      dataIndex: 'interface',
+      key: 'interface',
+      width: 150,
+      render: (text: string, record: any, index: number) => {
+        const field = dataSource[index];
+        return field.source ? (
+          <Tag>{compile(getInterface(text)?.title) || text}</Tag>
+        ) : (
+          <Select
+            defaultValue={field.interface || 'input'}
+            style={{ width: '100%' }}
+            popupMatchSelectWidth={false}
+            onChange={(value) => {
+              const interfaceConfig = getInterface(value);
+              handleFieldChange(
+                {
+                  ...field,
+                  interface: value || null,
+                  uiSchema: {
+                    ...interfaceConfig?.default?.uiSchema,
+                    title: interfaceConfig?.default?.uiSchema?.title || field.uiSchema?.title,
+                  },
+                  type: interfaceConfig?.default?.type,
+                },
+                index,
+              );
+            }}
+            allowClear={true}
+            options={interfaceOptions}
+          />
+        );
+      },
+    },
+    {
+      title: t('Field display name'),
+      dataIndex: 'title',
+      key: 'title',
+      width: 180,
+      render: (text: string, record: any, index: number) => {
+        const field = dataSource[index];
+        return (
+          <Input
+            value={field.uiSchema?.title || text}
+            defaultValue={field.uiSchema?.title !== undefined ? field.uiSchema.title : field?.name}
+            onChange={(e) =>
+              handleFieldChange({ ...field, uiSchema: { ...field?.uiSchema, title: e.target.value } }, index)
+            }
+          />
+        );
+      },
+    },
+  ];
+  return (
+    <Table
+      bordered
+      size="small"
+      columns={columns}
+      dataSource={dataSource}
+      scroll={{ y: 300 }}
+      pagination={false}
+      rowClassName="editable-row"
+      rowKey="name"
+    />
+  );
+});
diff --git a/packages/core/client/src/collection-manager/templates/components/sql-collection/PreviewTable.tsx b/packages/core/client/src/collection-manager/templates/components/sql-collection/PreviewTable.tsx
index 3da50fab1..6e3e17af4 100644
--- a/packages/core/client/src/collection-manager/templates/components/sql-collection/PreviewTable.tsx
+++ b/packages/core/client/src/collection-manager/templates/components/sql-collection/PreviewTable.tsx
@@ -4,58 +4,55 @@ import { Table } from 'antd';
 import { Schema, observer, useForm } from '@formily/react';
 import { useTranslation } from 'react-i18next';
 
-export const PreviewTable = observer(
-  () => {
-    const { data: res, loading, error } = useAsyncData();
-    const { data } = res || {};
-    const { t } = useTranslation();
-    const form = useForm();
+export const PreviewTable = observer(() => {
+  const { data: res, loading, error } = useAsyncData();
+  const { data } = res || {};
+  const { t } = useTranslation();
+  const form = useForm();
 
-    const fields = form.values.fields || [];
-    const titleMp = fields.reduce((mp: { [name: string]: string }, field: any) => {
-      mp[field.name] = field?.uiSchema?.title;
-      return mp;
-    }, {});
+  const fields = form.values.fields || [];
+  const titleMp = fields.reduce((mp: { [name: string]: string }, field: any) => {
+    mp[field.name] = field?.uiSchema?.title;
+    return mp;
+  }, {});
 
-    const columns = error
-      ? []
-      : Object.keys(data?.[0] || {}).map((col) => {
-          const title = titleMp[col];
-          return {
-            title: Schema.compile(title || col, { t }),
-            dataIndex: col,
-            key: col,
-          };
-        });
+  const columns = error
+    ? []
+    : Object.keys(data?.[0] || {}).map((col) => {
+        const title = titleMp[col];
+        return {
+          title: Schema.compile(title || col, { t }),
+          dataIndex: col,
+          key: col,
+        };
+      });
 
-    const dataSource = error
-      ? []
-      : data?.map((record: any, index: number) => {
-          const compiledRecord = Object.entries(record).reduce(
-            (mp: { [key: string]: any }, [key, val]: [string, any]) => {
-              if (typeof val !== 'string') {
-                mp[key] = val;
-                return mp;
-              }
-              const compiled = Schema.compile(val, { t });
-              mp[key] = t(compiled);
+  const dataSource = error
+    ? []
+    : data?.map((record: any, index: number) => {
+        const compiledRecord = Object.entries(record).reduce(
+          (mp: { [key: string]: any }, [key, val]: [string, any]) => {
+            if (typeof val !== 'string') {
+              mp[key] = val;
               return mp;
-            },
-            {},
-          );
-          return { ...compiledRecord, key: index };
-        });
+            }
+            const compiled = Schema.compile(val, { t });
+            mp[key] = t(compiled);
+            return mp;
+          },
+          {},
+        );
+        return { ...compiledRecord, key: index };
+      });
 
-    return (
-      <Table
-        bordered
-        dataSource={dataSource}
-        columns={columns}
-        scroll={{ x: columns.length * 150, y: 300 }}
-        loading={loading}
-        rowKey="key"
-      />
-    );
-  },
-  { displayName: 'PreviewTable' },
-);
+  return (
+    <Table
+      bordered
+      dataSource={dataSource}
+      columns={columns}
+      scroll={{ x: columns.length * 150, y: 300 }}
+      loading={loading}
+      rowKey="key"
+    />
+  );
+});
diff --git a/packages/core/client/src/data-source/collection/AssociationProvider.tsx b/packages/core/client/src/data-source/collection/AssociationProvider.tsx
index 5d6757786..ec9acf606 100644
--- a/packages/core/client/src/data-source/collection/AssociationProvider.tsx
+++ b/packages/core/client/src/data-source/collection/AssociationProvider.tsx
@@ -12,7 +12,6 @@ export interface AssociationProviderProps {
 }
 
 const ParentCollectionContext = createContext<Collection>(null);
-ParentCollectionContext.displayName = 'ParentCollectionContext';
 
 const ParentCollectionProvider = (props) => {
   const collection = useCollection();
diff --git a/packages/core/client/src/document-title/index.tsx b/packages/core/client/src/document-title/index.tsx
index 1b0db6e97..65ced248e 100644
--- a/packages/core/client/src/document-title/index.tsx
+++ b/packages/core/client/src/document-title/index.tsx
@@ -13,7 +13,6 @@ export const DocumentTitleContext = createContext<DocumentTitleContextProps>({
   title: null,
   setTitle() {},
 });
-DocumentTitleContext.displayName = 'DocumentTitleContext';
 
 export const DocumentTitleProvider: React.FC<{ addonBefore?: string; addonAfter?: string }> = (props) => {
   const { addonBefore, addonAfter } = props;
diff --git a/packages/core/client/src/filter-provider/FilterProvider.tsx b/packages/core/client/src/filter-provider/FilterProvider.tsx
index faaa7aee0..20c218a0a 100644
--- a/packages/core/client/src/filter-provider/FilterProvider.tsx
+++ b/packages/core/client/src/filter-provider/FilterProvider.tsx
@@ -58,7 +58,6 @@ interface FilterContextValue {
 }
 
 const FilterContext = createContext<FilterContextValue>(null);
-FilterContext.displayName = 'FilterContext';
 
 /**
  * 主要用于记录当前页面中的数据区块的信息,用于在过滤区块中使用
diff --git a/packages/core/client/src/global-theme/AntdAppProvider.tsx b/packages/core/client/src/global-theme/AntdAppProvider.tsx
index f516d4338..d01c2b2e2 100644
--- a/packages/core/client/src/global-theme/AntdAppProvider.tsx
+++ b/packages/core/client/src/global-theme/AntdAppProvider.tsx
@@ -15,7 +15,6 @@ const AppInner = memo(({ children }: { children: React.ReactNode }) => {
 
   return <>{children}</>;
 });
-AppInner.displayName = 'AppInner';
 
 const AntdAppProvider = ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/packages/core/client/src/global-theme/index.tsx b/packages/core/client/src/global-theme/index.tsx
index 000e38391..28df94c11 100644
--- a/packages/core/client/src/global-theme/index.tsx
+++ b/packages/core/client/src/global-theme/index.tsx
@@ -25,7 +25,6 @@ interface GlobalThemeContextProps {
 }
 
 const GlobalThemeContext = createContext<GlobalThemeContextProps>(null);
-GlobalThemeContext.displayName = 'GlobalThemeContext';
 
 export const useGlobalTheme = () => {
   return React.useContext(GlobalThemeContext) || ({ theme: {}, isDarkTheme: false } as GlobalThemeContextProps);
diff --git a/packages/core/client/src/hooks/useMenuItem.tsx b/packages/core/client/src/hooks/useMenuItem.tsx
index a83318d73..6794e1811 100644
--- a/packages/core/client/src/hooks/useMenuItem.tsx
+++ b/packages/core/client/src/hooks/useMenuItem.tsx
@@ -10,9 +10,7 @@ type Item = MenuProps['items'][0] & {
 };
 
 export const GetMenuItemContext = createContext<{ collectMenuItem?(item: Item): void; onChange?: () => void }>(null);
-GetMenuItemContext.displayName = 'GetMenuItemContext';
 export const GetMenuItemsContext = createContext<{ pushMenuItem?(item: Item): void }>(null);
-GetMenuItemsContext.displayName = 'GetMenuItemsContext';
 
 /**
  * 用于为 SchemaInitializer.Item 组件提供一些方法,比如收集菜单项数据
diff --git a/packages/core/client/src/nocobase-buildin-plugin/index.tsx b/packages/core/client/src/nocobase-buildin-plugin/index.tsx
index 61b3e39fe..8f9e533d1 100644
--- a/packages/core/client/src/nocobase-buildin-plugin/index.tsx
+++ b/packages/core/client/src/nocobase-buildin-plugin/index.tsx
@@ -65,33 +65,30 @@ const useErrorProps = (app: Application, error: any) => {
   }
 };
 
-const AppError: FC<{ error: Error; app: Application }> = observer(
-  ({ app, error }) => {
-    const props = useErrorProps(app, error);
-    return (
-      <div>
-        <Result
-          className={css`
-            top: 50%;
-            position: absolute;
-            width: 100%;
-            transform: translate(0, -50%);
-          `}
-          status="error"
-          title={app.i18n.t('App error')}
-          subTitle={app.i18n.t(error?.message)}
-          extra={[
-            <Button type="primary" key="try" onClick={() => window.location.reload()}>
-              {app.i18n.t('Try again')}
-            </Button>,
-          ]}
-          {...props}
-        />
-      </div>
-    );
-  },
-  { displayName: 'AppError' },
-);
+const AppError: FC<{ error: Error; app: Application }> = observer(({ app, error }) => {
+  const props = useErrorProps(app, error);
+  return (
+    <div>
+      <Result
+        className={css`
+          top: 50%;
+          position: absolute;
+          width: 100%;
+          transform: translate(0, -50%);
+        `}
+        status="error"
+        title={app.i18n.t('App error')}
+        subTitle={app.i18n.t(error?.message)}
+        extra={[
+          <Button type="primary" key="try" onClick={() => window.location.reload()}>
+            {app.i18n.t('Try again')}
+          </Button>,
+        ]}
+        {...props}
+      />
+    </div>
+  );
+});
 
 const getProps = (app: Application) => {
   if (app.ws.serverDown) {
@@ -198,45 +195,39 @@ const getProps = (app: Application) => {
   return {};
 };
 
-const AppMaintaining: FC<{ app: Application; error: Error }> = observer(
-  ({ app }) => {
-    const { icon, status, title, subTitle } = getProps(app);
-    return (
-      <div>
-        <Result
-          className={css`
-            top: 50%;
-            position: absolute;
-            width: 100%;
-            transform: translate(0, -50%);
-          `}
-          icon={icon}
-          status={status}
-          title={app.i18n.t(title)}
-          subTitle={app.i18n.t(subTitle)}
-          // extra={[
-          //   <Button type="primary" key="try" onClick={() => window.location.reload()}>
-          //     {app.i18n.t('Try again')}
-          //   </Button>,
-          // ]}
-        />
-      </div>
-    );
-  },
-  { displayName: 'AppMaintaining' },
-);
+const AppMaintaining: FC<{ app: Application; error: Error }> = observer(({ app }) => {
+  const { icon, status, title, subTitle } = getProps(app);
+  return (
+    <div>
+      <Result
+        className={css`
+          top: 50%;
+          position: absolute;
+          width: 100%;
+          transform: translate(0, -50%);
+        `}
+        icon={icon}
+        status={status}
+        title={app.i18n.t(title)}
+        subTitle={app.i18n.t(subTitle)}
+        // extra={[
+        //   <Button type="primary" key="try" onClick={() => window.location.reload()}>
+        //     {app.i18n.t('Try again')}
+        //   </Button>,
+        // ]}
+      />
+    </div>
+  );
+});
 
-const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(
-  ({ app }) => {
-    const { icon, status, title, subTitle } = getProps(app);
-    return (
-      <Modal open={true} footer={null} closable={false}>
-        <Result icon={icon} status={status} title={app.i18n.t(title)} subTitle={app.i18n.t(subTitle)} />
-      </Modal>
-    );
-  },
-  { displayName: 'AppMaintainingDialog' },
-);
+const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(({ app }) => {
+  const { icon, status, title, subTitle } = getProps(app);
+  return (
+    <Modal open={true} footer={null} closable={false}>
+      <Result icon={icon} status={status} title={app.i18n.t(title)} subTitle={app.i18n.t(subTitle)} />
+    </Modal>
+  );
+});
 
 const AppNotFound = () => {
   const navigate = useNavigate();
diff --git a/packages/core/client/src/plugin-manager/context.ts b/packages/core/client/src/plugin-manager/context.ts
index 50cb96b7c..ac37b960e 100644
--- a/packages/core/client/src/plugin-manager/context.ts
+++ b/packages/core/client/src/plugin-manager/context.ts
@@ -1,4 +1,3 @@
 import { createContext } from 'react';
 
 export const PinnedPluginListContext = createContext({ items: {} });
-PinnedPluginListContext.displayName = 'PinnedPluginListContext';
diff --git a/packages/core/client/src/pm/PluginDocument.tsx b/packages/core/client/src/pm/PluginDocument.tsx
index a629fc3b5..85fb33213 100644
--- a/packages/core/client/src/pm/PluginDocument.tsx
+++ b/packages/core/client/src/pm/PluginDocument.tsx
@@ -73,4 +73,3 @@ export const PluginDocument: React.FC<PluginDocumentProps> = memo((props) => {
     </div>
   );
 });
-PluginDocument.displayName = 'PluginDocument';
diff --git a/packages/core/client/src/pm/PluginSetting.tsx b/packages/core/client/src/pm/PluginSetting.tsx
index 4c4bd3e36..aac1a60b2 100644
--- a/packages/core/client/src/pm/PluginSetting.tsx
+++ b/packages/core/client/src/pm/PluginSetting.tsx
@@ -9,7 +9,6 @@ import { ADMIN_SETTINGS_PATH, PluginSettingsPageType, useApp } from '../applicat
 import { useCompile } from '../schema-component';
 
 export const SettingsCenterContext = createContext<any>({});
-SettingsCenterContext.displayName = 'SettingsCenterContext';
 
 function getMenuItems(list: PluginSettingsPageType[]) {
   return list.map((item) => {
diff --git a/packages/core/client/src/record-provider/index.tsx b/packages/core/client/src/record-provider/index.tsx
index d7e4c4ea2..434604e25 100644
--- a/packages/core/client/src/record-provider/index.tsx
+++ b/packages/core/client/src/record-provider/index.tsx
@@ -4,9 +4,7 @@ import { CollectionRecordProvider } from '../data-source';
 import { useCurrentUserContext } from '../user';
 
 export const RecordContext_deprecated = createContext({});
-RecordContext_deprecated.displayName = 'RecordContext_deprecated';
 export const RecordIndexContext = createContext(null);
-RecordIndexContext.displayName = 'RecordIndexContext';
 
 /**
  * @deprecated use `CollectionRecordProvider` instead
diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
index f237c81f6..3f5b7b184 100644
--- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
+++ b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
@@ -54,7 +54,6 @@ const filterByACL = (schema, options) => {
 };
 
 const SchemaIdContext = createContext(null);
-SchemaIdContext.displayName = 'SchemaIdContext';
 const useMenuProps = () => {
   const defaultSelectedUid = useContext(SchemaIdContext);
   return {
diff --git a/packages/core/client/src/schema-component/antd/action/context.tsx b/packages/core/client/src/schema-component/antd/action/context.tsx
index fc29d737d..d4b595124 100644
--- a/packages/core/client/src/schema-component/antd/action/context.tsx
+++ b/packages/core/client/src/schema-component/antd/action/context.tsx
@@ -4,7 +4,6 @@ import React, { createContext } from 'react';
 import { useActionContext } from './hooks';
 
 export const ActionContext = createContext<ActionContextProps>({});
-ActionContext.displayName = 'ActionContext';
 
 export const ActionContextProvider: React.FC<ActionContextProps & { value?: ActionContextProps }> = (props) => {
   const contextProps = useActionContext();
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 a7ac1d6ca..0fe114fb8 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
@@ -40,119 +40,116 @@ export const filterAnalyses = (filters): any[] => {
   return results;
 };
 
-const InternalAssociationSelect = observer(
-  (props: AssociationSelectProps) => {
-    const { objectValue = true } = props;
-    const field: any = useField();
-    const fieldSchema = useFieldSchema();
-    const service = useServiceOptions(props);
-    const { options: collectionField } = useAssociationFieldContext();
-    const initValue = isVariable(props.value) ? undefined : props.value;
+const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
+  const { objectValue = true } = props;
+  const field: any = useField();
+  const fieldSchema = useFieldSchema();
+  const service = useServiceOptions(props);
+  const { options: collectionField } = useAssociationFieldContext();
+  const initValue = isVariable(props.value) ? undefined : props.value;
+  const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
+  // 因为通过 Schema 的形式书写的组件,在值变更的时候 `value` 的值没有改变,所以需要维护一个 `innerValue` 来变更值
+  const [innerValue, setInnerValue] = useState(value);
+  const addMode = fieldSchema['x-component-props']?.addMode;
+  const isAllowAddNew = fieldSchema['x-add-new'];
+  const { t } = useTranslation();
+  const { multiple } = props;
+  const form = useForm();
+  const api = useAPIClient();
+  const resource = api.resource(collectionField.target);
+  const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter);
+  const recordData = useCollectionRecordData();
+  useEffect(() => {
+    const initValue = isVariable(field.value) ? undefined : field.value;
     const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
-    // 因为通过 Schema 的形式书写的组件,在值变更的时候 `value` 的值没有改变,所以需要维护一个 `innerValue` 来变更值
-    const [innerValue, setInnerValue] = useState(value);
-    const addMode = fieldSchema['x-component-props']?.addMode;
-    const isAllowAddNew = fieldSchema['x-add-new'];
-    const { t } = useTranslation();
-    const { multiple } = props;
-    const form = useForm();
-    const api = useAPIClient();
-    const resource = api.resource(collectionField.target);
-    const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter);
-    const recordData = useCollectionRecordData();
-    useEffect(() => {
-      const initValue = isVariable(field.value) ? undefined : field.value;
-      const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
-      setInnerValue(value);
-    }, [field.value]);
-    useEffect(() => {
-      const id = uid();
-      form.addEffects(id, () => {
-        if (linkageFields?.length > 0) {
-          //支持深层次子表单
-          onFieldChange('*', (fieldPath: any) => {
-            if (linkageFields.includes(fieldPath.props.name) && field.value) {
-              props.onChange(field.initialValue);
-              setInnerValue(field.initialValue);
-            }
-          });
-        }
-      });
-
-      return () => {
-        form.removeEffects(id);
-      };
-    }, []);
-
-    const handleCreateAction = async (props) => {
-      const { search: value, callBack } = props;
-      const {
-        data: { data },
-      } = await resource.create({
-        values: {
-          [field?.componentProps?.fieldNames?.label || 'id']: value,
-        },
-      });
-      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);
-        }
-        isFunction(callBack) && callBack?.();
-        message.success(t('Saved successfully'));
+    setInnerValue(value);
+  }, [field.value]);
+  useEffect(() => {
+    const id = uid();
+    form.addEffects(id, () => {
+      if (linkageFields?.length > 0) {
+        //支持深层次子表单
+        onFieldChange('*', (fieldPath: any) => {
+          if (linkageFields.includes(fieldPath.props.name) && field.value) {
+            props.onChange(field.initialValue);
+            setInnerValue(field.initialValue);
+          }
+        });
       }
-    };
-    const QuickAddContent = (props) => {
-      return (
-        <div
-          onClick={() => handleCreateAction(props)}
-          style={{ cursor: 'pointer', padding: '5px 12px', color: '#0d0c0c' }}
-        >
-          <PlusOutlined />
-          <span style={{ paddingLeft: 5 }}>{t('Add') + ` “${props.search}” `}</span>
-        </div>
-      );
-    };
-    return (
-      <div key={fieldSchema.name}>
-        <Space.Compact style={{ display: 'flex', lineHeight: '32px' }}>
-          <RemoteSelect
-            style={{ width: '100%' }}
-            {...props}
-            size={'middle'}
-            objectValue={objectValue}
-            value={value || innerValue}
-            service={service}
-            onChange={(value) => {
-              const val = value?.length !== 0 ? value : null;
-              props.onChange?.(val);
-            }}
-            CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent}
-          ></RemoteSelect>
+    });
 
-          {(addMode === 'modalAdd' || isAllowAddNew) && (
-            <RecordProvider isNew={true} record={null} parent={recordData}>
-              <RecursionField
-                onlyRenderProperties
-                basePath={field.address}
-                schema={fieldSchema}
-                filterProperties={(s) => {
-                  return s['x-component'] === 'Action';
-                }}
-              />
-            </RecordProvider>
-          )}
-        </Space.Compact>
+    return () => {
+      form.removeEffects(id);
+    };
+  }, []);
+
+  const handleCreateAction = async (props) => {
+    const { search: value, callBack } = props;
+    const {
+      data: { data },
+    } = await resource.create({
+      values: {
+        [field?.componentProps?.fieldNames?.label || 'id']: value,
+      },
+    });
+    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);
+      }
+      isFunction(callBack) && callBack?.();
+      message.success(t('Saved successfully'));
+    }
+  };
+  const QuickAddContent = (props) => {
+    return (
+      <div
+        onClick={() => handleCreateAction(props)}
+        style={{ cursor: 'pointer', padding: '5px 12px', color: '#0d0c0c' }}
+      >
+        <PlusOutlined />
+        <span style={{ paddingLeft: 5 }}>{t('Add') + ` “${props.search}” `}</span>
       </div>
     );
-  },
-  { displayName: 'AssociationSelect' },
-);
+  };
+  return (
+    <div key={fieldSchema.name}>
+      <Space.Compact style={{ display: 'flex', lineHeight: '32px' }}>
+        <RemoteSelect
+          style={{ width: '100%' }}
+          {...props}
+          size={'middle'}
+          objectValue={objectValue}
+          value={value || innerValue}
+          service={service}
+          onChange={(value) => {
+            const val = value?.length !== 0 ? value : null;
+            props.onChange?.(val);
+          }}
+          CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent}
+        ></RemoteSelect>
+
+        {(addMode === 'modalAdd' || isAllowAddNew) && (
+          <RecordProvider isNew={true} record={null} parent={recordData}>
+            <RecursionField
+              onlyRenderProperties
+              basePath={field.address}
+              schema={fieldSchema}
+              filterProperties={(s) => {
+                return s['x-component'] === 'Action';
+              }}
+            />
+          </RecordProvider>
+        )}
+      </Space.Compact>
+    </div>
+  );
+});
 
 interface AssociationSelectInterface {
   (props: any): React.ReactElement;
diff --git a/packages/core/client/src/schema-component/antd/association-field/context.ts b/packages/core/client/src/schema-component/antd/association-field/context.ts
index 6cdd03a17..b805fe03d 100644
--- a/packages/core/client/src/schema-component/antd/association-field/context.ts
+++ b/packages/core/client/src/schema-component/antd/association-field/context.ts
@@ -10,4 +10,3 @@ export interface AssociationFieldContextProps {
 }
 
 export const AssociationFieldContext = createContext<AssociationFieldContextProps>({});
-AssociationFieldContext.displayName = 'AssociationFieldContext';
diff --git a/packages/core/client/src/schema-component/antd/association-field/hooks.ts b/packages/core/client/src/schema-component/antd/association-field/hooks.ts
index 0dda6bbec..3cfb024e4 100644
--- a/packages/core/client/src/schema-component/antd/association-field/hooks.ts
+++ b/packages/core/client/src/schema-component/antd/association-field/hooks.ts
@@ -179,7 +179,6 @@ export const useFieldNames = (props) => {
 };
 
 const SubFormContext = createContext<Record<string, any>>(null);
-SubFormContext.displayName = 'SubFormContext';
 export const SubFormProvider = SubFormContext.Provider;
 
 /**
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 271ac8adf..cb5403de8 100644
--- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
@@ -12,7 +12,6 @@ import { Action } from '../action';
 import { StablePopover } from '../popover';
 
 export const FilterActionContext = createContext<any>(null);
-FilterActionContext.displayName = 'FilterActionContext';
 
 export const FilterAction = observer(
   (props: any) => {
diff --git a/packages/core/client/src/schema-component/antd/filter/context.ts b/packages/core/client/src/schema-component/antd/filter/context.ts
index c502f5399..5e80dc964 100644
--- a/packages/core/client/src/schema-component/antd/filter/context.ts
+++ b/packages/core/client/src/schema-component/antd/filter/context.ts
@@ -12,8 +12,5 @@ export interface FilterContextProps {
 }
 
 export const RemoveConditionContext = createContext(null);
-RemoveConditionContext.displayName = 'RemoveConditionContext';
 export const FilterContext = createContext<FilterContextProps>(null);
-FilterContext.displayName = 'FilterContext';
 export const FilterLogicContext = createContext(null);
-FilterLogicContext.displayName = 'FilterLogicContext';
diff --git a/packages/core/client/src/schema-component/antd/filter/useOperators.ts b/packages/core/client/src/schema-component/antd/filter/useOperators.ts
index 6bc243ea9..22962e2b6 100644
--- a/packages/core/client/src/schema-component/antd/filter/useOperators.ts
+++ b/packages/core/client/src/schema-component/antd/filter/useOperators.ts
@@ -1,6 +1,5 @@
 import { useFieldSchema } from '@formily/react';
 import { useCollection_deprecated, useCollectionManager_deprecated } from '../../../collection-manager';
-import { useMemo } from 'react';
 
 /**
  * 获取当前字段所支持的操作符列表
@@ -8,17 +7,15 @@ import { useMemo } from 'react';
  */
 export const useOperatorList = (): any[] => {
   const schema = useFieldSchema();
+  const fieldInterface = schema['x-designer-props']?.interface;
   const { name } = useCollection_deprecated();
   const { getCollectionFields, getInterface } = useCollectionManager_deprecated();
+  const collectionFields = getCollectionFields(name);
 
-  const res = useMemo(() => {
-    const fieldInterface = schema['x-designer-props']?.interface;
-    const collectionFields = getCollectionFields(name);
-    if (fieldInterface) {
-      return getInterface(fieldInterface)?.filterable?.operators || [];
-    }
-    const field = collectionFields.find((item) => item.name === schema.name);
-    return getInterface(field?.interface)?.filterable?.operators || [];
-  }, [schema.name]);
-  return res;
+  if (fieldInterface) {
+    return getInterface(fieldInterface)?.filterable?.operators || [];
+  }
+
+  const field = collectionFields.find((item) => item.name === schema.name);
+  return getInterface(field?.interface)?.filterable?.operators || [];
 };
diff --git a/packages/core/client/src/schema-component/antd/form-dialog/index.tsx b/packages/core/client/src/schema-component/antd/form-dialog/index.tsx
index 917e6e08f..0ef28f519 100644
--- a/packages/core/client/src/schema-component/antd/form-dialog/index.tsx
+++ b/packages/core/client/src/schema-component/antd/form-dialog/index.tsx
@@ -78,12 +78,9 @@ export function FormDialog(title: any, id: any, renderer?: any, theme?: any): IF
       root.unmount();
     },
   };
-  const DialogContent = observer(
-    () => {
-      return <Fragment>{isFn(renderer) ? renderer(env.form) : renderer}</Fragment>;
-    },
-    { displayName: 'DialogContent' },
-  );
+  const DialogContent = observer(() => {
+    return <Fragment>{isFn(renderer) ? renderer(env.form) : renderer}</Fragment>;
+  });
   const renderDialog = (open = true, resolve?: () => any, reject?: () => any) => {
     const { form } = env;
     if (!form) return null;
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 d3375b044..9371ed606 100644
--- a/packages/core/client/src/schema-component/antd/form/Form.tsx
+++ b/packages/core/client/src/schema-component/antd/form/Form.tsx
@@ -87,7 +87,6 @@ const useDefaultValues = (opts: any = {}, props: FormProps = {}) => {
 };
 
 const FormBlockContext = createContext<any>(null);
-FormBlockContext.displayName = 'FormBlockContext';
 
 export const Form: React.FC<FormProps> & { Designer?: any } = observer(
   (props) => {
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 02ab18398..6453837f0 100644
--- a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
+++ b/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx
@@ -126,7 +126,6 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
 
   return <div className={cls(['g2plot', className])} ref={containerRef} />;
 });
-G2PlotRenderer.displayName = 'G2PlotRenderer';
 
 export const G2Plot: any = observer(
   (props: any) => {
@@ -141,14 +140,12 @@ export const G2Plot: any = observer(
       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;
-            })
-            .catch(console.error);
+          result.then((data) => {
+            if (Array.isArray(data)) {
+              field.componentProps.config.data = data;
+            }
+            field.data.loading = false;
+          });
         } else {
           field.data.loading = false;
         }
diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx
index 18384d580..63af4b6d5 100644
--- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx
+++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx
@@ -5,7 +5,6 @@ import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
 import useStyles from './GridCard.Decorator.style';
 export const GridCardBlockContext = createContext<any>({});
-GridCardBlockContext.displayName = 'GridCardBlockContext';
 
 const InternalGridCardBlockProvider = (props) => {
   const { resource, service } = useBlockRequestContext();
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 223dbe2aa..2f14facc0 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -11,11 +11,8 @@ import { useToken } from '../__builtins__';
 import useStyles from './Grid.style';
 
 const GridRowContext = createContext<any>({});
-GridRowContext.displayName = 'GridRowContext';
 const GridColContext = createContext<any>({});
-GridColContext.displayName = 'GridColContext';
 const GridContext = createContext<any>({});
-GridContext.displayName = 'GridContext';
 
 const breakRemoveOnGrid = (s: Schema) => s['x-component'] === 'Grid';
 const breakRemoveOnRow = (s: Schema) => s['x-component'] === 'Grid.Row';
diff --git a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx b/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
index 9424ff734..a75aeb0e9 100644
--- a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
+++ b/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
@@ -77,4 +77,3 @@ export const EllipsisWithTooltip = forwardRef((props: Partial<IEllipsisWithToolt
     </Popover>
   );
 });
-EllipsisWithTooltip.displayName = 'EllipsisWithTooltip';
diff --git a/packages/core/client/src/schema-component/antd/input/Json.tsx b/packages/core/client/src/schema-component/antd/input/Json.tsx
index ed25206cc..b4f841a33 100644
--- a/packages/core/client/src/schema-component/antd/input/Json.tsx
+++ b/packages/core/client/src/schema-component/antd/input/Json.tsx
@@ -67,4 +67,3 @@ export const Json = React.forwardRef<typeof Input.TextArea, JSONTextAreaProps>(
     );
   },
 );
-Json.displayName = 'Json';
diff --git a/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx b/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
index f5b6787b0..23d09dadb 100644
--- a/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
+++ b/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
@@ -7,7 +7,6 @@ import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
 
 export const ListBlockContext = createContext<any>({});
-ListBlockContext.displayName = 'ListBlockContext';
 
 const InternalListBlockProvider = (props) => {
   const { resource, service } = useBlockRequestContext();
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 a203ae217..01cd30f48 100644
--- a/packages/core/client/src/schema-component/antd/menu/Menu.tsx
+++ b/packages/core/client/src/schema-component/antd/menu/Menu.tsx
@@ -350,6 +350,7 @@ const SideMenu = ({
 };
 
 const MenuModeContext = createContext(null);
+
 MenuModeContext.displayName = 'MenuModeContext';
 
 const useSideMenuRef = () => {
diff --git a/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx b/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
index 9ce9c5d24..ad64ed2ea 100644
--- a/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
+++ b/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx
@@ -6,80 +6,74 @@ import React, { useMemo, useRef } from 'react';
 import { useCollectionManager_deprecated } from '../../../collection-manager';
 import { StablePopover } from '../popover';
 
-export const Editable = observer(
-  (props) => {
-    const field: any = useField();
-    const containerRef = useRef(null);
-    const fieldSchema = useFieldSchema();
-    const value = field.value;
-    const schema: any = {
-      name: fieldSchema.name,
-      'x-collection-field': fieldSchema['x-collection-field'],
-      'x-component': 'CollectionField',
-      'x-read-pretty': true,
-      default: value,
-      'x-component-props': fieldSchema['x-component-props'],
-    };
-    const form = useMemo(
-      () =>
-        createForm({
-          values: {
-            [fieldSchema.name]: value,
-          },
-        }),
-      [field.value, fieldSchema['x-component-props']],
-    );
-    const getContainer = () => {
-      return containerRef.current;
-    };
+export const Editable = observer((props) => {
+  const field: any = useField();
+  const containerRef = useRef(null);
+  const fieldSchema = useFieldSchema();
+  const value = field.value;
+  const schema: any = {
+    name: fieldSchema.name,
+    'x-collection-field': fieldSchema['x-collection-field'],
+    'x-component': 'CollectionField',
+    'x-read-pretty': true,
+    default: value,
+    'x-component-props': fieldSchema['x-component-props'],
+  };
+  const form = useMemo(
+    () =>
+      createForm({
+        values: {
+          [fieldSchema.name]: value,
+        },
+      }),
+    [field.value, fieldSchema['x-component-props']],
+  );
+  const getContainer = () => {
+    return containerRef.current;
+  };
 
-    const modifiedChildren = React.Children.map(props.children, (child) => {
-      if (React.isValidElement(child)) {
-        //@ts-ignore
-        return React.cloneElement(child, { getContainer });
-      }
-      return child;
-    });
-
-    return (
-      <FormItem {...props} labelStyle={{ display: 'none' }}>
-        <StablePopover
-          content={
-            <div style={{ width: '100%', height: '100%', minWidth: 500 }}>
-              <div ref={containerRef}>{modifiedChildren}</div>
-            </div>
-          }
-          trigger="click"
-          placement={'bottomLeft'}
-          overlayClassName={css`
-            padding-top: 0;
-            .ant-popover-arrow {
-              display: none;
-            }
-          `}
-        >
-          <div style={{ minHeight: 30, padding: '0 8px' }}>
-            <FormContext.Provider value={form}>
-              <RecursionField schema={schema} name={fieldSchema.name} />
-            </FormContext.Provider>
-          </div>
-        </StablePopover>
-      </FormItem>
-    );
-  },
-  { displayName: 'Editable' },
-);
-
-export const QuickEdit = observer(
-  (props) => {
-    const field = useField<Field>();
-    const { getCollectionJoinField } = useCollectionManager_deprecated();
-    const fieldSchema = useFieldSchema();
-    const collectionField = getCollectionJoinField(fieldSchema['x-collection-field']);
-    if (!collectionField) {
-      return null;
+  const modifiedChildren = React.Children.map(props.children, (child) => {
+    if (React.isValidElement(child)) {
+      //@ts-ignore
+      return React.cloneElement(child, { getContainer });
     }
-    return field.editable ? <Editable {...props} /> : <FormItem {...props} style={{ padding: '0 8px' }} />;
-  },
-  { displayName: 'QuickEdit' },
-);
+    return child;
+  });
+
+  return (
+    <FormItem {...props} labelStyle={{ display: 'none' }}>
+      <StablePopover
+        content={
+          <div style={{ width: '100%', height: '100%', minWidth: 500 }}>
+            <div ref={containerRef}>{modifiedChildren}</div>
+          </div>
+        }
+        trigger="click"
+        placement={'bottomLeft'}
+        overlayClassName={css`
+          padding-top: 0;
+          .ant-popover-arrow {
+            display: none;
+          }
+        `}
+      >
+        <div style={{ minHeight: 30, padding: '0 8px' }}>
+          <FormContext.Provider value={form}>
+            <RecursionField schema={schema} name={fieldSchema.name} />
+          </FormContext.Provider>
+        </div>
+      </StablePopover>
+    </FormItem>
+  );
+});
+
+export const QuickEdit = observer((props) => {
+  const field = useField<Field>();
+  const { getCollectionJoinField } = useCollectionManager_deprecated();
+  const fieldSchema = useFieldSchema();
+  const collectionField = getCollectionJoinField(fieldSchema['x-collection-field']);
+  if (!collectionField) {
+    return null;
+  }
+  return field.editable ? <Editable {...props} /> : <FormItem {...props} style={{ padding: '0 8px' }} />;
+});
diff --git a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
index 8f91d16fa..615f57681 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
@@ -16,7 +16,6 @@ import { useFieldNames } from './useFieldNames';
 import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 export const RecordPickerContext = createContext(null);
-RecordPickerContext.displayName = 'RecordPickerContext';
 
 function flatData(data) {
   const newArr = [];
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 c84708a4e..b7d2bbf0c 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
@@ -13,7 +13,6 @@ import {
 import React, { createContext, useContext, useState } from 'react';
 
 const DataSourceContext = createContext(null);
-DataSourceContext.displayName = 'DataSourceContext';
 
 const useSelectedRowKeys = () => {
   const ctx = useContext(DataSourceContext);
diff --git a/packages/core/client/src/schema-component/antd/variable/Variable.tsx b/packages/core/client/src/schema-component/antd/variable/Variable.tsx
index e6273cd0b..7f053981c 100644
--- a/packages/core/client/src/schema-component/antd/variable/Variable.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/Variable.tsx
@@ -7,7 +7,6 @@ import { RawTextArea } from './RawTextArea';
 import { TextArea } from './TextArea';
 
 const VariableScopeContext = createContext([]);
-VariableScopeContext.displayName = 'VariableScopeContext';
 
 export function VariableScopeProvider({ scope = [], children }) {
   return <VariableScopeContext.Provider value={scope}>{children}</VariableScopeContext.Provider>;
diff --git a/packages/core/client/src/schema-component/antd/variable/XButton.tsx b/packages/core/client/src/schema-component/antd/variable/XButton.tsx
index 9a6151142..f96365334 100644
--- a/packages/core/client/src/schema-component/antd/variable/XButton.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/XButton.tsx
@@ -15,4 +15,3 @@ export const XButton = forwardRef((props: ButtonProps, ref: any) => {
     </Button>
   );
 });
-XButton.displayName = 'XButton';
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 05fc2d2a3..52ff29ce1 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
@@ -2,13 +2,11 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { cx } from '@emotion/css';
 import { Schema, observer, useField, useFieldSchema } from '@formily/react';
-import React, { HTMLAttributes, createContext, useContext, useMemo } from 'react';
+import React, { HTMLAttributes, createContext, useContext } from 'react';
 import { useToken } from '../../antd/__builtins__';
 
 export const DraggableContext = createContext(null);
-DraggableContext.displayName = 'DraggableContext';
 export const SortableContext = createContext(null);
-SortableContext.displayName = 'SortableContext';
 
 export const SortableProvider = (props) => {
   const { id, data, children } = props;
@@ -76,17 +74,15 @@ interface SortableItemProps extends HTMLAttributes<HTMLDivElement> {
 export const SortableItem: React.FC<SortableItemProps> = observer(
   (props) => {
     const { schema, id, eid, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
-
-    const data = useMemo(() => {
-      return {
-        insertAdjacent: 'afterEnd',
-        schema: schema,
-        removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
-      };
-    }, [schema, removeParentsIfNoChildren]);
-
     return (
-      <SortableProvider id={id} data={data}>
+      <SortableProvider
+        id={id}
+        data={{
+          insertAdjacent: 'afterEnd',
+          schema: schema,
+          removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
+        }}
+      >
         <Sortable id={eid} {...others}>
           {props.children}
         </Sortable>
diff --git a/packages/core/client/src/schema-component/context.ts b/packages/core/client/src/schema-component/context.ts
index ceed413fa..e738d8623 100644
--- a/packages/core/client/src/schema-component/context.ts
+++ b/packages/core/client/src/schema-component/context.ts
@@ -2,4 +2,3 @@ import { createContext } from 'react';
 import { ISchemaComponentContext } from './types';
 
 export const SchemaComponentContext = createContext<ISchemaComponentContext>({});
-SchemaComponentContext.displayName = 'SchemaComponentContext.Provider';
diff --git a/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx b/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
index 3bdd436ac..2f0e8b7e6 100644
--- a/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
+++ b/packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx
@@ -1,5 +1,5 @@
 import { ExpressionScope, SchemaComponentsContext, SchemaOptionsContext } from '@formily/react';
-import React, { memo, useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import { ISchemaComponentOptionsProps } from '../types';
 
 export const useSchemaOptionsContext = () => {
@@ -7,28 +7,16 @@ export const useSchemaOptionsContext = () => {
   return options || {};
 };
 
-export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = memo((props) => {
+export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = (props) => {
   const { children } = props;
   const options = useSchemaOptionsContext();
-  const components = useMemo(() => {
-    return { ...options.components, ...props.components };
-  }, [options.components, props.components]);
-
-  const scope = useMemo(() => {
-    return { ...options.scope, ...props.scope };
-  }, [options.scope, props.scope]);
-
-  const schemaOptionsContextValue = useMemo(() => {
-    return { scope, components };
-  }, [scope, components]);
-
+  const components = { ...options.components, ...props.components };
+  const scope = { ...options.scope, ...props.scope };
   return (
-    <SchemaOptionsContext.Provider value={schemaOptionsContextValue}>
+    <SchemaOptionsContext.Provider value={{ scope, components }}>
       <SchemaComponentsContext.Provider value={components}>
         <ExpressionScope value={scope}>{children}</ExpressionScope>
       </SchemaComponentsContext.Provider>
     </SchemaOptionsContext.Provider>
   );
-});
-
-SchemaComponentOptions.displayName = 'SchemaComponentOptions';
+};
diff --git a/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx b/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
index 39358a4e7..952038df5 100644
--- a/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
+++ b/packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx
@@ -44,36 +44,28 @@ Schema.registerCompiler(Registry.compile);
 
 export const SchemaComponentProvider: React.FC<ISchemaComponentProvider> = (props) => {
   const { designable, onDesignableChange, components, children } = props;
-  const [uidValue, setUid] = useState(uid());
+  const [, setUid] = useState(uid());
   const [formId, setFormId] = useState(uid());
   const form = useMemo(() => props.form || createForm(), [formId]);
   const { t } = useTranslation();
-  const scope = useMemo(() => {
-    return { ...props.scope, t, randomString };
-  }, [props.scope, t]);
+  const scope = { ...props.scope, t, randomString };
   const [active, setActive] = useState(designable);
-
-  const schemaComponentContextValue = useMemo(
-    () => ({
-      scope,
-      components,
-      reset: () => setFormId(uid()),
-      refresh: () => {
-        setUid(uid());
-      },
-      designable: typeof designable === 'boolean' ? designable : active,
-      setDesignable: (value) => {
-        if (typeof designable !== 'boolean') {
-          setActive(value);
-        }
-        onDesignableChange?.(value);
-      },
-    }),
-    [uidValue, scope, components, designable, active],
-  );
-
   return (
-    <SchemaComponentContext.Provider value={schemaComponentContextValue}>
+    <SchemaComponentContext.Provider
+      value={{
+        scope,
+        components,
+        reset: () => setFormId(uid()),
+        refresh: () => setUid(uid()),
+        designable: typeof designable === 'boolean' ? designable : active,
+        setDesignable: (value) => {
+          if (typeof designable !== 'boolean') {
+            setActive(value);
+          }
+          onDesignableChange?.(value);
+        },
+      }}
+    >
       <FormProvider form={form}>
         <SchemaComponentOptions inherit scope={scope} components={components}>
           {children}
diff --git a/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx b/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
index ccfc5a366..4ff242b23 100644
--- a/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
@@ -36,4 +36,3 @@ export const AsDefaultTemplate = React.forwardRef((props: any, ref) => {
     />
   );
 });
-AsDefaultTemplate.displayName = 'AsDefaultTemplate';
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 bc4b0e5de..680da1851 100644
--- a/packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx
@@ -276,4 +276,3 @@ ArrayCollapse.Copy = React.forwardRef((props: any, ref) => {
     />
   );
 });
-(ArrayCollapse as any).Copy.displayName = 'ArrayCollapse.Copy';
diff --git a/packages/core/client/src/schema-settings/LinkageRules/components/EnableLinkage.tsx b/packages/core/client/src/schema-settings/LinkageRules/components/EnableLinkage.tsx
index 5bbd08e55..383ed175e 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/components/EnableLinkage.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/components/EnableLinkage.tsx
@@ -32,4 +32,3 @@ export const EnableLinkage = React.forwardRef((props: any, ref) => {
     />
   );
 });
-EnableLinkage.displayName = 'EnableLinkage';
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 05b2ffc80..75d81a41e 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx
@@ -266,4 +266,3 @@ ArrayCollapse.Copy = React.forwardRef((props: any, ref) => {
     />
   );
 });
-(ArrayCollapse as any).Copy.displayName = 'ArrayCollapse.Copy';
diff --git a/packages/core/client/src/schema-settings/LinkageRules/context.ts b/packages/core/client/src/schema-settings/LinkageRules/context.ts
index 3899de9ef..4a5b9a7d7 100644
--- a/packages/core/client/src/schema-settings/LinkageRules/context.ts
+++ b/packages/core/client/src/schema-settings/LinkageRules/context.ts
@@ -11,8 +11,5 @@ export interface FilterContextProps {
 }
 
 export const RemoveActionContext = createContext(null);
-RemoveActionContext.displayName = 'RemoveActionContext';
 export const FilterContext = createContext<FilterContextProps>(null);
-FilterContext.displayName = 'FilterContext';
 export const LinkageLogicContext = createContext(null);
-LinkageLogicContext.displayName = 'LinkageLogicContext';
diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx
index ac0b8fbb1..b7174682f 100644
--- a/packages/core/client/src/schema-settings/SchemaSettings.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx
@@ -124,7 +124,6 @@ interface SchemaSettingsContextProps<T = any> {
 }
 
 const SchemaSettingsContext = createContext<SchemaSettingsContextProps>(null);
-SchemaSettingsContext.displayName = 'SchemaSettingsContext';
 
 export function useSchemaSettings<T = any>() {
   return useContext(SchemaSettingsContext) as SchemaSettingsContextProps<T>;
diff --git a/packages/core/client/src/schema-templates/BlockTemplate.tsx b/packages/core/client/src/schema-templates/BlockTemplate.tsx
index 9edb01346..590fb9178 100644
--- a/packages/core/client/src/schema-templates/BlockTemplate.tsx
+++ b/packages/core/client/src/schema-templates/BlockTemplate.tsx
@@ -5,7 +5,6 @@ import { useSchemaTemplateManager } from './SchemaTemplateManagerProvider';
 import { useTemplateBlockContext } from '../block-provider/TemplateBlockProvider';
 
 const BlockTemplateContext = createContext<any>({});
-BlockTemplateContext.displayName = 'BlockTemplateContext';
 
 export const useBlockTemplateContext = () => {
   return useContext(BlockTemplateContext);
diff --git a/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx b/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
index 3f2ab4887..0411c3cde 100644
--- a/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
+++ b/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
@@ -11,7 +11,6 @@ import { BlockTemplate } from './BlockTemplate';
 import { DEFAULT_DATA_SOURCE_KEY } from '../data-source';
 
 export const SchemaTemplateManagerContext = createContext<any>({});
-SchemaTemplateManagerContext.displayName = 'SchemaTemplateManagerContext';
 
 export const SchemaTemplateManagerProvider: React.FC<any> = (props) => {
   const { templates, refresh } = props;
diff --git a/packages/core/client/src/system-settings/SystemSettingsProvider.tsx b/packages/core/client/src/system-settings/SystemSettingsProvider.tsx
index f27a4964e..73225d127 100644
--- a/packages/core/client/src/system-settings/SystemSettingsProvider.tsx
+++ b/packages/core/client/src/system-settings/SystemSettingsProvider.tsx
@@ -4,7 +4,6 @@ import { useRequest } from '../api-client';
 import { useAppSpin } from '../application/hooks/useAppSpin';
 
 export const SystemSettingsContext = createContext<Result<any, any>>(null);
-SystemSettingsContext.displayName = 'SystemSettingsContext';
 
 export const useSystemSettings = () => {
   return useContext(SystemSettingsContext);
diff --git a/packages/core/client/src/user/CurrentUser.tsx b/packages/core/client/src/user/CurrentUser.tsx
index 7ede1d265..a881e785e 100644
--- a/packages/core/client/src/user/CurrentUser.tsx
+++ b/packages/core/client/src/user/CurrentUser.tsx
@@ -162,8 +162,6 @@ export const SettingsMenu: React.FC<{
 };
 
 export const DropdownVisibleContext = createContext(null);
-DropdownVisibleContext.displayName = 'DropdownVisibleContext';
-
 export const CurrentUser = () => {
   const [visible, setVisible] = useState(false);
   const { token } = useToken();
diff --git a/packages/core/client/src/user/CurrentUserProvider.tsx b/packages/core/client/src/user/CurrentUserProvider.tsx
index 59f6e68fc..de522f541 100644
--- a/packages/core/client/src/user/CurrentUserProvider.tsx
+++ b/packages/core/client/src/user/CurrentUserProvider.tsx
@@ -6,7 +6,6 @@ import { useAppSpin } from '../application/hooks/useAppSpin';
 import { useCompile } from '../schema-component';
 
 export const CurrentUserContext = createContext<ReturnTypeOfUseRequest>(null);
-CurrentUserContext.displayName = 'CurrentUserContext';
 
 export const useCurrentUserContext = () => {
   return useContext(CurrentUserContext);
diff --git a/packages/core/client/src/user/CurrentUserSettingsMenuProvider.tsx b/packages/core/client/src/user/CurrentUserSettingsMenuProvider.tsx
index bb3e4f6ec..772e2708d 100644
--- a/packages/core/client/src/user/CurrentUserSettingsMenuProvider.tsx
+++ b/packages/core/client/src/user/CurrentUserSettingsMenuProvider.tsx
@@ -24,7 +24,6 @@ interface OptionsOfAddMenuItem {
 type Item = ItemType & { _options?: OptionsOfAddMenuItem };
 
 const CurrentUserSettingsMenuContext = createContext<{ menuItems: React.MutableRefObject<Item[]> }>(null);
-CurrentUserSettingsMenuContext.displayName = 'CurrentUserSettingsMenuContext';
 
 export const useCurrentUserSettingsMenu = () => {
   const { menuItems } = useContext(CurrentUserSettingsMenuContext) || {};
diff --git a/packages/core/client/src/variables/VariablesProvider.tsx b/packages/core/client/src/variables/VariablesProvider.tsx
index e375733dd..4f2af4a73 100644
--- a/packages/core/client/src/variables/VariablesProvider.tsx
+++ b/packages/core/client/src/variables/VariablesProvider.tsx
@@ -16,7 +16,6 @@ import { isVariable } from './utils/isVariable';
 import { uniq } from './utils/uniq';
 
 export const VariablesContext = createContext<VariablesContextType>(null);
-VariablesContext.displayName = 'VariablesContext';
 
 const variableToCollectionName = {};
 
diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/RolesManagerProvider.tsx b/packages/plugins/@nocobase/plugin-acl/src/client/RolesManagerProvider.tsx
index a0ceb3036..2e7a1805d 100644
--- a/packages/plugins/@nocobase/plugin-acl/src/client/RolesManagerProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-acl/src/client/RolesManagerProvider.tsx
@@ -6,4 +6,3 @@ export const RolesManagerContext = createContext<{
 }>({
   role: null,
 } as any);
-RolesManagerContext.displayName = 'RolesManagerContext';
diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/AvailableActions.tsx b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/AvailableActions.tsx
index 1bbee689f..d12367bf7 100644
--- a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/AvailableActions.tsx
+++ b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/AvailableActions.tsx
@@ -3,7 +3,6 @@ import { Spin } from 'antd';
 import React, { createContext, useContext } from 'react';
 
 const AvailableActionsContext = createContext([]);
-AvailableActionsContext.displayName = 'AvailableActionsContext';
 
 export const AvailableActionsProvider: React.FC = (props) => {
   const { data, loading } = useRequest<{
diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/MenuItemsProvider.tsx b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/MenuItemsProvider.tsx
index fc5469eb8..08f73b241 100644
--- a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/MenuItemsProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/MenuItemsProvider.tsx
@@ -3,7 +3,6 @@ import { Spin } from 'antd';
 import React, { createContext, useContext } from 'react';
 
 const MenuItemsContext = createContext(null);
-MenuItemsContext.displayName = 'MenuItemsContext';
 
 export const toItems = (properties = {}) => {
   const items = [];
diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/RolesResourcesActions.tsx b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/RolesResourcesActions.tsx
index 13989cadd..f7392965f 100644
--- a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/RolesResourcesActions.tsx
+++ b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/RolesResourcesActions.tsx
@@ -28,7 +28,6 @@ const toActionMap = (arr: any[]) => {
 };
 
 export const RoleResourceCollectionContext = createContext<any>({});
-RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
 
 export const RolesResourcesActions = connect((props) => {
   const { styles } = useStyles();
diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/ScopeSelect.tsx b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/ScopeSelect.tsx
index c3aeb3aea..e96113f2b 100644
--- a/packages/plugins/@nocobase/plugin-acl/src/client/permissions/ScopeSelect.tsx
+++ b/packages/plugins/@nocobase/plugin-acl/src/client/permissions/ScopeSelect.tsx
@@ -4,7 +4,6 @@ import { FormProvider, SchemaComponent } from '@nocobase/client';
 import { scopesSchema } from '../schemas/scopes';
 
 const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
-RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
 
 const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
   const [keys, setKeys] = useState([]);
diff --git a/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx b/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx
index f502bc7d3..6d573920c 100644
--- a/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx
+++ b/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx
@@ -103,7 +103,6 @@ const Value = observer(
 );
 
 const IsAssociationBlock = createContext(null);
-IsAssociationBlock.displayName = 'IsAssociationBlock';
 
 export const AuditLogs: any = () => {
   const isAssoc = useContext(IsAssociationBlock);
diff --git a/packages/plugins/@nocobase/plugin-auth/src/client/authenticator.ts b/packages/plugins/@nocobase/plugin-auth/src/client/authenticator.ts
index d50b4f398..353d6cc96 100644
--- a/packages/plugins/@nocobase/plugin-auth/src/client/authenticator.ts
+++ b/packages/plugins/@nocobase/plugin-auth/src/client/authenticator.ts
@@ -12,7 +12,6 @@ export type Authenticator = {
 };
 
 export const AuthenticatorsContext = createContext<Authenticator[]>([]);
-AuthenticatorsContext.displayName = 'AuthenticatorsContext';
 
 export const useAuthenticator = (name: string) => {
   const authenticators = useContext(AuthenticatorsContext);
diff --git a/packages/plugins/@nocobase/plugin-auth/src/client/pages/SignUpPage.tsx b/packages/plugins/@nocobase/plugin-auth/src/client/pages/SignUpPage.tsx
index b95f54a41..fd786a380 100644
--- a/packages/plugins/@nocobase/plugin-auth/src/client/pages/SignUpPage.tsx
+++ b/packages/plugins/@nocobase/plugin-auth/src/client/pages/SignUpPage.tsx
@@ -11,7 +11,6 @@ export const SignupPageContext = createContext<{
     }>;
   };
 }>({});
-SignupPageContext.displayName = 'SignupPageContext';
 
 export const SignupPageProvider: React.FC<{
   authType: string;
diff --git a/packages/plugins/@nocobase/plugin-auth/src/client/settings/Options.tsx b/packages/plugins/@nocobase/plugin-auth/src/client/settings/Options.tsx
index 3b6c14450..1ba46e5ac 100644
--- a/packages/plugins/@nocobase/plugin-auth/src/client/settings/Options.tsx
+++ b/packages/plugins/@nocobase/plugin-auth/src/client/settings/Options.tsx
@@ -34,12 +34,9 @@ export const useAdminSettingsForm = (authType: string) => {
   return auth?.components?.AdminSettingsForm;
 };
 
-export const Options = observer(
-  () => {
-    const form = useForm();
-    const record = useRecord();
-    const Component = useAdminSettingsForm(form.values.authType || record.authType);
-    return Component ? <Component /> : null;
-  },
-  { displayName: 'Options' },
-);
+export const Options = observer(() => {
+  const form = useForm();
+  const record = useRecord();
+  const Component = useAdminSettingsForm(form.values.authType || record.authType);
+  return Component ? <Component /> : null;
+});
diff --git a/packages/plugins/@nocobase/plugin-auth/src/client/settings/authType.ts b/packages/plugins/@nocobase/plugin-auth/src/client/settings/authType.ts
index 3f1b30c6d..040440564 100644
--- a/packages/plugins/@nocobase/plugin-auth/src/client/settings/authType.ts
+++ b/packages/plugins/@nocobase/plugin-auth/src/client/settings/authType.ts
@@ -3,7 +3,6 @@ import { createContext, useContext } from 'react';
 export const AuthTypeContext = createContext<{
   type: string;
 }>({ type: '' });
-AuthTypeContext.displayName = 'AuthTypeContext';
 
 export const AuthTypesContext = createContext<{
   types: {
@@ -12,7 +11,6 @@ export const AuthTypesContext = createContext<{
     value: string;
   }[];
 }>({ types: [] });
-AuthTypesContext.displayName = 'AuthTypesContext';
 
 export const useAuthTypes = () => {
   const { types } = useContext(AuthTypesContext);
diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/context.ts b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/context.ts
index 877cb54d9..ed64e7fc8 100644
--- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/context.ts
+++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/context.ts
@@ -2,11 +2,8 @@ import { createContext, useContext } from 'react';
 import type { ToolbarProps } from './types';
 
 export const CalendarToolbarContext = createContext<ToolbarProps>(null);
-CalendarToolbarContext.displayName = 'CalendarToolbarContext';
 export const CalendarContext = createContext(null);
-CalendarContext.displayName = 'CalendarContext';
 export const DeleteEventContext = createContext(null);
-DeleteEventContext.displayName = 'DeleteEventContext';
 
 export const useDeleteEvent = () => {
   return useContext(DeleteEventContext);
diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx b/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx
index 92fd7822b..31ad2e3e3 100644
--- a/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx
@@ -5,7 +5,6 @@ import _ from 'lodash';
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
 
 export const CalendarBlockContext = createContext<any>({});
-CalendarBlockContext.displayName = 'CalendarBlockContext';
 
 const InternalCalendarBlockProvider = (props) => {
   const { fieldNames, showLunar } = props;
diff --git a/packages/plugins/@nocobase/plugin-charts/src/client/ChartQueryMetadataProvider.tsx b/packages/plugins/@nocobase/plugin-charts/src/client/ChartQueryMetadataProvider.tsx
index ccb66bd55..61bd4fe74 100644
--- a/packages/plugins/@nocobase/plugin-charts/src/client/ChartQueryMetadataProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-charts/src/client/ChartQueryMetadataProvider.tsx
@@ -7,7 +7,6 @@ export const ChartQueryMetadataContext = createContext({
   refresh: () => {},
   data: [] as any[],
 });
-ChartQueryMetadataContext.displayName = 'ChartQueryMetadataContext';
 
 export const ChartQueryMetadataProvider: React.FC = (props) => {
   const api = useAPIClient();
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/DatabaseConnectionProvider.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/DatabaseConnectionProvider.tsx
index 389d9837f..703600933 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/DatabaseConnectionProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/DatabaseConnectionProvider.tsx
@@ -3,7 +3,6 @@ import React, { FC, useState, createContext } from 'react';
 import * as hooks from './hooks';
 
 export const DataSourceContext = createContext(null);
-DataSourceContext.displayName = 'DataSourceContext';
 
 export const DatabaseConnectionProvider: FC = (props) => {
   const [dataSource, setDataSource] = useState(null);
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/CollectionFields.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/CollectionFields.tsx
index c2675e764..a1d68d5cf 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/CollectionFields.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/CollectionFields.tsx
@@ -33,7 +33,6 @@ const RemoteCollectionContext = createContext<{
   refreshRM: Function;
   titleField: string;
 }>({ refreshRM: () => {}, titleField: null, targetCollection: null });
-RemoteCollectionContext.displayName = 'RemoteCollectionContext';
 export const useRemoteCollectionContext = () => {
   return useContext(RemoteCollectionContext);
 };
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx
index fe1f6a297..78fd5373f 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx
@@ -4,41 +4,38 @@ import { debounce } from 'lodash';
 import React, { useState, useMemo, useEffect } from 'react';
 import { useRecord } from '@nocobase/client';
 
-export const FieldTitleInput = observer(
-  (props: any) => {
-    const { value, handleFieldChange } = props;
-    const record = useRecord();
-    const [titleValue, setTitleValue] = useState(value);
-    // 实时更新
-    const handleRealTimeChange = (newValue: string) => {
-      setTitleValue(newValue);
-    };
+export const FieldTitleInput = observer((props: any) => {
+  const { value, handleFieldChange } = props;
+  const record = useRecord();
+  const [titleValue, setTitleValue] = useState(value);
+  // 实时更新
+  const handleRealTimeChange = (newValue: string) => {
+    setTitleValue(newValue);
+  };
 
-    // 防抖操作
-    const debouncedHandleFieldChange = useMemo(() => {
-      return debounce((newTitle: string) => {
-        handleFieldChange(
-          {
-            uiSchema: {
-              ...record?.uiSchema,
-              title: newTitle,
-            },
+  // 防抖操作
+  const debouncedHandleFieldChange = useMemo(() => {
+    return debounce((newTitle: string) => {
+      handleFieldChange(
+        {
+          uiSchema: {
+            ...record?.uiSchema,
+            title: newTitle,
           },
-          record.name,
-        );
-      }, 1000);
-    }, [handleFieldChange, record]);
+        },
+        record.name,
+      );
+    }, 1000);
+  }, [handleFieldChange, record]);
 
-    // 统一处理函数,实时更新+防抖
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value;
-      handleRealTimeChange(newValue);
-      debouncedHandleFieldChange(newValue);
-    };
-    useEffect(() => {
-      setTitleValue(value);
-    }, [value]);
-    return <Input value={titleValue} onChange={handleChange} />;
-  },
-  { displayName: 'FieldTitleInput' },
-);
+  // 统一处理函数,实时更新+防抖
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    handleRealTimeChange(newValue);
+    debouncedHandleFieldChange(newValue);
+  };
+  useEffect(() => {
+    setTitleValue(value);
+  }, [value]);
+  return <Input value={titleValue} onChange={handleChange} />;
+});
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/DataSourceTable.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/DataSourceTable.tsx
index 8cdbdbcfb..714e25b7a 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/DataSourceTable.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/DataSourceTable.tsx
@@ -11,7 +11,6 @@ import { dataSourceSchema } from './schemas/dataSourceTable';
 import { PermissionProvider } from './PermisionProvider';
 
 const AvailableActionsContext = createContext([]);
-AvailableActionsContext.displayName = 'AvailableActionsContext';
 
 const AvailableActionsProver: React.FC = (props) => {
   const { data, loading } = useRequest<{
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/PermisionProvider.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/PermisionProvider.tsx
index dd09b1802..df6017936 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/PermisionProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/PermisionProvider.tsx
@@ -13,7 +13,6 @@ export const SettingCenterPermissionProvider = (props) => {
 };
 
 export const PermissionContext = createContext<any>(null);
-PermissionContext.displayName = 'PermissionContext';
 
 export const PermissionProvider = (props) => {
   const api = useAPIClient();
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/RolesResourcesActions.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/RolesResourcesActions.tsx
index 62c75d996..86917201e 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/RolesResourcesActions.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/RolesResourcesActions.tsx
@@ -23,7 +23,6 @@ const toActionMap = (arr: any[]) => {
 };
 
 export const RoleResourceCollectionContext = createContext<any>({});
-RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
 
 export const RolesResourcesActions = connect((props) => {
   const { styles } = useStyles();
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/ScopeSelect.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/ScopeSelect.tsx
index 036bfc0e7..aaa2c09d1 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/ScopeSelect.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/ScopeSelect.tsx
@@ -4,7 +4,6 @@ import { FormProvider, SchemaComponent, useRecord } from '@nocobase/client';
 import { getScopesSchema } from './schemas/scopes';
 
 const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
-RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
 
 const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
   const [keys, setKeys] = useState([]);
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/index.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/index.tsx
index 2c5de5344..30616a222 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/index.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/index.tsx
@@ -25,7 +25,6 @@ const schema2: ISchema = {
 };
 
 export const CurrentRolesContext = createContext<any>({} as any);
-CurrentRolesContext.displayName = 'CurrentRolesContext';
 
 export const DataSourcePermissionManager = ({ role }: any) => {
   return (
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartDataProvider.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartDataProvider.tsx
index 84b6665bc..c80b2a218 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartDataProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartDataProvider.tsx
@@ -12,7 +12,6 @@ export const ChartDataContext = createContext<{
   addChart: (uid: string, chart: ChartData) => void;
   removeChart: (uid: string) => void;
 }>({} as any);
-ChartDataContext.displayName = 'ChartDataContext';
 
 export const ChartDataProvider: React.FC = (props) => {
   const [charts, setCharts] = useState<{
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/configure/ChartConfigProvider.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/configure/ChartConfigProvider.tsx
index a18471a64..0202462e2 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/configure/ChartConfigProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/configure/ChartConfigProvider.tsx
@@ -24,7 +24,6 @@ export const ChartConfigContext = createContext<{
 }>({
   visible: true,
 });
-ChartConfigContext.displayName = 'ChartConfigContext';
 
 export const ChartConfigProvider: React.FC = (props) => {
   const { insertAdjacent } = useDesignable();
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx
index 5b40435a5..f7fe9acc2 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx
@@ -58,4 +58,3 @@ export const ChartFilterForm: React.FC = memo((props) => {
   useEffect(() => setForm(form), [form, setForm]);
   return <FormV2 {...props} form={form} />;
 });
-ChartFilterForm.displayName = 'ChartFilterForm';
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
index baa269873..85e37501e 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
@@ -29,14 +29,11 @@ import { lang, useChartsTranslation } from '../locale';
 import { getPropsSchemaByComponent } from './utils';
 const { Paragraph, Text } = Typography;
 
-const FieldComponentProps: React.FC = observer(
-  (props) => {
-    const form = useForm();
-    const schema = getPropsSchemaByComponent(form.values.component);
-    return schema ? <SchemaComponent schema={schema} {...props} /> : null;
-  },
-  { displayName: 'FieldComponentProps' },
-);
+const FieldComponentProps: React.FC = observer((props) => {
+  const form = useForm();
+  const schema = getPropsSchemaByComponent(form.values.component);
+  return schema ? <SchemaComponent schema={schema} {...props} /> : null;
+});
 
 const ErrorFallback = ({ error }) => {
   return (
@@ -225,7 +222,6 @@ export const ChartFilterCustomItemInitializer: React.FC<{
   }, [theme]);
   return <SchemaInitializerItem {...itemConfig} {...props} onClick={handleClick} />;
 });
-ChartFilterCustomItemInitializer.displayName = 'ChartFilterCustomItemInitializer';
 
 export const chartFilterItemInitializers: SchemaInitializer = new SchemaInitializer({
   name: 'ChartFilterItemInitializers',
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterProvider.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterProvider.tsx
index f4d602bd3..e5dfb294b 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterProvider.tsx
@@ -24,7 +24,6 @@ export const ChartFilterContext = createContext<{
   form: any;
   setForm: (form: any) => void;
 }>({} as any);
-ChartFilterContext.displayName = 'ChartFilterContext';
 
 export const ChartFilterProvider: React.FC = (props) => {
   const [ready, setReady] = useState(false);
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx
index 08d4aa1bb..61d018b5e 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx
@@ -66,7 +66,6 @@ export const ChartRendererContext = createContext<
     data?: any[];
   } & ChartRendererProps
 >({} as any);
-ChartRendererContext.displayName = 'ChartRendererContext';
 
 export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
   const { query, config, collection, transform, dataSource } = props;
diff --git a/packages/plugins/@nocobase/plugin-excel-formula-field/src/client/ExcelFormula/index.ts b/packages/plugins/@nocobase/plugin-excel-formula-field/src/client/ExcelFormula/index.ts
index 5ded81be6..31391e387 100644
--- a/packages/plugins/@nocobase/plugin-excel-formula-field/src/client/ExcelFormula/index.ts
+++ b/packages/plugins/@nocobase/plugin-excel-formula-field/src/client/ExcelFormula/index.ts
@@ -20,5 +20,3 @@ ExcelFormula.Expression = connect((props) => {
     evaluate,
   });
 });
-
-ExcelFormula.Expression.displayName = 'ExcelFormula.Expression';
diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockProvider.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockProvider.tsx
index 98dcdf334..037f8ffa0 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockProvider.tsx
@@ -9,7 +9,6 @@ import {
 } from '@nocobase/client';
 
 export const GanttBlockContext = createContext<any>({});
-GanttBlockContext.displayName = 'GanttBlockContext';
 
 const formatData = (
   data = [],
diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/task-gantt.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/task-gantt.tsx
index 24bafbbbf..d722bccb4 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/task-gantt.tsx
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/task-gantt.tsx
@@ -64,4 +64,3 @@ export const TaskGantt: React.FC<TaskGanttProps> = forwardRef(
     );
   },
 );
-TaskGantt.displayName = 'TaskGantt';
diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/context.ts b/packages/plugins/@nocobase/plugin-gantt/src/client/context.ts
index 71dbb24b7..4d7df9521 100644
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/context.ts
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/context.ts
@@ -2,6 +2,4 @@ import { createContext, useContext } from 'react';
 
 // export const GanttToolbarContext = createContext<any>(null);
 export const CalendarContext = createContext(null);
-CalendarContext.displayName = 'CalendarContext';
 export const DeleteEventContext = createContext(null);
-DeleteEventContext.displayName = 'DeleteEventContext';
diff --git a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx
index 7d6297fe4..bd54c12da 100644
--- a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx
+++ b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx
@@ -222,7 +222,6 @@ function optimizeEdge(edge) {
 }
 
 export const CollapsedContext = createContext<any>({});
-CollapsedContext.displayName = 'CollapsedContext';
 const formatNodeData = () => {
   const layoutNodes = [];
   const edges = targetGraph.getEdges();
@@ -505,7 +504,7 @@ export const GraphDrawPage = React.memo(() => {
         refWidth: 100,
         refHeight: 100,
       },
-      component: (props) => {
+      component: React.forwardRef((props, ref) => {
         return (
           <CurrentAppInfoContext.Provider value={currentAppInfo}>
             <DataSourceApplicationProvider dataSourceManager={dm} dataSource={dataSource?.key}>
@@ -528,7 +527,7 @@ export const GraphDrawPage = React.memo(() => {
             </DataSourceApplicationProvider>
           </CurrentAppInfoContext.Provider>
         );
-      },
+      }),
     });
     targetGraph.use(
       new Scroller({
@@ -1196,7 +1195,7 @@ export const GraphDrawPage = React.memo(() => {
                                 type: 'void',
                                 'x-component': 'Action',
                                 'x-component-props': {
-                                  component: () => {
+                                  component: forwardRef(() => {
                                     return (
                                       <Tooltip title={t('Auto layout')} getPopupContainer={getPopupContainer}>
                                         <Button
@@ -1208,7 +1207,7 @@ export const GraphDrawPage = React.memo(() => {
                                         </Button>
                                       </Tooltip>
                                     );
-                                  },
+                                  }),
                                   useAction: () => {
                                     return {
                                       run() {},
diff --git a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/CollectionNodeProvder.tsx b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/CollectionNodeProvder.tsx
index 23c0ffd57..a61c37340 100644
--- a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/CollectionNodeProvder.tsx
+++ b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/CollectionNodeProvder.tsx
@@ -7,7 +7,6 @@ interface CollectionNodeOptions {
   handelOpenPorts?: Function;
 }
 export const GraphCollectionContext = createContext(null);
-GraphCollectionContext.displayName = 'GraphCollectionContext';
 
 export const CollectionNodeProvder: React.FC<CollectionNodeOptions> = (props: any) => {
   const { record, setTargetNode, node, handelOpenPorts } = props;
diff --git a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx
index 8eed3429e..d0dbb4fbf 100644
--- a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx
+++ b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx
@@ -196,7 +196,7 @@ const OperationButton: any = React.memo((props: any) => {
     </div>
   );
 });
-OperationButton.displayName = 'OperationButton';
+
 const PopoverContent = React.forwardRef((props: any, ref) => {
   const { property, node, ...other } = props;
   const {
@@ -282,7 +282,6 @@ const PopoverContent = React.forwardRef((props: any, ref) => {
     </div>
   );
 });
-PopoverContent.displayName = 'PopoverContent';
 
 const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
   const {
diff --git a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/FullScreenAction.tsx b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/FullScreenAction.tsx
index 20f3f5e3a..d56a356d8 100644
--- a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/FullScreenAction.tsx
+++ b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/FullScreenAction.tsx
@@ -20,4 +20,3 @@ export const FullscreenAction = forwardRef(() => {
     </Tooltip>
   );
 });
-FullscreenAction.displayName = 'FullscreenAction';
diff --git a/packages/plugins/@nocobase/plugin-import/src/client/context.ts b/packages/plugins/@nocobase/plugin-import/src/client/context.ts
index 0bbdea1ae..3e41718c0 100644
--- a/packages/plugins/@nocobase/plugin-import/src/client/context.ts
+++ b/packages/plugins/@nocobase/plugin-import/src/client/context.ts
@@ -13,7 +13,6 @@ export interface ImportContextType {
 }
 
 export const ImportContext = createContext<ImportContextType>(null);
-ImportContext.displayName = 'ImportContext';
 
 export const useImportContext = () => {
   return useContext(ImportContext);
diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx b/packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx
index b5a59b6b7..806baaa70 100644
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx
@@ -14,7 +14,6 @@ import {
 import { toColumns } from './Kanban';
 
 export const KanbanBlockContext = createContext<any>({});
-KanbanBlockContext.displayName = 'KanbanBlockContext';
 
 const useGroupField = (props) => {
   const { getField } = useCollection_deprecated();
diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/board/Board.tsx b/packages/plugins/@nocobase/plugin-kanban/src/client/board/Board.tsx
index 03a8c2d06..cac2a91e8 100644
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/board/Board.tsx
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/board/Board.tsx
@@ -20,7 +20,6 @@ import withDroppable from './withDroppable';
 const Columns = forwardRef((props, ref: any) => (
   <div ref={ref} style={{ whiteSpace: 'nowrap', height: '100%', overflowY: 'clip' }} {...props} />
 ));
-Columns.displayName = 'Columns';
 
 const DroppableBoard = withDroppable(Columns);
 
diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/board/Column.tsx b/packages/plugins/@nocobase/plugin-kanban/src/client/board/Column.tsx
index fd28f6158..b91920794 100644
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/board/Column.tsx
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/board/Column.tsx
@@ -19,7 +19,6 @@ const ColumnEmptyPlaceholder = forwardRef(
     );
   },
 );
-ColumnEmptyPlaceholder.displayName = 'ColumnEmptyPlaceholder';
 
 const DroppableColumn = withDroppable(ColumnEmptyPlaceholder);
 
diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/board/withDroppable.tsx b/packages/plugins/@nocobase/plugin-kanban/src/client/board/withDroppable.tsx
index a79bded74..6d038d816 100644
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/board/withDroppable.tsx
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/board/withDroppable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Droppable } from 'react-beautiful-dnd';
 
 function withDroppable(Component) {
-  const res = function WrapperComponent({ children, ...droppableProps }) {
+  return function WrapperComponent({ children, ...droppableProps }) {
     return (
       <Droppable {...droppableProps}>
         {(provided) => (
@@ -14,8 +14,6 @@ function withDroppable(Component) {
       </Droppable>
     );
   };
-  res.displayName = `withDroppable(${Component.displayName || Component.name})`;
-  return res;
 }
 
 export default withDroppable;
diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/context.ts b/packages/plugins/@nocobase/plugin-kanban/src/client/context.ts
index 87b6f7452..0a3e8c3d8 100644
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/context.ts
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/context.ts
@@ -1,6 +1,4 @@
 import { createContext } from 'react';
 
 export const KanbanCardContext = createContext(null);
-KanbanCardContext.displayName = 'KanbanCardContext';
 export const KanbanColumnContext = createContext(null);
-KanbanColumnContext.displayName = 'KanbanColumnContext';
diff --git a/packages/plugins/@nocobase/plugin-logger/src/client/LogsDownloader.tsx b/packages/plugins/@nocobase/plugin-logger/src/client/LogsDownloader.tsx
index a91c9718a..f49cb00bd 100644
--- a/packages/plugins/@nocobase/plugin-logger/src/client/LogsDownloader.tsx
+++ b/packages/plugins/@nocobase/plugin-logger/src/client/LogsDownloader.tsx
@@ -32,7 +32,6 @@ const Tips = React.memo(() => {
     </Typography>
   );
 });
-Tips.displayName = 'Tips';
 
 export const LogsDownloader = React.memo((props) => {
   const { token } = theme.useToken();
@@ -215,4 +214,3 @@ export const LogsDownloader = React.memo((props) => {
     </Card>
   );
 });
-LogsDownloader.displayName = 'LogsDownloader';
diff --git a/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx b/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx
index 23de587cd..2a246cda0 100644
--- a/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx
@@ -3,7 +3,6 @@ import { BlockProvider, FixedBlockWrapper, SchemaComponentOptions, useBlockReque
 import React, { createContext, useContext, useState } from 'react';
 
 export const MapBlockContext = createContext<any>({});
-MapBlockContext.displayName = 'MapBlockContext';
 
 const InternalMapBlockProvider = (props) => {
   const { fieldNames } = props;
diff --git a/packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx b/packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx
index 7c4551ae7..0488e654d 100644
--- a/packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx
+++ b/packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx
@@ -473,4 +473,3 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
     </div>
   );
 });
-AMapComponent.displayName = 'AMapComponent';
diff --git a/packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Map.tsx b/packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Map.tsx
index ef6fd7473..c7ef457c5 100644
--- a/packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Map.tsx
+++ b/packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Map.tsx
@@ -478,4 +478,3 @@ export const GoogleMapsComponent = React.forwardRef<GoogleMapForwardedRefProps,
     );
   },
 );
-GoogleMapsComponent.displayName = 'GoogleMapsComponent';
diff --git a/packages/plugins/@nocobase/plugin-map/src/client/components/MapComponent.tsx b/packages/plugins/@nocobase/plugin-map/src/client/components/MapComponent.tsx
index 846f5d901..7376e49d2 100644
--- a/packages/plugins/@nocobase/plugin-map/src/client/components/MapComponent.tsx
+++ b/packages/plugins/@nocobase/plugin-map/src/client/components/MapComponent.tsx
@@ -21,4 +21,3 @@ export const MapComponent = React.forwardRef<any, any>((props, ref) => {
 
   return <Component ref={ref} {...props} />;
 });
-MapComponent.displayName = 'MapComponent';
diff --git a/packages/plugins/@nocobase/plugin-mobile-client/src/client/MobileClientProvider.tsx b/packages/plugins/@nocobase/plugin-mobile-client/src/client/MobileClientProvider.tsx
index e72464ed5..cfa30aa8b 100644
--- a/packages/plugins/@nocobase/plugin-mobile-client/src/client/MobileClientProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-mobile-client/src/client/MobileClientProvider.tsx
@@ -14,4 +14,3 @@ export const MobileClientProvider = React.memo((props) => {
 
   return <>{props.children}</>;
 });
-MobileClientProvider.displayName = 'MobileClientProvider';
diff --git a/packages/plugins/@nocobase/plugin-oidc/src/client/Options.tsx b/packages/plugins/@nocobase/plugin-oidc/src/client/Options.tsx
index a84b16979..cbc736807 100644
--- a/packages/plugins/@nocobase/plugin-oidc/src/client/Options.tsx
+++ b/packages/plugins/@nocobase/plugin-oidc/src/client/Options.tsx
@@ -324,28 +324,25 @@ const schema = {
   },
 };
 
-const Usage = observer(
-  () => {
-    const { t } = useOidcTranslation();
+const Usage = observer(() => {
+  const { t } = useOidcTranslation();
 
-    const { protocol, host } = window.location;
-    const url = `${protocol}//${host}/api/oidc:redirect`;
+  const { protocol, host } = window.location;
+  const url = `${protocol}//${host}/api/oidc:redirect`;
 
-    const copy = (text: string) => {
-      navigator.clipboard.writeText(text);
-      message.success(t('Copied'));
-    };
+  const copy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    message.success(t('Copied'));
+  };
 
-    return (
-      <Card title={t('Usage')} type="inner">
-        <FormItem label={t('Redirect URL')}>
-          <Input value={url} disabled={true} addonBefore={<CopyOutlined onClick={() => copy(url)} />} />
-        </FormItem>
-      </Card>
-    );
-  },
-  { displayName: 'Usage' },
-);
+  return (
+    <Card title={t('Usage')} type="inner">
+      <FormItem label={t('Redirect URL')}>
+        <Input value={url} disabled={true} addonBefore={<CopyOutlined onClick={() => copy(url)} />} />
+      </FormItem>
+    </Card>
+  );
+});
 
 export const Options = () => {
   const { t } = useOidcTranslation();
diff --git a/packages/plugins/@nocobase/plugin-saml/src/client/Options.tsx b/packages/plugins/@nocobase/plugin-saml/src/client/Options.tsx
index 5a938c574..7046bdf63 100644
--- a/packages/plugins/@nocobase/plugin-saml/src/client/Options.tsx
+++ b/packages/plugins/@nocobase/plugin-saml/src/client/Options.tsx
@@ -68,35 +68,32 @@ const schema = {
   },
 };
 
-const Usage = observer(
-  () => {
-    const form = useForm();
-    const record = useRecord();
-    const { t } = useSamlTranslation();
+const Usage = observer(() => {
+  const form = useForm();
+  const record = useRecord();
+  const { t } = useSamlTranslation();
 
-    const app = getSubAppName() || 'main';
-    const name = form.values.name ?? record.name;
-    const { protocol, host } = window.location;
-    const url = `${protocol}//${host}/api/saml:redirect?authenticator=${name}&__appName=${app}`;
+  const app = getSubAppName() || 'main';
+  const name = form.values.name ?? record.name;
+  const { protocol, host } = window.location;
+  const url = `${protocol}//${host}/api/saml:redirect?authenticator=${name}&__appName=${app}`;
 
-    const copy = (text: string) => {
-      navigator.clipboard.writeText(text);
-      message.success(t('Copied'));
-    };
+  const copy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    message.success(t('Copied'));
+  };
 
-    return (
-      <Card title={t('Usage')} type="inner">
-        <FormItem label={t('SP Issuer/EntityID')}>
-          <Input value={name} disabled={true} addonBefore={<CopyOutlined onClick={() => copy(name)} />} />
-        </FormItem>
-        <FormItem label={t('ACS URL')}>
-          <Input value={url} disabled={true} addonBefore={<CopyOutlined onClick={() => copy(url)} />} />
-        </FormItem>
-      </Card>
-    );
-  },
-  { displayName: 'Usage' },
-);
+  return (
+    <Card title={t('Usage')} type="inner">
+      <FormItem label={t('SP Issuer/EntityID')}>
+        <Input value={name} disabled={true} addonBefore={<CopyOutlined onClick={() => copy(name)} />} />
+      </FormItem>
+      <FormItem label={t('ACS URL')}>
+        <Input value={url} disabled={true} addonBefore={<CopyOutlined onClick={() => copy(url)} />} />
+      </FormItem>
+    </Card>
+  );
+});
 
 export const Options = () => {
   const { t } = useSamlTranslation();
diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/ThemeEditor.tsx b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/ThemeEditor.tsx
index 74d763ded..bbf67aaa0 100644
--- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/ThemeEditor.tsx
+++ b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/ThemeEditor.tsx
@@ -151,6 +151,5 @@ const ThemeEditor = forwardRef<ThemeEditorRef, ThemeEditorProps>(
     );
   },
 );
-ThemeEditor.displayName = 'ThemeEditor';
 
 export default ThemeEditor;
diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/components/ThemeListProvider.tsx b/packages/plugins/@nocobase/plugin-theme-editor/src/client/components/ThemeListProvider.tsx
index 8951840d0..3ce0e78a9 100644
--- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/components/ThemeListProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-theme-editor/src/client/components/ThemeListProvider.tsx
@@ -9,7 +9,6 @@ interface TData extends Pick<ReturnTypeOfUseRequest, 'data' | 'error' | 'run' |
 }
 
 const ThemeListContext = createContext<TData>(null);
-ThemeListContext.displayName = 'ThemeListContext';
 
 export const useThemeListContext = () => {
   return React.useContext(ThemeListContext);
diff --git a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx
index a429c146b..5f28daecc 100644
--- a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx
+++ b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx
@@ -410,7 +410,6 @@ function ActionBarProvider(props) {
 }
 
 const ManualActionStatusContext = createContext<number | null>(null);
-ManualActionStatusContext.displayName = 'ManualActionStatusContext';
 
 function ManualActionStatusProvider({ value, children }) {
   const { userJob, execution } = useFlowContext();