perf(MobileTabBar): improve style performance

packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/MobileTabBar.tsx

@@ -14,7 +14,7 @@ import React, { FC, useCallback } from 'react';
 import { useMobileRoutes } from '../../mobile-providers';
 import { useStyles } from './styles';
 
-import { css, cx, DndContext, DndContextProps, SchemaComponent, useDesignable } from '@nocobase/client';
+import { cx, DndContext, DndContextProps, SchemaComponent, useDesignable } from '@nocobase/client';
 import { isInnerLink } from '../../utils';
 import { MobileTabBarInitializer } from './initializer';
 import { getMobileTabBarItemSchema, MobileTabBarItem } from './MobileTabBar.Item';
@@ -32,7 +32,7 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
   Page: typeof MobileTabBarPage;
   Link: typeof MobileTabBarLink;
 } = ({ enableTabBar = true }) => {
-  const { styles } = useStyles();
+  const { componentCls, hashId } = useStyles();
   const { designable } = useDesignable();
   const { routeList, activeTabBarItem, resource, refresh } = useMobileRoutes();
   const validRouteList = routeList.filter((item) => item.schemaUid || isInnerLink(item.options?.url));
@@ -61,19 +61,14 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
   // 判断内页的方法：没有激活的 activeTabBarItem 并且 routeList 中有数据
   if (!activeTabBarItem && validRouteList.length > 0) return null;
   return (
-    <div className={cx(styles.mobileTabBar, 'mobile-tab-bar')} data-testid="mobile-tab-bar">
-      <div className={styles.mobileTabBarContent}>
+    <div className={cx(componentCls, hashId, 'mobile-tab-bar')} data-testid="mobile-tab-bar">
+      <div className="mobile-tab-bar-content">
         <DndContext onDragEnd={handleDragEnd}>
           <div
-            className={cx(
-              styles.mobileTabBarList,
-              css({
-                maxWidth: designable ? 'calc(100% - 58px)' : '100%',
-                // '.nb-block-item': {
-                //   maxWidth: `${100 / routeList.length}%`,
-                // },
-              }),
-            )}
+            className="mobile-tab-bar-list"
+            style={{
+              maxWidth: designable ? 'calc(100% - 58px)' : '100%',
+            }}
           >
             {routeList.map((item) => {
               return <SchemaComponent key={item.id} schema={getMobileTabBarItemSchema(item)} />;

packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts

@@ -7,50 +7,56 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from 'antd-style';
+import { genStyleHook } from '@nocobase/client';
 import { NavigationBarHeight } from '../../constants';
 
-export const useStyles = createStyles(() => ({
-  mobileTabBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: NavigationBarHeight,
-    boxSizing: 'border-box',
-    borderTop: '1px solid var(--adm-color-border)',
-    backgroundColor: 'var(--adm-color-background)',
-  },
-  mobileTabBarContent: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1em',
-    height: '100%',
-  },
-  mobileTabBarList: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    flex: 1,
-    alignItems: 'center',
-    overflowX: 'auto',
-    '.adm-tab-bar-item': {
-      maxWidth: '100%',
-      '.adm-tab-bar-item-title': {
-        maxWidth: '100%',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
+export const useStyles = genStyleHook('nb-mobile-tab-bar', (token) => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: NavigationBarHeight,
+      boxSizing: 'border-box',
+      borderTop: '1px solid var(--adm-color-border)',
+      backgroundColor: 'var(--adm-color-background)',
+
+      '.mobile-tab-bar-content': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: '1em',
+        height: '100%',
+      },
+
+      '.mobile-tab-bar-list': {
+        display: 'flex',
+        justifyContent: 'space-around',
+        flex: 1,
+        alignItems: 'center',
+        overflowX: 'auto',
+        '.adm-tab-bar-item': {
+          maxWidth: '100%',
+          '.adm-tab-bar-item-title': {
+            maxWidth: '100%',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+          },
+        },
+        '&>div': {
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        '.ant-btn-icon': {
+          marginInlineEnd: '0 !important',
+        },
       },
     },
-    '&>div': {
-      flex: 1,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    '.ant-btn-icon': {
-      marginInlineEnd: '0 !important',
-    },
-  },
-}));
+  };
+});