87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import useGlobalStore from "@/stores/global";
|
||
import {Layout} from "antd";
|
||
import HeaderRender from "@/layout/HeaderRender";
|
||
import FooterRender from "@/layout/FooterRender";
|
||
import MenuRender from "@/layout/MenuRender";
|
||
import MobileDrawerMenu from "@/layout/MobileDrawerMenu";
|
||
import SettingDrawer from "@/layout/SettingDrawer";
|
||
import PageTitle from "@/components/PageTitle";
|
||
import {LayoutProvider, useLayoutContext} from "@/layout/LayoutContext";
|
||
import {Outlet} from "react-router";
|
||
import useMobile from "@/hooks/useMobile.ts";
|
||
import ColumnsMenu from "@/layout/ColumnsMenu.tsx";
|
||
import React, {useEffect, useState} from "react";
|
||
|
||
const {Content, Sider} = Layout;
|
||
|
||
const LayoutContent: React.FC = () => {
|
||
const isMobile = useMobile();
|
||
const themeConfig = useGlobalStore(state => state.themeConfig);
|
||
const layout = useGlobalStore(state => state.layout);
|
||
const [siderWidth, setSiderWidth] = useState<number>(226);
|
||
const {menus, collapsed, parentKey} = useLayoutContext();
|
||
|
||
useEffect(() => {
|
||
const menuWidth = themeConfig.siderWeight ? themeConfig.siderWeight : 226;
|
||
const columnWidth = layout === 'columns' ? 79 : 0;
|
||
const rule = menus.find(item => item.key === parentKey);
|
||
if(['mix', 'columns'].includes(layout)) {
|
||
if(rule?.children && rule?.children.length) {
|
||
setSiderWidth(columnWidth + menuWidth)
|
||
} else {
|
||
setSiderWidth(columnWidth);
|
||
}
|
||
} else {
|
||
setSiderWidth(menuWidth);
|
||
}
|
||
}, [themeConfig, layout, menus, parentKey]);
|
||
|
||
return (
|
||
<Layout className="min-h-screen" style={{ background: themeConfig.background }}>
|
||
{/* 页面标题 */}
|
||
<PageTitle />
|
||
{/* 主题设置抽屉 */}
|
||
<SettingDrawer />
|
||
{/* 顶栏 */}
|
||
<HeaderRender />
|
||
{/* 移动端抽屉菜单 */}
|
||
{ isMobile && <MobileDrawerMenu /> }
|
||
{/* 内容区域 */}
|
||
<Layout hasSider className={"relative"}>
|
||
{ layout !== "top" && !isMobile && (
|
||
<Sider
|
||
collapsed={collapsed}
|
||
width={siderWidth}
|
||
style={{
|
||
borderRight: "1px solid " + themeConfig.colorBorder,
|
||
height: `calc(100vh - ${themeConfig.headerHeight}px)`,
|
||
top: themeConfig.headerHeight,
|
||
overflowY: "auto",
|
||
overflowX: "hidden",
|
||
position: 'sticky'
|
||
}}
|
||
>
|
||
{ layout === "columns" ? <ColumnsMenu/> : <MenuRender />}
|
||
</Sider>
|
||
)}
|
||
{/* min-w-0：flex 子项默认 min-width:auto 会被宽表格撑破，
|
||
归零后内容区宽度收敛到视口，表格自身的横向滚动才生效 */}
|
||
<Layout className="min-w-0">
|
||
<Content style={{padding: themeConfig.bodyPadding}}>
|
||
<Outlet/>
|
||
</Content>
|
||
<FooterRender/>
|
||
</Layout>
|
||
</Layout>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
const LayoutRender = () => (
|
||
<LayoutProvider>
|
||
<LayoutContent />
|
||
</LayoutProvider>
|
||
);
|
||
|
||
export default LayoutRender;
|