1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, { useState } from 'react';
import check from '@/components/Authorized/CheckPermissions';
import { matchRoutes, renderRoutes } from 'react-router-config';
import { Link } from 'react-router-dom';
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
import logo from '../assets/images/logo/panda-logo.svg';
import RightContent from '../components/GlobalHeader/RightContent';
import { BASENAME } from '@/utils/constants';
// const noMatch = (
// <Result
// status={403}
// title="403"
// subTitle="Sorry, you are not authorized to access this page."
// extra={<Button type="primary" />}
// />
// );
// eslint-disable-next-line no-unused-vars
const defaultFooterDom = (
<DefaultFooter
copyright={`${new Date().getFullYear()} 熊猫智慧水务技术委员会出品`}
links={false}
/>
);
const BasicLayout = props => {
/* eslint-disable no-unused-vars */
const [pathname, setPathname] = useState(`/${BASENAME}`);
const filterMenu = menuRoutes =>
menuRoutes
.map(route => {
const routeCopy = { ...route };
if (routeCopy.routes) routeCopy.routes = filterMenu(routeCopy.routes);
return routeCopy.hideMenu ||
(routeCopy.authority && !check(routeCopy.authority, true, false))
? null
: routeCopy;
})
.filter(Boolean);
const handleMenuCollapse = () => {}; // get children authority
matchRoutes(props.route.routes, props.location.pathname);
return (
<ProLayout
logo={() => (
<img src={logo} style={{ width: '32px', height: '32px' }} alt="" />
)}
style={{ height: '100vh' }}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => {}}
// footerRender={() => defaultFooterDom}
rightContentRender={() => <RightContent />}
title="熊猫运维平台"
fixedHeader
route={
{
// routes: config.routes,
}
}
location={{
pathname,
}}
menuDataRender={() => filterMenu(props.route.routes)}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
}
// console.log(menuItemProps);
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
itemRender={(route, params, routes, paths) => {
const first = false; // routes.indexOf(route) === 0;
return first ? (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
{...props}
>
{renderRoutes(props.route.routes)}
</ProLayout>
);
};
export default BasicLayout;