#页面持久化

zhou zhou

9 小时以前 4220dbfd495b2ec179c5d7f22531f3bbd80b2525

 rsf-admin/src/layout/index.jsx

@@ -1,7 +1,9 @@
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 }) => {
@@ -20,35 +22,32 @@
          width: `calc(100% - ${sidebarWidth}px)`,
          height: 'calc(100% - 86px)', // 减去TabsBar的高度 (50px AppBar + 36px TabsBar)
          top: '86px',
          transition: (theme) =>
            theme.transitions.create(['left', 'width'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
            }),
          // 优化过渡动画：缩短时间，使用更平滑的 easing
          transition: 'left 150ms ease-out, width 150ms ease-out',
          willChange: 'left, width', // GPU 加速
        }
      }}
    >
      <Box sx={{
        position: 'fixed',
        top: 48,
        // left: 0,
        left: sidebarWidth + 5,
        right: 0,
        zIndex: 1100,
        transition: (theme) =>
          theme.transitions.create('left', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        // 优化过渡动画
        transition: 'left 150ms ease-out',
        willChange: 'left', // GPU 加速
      }}>
        <TabsBar />
      </Box>
      {children}
      <KeepAliveWrapper>{children}</KeepAliveWrapper>
      <CheckForApplicationUpdate />
    </RALayout>
  );
};

export const Layout = ({ children }) => (
  <LayoutContent>{children}</LayoutContent>
  <AliveScope max={10}>
    <LayoutContent>{children}</LayoutContent>
  </AliveScope>
);