UserLayout.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import React, { Fragment } from 'react';
  2. import { Link, Redirect, Switch, Route } from 'dva/router';
  3. import DocumentTitle from 'react-document-title';
  4. import { Icon } from 'antd';
  5. import GlobalFooter from '../components/GlobalFooter';
  6. import styles from './UserLayout.less';
  7. import logo from '../assets/logo.svg';
  8. import { getRoutes, getPageQuery, getQueryPath } from '../utils/utils';
  9. const links = [
  10. {
  11. key: 'help',
  12. title: '帮助',
  13. href: '',
  14. },
  15. {
  16. key: 'privacy',
  17. title: '隐私',
  18. href: '',
  19. },
  20. {
  21. key: 'terms',
  22. title: '条款',
  23. href: '',
  24. },
  25. ];
  26. const copyright = (
  27. <Fragment>
  28. Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
  29. </Fragment>
  30. );
  31. function getLoginPathWithRedirectPath() {
  32. const params = getPageQuery();
  33. const { redirect } = params;
  34. return getQueryPath('/user/login', {
  35. redirect,
  36. });
  37. }
  38. class UserLayout extends React.PureComponent {
  39. getPageTitle() {
  40. const { routerData, location } = this.props;
  41. const { pathname } = location;
  42. let title = 'Ant Design Pro';
  43. if (routerData[pathname] && routerData[pathname].name) {
  44. title = `${routerData[pathname].name} - Ant Design Pro`;
  45. }
  46. return title;
  47. }
  48. render() {
  49. const { routerData, match } = this.props;
  50. return (
  51. <DocumentTitle title={this.getPageTitle()}>
  52. <div className={styles.container}>
  53. <div className={styles.content}>
  54. <div className={styles.top}>
  55. <div className={styles.header}>
  56. <Link to="/">
  57. <img alt="logo" className={styles.logo} src={logo} />
  58. <span className={styles.title}>Ant Design</span>
  59. </Link>
  60. </div>
  61. <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
  62. </div>
  63. <Switch>
  64. {getRoutes(match.path, routerData).map(item => (
  65. <Route
  66. key={item.key}
  67. path={item.path}
  68. component={item.component}
  69. exact={item.exact}
  70. />
  71. ))}
  72. <Redirect from="/user" to={getLoginPathWithRedirectPath()} />
  73. </Switch>
  74. </div>
  75. <GlobalFooter links={links} copyright={copyright} />
  76. </div>
  77. </DocumentTitle>
  78. );
  79. }
  80. }
  81. export default UserLayout;