提交 57c9820e 编写于 作者: 陈帅

Optimization: Remove the use router.js and menu.js

上级 d8ab4925
......@@ -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',
},
],
},
],
},
......
// 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);
......@@ -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 = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
return (
<SubMenu
......
......@@ -8,6 +8,9 @@ export default {
'menu.form': 'Form',
'menu.form.basicform': 'Basic Form',
'menu.form.stepform': 'Step Form',
'menu.form.stepform.info': 'Step Form(write transfer information)',
'menu.form.stepform.confirm': 'Step Form(confirm transfer information)',
'menu.form.stepform.result': 'Step Form(finished)',
'menu.form.advancedform': 'Advanced Form',
'menu.list': 'List',
'menu.list.searchlist': 'Search List',
......@@ -17,8 +20,8 @@ export default {
'menu.list.searchlist.projects': 'Search List(projects)',
'menu.list.searchlist.applications': 'Search List(applications)',
'menu.profile': 'Profile',
'menu.profile.basic': 'Basic',
'menu.profile.advanced': 'Advanced',
'menu.profile.basic': 'Basic Profile',
'menu.profile.advanced': 'Advanced Profile',
'menu.result': 'Result',
'menu.result.success': 'Success',
'menu.result.fail': 'Fail',
......
......@@ -10,6 +10,9 @@ export default {
'menu.form': '表单页',
'menu.form.basicform': '基础表单',
'menu.form.stepform': '分布表单',
'menu.form.stepform.info': '分步表单(填写转账信息)',
'menu.form.stepform.confirm': '分步表单(确认转账信息)',
'menu.form.stepform.result': '分步表单(完成)',
'menu.form.advancedform': '高级表单',
'menu.list': '列表页',
'menu.list.searchlist': '搜索列表',
......@@ -19,8 +22,8 @@ export default {
'menu.list.searchlist.projects': '搜索列表(项目)',
'menu.list.searchlist.applications': '搜索列表(应用)',
'menu.profile': '详情页',
'menu.profile.basic': '详情页',
'menu.profile.advanced': '详情页',
'menu.profile.basic': '基础详情页',
'menu.profile.advanced': '高级详情页',
'menu.result': '结果页',
'menu.result.success': '成功页',
'menu.result.fail': '失败页',
......
......@@ -8,8 +8,10 @@
<title>Ant Design Pro</title>
<link rel="icon" href="/favicon.png" type="image/x-icon">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<!-- rollbar -->
<script src="https://gw.alipayobjects.com/os/rmsportal/nGVBgVyXzzmbAqevIAPy.js">
</script>
<!-- bizcharts -->
<script src=" https://gw.alipayobjects.com/os/rmsportal/TKSqiyoUxzrHoMwjViwA.js "></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script>
</head>
......
/* 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() {
......
......@@ -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 => {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册