Skip to content

A
ant-design-pro
Commit e2f62c6d authored by afc163's avatar afc163
Browse files
Options

refactor menu data

parent eb9881d6
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 137 deletions
src/common/nav.js
View file @ e2f62c6d
...@@ -30,151 +30,140 @@ import Login from '../routes/User/Login'; ...@@ -30,151 +30,140 @@ import Login from '../routes/User/Login';
import Register from '../routes/User/Register'; import Register from '../routes/User/Register';
import RegisterResult from '../routes/User/RegisterResult'; import RegisterResult from '../routes/User/RegisterResult';
function userAdapter(userData) { const data = [{
userData.children.forEach((item) => { component: BasicLayout,
if (item.children) { name: '首页', // for breadcrumb
userAdapter(item); path: '',
} else {
const userItem = item;
userItem.noRoute = true;
}
});
return userData;
}
export const user = [{
name: '帐户',
icon: 'user',
path: 'user',
children: [{
name: '登录',
path: 'login',
component: Login,
}, {
name: '注册',
path: 'register',
component: Register,
}, {
name: '注册结果',
path: 'register-result',
component: RegisterResult,
}],
}];
export const menus = [{
name: 'Dashboard',
icon: 'dashboard',
path: 'dashboard',
children: [{
name: '分析页',
path: 'analysis',
component: Analysis,
}, {
name: '监控页',
path: 'monitor',
component: Monitor,
}, {
name: '工作台',
path: 'workplace',
component: Workplace,
}],
}, {
name: '表单页',
path: 'form',
icon: 'form',
children: [{ children: [{
name: '基础表单', name: 'Dashboard',
path: 'basic-form', icon: 'dashboard',
component: BasicForm, path: 'dashboard',
}, {
name: '分步表单',
path: 'step-form',
component: StepForm,
children: [{ children: [{
path: 'confirm', name: '分析页',
component: Step2, path: 'analysis',
component: Analysis,
}, {
name: '监控页',
path: 'monitor',
component: Monitor,
}, { }, {
path: 'result', name: '工作台',
component: Step3, path: 'workplace',
component: Workplace,
}], }],
}, { }, {
name: '高级表单', name: '表单页',
path: 'advanced-form', path: 'form',
component: AdvancedForm, icon: 'form',
}], children: [{
}, { name: '基础表单',
name: '列表页', path: 'basic-form',
path: 'list', component: BasicForm,
icon: 'table', }, {
children: [{ name: '分步表单',
name: '标准表格（表格查询）', path: 'step-form',
path: 'table-list', component: StepForm,
component: TableList, children: [{
}, { path: 'confirm',
name: '标准列表', component: Step2,
path: 'basic-list', }, {
component: BasicList, path: 'result',
}, { component: Step3,
name: '卡片列表', }],
path: 'card-list', }, {
component: CardList, name: '高级表单',
path: 'advanced-form',
component: AdvancedForm,
}],
}, { }, {
name: '卡片列表（封面）', name: '列表页',
path: 'cover-card-list', path: 'list',
component: CoverCardList, icon: 'table',
children: [{
name: '标准表格（表格查询）',
path: 'table-list',
component: TableList,
}, {
name: '标准列表',
path: 'basic-list',
component: BasicList,
}, {
name: '卡片列表',
path: 'card-list',
component: CardList,
}, {
name: '卡片列表（封面）',
path: 'cover-card-list',
component: CoverCardList,
}, {
name: '带筛选卡片列表',
path: 'filter-card-list',
component: FilterCardList,
}, {
name: '搜索列表',
path: 'search',
component: SearchList,
}],
}, { }, {
name: '带筛选卡片列表', name: '详情页',
path: 'filter-card-list', path: 'profile',
component: FilterCardList, component: Profile,
icon: 'profile',
}, { }, {
name: '搜索列表', name: '结果',
path: 'search', path: 'result',
component: SearchList, icon: 'check-circle-o',
}], children: [{
}, { name: '成功',
name: '详情页', path: 'success',
path: 'profile', component: Success,
component: Profile, }, {
icon: 'profile', name: '失败',
}, { path: 'fail',
name: '结果', component: Error,
path: 'result', }],
icon: 'check-circle-o',
children: [{
name: '成功',
path: 'success',
component: Success,
}, { }, {
name: '失败', name: '错误',
path: 'fail', path: 'error',
component: Error, icon: 'warning',
children: [{
name: '403',
path: '403',
component: Exception403,
}, {
name: '404',
path: '404',
component: Exception404,
}, {
name: '500',
path: '500',
component: Exception500,
}],
}], }],
}, { }, {
name: '错误', component: UserLayout,
path: 'error',
icon: 'warning',
children: [{ children: [{
name: '403', name: '帐户',
path: '403', icon: 'user',
component: Exception403, path: 'user',
}, { children: [{
name: '404', name: '登录',
path: '404', path: 'login',
component: Exception404, component: Login,
}, { }, {
name: '500', name: '注册',
path: '500', path: 'register',
component: Exception500, component: Register,
}, {
name: '注册结果',
path: 'register-result',
component: RegisterResult,
}],
}], }],
}, userAdapter(JSON.parse(JSON.stringify(user[0])))];
export default [{
component: BasicLayout,
name: '首页',
children: menus,
path: '',
}, {
component: UserLayout,
name: '账户',
children: user,
}]; }];
export function getNavData() {
return data;
}
export default data;
src/layouts/BasicLayout.js
View file @ e2f62c6d
...@@ -10,7 +10,7 @@ import styles from './BasicLayout.less'; ...@@ -10,7 +10,7 @@ import styles from './BasicLayout.less';
import HeaderSearch from '../components/HeaderSearch'; import HeaderSearch from '../components/HeaderSearch';
import NoticeIcon from '../components/NoticeIcon'; import NoticeIcon from '../components/NoticeIcon';
import GlobalFooter from '../components/GlobalFooter'; import GlobalFooter from '../components/GlobalFooter';
import { menus } from '../common/nav'; import { getNavData } from '../common/nav';
const { Header, Sider, Content } = Layout; const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu; const { SubMenu } = Menu;
...@@ -20,6 +20,11 @@ class BasicLayout extends React.PureComponent { ...@@ -20,6 +20,11 @@ class BasicLayout extends React.PureComponent {
routes: PropTypes.array, routes: PropTypes.array,
params: PropTypes.object, params: PropTypes.object,
} }
constructor(props) {
super(props);
// 把一级 Layout 的 children 作为菜单项
this.menus = getNavData().reduce((arr, current) => arr.concat(current.children), []);
}
state = { state = {
mode: 'inline', mode: 'inline',
}; };
...@@ -52,11 +57,14 @@ class BasicLayout extends React.PureComponent { ...@@ -52,11 +57,14 @@ class BasicLayout extends React.PureComponent {
const { location: { pathname } } = this.props; const { location: { pathname } } = this.props;
const keys = pathname.split('/').slice(1); const keys = pathname.split('/').slice(1);
if (keys.length === 1 && keys[0] === '') { if (keys.length === 1 && keys[0] === '') {
return [menus[0].key]; return [this.menus[0].key];
} }
return keys; return keys;
} }
getNavMenuItems(menusData, parentPath = '') { getNavMenuItems(menusData, parentPath = '') {
if (!menusData) {
return [];
}
return menusData.map((item) => { return menusData.map((item) => {
if (!item.name) { if (!item.name) {
return null; return null;
...@@ -186,7 +194,7 @@ class BasicLayout extends React.PureComponent { ...@@ -186,7 +194,7 @@ class BasicLayout extends React.PureComponent {
style={{ margin: '24px 0', width: '100%' }} style={{ margin: '24px 0', width: '100%' }}
inlineIndent={32} inlineIndent={32}
> >
{this.getNavMenuItems(menus)} {this.getNavMenuItems(this.menus)}
</Menu> </Menu>
</Sider> </Sider>
<Layout> <Layout>
......
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