refactor menu data

src/common/nav.js

@@ -30,38 +30,11 @@ 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',
+const data = [{
+  component: BasicLayout,
+  name: '首页',  // for breadcrumb
+  path: '',
   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',
@@ -78,7 +51,7 @@ export const menus = [{
       path: 'workplace',
       component: Workplace,
     }],
-}, {
+  }, {
     name: '表单页',
     path: 'form',
     icon: 'form',
@@ -102,7 +75,7 @@ export const menus = [{
       path: 'advanced-form',
       component: AdvancedForm,
     }],
-}, {
+  }, {
     name: '列表页',
     path: 'list',
     icon: 'table',
@@ -131,12 +104,12 @@ export const menus = [{
       path: 'search',
       component: SearchList,
     }],
-}, {
+  }, {
     name: '详情页',
     path: 'profile',
     component: Profile,
     icon: 'profile',
-}, {
+  }, {
     name: '结果',
     path: 'result',
     icon: 'check-circle-o',
@@ -149,7 +122,7 @@ export const menus = [{
       path: 'fail',
       component: Error,
     }],
-}, {
+  }, {
     name: '错误',
     path: 'error',
     icon: 'warning',
@@ -166,15 +139,31 @@ export const menus = [{
       path: '500',
       component: Exception500,
     }],
-}, userAdapter(JSON.parse(JSON.stringify(user[0])))];
-
-export default [{
-  component: BasicLayout,
-  name: '首页',
-  children: menus,
-  path: '',
+  }],
 }, {
   component: UserLayout,
-  name: '账户',
-  children: user,
+  children: [{
+    name: '帐户',
+    icon: 'user',
+    path: 'user',
+    children: [{
+      name: '登录',
+      path: 'login',
+      component: Login,
+    }, {
+      name: '注册',
+      path: 'register',
+      component: Register,
+    }, {
+      name: '注册结果',
+      path: 'register-result',
+      component: RegisterResult,
+    }],
+  }],
 }];
+
+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>