85 lines
2.7 KiB
TypeScript
85 lines
2.7 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>
|
|
)}
|
|
<Layout>
|
|
<Content style={{padding: themeConfig.bodyPadding}}>
|
|
<Outlet/>
|
|
</Content>
|
|
<FooterRender/>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
const LayoutRender = () => (
|
|
<LayoutProvider>
|
|
<LayoutContent />
|
|
</LayoutProvider>
|
|
);
|
|
|
|
export default LayoutRender;
|