Merge pull request #571 from zuiidea/develop

Develop

src/components/Layout/Bread.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
-import { Link } from 'dva/router'
+import { Link } from 'react-router-dom'
 import pathToRegexp from 'path-to-regexp'
 import { queryArray } from 'utils'
 import styles from './Bread.less'
@@ -48,7 +48,7 @@ const Bread = ({ menu, location }) => {
     return (
       <Breadcrumb.Item key={key}>
         {((pathArray.length - 1) !== key)
-          ? <Link to={item.route}>
+          ? <Link to={item.route || '#'}>
             {content}
           </Link>
           : content}

src/components/Layout/Menu.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
-import { Link } from 'dva/router'
+import { Link } from 'react-router-dom'
 import { arrayToTree, queryArray } from 'utils'
 import pathToRegexp from 'path-to-regexp'
 
@@ -31,7 +31,7 @@ const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOp
       }
       return (
         <Menu.Item key={item.id}>
-          <Link to={item.route}>
+          <Link to={item.route || '#'}>
             {item.icon && <Icon type={item.icon} />}
             {(!siderFoldN || !menuTree.includes(item)) && item.name}
           </Link>
@@ -112,7 +112,7 @@ const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOp
       mode={siderFold ? 'vertical' : 'inline'}
       theme={darkTheme ? 'dark' : 'light'}
       onClick={handleClickNavMenu}
-      defaultSelectedKeys={defaultSelectedKeys}
+      selectedKeys={defaultSelectedKeys}
     >
       {menuItems}
     </Menu>

src/components/Loader/Loader.js

@@ -3,8 +3,12 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'
 
-const Loader = ({ spinning }) => {
-  return (<div className={classNames(styles.loader, { [styles.hidden]: !spinning })}>
+const Loader = ({ spinning, fullScreen }) => {
+  return (<div className={classNames(styles.loader, {
+    [styles.hidden]: !spinning,
+    [styles.fullScreen]: fullScreen,
+  })}
+  >
     <div className={styles.warpper}>
       <div className={styles.inner} />
       <div className={styles.text} >LOADING</div>
@@ -15,6 +19,7 @@ const Loader = ({ spinning }) => {
 
 Loader.propTypes = {
   spinning: PropTypes.bool,
+  fullScreen: PropTypes.bool,
 }
 
 export default Loader

src/components/Loader/Loader.less

@@ -1,64 +1,68 @@
-.loader {
-  display: block;
-  background-color: #fff;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 1;
-  text-align: center;
-
-  .warpper {
-    width: 100px;
-    height: 100px;
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
-  .inner {
-    width: 48px;
-    height: 48px;
-    margin: 0 auto;
-    text-indent: -12345px;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    border-left: 1px solid rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    z-index: 100001;
-
-    :local {
-      animation: spinner 600ms infinite linear;
-    }
-  }
-
-  .text {
-    width: 100px;
-    height: 20px;
-    text-align: center;
-    font-size: 12px;
-    letter-spacing: 4px;
-    color: #000;
-  }
-
-  &.hidden {
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
-  }
-}
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
+.loader {
+  display: block;
+  background-color: #fff;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  &.fullScreen {
+    position: fixed;
+  }
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Page/Page.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Loader from '../Loader'
+import styles from './Page.less'
+
+export default class Page extends Component {
+  render () {
+    const { className, children, loading = false, inner = false } = this.props
+    const loadingStyle = {
+      height: 'calc(100vh - 184px)',
+      overflow: 'hidden',
+    }
+    return (
+      <div
+        className={classnames(className, {
+          [styles.contentInner]: inner,
+        })}
+        style={loading ? loadingStyle : null}
+      >
+        {loading ? <Loader spinning /> : ''}
+        {children}
+      </div>
+    )
+  }
+}
+
+
+Page.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  loading: PropTypes.bool,
+  inner: PropTypes.bool,
+}

src/components/Page/Page.less

@@ -0,0 +1,14 @@
+@import "~themes/vars";
+
+.contentInner{
+  background: #fff;
+  padding: 24px;
+  box-shadow: @shadow-1;
+  min-height: e("calc(100vh - 184px)");
+}
+@media (max-width: 767px) {
+  .contentInner {
+    padding: 12px;
+    min-height: e("calc(100vh - 160px)");
+  }
+}

src/components/Page/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Page",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Page.js"
+}

src/components/index.js

@@ -6,6 +6,7 @@ import Editor from './Editor'
 import FilterItem from './FilterItem'
 import Loader from './Loader'
 import * as Layout from './Layout/index.js'
+import Page from './Page'
 
 import layer from './layer'
 
@@ -19,4 +20,5 @@ export {
   FilterItem,
   Loader,
   layer,
+  Page,
 }

src/index.js

@@ -1,7 +1,7 @@
 import { message } from 'antd'
 import dva from 'dva'
 import createLoading from 'dva-loading'
-import { browserHistory } from 'dva/router'
+import createHistory from 'history/createBrowserHistory'
 import 'babel-polyfill'
 
 // 1. Initialize
@@ -9,7 +9,7 @@ const app = dva({
   ...createLoading({
     effects: true,
   }),
-  history: browserHistory,
+  history: createHistory(),
   onError (error) {
     message.error(error.message)
   },

src/models/app.js

@@ -7,6 +7,7 @@ import config from 'config'
 import { EnumRoleType } from 'enums'
 import { query, logout } from 'services/app'
 import * as menusService from 'services/menus'
+import queryString from 'query-string'
 
 const { prefix } = config
 
@@ -41,7 +42,7 @@ export default {
           type: 'updateState',
           payload: {
             locationPathname: location.pathname,
-            locationQuery: location.query,
+            locationQuery: queryString.parse(location.search),
           },
         })
       })
@@ -97,7 +98,7 @@ export default {
         }
       } else if (config.openPages && config.openPages.indexOf(locationPathname) < 0) {
         yield put(routerRedux.push({
-          pathname: 'login',
+          pathname: '/login',
           query: {
             from: locationPathname,
           },

src/models/post.js

@@ -1,6 +1,7 @@
 import modelExtend from 'dva-model-extend'
 import { query } from 'services/posts'
 import { pageModel } from 'models/common'
+import queryString from 'query-string'
 
 export default modelExtend(pageModel, {
 
@@ -13,7 +14,7 @@ export default modelExtend(pageModel, {
           dispatch({ type: 'query',
             payload: {
               status: 2,
-              ...location.query,
+              ...queryString.parse(location.search),
             } })
         }
       })

src/models/user.js

@@ -3,6 +3,7 @@ import modelExtend from 'dva-model-extend'
 import { config } from 'utils'
 import { create, remove, update } from 'services/user'
 import * as usersService from 'services/users'
+import queryString from 'query-string'
 import { pageModel } from './common'
 
 const { query } = usersService
@@ -25,7 +26,7 @@ export default modelExtend(pageModel, {
         if (location.pathname === '/user') {
           dispatch({
             type: 'query',
-            payload: location.query,
+            payload: queryString.parse(location.search),
           })
         }
       })

src/router.js

@@ -1,149 +1,92 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Router } from 'dva/router'
+import { Switch, Route, Redirect, routerRedux } from 'dva/router'
+import dynamic from 'dva/dynamic'
 import App from 'routes/app'
 
-const registerModel = (app, model) => {
-  if (!(app._models.filter(m => m.namespace === model.namespace).length === 1)) {
-    app.model(model)
-  }
-}
+const { ConnectedRouter } = routerRedux
 
 const Routers = function ({ history, app }) {
+  const error = dynamic({
+    app,
+    component: () => import('./routes/error'),
+  })
   const routes = [
     {
-      path: '/',
-      component: App,
-      getIndexRoute (nextState, cb) {
-        require.ensure([], (require) => {
-          registerModel(app, require('models/dashboard'))
-          cb(null, { component: require('routes/dashboard/') })
-        }, 'dashboard')
-      },
-      childRoutes: [
-        {
-          path: 'dashboard',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              registerModel(app, require('models/dashboard'))
-              cb(null, require('routes/dashboard/'))
-            }, 'dashboard')
-          },
-        }, {
-          path: 'user',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              registerModel(app, require('models/user'))
-              cb(null, require('routes/user/'))
-            }, 'user')
-          },
-        }, {
-          path: 'user/:id',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              registerModel(app, require('models/user/detail'))
-              cb(null, require('routes/user/detail/'))
-            }, 'user-detail')
-          },
-        }, {
-          path: 'login',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              registerModel(app, require('models/login'))
-              cb(null, require('routes/login/'))
-            }, 'login')
-          },
-        }, {
-          path: 'request',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/request/'))
-            }, 'request')
-          },
-        }, {
-          path: 'UIElement/iconfont',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/UIElement/iconfont/'))
-            }, 'UIElement-iconfont')
-          },
-        }, {
-          path: 'UIElement/search',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/UIElement/search/'))
-            }, 'UIElement-search')
-          },
-        }, {
-          path: 'UIElement/dropOption',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/UIElement/dropOption/'))
-            }, 'UIElement-dropOption')
-          },
-        }, {
-          path: 'UIElement/layer',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/UIElement/layer/'))
-            }, 'UIElement-layer')
-          },
-        }, {
-          path: 'UIElement/dataTable',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/UIElement/dataTable/'))
-            }, 'UIElement-dataTable')
-          },
-        }, {
-          path: 'UIElement/editor',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/UIElement/editor/'))
-            }, 'UIElement-editor')
-          },
-        }, {
-          path: 'chart/lineChart',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/chart/lineChart/'))
-            }, 'chart-lineChart')
-          },
-        }, {
-          path: 'chart/barChart',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/chart/barChart/'))
-            }, 'chart-barChart')
-          },
-        }, {
-          path: 'chart/areaChart',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/chart/areaChart/'))
-            }, 'chart-areaChart')
-          },
-        }, {
-          path: 'post',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              registerModel(app, require('models/post'))
-              cb(null, require('routes/post/'))
-            }, 'post')
-          },
-        }, {
-          path: '*',
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              cb(null, require('routes/error/'))
-            }, 'error')
-          },
-        },
-      ],
+      path: '/dashboard',
+      models: () => [import('./models/dashboard')],
+      component: () => import('./routes/dashboard/'),
+    }, {
+      path: '/user',
+      models: () => [import('./models/user')],
+      component: () => import('./routes/user/'),
+    }, {
+      path: '/user/:id',
+      models: () => [import('./models/user/detail')],
+      component: () => import('./routes/user/detail/'),
+    }, {
+      path: '/login',
+      models: () => [import('./models/login')],
+      component: () => import('./routes/login/'),
+    }, {
+      path: '/request',
+      component: () => import('./routes/request/'),
+    }, {
+      path: '/UIElement/iconfont',
+      component: () => import('./routes/UIElement/iconfont/'),
+    }, {
+      path: '/UIElement/search',
+      component: () => import('./routes/UIElement/search/'),
+    }, {
+      path: '/UIElement/dropOption',
+      component: () => import('./routes/UIElement/dropOption/'),
+    }, {
+      path: '/UIElement/layer',
+      component: () => import('./routes/UIElement/layer/'),
+    }, {
+      path: '/UIElement/dataTable',
+      component: () => import('./routes/UIElement/dataTable/'),
+    }, {
+      path: '/UIElement/editor',
+      component: () => import('./routes/UIElement/editor/'),
+    }, {
+      path: '/chart/lineChart',
+      component: () => import('./routes/chart/lineChart/'),
+    }, {
+      path: '/chart/barChart',
+      component: () => import('./routes/chart/barChart/'),
+    }, {
+      path: '/chart/areaChart',
+      component: () => import('./routes/chart/areaChart/'),
+    }, {
+      path: '/post',
+      models: () => [import('./models/post')],
+      component: () => import('./routes/post/'),
     },
   ]
 
