diff --git a/src/common/nav.js b/src/common/nav.js index 4eb70cf56f956d29d5708b77081b48b9431db162..e073b479028367f28deb211239366c7dd44b86d1 100644 --- 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: '使用文档', diff --git a/src/index.js b/src/index.js index 3b145434182ca7159fb3b5927f67dbe901ea91e3..d2dd78cd6196a4351756a8cfc57512b12463af83 100644 --- 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')); diff --git a/src/index.less b/src/index.less index bd58c5d5642c3c6145497427a3fc9c4d870fd47a..047d86cc24dff69bf3fbc50733e612b45e235e4e 100644 --- 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; +} diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 47fd8782cd3363d9edcf806e561ba1b1e39dda19..3ba0ad3c6676cff64d3892f5e2c097618325c618 100644 --- 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 = ( @@ -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)} /> ) ) diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js index 923983d0da6ceba852d159f70204a1003d678c70..c6212a568a81d345a1647264c3a66cbe38225503 100644 --- 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)} /> ) ) diff --git a/src/router.js b/src/router.js index cb53d6d1f6efd07f8c3b263d22740f89b44bdc3a..c82ce7116f50fcabccc14253b3801b738d90e5be 100644 --- 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 ; +}); + +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 ( - - + } /> + } />