From 69c0af7745f1b60f954031f9d1d51876aae71161 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Wed, 30 Oct 2024 15:33:18 +0800 Subject: [PATCH] perf(MobileTabsForMobileActionPage): improve style performance --- .../MobileTabsForMobileActionPage.style.ts | 46 ------------- .../MobileTabsForMobileActionPage.tsx | 12 ++-- .../header/tabs/MobilePageTabs.tsx | 6 +- .../pages/dynamic-page/header/tabs/styles.ts | 68 ++++++++++++++----- 4 files changed, 60 insertions(+), 72 deletions(-) delete mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts deleted file mode 100644 index 15ff80290c..0000000000 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { createStyles } from '@nocobase/client'; - -export const useMobileTabsForMobileActionPageStyle = createStyles(({ css, token }: any) => { - return { - container: css` - cursor: pointer; - text-align: right; - flex: 1; - padding-right: var(--nb-mobile-page-tabs-content-padding); - - .ant-btn { - width: 32px; - height: 32px; - padding: 0; - } - - .ant-btn > span { - display: none; - } - - span.ant-btn-icon { - display: inline-block; - font-size: 16px; - margin: 0 !important; - } - `, - - backButton: css` - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - height: 50px; - width: 50px; - `, - }; -}); diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx index ce6b10cbde..78853cebe3 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx @@ -28,7 +28,6 @@ import { MobilePageHeader } from '../../pages/dynamic-page'; import { MobilePageContentContainer } from '../../pages/dynamic-page/content/MobilePageContentContainer'; import { useStyles } from '../../pages/dynamic-page/header/tabs'; import { hideDivider } from '../hideDivider'; -import { useMobileTabsForMobileActionPageStyle } from './MobileTabsForMobileActionPage.style'; export const MobileTabsForMobileActionPage: any = observer( (props) => { @@ -36,8 +35,7 @@ export const MobileTabsForMobileActionPage: any = observer( const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']); const { activeKey: _activeKey, onChange: _onChange } = useTabsContext() || {}; const [activeKey, setActiveKey] = useState(_activeKey); - const { styles } = useStyles(); - const { styles: mobileTabsForMobileActionPageStyle } = useMobileTabsForMobileActionPageStyle(); + const { componentCls, hashId } = useStyles(); const { goBack } = useBackButton(); const keyToTabRef = useRef({}); @@ -81,16 +79,16 @@ export const MobileTabsForMobileActionPage: any = observer( return ( <> -
-
+
+
- + {items} -
{render()}
+
{render()}
{tabContent} diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx index b3ee591ead..2f7d8560b3 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx @@ -23,7 +23,7 @@ export const MobilePageTabs: FC = () => { const { displayTabs = false } = useMobilePage(); const navigate = useNavigate(); - const { styles } = useStyles(); + const { componentCls, hashId } = useStyles(); const { tabSchemaUid } = useParams<{ tabSchemaUid: string }>(); const [activeKey, setActiveKey] = React.useState(() => { return tabSchemaUid || activeTabBarItem?.children?.[0]?.schemaUid; @@ -52,9 +52,9 @@ export const MobilePageTabs: FC = () => { if (!displayTabs) return null; return ( -
+
- + {activeTabBarItem.children?.map((item) => ( ({ - mobilePageTabs: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - }, - mobilePageTabsList: { - '.adm-tabs-header': { - borderBottomWidth: 0, - }, +export const useStyles = genStyleHook('nb-mobile-tabs-for-mobile-action-page', (token) => { + const { componentCls } = token; + return { + [componentCls]: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', - '.adm-tabs-tab': { - height: 49, - padding: '10px 0 10px', + '.nb-mobile-page-tabs-list': { + '.adm-tabs-header': { + borderBottomWidth: 0, + }, + + '.adm-tabs-tab': { + height: 49, + padding: '10px 0 10px', + }, + }, + + '.nb-mobile-page-tabs-button': { + cursor: 'pointer', + textAlign: 'right', + flex: 1, + paddingRight: 'var(--nb-mobile-page-tabs-content-padding)', + + '.ant-btn': { + width: 32, + height: 32, + padding: 0, + }, + + '.ant-btn > span': { + display: 'none', + }, + + 'span.ant-btn-icon': { + display: 'inline-block', + fontSize: 16, + margin: '0 !important', + }, + }, + + '.nb-mobile-page-tabs-back-button': { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: 24, + height: 50, + width: 50, + }, }, - }, -})); + }; +});