From 57c9820e4e8fccbcb2857c3dbf3dad09268f59bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sun, 15 Jul 2018 00:38:51 +0800 Subject: [PATCH] Optimization: Remove the use router.js and menu.js --- config/config.js | 176 ++++++++++++----- src/common/menu.js | 283 +++------------------------ src/components/SiderMenu/BaseMenu.js | 3 +- src/locales/en-US.js | 7 +- src/locales/zh-CN.js | 7 +- src/pages/document.ejs | 2 + src/pages/layouts/BasicLayout.js | 15 +- src/pages/layouts/LoadingPage.js | 26 ++- 8 files changed, 196 insertions(+), 323 deletions(-) diff --git a/config/config.js b/config/config.js index e7c3f194..50583880 100644 --- a/config/config.js +++ b/config/config.js @@ -48,75 +48,147 @@ export default { routes: [ // dashboard { path: '/', redirect: '/dashboard/analysis' }, - { path: '/dashboard/analysis', component: './Dashboard/Analysis' }, - { path: '/dashboard/monitor', component: './Dashboard/Monitor' }, - { path: '/dashboard/workplace', component: './Dashboard/Workplace' }, - + { + path: '/dashboard', + name: 'dashboard', + icon: 'dashboard', + routes: [ + { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' }, + { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' }, + { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' }, + ], + }, // forms - { path: '/form/basic-form', component: './Forms/BasicForm' }, { - path: '/form/step-form', - component: './Forms/StepForm', + path: '/form', + icon: 'form', + name: 'form', routes: [ - { path: '/form/step-form', redirect: '/form/step-form/info' }, - { path: '/form/step-form/info', component: './Forms/StepForm/Step1' }, - { path: '/form/step-form/confirm', component: './Forms/StepForm/Step2' }, - { path: '/form/step-form/result', component: './Forms/StepForm/Step3' }, + { path: '/form/basic-form', name: 'basicform', component: './Forms/BasicForm' }, + { + name: 'stepform', + path: '/form/step-form', + component: './Forms/StepForm', + hideChildren: true, + routes: [ + { path: '/form/step-form/info', name: 'info', component: './Forms/StepForm/Step1' }, + { + path: '/form/step-form/confirm', + name: 'confirm', + component: './Forms/StepForm/Step2', + }, + { + path: '/form/step-form/result', + name: 'result', + component: './Forms/StepForm/Step3', + }, + ], + }, + { + path: '/form/advanced-form', + name: 'advancedform', + component: './Forms/AdvancedForm', + }, ], }, - { path: '/form/advanced-form', component: './Forms/AdvancedForm' }, - // list - { path: '/list/table-list', component: './List/TableList' }, - { path: '/list/table-list', component: './List/TableList' }, - { path: '/list/basic-list', component: './List/BasicList' }, - { path: '/list/card-list', component: './List/CardList' }, { - path: '/list/search', - component: './List/List', + path: '/list', + icon: 'table', + name: 'list', routes: [ - { path: '/list/search', redirect: '/list/search/projects' }, - { path: '/list/search/articles', component: './List/Articles' }, - { path: '/list/search/projects', component: './List/Projects' }, - { path: '/list/search/applications', component: './List/Applications' }, + { path: '/list/table-list', name: 'searchlist', component: './List/TableList' }, + { path: '/list/basic-list', name: 'basiclist', component: './List/BasicList' }, + { path: '/list/card-list', name: 'cardlist', component: './List/CardList' }, + { + path: '/list/search', + name: 'searchlist', + component: './List/List', + routes: [ + { path: '/list/search/articles', name: 'articles', component: './List/Articles' }, + { path: '/list/search/projects', name: 'projects', component: './List/Projects' }, + { + path: '/list/search/applications', + name: 'applications', + component: './List/Applications', + }, + ], + }, ], }, - - // profile - { path: '/profile/basic', component: './Profile/BasicProfile' }, - { path: '/profile/advanced', component: './Profile/AdvancedProfile' }, - - // result - { path: '/result/success', component: './Result/Success' }, - { path: '/result/fail', component: './Result/Error' }, - - // exception - { path: '/exception/403', component: './Exception/403' }, - { path: '/exception/404', component: './Exception/404' }, - { path: '/exception/500', component: './Exception/500' }, - { path: '/exception/trigger', component: './Exception/triggerException' }, - // account { - path: '/account/center', - component: './Account/Center/Center', + path: '/profile', + name: 'profile', + icon: 'profile', routes: [ - { path: '/account/center', redirect: '/account/center/articles' }, - { path: '/account/center/articles', component: './Account/Center/Articles' }, - { path: '/account/center/applications', component: './Account/Center/Applications' }, - { path: '/account/center/projects', component: './Account/Center/Projects' }, + // profile + { path: '/profile/basic', name: 'basic', component: './Profile/BasicProfile' }, + { path: '/profile/advanced', name: 'advanced', component: './Profile/AdvancedProfile' }, ], }, { - path: '/account/settings', - component: './Account/Settings/Info', + name: 'result', + icon: 'check-circle-o', + path: '/result', routes: [ - { path: '/account/settings', redirect: '/account/settings/base' }, - { path: '/account/settings/base', component: './Account/Settings/BaseView' }, - { path: '/account/settings/security', component: './Account/Settings/SecurityView' }, - { path: '/account/settings/binding', component: './Account/Settings/BindingView' }, + // result + { path: '/result/success', name: 'success', component: './Result/Success' }, + { path: '/result/fail', name: 'fail', component: './Result/Error' }, + ], + }, + { + name: 'exception', + icon: 'warning', + path: '/exception', + routes: [ + // exception + { path: '/exception/403', name: 'not-permission', component: './Exception/403' }, + { path: '/exception/404', name: 'not-find', component: './Exception/404' }, + { path: '/exception/500', name: 'server-error', component: './Exception/500' }, + { + path: '/exception/trigger', + name: 'trigger', + hideInMenu: true, + component: './Exception/triggerException', + }, + ], + }, + { + name: 'account', + icon: 'user', + path: '/account', + routes: [ + { + path: '/account/center', + name: 'center', + component: './Account/Center/Center', + routes: [ + { path: '/account/center', redirect: '/account/center/articles' }, + { path: '/account/center/articles', component: './Account/Center/Articles' }, + { + path: '/account/center/applications', + component: './Account/Center/Applications', + }, + { path: '/account/center/projects', component: './Account/Center/Projects' }, + ], + }, { - path: '/account/settings/notification', - component: './Account/Settings/NotificationView', + path: '/account/settings', + name: 'settings', + component: './Account/Settings/Info', + routes: [ + { path: '/account/settings', redirect: '/account/settings/base' }, + { path: '/account/settings/base', component: './Account/Settings/BaseView' }, + { + path: '/account/settings/security', + component: './Account/Settings/SecurityView', + }, + { path: '/account/settings/binding', component: './Account/Settings/BindingView' }, + { + path: '/account/settings/notification', + component: './Account/Settings/NotificationView', + }, + ], }, ], }, diff --git a/src/common/menu.js b/src/common/menu.js index 35af176a..bccbae72 100644 --- a/src/common/menu.js +++ b/src/common/menu.js @@ -1,6 +1,4 @@ -// TODO:remove -// import { isUrl } from '../utils/utils'; - +// // TODO: authority // const menuData = [ // { // name: 'dashboard', @@ -8,15 +6,15 @@ // path: 'dashboard', // children: [ // { -// name: '分析页', +// name: 'analysis', // path: 'analysis', // }, // { -// name: '监控页', +// name: 'monitor', // path: 'monitor', // }, // { -// name: '工作台', +// name: 'workplace', // path: 'workplace', // // hideInBreadcrumb: true, // // hideInMenu: true, @@ -24,56 +22,57 @@ // ], // }, // { -// name: '表单页', +// name: 'form', // icon: 'form', // path: 'form', // children: [ // { -// name: '基础表单', +// name: 'basicform', // path: 'basic-form', // }, // { -// name: '分步表单', +// name: 'stepform', // path: 'step-form', // }, // { -// name: '高级表单', +// // authority: 'admin', +// name: 'advancedform', // authority: 'admin', // path: 'advanced-form', // }, // ], // }, // { -// name: '列表页', +// name: 'list', // icon: 'table', // path: 'list', // children: [ // { -// name: '查询表格', +// name: 'searchlist', // path: 'table-list', // }, // { -// name: '标准列表', +// name: 'basiclist', // path: 'basic-list', // }, // { -// name: '卡片列表', +// name: 'cardlist', // path: 'card-list', // }, // { -// name: '搜索列表', +// name: 'searchlist', // path: 'search', // children: [ // { -// name: '搜索列表（文章）', +// name: 'articles', // path: 'articles', // }, // { -// name: '搜索列表（项目）', +// name: 'projects', // path: 'projects', // }, // { -// name: '搜索列表（应用）', +// name: 'applications', // path: 'applications', // }, // ], @@ -81,291 +80,73 @@ // ], // }, // { -// name: '详情页', +// name: 'profile', // icon: 'profile', // path: 'profile', // children: [ // { -// name: '基础详情页', +// name: 'basic', // path: 'basic', // }, // { -// name: '高级详情页', +// name: 'advanced', // path: 'advanced', -// authority: 'admin', +// // authority: 'admin', // }, // ], // }, // { -// name: '结果页', +// name: 'result', // icon: 'check-circle-o', // path: 'result', // children: [ // { -// name: '成功', +// name: 'success', // path: 'success', // }, // { -// name: '失败', +// name: 'fail', // path: 'fail', // }, // ], // }, // { -// name: '异常页', +// name: 'exception', // icon: 'warning', // path: 'exception', // children: [ // { -// name: '403', +// name: 'not-permission', // path: '403', // }, // { -// name: '404', +// name: 'not-find', // path: '404', // }, // { -// name: '500', +// name: 'server-error', // path: '500', // }, // { -// name: '触发异常', +// name: 'trigger', // path: 'trigger', // hideInMenu: true, // }, // ], // }, // { -// name: '账户', -// icon: 'user', -// path: 'user', -// authority: 'guest', -// children: [ -// { -// name: '登录', -// path: 'login', -// }, -// { -// name: '注册', -// path: 'register', -// }, -// { -// name: '注册结果', -// path: 'register-result', -// }, -// ], -// }, -// { -// name: '个人页', +// name: 'account', // icon: 'user', // path: 'account', // children: [ // { -// name: '个人中心', +// name: 'center', // path: 'center', // }, // { -// name: '个人设置', +// name: 'settings', // path: 'settings', // }, // ], // }, // ]; - -// function formatter(data, parentPath = '/', parentAuthority) { -// return data.map(item => { -// let { path } = item; -// if (!isUrl(path)) { -// path = parentPath + item.path; -// } -// const result = { -// ...item, -// path, -// authority: item.authority || parentAuthority, -// }; -// if (item.children) { -// result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority); -// } -// return result; -// }); -// } - -// export const getMenuData = () => formatter(menuData); - -import { isUrl } from '../utils/utils'; - -// TODO: authority -const menuData = [ - { - name: 'dashboard', - icon: 'dashboard', - path: 'dashboard', - children: [ - { - name: 'analysis', - path: 'analysis', - }, - { - name: 'monitor', - path: 'monitor', - }, - { - name: 'workplace', - path: 'workplace', - // hideInBreadcrumb: true, - // hideInMenu: true, - }, - ], - }, - { - name: 'form', - icon: 'form', - path: 'form', - children: [ - { - name: 'basicform', - path: 'basic-form', - }, - { - name: 'stepform', - path: 'step-form', - }, - { - // authority: 'admin', - name: 'advancedform', - authority: 'admin', - path: 'advanced-form', - }, - ], - }, - { - name: 'list', - icon: 'table', - path: 'list', - children: [ - { - name: 'searchlist', - path: 'table-list', - }, - { - name: 'basiclist', - path: 'basic-list', - }, - { - name: 'cardlist', - path: 'card-list', - }, - { - name: 'searchlist', - path: 'search', - children: [ - { - name: 'articles', - path: 'articles', - }, - { - name: 'projects', - path: 'projects', - }, - { - name: 'applications', - path: 'applications', - }, - ], - }, - ], - }, - { - name: 'profile', - icon: 'profile', - path: 'profile', - children: [ - { - name: 'basic', - path: 'basic', - }, - { - name: 'advanced', - path: 'advanced', - // authority: 'admin', - }, - ], - }, - { - name: 'result', - icon: 'check-circle-o', - path: 'result', - children: [ - { - name: 'success', - path: 'success', - }, - { - name: 'fail', - path: 'fail', - }, - ], - }, - { - name: 'exception', - icon: 'warning', - path: 'exception', - children: [ - { - name: 'not-permission', - path: '403', - }, - { - name: 'not-find', - path: '404', - }, - { - name: 'server-error', - path: '500', - }, - { - name: 'trigger', - path: 'trigger', - hideInMenu: true, - }, - ], - }, - { - name: 'account', - icon: 'user', - path: 'account', - children: [ - { - name: 'center', - path: 'center', - }, - { - name: 'settings', - path: 'settings', - }, - ], - }, -]; - -function formatter(data, parentPath = '/', parentAuthority, parentName) { - return data.map(item => { - let { path } = item; - const id = parentName ? `${parentName}.${item.name}` : `menu.${item.name}`; - - if (!isUrl(path)) { - path = parentPath + item.path; - } - const result = { - ...item, - path, - locale: id, - authority: item.authority || parentAuthority, - }; - if (item.children) { - result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority, id); - } - return result; - }); -} - -export const getMenuData = () => formatter(menuData); diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index aba8f863..eb2f5e42 100644 --- a/src/components/SiderMenu/BaseMenu.js +++ b/src/components/SiderMenu/BaseMenu.js @@ -80,7 +80,8 @@ export default class BaseMenu extends PureComponent { * get SubMenu or Item */ getSubMenuOrItem = item => { - if (item.children && item.children.some(child => child.name)) { + // doc: add hideChildren + if (item.children && !item.hideChildren && item.children.some(child => child.name)) { const name = ; return ( Ant Design Pro + + diff --git a/src/pages/layouts/BasicLayout.js b/src/pages/layouts/BasicLayout.js index 3456ffc7..9f69353f 100644 --- a/src/pages/layouts/BasicLayout.js +++ b/src/pages/layouts/BasicLayout.js @@ -1,18 +1,13 @@ -/* eslint-disable no-unused-vars */ -// TODO remove eslint-disable import React from 'react'; import { Layout } from 'antd'; import DocumentTitle from 'react-document-title'; import memoizeOne from 'memoize-one'; import { connect } from 'dva'; -// import { Route, Redirect, Switch } from 'dva/router'; import { ContainerQuery } from 'react-container-query'; import classNames from 'classnames'; import pathToRegexp from 'path-to-regexp'; import { formatMessage } from 'umi/locale'; import SiderMenu from '../../components/SiderMenu'; -// import NotFound from '../Exception/404'; -// import { getRoutes } from '../utils/utils'; import Authorized from '../../utils/Authorized'; import SettingDarwer from '../../components/SettingDarwer'; import logo from '../../assets/logo.svg'; @@ -26,13 +21,12 @@ const { check } = Authorized; /** * 获取面包屑映射 * @param {Object} menuData 菜单配置 - * @param {Object} routerData 路由配置 */ -const getBreadcrumbNameMap = memoizeOne((meun, router) => { +const getBreadcrumbNameMap = memoizeOne(meun => { const routerMap = {}; const mergeMeunAndRouter = meunData => { meunData.forEach(meunItem => { - routerMap[meunItem.path] = Object.assign(meunItem, router); + routerMap[meunItem.path] = meunItem; if (meunItem.children) { mergeMeunAndRouter(meunItem.children); } @@ -70,9 +64,10 @@ const query = { class BasicLayout extends React.PureComponent { constructor(props) { super(props); - const { routerData, menuData } = this.props; + const { menuData } = this.props; this.getPageTitle = memoizeOne(this.getPageTitle); - this.breadcrumbNameMap = getBreadcrumbNameMap(menuData, routerData); + console.log(getBreadcrumbNameMap(menuData)); + this.breadcrumbNameMap = getBreadcrumbNameMap(menuData); } getContext() { diff --git a/src/pages/layouts/LoadingPage.js b/src/pages/layouts/LoadingPage.js index e277e70c..5fd58cd6 100644 --- a/src/pages/layouts/LoadingPage.js +++ b/src/pages/layouts/LoadingPage.js @@ -3,14 +3,30 @@ import { Spin } from 'antd'; import { connect } from 'dva'; import { enquireScreen, unenquireScreen } from 'enquire-js'; import BasicLayout from './BasicLayout'; -import { getMenuData } from '../../common/menu'; -import { getRouterData } from '../../common/router'; +// TODO: should use this.props.routes +import config from '../../../config/config'; +const menuData = config['routes']; + +// change router to menu. +function formatter(data, parentPath = '', parentAuthority, parentName) { + return data.map(item => { + const id = parentName ? `${parentName}.${item.name}` : `menu.${item.name}`; + const result = { + ...item, + locale: id, + authority: item.authority || parentAuthority, + }; + if (item.routes) { + result.children = formatter(item.routes, `${parentPath}${item.path}/`, item.authority, id); + } + return result; + }); +} /** * 根据菜单取得重定向地址. */ - -const MenuData = getMenuData(); -const routerData = getRouterData({}); +const MenuData = formatter(menuData[1].routes); +const routerData = config.routes; const getRedirectData = () => { const redirectData = []; const getRedirect = item => { -- GitLab