fix #2027,optimization style

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> {}

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>
     );
   }

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;
   }

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 | - |

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>

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;

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);

src/models/setting.js

@@ -1,4 +1,5 @@
 import { message } from 'antd';
+
 const defaultSetting = {
   collapse: false,
   silderTheme: 'dark',