mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 23:36:15 +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.
*/
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 {
container: css`
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: ${token.colorBgLayout};
[componentCls]: {
position: 'absolute !important',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: token.colorBgLayout,
.mobile-page-content > .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn {
margin: 20px;
}
`,
'.mobile-page-content > .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn': {
margin: 20,
},
footer: css`
height: var(--nb-mobile-page-header-height);
padding-right: var(--nb-mobile-page-tabs-content-padding);
display: flex;
align-items: center;
justify-content: flex-end;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
z-index: 1000;
`,
};
'.nb-mobile-action-page-footer': {
height: 'var(--nb-mobile-page-header-height)',
paddingRight: 'var(--nb-mobile-page-tabs-content-padding)',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'white',
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 fieldSchema = useFieldSchema();
const ctx = useActionContext();
const { styles } = useMobileActionPageStyle();
const { componentCls, hashId } = useMobileActionPageStyle();
const tabContext = useTabsContext();
const containerDOM = useMemo(() => document.querySelector('.nb-mobile-subpages-slot'), []);
const { basicZIndex } = useBasicZIndex();
@ -59,12 +59,12 @@ export const MobileActionPage = ({ level, footerNodeName }) => {
const actionPageNode = (
<BasicZIndexProvider basicZIndex={newZIndex}>
<div className={styles.container} style={zIndexStyle}>
<div className={`${componentCls} ${hashId}`} style={zIndexStyle}>
<TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />} tabBarGutter={48}>
<SchemaComponent components={components} schema={fieldSchema} onlyRenderProperties />
</TabsContextProvider>
{footerSchema && (
<div className={styles.footer} style={zIndexStyle}>
<div className="nb-mobile-action-page-footer" style={zIndexStyle}>
<RecursionField
basePath={field.address}
schema={fieldSchema}