fix #2027,optimization style

d68666fe · 陈帅 · ec1fafc4 · d68666fe · d68666fe · d68666fe
Commit d68666fe authored Aug 27, 2018 by 陈帅
8 changed files
--- 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> {}
--- 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,6 +202,7 @@ export default class PageHeader extends PureComponent {
    }
    return (
      <div className={clsString}>
+        <div className={wide ? styles.wide : ''}>
          <Skeleton loading={loading}>
            {breadcrumb}
            <div className={styles.detail}>
@@ -230,6 +232,7 @@ export default class PageHeader extends PureComponent {
            ) : null}
          </Skeleton>
        </div>
+      </div>
    );
  }
 }
--- 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;
  }

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

--- a/src/components/SettingDarwer/index.js
+++ b/src/components/SettingDarwer/index.js
@@ -116,11 +116,8 @@ class SettingDarwer extends PureComponent {
        width={273}
        onClose={this.togglerContent}
        placement="right"
-        style={{
-          zIndex: 999,
-        }}
-      >
-        <div className={styles.handle} onClick={this.togglerContent}>
+        handler={
+          <div className={styles.handle}>
            {!collapse ? (
              <Icon
                type="setting"
@@ -139,6 +136,12 @@ class SettingDarwer extends PureComponent {
              />
            )}
          </div>
+        }
+        onHandleClick={this.togglerContent}
+        style={{
+          zIndex: 999,
+        }}
+      >
        <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>

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

--- 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);
--- a/src/models/setting.js
+++ b/src/models/setting.js
 import { message } from 'antd';
+
 const defaultSetting = {
  collapse: false,
  silderTheme: 'dark',