From 6844c4133e1a0a1b47e6ae58ba33d24d1d236bb2 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Fri, 2 Feb 2018 15:58:51 +0800
Subject: [PATCH] tweak style & move Layout.Header outside of GlobalHeader

---
 src/components/GlobalHeader/index.js    |  8 +--
 src/components/GlobalHeader/index.less  |  1 +
 src/layouts/BasicLayout.js              | 76 +++++++++++++------------
 src/routes/Dashboard/Monitor.js         |  5 +-
 src/routes/Forms/AdvancedForm.js        |  2 +-
 src/routes/Profile/AdvancedProfile.less |  1 -
 6 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index 8ce5e66f..f43be9d2 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Layout, Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd';
+import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import Debounce from 'lodash-decorators/debounce';
@@ -8,8 +8,6 @@ import NoticeIcon from '../NoticeIcon';
 import HeaderSearch from '../HeaderSearch';
 import styles from './index.less';
 
-const { Header } = Layout;
-
 export default class GlobalHeader extends PureComponent {
   componentWillUnmount() {
     this.triggerResizeEvent.cancel();
@@ -68,7 +66,7 @@ export default class GlobalHeader extends PureComponent {
     );
     const noticeData = this.getNoticeData();
     return (
-      <Header className={styles.header}>
+      <div className={styles.header}>
         {isMobile && (
           [
             (
@@ -135,7 +133,7 @@ export default class GlobalHeader extends PureComponent {
             </Dropdown>
           ) : <Spin size="small" style={{ marginLeft: 8 }} />}
         </div>
-      </Header>
+      </div>
     );
   }
 }
diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index f1c38bde..6f885152 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -1,6 +1,7 @@
 @import "~antd/lib/style/themes/default.less";
 
 .header {
+  height: 64px;
   padding: 0 12px 0 0;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 58484803..f8c956a9 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -16,7 +16,7 @@ import Authorized from '../utils/Authorized';
 import { getMenuData } from '../common/menu';
 import logo from '../assets/logo.svg';
 
-const { Content } = Layout;
+const { Content, Header, Footer } = Layout;
 const { AuthorizedRoute } = Authorized;
 
 /**
@@ -164,18 +164,20 @@ class BasicLayout extends React.PureComponent {
           onCollapse={this.handleMenuCollapse}
         />
         <Layout>
-          <GlobalHeader
-            logo={logo}
-            currentUser={currentUser}
-            fetchingNotices={fetchingNotices}
-            notices={notices}
-            collapsed={collapsed}
-            isMobile={this.state.isMobile}
-            onNoticeClear={this.handleNoticeClear}
-            onCollapse={this.handleMenuCollapse}
-            onMenuClick={this.handleMenuClick}
-            onNoticeVisibleChange={this.handleNoticeVisibleChange}
-          />
+          <Header style={{ padding: 0 }}>
+            <GlobalHeader
+              logo={logo}
+              currentUser={currentUser}
+              fetchingNotices={fetchingNotices}
+              notices={notices}
+              collapsed={collapsed}
+              isMobile={this.state.isMobile}
+              onNoticeClear={this.handleNoticeClear}
+              onCollapse={this.handleMenuCollapse}
+              onMenuClick={this.handleMenuClick}
+              onNoticeVisibleChange={this.handleNoticeVisibleChange}
+            />
+          </Header>
           <Content style={{ margin: '24px 24px 0', height: '100%' }}>
             <Switch>
               {
@@ -201,29 +203,31 @@ class BasicLayout extends React.PureComponent {
               <Route render={NotFound} />
             </Switch>
           </Content>
-          <GlobalFooter
-            links={[{
-              key: 'Pro 首页',
-              title: 'Pro 首页',
-              href: 'http://pro.ant.design',
-              blankTarget: true,
-            }, {
-              key: 'github',
-              title: <Icon type="github" />,
-              href: 'https://github.com/ant-design/ant-design-pro',
-              blankTarget: true,
-            }, {
-              key: 'Ant Design',
-              title: 'Ant Design',
-              href: 'http://ant.design',
-              blankTarget: true,
-            }]}
-            copyright={
-              <div>
-                Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
-              </div>
-            }
-          />
+          <Footer style={{ padding: 0 }}>
+            <GlobalFooter
+              links={[{
+                key: 'Pro 首页',
+                title: 'Pro 首页',
+                href: 'http://pro.ant.design',
+                blankTarget: true,
+              }, {
+                key: 'github',
+                title: <Icon type="github" />,
+                href: 'https://github.com/ant-design/ant-design-pro',
+                blankTarget: true,
+              }, {
+                key: 'Ant Design',
+                title: 'Ant Design',
+                href: 'http://ant.design',
+                blankTarget: true,
+              }]}
+              copyright={
+                <div>
+                  Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
+                </div>
+              }
+            />
+          </Footer>
         </Layout>
       </Layout>
     );
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index 02b1ff87..4526f121 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -107,7 +107,6 @@ export default class Monitor extends PureComponent {
           <Col xl={12} lg={24} sm={24} xs={24}>
             <Card
               title="各品类占比"
-              style={{ marginBottom: 24 }}
               bordered={false}
               className={styles.pieCard}
             >
@@ -147,7 +146,7 @@ export default class Monitor extends PureComponent {
               </Row>
             </Card>
           </Col>
-          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+          <Col xl={6} lg={12} sm={24} xs={24}>
             <Card title="热门搜索" loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }}>
               <TagCloud
                 data={tags}
@@ -155,7 +154,7 @@ export default class Monitor extends PureComponent {
               />
             </Card>
           </Col>
-          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+          <Col xl={6} lg={12} sm={24} xs={24}>
             <Card title="资源剩余" bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false}>
               <WaterWave
                 height={161}
diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js
index e89e0761..1247e1d1 100644
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@@ -268,7 +268,7 @@ class AdvancedForm extends PureComponent {
             </Row>
           </Form>
         </Card>
-        <Card title="成员管理" className={styles.card} bordered={false}>
+        <Card title="成员管理" bordered={false}>
           {getFieldDecorator('members', {
             initialValue: tableData,
           })(<TableForm />)}
diff --git a/src/routes/Profile/AdvancedProfile.less b/src/routes/Profile/AdvancedProfile.less
index eb24e15e..679a5720 100644
--- a/src/routes/Profile/AdvancedProfile.less
+++ b/src/routes/Profile/AdvancedProfile.less
@@ -5,7 +5,6 @@
 }
 
 .tabsCard {
-  margin-bottom: 24px;
   :global {
     .ant-card-head {
       padding: 0 16px;
-- 
GitLab