Optimization: Remove the use router.js and menu.js

config/config.js

@@ -48,71 +48,141 @@ export default {
       routes: [
         // dashboard
         { path: '/', redirect: '/dashboard/analysis' },
-        { path: '/dashboard/analysis', component: './Dashboard/Analysis' },
-        { path: '/dashboard/monitor', component: './Dashboard/Monitor' },
-        { path: '/dashboard/workplace', component: './Dashboard/Workplace' },
-
+        {
+          path: '/dashboard',
+          name: 'dashboard',
+          icon: 'dashboard',
+          routes: [
+            { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
+            { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
+            { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
+          ],
+        },
         // forms
-        { path: '/form/basic-form', component: './Forms/BasicForm' },
         {
+          path: '/form',
+          icon: 'form',
+          name: 'form',
+          routes: [
+            { path: '/form/basic-form', name: 'basicform', component: './Forms/BasicForm' },
+            {
+              name: 'stepform',
               path: '/form/step-form',
               component: './Forms/StepForm',
+              hideChildren: true,
               routes: [
-            { path: '/form/step-form', redirect: '/form/step-form/info' },
-            { path: '/form/step-form/info', component: './Forms/StepForm/Step1' },
-            { path: '/form/step-form/confirm', component: './Forms/StepForm/Step2' },
-            { path: '/form/step-form/result', component: './Forms/StepForm/Step3' },
+                { path: '/form/step-form/info', name: 'info', component: './Forms/StepForm/Step1' },
+                {
+                  path: '/form/step-form/confirm',
+                  name: 'confirm',
+                  component: './Forms/StepForm/Step2',
+                },
+                {
+                  path: '/form/step-form/result',
+                  name: 'result',
+                  component: './Forms/StepForm/Step3',
+                },
+              ],
+            },
+            {
+              path: '/form/advanced-form',
+              name: 'advancedform',
+              component: './Forms/AdvancedForm',
+            },
           ],
         },
-        { path: '/form/advanced-form', component: './Forms/AdvancedForm' },
-
         // list
-        { path: '/list/table-list', component: './List/TableList' },
-        { path: '/list/table-list', component: './List/TableList' },
-        { path: '/list/basic-list', component: './List/BasicList' },
-        { path: '/list/card-list', component: './List/CardList' },
+        {
+          path: '/list',
+          icon: 'table',
+          name: 'list',
+          routes: [
+            { path: '/list/table-list', name: 'searchlist', component: './List/TableList' },
+            { path: '/list/basic-list', name: 'basiclist', component: './List/BasicList' },
+            { path: '/list/card-list', name: 'cardlist', component: './List/CardList' },
             {
               path: '/list/search',
+              name: 'searchlist',
               component: './List/List',
               routes: [
-            { path: '/list/search', redirect: '/list/search/projects' },
-            { path: '/list/search/articles', component: './List/Articles' },
-            { path: '/list/search/projects', component: './List/Projects' },
-            { path: '/list/search/applications', component: './List/Applications' },
+                { path: '/list/search/articles', name: 'articles', component: './List/Articles' },
+                { path: '/list/search/projects', name: 'projects', component: './List/Projects' },
+                {
+                  path: '/list/search/applications',
+                  name: 'applications',
+                  component: './List/Applications',
+                },
               ],
             },
-
+          ],
+        },
+        {
+          path: '/profile',
+          name: 'profile',
+          icon: 'profile',
+          routes: [
             // profile
-        { path: '/profile/basic', component: './Profile/BasicProfile' },
-        { path: '/profile/advanced', component: './Profile/AdvancedProfile' },
-
+            { path: '/profile/basic', name: 'basic', component: './Profile/BasicProfile' },
+            { path: '/profile/advanced', name: 'advanced', component: './Profile/AdvancedProfile' },
+          ],
+        },
+        {
+          name: 'result',
+          icon: 'check-circle-o',
+          path: '/result',
+          routes: [
             // result
-        { path: '/result/success', component: './Result/Success' },
-        { path: '/result/fail', component: './Result/Error' },
-
+            { path: '/result/success', name: 'success', component: './Result/Success' },
+            { path: '/result/fail', name: 'fail', component: './Result/Error' },
+          ],
+        },
+        {
+          name: 'exception',
+          icon: 'warning',
+          path: '/exception',
+          routes: [
             // exception
-        { path: '/exception/403', component: './Exception/403' },
-        { path: '/exception/404', component: './Exception/404' },
-        { path: '/exception/500', component: './Exception/500' },
-        { path: '/exception/trigger', component: './Exception/triggerException' },
-        // account
+            { path: '/exception/403', name: 'not-permission', component: './Exception/403' },
+            { path: '/exception/404', name: 'not-find', component: './Exception/404' },
+            { path: '/exception/500', name: 'server-error', component: './Exception/500' },
+            {
+              path: '/exception/trigger',
+              name: 'trigger',
+              hideInMenu: true,
+              component: './Exception/triggerException',
+            },
+          ],
+        },
+        {
+          name: 'account',
+          icon: 'user',
+          path: '/account',
+          routes: [
             {
               path: '/account/center',
+              name: 'center',
               component: './Account/Center/Center',
               routes: [
                 { path: '/account/center', redirect: '/account/center/articles' },
                 { path: '/account/center/articles', component: './Account/Center/Articles' },
-            { path: '/account/center/applications', component: './Account/Center/Applications' },
+                {
+                  path: '/account/center/applications',
+                  component: './Account/Center/Applications',
+                },
                 { path: '/account/center/projects', component: './Account/Center/Projects' },
               ],
             },
             {
               path: '/account/settings',
+              name: 'settings',
               component: './Account/Settings/Info',
               routes: [
                 { path: '/account/settings', redirect: '/account/settings/base' },
                 { path: '/account/settings/base', component: './Account/Settings/BaseView' },
-            { path: '/account/settings/security', component: './Account/Settings/SecurityView' },
+                {
+                  path: '/account/settings/security',
+                  component: './Account/Settings/SecurityView',
+                },
                 { path: '/account/settings/binding', component: './Account/Settings/BindingView' },
                 {
                   path: '/account/settings/notification',
@@ -123,6 +193,8 @@ export default {
           ],
         },
       ],
+    },
+  ],
 
   theme: {
     'card-actions-background': '#f5f8fa',

src/common/menu.js

-// TODO:remove
-// import { isUrl } from '../utils/utils';
-
+// // TODO: authority
 // const menuData = [
 //   {
 //     name: 'dashboard',
@@ -8,15 +6,15 @@
 //     path: 'dashboard',
 //     children: [
 //       {
-//         name: '分析页',
+//         name: 'analysis',
 //         path: 'analysis',
 //       },
 //       {
-//         name: '监控页',
+//         name: 'monitor',
 //         path: 'monitor',
 //       },
 //       {
-//         name: '工作台',
+//         name: 'workplace',
 //         path: 'workplace',
 //         // hideInBreadcrumb: true,
 //         // hideInMenu: true,
@@ -24,56 +22,57 @@
 //     ],
 //   },
 //   {
-//     name: '表单页',
+//     name: 'form',
 //     icon: 'form',
 //     path: 'form',
 //     children: [
 //       {
-//         name: '基础表单',
+//         name: 'basicform',
 //         path: 'basic-form',
 //       },
 //       {
-//         name: '分步表单',
+//         name: 'stepform',
 //         path: 'step-form',
 //       },
 //       {
-//         name: '高级表单',
+//         // authority: 'admin',
+//         name: 'advancedform',
 //         authority: 'admin',
 //         path: 'advanced-form',
 //       },
 //     ],
 //   },
 //   {
-//     name: '列表页',
+//     name: 'list',
 //     icon: 'table',
 //     path: 'list',
 //     children: [
 //       {
-//         name: '查询表格',
+//         name: 'searchlist',
 //         path: 'table-list',
 //       },
 //       {
-//         name: '标准列表',
+//         name: 'basiclist',
 //         path: 'basic-list',
 //       },
 //       {
-//         name: '卡片列表',
+//         name: 'cardlist',
 //         path: 'card-list',
 //       },
 //       {
-//         name: '搜索列表',
+//         name: 'searchlist',
 //         path: 'search',
 //         children: [
 //           {
-//             name: '搜索列表（文章）',
+//             name: 'articles',
 //             path: 'articles',
 //           },
 //           {
-//             name: '搜索列表（项目）',
+//             name: 'projects',
 //             path: 'projects',
 //           },
 //           {
-//             name: '搜索列表（应用）',
+//             name: 'applications',
 //             path: 'applications',
 //           },
 //         ],
@@ -81,291 +80,73 @@
 //     ],
 //   },
 //   {
-//     name: '详情页',
+//     name: 'profile',
 //     icon: 'profile',
 //     path: 'profile',
 //     children: [
 //       {
-//         name: '基础详情页',
+//         name: 'basic',
 //         path: 'basic',
 //       },
 //       {
-//         name: '高级详情页',
+//         name: 'advanced',
 //         path: 'advanced',
-//         authority: 'admin',
+//         // authority: 'admin',
 //       },
 //     ],
 //   },
 //   {
-//     name: '结果页',
+//     name: 'result',
 //     icon: 'check-circle-o',
 //     path: 'result',
 //     children: [
 //       {
-//         name: '成功',
+//         name: 'success',
 //         path: 'success',
 //       },
 //       {
-//         name: '失败',
+//         name: 'fail',
 //         path: 'fail',
 //       },
 //     ],
 //   },
 //   {
-//     name: '异常页',
+//     name: 'exception',
 //     icon: 'warning',
 //     path: 'exception',
 //     children: [
 //       {
-//         name: '403',
+//         name: 'not-permission',
 //         path: '403',
 //       },
 //       {
-//         name: '404',
+//         name: 'not-find',
 //         path: '404',
 //       },
 //       {
-//         name: '500',
+//         name: 'server-error',
 //         path: '500',
 //       },
 //       {
-//         name: '触发异常',
+//         name: 'trigger',
 //         path: 'trigger',
 //         hideInMenu: true,
 //       },
 //     ],
 //   },
 //   {
-//     name: '账户',
-//     icon: 'user',
-//     path: 'user',
-//     authority: 'guest',
-//     children: [
-//       {
-//         name: '登录',
-//         path: 'login',
-//       },
-//       {
-//         name: '注册',
-//         path: 'register',
-//       },
-//       {
-//         name: '注册结果',
-//         path: 'register-result',
-//       },
-//     ],
-//   },
-//   {
-//     name: '个人页',
+//     name: 'account',
 //     icon: 'user',
 //     path: 'account',
 //     children: [
 //       {
-//         name: '个人中心',
+//         name: 'center',
 //         path: 'center',
 //       },
 //       {
-//         name: '个人设置',
+//         name: 'settings',
 //         path: 'settings',
 //       },
 //     ],
 //   },
 // ];
-
-// function formatter(data, parentPath = '/', parentAuthority) {
-//   return data.map(item => {
-//     let { path } = item;
-//     if (!isUrl(path)) {
-//       path = parentPath + item.path;
-//     }
-//     const result = {
-//       ...item,
-//       path,
-//       authority: item.authority || parentAuthority,
-//     };
-//     if (item.children) {
-//       result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
-//     }
-//     return result;
-//   });
-// }
-
-// export const getMenuData = () => formatter(menuData);
-
-import { isUrl } from '../utils/utils';
-
-// TODO: authority
-const menuData = [
-  {
-    name: 'dashboard',
-    icon: 'dashboard',
-    path: 'dashboard',
-    children: [
-      {
-        name: 'analysis',
-        path: 'analysis',
-      },
-      {
-        name: 'monitor',
-        path: 'monitor',
-      },
-      {
-        name: 'workplace',
-        path: 'workplace',
-        // hideInBreadcrumb: true,
-        // hideInMenu: true,
-      },
-    ],
-  },
-  {
-    name: 'form',
-    icon: 'form',
-    path: 'form',
-    children: [
-      {
-        name: 'basicform',
-        path: 'basic-form',
-      },
-      {
-        name: 'stepform',
-        path: 'step-form',
-      },
-      {
-        // authority: 'admin',
-        name: 'advancedform',
-        authority: 'admin',
-        path: 'advanced-form',
-      },
-    ],
-  },
-  {
-    name: 'list',
-    icon: 'table',
-    path: 'list',
-    children: [
-      {
-        name: 'searchlist',
-        path: 'table-list',
-      },
-      {
-        name: 'basiclist',
-        path: 'basic-list',
-      },
-      {
-        name: 'cardlist',
-        path: 'card-list',
-      },
-      {
-        name: 'searchlist',
-        path: 'search',
-        children: [
-          {
-            name: 'articles',
-            path: 'articles',
-          },
-          {
-            name: 'projects',
-            path: 'projects',
-          },
-          {
-            name: 'applications',
-            path: 'applications',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    name: 'profile',
-    icon: 'profile',
-    path: 'profile',
-    children: [
-      {
-        name: 'basic',
-        path: 'basic',
-      },
-      {
-        name: 'advanced',
-        path: 'advanced',
-        // authority: 'admin',
-      },
-    ],
-  },
-  {
-    name: 'result',
-    icon: 'check-circle-o',
-    path: 'result',
-    children: [
-      {
-        name: 'success',
-        path: 'success',
-      },
-      {
-        name: 'fail',
-        path: 'fail',
-      },
-    ],
-  },
-  {
-    name: 'exception',
-    icon: 'warning',
-    path: 'exception',
-    children: [
-      {
-        name: 'not-permission',
-        path: '403',
-      },
-      {
-        name: 'not-find',
-        path: '404',
-      },
-      {
-        name: 'server-error',
-        path: '500',
-      },
-      {
-        name: 'trigger',
-        path: 'trigger',
-        hideInMenu: true,
-      },
-    ],
-  },
-  {
-    name: 'account',
-    icon: 'user',
-    path: 'account',
-    children: [
-      {
-        name: 'center',
-        path: 'center',
-      },
-      {
-        name: 'settings',
-        path: 'settings',
-      },
-    ],
-  },
-];
-
-function formatter(data, parentPath = '/', parentAuthority, parentName) {
-  return data.map(item => {
-    let { path } = item;
-    const id = parentName ? `${parentName}.${item.name}` : `menu.${item.name}`;
-
-    if (!isUrl(path)) {
-      path = parentPath + item.path;
-    }
-    const result = {
-      ...item,
-      path,
-      locale: id,
-      authority: item.authority || parentAuthority,
-    };
-    if (item.children) {
-      result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority, id);
-    }
-    return result;
-  });
-}
-
-export const getMenuData = () => formatter(menuData);

src/components/SiderMenu/BaseMenu.js

@@ -80,7 +80,8 @@ export default class BaseMenu extends PureComponent {
    * get SubMenu or Item
    */
   getSubMenuOrItem = item => {
-    if (item.children && item.children.some(child => child.name)) {
+    // doc: add hideChildren
+    if (item.children && !item.hideChildren && item.children.some(child => child.name)) {
       const name = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
       return (
         <SubMenu

src/locales/en-US.js

@@ -8,6 +8,9 @@ export default {
   'menu.form': 'Form',
   'menu.form.basicform': 'Basic Form',
   'menu.form.stepform': 'Step Form',
+  'menu.form.stepform.info': 'Step Form(write transfer information)',
+  'menu.form.stepform.confirm': 'Step Form(confirm transfer information)',
+  'menu.form.stepform.result': 'Step Form(finished)',
   'menu.form.advancedform': 'Advanced Form',
   'menu.list': 'List',
   'menu.list.searchlist': 'Search List',
@@ -17,8 +20,8 @@ export default {
   'menu.list.searchlist.projects': 'Search List（projects）',
   'menu.list.searchlist.applications': 'Search List（applications）',
   'menu.profile': 'Profile',
-  'menu.profile.basic': 'Basic',
-  'menu.profile.advanced': 'Advanced',
+  'menu.profile.basic': 'Basic Profile',
+  'menu.profile.advanced': 'Advanced Profile',
   'menu.result': 'Result',
   'menu.result.success': 'Success',
   'menu.result.fail': 'Fail',

src/locales/zh-CN.js

@@ -10,6 +10,9 @@ export default {
   'menu.form': '表单页',
   'menu.form.basicform': '基础表单',
   'menu.form.stepform': '分布表单',
+  'menu.form.stepform.info': '分步表单（填写转账信息）',
+  'menu.form.stepform.confirm': '分步表单（确认转账信息）',
+  'menu.form.stepform.result': '分步表单（完成）',
   'menu.form.advancedform': '高级表单',
   'menu.list': '列表页',
   'menu.list.searchlist': '搜索列表',
@@ -19,8 +22,8 @@ export default {
   'menu.list.searchlist.projects': '搜索列表（项目）',
   'menu.list.searchlist.applications': '搜索列表（应用）',
   'menu.profile': '详情页',
-  'menu.profile.basic': '详情页',
-  'menu.profile.advanced': '详情页',
+  'menu.profile.basic': '基础详情页',
+  'menu.profile.advanced': '高级详情页',
   'menu.result': '结果页',
   'menu.result.success': '成功页',
   'menu.result.fail': '失败页',

src/pages/document.ejs

@@ -8,8 +8,10 @@
   <title>Ant Design Pro</title>
   <link rel="icon" href="/favicon.png" type="image/x-icon">
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+  <!-- rollbar -->
   <script src="https://gw.alipayobjects.com/os/rmsportal/nGVBgVyXzzmbAqevIAPy.js">
   </script>
+  <!-- bizcharts -->
   <script src=" https://gw.alipayobjects.com/os/rmsportal/TKSqiyoUxzrHoMwjViwA.js "></script>
   <script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script>
 </head>

src/pages/layouts/BasicLayout.js

-/* eslint-disable no-unused-vars */
-// TODO remove eslint-disable
 import React from 'react';
 import { Layout } from 'antd';
 import DocumentTitle from 'react-document-title';
 import memoizeOne from 'memoize-one';
 import { connect } from 'dva';
-// import { Route, Redirect, Switch } from 'dva/router';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import pathToRegexp from 'path-to-regexp';
 import { formatMessage } from 'umi/locale';
 import SiderMenu from '../../components/SiderMenu';
-// import NotFound from '../Exception/404';
-// import { getRoutes } from '../utils/utils';
 import Authorized from '../../utils/Authorized';
 import SettingDarwer from '../../components/SettingDarwer';
 import logo from '../../assets/logo.svg';
@@ -26,13 +21,12 @@ const { check } = Authorized;
 /**
  * 获取面包屑映射
  * @param {Object} menuData 菜单配置
- * @param {Object} routerData 路由配置
  */
-const getBreadcrumbNameMap = memoizeOne((meun, router) => {
+const getBreadcrumbNameMap = memoizeOne(meun => {
   const routerMap = {};
   const mergeMeunAndRouter = meunData => {
     meunData.forEach(meunItem => {
-      routerMap[meunItem.path] = Object.assign(meunItem, router);
+      routerMap[meunItem.path] = meunItem;
       if (meunItem.children) {
         mergeMeunAndRouter(meunItem.children);
       }
@@ -70,9 +64,10 @@ const query = {
 class BasicLayout extends React.PureComponent {
   constructor(props) {
     super(props);
-    const { routerData, menuData } = this.props;
+    const { menuData } = this.props;
     this.getPageTitle = memoizeOne(this.getPageTitle);
-    this.breadcrumbNameMap = getBreadcrumbNameMap(menuData, routerData);
+    console.log(getBreadcrumbNameMap(menuData));
+    this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
   }
 
   getContext() {

src/pages/layouts/LoadingPage.js

@@ -3,14 +3,30 @@ import { Spin } from 'antd';
 import { connect } from 'dva';
 import { enquireScreen, unenquireScreen } from 'enquire-js';
 import BasicLayout from './BasicLayout';
-import { getMenuData } from '../../common/menu';
-import { getRouterData } from '../../common/router';
+// TODO: should use this.props.routes
+import config from '../../../config/config';
+const menuData = config['routes'];
+
+// change router to menu.
+function formatter(data, parentPath = '', parentAuthority, parentName) {
+  return data.map(item => {
+    const id = parentName ? `${parentName}.${item.name}` : `menu.${item.name}`;
+    const result = {
+      ...item,
+      locale: id,
+      authority: item.authority || parentAuthority,
+    };
+    if (item.routes) {
+      result.children = formatter(item.routes, `${parentPath}${item.path}/`, item.authority, id);
+    }
+    return result;
+  });
+}
 /**
  * 根据菜单取得重定向地址.
  */
-
-const MenuData = getMenuData();
-const routerData = getRouterData({});
+const MenuData = formatter(menuData[1].routes);
+const routerData = config.routes;
 const getRedirectData = () => {
   const redirectData = [];
   const getRedirect = item => {