Skip to content

GitLab

P
pro-blocks
Commit 55b6eef9 authored by afc163's avatar afc163
Browse files
Options

Add screen reponsive className

parent 76f9865b
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 123 deletions
src/layouts/BasicLayout.js
View file @ 55b6eef9
...@@ -6,6 +6,8 @@ import { connect } from 'dva'; ...@@ -6,6 +6,8 @@ import { connect } from 'dva';
import { Link, routerRedux, Route, Redirect, Switch } from 'dva/router'; import { Link, routerRedux, Route, Redirect, Switch } from 'dva/router';
import moment from 'moment'; import moment from 'moment';
import groupBy from 'lodash/groupBy'; import groupBy from 'lodash/groupBy';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import styles from './BasicLayout.less'; import styles from './BasicLayout.less';
import HeaderSearch from '../components/HeaderSearch'; import HeaderSearch from '../components/HeaderSearch';
import NoticeIcon from '../components/NoticeIcon'; import NoticeIcon from '../components/NoticeIcon';
...@@ -16,6 +18,27 @@ import { getRouteData } from '../utils/utils'; ...@@ -16,6 +18,27 @@ import { getRouteData } from '../utils/utils';
const { Header, Sider, Content } = Layout; const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu; const { SubMenu } = Menu;
const query = {
'screen-xs': {
maxWidth: 575,
},
'screen-sm': {
minWidth: 576,
maxWidth: 767,
},
'screen-md': {
minWidth: 768,
maxWidth: 991,
},
'screen-lg': {
minWidth: 992,
maxWidth: 1199,
},
'screen-xl': {
minWidth: 1200,
},
};
class BasicLayout extends React.PureComponent { class BasicLayout extends React.PureComponent {
static childContextTypes = { static childContextTypes = {
location: PropTypes.object, location: PropTypes.object,
...@@ -211,134 +234,140 @@ class BasicLayout extends React.PureComponent { ...@@ -211,134 +234,140 @@ class BasicLayout extends React.PureComponent {
openKeys: this.state.openKeys, openKeys: this.state.openKeys,
}; };
return ( const layout = (
<DocumentTitle title={this.getPageTitle()}> <Layout>
<Layout> <Sider
<Sider trigger={null}
trigger={null} collapsible
collapsible collapsed={collapsed}
collapsed={collapsed} collapsedWidth={80}
collapsedWidth={80} breakpoint="md"
breakpoint="md" onCollapse={this.onCollapse}
onCollapse={this.onCollapse} width={256}
width={256} className={styles.sider}
className={styles.sider} >
<div className={styles.logo}>
<Link to="/">
<img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" />
<h1>Ant Design Pro</h1>
</Link>
</div>
<Menu
theme="dark"
mode="inline"
{...menuProps}
onOpenChange={this.handleOpenChange}
selectedKeys={this.getCurrentMenuSelectedKeys()}
style={{ margin: '16px 0', width: '100%' }}
> >
<div className={styles.logo}> {this.getNavMenuItems(this.menus)}
<Link to="/"> </Menu>
<img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" /> </Sider>
<h1>Ant Design Pro</h1> <Layout>
</Link> <Header className={styles.header}>
</div> <Icon
<Menu className={styles.trigger}
theme="dark" type={collapsed ? 'menu-unfold' : 'menu-fold'}
mode="inline" onClick={this.toggle}
{...menuProps} />
onOpenChange={this.handleOpenChange} <div className={styles.right}>
selectedKeys={this.getCurrentMenuSelectedKeys()} <HeaderSearch
style={{ margin: '16px 0', width: '100%' }} className={`${styles.action} ${styles.search}`}
> placeholder="站内搜索"
{this.getNavMenuItems(this.menus)} dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
</Menu> onSearch={(value) => {
</Sider> console.log('input', value); // eslint-disable-line
<Layout> }}
<Header className={styles.header}> onPressEnter={(value) => {
<Icon console.log('enter', value); // eslint-disable-line
className={styles.trigger} }}
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/> />
<div className={styles.right}> <NoticeIcon
<HeaderSearch className={styles.action}
className={`${styles.action} ${styles.search}`} count={currentUser.notifyCount}
placeholder="站内搜索" onItemClick={(item, tabProps) => {
dataSource={['搜索提示一', '搜索提示二', '搜索提示三']} console.log(item, tabProps); // eslint-disable-line
onSearch={(value) => { }}
console.log('input', value); // eslint-disable-line onClear={this.handleNoticeClear}
}} onPopupVisibleChange={this.handleNoticeVisibleChange}
onPressEnter={(value) => { loading={fetchingNotices}
console.log('enter', value); // eslint-disable-line popupAlign={{ offset: [20, -16] }}
}} >
<NoticeIcon.Tab
list={noticeData['通知']}
title="通知"
emptyText="你已查看所有通知"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
/>
<NoticeIcon.Tab
list={noticeData['消息']}
title="消息"
emptyText="您已读完所有消息"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
/> />
<NoticeIcon <NoticeIcon.Tab
className={styles.action} list={noticeData['待办']}
count={currentUser.notifyCount} title="待办"
onItemClick={(item, tabProps) => { emptyText="你已完成所有待办"
console.log(item, tabProps); // eslint-disable-line emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
}} />
onClear={this.handleNoticeClear} </NoticeIcon>
onPopupVisibleChange={this.handleNoticeVisibleChange} {currentUser.name ? (
loading={fetchingNotices} <Dropdown overlay={menu}>
popupAlign={{ offset: [20, -16] }} <span className={`${styles.action} ${styles.account}`}>
> <Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
<NoticeIcon.Tab {currentUser.name}
list={noticeData['通知']} </span>
title="通知" </Dropdown>
emptyText="你已查看所有通知" ) : <Spin size="small" style={{ marginLeft: 8 }} />}
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" </div>
/> </Header>
<NoticeIcon.Tab <Content style={{ margin: '24px 24px 0', height: '100%' }}>
list={noticeData['消息']} <Switch>
title="消息" {
emptyText="您已读完所有消息" getRouteData('BasicLayout').map(item =>
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" (
/> <Route
<NoticeIcon.Tab exact={item.exact}
list={noticeData['待办']} key={item.path}
title="待办" path={item.path}
emptyText="你已完成所有待办" component={item.component}
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg" />
/>
</NoticeIcon>
{currentUser.name ? (
<Dropdown overlay={menu}>
<span className={`${styles.action} ${styles.account}`}>
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
{currentUser.name}
</span>
</Dropdown>
) : <Spin size="small" style={{ marginLeft: 8 }} />}
</div>
</Header>
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
<Switch>
{
getRouteData('BasicLayout').map(item =>
(
<Route
exact={item.exact}
key={item.path}
path={item.path}
component={item.component}
/>
)
) )
} )
<Redirect to="/dashboard/analysis" /> }
</Switch> <Redirect to="/dashboard/analysis" />
<GlobalFooter </Switch>
links={[{ <GlobalFooter
title: '使用文档', links={[{
href: 'http://pro.ant.design', title: '使用文档',
blankTarget: true, href: 'http://pro.ant.design',
}, { blankTarget: true,
title: 'GitHub', }, {
href: 'https://github.com/ant-design/ant-design-pro', title: 'GitHub',
blankTarget: true, href: 'https://github.com/ant-design/ant-design-pro',
}, { blankTarget: true,
title: 'Ant Design', }, {
href: 'http://ant.design', title: 'Ant Design',
blankTarget: true, href: 'http://ant.design',
}]} blankTarget: true,
copyright={ }]}
<div> copyright={
Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品 <div>
</div> Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品
} </div>
/> }
</Content> />
</Layout> </Content>
</Layout> </Layout>
</Layout>
);
return (
<DocumentTitle title={this.getPageTitle()}>
<ContainerQuery query={query}>
{params => <div className={classNames(params)}>{layout}</div>}
</ContainerQuery>
</DocumentTitle> </DocumentTitle>
); );
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment