|
|
@ -1,10 +1,11 @@ |
|
|
import SelectLang from '@/components/SelectLang'; |
|
|
import SelectLang from '@/components/SelectLang'; |
|
|
import GlobalFooter from '@/components/GlobalFooter'; |
|
|
import GlobalFooter from '@/components/GlobalFooter'; |
|
|
import { ConnectProps } from '@/models/connect'; |
|
|
import { ConnectProps, ConnectState } from '@/models/connect'; |
|
|
|
|
|
import { connect } from 'dva'; |
|
|
import { Icon } from 'antd'; |
|
|
import { Icon } from 'antd'; |
|
|
import React, { Component, Fragment } from 'react'; |
|
|
import React from 'react'; |
|
|
import DocumentTitle from 'react-document-title'; |
|
|
import DocumentTitle from 'react-document-title'; |
|
|
import { formatMessage } from 'umi-plugin-locale'; |
|
|
import { formatMessage } from 'umi-plugin-react/locale'; |
|
|
import Link from 'umi/link'; |
|
|
import Link from 'umi/link'; |
|
|
import logo from '../assets/logo.svg'; |
|
|
import logo from '../assets/logo.svg'; |
|
|
import styles from './UserLayout.less'; |
|
|
import styles from './UserLayout.less'; |
|
|
@ -29,55 +30,61 @@ const links = [ |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
const copyright = ( |
|
|
const copyright = ( |
|
|
<Fragment> |
|
|
<> |
|
|
Copyright <Icon type="copyright" /> 2019 蚂蚁金服体验技术部出品 |
|
|
Copyright <Icon type="copyright" /> 2019 蚂蚁金服体验技术部出品 |
|
|
</Fragment> |
|
|
</> |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
export interface UserLayoutProps extends ConnectProps { |
|
|
export interface UserLayoutProps extends ConnectProps { |
|
|
breadcrumbNameMap: { [path: string]: MenuDataItem }; |
|
|
breadcrumbNameMap: { [path: string]: MenuDataItem }; |
|
|
navTheme: string; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
class UserLayout extends Component<UserLayoutProps> { |
|
|
const UserLayout: React.SFC<UserLayoutProps> = props => { |
|
|
render() { |
|
|
const { |
|
|
const { |
|
|
route = { |
|
|
route = { |
|
|
routes: [], |
|
|
routes: [], |
|
|
}, |
|
|
}, |
|
|
} = props; |
|
|
} = this.props; |
|
|
const { routes = [] } = route; |
|
|
const { routes = [] } = route; |
|
|
const { |
|
|
const { children, location } = this.props; |
|
|
children, |
|
|
const { breadcrumb } = getMenuData(routes, this.props); |
|
|
location = { |
|
|
return ( |
|
|
pathname: '', |
|
|
<DocumentTitle |
|
|
}, |
|
|
title={getPageTitle({ |
|
|
} = props; |
|
|
pathname: location!.pathname, |
|
|
const { breadcrumb } = getMenuData(routes, props); |
|
|
breadcrumb, |
|
|
|
|
|
formatMessage, |
|
|
return ( |
|
|
})} |
|
|
<DocumentTitle |
|
|
> |
|
|
title={getPageTitle({ |
|
|
<div className={styles.container}> |
|
|
pathname: location.pathname, |
|
|
<div className={styles.lang}> |
|
|
breadcrumb, |
|
|
<SelectLang /> |
|
|
formatMessage, |
|
|
</div> |
|
|
...props, |
|
|
<div className={styles.content}> |
|
|
})} |
|
|
<div className={styles.top}> |
|
|
> |
|
|
<div className={styles.header}> |
|
|
<div className={styles.container}> |
|
|
<Link to="/"> |
|
|
<div className={styles.lang}> |
|
|
<img alt="logo" className={styles.logo} src={logo} /> |
|
|
<SelectLang /> |
|
|
<span className={styles.title}>Ant Design</span> |
|
|
</div> |
|
|
</Link> |
|
|
<div className={styles.content}> |
|
|
</div> |
|
|
<div className={styles.top}> |
|
|
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div> |
|
|
<div className={styles.header}> |
|
|
|
|
|
<Link to="/"> |
|
|
|
|
|
<img alt="logo" className={styles.logo} src={logo} /> |
|
|
|
|
|
<span className={styles.title}>Ant Design</span> |
|
|
|
|
|
</Link> |
|
|
</div> |
|
|
</div> |
|
|
{children} |
|
|
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div> |
|
|
</div> |
|
|
</div> |
|
|
<GlobalFooter links={links} copyright={copyright} /> |
|
|
{children} |
|
|
</div> |
|
|
</div> |
|
|
</DocumentTitle> |
|
|
<GlobalFooter links={links} copyright={copyright} /> |
|
|
); |
|
|
</div> |
|
|
} |
|
|
</DocumentTitle> |
|
|
} |
|
|
); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
export default UserLayout; |
|
|
export default connect(({ settings }: ConnectState) => ({ |
|
|
|
|
|
...settings, |
|
|
|
|
|
}))(UserLayout); |
|
|
|