Commit 2378eb05 authored by xiaohu's avatar xiaohu

1.use global layout

2.simplify routerData menuData
3.remove init route
parent e2aeb7c9
// TODO:remove
// import { isUrl } from '../utils/utils';
// const menuData = [
// {
// name: 'dashboard',
// icon: 'dashboard',
// path: 'dashboard',
// children: [
// {
// name: '分析页',
// path: 'analysis',
// },
// {
// name: '监控页',
// path: 'monitor',
// },
// {
// name: '工作台',
// path: 'workplace',
// // hideInBreadcrumb: true,
// // hideInMenu: true,
// },
// ],
// },
// {
// name: '表单页',
// icon: 'form',
// path: 'form',
// children: [
// {
// name: '基础表单',
// path: 'basic-form',
// },
// {
// name: '分步表单',
// path: 'step-form',
// },
// {
// name: '高级表单',
// authority: 'admin',
// path: 'advanced-form',
// },
// ],
// },
// {
// name: '列表页',
// icon: 'table',
// path: 'list',
// children: [
// {
// name: '查询表格',
// path: 'table-list',
// },
// {
// name: '标准列表',
// path: 'basic-list',
// },
// {
// name: '卡片列表',
// path: 'card-list',
// },
// {
// name: '搜索列表',
// path: 'search',
// children: [
// {
// name: '搜索列表(文章)',
// path: 'articles',
// },
// {
// name: '搜索列表(项目)',
// path: 'projects',
// },
// {
// name: '搜索列表(应用)',
// path: 'applications',
// },
// ],
// },
// ],
// },
// {
// name: '详情页',
// icon: 'profile',
// path: 'profile',
// children: [
// {
// name: '基础详情页',
// path: 'basic',
// },
// {
// name: '高级详情页',
// path: 'advanced',
// authority: 'admin',
// },
// ],
// },
// {
// name: '结果页',
// icon: 'check-circle-o',
// path: 'result',
// children: [
// {
// name: '成功',
// path: 'success',
// },
// {
// name: '失败',
// path: 'fail',
// },
// ],
// },
// {
// name: '异常页',
// icon: 'warning',
// path: 'exception',
// children: [
// {
// name: '403',
// path: '403',
// },
// {
// name: '404',
// path: '404',
// },
// {
// name: '500',
// path: '500',
// },
// {
// name: '触发异常',
// path: 'trigger',
// hideInMenu: true,
// },
// ],
// },
// {
// name: '账户',
// icon: 'user',
// path: 'user',
// authority: 'guest',
// children: [
// {
// name: '登录',
// path: 'login',
// },
// {
// name: '注册',
// path: 'register',
// },
// {
// name: '注册结果',
// path: 'register-result',
// },
// ],
// },
// {
// name: '个人页',
// icon: 'user',
// path: 'account',
// children: [
// {
// name: '个人中心',
// path: 'center',
// },
// {
// name: '个人设置',
// 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';
const menuData = [
{
name: 'dashboard',
icon: 'dashboard',
path: 'dashboard',
path: 'Dashboard',
children: [
{
name: '分析页',
path: 'analysis',
path: 'Analysis',
},
{
name: '监控页',
path: 'monitor',
path: 'Monitor',
},
{
name: '工作台',
path: 'workplace',
// hideInBreadcrumb: true,
path: 'Workplace',
// hideInMenu: true,
},
],
......@@ -25,55 +218,55 @@ const menuData = [
{
name: '表单页',
icon: 'form',
path: 'form',
path: 'Forms',
children: [
{
name: '基础表单',
path: 'basic-form',
path: 'BasicForm',
},
{
name: '分步表单',
path: 'step-form',
path: 'StepForm/Step1',
},
{
name: '高级表单',
authority: 'admin',
path: 'advanced-form',
path: 'AdvancedForm',
},
],
},
{
name: '列表页',
icon: 'table',
path: 'list',
path: 'List',
children: [
{
name: '查询表格',
path: 'table-list',
path: 'TableList',
},
{
name: '标准列表',
path: 'basic-list',
path: 'BasicList',
},
{
name: '卡片列表',
path: 'card-list',
path: 'CardList',
},
{
name: '搜索列表',
path: 'search',
path: 'Search',
children: [
{
name: '搜索列表(文章)',
path: 'articles',
path: 'Articles',
},
{
name: '搜索列表(项目)',
path: 'projects',
path: 'Projects',
},
{
name: '搜索列表(应用)',
path: 'applications',
path: 'Applications',
},
],
},
......@@ -82,15 +275,15 @@ const menuData = [
{
name: '详情页',
icon: 'profile',
path: 'profile',
path: 'Profile',
children: [
{
name: '基础详情页',
path: 'basic',
path: 'BasicProfile',
},
{
name: '高级详情页',
path: 'advanced',
path: 'AdvancedProfile',
authority: 'admin',
},
],
......@@ -98,22 +291,22 @@ const menuData = [
{
name: '结果页',
icon: 'check-circle-o',
path: 'result',
path: 'Result',
children: [
{
name: '成功',
path: 'success',
path: 'Success',
},
{
name: '失败',
path: 'fail',
path: 'Error',
},
],
},
{
name: '异常页',
icon: 'warning',
path: 'exception',
path: 'Exception',
children: [
{
name: '403',
......@@ -129,7 +322,7 @@ const menuData = [
},
{
name: '触发异常',
path: 'trigger',
path: 'triggerException',
hideInMenu: true,
},
],
......@@ -137,35 +330,20 @@ const menuData = [
{
name: '账户',
icon: 'user',
path: 'user',
path: 'User',
authority: 'guest',
children: [
{
name: '登录',
path: 'login',
path: 'Login',
},
{
name: '注册',
path: 'register',
path: 'Register',
},
{
name: '注册结果',
path: 'register-result',
},
],
},
{
name: '个人页',
icon: 'user',
path: 'account',
children: [
{
name: '个人中心',
path: 'center',
},
{
name: '个人设置',
path: 'settings',
path: 'RegisterResult',
},
],
},
......
import { createElement } from 'react';
import dynamic from 'dva/dynamic';
import pathToRegexp from 'path-to-regexp';
import { getMenuData } from './menu';
// TODO:remove
// import { createElement } from 'react';
// import dynamic from 'dva/dynamic';
// import pathToRegexp from 'path-to-regexp';
// import { getMenuData } from './menu';
let routerDataCache;
// let routerDataCache;
const modelNotExisted = (app, model) =>
// eslint-disable-next-line
!app._models.some(({ namespace }) => {
return namespace === model.substring(model.lastIndexOf('/') + 1);
});
// const modelNotExisted = (app, model) =>
// // eslint-disable-next-line
// !app._models.some(({ namespace }) => {
// return namespace === model.substring(model.lastIndexOf('/') + 1);
// });
// wrapper of dynamic
const dynamicWrapper = (app, models, component) => {
// () => require('module')
// transformed by babel-plugin-dynamic-import-node-sync
if (component.toString().indexOf('.then(') < 0) {
models.forEach(model => {
if (modelNotExisted(app, model)) {
// eslint-disable-next-line
app.model(require(`../models/${model}`).default);
}
});
return props => {
if (!routerDataCache) {
routerDataCache = getRouterData(app);
}
return createElement(component().default, {
...props,
routerData: routerDataCache,
});
};
}
// () => import('module')
return dynamic({
app,
models: () =>
models.filter(model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)),
// add routerData prop
component: () => {
if (!routerDataCache) {
routerDataCache = getRouterData(app);
}
return component().then(raw => {
const Component = raw.default || raw;
return props =>
createElement(Component, {
...props,
routerData: routerDataCache,
});
});
},
});
};
// // wrapper of dynamic
// const dynamicWrapper = (app, models, component) => {
// // () => require('module')
// // transformed by babel-plugin-dynamic-import-node-sync
// if (component.toString().indexOf('.then(') < 0) {
// models.forEach(model => {
// if (modelNotExisted(app, model)) {
// // eslint-disable-next-line
// app.model(require(`../models/${model}`).default);
// }
// });
// return props => {
// if (!routerDataCache) {
// routerDataCache = getRouterData(app);
// }
// return createElement(component().default, {
// ...props,
// routerData: routerDataCache,
// });
// };
// }
// // () => import('module')
// return dynamic({
// app,
// models: () =>
// models.filter(model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)),
// // add routerData prop
// component: () => {
// if (!routerDataCache) {
// routerDataCache = getRouterData(app);
// }
// return component().then(raw => {
// const Component = raw.default || raw;
// return props =>
// createElement(Component, {
// ...props,
// routerData: routerDataCache,
// });
// });
// },
// });
// };
// function getFlatMenuData(menus) {
// let keys = {};
// menus.forEach(item => {
// if (item.children) {
// keys[item.path] = { ...item };
// keys = { ...keys, ...getFlatMenuData(item.children) };
// } else {
// keys[item.path] = { ...item };
// }
// });
// return keys;
// }
// export const getRouterData = app => {
// const routerConfig = {
// '/': {
// component: dynamicWrapper(app, ['user', 'login', 'setting'], () =>
// import('../layouts/LoadingPage')
// ),
// },
// '/dashboard/analysis': {
// component: dynamicWrapper(app, ['chart'], () => import('../pages/Dashboard/Analysis')),
// },
// '/dashboard/monitor': {
// component: dynamicWrapper(app, ['monitor'], () => import('../pages/Dashboard/Monitor')),
// },
// '/dashboard/workplace': {
// component: dynamicWrapper(app, ['user', 'project', 'activities', 'chart'], () =>
// import('../pages/Dashboard/Workplace')
// ),
// // hideInBreadcrumb: true,
// // name: '工作台',
// // authority: 'admin',
// },
// '/form/basic-form': {
// component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/BasicForm')),
// },
// '/form/step-form': {
// component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm')),
// },
// '/form/step-form/info': {
// name: '分步表单(填写转账信息)',
// component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step1')),
// },
// '/form/step-form/confirm': {
// name: '分步表单(确认转账信息)',
// component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step2')),
// },
// '/form/step-form/result': {
// name: '分步表单(完成)',
// component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step3')),
// },
// '/form/advanced-form': {
// component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/AdvancedForm')),
// },
// '/list/table-list': {
// component: dynamicWrapper(app, ['rule'], () => import('../pages/List/TableList')),
// },
// '/list/basic-list': {
// component: dynamicWrapper(app, ['list'], () => import('../pages/List/BasicList')),
// },
// '/list/card-list': {
// component: dynamicWrapper(app, ['list'], () => import('../pages/List/CardList')),
// },
// '/list/search': {
// component: dynamicWrapper(app, ['list'], () => import('../pages/List/List')),
// },
// '/list/search/projects': {
// component: dynamicWrapper(app, ['list'], () => import('../pages/List/Projects')),
// },
// '/list/search/applications': {
// component: dynamicWrapper(app, ['list'], () => import('../pages/List/Applications')),
// },
// '/list/search/articles': {
// component: dynamicWrapper(app, ['list'], () => import('../pages/List/Articles')),
// },
// '/profile/basic': {
// component: dynamicWrapper(app, ['profile'], () => import('../pages/Profile/BasicProfile')),
// },
// '/profile/advanced': {
// component: dynamicWrapper(app, ['profile'], () => import('../pages/Profile/AdvancedProfile')),
// },
// '/result/success': {
// component: dynamicWrapper(app, [], () => import('../pages/Result/Success')),
// },
// '/result/fail': {
// component: dynamicWrapper(app, [], () => import('../pages/Result/Error')),
// },
// '/exception/403': {
// component: dynamicWrapper(app, [], () => import('../pages/Exception/403')),
// },
// '/exception/404': {
// component: dynamicWrapper(app, [], () => import('../pages/Exception/404')),
// },
// '/exception/500': {
// component: dynamicWrapper(app, [], () => import('../pages/Exception/500')),
// },
// '/exception/trigger': {
// component: dynamicWrapper(app, ['error'], () =>
// import('../pages/Exception/triggerException')
// ),
// },
// '/user': {
// component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
// },
// '/user/login': {
// component: dynamicWrapper(app, ['login'], () => import('../pages/User/Login')),
// },
// '/user/register': {
// component: dynamicWrapper(app, ['register'], () => import('../pages/User/Register')),
// },
// '/user/register-result': {
// component: dynamicWrapper(app, [], () => import('../pages/User/RegisterResult')),
// },
// '/account/center': {
// component: dynamicWrapper(app, ['list', 'user', 'project'], () =>
// import('../pages/Account/Center/Center')
// ),
// },
// '/account/center/articles': {
// component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Articles')),
// },
// '/account/center/applications': {
// component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Applications')),
// },
// '/account/center/projects': {
// component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Projects')),
// },
// '/account/settings': {
// component: dynamicWrapper(app, ['geographic'], () =>
// import('../pages/Account/Settings/Info')
// ),
// },
// '/account/settings/base': {
// component: dynamicWrapper(app, ['geographic'], () =>
// import('../pages/Account/Settings/BaseView')
// ),
// },
// '/account/settings/security': {
// component: dynamicWrapper(app, ['geographic'], () =>
// import('../pages/Account/Settings/SecurityView')
// ),
// },
// '/account/settings/binding': {
// component: dynamicWrapper(app, ['geographic'], () =>
// import('../pages/Account/Settings/BindingView')
// ),
// },
// '/account/settings/notification': {
// component: dynamicWrapper(app, ['geographic'], () =>
// import('../pages/Account/Settings/NotificationView')
// ),
// },
// // '/user/:id': {
// // component: dynamicWrapper(app, [], () => import('../pages/User/SomeComponent')),
// // },
// };
// // Get name from ./menu.js or just set it in the router data.
// const menuData = getFlatMenuData(getMenuData());
// // Route configuration data
// // eg. {name,authority ...routerConfig }
// const routerData = {};
// // The route matches the menu
// Object.keys(routerConfig).forEach(path => {
// // Regular match item name
// // eg. router /user/:id === /user/chen
// const pathRegexp = pathToRegexp(path);
// const menuKey = Object.keys(menuData).find(key => pathRegexp.test(`${key}`));
// let menuItem = {};
// // If menuKey is not empty
// if (menuKey) {
// menuItem = menuData[menuKey];
// }
// let router = routerConfig[path];
// // If you need to configure complex parameter routing,
// // https://github.com/ant-design/ant-design-pro-site/blob/master/docs/router-and-nav.md#%E5%B8%A6%E5%8F%82%E6%95%B0%E7%9A%84%E8%B7%AF%E7%94%B1%E8%8F%9C%E5%8D%95
// // eg . /list/:type/user/info/:id
// router = {
// ...router,
// name: router.name || menuItem.name,
// authority: router.authority || menuItem.authority,
// hideInBreadcrumb: router.hideInBreadcrumb || menuItem.hideInBreadcrumb,
// };
// routerData[path] = router;
// });
// return routerData;
// };
import pathToRegexp from 'path-to-regexp';
import { getMenuData } from './menu';
function getFlatMenuData(menus) {
let keys = {};
......@@ -67,148 +260,54 @@ function getFlatMenuData(menus) {
return keys;
}
export const getRouterData = app => {
export const getRouterData = () => {
const routerConfig = {
'/': {
component: dynamicWrapper(app, ['user', 'login', 'setting'], () =>
import('../layouts/LoadingPage')
),
},
'/dashboard/analysis': {
component: dynamicWrapper(app, ['chart'], () => import('../pages/Dashboard/Analysis')),
name: 'Ant-Design-Pro',
},
'/dashboard/monitor': {
component: dynamicWrapper(app, ['monitor'], () => import('../pages/Dashboard/Monitor')),
'/Dashboard/Analysis': {
name: '分析页',
},
'/dashboard/workplace': {
component: dynamicWrapper(app, ['user', 'project', 'activities', 'chart'], () =>
import('../pages/Dashboard/Workplace')
),
'/Dashboard/Monitor': {},
'/Dashboard/Workplace': {
// component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
// hideInBreadcrumb: true,
// name: '工作台',
// authority: 'admin',
},
'/form/basic-form': {
component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/BasicForm')),
},
'/form/step-form': {
component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm')),
},
'/form/step-form/info': {
'/Forms/BasicForm': {},
'/Forms/StepForm': {},
'/Forms/StepForm/Step1': {
name: '分步表单(填写转账信息)',
component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step1')),
},
'/form/step-form/confirm': {
'/Forms/StepForm/Step2': {
name: '分步表单(确认转账信息)',
component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step2')),
},
'/form/step-form/result': {
'/Forms/StepForm/Step3': {
name: '分步表单(完成)',
component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step3')),
},
'/form/advanced-form': {
component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/AdvancedForm')),
},
'/list/table-list': {
component: dynamicWrapper(app, ['rule'], () => import('../pages/List/TableList')),
},
'/list/basic-list': {
component: dynamicWrapper(app, ['list'], () => import('../pages/List/BasicList')),
},
'/list/card-list': {
component: dynamicWrapper(app, ['list'], () => import('../pages/List/CardList')),
},
'/list/search': {
component: dynamicWrapper(app, ['list'], () => import('../pages/List/List')),
},
'/list/search/projects': {
component: dynamicWrapper(app, ['list'], () => import('../pages/List/Projects')),
},
'/list/search/applications': {
component: dynamicWrapper(app, ['list'], () => import('../pages/List/Applications')),
},
'/list/search/articles': {
component: dynamicWrapper(app, ['list'], () => import('../pages/List/Articles')),
},
'/profile/basic': {
component: dynamicWrapper(app, ['profile'], () => import('../pages/Profile/BasicProfile')),
},
'/profile/advanced': {
component: dynamicWrapper(app, ['profile'], () => import('../pages/Profile/AdvancedProfile')),
},
'/result/success': {
component: dynamicWrapper(app, [], () => import('../pages/Result/Success')),
},
'/result/fail': {
component: dynamicWrapper(app, [], () => import('../pages/Result/Error')),
},
'/exception/403': {
component: dynamicWrapper(app, [], () => import('../pages/Exception/403')),
},
'/exception/404': {
component: dynamicWrapper(app, [], () => import('../pages/Exception/404')),
},
'/exception/500': {
component: dynamicWrapper(app, [], () => import('../pages/Exception/500')),
},
'/exception/trigger': {
component: dynamicWrapper(app, ['error'], () =>
import('../pages/Exception/triggerException')
),
},
'/user': {
component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
},
'/user/login': {
component: dynamicWrapper(app, ['login'], () => import('../pages/User/Login')),
},
'/user/register': {
component: dynamicWrapper(app, ['register'], () => import('../pages/User/Register')),
},
'/user/register-result': {
component: dynamicWrapper(app, [], () => import('../pages/User/RegisterResult')),
},
'/account/center': {
component: dynamicWrapper(app, ['list', 'user', 'project'], () =>
import('../pages/Account/Center/Center')
),
},
'/account/center/articles': {
component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Articles')),
},
'/account/center/applications': {
component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Applications')),
},
'/account/center/projects': {
component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Projects')),
},
'/account/settings': {
component: dynamicWrapper(app, ['geographic'], () =>
import('../pages/Account/Settings/Info')
),
},
'/account/settings/base': {
component: dynamicWrapper(app, ['geographic'], () =>
import('../pages/Account/Settings/BaseView')
),
},
'/account/settings/security': {
component: dynamicWrapper(app, ['geographic'], () =>
import('../pages/Account/Settings/SecurityView')
),
},
'/account/settings/binding': {
component: dynamicWrapper(app, ['geographic'], () =>
import('../pages/Account/Settings/BindingView')
),
},
'/account/settings/notification': {
component: dynamicWrapper(app, ['geographic'], () =>
import('../pages/Account/Settings/NotificationView')
),
},
'/Forms/AdvancedForm': {},
'/List/TableList': {},
'/List/BasicList': {},
'/List/CardList': {},
'/List': {},
'/List/Search/Projects': {},
'/List/Search/Applications': {},
'/List/Search/Articles': {},
'/Profile/BasicProfile': {},
'/Profile/AdvancedProfile': {},
'/Result/success': {},
'/Result/Error': {},
'/Exception/403': {},
'/Exception/404': {},
'/Exception/500': {},
'/Exception/triggerException': {},
'/User': {},
'/User/Login': {},
'/User/Register': {},
'/User/RegisterResult': {},
// '/user/:id': {
// component: dynamicWrapper(app, [], () => import('../pages/User/SomeComponent')),
// component: dynamicWrapper(app, [], () => console.log('../routes/User/SomeComponent')),
// },
};
// Get name from ./menu.js or just set it in the router data.
......@@ -236,9 +335,9 @@ export const getRouterData = app => {
...router,
name: router.name || menuItem.name,
authority: router.authority || menuItem.authority,
hideInBreadcrumb: router.hideInBreadcrumb || menuItem.hideInBreadcrumb,
};
routerData[path] = router;
});
return routerData;
};
import React from 'react';
export default props => <div {...props} />;
export default props => <div style={{ height: '100%' }} {...props} />;
import React from 'react';
import { getRouterData } from 'common/router';
import { getMenuData } from 'common/menu';
import BasecLayout from './BasicLayout';
import BlankLayout from './BlankLayout';
// TODO routerData menuData etc...
const openPages = ['/User', '/User/Login', '/User/Register', '/User/RegisterResult'];
export default props => {
const { location, children } = props;
const { children, location } = props;
const routerData = getRouterData({});
const menuData = getMenuData({});
let { pathname } = location;
pathname = pathname.startsWith('/') ? pathname : `/${pathname}`;
if (openPages && openPages.includes(pathname)) {
return <BlankLayout>{children}</BlankLayout>;
}
return (
<BasecLayout routerData={{}} menuData={[]} location={location}>
<BasecLayout routerData={routerData} menuData={menuData} location={location}>
{children}
</BasecLayout>
);
......
import router from 'umi/router';
import { getAuthority } from 'utils/authority';
import { queryNotices } from '../services/api';
export default {
......@@ -33,13 +31,6 @@ export default {
payload: count,
});
},
*init({ payload }, { put }) {
if (payload.hasAuthority) {
yield put(router.push('/User/Login'));
} else {
yield put(router.push('/Dashboard/Analysis'));
}
},
},
reducers: {
......@@ -64,21 +55,12 @@ export default {
},
subscriptions: {
setup({ history, dispatch }) {
setup({ history }) {
// Subscribe history(url) change, trigger `load` action if pathname is `/`
return history.listen(({ pathname, search }) => {
if (typeof window.ga !== 'undefined') {
window.ga('send', 'pageview', pathname + search);
}
if (pathname === '/') {
const author = getAuthority();
dispatch({
type: 'init',
payload: {
hasAuthority: author === 'guest' || !author,
},
});
}
});
},
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment