From cd796a6db9e3180ffd196081d8cd487caa054d5d Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 24 Nov 2017 11:27:00 +0800 Subject: [PATCH 1/8] fix Search style --- src/components/Search/Search.less | 109 +++++++++++++++--------------- 1 file changed, 54 insertions(+), 55 deletions(-) diff --git a/src/components/Search/Search.less b/src/components/Search/Search.less index 4c232f70..60d1f476 100644 --- a/src/components/Search/Search.less +++ b/src/components/Search/Search.less @@ -1,55 +1,54 @@ -.no-highlight() { - border-color: #e5e5e5; - box-shadow: none; -} - -.search { - display: flex; - width: 100%; - position: relative; - - :global { - .anticon-cross { - position: absolute; - width: 18px; - height: 18px; - right: 84px; - cursor: pointer; - color: #fff; - line-height: 18px; - border-radius: 50%!important; - background-color: rgba(0, 0, 0, .16); - top: 7px; - // opacity: - } - - .ant-select { - width: 80px; - flex-shrink: 0; - flex-grow: 0; - - &.ant-select-focused .ant-select-selection, - &.ant-select-open .ant-select-selection, - .ant-select-selection:active, - .ant-select-selection:focus, - .ant-select-selection:hover { - .no-highlight(); - } - } - - .ant-input { - &:focus, - &:hover { - .no-highlight(); - } - flex-shrink: 1; - flex-grow: 1; - } - - .ant-btn { - width: 80px; - flex-shrink: 0; - flex-grow: 0; - } - } -} +.no-highlight() { + border-color: #e5e5e5; + box-shadow: none; +} + +.search { + display: flex !important; + width: 100%; + position: relative; + + :global { + .anticon-cross { + position: absolute; + width: 18px; + height: 18px; + right: 84px; + cursor: pointer; + color: #fff; + line-height: 18px; + border-radius: 50%!important; + background-color: rgba(0, 0, 0, .16); + top: 7px; + } + + .ant-select { + width: 80px; + flex-shrink: 0; + flex-grow: 0; + + &.ant-select-focused .ant-select-selection, + &.ant-select-open .ant-select-selection, + .ant-select-selection:active, + .ant-select-selection:focus, + .ant-select-selection:hover { + .no-highlight(); + } + } + + .ant-input { + &:focus, + &:hover { + .no-highlight(); + } + flex-shrink: 1; + flex-grow: 1; + } + + .ant-btn { + width: 80px; + flex-shrink: 0; + flex-grow: 0; + } + } +} From 30254a2ec70b8542ae86ae562b93bd3ff1b8dc63 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 25 Dec 2017 10:51:36 +0800 Subject: [PATCH 2/8] upgrade package --- package.json | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 8b4113b5..57d27351 100644 --- a/package.json +++ b/package.json @@ -3,15 +3,15 @@ "name": "antd-admin", "version": "4.3.7", "dependencies": { - "antd": "^2.13.8", - "axios": "^0.16.2", + "antd": "3.0.3", + "axios": "^0.17.1", "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", + "draftjs-to-markdown": "^0.5.0", "dva": "^2.0.1", - "dva-loading": "^0.2.0", + "dva-loading": "^1.0.4", "echarts": "^3.7.2", "echarts-for-react": "^2.0.0", "echarts-gl": "^1.0.0-beta.5", @@ -26,31 +26,31 @@ "lodash": "^4.17.4", "mockjs": "^1.0.1-beta3", "nprogress": "^0.2.0", - "path-to-regexp": "^1.7.0", + "path-to-regexp": "^2.1.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", - "react-dom": "^15.6.1", + "react": "^16.2.0", + "react-countup": "^3.0.2", + "react-dom": "^16.2.0", "react-draft-wysiwyg": "^1.10.0", "react-helmet": "^5.1.3", - "react-highcharts": "^13.0.0", + "react-highcharts": "^15.0.0", "recharts": "^1.0.0-beta.0" }, "devDependencies": { - "babel-eslint": "^7.2.3", + "babel-eslint": "^8.1.0", "babel-plugin-dev-expression": "^0.2.1", - "babel-plugin-dva-hmr": "^0.3.2", + "babel-plugin-dva-hmr": "^0.4.0", "babel-plugin-import": "^1.1.1", "babel-plugin-transform-runtime": "^6.9.0", "babel-runtime": "^6.9.2", "copy-webpack-plugin": "^4.0.1", - "draftjs-to-html": "^0.7.0", + "draftjs-to-html": "^0.8.1", "dva-model-extend": "^0.1.1", "eslint": "^4.1.1", - "eslint-config-airbnb": "^15.0.2", + "eslint-config-airbnb": "^16.1.0", "eslint-import-resolver-node": "^0.3.1", "eslint-loader": "^1.9.0", "eslint-plugin-import": "^2.6.1", @@ -58,9 +58,11 @@ "eslint-plugin-react": "^7.1.0", "html-webpack-plugin": "^2.29.0", "redbox-react": "^1.2.10", - "roadhog": "^1.2.2" + "roadhog": "1.3.1" }, - "pre-commit": ["lint"], + "pre-commit": [ + "lint" + ], "scripts": { "dev": "cross-env BROWSER=none HOST=0.0.0.0 roadhog server", "start": "roadhog buildDll && cross-env BROWSER=none HOST=0.0.0.0 roadhog server", From 0e59df39ee9c56ff19c573a08c2657a27d963492 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 25 Dec 2017 18:08:25 +0800 Subject: [PATCH 3/8] Compatibility upgrade --- .eslintrc | 2 + src/components/DataTable/DataTable.js | 21 +- src/components/Layout/Bread.js | 2 +- src/components/Layout/Bread.less | 8 - src/components/Layout/Footer.js | 9 - src/components/Layout/Footer.less | 12 - src/components/Layout/Header.js | 15 +- src/components/Layout/Header.less | 2 - src/components/Layout/Layout.less | 338 +++++------------- src/components/Layout/Sider.js | 6 +- src/components/Layout/index.js | 3 +- src/components/Page/Page.less | 2 +- src/components/index.js | 4 +- src/mock/menu.js | 32 +- src/routes/UIElement/search/index.js | 2 +- src/routes/app.js | 55 +-- .../chart/ECharts/DynamicChartComponent.js | 89 ++--- src/routes/chart/ECharts/EchartsComponent.js | 70 ++-- .../chart/ECharts/SimpleChartComponent.js | 12 +- src/routes/dashboard/components/numberCard.js | 4 +- .../dashboard/components/numberCard.less | 1 + src/routes/dashboard/index.js | 6 +- src/routes/dashboard/index.less | 33 +- src/routes/login/index.js | 8 +- src/routes/user/Filter.js | 28 +- src/routes/user/Modal.js | 11 +- src/routes/user/index.js | 12 +- src/themes/default.less | 33 +- 28 files changed, 339 insertions(+), 481 deletions(-) delete mode 100644 src/components/Layout/Bread.less delete mode 100644 src/components/Layout/Footer.js delete mode 100644 src/components/Layout/Footer.less diff --git a/.eslintrc b/.eslintrc index 01f5ef78..dff5ed61 100644 --- a/.eslintrc +++ b/.eslintrc @@ -37,6 +37,8 @@ "import/prefer-default-export": 0, "react/no-danger": 0, "jsx-a11y/no-static-element-interactions": 0, + "react/jsx-closing-tag-location": 0, + "react/sort-comp": 0, "no-mixed-operators": 0, "jsx-a11y/label-has-for": 0, "no-plusplus": 0 diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 597c424b..4b33461e 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -8,12 +8,14 @@ import './DataTable.less' class DataTable extends React.Component { constructor (props) { super(props) - const { dataSource, pagination = { - showSizeChanger: true, - showQuickJumper: true, - showTotal: total => `共 ${total} 条`, - current: 1, - total: 100 }, + const { + dataSource, pagination = { + showSizeChanger: true, + showQuickJumper: true, + showTotal: total => `共 ${total} 条`, + current: 1, + total: 100, + }, } = props this.state = { loading: false, @@ -97,13 +99,12 @@ class DataTable extends React.Component { } } - DataTable.propTypes = { fetch: PropTypes.object, rowKey: PropTypes.string, - pagination: React.PropTypes.oneOfType([ - React.PropTypes.bool, - React.PropTypes.object, + pagination: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.object, ]), columns: PropTypes.array, dataSource: PropTypes.array, diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index 5ce0a9f9..e20f1592 100644 --- a/src/components/Layout/Bread.js +++ b/src/components/Layout/Bread.js @@ -4,7 +4,7 @@ import { Breadcrumb, Icon } from 'antd' import { Link } from 'react-router-dom' import pathToRegexp from 'path-to-regexp' import { queryArray } from 'utils' -import styles from './Bread.less' +import styles from './Layout.less' const Bread = ({ menu, location }) => { // 匹配当前路由 diff --git a/src/components/Layout/Bread.less b/src/components/Layout/Bread.less deleted file mode 100644 index 01568a4d..00000000 --- a/src/components/Layout/Bread.less +++ /dev/null @@ -1,8 +0,0 @@ -@import "~themes/vars"; - -.bread { - height: 64px; - line-height: 64px; - padding: 0 24px; - margin-bottom: -24px; -} diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js deleted file mode 100644 index 50866a50..00000000 --- a/src/components/Layout/Footer.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import { config } from 'utils' -import styles from './Footer.less' - -const Footer = () => (
- {config.footerText} -
) - -export default Footer diff --git a/src/components/Layout/Footer.less b/src/components/Layout/Footer.less deleted file mode 100644 index 728a8224..00000000 --- a/src/components/Layout/Footer.less +++ /dev/null @@ -1,12 +0,0 @@ -@import "~themes/vars"; - -.footer { - height: 48px; - line-height: 48px; - text-align: center; - font-size: 12px; - color: #999; - background: #fff; - box-shadow: @shadow-2; - width: 100%; -} diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 8b13ac74..d01c380d 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -1,13 +1,15 @@ import React from 'react' import PropTypes from 'prop-types' -import { Menu, Icon, Popover } from 'antd' +import { Menu, Icon, Popover, Layout } from 'antd' import classnames from 'classnames' import styles from './Header.less' import Menus from './Menu' -const SubMenu = Menu.SubMenu +const { SubMenu } = Menu -const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu }) => { +const Header = ({ + user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu, +}) => { let handleClickMenu = e => e.key === 'logout' && logout() const menusProps = { menu, @@ -20,7 +22,7 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis changeOpenKeys, } return ( -
+ {isNavbar ? }>
@@ -29,7 +31,8 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis :
{}} + onKeyDown={switchSider} >
} @@ -53,7 +56,7 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis
-
+ ) } diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less index 115f7622..bb8eb963 100644 --- a/src/components/Layout/Header.less +++ b/src/components/Layout/Header.less @@ -47,8 +47,6 @@ .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-item { border-right: 0; - height: 48px; - line-height: 48px; } .ant-menu-inline .ant-menu-item-selected, diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less index 98b24b00..1281d267 100644 --- a/src/components/Layout/Layout.less +++ b/src/components/Layout/Layout.less @@ -1,295 +1,143 @@ @import "~themes/vars"; -.layout { - position: relative; - height: 100vh; +:global { - &.withnavbar { - .main { - margin-left: 0; - } + .ant-layout-header{ + padding: 0; } - &.fold { - .sider { - width: 42px; + .ant-layout-sider{ + transition: all .3s; + .ant-menu-root { + height: ~"calc(100vh - 144px)"; + overflow-x: hidden; + border-right: none; - .logo { - img { - width: 28px; - margin: 6px 7px; - } + &::-webkit-scrollbar-thumb { + background-color: transparent; } - :global { - .ant-menu-root { - width: 100%; - overflow: visible; - - & > .ant-menu-item { - padding: 0; - text-align: center; - - .anticon { - font-size: 14px; - margin-right: 0; - } - } - - & > .ant-menu-submenu { - & > .ant-menu-submenu-title { - padding: 0; - text-align: center; - - .anticon { - font-size: 14px; - margin-right: 0; - } - - &::after { - display: none; - } - } - } + &:hover { + &::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2); } } } - .main { - margin-left: 42px; - } - } - - .sider { - width: 224px; - background: #3e3e3e; - position: absolute; - overflow: visible; - padding-bottom: 24px; - height: 100vh; - transition: @transition-ease-out; - box-shadow: @shadow-1; - color: #999; - - &.light { - background: #fff; - - .switchtheme { - background: #fff; - border-top: solid 1px #f8f8f8; - } - } - - .logo { - text-align: center; - height: 40px; - line-height: 40px; - cursor: pointer; - margin: 28px 0; - transition: @transition-ease-out; - overflow: hidden; - - img { - width: 40px; - margin-right: 8px; - transition: @transition-ease-out; - } - - span { - vertical-align: text-bottom; - font-size: 16px; - text-transform: uppercase; - display: inline-block; - } - - .anticon { - transition: @transition-ease-out; - } - } - - .switchtheme { - width: 100%; - position: absolute; - bottom: 0; - height: 48px; - background-color: @dark-half; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 16px 0 24px; - overflow: hidden; - z-index: 1000; - - span { - white-space: nowrap; + .ant-menu { + .ant-menu-item, + .ant-menu-submenu-title { overflow: hidden; - } - - :global { - .anticon { - min-width: 14px; - margin-right: 8px; - font-size: 14px; - } - } - } - - :global { - .ant-menu-dark, - .ant-menu-dark .ant-menu-sub { - color: #999; - } - - .ant-menu-root { - height: ~"calc(100vh - 144px)"; - overflow-x: hidden; - border-right: none; - - &::-webkit-scrollbar-thumb { - background-color: transparent; - } - - &:hover { - &::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); - } - } - - &.ant-menu-vertical { - .ant-menu-sub { - height: 0; - opacity: 0; - transition: none; - } - - .ant-menu-submenu-active { - .ant-menu-sub { - height: auto; - opacity: 1; - } - } - } - } - - .ant-menu { - transition: @transition-ease-out; - - .ant-menu-item, - .ant-menu-submenu-title { - overflow: hidden; - white-space: normal; - } + white-space: normal; } } } + .ant-layout-content{ + padding: 24px; + } - .main { - margin-left: 224px; - overflow: auto; - height: 100vh; - transition: @transition-ease-out; + .ant-layout-footer{ + text-align: center; + padding: 24px; + } - :global { - .content-inner { + .content-inner { background: #fff; padding: 24px; box-shadow: @shadow-1; min-height: e("calc(100vh - 184px)"); } - } - - .container { - margin: 24px; - } - - .content { - min-height: e("calc(100vh - 184px)"); - position: relative; - } - } } -:global .ant-menu-dark { - color: #999; - background-color: #3e3e3e; - .ant-menu-submenu-title:hover, - .ant-menu-submenu:hover { - color: @primary-color; +.logo { + height: 96px; + display: flex; + align-items: center; + justify-content: center; + img { + width: 40px; + margin-right: 8px; } - .ant-menu-sub { - color: #999; + span { + vertical-align: text-bottom; + font-size: 16px; + text-transform: uppercase; + display: inline-block } +} - .ant-menu-submenu-selected { - color: @primary-color; +.switchtheme { + width: 100%; + position: absolute; + bottom: 0; + height: 48px; + background-color: #fff; + border-top: solid 1px #f8f8f8; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + overflow: hidden; + z-index: 9; + transition: all .3s; + + span { + white-space: nowrap; + overflow: hidden; + font-size: 12px; + } - &:not(.ant-menu-submenu-open) { - background-color: @dark-half; + :global { + .anticon { + min-width: 14px; + margin-right: 4px; + font-size: 14px; } } +} - .ant-menu-item, - .ant-menu-submenu-title { - & > a { - color: #999; - } - &:hover > a { - color: @primary-color; +.bread { + margin-bottom: 24px; + :global { + .ant-breadcrumb { + display: flex; + align-items: center; } } +} - &.ant-menu-inline { - .ant-menu-item-selected { - background-color: @dark-half; - } +.dark{ + .switchtheme { + background-color: #000d18; + border-color: #001629; } +} - .ant-menu-item-selected { - color: @primary-color; - - &.ant-menu-item { - background: @dark-half; - } - - & > a { - color: @primary-color; - } - - &:hover { - background-color: @dark-half; +.light { + :global { + .ant-layout-sider { + background: #fff; } } } -.spin { - :global .ant-spin-container { - height: 100vh; - } -} @media (max-width: 767px) { - .layout { - .main { - .container { - margin: 12px; - } - - .bread { - padding: 0 12px; - } + .bread { + margin-bottom: 12px; + } - .content { - min-height: e("calc(100vh - 160px)"); - } + :global { + .ant-layout-content { + padding: 12px; + } - :global { - .content-inner { - padding: 12px; - min-height: e("calc(100vh - 160px)"); - } - } + .ant-back-top{ + right: 20px; + bottom: 20px; } + } } diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index e47a7e86..90f2952f 100644 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider.js @@ -5,7 +5,9 @@ import { config } from 'utils' import styles from './Layout.less' import Menus from './Menu' -const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => { +const Sider = ({ + siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu, +}) => { const menusProps = { menu, siderFold, @@ -17,7 +19,7 @@ const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, chang return (
- {'logo'} + logo {siderFold ? '' : {config.name}}
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index e927075a..c170d876 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -2,7 +2,6 @@ import Header from './Header' import Menu from './Menu' import Bread from './Bread' import Sider from './Sider' -import Footer from './Footer' import styles from './Layout.less' -export { Header, Menu, Bread, Sider, Footer, styles } +export { Header, Menu, Bread, Sider, styles } diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less index 5a1e1b5e..dd2e3a61 100644 --- a/src/components/Page/Page.less +++ b/src/components/Page/Page.less @@ -9,6 +9,6 @@ @media (max-width: 767px) { .contentInner { padding: 12px; - min-height: e("calc(100vh - 160px)"); + // min-height: e("calc(100vh - 160px)"); } } diff --git a/src/components/index.js b/src/components/index.js index 492e40cb..bd8d8a0b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,13 +5,13 @@ import Search from './Search' import Editor from './Editor' import FilterItem from './FilterItem' import Loader from './Loader' -import * as Layout from './Layout/index.js' +import * as MyLayout from './Layout/index.js' import Page from './Page' import layer from './layer' export { - Layout, + MyLayout, DataTable, DropOption, Iconfont, diff --git a/src/mock/menu.js b/src/mock/menu.js index ad308253..a8cd4717 100644 --- a/src/mock/menu.js +++ b/src/mock/menu.js @@ -50,14 +50,14 @@ let database = [ icon: 'heart-o', route: '/UIElement/iconfont', }, - { - id: '42', - bpid: '4', - mpid: '4', - name: 'DataTable', - icon: 'database', - route: '/UIElement/dataTable', - }, + // { + // id: '42', + // bpid: '4', + // mpid: '4', + // name: 'DataTable', + // icon: 'database', + // route: '/UIElement/dataTable', + // }, { id: '43', bpid: '4', @@ -82,14 +82,14 @@ let database = [ icon: 'edit', route: '/UIElement/editor', }, - { - id: '46', - bpid: '4', - mpid: '4', - name: 'layer (Function)', - icon: 'credit-card', - route: '/UIElement/layer', - }, + // { + // id: '46', + // bpid: '4', + // mpid: '4', + // name: 'layer (Function)', + // icon: 'credit-card', + // route: '/UIElement/layer', + // }, { id: '5', bpid: '1', diff --git a/src/routes/UIElement/search/index.js b/src/routes/UIElement/search/index.js index 2ae57f71..27462901 100644 --- a/src/routes/UIElement/search/index.js +++ b/src/routes/UIElement/search/index.js @@ -27,7 +27,7 @@ const SearchPage = () => (
- + diff --git a/src/routes/app.js b/src/routes/app.js index fcd52ac8..ba1cf49e 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -5,28 +5,33 @@ import NProgress from 'nprogress' import PropTypes from 'prop-types' import pathToRegexp from 'path-to-regexp' import { connect } from 'dva' -import { Layout, Loader } from 'components' -import { BackTop } from 'antd' +import { Loader, MyLayout } from 'components' +import { BackTop, Layout } from 'antd' import { classnames, config } from 'utils' import { Helmet } from 'react-helmet' import { withRouter } from 'dva/router' +import Error from './error' import '../themes/index.less' import './app.less' -import Error from './error' +const { Content, Footer, Sider } = Layout +const { Header, Bread, styles } = MyLayout const { prefix, openPages } = config -const { Header, Bread, Footer, Sider, styles } = Layout let lastHref -const App = ({ children, dispatch, app, loading, location }) => { - const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu, permissions } = app +const App = ({ + children, dispatch, app, loading, location, +}) => { + const { + 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 href = window.location.href + const { href } = window.location if (lastHref !== href) { NProgress.start() @@ -77,12 +82,14 @@ const App = ({ children, dispatch, app, loading, location }) => { menu, location, } + if (openPages && openPages.includes(pathname)) { return (
{children}
) } + return (
@@ -93,22 +100,28 @@ const App = ({ children, dispatch, app, loading, location }) => { {iconFontJS &&