chen.lin
昨天 7e5973a3061989a976e2c19ef588bb2f34f29cf4
rsf-admin/src/layout/index.jsx
@@ -1,13 +1,58 @@
import { Layout as RALayout, CheckForApplicationUpdate } from "react-admin";
import { createPortal } from 'react-dom';
import { Layout as RALayout, CheckForApplicationUpdate, useSidebarState } from "react-admin";
import AppBar from './AppBar';
import { MyMenu } from './MyMenu'
import { MyMenu } from './MyMenu';
import TabsBar from './TabsBar';
import { Box } from '@mui/material';
const LayoutContent = ({ children }) => {
  const [sidebarIsOpen] = useSidebarState();
  const sidebarWidth = sidebarIsOpen ? 200 : 50;
  const tabsBarEl = (
    <Box sx={{
      position: 'fixed',
      top: 48,
      left: sidebarWidth + 5,
      right: 0,
      zIndex: 1400, // 高于 Dialog/Modal(1300),通过 Portal 挂到 body 才能盖住弹窗
      transition: (theme) =>
        theme.transitions.create('left', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
    }}>
      <TabsBar />
    </Box>
  );
  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',
          transition: (theme) =>
            theme.transitions.create(['left', 'width'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
            }),
        }
      }}
    >
      {createPortal(tabsBarEl, document.body)}
      {children}
      <CheckForApplicationUpdate />
    </RALayout>
  );
};
export const Layout = ({ children }) => (
  <RALayout
    appBar={AppBar}
    menu={MyMenu}
  >
    {children}
    <CheckForApplicationUpdate />
  </RALayout>
  <LayoutContent>{children}</LayoutContent>
);