From d77e3f67986e772a283940735ae5a427b7fa5d54 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Wed, 30 Oct 2024 15:57:05 +0800
Subject: [PATCH] perf(MobilePageNavigationBar): improve style performance

---
 .../MobilePageNavigationBar.tsx               | 14 +++----
 .../header/navigation-bar/styles.ts           | 39 ++++++++++---------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/MobilePageNavigationBar.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/MobilePageNavigationBar.tsx
index 7848b1fcb2..b94ac7009d 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/MobilePageNavigationBar.tsx
+++ b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/MobilePageNavigationBar.tsx
@@ -7,27 +7,25 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { FC } from 'react';
-import { NavBar } from 'antd-mobile';
 import { RecursionField, useFieldSchema } from '@formily/react';
 import { cx, SchemaToolbarProvider } from '@nocobase/client';
+import { NavBar } from 'antd-mobile';
+import React, { FC } from 'react';
 
-import { useMobilePage } from '../../context';
 import { useMobileTitle } from '../../../../mobile-providers';
+import { useMobilePage } from '../../context';
 import { useStyles } from './styles';
 
 export const MobilePageNavigationBar: FC = () => {
   const { title } = useMobileTitle();
   const { displayNavigationBar = true, displayPageTitle = true } = useMobilePage();
   const fieldSchema = useFieldSchema();
-  const { styles } = useStyles();
+  const { componentCls, hashId } = useStyles();
+
   if (!displayNavigationBar) return null;
 
   return (
-    <div
-      className={cx('mobile-page-navigation-bar', styles.mobilePageNavigationBar)}
-      data-testid="mobile-page-navigation-bar"
-    >
+    <div className={cx('mobile-page-navigation-bar', componentCls, hashId)} data-testid="mobile-page-navigation-bar">
       <NavBar
         backArrow={false}
         back={null}
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/styles.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/styles.ts
index 599869ed6c..0f54a4308e 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/styles.ts
+++ b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/styles.ts
@@ -7,25 +7,28 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from 'antd-style';
+import { genStyleHook } from '@nocobase/client';
 
-export const useStyles = createStyles(() => ({
-  mobilePageNavigationBar: {
-    '.adm-nav-bar': {
-      maxWidth: '100%',
-      height: 49,
-      overflow: 'hidden',
+export const useStyles = genStyleHook('nb-mobile-page-navigation-bar', (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      '.adm-nav-bar': {
+        maxWidth: '100%',
+        height: 49,
+        overflow: 'hidden',
 
-      '.adm-nav-bar-left': {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-      },
-      '.adm-nav-bar-right': {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
+        '.adm-nav-bar-left': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+        },
+        '.adm-nav-bar-right': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+        },
       },
     },
-  },
-}));
+  };
+});