From a6eb693636f6131c7c88818669a56f3c5988aa29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=96=8C?= <892728595@qq.com> Date: Wed, 6 Sep 2017 11:13:26 +0800 Subject: [PATCH 1/6] dva@2.0 --- .roadhogrc.js | 18 +-- package.json | 15 +- src/components/Layout/Bread.js | 6 +- src/components/Layout/Menu.js | 6 +- src/components/LinkWrapper/index.js | 10 ++ src/components/index.js | 2 + src/index.js | 4 +- src/router.js | 206 ++++++++++------------------ src/routes/app.js | 3 +- src/routes/user/List.js | 4 +- 10 files changed, 114 insertions(+), 160 deletions(-) create mode 100644 src/components/LinkWrapper/index.js diff --git a/.roadhogrc.js b/.roadhogrc.js index 1f65c6a..9b76d6f 100644 --- a/.roadhogrc.js +++ b/.roadhogrc.js @@ -7,17 +7,17 @@ const svgSpriteDirs = [ ] export default { - entry : 'src/index.js', - svgSpriteLoaderDirs : svgSpriteDirs, - theme : "./theme.config.js", - publicPath : `/${version}/`, - outputPath : `./dist/${version}`, + entry: 'src/index.js', + svgSpriteLoaderDirs: svgSpriteDirs, + theme: "./theme.config.js", + publicPath: `/${version}/`, + outputPath: `./dist/${version}`, // 接口代理示例 proxy: { "/api/v1/weather": { "target": "https://api.seniverse.com/", "changeOrigin": true, - "pathRewrite": { "^/api/v1/weather" : "/v3/weather" } + "pathRewrite": { "^/api/v1/weather": "/v3/weather" } }, // "/api/v2": { // "target": "http://192.168.0.110", @@ -25,7 +25,7 @@ export default { // "pathRewrite": { "^/api/v2" : "/api/v2" } // } }, - env : { + env: { development: { extraBabelPlugins: [ "dva-hmr", @@ -50,8 +50,8 @@ export default { ] } }, - dllPlugin : { - exclude: ["babel-runtime"], + dllPlugin: { + exclude: ["babel-runtime", "roadhog", "cross-env"], include: ["dva/router", "dva/saga", "dva/fetch"] } } diff --git a/package.json b/package.json index 49962fd..bf076d8 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,13 @@ "axios": "^0.16.2", "babel-polyfill": "^6.23.0", "classnames": "^2.2.5", + "cross-env": "^5.0.5", "d3-shape": "^1.2.0", "draftjs-to-markdown": "^0.4.0", - "dva": "^1.2.0", + "dva": "^2.0.1", "dva-loading": "^0.2.0", "ejs-loader": "^0.3.0", + "history": "^4.7.2", "js-beautify": "^1.6.14", "jsonp": "^0.2.1", "less-vars-to-js": "^1.1.2", @@ -21,6 +23,7 @@ "path-to-regexp": "^1.7.0", "prop-types": "^15.5.10", "qs": "^6.5.0", + "query-string": "^5.0.0", "rc-tween-one": "^1.3.1", "react": "^15.6.1", "react-countup": "^2.1.1", @@ -50,14 +53,16 @@ "html-webpack-plugin": "^2.29.0", "html-webpack-template": "^5.6.0", "redbox-react": "^1.2.10", - "roadhog": "1.0.0-beta.7" + "roadhog": "^1.2.2" }, - "pre-commit": ["lint"], + "pre-commit": [ + "lint" + ], "scripts": { - "dev": "set BROWSER=none&&set HOST=0.0.0.0&&roadhog server", + "dev": "cross-env BROWSER=none HOST=0.0.0.0 roadhog server", "lint": "eslint --fix --ext .js src", "build": "roadhog build", "build:dll": "roadhog buildDll", "build:new": "node version && roadhog build" } -} \ No newline at end of file +} diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index ad4d5b5..be05ef4 100644 --- a/src/components/Layout/Bread.js +++ b/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 { LinkWrapper } from 'components' import pathToRegexp from 'path-to-regexp' import { queryArray } from 'utils' import styles from './Bread.less' @@ -48,9 +48,9 @@ const Bread = ({ menu, location }) => { return ( {((pathArray.length - 1) !== key) - ? + ? {content} - + : content} ) diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index 3662b87..60e42ff 100644 --- a/src/components/Layout/Menu.js +++ b/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 { LinkWrapper } from 'components' import { arrayToTree, queryArray } from 'utils' import pathToRegexp from 'path-to-regexp' @@ -31,10 +31,10 @@ const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOp } return ( - + {item.icon && } {(!siderFoldN || !menuTree.includes(item)) && item.name} - + ) }) diff --git a/src/components/LinkWrapper/index.js b/src/components/LinkWrapper/index.js new file mode 100644 index 0000000..320e315 --- /dev/null +++ b/src/components/LinkWrapper/index.js @@ -0,0 +1,10 @@ +import { Link } from 'react-router-dom' + +export default (props) => { + const Component = props.to ? Link : 'a' + return ( + + {props.children} + + ) +} diff --git a/src/components/index.js b/src/components/index.js index 6694a34..2c8a0d6 100644 --- a/src/components/index.js +++ b/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 LinkWrapper from './LinkWrapper' import layer from './layer' @@ -19,4 +20,5 @@ export { FilterItem, Loader, layer, + LinkWrapper, } diff --git a/src/index.js b/src/index.js index 3be2c3c..e880e17 100644 --- a/src/index.js +++ b/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) }, diff --git a/src/router.js b/src/router.js index ec8f046..0813662 100644 --- a/src/router.js +++ b/src/router.js @@ -1,149 +1,85 @@ import React from 'react' import PropTypes from 'prop-types' -import { Router } from 'dva/router' +import { Router, 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 + return ( + + + + ()} /> + { + routes.map(({ path, ...dynamics }, key) => ( + + )) + } + + + + + ) } Routers.propTypes = { diff --git a/src/routes/app.js b/src/routes/app.js index 9e75aad..3ec5dbb 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -10,6 +10,7 @@ import { Helmet } from 'react-helmet' import '../themes/index.less' import './app.less' import Error from './error' +import { withRouter } from 'dva/router' const { prefix, openPages } = config @@ -116,4 +117,4 @@ App.propTypes = { loading: PropTypes.object, } -export default connect(({ app, loading }) => ({ app, loading }))(App) +export default withRouter(connect(({ app, loading }) => ({ app, loading }))(App)) diff --git a/src/routes/user/List.js b/src/routes/user/List.js index e80c2b5..cd7543a 100644 --- a/src/routes/user/List.js +++ b/src/routes/user/List.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { Table, Modal } from 'antd' import classnames from 'classnames' import { DropOption } from 'components' -import { Link } from 'dva/router' +import { LinkWrapper } from 'components' import AnimTableBody from '../../components/DataTable/AnimTableBody' import styles from './List.less' @@ -35,7 +35,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) = title: 'Name', dataIndex: 'name', key: 'name', - render: (text, record) => {text}, + render: (text, record) => {text}, }, { title: 'NickName', dataIndex: 'nickName', From 7bf031699aa643d67cfa30ec64214326f6052efe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=96=8C?= <892728595@qq.com> Date: Wed, 6 Sep 2017 20:36:14 +0800 Subject: [PATCH 2/6] add LoadingComponent --- package.json | 3 +-- src/components/Loader/Loader.js | 8 ++++++-- src/components/Loader/Loader.less | 6 +++++- src/router.js | 7 ++++++- src/routes/app.js | 16 ++++++++-------- 5 files changed, 26 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index bf076d8..03d1b02 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,7 @@ "react-dom": "^15.6.1", "react-draft-wysiwyg": "^1.10.0", "react-helmet": "^5.1.3", - "recharts": "^0.22.4", - "roadhog": "^1.2.1" + "recharts": "^0.22.4" }, "devDependencies": { "babel-eslint": "^7.2.3", diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js index fe24a19..2d2943f 100644 --- a/src/components/Loader/Loader.js +++ b/src/components/Loader/Loader.js @@ -3,8 +3,11 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import styles from './Loader.less' -const Loader = ({ spinning }) => { - return (
+const Loader = ({ spinning, fullScreen }) => { + return (
LOADING
@@ -15,6 +18,7 @@ const Loader = ({ spinning }) => { Loader.propTypes = { spinning: PropTypes.bool, + fullScreen: PropTypes.bool, } export default Loader diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less index ba3685a..723402d 100644 --- a/src/components/Loader/Loader.less +++ b/src/components/Loader/Loader.less @@ -1,8 +1,12 @@ +.loader_fullScreen { + position: fixed !important; +} + .loader { display: block; background-color: #fff; width: 100%; - position: fixed; + position: absolute; top: 0; bottom: 0; left: 0; diff --git a/src/router.js b/src/router.js index 0813662..4aef55a 100644 --- a/src/router.js +++ b/src/router.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import { Router, Switch, Route, Redirect, routerRedux } from 'dva/router' import dynamic from 'dva/dynamic' import App from 'routes/app' +import { Loader } from 'components' const { ConnectedRouter } = routerRedux @@ -72,7 +73,11 @@ const Routers = function ({ history, app }) { ()} /> { routes.map(({ path, ...dynamics }, key) => ( - + (), + ...dynamics + })} /> )) } diff --git a/src/routes/app.js b/src/routes/app.js index 3ec5dbb..5569caa 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -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 } }) }, @@ -76,13 +76,13 @@ const App = ({ children, dispatch, app, loading, location }) => { } if (openPages && openPages.includes(pathname)) { return (
- + {children}
) } return (
- + ANTD ADMIN From d3e7e177899f5db53d793e91ec528b009ba0921e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=96=8C?= <892728595@qq.com> Date: Fri, 8 Sep 2017 13:20:25 +0800 Subject: [PATCH 3/6] query-string --- src/models/app.js | 3 ++- src/models/post.js | 3 ++- src/models/user.js | 3 ++- src/routes/user/List.js | 3 +++ src/routes/user/index.js | 2 ++ 5 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/models/app.js b/src/models/app.js index c5d0a34..5e2f7a0 100644 --- a/src/models/app.js +++ b/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), }, }) }) diff --git a/src/models/post.js b/src/models/post.js index 6ed99a8..1e3c7a1 100644 --- a/src/models/post.js +++ b/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), } }) } }) diff --git a/src/models/user.js b/src/models/user.js index 0a789e7..cfaf1fa 100644 --- a/src/models/user.js +++ b/src/models/user.js @@ -4,6 +4,7 @@ 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' const { query } = usersService const { prefix } = config @@ -25,7 +26,7 @@ export default modelExtend(pageModel, { if (location.pathname === '/user') { dispatch({ type: 'query', - payload: location.query, + payload: queryString.parse(location.search), }) } }) diff --git a/src/routes/user/List.js b/src/routes/user/List.js index cd7543a..8f43f5d 100644 --- a/src/routes/user/List.js +++ b/src/routes/user/List.js @@ -5,11 +5,14 @@ import classnames from 'classnames' import { DropOption } from 'components' import { LinkWrapper } from 'components' import AnimTableBody from '../../components/DataTable/AnimTableBody' +import queryString from 'query-string' 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) diff --git a/src/routes/user/index.js b/src/routes/user/index.js index df64acd..258899d 100644 --- a/src/routes/user/index.js +++ b/src/routes/user/index.js @@ -6,8 +6,10 @@ import { Row, Col, Button, Popconfirm } from 'antd' 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) const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = user const { pageSize } = pagination From dbcc90e7ad9b7155c4e81fa272ab104299330a76 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 8 Sep 2017 16:41:05 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E5=87=BA=E5=8E=BB=E5=90=83=E7=83=A7?= =?UTF-8?q?=E7=83=A4,=E5=9B=9E=E6=9D=A5=E6=8E=A5=E7=9D=80=E7=9C=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Loader/Loader.js | 5 +- src/components/Loader/Loader.less | 136 +++++++++++++++--------------- src/components/Page/Page.js | 19 +++++ src/components/Page/Page.less | 68 +++++++++++++++ src/components/Page/package.json | 6 ++ src/components/index.js | 2 + src/models/app.js | 2 +- src/router.js | 15 ++-- src/routes/dashboard/index.js | 7 +- 9 files changed, 179 insertions(+), 81 deletions(-) create mode 100644 src/components/Page/Page.js create mode 100644 src/components/Page/Page.less create mode 100644 src/components/Page/package.json diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js index 2d2943f..e9edb99 100644 --- a/src/components/Loader/Loader.js +++ b/src/components/Loader/Loader.js @@ -6,8 +6,9 @@ import styles from './Loader.less' const Loader = ({ spinning, fullScreen }) => { return (
+ [styles.fullScreen]: fullScreen, + })} + >
LOADING
diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less index 723402d..fed0403 100644 --- a/src/components/Loader/Loader.less +++ b/src/components/Loader/Loader.less @@ -1,68 +1,68 @@ -.loader_fullScreen { - position: fixed !important; -} - -.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; - - .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); + } +} diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js new file mode 100644 index 0000000..5d37ade --- /dev/null +++ b/src/components/Page/Page.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react' +import classnames from 'classnames' +import Loader from '../Loader' + +export default class Page extends Component { + render () { + const { className, children, loading = false } = this.props + const loadingStyle = { + height: 'calc(100vh - 184px)', + overflow: 'hidden', + } + return ( +
+ {loading ? : ''} + {children} +
+ ) + } +} diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less new file mode 100644 index 0000000..fed0403 --- /dev/null +++ b/src/components/Page/Page.less @@ -0,0 +1,68 @@ +.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); + } +} diff --git a/src/components/Page/package.json b/src/components/Page/package.json new file mode 100644 index 0000000..a3811bd --- /dev/null +++ b/src/components/Page/package.json @@ -0,0 +1,6 @@ +{ + "name": "Page", + "version": "0.0.0", + "private": true, + "main": "./Page.js" +} diff --git a/src/components/index.js b/src/components/index.js index 2c8a0d6..a1a372c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,6 +7,7 @@ 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,4 +22,5 @@ export { Loader, layer, LinkWrapper, + Page, } diff --git a/src/models/app.js b/src/models/app.js index 5e2f7a0..7a205a5 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -98,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, }, diff --git a/src/router.js b/src/router.js index 4aef55a..542018c 100644 --- a/src/router.js +++ b/src/router.js @@ -70,14 +70,17 @@ const Routers = function ({ history, app }) { - ()} /> + ()} /> { routes.map(({ path, ...dynamics }, key) => ( - (), - ...dynamics - })} /> + )) } diff --git a/src/routes/dashboard/index.js b/src/routes/dashboard/index.js index 8466d54..fd9b8ee 100644 --- a/src/routes/dashboard/index.js +++ b/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 }) { )) return ( -
- + {numberCards} @@ -97,7 +96,7 @@ function Dashboard ({ dashboard, loading }) { -
+ ) } From d1b373201eeab0c07fc12610e645d90f21262b74 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Sat, 9 Sep 2017 14:20:51 +0800 Subject: [PATCH 5/6] fix some grammar and details --- .eslintrc | 1 + src/components/Layout/Bread.js | 6 +-- src/components/Layout/Menu.js | 8 ++-- src/components/LinkWrapper/index.js | 10 ---- src/components/Page/Page.js | 19 +++++++- src/components/Page/Page.less | 74 ++++------------------------- src/components/index.js | 2 - src/models/user.js | 2 +- src/router.js | 3 +- src/routes/app.js | 14 +++--- src/routes/user/List.js | 6 +-- src/routes/user/index.js | 8 ++-- 12 files changed, 52 insertions(+), 101 deletions(-) delete mode 100644 src/components/LinkWrapper/index.js diff --git a/.eslintrc b/.eslintrc index 3710267..e02cdc0 100644 --- a/.eslintrc +++ b/.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, diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index be05ef4..0f11801 100644 --- a/src/components/Layout/Bread.js +++ b/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 ( {((pathArray.length - 1) !== key) - ? + ? {content} - + : content} ) diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index 60e42ff..0e1e176 100644 --- a/src/components/Layout/Menu.js +++ b/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 ( - + {item.icon && } {(!siderFoldN || !menuTree.includes(item)) && item.name} - + ) }) @@ -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} diff --git a/src/components/LinkWrapper/index.js b/src/components/LinkWrapper/index.js deleted file mode 100644 index 320e315..0000000 --- a/src/components/LinkWrapper/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Link } from 'react-router-dom' - -export default (props) => { - const Component = props.to ? Link : 'a' - return ( - - {props.children} - - ) -} diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 5d37ade..fc2eb45 100644 --- a/src/components/Page/Page.js +++ b/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 ( -
+
{loading ? : ''} {children}
) } } + + +Page.propTypes = { + className: PropTypes.string, + children: PropTypes.node, + loading: PropTypes.bool, + inner: PropTypes.bool, +} diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less index fed0403..5a1e1b5 100644 --- a/src/components/Page/Page.less +++ b/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)"); } } diff --git a/src/components/index.js b/src/components/index.js index a1a372c..492e40c 100644 --- a/src/components/index.js +++ b/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, } diff --git a/src/models/user.js b/src/models/user.js index cfaf1fa..fb61317 100644 --- a/src/models/user.js +++ b/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 diff --git a/src/router.js b/src/router.js index 542018c..066d672 100644 --- a/src/router.js +++ b/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 diff --git a/src/routes/app.js b/src/routes/app.js index 5569caa..cc662a7 100644 --- a/src/routes/app.js +++ b/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 } }) }, diff --git a/src/routes/user/List.js b/src/routes/user/List.js index 8f43f5d..abf1c03 100644 --- a/src/routes/user/List.js +++ b/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) => {text}, + render: (text, record) => {text}, }, { title: 'NickName', dataIndex: 'nickName', diff --git a/src/routes/user/index.js b/src/routes/user/index.js index 258899d..696d180 100644 --- a/src/routes/user/index.js +++ b/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 ( -
+ { selectedRowKeys.length > 0 && @@ -142,7 +144,7 @@ const User = ({ location, dispatch, user, loading }) => { } {modalVisible && } -
+ ) } From dedd34e8e8f41fe0c5057fdf9fa4e4f864453613 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Sat, 9 Sep 2017 14:50:47 +0800 Subject: [PATCH 6/6] 4.3.5 --- README.md | 35 ++++++++--------------------------- package.json | 8 +++----- 2 files changed, 11 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index ccda839..189e9a9 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![React](https://img.shields.io/badge/react-^15.6.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react) [![Ant Design](https://img.shields.io/badge/ant--design-^2.11.2-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design) -[![dva](https://img.shields.io/badge/dva-^1.2.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva) +[![dva](https://img.shields.io/badge/dva-^2.0.1-orange.svg?style=flat-square)](https://github.com/dvajs/dva) [![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls) @@ -21,6 +21,13 @@ ## 更新日志 + +### 4.3.5 + +`2017-09-04` + +-   更新[dva](https://github.com/dvajs/dva)至`2.0.1`，感谢[@yangbin1994](https://github.com/yangbin1994)的[PR](https://github.com/zuiidea/antd-admin/pull/567)。 + ### 4.3.4 `2017-09-04` @@ -38,32 +45,6 @@ -   新增打包时按项目版本号生成文件目录。[#449](https://github.com/zuiidea/antd-admin/issues/449) -   更新`eslint`，并适当修改了`.eslintrc`。 -### 4.2.3 - -`2017-07-07` - --   新增用户按权限访问。[#384](https://github.com/zuiidea/antd-admin/issues/384) - -### 4.2.2 - -`2017-06-01` - --   新增用户管理批量删除。[#320](https://github.com/zuiidea/antd-admin/issues/320) - -### 4.2.1 - -`2017-05-12` - --   新增IconFont扩展方案,本地使用方案。[#270](https://github.com/zuiidea/antd-admin/issues/270) [Live](http://47.92.30.98:666/UIElement/iconfont) --   新增常见场景使用loading。 [dva-loading](https://github.com/dvajs/dva-loading) - -### 4.2 - -`2017-04-28` - -- 修改user相关API使用`Restful`风格。 -- 增加user页面多条件查询。[#266](https://github.com/zuiidea/antd-admin/issues/226) -- 修复菜单默认高亮。[#201](https://github.com/zuiidea/antd-admin/issues/201) [More Change Log](https://github.com/zuiidea/antd-admin/wiki/Change-Log) diff --git a/package.json b/package.json index 653f5c6..3c41117 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "antd-admin", - "version": "4.3.4", + "version": "4.3.5", "dependencies": { "antd": "^2.11.2", "axios": "^0.16.2", @@ -53,9 +53,7 @@ "redbox-react": "^1.2.10", "roadhog": "^1.2.2" }, - "pre-commit": [ - "lint" - ], + "pre-commit": ["lint"], "scripts": { "dev": "cross-env BROWSER=none HOST=0.0.0.0 roadhog server", "lint": "eslint --fix --ext .js src", @@ -63,4 +61,4 @@ "build:dll": "roadhog buildDll", "build:new": "node version && roadhog build" } -} +} \ No newline at end of file