From d573fa7f534e83449cefa4d3df16d1cbb2b77644 Mon Sep 17 00:00:00 2001 From: greatYear Date: Fri, 23 Jun 2017 09:48:20 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=93=8D=E5=BA=94?= =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html.template | 1 + src/components/App/index.js | 27 ++++++++++++++++++++---- src/components/App/index.less | 7 +++++++ src/components/App/isNavbar.js | 6 ++++++ src/components/DBTable/InnerForm.js | 2 +- src/components/DBTable/InnerTable.js | 3 ++- src/components/DBTable/index.less | 4 ++++ src/components/Footer/index.less | 7 +++++++ src/components/Header/index.js | 31 +++++++++++++++++++++++++++- src/components/Header/index.less | 13 ++++++++++++ src/components/Sidebar/index.js | 28 +++++++++++++++++++------ src/components/Sidebar/index.less | 6 ++++++ 12 files changed, 122 insertions(+), 13 deletions(-) create mode 100644 src/components/App/isNavbar.js diff --git a/index.html.template b/index.html.template index 875935d..97c37e8 100644 --- a/index.html.template +++ b/index.html.template @@ -4,6 +4,7 @@ <%= htmlWebpackPlugin.options.title %> + diff --git a/src/components/App/index.js b/src/components/App/index.js index 2bd2eb6..3094118 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -15,6 +15,7 @@ import ajax from '../../utils/ajax'; import Logger from '../../utils/Logger'; import sidebarMenu, {headerMenu} from '../../menu.js'; import {loginSuccessCreator} from '../../redux/Login.js'; +import { checkIsNavbar } from './isNavbar' const TabPane = Tabs.TabPane; const logger = Logger.getLogger('App'); @@ -38,6 +39,8 @@ class App extends React.Component { // tab模式相关的状态 currentTabKey: '', // 当前激活的是哪个tab tabPanes: [], // 当前总共有哪些tab + + isNavbar: checkIsNavbar(), }; /** @@ -102,6 +105,8 @@ class App extends React.Component { this.handleLoginError(`网络请求出错: ${e.message}`); } } + + this.startResize() } handleLoginError(errorMsg) { @@ -119,7 +124,17 @@ class App extends React.Component { } } - + startResize() { + let tid; + window.onresize = () => { + clearTimeout(tid) + tid = setTimeout(() => { + let isNavbar = checkIsNavbar() + if (isNavbar != this.state.isNavbar) + this.setState({ isNavbar }) + }, 300) + } + } // 下面开始是tab相关逻辑 @@ -293,14 +308,18 @@ class App extends React.Component { return ; } + const { isNavbar } = this.state + let style = isNavbar ? { marginLeft: 0 } : null + // 正常显示 return (
{/*整个页面被一个ant-layout-base的div包围, 分为sidebar/header/footer/content等几部分*/} - + {!isNavbar && } -
-
+
+
{this.renderBody()}
diff --git a/src/components/App/index.less b/src/components/App/index.less index d78aa9f..e5bc436 100644 --- a/src/components/App/index.less +++ b/src/components/App/index.less @@ -31,6 +31,13 @@ padding: 24px; } +@media (max-width: 767px) { + .ant-layout-base .ant-layout-container { + margin: 12px; + padding: 16px 0; + } +} + .ant-layout-base .ant-layout-tab { // tab模式时的样式 margin: 8px 8px; background: #fff; diff --git a/src/components/App/isNavbar.js b/src/components/App/isNavbar.js new file mode 100644 index 0000000..0fccead --- /dev/null +++ b/src/components/App/isNavbar.js @@ -0,0 +1,6 @@ + + +export function checkIsNavbar() { + const isNavbar = document.body.clientWidth < 769 + return isNavbar; +} diff --git a/src/components/DBTable/InnerForm.js b/src/components/DBTable/InnerForm.js index b7ee3b9..bda24cd 100644 --- a/src/components/DBTable/InnerForm.js +++ b/src/components/DBTable/InnerForm.js @@ -199,7 +199,7 @@ class InnerForm extends React.PureComponent { {/*这个渲染组件的方法很有意思, 另外注意这里的ref*/} { this.formComponent = input; }}/> - + {tableConfig.showExport ? diff --git a/src/components/DBTable/InnerTable.js b/src/components/DBTable/InnerTable.js index ef25d7d..2476771 100644 --- a/src/components/DBTable/InnerTable.js +++ b/src/components/DBTable/InnerTable.js @@ -720,7 +720,8 @@ class InnerTable extends React.PureComponent { record={this.updateComponentRecord}/>} - ); diff --git a/src/components/DBTable/index.less b/src/components/DBTable/index.less index 679fb1a..07880ec 100644 --- a/src/components/DBTable/index.less +++ b/src/components/DBTable/index.less @@ -30,3 +30,7 @@ .ant-upload { margin-left: 4px; } + +.DBTable-innerTable { + min-width: 1100px; +} diff --git a/src/components/Footer/index.less b/src/components/Footer/index.less index 16bd799..71abf2b 100644 --- a/src/components/Footer/index.less +++ b/src/components/Footer/index.less @@ -8,3 +8,10 @@ border-top: 1px solid #e9e9e9; width: 100%; } + +@media (max-width: 767px) { + .ant-back-top { + right: 10px !important; + bottom: 10px !important; + } +} diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 59866a3..218aee0 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,10 +1,11 @@ import React from 'react'; import {Link} from 'react-router'; -import {Icon, Menu} from 'antd'; +import {Icon, Menu, Popover} from 'antd'; import Logger from '../../utils/Logger'; import globalConfig from 'config'; import './index.less'; import {headerMenu} from 'menu'; +import Sidebar from '../Sidebar'; const SubMenu = Menu.SubMenu; // 为了使用方便 const MenuItem = Menu.Item; @@ -16,6 +17,9 @@ const logger = Logger.getLogger('Header'); * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接 */ class Header extends React.PureComponent { + state = { + popoverVisible: false + } // parse菜单的过程和sidebar组件差不多, copy&paste @@ -115,11 +119,36 @@ class Header extends React.PureComponent { // FIXME: 这里其实有个bug, 如果菜单名称很长可能会导致overflow, 出现滚动条 // 暂时无法解决..., 怎么调css都不对 + switchMenuPopover = () => { + this.setState({ + popoverVisible: !this.state.popoverVisible + }) + } + handleVisibleChange = (popoverVisible) => { + this.setState({ popoverVisible }); + } + render() { + const { isNavbar } = this.props + return (
{/*定义header中的菜单, 从右向左依次是注销/用户菜单/其他自定义菜单*/} + {isNavbar && ( + } + overlayClassName="ant-layout-popovermenu" + placement="bottomLeft" + trigger="click" + visible={this.state.popoverVisible} + onVisibleChange={this.handleVisibleChange} > + + + + + )} + {this.userMenu} {this.menu} diff --git a/src/components/Header/index.less b/src/components/Header/index.less index 5ad1a0d..79fcf73 100755 --- a/src/components/Header/index.less +++ b/src/components/Header/index.less @@ -38,3 +38,16 @@ right: 1px; left: auto; } + +.ant-layout-popovermenu { + min-width: 146px; + + .ant-popover-inner-content { + padding: 0; + } +} + +.ant-layout-popoverbtn { + font-size: 18px; + padding: 0 .5em; + } diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index e794a26..7c3e6c5 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -193,16 +193,32 @@ class Sidebar extends React.PureComponent { } }; + genMenus(isDark=true) { + const { switchMenuPopover } = this.props + + return ( + + {this.menu} + + ) + } + render() { + const { switchMenuPopover } = this.props + + if (this.props.isSimple) { + return this.genMenus(false) + } + return (