diff --git a/config/router.config.js b/config/router.config.js index 733d90138c97215a22f07e262cfffefb85382f64..840fe8334989fc4035947800767869c881018621 100644 --- a/config/router.config.js +++ b/config/router.config.js @@ -5,9 +5,13 @@ export default [ component: '../layouts/UserLayout', routes: [ { path: '/user', redirect: '/user/login' }, - { path: '/user/login', component: './User/Login' }, - { path: '/user/register', component: './User/Register' }, - { path: '/user/register-result', component: './User/RegisterResult' }, + { path: '/user/login', name: 'login', component: './User/Login' }, + { path: '/user/register', name: 'register', component: './User/Register' }, + { + path: '/user/register-result', + name: 'register.result', + component: './User/RegisterResult', + }, ], }, // app diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index c992fb2bd7557042c6c8d50c11328954ade3b17f..338968764205ff7caed5c6042f0e5c459f237e5d 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -1,14 +1,11 @@ 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'; @@ -17,8 +14,7 @@ import Context from './MenuContext'; import Exception403 from '../pages/Exception/403'; import PageLoading from '@/components/PageLoading'; import SiderMenu from '@/components/SiderMenu'; -import { menu, title } from '../defaultSettings'; - +import getPageTitle from '@/utils/getPageTitle'; import styles from './BasicLayout.less'; // lazy load SettingDrawer @@ -52,12 +48,6 @@ const query = { }; class BasicLayout extends React.Component { - constructor(props) { - super(props); - this.getPageTitle = memoizeOne(this.getPageTitle); - this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual); - } - componentDidMount() { const { dispatch, @@ -83,11 +73,6 @@ class BasicLayout extends React.Component { }; } - matchParamsPath = (pathname, breadcrumbNameMap) => { - const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname)); - return breadcrumbNameMap[pathKey]; - }; - getRouteAuthority = (pathname, routeData) => { const routes = routeData.slice(); // clone @@ -111,22 +96,6 @@ class BasicLayout extends React.Component { return getAuthority(routes, pathname); }; - getPageTitle = (pathname, breadcrumbNameMap) => { - const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap); - - if (!currRouterData) { - return title; - } - const pageName = menu.disableLocal - ? currRouterData.name - : 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) { @@ -206,7 +175,7 @@ class BasicLayout extends React.Component { ); return ( - + {params => ( diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js index 112c61c0060372f76648ba0f1bbdc2945801a4ce..18fb176e26e9af4b08b34e52d23e69c03b19688a 100644 --- a/src/layouts/UserLayout.js +++ b/src/layouts/UserLayout.js @@ -1,11 +1,14 @@ -import React, { Fragment } from 'react'; +import React, { Component, Fragment } from 'react'; import { formatMessage } from 'umi/locale'; +import { connect } from 'dva'; import Link from 'umi/link'; import { Icon } from 'antd'; import GlobalFooter from '@/components/GlobalFooter'; +import DocumentTitle from 'react-document-title'; import SelectLang from '@/components/SelectLang'; import styles from './UserLayout.less'; import logo from '../assets/logo.svg'; +import getPageTitle from '@/utils/getPageTitle'; const links = [ { @@ -31,26 +34,50 @@ const copyright = ( ); -const UserLayout = ({ children }) => ( - // @TODO -
-
- -
-
-
-
- - logo - Ant Design - +class UserLayout extends Component { + componentDidMount() { + const { + dispatch, + route: { routes, authority }, + } = this.props; + dispatch({ + type: 'menu/getMenuData', + payload: { routes, authority }, + }); + } + + render() { + const { + children, + location: { pathname }, + breadcrumbNameMap, + } = this.props; + return ( + +
+
+ +
+
+
+
+ + logo + Ant Design + +
+
Ant Design 是西湖区最具影响力的 Web 设计规范
+
+ {children} +
+
-
Ant Design 是西湖区最具影响力的 Web 设计规范
-
- {children} -
- -
-); + + ); + } +} -export default UserLayout; +export default connect(({ menu: menuModel }) => ({ + menuData: menuModel.menuData, + breadcrumbNameMap: menuModel.breadcrumbNameMap, +}))(UserLayout); diff --git a/src/locales/en-US/menu.js b/src/locales/en-US/menu.js index 3102a60030db2fba1905354de3d1891d1794a72e..056c255eca4bffa91f1e11706ec92d2b4b96cdc7 100644 --- a/src/locales/en-US/menu.js +++ b/src/locales/en-US/menu.js @@ -1,5 +1,8 @@ export default { 'menu.home': 'Home', + 'menu.login': 'Login', + 'menu.register': 'Register', + 'menu.register.result': 'Register Result', 'menu.dashboard': 'Dashboard', 'menu.dashboard.analysis': 'Analysis', 'menu.dashboard.monitor': 'Monitor', diff --git a/src/locales/pt-BR/menu.js b/src/locales/pt-BR/menu.js index 257ab0c2fd70cf76979655e7c4f2231f4eaf183d..77ee7fd7e37cbd51ee043f2ebb472e1b097faa5c 100644 --- a/src/locales/pt-BR/menu.js +++ b/src/locales/pt-BR/menu.js @@ -1,5 +1,8 @@ export default { 'menu.home': 'Início', + 'menu.login': 'Login', + 'menu.register': 'Registro', + 'menu.register.result': 'Resultado de registro', 'menu.dashboard': 'Dashboard', 'menu.dashboard.analysis': 'Análise', 'menu.dashboard.monitor': 'Monitor', diff --git a/src/locales/zh-CN/menu.js b/src/locales/zh-CN/menu.js index 1383b43ff3ab6c0ad173d967da8386299efe00c6..5657c6e056a8f8dc5bff5fc964246b43a1070e70 100644 --- a/src/locales/zh-CN/menu.js +++ b/src/locales/zh-CN/menu.js @@ -1,5 +1,8 @@ export default { 'menu.home': '首页', + 'menu.login': '登录', + 'menu.register': '注册', + 'menu.register.result': '注册结果', 'menu.dashboard': 'Dashboard', 'menu.dashboard.analysis': '分析页', 'menu.dashboard.monitor': '监控页', diff --git a/src/locales/zh-TW/menu.js b/src/locales/zh-TW/menu.js index 66831e0b8a3155e222b8b1124712675ae076e415..7bd71a7a7ca8ae5698968a7f1f0d8a8d4dc7c19c 100644 --- a/src/locales/zh-TW/menu.js +++ b/src/locales/zh-TW/menu.js @@ -1,5 +1,8 @@ export default { 'menu.home': '首頁', + 'menu.login': '登錄', + 'menu.register': '註冊', + 'menu.register.resultt': '註冊結果', 'menu.dashboard': 'Dashboard', 'menu.dashboard.analysis': '分析頁', 'menu.dashboard.monitor': '監控頁', diff --git a/src/pages/User/Login.less b/src/pages/User/Login.less index 8eba81cfb506a2d11f2f37b16832b2eaa86ccca2..341929421afc9249cc44a1024baa006680c28bd0 100644 --- a/src/pages/User/Login.less +++ b/src/pages/User/Login.less @@ -1,7 +1,7 @@ @import '~antd/lib/style/themes/default.less'; .main { - width: 368px; + width: 388px; margin: 0 auto; @media screen and (max-width: @screen-sm) { width: 95%; diff --git a/src/pages/User/Register.less b/src/pages/User/Register.less index c6d5b77c202386b477bdb8e4d8f19454f2142b85..c7e225290b6a6e1458404c4d41524ffd48b2af5c 100644 --- a/src/pages/User/Register.less +++ b/src/pages/User/Register.less @@ -1,7 +1,7 @@ @import '~antd/lib/style/themes/default.less'; .main { - width: 368px; + width: 388px; margin: 0 auto; :global { diff --git a/src/utils/getPageTitle.js b/src/utils/getPageTitle.js new file mode 100644 index 0000000000000000000000000000000000000000..09e69c32c9f89447075b45eb6147039c3d18c998 --- /dev/null +++ b/src/utils/getPageTitle.js @@ -0,0 +1,26 @@ +import { formatMessage } from 'umi/locale'; +import pathToRegexp from 'path-to-regexp'; +import isEqual from 'lodash/isEqual'; +import memoizeOne from 'memoize-one'; +import { menu, title } from '../defaultSettings'; + +export const matchParamsPath = (pathname, breadcrumbNameMap) => { + const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname)); + return breadcrumbNameMap[pathKey]; +}; +const getPageTitle = (pathname, breadcrumbNameMap) => { + const currRouterData = matchParamsPath(pathname, breadcrumbNameMap); + if (!currRouterData) { + return title; + } + const pageName = menu.disableLocal + ? currRouterData.name + : formatMessage({ + id: currRouterData.locale || currRouterData.name, + defaultMessage: currRouterData.name, + }); + + return `${pageName} - ${title}`; +}; + +export default memoizeOne(getPageTitle, isEqual);