From 16d9370d99c012c470097b0b966f4795ad375bd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 19 Feb 2019 12:10:52 +0800 Subject: [PATCH] Login title (#3564) * Added document title to UserLayout by identifying the current route object and using its name kaey to set the title * Adjusment to document title * feat: use same getPageTile function --- config/router.config.js | 10 +++-- src/layouts/BasicLayout.js | 35 +----------------- src/layouts/UserLayout.js | 71 +++++++++++++++++++++++++----------- src/locales/en-US/menu.js | 3 ++ src/locales/pt-BR/menu.js | 3 ++ src/locales/zh-CN/menu.js | 3 ++ src/locales/zh-TW/menu.js | 3 ++ src/pages/User/Login.less | 2 +- src/pages/User/Register.less | 2 +- src/utils/getPageTitle.js | 26 +++++++++++++ 10 files changed, 98 insertions(+), 60 deletions(-) create mode 100644 src/utils/getPageTitle.js diff --git a/config/router.config.js b/config/router.config.js index 733d9013..840fe833 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 c992fb2b..33896876 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 112c61c0..18fb176e 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 3102a600..056c255e 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 257ab0c2..77ee7fd7 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 1383b43f..5657c6e0 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 66831e0b..7bd71a7a 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 8eba81cf..34192942 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 c6d5b77c..c7e22529 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 00000000..09e69c32 --- /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); -- GitLab