From 96450eab586af86a05671963aab5913846869180 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Wed, 30 Oct 2024 11:01:40 +0800
Subject: [PATCH] perf(ActionPage): improve style performance

---
 .../antd/action/Action.Page.style.ts          | 40 ++++++++++---------
 .../antd/action/Action.Page.tsx               |  4 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/action/Action.Page.style.ts b/packages/core/client/src/schema-component/antd/action/Action.Page.style.ts
index ff3b007be6..07e3c37525 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Page.style.ts
+++ b/packages/core/client/src/schema-component/antd/action/Action.Page.style.ts
@@ -7,27 +7,29 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from 'antd-style';
+import { genStyleHook } from '../__builtins__';
+
+export const useActionPageStyle = genStyleHook('nb-action-page', (token) => {
+  const { componentCls } = token;
 
-export const useActionPageStyle = createStyles(({ css, token }: any) => {
   return {
-    container: css`
-      position: absolute !important;
-      top: var(--nb-header-height);
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: ${token.colorBgLayout};
-      overflow: auto;
+    [componentCls]: {
+      position: 'absolute !important' as any,
+      top: 'var(--nb-header-height)',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: token.colorBgLayout,
+      overflow: 'auto',
 
-      .ant-tabs-nav {
-        background: ${token.colorBgContainer};
-        padding: 0 ${token.paddingPageVertical}px;
-        margin-bottom: 0;
-      }
-      .ant-tabs-content-holder {
-        padding: ${token.paddingPageVertical}px;
-      }
-    `,
+      '.ant-tabs-nav': {
+        background: token.colorBgContainer,
+        padding: `0 ${token.paddingPageVertical}px`,
+        marginBottom: 0,
+      },
+      '.ant-tabs-content-holder': {
+        padding: `${token.paddingPageVertical}px`,
+      },
+    },
   };
 });
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Page.tsx b/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
index 427accb25c..f0f09bd20c 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
@@ -21,7 +21,7 @@ export function ActionPage({ level }) {
   const filedSchema = useFieldSchema();
   const ctx = useActionContext();
   const { getContainerDOM } = usePopupOrSubpagesContainerDOM();
-  const { styles } = useActionPageStyle();
+  const { componentCls, hashId } = useActionPageStyle();
   const tabContext = useTabsContext();
   const parentZIndex = useZIndexContext();
 
@@ -36,7 +36,7 @@ export function ActionPage({ level }) {
   }
 
   const actionPageNode = (
-    <div className={styles.container} style={style}>
+    <div className={`${componentCls} ${hashId}`} style={style}>
       <TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />}>
         <zIndexContext.Provider value={style.zIndex}>
           <RecursionField schema={filedSchema} onlyRenderProperties />