tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/1851/head
陈帅 8 years ago
parent
d8ab4925c2
commit
57c9820e4e
8 changed files with 196 additions and 323 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      config/config.js
  2. 283
      src/common/menu.js
  3. 3
      src/components/SiderMenu/BaseMenu.js
  4. 7
      src/locales/en-US.js
  5. 7
      src/locales/zh-CN.js
  6. 2
      src/pages/document.ejs
  7. 15
      src/pages/layouts/BasicLayout.js
  8. 26
      src/pages/layouts/LoadingPage.js

176
config/config.js
View File

@ -48,75 +48,147 @@ export default {
routes: [ routes: [
// dashboard // dashboard
{ path: '/', redirect: '/dashboard/analysis' }, { path: '/', redirect: '/dashboard/analysis' },
{ path: '/dashboard/analysis', component: './Dashboard/Analysis' }, {
{ path: '/dashboard/monitor', component: './Dashboard/Monitor' }, path: '/dashboard',
{ path: '/dashboard/workplace', component: './Dashboard/Workplace' }, 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 // forms
{ path: '/form/basic-form', component: './Forms/BasicForm' },
{ {
path: '/form/step-form', path: '/form',
component: './Forms/StepForm', icon: 'form',
name: 'form',
routes: [ routes: [
{ path: '/form/step-form', redirect: '/form/step-form/info' }, { path: '/form/basic-form', name: 'basicform', component: './Forms/BasicForm' },
{ path: '/form/step-form/info', component: './Forms/StepForm/Step1' }, {
{ path: '/form/step-form/confirm', component: './Forms/StepForm/Step2' }, name: 'stepform',
{ path: '/form/step-form/result', component: './Forms/StepForm/Step3' }, 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 // 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', path: '/list',
component: './List/List', icon: 'table',
name: 'list',
routes: [ routes: [
{ path: '/list/search', redirect: '/list/search/projects' }, { path: '/list/table-list', name: 'searchlist', component: './List/TableList' },
{ path: '/list/search/articles', component: './List/Articles' }, { path: '/list/basic-list', name: 'basiclist', component: './List/BasicList' },
{ path: '/list/search/projects', component: './List/Projects' }, { path: '/list/card-list', name: 'cardlist', component: './List/CardList' },
{ path: '/list/search/applications', component: './List/Applications' }, {
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', path: '/profile',
component: './Account/Center/Center', name: 'profile',
icon: 'profile',
routes: [ routes: [
{ path: '/account/center', redirect: '/account/center/articles' }, // profile
{ path: '/account/center/articles', component: './Account/Center/Articles' }, { path: '/profile/basic', name: 'basic', component: './Profile/BasicProfile' },
{ path: '/account/center/applications', component: './Account/Center/Applications' }, { path: '/profile/advanced', name: 'advanced', component: './Profile/AdvancedProfile' },
{ path: '/account/center/projects', component: './Account/Center/Projects' },
], ],
}, },
{ {
path: '/account/settings', name: 'result',
component: './Account/Settings/Info', icon: 'check-circle-o',
path: '/result',
routes: [ routes: [
{ path: '/account/settings', redirect: '/account/settings/base' }, // result
{ path: '/account/settings/base', component: './Account/Settings/BaseView' }, { path: '/result/success', name: 'success', component: './Result/Success' },
{ path: '/account/settings/security', component: './Account/Settings/SecurityView' }, { path: '/result/fail', name: 'fail', component: './Result/Error' },
{ path: '/account/settings/binding', component: './Account/Settings/BindingView' }, ],
},
{
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', path: '/account/settings',
component: './Account/Settings/NotificationView', 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',
},
],
}, },
], ],
}, },

283
src/common/menu.js
View File

@ -1,6 +1,4 @@
// TODO:remove // // TODO: authority
// import { isUrl } from '../utils/utils';
// const menuData = [ // const menuData = [
// { // {
// name: 'dashboard', // name: 'dashboard',
@ -8,15 +6,15 @@
// path: 'dashboard', // path: 'dashboard',
// children: [ // children: [
// { // {
// name: '分析页', // name: 'analysis',
// path: 'analysis', // path: 'analysis',
// }, // },
// { // {
// name: '监控页', // name: 'monitor',
// path: 'monitor', // path: 'monitor',
// }, // },
// { // {
// name: '工作台', // name: 'workplace',
// path: 'workplace', // path: 'workplace',
// // hideInBreadcrumb: true, // // hideInBreadcrumb: true,
// // hideInMenu: true, // // hideInMenu: true,
@ -24,56 +22,57 @@
// ], // ],
// }, // },
// { // {
// name: '表单页', // name: 'form',
// icon: 'form', // icon: 'form',
// path: 'form', // path: 'form',
// children: [ // children: [
// { // {
// name: '基础表单', // name: 'basicform',
// path: 'basic-form', // path: 'basic-form',
// }, // },
// { // {
// name: '分步表单', // name: 'stepform',
// path: 'step-form', // path: 'step-form',
// }, // },
// { // {
// name: '高级表单', // // authority: 'admin',
// name: 'advancedform',
// authority: 'admin', // authority: 'admin',
// path: 'advanced-form', // path: 'advanced-form',
// }, // },
// ], // ],
// }, // },
// { // {
// name: '列表页', // name: 'list',
// icon: 'table', // icon: 'table',
// path: 'list', // path: 'list',
// children: [ // children: [
// { // {
// name: '查询表格', // name: 'searchlist',
// path: 'table-list', // path: 'table-list',
// }, // },
// { // {
// name: '标准列表', // name: 'basiclist',
// path: 'basic-list', // path: 'basic-list',
// }, // },
// { // {
// name: '卡片列表', // name: 'cardlist',
// path: 'card-list', // path: 'card-list',
// }, // },
// { // {
// name: '搜索列表', // name: 'searchlist',
// path: 'search', // path: 'search',
// children: [ // children: [
// { // {
// name: '搜索列表（文章）', // name: 'articles',
// path: 'articles', // path: 'articles',
// }, // },
// { // {
// name: '搜索列表（项目）', // name: 'projects',
// path: 'projects', // path: 'projects',
// }, // },
// { // {
// name: '搜索列表（应用）', // name: 'applications',
// path: 'applications', // path: 'applications',
// }, // },
// ], // ],
@ -81,291 +80,73 @@
// ], // ],
// }, // },
// { // {
// name: '详情页', // name: 'profile',
// icon: 'profile', // icon: 'profile',
// path: 'profile', // path: 'profile',
// children: [ // children: [
// { // {
// name: '基础详情页', // name: 'basic',
// path: 'basic', // path: 'basic',
// }, // },
// { // {
// name: '高级详情页', // name: 'advanced',
// path: 'advanced', // path: 'advanced',
// authority: 'admin', // // authority: 'admin',
// }, // },
// ], // ],
// }, // },
// { // {
// name: '结果页', // name: 'result',
// icon: 'check-circle-o', // icon: 'check-circle-o',
// path: 'result', // path: 'result',
// children: [ // children: [
// { // {
// name: '成功', // name: 'success',
// path: 'success', // path: 'success',
// }, // },
// { // {
// name: '失败', // name: 'fail',
// path: 'fail', // path: 'fail',
// }, // },
// ], // ],
// }, // },
// { // {
// name: '异常页', // name: 'exception',
// icon: 'warning', // icon: 'warning',
// path: 'exception', // path: 'exception',
// children: [ // children: [
// { // {
// name: '403', // name: 'not-permission',
// path: '403', // path: '403',
// }, // },
// { // {
// name: '404', // name: 'not-find',
// path: '404', // path: '404',
// }, // },
// { // {
// name: '500', // name: 'server-error',
// path: '500', // path: '500',
// }, // },
// { // {
// name: '触发异常', // name: 'trigger',
// path: 'trigger', // path: 'trigger',
// hideInMenu: true, // hideInMenu: true,
// }, // },
// ], // ],
// }, // },
// { // {
// name: '账户', // name: 'account',
// icon: 'user',
// path: 'user',
// authority: 'guest',
// children: [
// {
// name: '登录',
// path: 'login',
// },
// {
// name: '注册',
// path: 'register',
// },
// {
// name: '注册结果',
// path: 'register-result',
// },
// ],
// },
// {
// name: '个人页',
// icon: 'user', // icon: 'user',
// path: 'account', // path: 'account',
// children: [ // children: [
// { // {
// name: '个人中心', // name: 'center',
// path: 'center', // path: 'center',
// }, // },
// { // {
// name: '个人设置', // name: 'settings',
// path: '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);

3
src/components/SiderMenu/BaseMenu.js
View File

@ -80,7 +80,8 @@ export default class BaseMenu extends PureComponent {
* get SubMenu or Item * get SubMenu or Item
*/ */
getSubMenuOrItem = 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} />; const name = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
return ( return (
<SubMenu <SubMenu

7
src/locales/en-US.js
View File

@ -8,6 +8,9 @@ export default {
'menu.form': 'Form', 'menu.form': 'Form',
'menu.form.basicform': 'Basic Form', 'menu.form.basicform': 'Basic Form',
'menu.form.stepform': 'Step 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.form.advancedform': 'Advanced Form',
'menu.list': 'List', 'menu.list': 'List',
'menu.list.searchlist': 'Search List', 'menu.list.searchlist': 'Search List',
@ -17,8 +20,8 @@ export default {
'menu.list.searchlist.projects': 'Search List（projects）', 'menu.list.searchlist.projects': 'Search List（projects）',
'menu.list.searchlist.applications': 'Search List（applications）', 'menu.list.searchlist.applications': 'Search List（applications）',
'menu.profile': 'Profile', 'menu.profile': 'Profile',
'menu.profile.basic': 'Basic', 'menu.profile.basic': 'Basic Profile',
'menu.profile.advanced': 'Advanced', 'menu.profile.advanced': 'Advanced Profile',
'menu.result': 'Result', 'menu.result': 'Result',
'menu.result.success': 'Success', 'menu.result.success': 'Success',
'menu.result.fail': 'Fail', 'menu.result.fail': 'Fail',

7
src/locales/zh-CN.js
View File

@ -10,6 +10,9 @@ export default {
'menu.form': '表单页', 'menu.form': '表单页',
'menu.form.basicform': '基础表单', 'menu.form.basicform': '基础表单',
'menu.form.stepform': '分布表单', 'menu.form.stepform': '分布表单',
'menu.form.stepform.info': '分步表单（填写转账信息）',
'menu.form.stepform.confirm': '分步表单（确认转账信息）',
'menu.form.stepform.result': '分步表单（完成）',
'menu.form.advancedform': '高级表单', 'menu.form.advancedform': '高级表单',
'menu.list': '列表页', 'menu.list': '列表页',
'menu.list.searchlist': '搜索列表', 'menu.list.searchlist': '搜索列表',
@ -19,8 +22,8 @@ export default {
'menu.list.searchlist.projects': '搜索列表（项目）', 'menu.list.searchlist.projects': '搜索列表（项目）',
'menu.list.searchlist.applications': '搜索列表（应用）', 'menu.list.searchlist.applications': '搜索列表（应用）',
'menu.profile': '详情页', 'menu.profile': '详情页',
'menu.profile.basic': '详情页', 'menu.profile.basic': '基础详情页',
'menu.profile.advanced': '详情页', 'menu.profile.advanced': '高级详情页',
'menu.result': '结果页', 'menu.result': '结果页',
'menu.result.success': '成功页', 'menu.result.success': '成功页',
'menu.result.fail': '失败页', 'menu.result.fail': '失败页',

2
src/pages/document.ejs
View File

@ -8,8 +8,10 @@
<title>Ant Design Pro</title> <title>Ant Design Pro</title>
<link rel="icon" href="/favicon.png" type="image/x-icon"> <link rel="icon" href="/favicon.png" type="image/x-icon">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<!-- rollbar -->
<script src="https://gw.alipayobjects.com/os/rmsportal/nGVBgVyXzzmbAqevIAPy.js"> <script src="https://gw.alipayobjects.com/os/rmsportal/nGVBgVyXzzmbAqevIAPy.js">
</script> </script>
<!-- bizcharts -->
<script src=" https://gw.alipayobjects.com/os/rmsportal/TKSqiyoUxzrHoMwjViwA.js "></script> <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> <script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script>
</head> </head>

15
src/pages/layouts/BasicLayout.js
View File

@ -1,18 +1,13 @@
/* eslint-disable no-unused-vars */
// TODO remove eslint-disable
import React from 'react'; import React from 'react';
import { Layout } from 'antd'; import { Layout } from 'antd';
import DocumentTitle from 'react-document-title'; import DocumentTitle from 'react-document-title';
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import { connect } from 'dva'; import { connect } from 'dva';
// import { Route, Redirect, Switch } from 'dva/router';
import { ContainerQuery } from 'react-container-query'; import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames'; import classNames from 'classnames';
import pathToRegexp from 'path-to-regexp'; import pathToRegexp from 'path-to-regexp';
import { formatMessage } from 'umi/locale'; import { formatMessage } from 'umi/locale';
import SiderMenu from '../../components/SiderMenu'; import SiderMenu from '../../components/SiderMenu';
// import NotFound from '../Exception/404';
// import { getRoutes } from '../utils/utils';
import Authorized from '../../utils/Authorized'; import Authorized from '../../utils/Authorized';
import SettingDarwer from '../../components/SettingDarwer'; import SettingDarwer from '../../components/SettingDarwer';
import logo from '../../assets/logo.svg'; import logo from '../../assets/logo.svg';
@ -26,13 +21,12 @@ const { check } = Authorized;
/** /**
* 获取面包屑映射 * 获取面包屑映射
* @param {Object} menuData 菜单配置 * @param {Object} menuData 菜单配置
* @param {Object} routerData 路由配置
*/ */
const getBreadcrumbNameMap = memoizeOne((meun, router) => { const getBreadcrumbNameMap = memoizeOne(meun => {
const routerMap = {}; const routerMap = {};
const mergeMeunAndRouter = meunData => { const mergeMeunAndRouter = meunData => {
meunData.forEach(meunItem => { meunData.forEach(meunItem => {
routerMap[meunItem.path] = Object.assign(meunItem, router); routerMap[meunItem.path] = meunItem;
if (meunItem.children) { if (meunItem.children) {
mergeMeunAndRouter(meunItem.children); mergeMeunAndRouter(meunItem.children);
} }
@ -70,9 +64,10 @@ const query = {
class BasicLayout extends React.PureComponent { class BasicLayout extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
const { routerData, menuData } = this.props; const { menuData } = this.props;
this.getPageTitle = memoizeOne(this.getPageTitle); this.getPageTitle = memoizeOne(this.getPageTitle);
this.breadcrumbNameMap = getBreadcrumbNameMap(menuData, routerData); console.log(getBreadcrumbNameMap(menuData));
this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
} }
getContext() { getContext() {

26
src/pages/layouts/LoadingPage.js
View File

@ -3,14 +3,30 @@ import { Spin } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { enquireScreen, unenquireScreen } from 'enquire-js'; import { enquireScreen, unenquireScreen } from 'enquire-js';
import BasicLayout from './BasicLayout'; import BasicLayout from './BasicLayout';
import { getMenuData } from '../../common/menu'; // TODO: should use this.props.routes
import { getRouterData } from '../../common/router'; 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 = formatter(menuData[1].routes);
const MenuData = getMenuData(); const routerData = config.routes;
const routerData = getRouterData({});
const getRedirectData = () => { const getRedirectData = () => {
const redirectData = []; const redirectData = [];
const getRedirect = item => { const getRedirect = item => {

Write Preview
Loading…
Cancel
Save