|
|
@@ -1,22 +1,17 @@
|
|
|
import React, { Suspense } from 'react';
|
|
|
import { Layout } from 'antd';
|
|
|
import DocumentTitle from 'react-document-title';
|
|
|
-import isEqual from 'lodash/isEqual';
|
|
|
-import memoizeOne from 'memoize-one';
|
|
|
import { connect } from 'dva';
|
|
|
import { ContainerQuery } from 'react-container-query';
|
|
|
import classNames from 'classnames';
|
|
|
-import pathToRegexp from 'path-to-regexp';
|
|
|
import Media from 'react-media';
|
|
|
-import { formatMessage } from 'umi/locale';
|
|
|
-import Authorized from '@/utils/Authorized';
|
|
|
import logo from '../assets/logo.svg';
|
|
|
import Footer from './Footer';
|
|
|
import Header from './Header';
|
|
|
import Context from './MenuContext';
|
|
|
import PageLoading from '@/components/PageLoading';
|
|
|
import SiderMenu from '@/components/SiderMenu';
|
|
|
-import { title } from '../defaultSettings';
|
|
|
+import getPageTitle from '@/utils/getPageTitle';
|
|
|
import styles from './BasicLayout.less';
|
|
|
|
|
|
// lazy load SettingDrawer
|
|
|
@@ -49,13 +44,7 @@ const query = {
|
|
|
},
|
|
|
};
|
|
|
|
|
|
-class BasicLayout extends React.PureComponent {
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.getPageTitle = memoizeOne(this.getPageTitle);
|
|
|
- this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
|
|
|
- }
|
|
|
-
|
|
|
+class BasicLayout extends React.Component {
|
|
|
componentDidMount() {
|
|
|
const {
|
|
|
dispatch,
|
|
|
@@ -73,15 +62,6 @@ class BasicLayout extends React.PureComponent {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- componentDidUpdate(preProps) {
|
|
|
- // After changing to phone mode,
|
|
|
- // if collapsed is true, you need to click twice to display
|
|
|
- const { collapsed, isMobile } = this.props;
|
|
|
- if (isMobile && !preProps.isMobile && !collapsed) {
|
|
|
- this.handleMenuCollapse(false);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
getContext() {
|
|
|
const { location, breadcrumbNameMap } = this.props;
|
|
|
return {
|
|
|
@@ -90,41 +70,6 @@ class BasicLayout extends React.PureComponent {
|
|
|
};
|
|
|
}
|
|
|
|
|
|
- matchParamsPath = (pathname, breadcrumbNameMap) => {
|
|
|
- const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
|
|
|
- return breadcrumbNameMap[pathKey];
|
|
|
- };
|
|
|
-
|
|
|
- getRouterAuthority = (pathname, routeData) => {
|
|
|
- let routeAuthority = ['noAuthority'];
|
|
|
- const getAuthority = (key, routes) => {
|
|
|
- routes.forEach(route => {
|
|
|
- if (route.path && pathToRegexp(route.path).test(key)) {
|
|
|
- routeAuthority = route.authority;
|
|
|
- } else if (route.routes) {
|
|
|
- routeAuthority = getAuthority(key, route.routes);
|
|
|
- }
|
|
|
- return route;
|
|
|
- });
|
|
|
- return routeAuthority;
|
|
|
- };
|
|
|
- return getAuthority(pathname, routeData);
|
|
|
- };
|
|
|
-
|
|
|
- getPageTitle = (pathname, breadcrumbNameMap) => {
|
|
|
- const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
|
|
|
-
|
|
|
- if (!currRouterData) {
|
|
|
- return title;
|
|
|
- }
|
|
|
- const pageName = formatMessage({
|
|
|
- id: currRouterData.locale || currRouterData.name,
|
|
|
- defaultMessage: currRouterData.name,
|
|
|
- });
|
|
|
-
|
|
|
- return `${pageName} - ${title}`;
|
|
|
- };
|
|
|
-
|
|
|
getLayoutStyle = () => {
|
|
|
const { fixSiderbar, isMobile, collapsed, layout } = this.props;
|
|
|
if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
|
|
|
@@ -161,12 +106,10 @@ class BasicLayout extends React.PureComponent {
|
|
|
isMobile,
|
|
|
menuData,
|
|
|
breadcrumbNameMap,
|
|
|
- route: { routes },
|
|
|
fixedHeader,
|
|
|
} = this.props;
|
|
|
|
|
|
const isTop = PropsLayout === 'topmenu';
|
|
|
- const routerConfig = this.getRouterAuthority(pathname, routes);
|
|
|
const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
|
|
|
const layout = (
|
|
|
<Layout>
|
|
|
@@ -194,9 +137,7 @@ class BasicLayout extends React.PureComponent {
|
|
|
{...this.props}
|
|
|
/>
|
|
|
<Content className={styles.content} style={contentStyle}>
|
|
|
- <Authorized authority={routerConfig} noMatch={<p>Exception403</p>}>
|
|
|
- {children}
|
|
|
- </Authorized>
|
|
|
+ {children}
|
|
|
</Content>
|
|
|
<Footer />
|
|
|
</Layout>
|
|
|
@@ -204,7 +145,7 @@ class BasicLayout extends React.PureComponent {
|
|
|
);
|
|
|
return (
|
|
|
<React.Fragment>
|
|
|
- <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>
|
|
|
+ <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
|
|
|
<ContainerQuery query={query}>
|
|
|
{params => (
|
|
|
<Context.Provider value={this.getContext()}>
|
|
|
@@ -219,11 +160,11 @@ class BasicLayout extends React.PureComponent {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default connect(({ global, setting, menu }) => ({
|
|
|
+export default connect(({ global, setting, menu: menuModel }) => ({
|
|
|
collapsed: global.collapsed,
|
|
|
layout: setting.layout,
|
|
|
- menuData: menu.menuData,
|
|
|
- breadcrumbNameMap: menu.breadcrumbNameMap,
|
|
|
+ menuData: menuModel.menuData,
|
|
|
+ breadcrumbNameMap: menuModel.breadcrumbNameMap,
|
|
|
...setting,
|
|
|
}))(props => (
|
|
|
<Media query="(max-width: 599px)">
|