From 261fbb84286e41e2cedb7094206a9bc13363bd2a Mon Sep 17 00:00:00 2001 From: zuiidea Date: Sat, 8 Sep 2018 17:10:20 +0800 Subject: [PATCH] Support Stylelint. Added Prettierrc. Optimize the configuration file .umirc.js, and Added annotations. Replace eslint-plugin-umi to eslint-plugin-react-app as eslint bese plugin. And so on. --- .eslintrc | 47 +- .gitignore | 2 +- package.json | 33 +- src/components/DataTable/AnimTableBody.js | 30 +- src/components/DataTable/DataTable.js | 60 +- src/components/DropOption/DropOption.js | 29 +- src/components/Editor/Editor.js | 12 +- src/components/Editor/Editor.less | 13 +- src/components/FilterItem/FilterItem.js | 23 +- src/components/Iconfont/Iconfont.js | 9 +- src/components/Layout/Bread.js | 42 +- src/components/Layout/Header.js | 53 +- src/components/Layout/Header.less | 3 +- src/components/Layout/Layout.less | 12 +- src/components/Layout/Menu.js | 43 +- src/components/Layout/Sider.js | 28 +- src/components/Loader/Loader.js | 22 +- src/components/Loader/Loader.less | 1 - src/components/Page/Page.js | 5 +- src/components/Page/Page.less | 8 +- src/components/Search/Search.js | 47 +- src/components/Search/Search.less | 4 +- src/components/layer/layer.js | 84 +- src/layouts/app.js | 78 +- src/layouts/app.less | 8 +- src/layouts/index.js | 7 +- src/models/app.js | 89 +- src/pages/404.js | 14 +- src/pages/UIElement/dataTable/index.js | 182 +- src/pages/UIElement/dropOption/index.js | 193 +- src/pages/UIElement/editor/index.js | 112 +- src/pages/UIElement/iconfont/index.js | 274 +- src/pages/UIElement/layer/index.js | 266 +- src/pages/UIElement/search/index.js | 184 +- src/pages/chart/Container.js | 19 +- src/pages/chart/Container.less | 2 +- .../chart/ECharts/AirportCoordComponent.js | 10 +- .../chart/ECharts/BubbleGradientComponent.js | 190 +- src/pages/chart/ECharts/CalendarComponent.js | 156 +- src/pages/chart/ECharts/ChartAPIComponent.js | 29 +- .../ECharts/ChartShowLoadingComponent.js | 53 +- .../chart/ECharts/ChartWithEventComponent.js | 27 +- .../chart/ECharts/DynamicChartComponent.js | 46 +- src/pages/chart/ECharts/EchartsComponent.js | 38 +- src/pages/chart/ECharts/GCalendarComponent.js | 46 +- src/pages/chart/ECharts/GaugeComponent.js | 126 +- src/pages/chart/ECharts/GraphComponent.js | 1358 ++- .../chart/ECharts/LiquidfillComponent.js | 27 +- .../chart/ECharts/LunarCalendarComponent.js | 116 +- src/pages/chart/ECharts/MainPageComponent.js | 23 +- src/pages/chart/ECharts/MapChartComponent.js | 16 +- .../chart/ECharts/ModuleLoadChartComponent.js | 36 +- src/pages/chart/ECharts/MoonComponent.js | 12 +- .../chart/ECharts/SimpleChartComponent.js | 15 +- .../chart/ECharts/ThemeChartComponent.js | 49 +- .../ECharts/TransparentBar3DComPonent.js | 292 +- src/pages/chart/ECharts/TreemapComponent.js | 88 +- src/pages/chart/ECharts/index.js | 28 +- src/pages/chart/ECharts/theme/macarons.js | 40 +- src/pages/chart/ECharts/theme/shine.js | 26 +- .../chart/Recharts/AreaChartComponent.js | 161 +- src/pages/chart/Recharts/BarChartComponent.js | 71 +- src/pages/chart/Recharts/Container.js | 19 +- src/pages/chart/Recharts/Container.less | 2 +- .../chart/Recharts/LineChartComponent.js | 82 +- src/pages/chart/Recharts/ReChartsComponent.js | 7 +- src/pages/chart/Recharts/index.js | 19 +- .../chart/highCharts/HighChartsComponent.js | 7 +- .../chart/highCharts/HighMoreComponent.js | 37 +- .../chart/highCharts/HighmapsComponent.js | 53 +- .../chart/highCharts/HighstockComponent.js | 85 +- src/pages/chart/highCharts/index.js | 19 +- src/pages/chart/highCharts/mapdata/europe.js | 9159 ++++++++++++++++- src/pages/dashboard/components/browser.js | 13 +- src/pages/dashboard/components/browser.less | 4 +- src/pages/dashboard/components/comments.js | 34 +- src/pages/dashboard/components/comments.less | 2 +- src/pages/dashboard/components/completed.js | 93 +- src/pages/dashboard/components/completed.less | 5 +- src/pages/dashboard/components/cpu.js | 91 +- src/pages/dashboard/components/cpu.less | 2 +- src/pages/dashboard/components/index.js | 13 +- src/pages/dashboard/components/numberCard.js | 10 +- .../dashboard/components/numberCard.less | 2 +- src/pages/dashboard/components/quote.js | 13 +- src/pages/dashboard/components/quote.less | 2 +- src/pages/dashboard/components/recentSales.js | 23 +- .../dashboard/components/recentSales.less | 2 +- src/pages/dashboard/components/sales.js | 100 +- src/pages/dashboard/components/sales.less | 5 +- src/pages/dashboard/components/user.js | 62 +- src/pages/dashboard/components/user.less | 4 +- src/pages/dashboard/components/weather.js | 14 +- src/pages/dashboard/components/weather.less | 2 +- src/pages/dashboard/index.js | 63 +- src/pages/dashboard/index.less | 12 +- src/pages/dashboard/model.js | 14 +- src/pages/index.js | 1 + src/pages/login/index.js | 20 +- src/pages/login/index.less | 4 +- src/pages/login/model.js | 5 +- src/pages/post/components/List.js | 24 +- src/pages/post/index.js | 71 +- src/pages/post/model.js | 7 +- src/pages/request/index.js | 108 +- src/pages/request/index.less | 2 +- src/pages/user/$id/index.js | 23 +- src/pages/user/$id/models/detail.js | 9 +- src/pages/user/components/Filter.js | 106 +- src/pages/user/components/List.js | 52 +- src/pages/user/components/Modal.js | 30 +- src/pages/user/index.js | 79 +- src/pages/user/model.js | 23 +- src/themes/default.less | 6 +- src/themes/index.less | 4 +- src/themes/mixin.less | 7 +- src/themes/vars.less | 4 +- src/utils/city.js | 11 +- src/utils/index.js | 45 +- src/utils/model.js | 2 - src/utils/request.js | 100 +- 121 files changed, 13874 insertions(+), 2060 deletions(-) diff --git a/.eslintrc b/.eslintrc index efb2508..5e603ec 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,48 +1,3 @@ { - "extends": "umi", - "rules": { - "arrow-body-style": [0, "never"], - "comma-dangle": [2, "always-multiline"], - "global-require": 0, - "func-names": 0, - "prefer-const": 0, - "import/no-unresolved": 0, - "import/extensions": 0, - "max-len": 0, - "no-unused-expressions": [0, { - "allowShortCircuit": true, - "allowTernary": true - }], - "no-console": 0, - "no-extend-native": 0, - "no-param-reassign": 0, - "no-restricted-syntax": 0, - "no-eval": 0, - "no-continue": 0, - "no-mixed-operators": 0, - "no-plusplus": 0, - "no-unused-vars": [2, { "ignoreRestSiblings": true }], - "no-underscore-dangle": 0, - "space-before-function-paren": [2, "always"], - "semi": [2, "never"], - "import/no-extraneous-dependencies": 0, - "import/prefer-default-export": 0, - "jsx-a11y/no-static-element-interactions": 0, - "jsx-a11y/click-events-have-key-events": 0, - "jsx-a11y/href-no-hash": 0, - "jsx-a11y/anchor-is-valid": 0, - "jsx-a11y/label-has-for": 0, - "react/no-array-index-key": 0, - "react/require-default-props": 0, - "react/forbid-prop-types": 0, - "react/no-string-refs": 0, - "react/no-find-dom-node": 0, - "react/prefer-stateless-function": 0, - "react/jsx-closing-tag-location": 0, - "react/sort-comp": 0, - "react/jsx-no-bind": 0, - "react/no-danger": 0, - "react/jsx-first-prop-new-line": 0, - "react/jsx-filename-extension": 0 - } + "extends": "react-app" } diff --git a/.gitignore b/.gitignore index d1c78d1..228ca73 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ dist node_modules -yarn.lock +yarn-error.log npm-debug.log # ide diff --git a/package.json b/package.json index e112f97..4459856 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,13 @@ { - "private": true, "name": "antd-admin", "version": "5.0.0-beta", + "private": true, + "description": "An admin dashboard application demo built upon Ant Design and UmiJS", "dependencies": { "@babel/polyfill": "^7.0.0", "antd": "^3.9.0", "axios": "^0.18.0", + "babel-eslint": "^9.0.0", "classnames": "^2.2.6", "d3-shape": "^1.2.2", "draftjs-to-html": "^0.8.4", @@ -15,37 +17,40 @@ "echarts-for-react": "^2.0.14", "echarts-gl": "^1.1.1", "echarts-liquidfill": "^2.0.2", + "eslint-plugin-flowtype": "^2.50.0", "highcharts-exporting": "^0.1.7", "highcharts-more": "^0.1.7", "jsonp": "^0.2.1", "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.5.0", + "module": "^1.2.5", "nprogress": "^0.2.0", "path-to-regexp": "^2.4.0", "prop-types": "^15.6.2", "qs": "^6.5.2", - "query-string": "^6.1.0", "rc-tween-one": "^2.2.3", "react-adsense": "^0.0.6", "react-countup": "^4.0.0-alpha.6", "react-draft-wysiwyg": "^1.12.13", "react-helmet": "^5.2.0", "react-highcharts": "^16.0.2", - "recharts": "^1.1.0" + "recharts": "^1.1.0", + "stylelint": "^9.5.0", + "stylelint-config-prettier": "^4.0.0", + "stylelint-config-standard": "^18.2.0" }, "devDependencies": { "babel-plugin-dev-expression": "^0.2.1", "babel-plugin-module-resolver": "^3.1.1", "cross-env": "^5.2.0", - "eslint": "^5.5.0", - "eslint-config-umi": "^0.1.5", - "eslint-plugin-flowtype": "^2.50.0", - "eslint-plugin-import": "^2.14.0", - "eslint-plugin-jsx-a11y": "^6.1.1", - "eslint-plugin-react": "^7.11.1", - "js-beautify": "^1.8.1", + "eslint": "^4.1.1", + "eslint-config-react-app": "^2.1.0", + "eslint-plugin-import": "^2.6.0", + "eslint-plugin-jsx-a11y": "^5.1.1", + "eslint-plugin-react": "^7.1.0", "less-vars-to-js": "^1.3.0", "mockjs": "^1.0.1-beta3", + "prettier": "^1.14.2", "svg-sprite-loader": "^3.9.2", "umi": "^2.0.0", "umi-plugin-react": "^1.0.0" @@ -55,9 +60,11 @@ ], "scripts": { "analyze": "cross-env ANALYZE=1 umi build", - "start": "umi dev", - "lint": "eslint --fix --ext .js src", "build": "umi build", - "test": "umi test" + "lint": "eslint --fix --ext .js src", + "lint:style": "stylelint 'src/**/*.less' --syntax less", + "start": "umi dev", + "test": "umi test", + "prettier": "prettier --write 'src/**/*'" } } diff --git a/src/components/DataTable/AnimTableBody.js b/src/components/DataTable/AnimTableBody.js index ea250e1..1f1b875 100644 --- a/src/components/DataTable/AnimTableBody.js +++ b/src/components/DataTable/AnimTableBody.js @@ -7,21 +7,24 @@ const enterAnim = [ x: 30, backgroundColor: '#fffeee', duration: 0, - }, { + }, + { height: 0, duration: 200, type: 'from', delay: 250, ease: 'easeOutQuad', - onComplete: (e) => { + onComplete: e => { e.target.style.height = 'auto' }, - }, { + }, + { opacity: 1, x: 0, duration: 250, ease: 'easeOutQuad', - }, { + }, + { delay: 1000, backgroundColor: '#fff', }, @@ -32,19 +35,22 @@ const leaveAnim = [ duration: 250, x: -30, opacity: 0, - }, { + }, + { height: 0, duration: 200, ease: 'easeOutQuad', }, ] -const AnimTableBody = props => () +const AnimTableBody = props => ( + +) export default AnimTableBody diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 3478a5f..cd7c002 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -4,13 +4,13 @@ import { Table } from 'antd' import { request } from 'utils' import cloneDeep from 'lodash.clonedeep' import isEqual from 'lodash.isequal' -import './DataTable.less' class DataTable extends React.Component { constructor (props) { super(props) const { - dataSource, pagination = { + dataSource, + pagination = { showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`, @@ -46,22 +46,27 @@ class DataTable extends React.Component { handleTableChange = (pagination, filters, sorter) => { const pager = this.state.pagination pager.current = pagination.current - this.setState({ - pagination: pager, - fetchData: { - results: pagination.pageSize, - page: pagination.current, - sortField: sorter.field, - sortOrder: sorter.order, - ...filters, + this.setState( + { + pagination: pager, + fetchData: { + results: pagination.pageSize, + page: pagination.current, + sortField: sorter.field, + sortOrder: sorter.order, + ...filters, + }, }, - }, () => { - this.fetch() - }) + () => { + this.fetch() + } + ) } fetch = () => { - const { fetch: { url, data, dataKey } } = this.props + const { + fetch: { url, data, dataKey }, + } = this.props const { fetchData } = this.state this.setState({ loading: true }) this.promise = request({ @@ -70,7 +75,7 @@ class DataTable extends React.Component { ...data, ...fetchData, }, - }).then((result) => { + }).then(result => { if (!this.refs.DataTable) { return } @@ -88,25 +93,24 @@ class DataTable extends React.Component { const { fetch, ...tableProps } = this.props const { loading, dataSource, pagination } = this.state - return () + return ( +
+ ) } } DataTable.propTypes = { fetch: PropTypes.object, rowKey: PropTypes.string, - pagination: PropTypes.oneOfType([ - PropTypes.bool, - PropTypes.object, - ]), + pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), columns: PropTypes.array, dataSource: PropTypes.array, } diff --git a/src/components/DropOption/DropOption.js b/src/components/DropOption/DropOption.js index 47f185e..d96e536 100644 --- a/src/components/DropOption/DropOption.js +++ b/src/components/DropOption/DropOption.js @@ -3,18 +3,25 @@ import PropTypes from 'prop-types' import { Dropdown, Button, Icon, Menu } from 'antd' const DropOption = ({ - onMenuClick, menuOptions = [], buttonStyle, dropdownProps, + onMenuClick, + menuOptions = [], + buttonStyle, + dropdownProps, }) => { - const menu = menuOptions.map(item => {item.name}) - return ({menu}} - {...dropdownProps} - > - - ) + const menu = menuOptions.map(item => ( + {item.name} + )) + return ( + {menu}} + {...dropdownProps} + > + + + ) } DropOption.propTypes = { diff --git a/src/components/Editor/Editor.js b/src/components/Editor/Editor.js index f45b7e9..a89d167 100644 --- a/src/components/Editor/Editor.js +++ b/src/components/Editor/Editor.js @@ -3,9 +3,15 @@ import { Editor } from 'react-draft-wysiwyg' import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css' import styles from './Editor.less' - -const DraftEditor = (props) => { - return () +const DraftEditor = props => { + return ( + + ) } export default DraftEditor diff --git a/src/components/Editor/Editor.less b/src/components/Editor/Editor.less index dd0dc4a..2cea380 100644 --- a/src/components/Editor/Editor.less +++ b/src/components/Editor/Editor.less @@ -10,6 +10,9 @@ box-sizing: content-box; width: 100%; border-radius: 0 0 2px 2px; + &:hover { + box-shadow: none; + } } .rdw-inline-wrapper { @@ -25,12 +28,6 @@ box-shadow: 1px 1px 0 #e8e8e8 inset; } - .rdw-dropdown-optionwrapper { - &:hover { - box-shadow: none; - } - } - .rdw-colorpicker-option { box-shadow: none; } @@ -100,12 +97,10 @@ } .editor { - border: 1px solid #F1F1F1; + border: 1px solid #f1f1f1; padding: 5px; border-radius: 2px; height: auto; min-height: 200px; } - - .toolbar {} } diff --git a/src/components/FilterItem/FilterItem.js b/src/components/FilterItem/FilterItem.js index e2c9c08..b5c5c3f 100644 --- a/src/components/FilterItem/FilterItem.js +++ b/src/components/FilterItem/FilterItem.js @@ -2,21 +2,22 @@ import React from 'react' import PropTypes from 'prop-types' import styles from './FilterItem.less' -const FilterItem = ({ - label = '', - children, -}) => { +const FilterItem = ({ label = '', children }) => { const labelArray = label.split('') return (
- {labelArray.length > 0 - ?
- {labelArray.map((item, index) => {item})} + {labelArray.length > 0 ? ( +
+ {labelArray.map((item, index) => ( + + {item} + + ))}
- : ''} -
- {children} -
+ ) : ( + '' + )} +
{children}
) } diff --git a/src/components/Iconfont/Iconfont.js b/src/components/Iconfont/Iconfont.js index f446a92..04e27f7 100644 --- a/src/components/Iconfont/Iconfont.js +++ b/src/components/Iconfont/Iconfont.js @@ -6,8 +6,13 @@ import './iconfont.less' const Iconfont = ({ type, colorful = false, className }) => { if (colorful) { return ( - {item.icon - ? - : ''}{item.name} + + {item.icon ? : ''} + {item.name} + ) return ( - {((pathArray.length - 1) !== key) - ? + {pathArray.length - 1 !== key ? ( + {content} - : content} + ) : ( + content + )} ) }) return (
- - {breads} - + {breads}
) } diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 42fba18..f9ee162 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -8,7 +8,17 @@ import Menus from './Menu' const { SubMenu } = Menu const Header = ({ - user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu, + user, + logout, + switchSider, + siderFold, + isNavbar, + menuPopoverVisible, + location, + switchMenuPopover, + navOpenKeys, + changeOpenKeys, + menu, }) => { let handleClickMenu = e => e.key === 'logout' && logout() const menusProps = { @@ -23,18 +33,29 @@ const Header = ({ } return ( - {isNavbar - ? }> + {isNavbar ? ( + } + >
- :
- -
} + ) : ( +
+ +
+ )}
@@ -44,14 +65,14 @@ const Header = ({ style={{ float: 'right', }} - title={ - - {user.username} - } + title={ + + + {user.username} + + } > - - Sign out - + Sign out
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less index 9bfde84..707dc1e 100644 --- a/src/components/Layout/Header.less +++ b/src/components/Layout/Header.less @@ -1,4 +1,4 @@ -@import "~themes/vars.less"; +@import '~themes/vars.less'; .header { :global { @@ -47,7 +47,6 @@ justify-content: space-between; height: 56px; z-index: 9; - display: flex; align-items: center; background-color: #fff; diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less index 13fef16..70a1135 100644 --- a/src/components/Layout/Layout.less +++ b/src/components/Layout/Layout.less @@ -1,4 +1,4 @@ -@import "~themes/vars.less"; +@import '~themes/vars.less'; :global { .ant-layout-header { @@ -9,7 +9,7 @@ transition: all 0.3s; .ant-menu-root { - height: ~"calc(100vh - 144px)"; + height: ~'calc(100vh - 144px)'; overflow-x: hidden; border-right: none; @@ -70,8 +70,6 @@ } } - - .logo { height: 96px; display: flex; @@ -99,11 +97,11 @@ } .sidemenu { - :global{ + :global { .ant-menu-item { width: 100%; - } - } + } + } } .switchtheme { diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index 9c0ce1e..e13c977 100644 --- a/src/components/Layout/Menu.js +++ b/src/components/Layout/Menu.js @@ -10,7 +10,12 @@ const { SubMenu } = Menu let openKeysFlag = false const Menus = ({ - siderFold, darkTheme, navOpenKeys, changeOpenKeys, menu, location, + siderFold, + darkTheme, + navOpenKeys, + changeOpenKeys, + menu, + location, }) => { // 生成树状 const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid') @@ -18,7 +23,7 @@ const Menus = ({ // 递归生成菜单 const getMenus = (menuTreeN, siderFoldN) => { - return menuTreeN.map((item) => { + return menuTreeN.map(item => { if (item.children) { if (item.mpid) { levelMap[item.id] = item.mpid @@ -26,10 +31,12 @@ const Menus = ({ return ( - {item.icon && } - {(!siderFoldN || !menuTree.includes(item)) && item.name} - } + title={ + + {item.icon && } + {(!siderFoldN || !menuTree.includes(item)) && item.name} + + } > {getMenus(item.children, siderFoldN)} @@ -48,9 +55,9 @@ const Menus = ({ const menuItems = getMenus(menuTree, siderFold) // 保持选中 - const getAncestorKeys = (key) => { + const getAncestorKeys = key => { let map = {} - const getParent = (index) => { + const getParent = index => { const result = [String(levelMap[index])] if (levelMap[result[0]]) { result.unshift(getParent(result[0])[0]) @@ -65,8 +72,8 @@ const Menus = ({ return map[key] || [] } - const onOpenChange = (openKeys) => { - if (navOpenKeys.length) changeOpenKeys([]), openKeysFlag = true + const onOpenChange = openKeys => { + if (navOpenKeys.length) changeOpenKeys([]), (openKeysFlag = true) const latestOpenKey = openKeys.find(key => !navOpenKeys.includes(key)) const latestCloseKey = navOpenKeys.find(key => !openKeys.includes(key)) let nextOpenKeys = [] @@ -79,25 +86,27 @@ const Menus = ({ changeOpenKeys(nextOpenKeys) } - let menuProps = !siderFold ? { - onOpenChange, - openKeys: navOpenKeys, - } : {} - + let menuProps = !siderFold + ? { + onOpenChange, + openKeys: navOpenKeys, + } + : {} // 寻找选中路由 let currentMenu let defaultSelectedKeys for (let item of menu) { if (item.route && pathToRegexp(item.route).exec(location.pathname)) { - if (!navOpenKeys.length && item.mpid && !openKeysFlag) changeOpenKeys([String(item.mpid)]) + if (!navOpenKeys.length && item.mpid && !openKeysFlag) + changeOpenKeys([String(item.mpid)]) currentMenu = item break } } const getPathArray = (array, current, pid, id) => { let result = [String(current[id])] - const getPath = (item) => { + const getPath = item => { if (item && item[pid]) { if (item[pid] === '-1') { result.unshift(String(item['bpid'])) diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index 90f2952..c4e1cae 100644 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider.js @@ -6,7 +6,13 @@ import styles from './Layout.less' import Menus from './Menu' const Sider = ({ - siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu, + siderFold, + darkTheme, + location, + changeTheme, + navOpenKeys, + changeOpenKeys, + menu, }) => { const menusProps = { menu, @@ -23,10 +29,22 @@ const Sider = ({ {siderFold ? '' : {config.name}}
- {!siderFold ?
- Switch Theme - -
: ''} + {!siderFold ? ( +
+ + + Switch Theme + + +
+ ) : ( + '' + )}
) } diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js index e9edb99..d0075f9 100644 --- a/src/components/Loader/Loader.js +++ b/src/components/Loader/Loader.js @@ -4,19 +4,21 @@ import classNames from 'classnames' import styles from './Loader.less' const Loader = ({ spinning, fullScreen }) => { - return (
-
-
-
LOADING
+ return ( +
+
+
+
LOADING
+
-
) + ) } - Loader.propTypes = { spinning: PropTypes.bool, fullScreen: PropTypes.bool, diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less index 4ecbe52..9fa02dc 100644 --- a/src/components/Loader/Loader.less +++ b/src/components/Loader/Loader.less @@ -1,5 +1,4 @@ .loader { - display: block; background-color: #fff; width: 100%; position: absolute; diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 46be2c0..85994fd 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -6,9 +6,7 @@ import styles from './Page.less' export default class Page extends Component { render () { - const { - className, children, loading = false, inner = false, - } = this.props + const { className, children, loading = false, inner = false } = this.props const loadingStyle = { height: 'calc(100vh - 184px)', overflow: 'hidden', @@ -27,7 +25,6 @@ export default class Page extends Component { } } - Page.propTypes = { className: PropTypes.string, children: PropTypes.node, diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less index 8355fb7..b074a94 100644 --- a/src/components/Page/Page.less +++ b/src/components/Page/Page.less @@ -1,16 +1,16 @@ -@import "~themes/vars.less"; +@import '~themes/vars.less'; -.contentInner{ +.contentInner { background: #fff; padding: 24px; box-shadow: @shadow-1; - min-height: ~"calc(100vh - 198px)"; + min-height: ~'calc(100vh - 198px)'; position: relative; } @media (max-width: 767px) { .contentInner { padding: 12px; - min-height: ~"calc(100vh - 160px)"; + min-height: ~'calc(100vh - 160px)'; } } diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js index 01e06d6..1c2fe26 100644 --- a/src/components/Search/Search.js +++ b/src/components/Search/Search.js @@ -7,7 +7,10 @@ import styles from './Search.less' class Search extends React.Component { state = { clearVisible: false, - selectValue: (this.props.select && this.props.selectProps) ? this.props.selectProps.defaultValue : '', + selectValue: + this.props.select && this.props.selectProps + ? this.props.selectProps.defaultValue + : '', } handleSearch = () => { const data = { @@ -18,13 +21,13 @@ class Search extends React.Component { } if (this.props.onSearch) this.props.onSearch(data) } - handleInputChange = (e) => { + handleInputChange = e => { this.setState({ ...this.state, clearVisible: e.target.value !== '', }) } - handleSelectChange = (value) => { + handleSelectChange = value => { this.setState({ ...this.state, selectValue: value, @@ -39,23 +42,47 @@ class Search extends React.Component { } render () { const { - size, select, selectOptions, selectProps, style, keyword, + size, + select, + selectOptions, + selectProps, + style, + keyword, } = this.props const { clearVisible } = this.state return ( - {select && } - - + {select && ( + + )} + + {clearVisible && } ) } } - Search.propTypes = { size: PropTypes.string, select: PropTypes.bool, diff --git a/src/components/Search/Search.less b/src/components/Search/Search.less index 60d1f47..4b00801 100644 --- a/src/components/Search/Search.less +++ b/src/components/Search/Search.less @@ -17,8 +17,8 @@ cursor: pointer; color: #fff; line-height: 18px; - border-radius: 50%!important; - background-color: rgba(0, 0, 0, .16); + border-radius: 50% !important; + background-color: rgba(0, 0, 0, 0.16); top: 7px; } diff --git a/src/components/layer/layer.js b/src/components/layer/layer.js index 9435f06..1e9e650 100644 --- a/src/components/layer/layer.js +++ b/src/components/layer/layer.js @@ -5,9 +5,7 @@ import ReactDOM from 'react-dom' import classnames from 'classnames' import styles from './layer.less' -const { - info, success, error, warning, confirm, -} = Modal +const { info, success, error, warning, confirm } = Modal const layer = { prefixCls: 'ant-layer', @@ -19,25 +17,26 @@ const layer = { confirm, } -layer.close = index => new Promise((resolve, reject) => { - const { prefixCls } = layer - let div = document.getElementById(`${prefixCls}-reference-${index}`) - if (index === undefined) { - const references = document.querySelectorAll(`.${prefixCls}-reference`) - div = references[references.length - 1] - } - if (!div) { - message.error('关闭失败，未找到Dom') - return - } - const unmountResult = ReactDOM.unmountComponentAtNode(div) - if (unmountResult && div.parentNode) { - div.parentNode.removeChild(div) - resolve(index) - } else { - reject(index) - } -}) +layer.close = index => + new Promise((resolve, reject) => { + const { prefixCls } = layer + let div = document.getElementById(`${prefixCls}-reference-${index}`) + if (index === undefined) { + const references = document.querySelectorAll(`.${prefixCls}-reference`) + div = references[references.length - 1] + } + if (!div) { + message.error('关闭失败，未找到Dom') + return + } + const unmountResult = ReactDOM.unmountComponentAtNode(div) + if (unmountResult && div.parentNode) { + div.parentNode.removeChild(div) + resolve(index) + } else { + reject(index) + } + }) layer.closeAll = () => { const { prefixCls } = layer @@ -49,7 +48,7 @@ layer.closeAll = () => { } } -layer.open = (config) => { +layer.open = config => { const props = Object.assign({}, config) const { content, ...modalProps } = props const { className, wrapClassName = '', verticalCenter = true } = modalProps @@ -61,25 +60,34 @@ layer.open = (config) => { div.className = `${prefixCls}-reference` document.body.appendChild(div) - ReactDOM.render( { + ReactDOM.render( + { layer.close(index) }} - onOk={() => { + onOk={() => { layer.close(index) }} - {...modalProps} - wrapClassName={classnames({ [styles.verticalCenter]: verticalCenter, [wrapClassName]: true })} - className={classnames(prefixCls, className, [`${prefixCls}-${index}`])} - > -
- {content} -
- , div) + {...modalProps} + wrapClassName={classnames({ + [styles.verticalCenter]: verticalCenter, + [wrapClassName]: true, + })} + className={classnames(prefixCls, className, [`${prefixCls}-${index}`])} + > +
+ {content} +
+ , + div + ) return index } diff --git a/src/layouts/app.js b/src/layouts/app.js index adef0b7..25b1f77 100644 --- a/src/layouts/app.js +++ b/src/layouts/app.js @@ -20,17 +20,26 @@ const { prefix, openPages } = config let lastHref -const App = ({ - children, dispatch, app, loading, location, -}) => { +const App = ({ children, dispatch, app, loading, location }) => { const { - user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu, permissions, + user, + siderFold, + darkTheme, + isNavbar, + menuPopoverVisible, + navOpenKeys, + menu, + permissions, } = app let { pathname } = location pathname = pathname.startsWith('/') ? pathname : `/${pathname}` const { iconFontJS, iconFontCSS, logo } = config - const current = menu.filter(item => pathToRegexp(item.route || '').exec(pathname)) - const hasPermission = current.length ? permissions.visit.includes(current[0].id) : false + const current = menu.filter(item => + pathToRegexp(item.route || '').exec(pathname) + ) + const hasPermission = current.length + ? permissions.visit.includes(current[0].id) + : false const { href } = window.location if (lastHref !== href) { @@ -59,7 +68,10 @@ const App = ({ dispatch({ type: 'app/switchSider' }) }, changeOpenKeys (openKeys) { - dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } }) + dispatch({ + type: 'app/handleNavOpenKeys', + payload: { navOpenKeys: openKeys }, + }) }, } @@ -73,8 +85,14 @@ const App = ({ dispatch({ type: 'app/switchTheme' }) }, changeOpenKeys (openKeys) { - window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys)) - dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } }) + window.localStorage.setItem( + `${prefix}navOpenKeys`, + JSON.stringify(openKeys) + ) + dispatch({ + type: 'app/handleNavOpenKeys', + payload: { navOpenKeys: openKeys }, + }) }, } @@ -84,10 +102,12 @@ const App = ({ } if (openPages && openPages.includes(pathname)) { - return (
- - {children} -
) + return ( +
+ + {children} +
+ ) } return ( @@ -101,24 +121,30 @@ const App = ({ {iconFontCSS && } - - {!isNavbar && + {!isNavbar && ( + + {siderProps.menu.length === 0 ? null : ( + + )} + + )} + - {siderProps.menu.length === 0 ? null : } - } - document.getElementById('mainContainer')} />
{hasPermission ? children : } -
- {config.footerText} -
+
{config.footerText}
@@ -133,4 +159,6 @@ App.propTypes = { loading: PropTypes.object, } -export default withRouter(connect(({ app, loading }) => ({ app, loading }))(App)) +export default withRouter( + connect(({ app, loading }) => ({ app, loading }))(App) +) diff --git a/src/layouts/app.less b/src/layouts/app.less index 6af0944..6c69dac 100644 --- a/src/layouts/app.less +++ b/src/layouts/app.less @@ -1,4 +1,4 @@ -@import "~themes/vars.less"; +@import '~themes/vars.less'; :global { #nprogress { @@ -21,9 +21,9 @@ right: 0; width: 100px; height: 100%; - box-shadow: 0 0 10px @primary-color,0 0 5px @primary-color; - opacity: 1.0; - transform: rotate(3deg) translate(0px,-4px); + box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; + opacity: 1; + transform: rotate(3deg) translate(0, -4px); } .spinner { diff --git a/src/layouts/index.js b/src/layouts/index.js index bcb7310..3a74af1 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -1,14 +1,13 @@ +import React from 'react' import { LocaleProvider } from 'antd' import enUS from 'antd/lib/locale-provider/en_US' import withRouter from 'umi/withRouter' import App from './app' -export default withRouter((props) => { +export default withRouter(props => { return ( - - { props.children } - + {props.children} ) }) diff --git a/src/models/app.js b/src/models/app.js index 89c4c45..2ec1cf4 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -4,12 +4,11 @@ /* eslint no-restricted-globals: ["error", "event"] */ import { routerRedux } from 'dva/router' -import { parse } from 'qs' +import { parse, stringify } from 'qs' 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 @@ -32,14 +31,14 @@ export default { siderFold: window.localStorage.getItem(`${prefix}siderFold`) === 'true', darkTheme: window.localStorage.getItem(`${prefix}darkTheme`) === 'true', isNavbar: document.body.clientWidth < 769, - navOpenKeys: JSON.parse(window.localStorage.getItem(`${prefix}navOpenKeys`)) || [], + navOpenKeys: + JSON.parse(window.localStorage.getItem(`${prefix}navOpenKeys`)) || [], locationPathname: '', locationQuery: {}, }, subscriptions: { - setupHistory ({ dispatch, history }) { - history.listen((location) => { + history.listen(location => { dispatch({ type: 'updateState', payload: { @@ -60,26 +59,27 @@ export default { }, 300) } }, - }, effects: { - - * query ({ - payload, - }, { call, put, select }) { + *query ({ payload }, { call, put, select }) { const { success, user } = yield call(query, payload) const { locationPathname } = yield select(_ => _.app) if (success && user) { const { list } = yield call(menusService.query) const { permissions } = user let menu = list - if (permissions.role === EnumRoleType.ADMIN || permissions.role === EnumRoleType.DEVELOPER) { + if ( + permissions.role === EnumRoleType.ADMIN || + permissions.role === EnumRoleType.DEVELOPER + ) { permissions.visit = list.map(item => item.id) } else { - menu = list.filter((item) => { + menu = list.filter(item => { const cases = [ permissions.visit.includes(item.id), - item.mpid ? permissions.visit.includes(item.mpid) || item.mpid === '-1' : true, + item.mpid + ? permissions.visit.includes(item.mpid) || item.mpid === '-1' + : true, item.bpid ? permissions.visit.includes(item.bpid) : true, ] return cases.every(_ => _) @@ -94,49 +94,58 @@ export default { }, }) if (location.pathname === '/login') { - yield put(routerRedux.push({ - pathname: '/dashboard', - })) + yield put( + routerRedux.push({ + pathname: '/dashboard', + }) + ) } - } else if (config.openPages && config.openPages.indexOf(locationPathname) < 0) { - yield put(routerRedux.push({ - pathname: '/login', - search: queryString.stringify({ - from: locationPathname, - }), - })) + } else if ( + config.openPages && + config.openPages.indexOf(locationPathname) < 0 + ) { + yield put( + routerRedux.push({ + pathname: '/login', + search: stringify({ + from: locationPathname, + }), + }) + ) } }, - * logout ({ - payload, - }, { call, put }) { + *logout ({ payload }, { call, put }) { const data = yield call(logout, parse(payload)) if (data.success) { - yield put({ type: 'updateState', payload: { - user: {}, - permissions: { visit: [] }, - menu: [{ - id: 1, - icon: 'laptop', - name: 'Dashboard', - router: '/dashboard', - }], - }}) + yield put({ + type: 'updateState', + payload: { + user: {}, + permissions: { visit: [] }, + menu: [ + { + id: 1, + icon: 'laptop', + name: 'Dashboard', + router: '/dashboard', + }, + ], + }, + }) yield put({ type: 'query' }) } else { - throw (data) + throw data } }, - * changeNavbar (action, { put, select }) { - const { app } = yield (select(_ => _)) + *changeNavbar (action, { put, select }) { + const { app } = yield select(_ => _) const isNavbar = document.body.clientWidth < 769 if (isNavbar !== app.isNavbar) { yield put({ type: 'handleNavbar', payload: isNavbar }) } }, - }, reducers: { updateState (state, { payload }) { diff --git a/src/pages/404.js b/src/pages/404.js index 8b8f870..a87c8cf 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -3,11 +3,13 @@ import { Icon } from 'antd' import { Page } from 'components' import styles from './404.less' -const Error = () => ( -
- -

404 Not Found

-
-) +const Error = () => ( + +
+ +

404 Not Found

+
+ +) export default Error diff --git a/src/pages/UIElement/dataTable/index.js b/src/pages/UIElement/dataTable/index.js index 5ee906d..ebf20e8 100644 --- a/src/pages/UIElement/dataTable/index.js +++ b/src/pages/UIElement/dataTable/index.js @@ -12,7 +12,7 @@ class DataTablePage extends React.Component { } } - handleSelectChange = (gender) => { + handleSelectChange = gender => { this.setState({ filterCase: { gender, @@ -22,12 +22,25 @@ class DataTablePage extends React.Component { render () { const { filterCase } = this.state const staticDataTableProps = { - dataSource: [{ - key: '1', name: 'John Brown', age: 24, address: 'New York', - }, { - key: '2', name: 'Jim Green', age: 23, address: 'London', - }], - columns: [{ title: 'name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' }], + dataSource: [ + { + key: '1', + name: 'John Brown', + age: 24, + address: 'New York', + }, + { + key: '2', + name: 'Jim Green', + age: 23, + address: 'London', + }, + ], + columns: [ + { title: 'name', dataIndex: 'name' }, + { title: 'Age', dataIndex: 'age' }, + { title: 'Address', dataIndex: 'address' }, + ], pagination: false, } @@ -41,7 +54,11 @@ class DataTablePage extends React.Component { dataKey: 'results', }, columns: [ - { title: 'Name', dataIndex: 'name', render: text => `${text.first} ${text.last}` }, + { + title: 'Name', + dataIndex: 'name', + render: text => `${text.first} ${text.last}`, + }, { title: 'Phone', dataIndex: 'phone' }, { title: 'Gender', dataIndex: 'gender' }, ], @@ -59,86 +76,91 @@ class DataTablePage extends React.Component { dataKey: 'results', }, columns: [ - { title: 'Name', dataIndex: 'name', render: text => `${text.first} ${text.last}` }, + { + title: 'Name', + dataIndex: 'name', + render: text => `${text.first} ${text.last}`, + }, { title: 'Phone', dataIndex: 'phone' }, { title: 'Gender', dataIndex: 'gender' }, ], rowKey: 'email', } - return (
- -
- - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +

Props

+ + +
key} + pagination={false} + bordered + scroll={{ x: 800 }} + columns={[ + { + title: '参数', + dataIndex: 'props', + }, + { + title: '说明', + dataIndex: 'desciption', + }, + { + title: '类型', + dataIndex: 'type', + }, + { + title: '默认值', + dataIndex: 'default', + }, + ]} + dataSource={[ + { + props: 'fetch', + desciption: '远程获取数据的参数', + type: 'Object', + default: '后面有空加上', + key: 'basetable', + }, + ]} /> - - - - - - - - - - - - - - -

Props

- - -
key} - pagination={false} - bordered - scroll={{ x: 800 }} - columns={[ - { - title: '参数', - dataIndex: 'props', - }, - { - title: '说明', - dataIndex: 'desciption', - }, - { - title: '类型', - dataIndex: 'type', - }, - { - title: '默认值', - dataIndex: 'default', - }, - ]} - dataSource={[ - { - props: 'fetch', - desciption: '远程获取数据的参数', - type: 'Object', - default: '后面有空加上', - key: 'basetable' - }]} - /> - - - ) + + + + ) } } - export default DataTablePage diff --git a/src/pages/UIElement/dropOption/index.js b/src/pages/UIElement/dropOption/index.js index 5adf28e..1d848f2 100644 --- a/src/pages/UIElement/dropOption/index.js +++ b/src/pages/UIElement/dropOption/index.js @@ -2,94 +2,111 @@ import React from 'react' import { DropOption, Page } from 'components' import { Table, Row, Col, Card, message } from 'antd' -const DropOptionPage = () => ( - - - - - - - - - - - - - - { - switch (key) { - case '1': - message.success('点击了编辑') - break - case '2': - message.success('点击了删除') - break - default: - break - } - }} +const DropOptionPage = () => ( + + + + + + + + + + + + + + + { + switch (key) { + case '1': + message.success('点击了编辑') + break + case '2': + message.success('点击了删除') + break + default: + break + } + }} + /> + + + +

Props

+ + +
key} + pagination={false} + bordered + scroll={{ x: 800 }} + columns={[ + { + title: '参数', + dataIndex: 'props', + }, + { + title: '说明', + dataIndex: 'desciption', + }, + { + title: '类型', + dataIndex: 'type', + }, + { + title: '默认值', + dataIndex: 'default', + }, + ]} + dataSource={[ + { + props: 'menuOptions', + desciption: '下拉操作的选项，格式为[{name:string,key:string}]', + type: 'Array', + default: '必选', + }, + { + props: 'onMenuClick', + desciption: + '点击 menuitem 调用此函数，参数为 {item, key, keyPath}', + type: 'Function', + default: '-', + }, + { + props: 'buttonStyle', + desciption: '按钮的样式', + type: 'Object', + default: '-', + }, + { + props: 'dropdownProps', + desciption: '下拉菜单的参数，可参考antd的【Dropdown】组件', + type: 'Object', + default: '-', + }, + ]} /> - - - -

Props

- - -
key} - pagination={false} - bordered - scroll={{ x: 800 }} - columns={[ - { - title: '参数', - dataIndex: 'props', - }, - { - title: '说明', - dataIndex: 'desciption', - }, - { - title: '类型', - dataIndex: 'type', - }, - { - title: '默认值', - dataIndex: 'default', - }, - ]} - dataSource={[ - { - props: 'menuOptions', - desciption: '下拉操作的选项，格式为[{name:string,key:string}]', - type: 'Array', - default: '必选', - }, - { - props: 'onMenuClick', - desciption: '点击 menuitem 调用此函数，参数为 {item, key, keyPath}', - type: 'Function', - default: '-', - }, - { - props: 'buttonStyle', - desciption: '按钮的样式', - type: 'Object', - default: '-', - }, - { - props: 'dropdownProps', - desciption: '下拉菜单的参数，可参考antd的【Dropdown】组件', - type: 'Object', - default: '-', - }, - ]} - /> - - -) + + + +) export default DropOptionPage diff --git a/src/pages/UIElement/editor/index.js b/src/pages/UIElement/editor/index.js index 9884854..0855995 100644 --- a/src/pages/UIElement/editor/index.js +++ b/src/pages/UIElement/editor/index.js @@ -12,7 +12,7 @@ export default class EditorPage extends React.Component { editorContent: null, } } - onEditorStateChange = (editorContent) => { + onEditorStateChange = editorContent => { this.setState({ editorContent, }) @@ -30,50 +30,70 @@ export default class EditorPage extends React.Component { borderColor: '#F1F1F1', padding: '16px 8px', } - return (
- -
- - - - - - -