mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 03:15:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(MobileActionPage): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 15:20:07 +08:00
parent e84fe5e23b
commit 0e7a85748f
2 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.style.ts
View File

@ -7,35 +7,37 @@
* For more information, please refer to: https://www.nocobase.com/agreement. * For more information, please refer to: https://www.nocobase.com/agreement.
*/ */
import { createStyles } from '@nocobase/client'; import { genStyleHook } from '@nocobase/client';
export const useMobileActionPageStyle = genStyleHook('nb-mobile-action-page', (token) => {
const { componentCls } = token;
export const useMobileActionPageStyle = createStyles(({ css, token }: any) => {
return { return {
container: css` [componentCls]: {
position: absolute !important; position: 'absolute !important',
top: 0; top: 0,
left: 0; left: 0,
right: 0; right: 0,
bottom: 0; bottom: 0,
background-color: ${token.colorBgLayout}; backgroundColor: token.colorBgLayout,
.mobile-page-content > .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn { '.mobile-page-content > .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn': {
margin: 20px; margin: 20,
} },
`,
footer: css` '.nb-mobile-action-page-footer': {
height: var(--nb-mobile-page-header-height); height: 'var(--nb-mobile-page-header-height)',
padding-right: var(--nb-mobile-page-tabs-content-padding); paddingRight: 'var(--nb-mobile-page-tabs-content-padding)',
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
justify-content: flex-end; justifyContent: 'flex-end',
position: fixed; position: 'fixed',
bottom: 0; bottom: 0,
left: 0; left: 0,
right: 0; right: 0,
background-color: white; backgroundColor: 'white',
z-index: 1000; zIndex: 1000,
`, },
}; },
} as any;
}); });

6
packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.tsx
View File

@ -31,7 +31,7 @@ export const MobileActionPage = ({ level, footerNodeName }) => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const ctx = useActionContext(); const ctx = useActionContext();
const { styles } = useMobileActionPageStyle(); const { componentCls, hashId } = useMobileActionPageStyle();
const tabContext = useTabsContext(); const tabContext = useTabsContext();
const containerDOM = useMemo(() => document.querySelector('.nb-mobile-subpages-slot'), []); const containerDOM = useMemo(() => document.querySelector('.nb-mobile-subpages-slot'), []);
const { basicZIndex } = useBasicZIndex(); const { basicZIndex } = useBasicZIndex();
@ -59,12 +59,12 @@ export const MobileActionPage = ({ level, footerNodeName }) => {
const actionPageNode = ( const actionPageNode = (
<BasicZIndexProvider basicZIndex={newZIndex}> <BasicZIndexProvider basicZIndex={newZIndex}>
<div className={styles.container} style={zIndexStyle}> <div className={`${componentCls} ${hashId}`} style={zIndexStyle}>
<TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />} tabBarGutter={48}> <TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />} tabBarGutter={48}>
<SchemaComponent components={components} schema={fieldSchema} onlyRenderProperties /> <SchemaComponent components={components} schema={fieldSchema} onlyRenderProperties />
</TabsContextProvider> </TabsContextProvider>
{footerSchema && ( {footerSchema && (
<div className={styles.footer} style={zIndexStyle}> <div className="nb-mobile-action-page-footer" style={zIndexStyle}>
<RecursionField <RecursionField
basePath={field.address} basePath={field.address}
schema={fieldSchema} schema={fieldSchema}