Browse Source
* adjust menu and router config * rebase master * remove invalid breadcrumb item * add nested layout * Some improvements * get name from menu.js * - use HOC to pass routerData instead of contextpull/507/head
ddcat1115
8 years ago
committed by
GitHub
GitHub
11 changed files with 427 additions and 374 deletions
@ -0,0 +1,134 @@ |
|||
const menuData = [{ |
|||
name: 'dashborad', |
|||
icon: 'dashboard', |
|||
path: 'dashboard', |
|||
children: [{ |
|||
name: '分析页', |
|||
path: 'analysis', |
|||
}, { |
|||
name: '监控页', |
|||
path: 'monitor', |
|||
}, { |
|||
name: '工作台', |
|||
path: 'workplace', |
|||
// hideInMenu: true,
|
|||
}], |
|||
}, { |
|||
name: '表单页', |
|||
icon: 'form', |
|||
path: 'form', |
|||
children: [{ |
|||
name: '基础表单', |
|||
path: 'basic-form', |
|||
}, { |
|||
name: '分步表单', |
|||
path: 'step-form', |
|||
}, { |
|||
name: '高级表单', |
|||
path: 'advanced-form', |
|||
}], |
|||
}, { |
|||
name: '列表页', |
|||
icon: 'table', |
|||
path: 'list', |
|||
children: [{ |
|||
name: '搜索列表', |
|||
icon: 'search', |
|||
path: 'search', |
|||
children: [{ |
|||
name: '搜索列表（项目）', |
|||
path: 'projects', |
|||
}, { |
|||
name: '搜索列表（应用）', |
|||
path: 'applications', |
|||
}, { |
|||
name: '搜索列表（文章）', |
|||
path: 'articles', |
|||
}], |
|||
}, { |
|||
name: '查询表格', |
|||
path: 'table-list', |
|||
}, { |
|||
name: '标准列表', |
|||
path: 'basic-list', |
|||
}, { |
|||
name: '卡片列表', |
|||
path: 'card-list', |
|||
}], |
|||
}, { |
|||
name: '详情页', |
|||
icon: 'profile', |
|||
path: 'profile', |
|||
children: [{ |
|||
name: '基础详情页', |
|||
path: 'basic', |
|||
}, { |
|||
name: '高级详情页', |
|||
path: 'advanced', |
|||
}], |
|||
}, { |
|||
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: '账户', |
|||
icon: 'user', |
|||
path: 'user', |
|||
children: [{ |
|||
name: '登录', |
|||
path: 'login', |
|||
}, { |
|||
name: '注册', |
|||
path: 'register', |
|||
}, { |
|||
name: '注册结果', |
|||
path: 'register-result', |
|||
}], |
|||
}, { |
|||
name: '使用文档', |
|||
icon: 'book', |
|||
path: 'http://pro.ant.design/docs/getting-started', |
|||
target: '_blank', |
|||
}]; |
|||
|
|||
function formatter(data, parentPath = '') { |
|||
const list = []; |
|||
data.forEach((item) => { |
|||
if (item.children) { |
|||
list.push({ |
|||
...item, |
|||
path: `${parentPath}${item.path}`, |
|||
children: formatter(item.children, `${parentPath}${item.path}/`), |
|||
}); |
|||
} else { |
|||
list.push({ |
|||
...item, |
|||
path: `${parentPath}${item.path}`, |
|||
}); |
|||
} |
|||
}); |
|||
return list; |
|||
} |
|||
|
|||
export const getMenuData = () => formatter(menuData); |
|||
@ -1,209 +0,0 @@ |
|||
import dynamic from 'dva/dynamic'; |
|||
|
|||
// wrapper of dynamic
|
|||
const dynamicWrapper = (app, models, component) => dynamic({ |
|||
app, |
|||
models: () => models.map(m => import(`../models/${m}.js`)), |
|||
component, |
|||
}); |
|||
|
|||
// nav data
|
|||
export const getNavData = app => [ |
|||
{ |
|||
component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), |
|||
layout: 'BasicLayout', |
|||
name: '首页', // for breadcrumb
|
|||
path: '/', |
|||
children: [ |
|||
{ |
|||
name: 'Dashboard', |
|||
icon: 'dashboard', |
|||
path: 'dashboard', |
|||
children: [ |
|||
{ |
|||
name: '分析页', |
|||
path: 'analysis', |
|||
component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')), |
|||
}, |
|||
{ |
|||
name: '监控页', |
|||
path: 'monitor', |
|||
component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')), |
|||
}, |
|||
{ |
|||
name: '工作台', |
|||
path: 'workplace', |
|||
component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')), |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '表单页', |
|||
path: 'form', |
|||
icon: 'form', |
|||
children: [ |
|||
{ |
|||
name: '基础表单', |
|||
path: 'basic-form', |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/BasicForm')), |
|||
}, |
|||
{ |
|||
name: '分步表单', |
|||
path: 'step-form', |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')), |
|||
children: [ |
|||
{ |
|||
path: 'confirm', |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')), |
|||
}, |
|||
{ |
|||
path: 'result', |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step3')), |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '高级表单', |
|||
path: 'advanced-form', |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/AdvancedForm')), |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '列表页', |
|||
path: 'list', |
|||
icon: 'table', |
|||
children: [ |
|||
{ |
|||
name: '查询表格', |
|||
path: 'table-list', |
|||
component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')), |
|||
}, |
|||
{ |
|||
name: '标准列表', |
|||
path: 'basic-list', |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')), |
|||
}, |
|||
{ |
|||
name: '卡片列表', |
|||
path: 'card-list', |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/CardList')), |
|||
}, |
|||
{ |
|||
name: '搜索列表', |
|||
path: 'search', |
|||
component: dynamicWrapper(app, [], () => import('../routes/List/List')), |
|||
children: [{ |
|||
name: '搜索列表（项目）', |
|||
path: 'projects', |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/Projects')), |
|||
}, { |
|||
name: '搜索列表（应用）', |
|||
path: 'applications', |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/Applications')), |
|||
}, { |
|||
name: '搜索列表（文章）', |
|||
path: 'articles', |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/Articles')), |
|||
}], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '详情页', |
|||
path: 'profile', |
|||
icon: 'profile', |
|||
children: [ |
|||
{ |
|||
name: '基础详情页', |
|||
path: 'basic', |
|||
component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/BasicProfile')), |
|||
}, |
|||
{ |
|||
name: '高级详情页', |
|||
path: 'advanced', |
|||
component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/AdvancedProfile')), |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '结果', |
|||
path: 'result', |
|||
icon: 'check-circle-o', |
|||
children: [ |
|||
{ |
|||
name: '成功', |
|||
path: 'success', |
|||
component: dynamicWrapper(app, [], () => import('../routes/Result/Success')), |
|||
}, |
|||
{ |
|||
name: '失败', |
|||
path: 'fail', |
|||
component: dynamicWrapper(app, [], () => import('../routes/Result/Error')), |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '异常', |
|||
path: 'exception', |
|||
icon: 'warning', |
|||
children: [ |
|||
{ |
|||
name: '403', |
|||
path: '403', |
|||
component: dynamicWrapper(app, [], () => import('../routes/Exception/403')), |
|||
}, |
|||
{ |
|||
name: '404', |
|||
path: '404', |
|||
component: dynamicWrapper(app, [], () => import('../routes/Exception/404')), |
|||
}, |
|||
{ |
|||
name: '500', |
|||
path: '500', |
|||
component: dynamicWrapper(app, [], () => import('../routes/Exception/500')), |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')), |
|||
path: '/user', |
|||
layout: 'UserLayout', |
|||
children: [ |
|||
{ |
|||
name: '帐户', |
|||
icon: 'user', |
|||
path: 'user', |
|||
children: [ |
|||
{ |
|||
name: '登录', |
|||
path: 'login', |
|||
component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')), |
|||
}, |
|||
{ |
|||
name: '注册', |
|||
path: 'register', |
|||
component: dynamicWrapper(app, ['register'], () => import('../routes/User/Register')), |
|||
}, |
|||
{ |
|||
name: '注册结果', |
|||
path: 'register-result', |
|||
component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')), |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
component: dynamicWrapper(app, [], () => import('../layouts/BlankLayout')), |
|||
layout: 'BlankLayout', |
|||
children: { |
|||
name: '使用文档', |
|||
path: 'http://pro.ant.design/docs/getting-started', |
|||
target: '_blank', |
|||
icon: 'book', |
|||
}, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,132 @@ |
|||
import React from 'react'; |
|||
import dynamic from 'dva/dynamic'; |
|||
import { getMenuData } from './menu'; |
|||
|
|||
// wrapper of dynamic
|
|||
const dynamicWrapper = (app, models, component) => dynamic({ |
|||
app, |
|||
models: () => models.map(m => import(`../models/${m}.js`)), |
|||
// add routerData prop
|
|||
component: () => { |
|||
const p = component(); |
|||
return new Promise((resolve, reject) => { |
|||
p.then((Comp) => { |
|||
resolve(props => <Comp {...props} routerData={getRouterData(app)} />); |
|||
}).catch(err => reject(err)); |
|||
}); |
|||
}, |
|||
}); |
|||
|
|||
function getFlatMenuData(menus) { |
|||
let keys = {}; |
|||
menus.forEach((item) => { |
|||
if (item.children) { |
|||
keys[item.path] = item.name; |
|||
keys = { ...keys, ...getFlatMenuData(item.children) }; |
|||
} else { |
|||
keys[item.path] = item.name; |
|||
} |
|||
}); |
|||
return keys; |
|||
} |
|||
|
|||
export const getRouterData = (app) => { |
|||
const routerData = { |
|||
'/': { |
|||
component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), |
|||
}, |
|||
'/dashboard/analysis': { |
|||
component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')), |
|||
}, |
|||
'/dashboard/monitor': { |
|||
component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')), |
|||
}, |
|||
'/dashboard/workplace': { |
|||
component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')), |
|||
// hideInBreadcrumb: true,
|
|||
// name: '工作台',
|
|||
}, |
|||
'/form/basic-form': { |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/BasicForm')), |
|||
}, |
|||
'/form/step-form': { |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')), |
|||
}, |
|||
'/form/step-form/confirm': { |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')), |
|||
}, |
|||
'/form/step-form/result': { |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step3')), |
|||
}, |
|||
'/form/advanced-form': { |
|||
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/AdvancedForm')), |
|||
}, |
|||
'/list/table-list': { |
|||
component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')), |
|||
}, |
|||
'/list/basic-list': { |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')), |
|||
}, |
|||
'/list/card-list': { |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/CardList')), |
|||
}, |
|||
'/list/search': { |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/List')), |
|||
}, |
|||
'/list/search/projects': { |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/Projects')), |
|||
}, |
|||
'/list/search/applications': { |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/Applications')), |
|||
}, |
|||
'/list/search/articles': { |
|||
component: dynamicWrapper(app, ['list'], () => import('../routes/List/Articles')), |
|||
}, |
|||
'/profile/basic': { |
|||
component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/BasicProfile')), |
|||
}, |
|||
'/profile/advanced': { |
|||
component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/AdvancedProfile')), |
|||
}, |
|||
'/result/success': { |
|||
component: dynamicWrapper(app, [], () => import('../routes/Result/Success')), |
|||
}, |
|||
'/result/fail': { |
|||
component: dynamicWrapper(app, [], () => import('../routes/Result/Error')), |
|||
}, |
|||
'/exception/403': { |
|||
component: dynamicWrapper(app, [], () => import('../routes/Exception/403')), |
|||
}, |
|||
'/exception/404': { |
|||
component: dynamicWrapper(app, [], () => import('../routes/Exception/404')), |
|||
}, |
|||
'/exception/500': { |
|||
component: dynamicWrapper(app, [], () => import('../routes/Exception/500')), |
|||
}, |
|||
'/user': { |
|||
component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')), |
|||
}, |
|||
'/user/login': { |
|||
component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')), |
|||
}, |
|||
'/user/register': { |
|||
component: dynamicWrapper(app, ['register'], () => import('../routes/User/Register')), |
|||
}, |
|||
'/user/register-result': { |
|||
component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')), |
|||
}, |
|||
// '/user/:id': {
|
|||
// component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
|
|||
// },
|
|||
}; |
|||
// Get name from ./menu.js or just set it in the router data.
|
|||
const menuData = getFlatMenuData(getMenuData()); |
|||
const routerDataWithName = {}; |
|||
Object.keys(routerData).forEach((item) => { |
|||
routerDataWithName[item] = { |
|||
...routerData[item], |
|||
name: routerData[item].name || menuData[item.replace(/^\//, '')], |
|||
}; |
|||
}); |
|||
return routerDataWithName; |
|||
}; |
|||
Loading…
Reference in new issue