Merge branch 'WhatAKitty-master'

8 years ago · d93b0bf261
6 changed files with 202 additions and 76 deletions
--- a/src/common/nav.js
+++ b/src/common/nav.js
@ -1,43 +1,16 @@
-import BasicLayout from '../layouts/BasicLayout';
-import UserLayout from '../layouts/UserLayout';
-import BlankLayout from '../layouts/BlankLayout';
-
-import Analysis from '../routes/Dashboard/Analysis';
-import Monitor from '../routes/Dashboard/Monitor';
-import Workplace from '../routes/Dashboard/Workplace';
-
-import TableList from '../routes/List/TableList';
-import CoverCardList from '../routes/List/CoverCardList';
-import CardList from '../routes/List/CardList';
-import FilterCardList from '../routes/List/FilterCardList';
-import SearchList from '../routes/List/SearchList';
-import BasicList from '../routes/List/BasicList';
-
-import BasicProfile from '../routes/Profile/BasicProfile';
-import AdvancedProfile from '../routes/Profile/AdvancedProfile';
-
-import BasicForm from '../routes/Forms/BasicForm';
-import AdvancedForm from '../routes/Forms/AdvancedForm';
-import StepForm from '../routes/Forms/StepForm';
-import Step2 from '../routes/Forms/StepForm/Step2';
-import Step3 from '../routes/Forms/StepForm/Step3';
-
-import Exception403 from '../routes/Exception/403';
-import Exception404 from '../routes/Exception/404';
-import Exception500 from '../routes/Exception/500';
-
-import Success from '../routes/Result/Success';
-import Error from '../routes/Result/Error';
-
-import Login from '../routes/User/Login';
-import Register from '../routes/User/Register';
-import RegisterResult from '../routes/User/RegisterResult';
+import dynamic from 'dva/dynamic';

 const data = [{
-  component: BasicLayout,
+  component: app => dynamic({
+    app,
+    models: () => [
+      import('../models/user'),
+    ],
+    component: () => import('../layouts/BasicLayout'),
+  }),
  layout: 'BasicLayout',
  name: '首页', // for breadcrumb
-  path: '',
+  path: '/',
  children: [{
    name: 'Dashboard',
    icon: 'dashboard',
@ -45,15 +18,35 @@ const data = [{
    children: [{
      name: '分析页',
      path: 'analysis',
-      component: Analysis,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/chart'),
+        ],
+        component: () => import('../routes/Dashboard/Analysis'),
+      }),
    }, {
      name: '监控页',
      path: 'monitor',
-      component: Monitor,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/monitor'),
+        ],
+        component: () => import('../routes/Dashboard/Monitor'),
+      }),
    }, {
      name: '工作台',
      path: 'workplace',
-      component: Workplace,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/project'),
+          import('../models/activities'),
+          import('../models/chart'),
+        ],
+        component: () => import('../routes/Dashboard/Workplace'),
+      }),
    }],
  }, {
    name: '表单页',
@ -62,22 +55,52 @@ const data = [{
    children: [{
      name: '基础表单',
      path: 'basic-form',
-      component: BasicForm,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/form'),
+        ],
+        component: () => import('../routes/Forms/BasicForm'),
+      }),
    }, {
      name: '分步表单',
      path: 'step-form',
-      component: StepForm,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/form'),
+        ],
+        component: () => import('../routes/Forms/StepForm'),
+      }),
      children: [{
        path: 'confirm',
-        component: Step2,
+        component: app => dynamic({
+          app,
+          models: () => [
+            import('../models/form'),
+          ],
+          component: () => import('../routes/Forms/StepForm/Step2'),
+        }),
      }, {
        path: 'result',
-        component: Step3,
+        component: app => dynamic({
+          app,
+          models: () => [
+            import('../models/form'),
+          ],
+          component: () => import('../routes/Forms/StepForm/Step3'),
+        }),
      }],
    }, {
      name: '高级表单',
      path: 'advanced-form',
-      component: AdvancedForm,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/form'),
+        ],
+        component: () => import('../routes/Forms/AdvancedForm'),
+      }),
    }],
  }, {
    name: '列表页',
@ -86,27 +109,63 @@ const data = [{
    children: [{
      name: '查询表格',
      path: 'table-list',
-      component: TableList,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/rule'),
+        ],
+        component: () => import('../routes/List/TableList'),
+      }),
    }, {
      name: '标准列表',
      path: 'basic-list',
-      component: BasicList,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/list'),
+        ],
+        component: () => import('../routes/List/BasicList'),
+      }),
    }, {
      name: '卡片列表',
      path: 'card-list',
-      component: CardList,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/list'),
+        ],
+        component: () => import('../routes/List/CardList'),
+      }),
    }, {
      name: '搜索列表（项目）',
      path: 'cover-card-list',
-      component: CoverCardList,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/list'),
+        ],
+        component: () => import('../routes/List/CoverCardList'),
+      }),
    }, {
      name: '搜索列表（应用）',
      path: 'filter-card-list',
-      component: FilterCardList,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/list'),
+        ],
+        component: () => import('../routes/List/FilterCardList'),
+      }),
    }, {
      name: '搜索列表（文章）',
      path: 'search',
-      component: SearchList,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/list'),
+        ],
+        component: () => import('../routes/List/SearchList'),
+      }),
    }],
  }, {
    name: '详情页',
@ -115,11 +174,23 @@ const data = [{
    children: [{
      name: '基础详情页',
      path: 'basic',
-      component: BasicProfile,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/profile'),
+        ],
+        component: () => import('../routes/Profile/BasicProfile'),
+      }),
    }, {
      name: '高级详情页',
      path: 'advanced',
-      component: AdvancedProfile,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/profile'),
+        ],
+        component: () => import('../routes/Profile/AdvancedProfile'),
+      }),
    }],
  }, {
    name: '结果',
@ -128,11 +199,17 @@ const data = [{
    children: [{
      name: '成功',
      path: 'success',
-      component: Success,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Result/Success'),
+      }),
    }, {
      name: '失败',
      path: 'fail',
-      component: Error,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Result/Error'),
+      }),
    }],
  }, {
    name: '异常',
@ -141,19 +218,32 @@ const data = [{
    children: [{
      name: '403',
      path: '403',
-      component: Exception403,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Exception/403'),
+      }),
    }, {
      name: '404',
      path: '404',
-      component: Exception404,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Exception/404'),
+      }),
    }, {
      name: '500',
      path: '500',
-      component: Exception500,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Exception/500'),
+      }),
    }],
  }],
 }, {
-  component: UserLayout,
+  component: app => dynamic({
+    app,
+    component: () => import('../layouts/UserLayout'),
+  }),
+  path: '/user',
  layout: 'UserLayout',
  children: [{
    name: '帐户',
@ -162,19 +252,37 @@ const data = [{
    children: [{
      name: '登录',
      path: 'login',
-      component: Login,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/login'),
+        ],
+        component: () => import('../routes/User/Login'),
+      }),
    }, {
      name: '注册',
      path: 'register',
-      component: Register,
+      component: app => dynamic({
+        app,
+        models: () => [
+          import('../models/register'),
+        ],
+        component: () => import('../routes/User/Register'),
+      }),
    }, {
      name: '注册结果',
      path: 'register-result',
-      component: RegisterResult,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/User/RegisterResult'),
+      }),
    }],
  }],
 }, {
-  component: BlankLayout,
+  component: app => dynamic({
+    app,
+    component: () => import('../layouts/BlankLayout'),
+  }),
  layout: 'BlankLayout',
  children: {
    name: '使用文档',
--- a/src/index.js
+++ b/src/index.js
@ -1,6 +1,5 @@
 import dva from 'dva';
 import 'moment/locale/zh-cn';
-import models from './models';
 import './polyfill';
 import './g2';
 // import { browserHistory } from 'dva/router';
@ -14,10 +13,8 @@ const app = dva({
 // 2. Plugins
 // app.use({});

-// 3. Model move to router
-models.forEach((m) => {
-  app.model(m);
-});
+// 3. Register global model
+app.model(require('./models/global'));

 // 4. Router
 app.router(require('./router'));
--- a/src/index.less
+++ b/src/index.less
@ -7,3 +7,8 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
+
+.globalSpin {
+  width: 100%;
+  margin: 40px 0 !important;
+}
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@ -239,7 +239,7 @@ class BasicLayout extends React.PureComponent {
    }
  }
  render() {
-    const { currentUser, collapsed, fetchingNotices } = this.props;
+    const { app, currentUser, collapsed, fetchingNotices } = this.props;

    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
@ -352,7 +352,7 @@ class BasicLayout extends React.PureComponent {
                      exact={item.exact}
                      key={item.path}
                      path={item.path}
-                      component={item.component}
+                      component={item.component(app)}
                    />
                  )
                )
--- a/src/layouts/UserLayout.js
+++ b/src/layouts/UserLayout.js
@ -59,7 +59,7 @@ class UserLayout extends React.PureComponent {
                  exact={item.exact}
                  key={item.path}
                  path={item.path}
-                  component={item.component}
+                  component={item.component(this.props.app)}
                />
              )
            )
--- a/src/router.js
+++ b/src/router.js
@ -1,17 +1,33 @@
 import React from 'react';
 import { Router, Route, Switch } from 'dva/router';
-import { LocaleProvider } from 'antd';
+import { LocaleProvider, Spin } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
-import BasicLayout from './layouts/BasicLayout';
-import UserLayout from './layouts/UserLayout';
+import dynamic from 'dva/dynamic';
+import styles from './index.less';
+
+dynamic.setDefaultLoadingComponent(() => {
+  return <Spin size="large" className={styles.globalSpin} />;
+});
+
+function RouterConfig({ history, app }) {
+  const BasicLayout = dynamic({
+    app,
+    models: () => [
+      import('./models/user'),
+    ],
+    component: () => import('./layouts/BasicLayout'),
+  });
+  const UserLayout = dynamic({
+    app,
+    component: () => import('./layouts/UserLayout'),
+  });

-function RouterConfig({ history }) {
  return (
    <LocaleProvider locale={zhCN}>
      <Router history={history}>
        <Switch>
-          <Route path="/user" component={UserLayout} />
-          <Route path="/" component={BasicLayout} />
+          <Route path="/user" render={props => <UserLayout {...props} app={app} />} />
+          <Route path="/" render={props => <BasicLayout {...props} app={app} />} />
        </Switch>
      </Router>
    </LocaleProvider>