123 lines
2.9 KiB
TypeScript
123 lines
2.9 KiB
TypeScript
/** @format */
|
|
|
|
import {
|
|
GithubFilled,
|
|
InfoCircleFilled,
|
|
LogoutOutlined,
|
|
QuestionCircleFilled,
|
|
} from "@ant-design/icons";
|
|
import {
|
|
DefaultFooter,
|
|
PageContainer,
|
|
ProCard,
|
|
ProLayout,
|
|
} from "@ant-design/pro-components";
|
|
import { Link, Outlet, useLocation } from "react-router-dom";
|
|
import logo from "@/assets/images/logo.png";
|
|
import { Suspense } from "react";
|
|
import { Dropdown } from "antd";
|
|
import settings from "@/views/Main/settings.tsx";
|
|
// import { getUserMenuPermission } from "@/api/user";
|
|
|
|
export default function Layout() {
|
|
const location = useLocation();
|
|
return (
|
|
<div
|
|
id="pro-layout"
|
|
style={{
|
|
height: "100vh",
|
|
}}>
|
|
<ProLayout
|
|
logo={logo}
|
|
layout={"mix"}
|
|
pure={false}
|
|
loading={false}
|
|
contentWidth={"Fluid"}
|
|
title={"五味子云存储"}
|
|
siderWidth={216}
|
|
menuItemRender={(menuItemProps, defaultDom) => {
|
|
if (menuItemProps.isUrl || !menuItemProps.path) {
|
|
return defaultDom;
|
|
}
|
|
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
|
|
}}
|
|
{...settings}
|
|
menu={{
|
|
// request: async () => {
|
|
// const res: any = await getUserMenuPermission("17");
|
|
// return res.data.routes;
|
|
// },
|
|
type: "group",
|
|
defaultOpenAll: false,
|
|
hideMenuWhenCollapsed: false,
|
|
collapsedShowTitle: false,
|
|
}}
|
|
disableMobile={false}
|
|
location={{
|
|
pathname: location.pathname,
|
|
}}
|
|
avatarProps={{
|
|
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
|
title: "七妮妮",
|
|
size: "large",
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-expect-error
|
|
render: (props, dom) => {
|
|
return (
|
|
<Dropdown
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: "logout",
|
|
icon: <LogoutOutlined />,
|
|
label: "退出登录",
|
|
},
|
|
],
|
|
}}>
|
|
{dom}
|
|
</Dropdown>
|
|
);
|
|
},
|
|
}}
|
|
actionsRender={(props: any) => {
|
|
// eslint-disable-next-line react/prop-types
|
|
if (props.isMobile) return [];
|
|
return [
|
|
<InfoCircleFilled key="InfoCircleFilled" />,
|
|
<QuestionCircleFilled key="QuestionCircleFilled" />,
|
|
<GithubFilled key="GithubFilled" />,
|
|
];
|
|
}}
|
|
breadcrumbRender={(routers = []) => [
|
|
{
|
|
path: "/main/home",
|
|
title: "主页",
|
|
},
|
|
...routers,
|
|
]}
|
|
footerRender={() => (
|
|
<DefaultFooter
|
|
links={[
|
|
{
|
|
key: "schisandra",
|
|
title: "schisandra",
|
|
href: "https://landaiqing.cn",
|
|
},
|
|
]}
|
|
copyright="2024"
|
|
/>
|
|
)}>
|
|
<PageContainer title={false}>
|
|
<ProCard>
|
|
<div>
|
|
<Suspense>
|
|
<Outlet />
|
|
</Suspense>
|
|
</div>
|
|
</ProCard>
|
|
</PageContainer>
|
|
</ProLayout>
|
|
</div>
|
|
);
|
|
}
|