-  return <Router history={history} routes={routes} />
+  return (
+    <ConnectedRouter history={history}>
+      <App>
+        <Switch>
+          <Route exact path="/" render={() => (<Redirect to="/dashboard" />)} />
+          {
+            routes.map(({ path, ...dynamics }, key) => (
+              <Route key={key}
+                exact
+                path={path}
+                component={dynamic({
+                  app,
+                  ...dynamics,
+                })}
+              />
+            ))
+          }
+          <Route component={error} />
+        </Switch>
+      </App>
+    </ConnectedRouter>
+  )
 }
 
 Routers.propTypes = {

src/routes/app.js

@@ -7,6 +7,7 @@ import { connect } from 'dva'
 import { Layout, Loader } from 'components'
 import { classnames, config } from 'utils'
 import { Helmet } from 'react-helmet'
+import { withRouter } from 'dva/router'
 import '../themes/index.less'
 import './app.less'
 import Error from './error'
@@ -76,13 +77,13 @@ const App = ({ children, dispatch, app, loading, location }) => {
   }
   if (openPages && openPages.includes(pathname)) {
     return (<div>
-      <Loader spinning={loading.effects['app/query']} />
+      <Loader fullScreen spinning={loading.effects['app/query']} />
       {children}
     </div>)
   }
   return (
     <div>
-      <Loader spinning={loading.effects['app/query']} />
+      <Loader fullScreen spinning={loading.effects['app/query']} />
       <Helmet>
         <title>ANTD ADMIN</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -117,4 +118,4 @@ App.propTypes = {
   loading: PropTypes.object,
 }
 
-export default connect(({ app, loading }) => ({ app, loading }))(App)
+export default withRouter(connect(({ app, loading }) => ({ app, loading }))(App))

src/routes/dashboard/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
 import { color } from 'utils'
-import { Loader } from 'components'
+import { Page } from 'components'
 import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
 import styles from './index.less'
 
@@ -21,8 +21,7 @@ function Dashboard ({ dashboard, loading }) {
   </Col>))
 
   return (
-    <div>
-      <Loader spinning={loading.models.dashboard && sales.length === 0} />
+    <Page loading={loading.models.dashboard && sales.length === 0}>
       <Row gutter={24}>
         {numberCards}
         <Col lg={18} md={24}>
@@ -97,7 +96,7 @@ function Dashboard ({ dashboard, loading }) {
           </Card>
         </Col>
       </Row>
-    </div>
+    </Page>
   )
 }
 

src/routes/user/List.js

@@ -3,13 +3,16 @@ import PropTypes from 'prop-types'
 import { Table, Modal } from 'antd'
 import classnames from 'classnames'
 import { DropOption } from 'components'
-import { Link } from 'dva/router'
-import AnimTableBody from '../../components/DataTable/AnimTableBody'
+import { Link } from 'react-router-dom'
+import queryString from 'query-string'
+import AnimTableBody from 'components/DataTable/AnimTableBody'
 import styles from './List.less'
 
 const confirm = Modal.confirm
 
 const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
+  location.query = queryString.parse(location.search)
+
   const handleMenuClick = (record, e) => {
     if (e.key === '1') {
       onEditItem(record)

src/routes/user/index.js

@@ -3,11 +3,15 @@ import PropTypes from 'prop-types'
 import { routerRedux } from 'dva/router'
 import { connect } from 'dva'
 import { Row, Col, Button, Popconfirm } from 'antd'
+import { Page } from 'components'
+import queryString from 'query-string'
 import List from './List'
 import Filter from './Filter'
 import Modal from './Modal'
 
+
 const User = ({ location, dispatch, user, loading }) => {
+  location.query = queryString.parse(location.search)
   const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = user
   const { pageSize } = pagination
 
@@ -125,7 +129,7 @@ const User = ({ location, dispatch, user, loading }) => {
   }
 
   return (
-    <div className="content-inner">
+    <Page inner>
       <Filter {...filterProps} />
       {
         selectedRowKeys.length > 0 &&
@@ -140,7 +144,7 @@ const User = ({ location, dispatch, user, loading }) => {
       }
       <List {...listProps} />
       {modalVisible && <Modal {...modalProps} />}
-    </div>
+    </Page>
   )
 }