From d68666fedf5c587a01e8f9f090dc2dbfa5a146be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Mon, 27 Aug 2018 10:47:32 +0800
Subject: [PATCH] fix #2027,optimization style

---
 src/components/PageHeader/index.d.ts    |  1 +
 src/components/PageHeader/index.js      | 55 +++++++++++++------------
 src/components/PageHeader/index.less    |  5 ++-
 src/components/PageHeader/index.md      |  1 +
 src/components/SettingDarwer/index.js   | 44 +++++++++++---------
 src/components/SettingDarwer/index.less |  5 +--
 src/layouts/PageHeaderLayout.js         |  8 +++-
 src/models/setting.js                   |  1 +
 8 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/src/components/PageHeader/index.d.ts b/src/components/PageHeader/index.d.ts
index 22423ef9..f4d56c26 100644
--- a/src/components/PageHeader/index.d.ts
+++ b/src/components/PageHeader/index.d.ts
@@ -16,6 +16,7 @@ export interface IPageHeaderProps {
   linkElement?: React.ReactNode;
   style?: React.CSSProperties;
   home?: React.ReactNode;
+  wide?: boolean;
 }
 
 export default class PageHeader extends React.Component<IPageHeaderProps, any> {}
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index ef0a563c..60a37298 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -188,6 +188,7 @@ export default class PageHeader extends PureComponent {
       tabDefaultActiveKey,
       tabBarExtraContent,
       loading = false,
+      wide = false,
     } = this.props;
     const { breadcrumb } = this.state;
 
@@ -201,34 +202,36 @@ export default class PageHeader extends PureComponent {
     }
     return (
       <div className={clsString}>
-        <Skeleton loading={loading}>
-          {breadcrumb}
-          <div className={styles.detail}>
-            {logo && <div className={styles.logo}>{logo}</div>}
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {title && <h1 className={styles.title}>{title}</h1>}
-                {action && <div className={styles.action}>{action}</div>}
-              </div>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+        <div className={wide ? styles.wide : ''}>
+          <Skeleton loading={loading}>
+            {breadcrumb}
+            <div className={styles.detail}>
+              {logo && <div className={styles.logo}>{logo}</div>}
+              <div className={styles.main}>
+                <div className={styles.row}>
+                  {title && <h1 className={styles.title}>{title}</h1>}
+                  {action && <div className={styles.action}>{action}</div>}
+                </div>
+                <div className={styles.row}>
+                  {content && <div className={styles.content}>{content}</div>}
+                  {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+                </div>
               </div>
             </div>
-          </div>
-          {tabList && tabList.length ? (
-            <Tabs
-              className={styles.tabs}
-              {...activeKeyProps}
-              onChange={this.onChange}
-              tabBarExtraContent={tabBarExtraContent}
-            >
-              {tabList.map(item => (
-                <TabPane tab={item.tab} key={item.key} />
-              ))}
-            </Tabs>
-          ) : null}
-        </Skeleton>
+            {tabList && tabList.length ? (
+              <Tabs
+                className={styles.tabs}
+                {...activeKeyProps}
+                onChange={this.onChange}
+                tabBarExtraContent={tabBarExtraContent}
+              >
+                {tabList.map(item => (
+                  <TabPane tab={item.tab} key={item.key} />
+                ))}
+              </Tabs>
+            ) : null}
+          </Skeleton>
+        </div>
       </div>
     );
   }
diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less
index efc581ab..5de4d5a9 100644
--- a/src/components/PageHeader/index.less
+++ b/src/components/PageHeader/index.less
@@ -4,7 +4,10 @@
   background: @component-background;
   padding: 16px 32px 0 32px;
   border-bottom: @border-width-base @border-style-base @border-color-split;
-
+  .wide {
+    max-width: 1200px;
+    margin: auto;
+  }
   .detail {
     display: flex;
   }
diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md
index c446d410..c0de288e 100644
--- a/src/components/PageHeader/index.md
+++ b/src/components/PageHeader/index.md
@@ -27,6 +27,7 @@ order: 11
 | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | -  |
 | tabActiveKey | 当前高亮的 tab 项 | string | -  |
 | tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项  |
+| wide | 是否定宽 | boolean | false  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
 | itemRender | 自定义节点方法 | (menuItem) => ReactNode | -  |
 | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
diff --git a/src/components/SettingDarwer/index.js b/src/components/SettingDarwer/index.js
index 420b2c7c..7cc0bd02 100644
--- a/src/components/SettingDarwer/index.js
+++ b/src/components/SettingDarwer/index.js
@@ -116,29 +116,32 @@ class SettingDarwer extends PureComponent {
         width={273}
         onClose={this.togglerContent}
         placement="right"
+        handler={
+          <div className={styles.handle}>
+            {!collapse ? (
+              <Icon
+                type="setting"
+                style={{
+                  color: '#FFF',
+                  fontSize: 20,
+                }}
+              />
+            ) : (
+              <Icon
+                type="close"
+                style={{
+                  color: '#FFF',
+                  fontSize: 20,
+                }}
+              />
+            )}
+          </div>
+        }
+        onHandleClick={this.togglerContent}
         style={{
           zIndex: 999,
         }}
       >
-        <div className={styles.handle} onClick={this.togglerContent}>
-          {!collapse ? (
-            <Icon
-              type="setting"
-              style={{
-                color: '#FFF',
-                fontSize: 20,
-              }}
-            />
-          ) : (
-            <Icon
-              type="close"
-              style={{
-                color: '#FFF',
-                fontSize: 20,
-              }}
-            />
-          )}
-        </div>
         <div className={styles.content}>
           <Body title="整体风格设置">
             <BlockChecbox
@@ -212,7 +215,8 @@ class SettingDarwer extends PureComponent {
                 width: 224,
               }}
             >
-              <Icon type="copy" />拷贝代码
+              <Icon type="copy" />
+              拷贝代码
             </Button>
           </CopyToClipboard>
         </div>
diff --git a/src/components/SettingDarwer/index.less b/src/components/SettingDarwer/index.less
index 32339096..6dd61b99 100644
--- a/src/components/SettingDarwer/index.less
+++ b/src/components/SettingDarwer/index.less
@@ -52,11 +52,10 @@
   position: fixed;
   top: 240px;
   background: #1890ff;
-  width: 57px;
+  width: 48px;
   height: 48px;
   right: 273px;
-  padding: 14px 18px;
-  padding-left: 24px;
+  padding: 14px 14px;
   cursor: pointer;
   pointer-events: auto;
   z-index: 0;
diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
index 4801264a..9b8ae660 100644
--- a/src/layouts/PageHeaderLayout.js
+++ b/src/layouts/PageHeaderLayout.js
@@ -5,14 +5,16 @@ import PageHeader from '@/components/PageHeader';
 import GridContent from './GridContent';
 import styles from './PageHeaderLayout.less';
 import MenuContext from './MenuContext';
+import { connect } from 'dva';
 
-const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) => (
+const PageHeaderLayout = ({ children, grid, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
     {top}
     <MenuContext.Consumer>
       {value => {
         return (
           <PageHeader
+            wide={grid === 'Wide'}
             home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
             {...value}
             key="pageheader"
@@ -36,4 +38,6 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) =>
   </div>
 );
 
-export default PageHeaderLayout;
+export default connect(({ setting }) => ({
+  grid: setting.grid,
+}))(PageHeaderLayout);
diff --git a/src/models/setting.js b/src/models/setting.js
index 7e978a78..f968d6ce 100644
--- a/src/models/setting.js
+++ b/src/models/setting.js
@@ -1,4 +1,5 @@
 import { message } from 'antd';
+
 const defaultSetting = {
   collapse: false,
   silderTheme: 'dark',
-- 
GitLab