refactor menu data

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;

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)}
             </Menu>
           </Sider>
           <Layout>