perf(InternalSchemaToolbar): improve style performance

packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx

@@ -216,9 +216,8 @@ const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
     ...props,
     ...(fieldSchema?.['x-toolbar-props'] || {}),
   } as SchemaToolbarProps;
-  const { designable } = useDesignable();
   const compile = useCompile();
-  const { styles } = useStyles();
+  const { componentCls, hashId } = useStyles();
   const { t } = useTranslation();
   const { getAriaLabel } = useGetAriaLabelOfDesigner();
   const dm = useDataSourceManager();
@@ -229,8 +228,9 @@ const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
   const titleArr = useMemo(() => {
     if (!title) return undefined;
     if (typeof title === 'string') return [compile(title)];
-    if (Array.isArray(title)) return title.map((item) => compile(item));
+    if (Array.isArray(title)) return compile(title);
-  }, [compile, title]);
+  }, [title]);
+
   const { render: schemaSettingsRender, exists: schemaSettingsExists } = useSchemaSettingsRender(
     settings || fieldSchema?.['x-settings'],
     fieldSchema?.['x-settings-props'],
@@ -282,9 +282,7 @@ const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
   const settingsElement = useMemo(() => {
     return settings !== false && schemaSettingsExists ? schemaSettingsRender() : null;
   }, [schemaSettingsExists, schemaSettingsRender, settings]);
-
   const toolbarRef = useRef<HTMLDivElement>(null);
-
   useEffect(() => {
     const toolbarElement = toolbarRef.current;
     let parentElement = toolbarElement?.parentElement;
@@ -314,38 +312,33 @@ const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
 
     parentElement.addEventListener('mouseenter', show);
     parentElement.addEventListener('mouseleave', hide);
-
     return () => {
       parentElement.removeEventListener('mouseenter', show);
       parentElement.removeEventListener('mouseleave', hide);
     };
   }, []);
 
-  if (!designable) {
-    return null;
-  }
-
   return (
     <div
       ref={toolbarRef}
-      className={classNames(styles.toolbar, toolbarClassName, 'schema-toolbar')}
+      className={classNames(componentCls, hashId, toolbarClassName, 'schema-toolbar')}
       style={{ border: showBorder ? 'auto' : 0, background: showBackground ? 'auto' : 0, ...toolbarStyle }}
     >
       {titleArr && (
-        <div className={styles.toolbarTitle}>
+        <div className={'toolbar-title'}>
           <Space size={2}>
-            <span key={titleArr[0]} className={styles.toolbarTitleTag}>
+            <span key={titleArr[0]} className={'toolbar-title-tag'}>
               {dataSource ? `${compile(dataSource?.displayName)} > ${titleArr[0]}` : titleArr[0]}
             </span>
             {titleArr[1] && (
-              <span className={styles.toolbarTitleTag}>
+              <span className={'toolbar-title-tag'}>
                 {`${t('Reference template')}: ${`${titleArr[1]}` || t('Untitled')}`}
               </span>
             )}
           </Space>
         </div>
       )}
-      <div className={classNames(styles.toolbarIcons, spaceWrapperClassName)} style={spaceWrapperStyle}>
+      <div className={classNames('toolbar-icons', spaceWrapperClassName)} style={spaceWrapperStyle}>
         <Space size={3} align={'center'} className={spaceClassName} style={spaceStyle}>
           {dragElement}
           {initializerElement}

packages/core/client/src/schema-settings/styles.ts

@@ -7,11 +7,13 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from 'antd-style';
+import { genStyleHook } from '../schema-component/antd/__builtins__/style';
+
+export const useStyles = genStyleHook('nb-schema-toolbar', (token) => {
+  const { componentCls } = token;
 
-export const useStyles = createStyles(() => {
   return {
-    toolbar: {
+    [componentCls]: {
       position: 'absolute',
       zIndex: 999,
       display: 'none',
@@ -26,8 +28,8 @@ export const useStyles = createStyles(() => {
       '.ant-space-item .anticon': {
         margin: 0,
       },
-    },
+
-    toolbarTitle: {
+      '.toolbar-title': {
         pointerEvents: 'none',
         position: 'absolute',
         fontSize: 12,
@@ -39,14 +41,14 @@ export const useStyles = createStyles(() => {
         top: 2,
         left: 2,
       },
-    toolbarTitleTag: {
+      '.toolbar-title-tag': {
         padding: '0 3px',
         borderRadius: 2,
         background: 'var(--colorSettings)',
         color: '#fff',
         display: 'block',
       },
-    toolbarIcons: {
+      '.toolbar-icons': {
         position: 'absolute',
         right: '2px',
         top: '2px',
@@ -61,5 +63,6 @@ export const useStyles = createStyles(() => {
           alignSelf: 'stretch',
         },
       },
+    },
   };
 });