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

perf(ActionPage): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 11:01:40 +08:00
parent aa41d3bfcc
commit 96450eab58
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/core/client/src/schema-component/antd/action/Action.Page.style.ts
View File

@ -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`,
},
},
};
});

4
packages/core/client/src/schema-component/antd/action/Action.Page.tsx
View File

@ -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 />