From e2f62c6d4d31f024621a8c88fb920ae9e22f4eb4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 5 Sep 2017 21:46:48 +0800 Subject: [PATCH] refactor menu data --- src/common/nav.js | 257 ++++++++++++++++++------------------- src/layouts/BasicLayout.js | 14 +- 2 files changed, 134 insertions(+), 137 deletions(-) diff --git a/src/common/nav.js b/src/common/nav.js index 2a9f9c4d..50d71b85 100644 --- a/src/common/nav.js +++ b/src/common/nav.js @@ -30,151 +30,140 @@ import Login from '../routes/User/Login'; import Register from '../routes/User/Register'; import RegisterResult from '../routes/User/RegisterResult'; -function userAdapter(userData) { - userData.children.forEach((item) => { - if (item.children) { - userAdapter(item); - } 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', +const data = [{ + component: BasicLayout, + name: '首页', // for breadcrumb + path: '', children: [{ - name: '基础表单', - path: 'basic-form', - component: BasicForm, - }, { - name: '分步表单', - path: 'step-form', - component: StepForm, + name: 'Dashboard', + icon: 'dashboard', + path: 'dashboard', children: [{ - path: 'confirm', - component: Step2, + name: '分析页', + path: 'analysis', + component: Analysis, + }, { + name: '监控页', + path: 'monitor', + component: Monitor, }, { - path: 'result', - component: Step3, + name: '工作台', + path: 'workplace', + component: Workplace, }], }, { - name: '高级表单', - path: 'advanced-form', - component: AdvancedForm, - }], -}, { - name: '列表页', - path: 'list', - icon: 'table', - children: [{ - name: '标准表格（表格查询）', - path: 'table-list', - component: TableList, - }, { - name: '标准列表', - path: 'basic-list', - component: BasicList, - }, { - name: '卡片列表', - path: 'card-list', - component: CardList, + name: '表单页', + path: 'form', + icon: 'form', + children: [{ + name: '基础表单', + path: 'basic-form', + component: BasicForm, + }, { + name: '分步表单', + path: 'step-form', + component: StepForm, + children: [{ + path: 'confirm', + component: Step2, + }, { + path: 'result', + component: Step3, + }], + }, { + name: '高级表单', + path: 'advanced-form', + component: AdvancedForm, + }], }, { - name: '卡片列表（封面）', - path: 'cover-card-list', - component: CoverCardList, + name: '列表页', + path: 'list', + 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: '带筛选卡片列表', - path: 'filter-card-list', - component: FilterCardList, + name: '详情页', + path: 'profile', + component: Profile, + icon: 'profile', }, { - name: '搜索列表', - path: 'search', - component: SearchList, - }], -}, { - name: '详情页', - path: 'profile', - component: Profile, - icon: 'profile', -}, { - name: '结果', - path: 'result', - icon: 'check-circle-o', - children: [{ - name: '成功', - path: 'success', - component: Success, + name: '结果', + path: 'result', + icon: 'check-circle-o', + children: [{ + name: '成功', + path: 'success', + component: Success, + }, { + name: '失败', + path: 'fail', + component: Error, + }], }, { - name: '失败', - path: 'fail', - component: Error, + name: '错误', + path: 'error', + icon: 'warning', + children: [{ + name: '403', + path: '403', + component: Exception403, + }, { + name: '404', + path: '404', + component: Exception404, + }, { + name: '500', + path: '500', + component: Exception500, + }], }], }, { - name: '错误', - path: 'error', - icon: 'warning', + component: UserLayout, children: [{ - name: '403', - path: '403', - component: Exception403, - }, { - name: '404', - path: '404', - component: Exception404, - }, { - name: '500', - path: '500', - component: Exception500, + name: '帐户', + icon: 'user', + path: 'user', + children: [{ + name: '登录', + path: 'login', + component: Login, + }, { + name: '注册', + path: 'register', + 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; diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 2a6e63fd..86b61bee 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -10,7 +10,7 @@ import styles from './BasicLayout.less'; import HeaderSearch from '../components/HeaderSearch'; import NoticeIcon from '../components/NoticeIcon'; import GlobalFooter from '../components/GlobalFooter'; -import { menus } from '../common/nav'; +import { getNavData } from '../common/nav'; const { Header, Sider, Content } = Layout; const { SubMenu } = Menu; @@ -20,6 +20,11 @@ class BasicLayout extends React.PureComponent { routes: PropTypes.array, params: PropTypes.object, } + constructor(props) { + super(props); + // 把一级 Layout 的 children 作为菜单项 + this.menus = getNavData().reduce((arr, current) => arr.concat(current.children), []); + } state = { mode: 'inline', }; @@ -52,11 +57,14 @@ class BasicLayout extends React.PureComponent { const { location: { pathname } } = this.props; const keys = pathname.split('/').slice(1); if (keys.length === 1 && keys[0] === '') { - return [menus[0].key]; + return [this.menus[0].key]; } return keys; } getNavMenuItems(menusData, parentPath = '') { + if (!menusData) { + return []; + } return menusData.map((item) => { if (!item.name) { return null; @@ -186,7 +194,7 @@ class BasicLayout extends React.PureComponent { style={{ margin: '24px 0', width: '100%' }} inlineIndent={32} > - {this.getNavMenuItems(menus)} + {this.getNavMenuItems(this.menus)} -- GitLab