fix some grammar and details

.eslintrc

@@ -32,6 +32,7 @@
     "react/forbid-prop-types": 0,
     "react/no-string-refs": 0,
     "react/no-find-dom-node": 0,
+    "react/prefer-stateless-function": 0,
     "import/no-extraneous-dependencies": 0,
     "import/prefer-default-export": 0,
     "react/no-danger": 0,

src/components/Layout/Bread.js

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

src/components/Layout/Menu.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
-import { LinkWrapper } from 'components'
+import { Link } from 'react-router-dom'
 import { arrayToTree, queryArray } from 'utils'
 import pathToRegexp from 'path-to-regexp'
 
@@ -31,10 +31,10 @@ const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOp
       }
       return (
         <Menu.Item key={item.id}>
-          <LinkWrapper to={item.route}>
+          <Link to={item.route || '#'}>
             {item.icon && <Icon type={item.icon} />}
             {(!siderFoldN || !menuTree.includes(item)) && item.name}
-          </LinkWrapper>
+          </Link>
         </Menu.Item>
       )
     })
@@ -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/LinkWrapper/index.js

@@ -1,10 +0,0 @@
-import { Link } from 'react-router-dom'
-
-export default (props) => {
-  const Component = props.to ? Link : 'a'
-  return (
-    <Component {...props}>
-      {props.children}
-    </Component>
-  )
-}

src/components/Page/Page.js

@@ -1,19 +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 } = this.props
+    const { className, children, loading = false, inner = false } = this.props
     const loadingStyle = {
       height: 'calc(100vh - 184px)',
       overflow: 'hidden',
     }
     return (
-      <div className={classnames(className)} style={loading ? loadingStyle : null}>
+      <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

@@ -1,68 +1,14 @@
-.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;
+@import "~themes/vars";
 
-  &.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;
-  }
+.contentInner{
+  background: #fff;
+  padding: 24px;
+  box-shadow: @shadow-1;
+  min-height: e("calc(100vh - 184px)");
 }
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
+@media (max-width: 767px) {
+  .contentInner {
+    padding: 12px;
+    min-height: e("calc(100vh - 160px)");
   }
 }

src/components/index.js

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

src/models/user.js

@@ -3,8 +3,8 @@ import modelExtend from 'dva-model-extend'
 import { config } from 'utils'
 import { create, remove, update } from 'services/user'
 import * as usersService from 'services/users'
-import { pageModel } from './common'
 import queryString from 'query-string'
+import { pageModel } from './common'
 
 const { query } = usersService
 const { prefix } = config

src/router.js

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Router, Switch, Route, Redirect, routerRedux } from 'dva/router'
+import { Switch, Route, Redirect, routerRedux } from 'dva/router'
 import dynamic from 'dva/dynamic'
 import App from 'routes/app'
-import { Loader } from 'components'
 
 const { ConnectedRouter } = routerRedux
 

src/routes/app.js

@@ -7,10 +7,10 @@ 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'
-import { withRouter } from 'dva/router'
 
 const { prefix, openPages } = config
 
@@ -41,16 +41,16 @@ const App = ({ children, dispatch, app, loading, location }) => {
     isNavbar,
     menuPopoverVisible,
     navOpenKeys,
-    switchMenuPopover() {
+    switchMenuPopover () {
       dispatch({ type: 'app/switchMenuPopver' })
     },
-    logout() {
+    logout () {
       dispatch({ type: 'app/logout' })
     },
-    switchSider() {
+    switchSider () {
       dispatch({ type: 'app/switchSider' })
     },
-    changeOpenKeys(openKeys) {
+    changeOpenKeys (openKeys) {
       dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     },
   }
@@ -61,10 +61,10 @@ const App = ({ children, dispatch, app, loading, location }) => {
     siderFold,
     darkTheme,
     navOpenKeys,
-    changeTheme() {
+    changeTheme () {
       dispatch({ type: 'app/switchTheme' })
     },
-    changeOpenKeys(openKeys) {
+    changeOpenKeys (openKeys) {
       window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
       dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     },

src/routes/user/List.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import { Table, Modal } from 'antd'
 import classnames from 'classnames'
 import { DropOption } from 'components'
-import { LinkWrapper } from 'components'
-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
@@ -38,7 +38,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
       title: 'Name',
       dataIndex: 'name',
       key: 'name',
-      render: (text, record) => <LinkWrapper to={`user/${record.id}`}>{text}</LinkWrapper>,
+      render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
     }, {
       title: 'NickName',
       dataIndex: 'nickName',

src/routes/user/index.js

@@ -3,10 +3,12 @@ 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'
-import queryString from 'query-string'
+
 
 const User = ({ location, dispatch, user, loading }) => {
   location.query = queryString.parse(location.search)
@@ -127,7 +129,7 @@ const User = ({ location, dispatch, user, loading }) => {
   }
 
   return (
-    <div className="content-inner">
+    <Page inner>
       <Filter {...filterProps} />
       {
         selectedRowKeys.length > 0 &&
@@ -142,7 +144,7 @@ const User = ({ location, dispatch, user, loading }) => {
       }
       <List {...listProps} />
       {modalVisible && <Modal {...modalProps} />}
-    </div>
+    </Page>
   )
 }