import { Layout as RALayout, CheckForApplicationUpdate, useSidebarState } from "react-admin";
|
import { AliveScope } from 'react-activation';
|
import AppBar from './AppBar';
|
import { MyMenu } from './MyMenu';
|
import TabsBar from './TabsBar';
|
import KeepAliveWrapper from './KeepAliveWrapper';
|
import { Box } from '@mui/material';
|
|
const LayoutContent = ({ children }) => {
|
const [sidebarIsOpen] = useSidebarState();
|
const sidebarWidth = sidebarIsOpen ? 200 : 50;
|
|
return (
|
<RALayout
|
appBar={AppBar}
|
menu={MyMenu}
|
sx={{
|
'& .RaLayout-content': {
|
position: 'absolute',
|
left: `${sidebarWidth}px`,
|
overflowY: 'auto',
|
width: `calc(100% - ${sidebarWidth}px)`,
|
height: 'calc(100% - 86px)', // 减去TabsBar的高度 (50px AppBar + 36px TabsBar)
|
top: '86px',
|
// 优化过渡动画：缩短时间，使用更平滑的 easing
|
transition: 'left 150ms ease-out, width 150ms ease-out',
|
willChange: 'left, width', // GPU 加速
|
}
|
}}
|
>
|
<Box sx={{
|
position: 'fixed',
|
top: 48,
|
left: sidebarWidth + 5,
|
right: 0,
|
zIndex: 1100,
|
// 优化过渡动画
|
transition: 'left 150ms ease-out',
|
willChange: 'left', // GPU 加速
|
}}>
|
<TabsBar />
|
</Box>
|
<KeepAliveWrapper>{children}</KeepAliveWrapper>
|
<CheckForApplicationUpdate />
|
</RALayout>
|
);
|
};
|
|
export const Layout = ({ children }) => (
|
<AliveScope max={10}>
|
<LayoutContent>{children}</LayoutContent>
|
</AliveScope>
|
);
|
