Skip to content

GitLab

A
ant-design-pro
Commit d68666fe authored by 陈帅's avatar 陈帅
Browse files
Options

fix #2027,optimization style

parent ec1fafc4
Show whitespace changes
Inline Side-by-side
Showing with 68 additions and 52 deletions
src/components/PageHeader/index.d.ts
View file @ d68666fe
...@@ -16,6 +16,7 @@ export interface IPageHeaderProps { ...@@ -16,6 +16,7 @@ export interface IPageHeaderProps {
linkElement?: React.ReactNode; linkElement?: React.ReactNode;
style?: React.CSSProperties; style?: React.CSSProperties;
home?: React.ReactNode; home?: React.ReactNode;
wide?: boolean;
} }
export default class PageHeader extends React.Component<IPageHeaderProps, any> {} export default class PageHeader extends React.Component<IPageHeaderProps, any> {}
src/components/PageHeader/index.js
View file @ d68666fe
...@@ -188,6 +188,7 @@ export default class PageHeader extends PureComponent { ...@@ -188,6 +188,7 @@ export default class PageHeader extends PureComponent {
tabDefaultActiveKey, tabDefaultActiveKey,
tabBarExtraContent, tabBarExtraContent,
loading = false, loading = false,
wide = false,
} = this.props; } = this.props;
const { breadcrumb } = this.state; const { breadcrumb } = this.state;
...@@ -201,6 +202,7 @@ export default class PageHeader extends PureComponent { ...@@ -201,6 +202,7 @@ export default class PageHeader extends PureComponent {
} }
return ( return (
<div className={clsString}> <div className={clsString}>
<div className={wide ? styles.wide : ''}>
<Skeleton loading={loading}> <Skeleton loading={loading}>
{breadcrumb} {breadcrumb}
<div className={styles.detail}> <div className={styles.detail}>
...@@ -230,6 +232,7 @@ export default class PageHeader extends PureComponent { ...@@ -230,6 +232,7 @@ export default class PageHeader extends PureComponent {
) : null} ) : null}
</Skeleton> </Skeleton>
</div> </div>
</div>
); );
} }
} }
src/components/PageHeader/index.less
View file @ d68666fe
...@@ -4,7 +4,10 @@ ...@@ -4,7 +4,10 @@
background: @component-background; background: @component-background;
padding: 16px 32px 0 32px; padding: 16px 32px 0 32px;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
.wide {
max-width: 1200px;
margin: auto;
}
.detail { .detail {
display: flex; display: flex;
} }
......
src/components/PageHeader/index.md
View file @ d68666fe
...@@ -27,6 +27,7 @@ order: 11 ...@@ -27,6 +27,7 @@ order: 11
| tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - | | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - |
| tabActiveKey | 当前高亮的 tab 项 | string | - | | tabActiveKey | 当前高亮的 tab 项 | string | - |
| tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 | | tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 |
| wide | 是否定宽 | boolean | false |
| onTabChange | 切换面板的回调 | (key) => void | - | | onTabChange | 切换面板的回调 | (key) => void | - |
| itemRender | 自定义节点方法 | (menuItem) => ReactNode | - | | itemRender | 自定义节点方法 | (menuItem) => ReactNode | - |
| linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - | | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
......
src/components/SettingDarwer/index.js
View file @ d68666fe
...@@ -116,11 +116,8 @@ class SettingDarwer extends PureComponent { ...@@ -116,11 +116,8 @@ class SettingDarwer extends PureComponent {
width={273} width={273}
onClose={this.togglerContent} onClose={this.togglerContent}
placement="right" placement="right"
style={{ handler={
zIndex: 999, <div className={styles.handle}>
}}
>
<div className={styles.handle} onClick={this.togglerContent}>
{!collapse ? ( {!collapse ? (
<Icon <Icon
type="setting" type="setting"
...@@ -139,6 +136,12 @@ class SettingDarwer extends PureComponent { ...@@ -139,6 +136,12 @@ class SettingDarwer extends PureComponent {
/> />
)} )}
</div> </div>
}
onHandleClick={this.togglerContent}
style={{
zIndex: 999,
}}
>
<div className={styles.content}> <div className={styles.content}>
<Body title="整体风格设置"> <Body title="整体风格设置">
<BlockChecbox <BlockChecbox
...@@ -212,7 +215,8 @@ class SettingDarwer extends PureComponent { ...@@ -212,7 +215,8 @@ class SettingDarwer extends PureComponent {
width: 224, width: 224,
}} }}
> >
<Icon type="copy" />拷贝代码 <Icon type="copy" />
拷贝代码
</Button> </Button>
</CopyToClipboard> </CopyToClipboard>
</div> </div>
......
src/components/SettingDarwer/index.less
View file @ d68666fe
...@@ -52,11 +52,10 @@ ...@@ -52,11 +52,10 @@
position: fixed; position: fixed;
top: 240px; top: 240px;
background: #1890ff; background: #1890ff;
width: 57px; width: 48px;
height: 48px; height: 48px;
right: 273px; right: 273px;
padding: 14px 18px; padding: 14px 14px;
padding-left: 24px;
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
z-index: 0; z-index: 0;
......
src/layouts/PageHeaderLayout.js
View file @ d68666fe
...@@ -5,14 +5,16 @@ import PageHeader from '@/components/PageHeader'; ...@@ -5,14 +5,16 @@ import PageHeader from '@/components/PageHeader';
import GridContent from './GridContent'; import GridContent from './GridContent';
import styles from './PageHeaderLayout.less'; import styles from './PageHeaderLayout.less';
import MenuContext from './MenuContext'; 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}> <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
{top} {top}
<MenuContext.Consumer> <MenuContext.Consumer>
{value => { {value => {
return ( return (
<PageHeader <PageHeader
wide={grid === 'Wide'}
home={<FormattedMessage id="menu.home" defaultMessage="Home" />} home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
{...value} {...value}
key="pageheader" key="pageheader"
...@@ -36,4 +38,6 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) => ...@@ -36,4 +38,6 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) =>
</div> </div>
); );
export default PageHeaderLayout; export default connect(({ setting }) => ({
grid: setting.grid,
}))(PageHeaderLayout);
src/models/setting.js
View file @ d68666fe
import { message } from 'antd'; import { message } from 'antd';
const defaultSetting = { const defaultSetting = {
collapse: false, collapse: false,
silderTheme: 'dark', silderTheme: 'dark',
......
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