Commit 9c632431 authored by 陈帅's avatar 陈帅

rm pageheaderwarp in blocks

parent e30d93a6
AccountCenter/snapshot.png

322 KB | W: | H:

AccountCenter/snapshot.png

323 KB | W: | H:

AccountCenter/snapshot.png
AccountCenter/snapshot.png
AccountCenter/snapshot.png
AccountCenter/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
AccountSettings/snapshot.png

77.3 KB | W: | H:

AccountSettings/snapshot.png

77.3 KB | W: | H:

AccountSettings/snapshot.png
AccountSettings/snapshot.png
AccountSettings/snapshot.png
AccountSettings/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
DashboardAnalysis/snapshot.png

272 KB | W: | H:

DashboardAnalysis/snapshot.png

276 KB | W: | H:

DashboardAnalysis/snapshot.png
DashboardAnalysis/snapshot.png
DashboardAnalysis/snapshot.png
DashboardAnalysis/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
DashboardMonitor/snapshot.png

280 KB | W: | H:

DashboardMonitor/snapshot.png

282 KB | W: | H:

DashboardMonitor/snapshot.png
DashboardMonitor/snapshot.png
DashboardMonitor/snapshot.png
DashboardMonitor/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
DashboardWorkplace/snapshot.png

223 KB | W: | H:

DashboardWorkplace/snapshot.png

223 KB | W: | H:

DashboardWorkplace/snapshot.png
DashboardWorkplace/snapshot.png
DashboardWorkplace/snapshot.png
DashboardWorkplace/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
EditorFlow/snapshot.png

45.9 KB | W: | H:

EditorFlow/snapshot.png

45.8 KB | W: | H:

EditorFlow/snapshot.png
EditorFlow/snapshot.png
EditorFlow/snapshot.png
EditorFlow/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
EditorKoni/snapshot.png

40.7 KB | W: | H:

EditorKoni/snapshot.png

40.7 KB | W: | H:

EditorKoni/snapshot.png
EditorKoni/snapshot.png
EditorKoni/snapshot.png
EditorKoni/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext, GridContent } from '@ant-design/pro-layout';
import { PageHeader, Tabs, Typography } from 'antd';
import styles from './index.less';
import { TabsProps } from 'antd/es/tabs';
interface IPageHeaderTabConfig {
tabList?: Array<{
key: string;
tab: string;
}>;
tabActiveKey?: TabsProps['activeKey'];
onTabChange?: TabsProps['onChange'];
tabBarExtraContent?: TabsProps['tabBarExtraContent'];
}
interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
/**
* render Footer tabList
* In order to be compatible with the old version of the PageHeader
* basically all the functions are implemented.
*/
const renderFooter = ({
tabList,
tabActiveKey,
onTabChange,
tabBarExtraContent,
}: IPageHeaderTabConfig) => {
return tabList && tabList.length ? (
<Tabs
className={styles.tabs}
activeKey={tabActiveKey}
onChange={key => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} key={item.key} />
))}
</Tabs>
) : null;
};
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
{...restProps}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
footer={renderFooter(restProps)}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
EditorMind/snapshot.png

86.6 KB | W: | H:

EditorMind/snapshot.png

86.6 KB | W: | H:

EditorMind/snapshot.png
EditorMind/snapshot.png
EditorMind/snapshot.png
EditorMind/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext, GridContent } from '@ant-design/pro-layout';
import { PageHeader, Tabs, Typography } from 'antd';
import styles from './index.less';
import { TabsProps } from 'antd/es/tabs';
interface IPageHeaderTabConfig {
tabList?: Array<{
key: string;
tab: string;
}>;
tabActiveKey?: TabsProps['activeKey'];
onTabChange?: TabsProps['onChange'];
tabBarExtraContent?: TabsProps['tabBarExtraContent'];
}
interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
/**
* render Footer tabList
* In order to be compatible with the old version of the PageHeader
* basically all the functions are implemented.
*/
const renderFooter = ({
tabList,
tabActiveKey,
onTabChange,
tabBarExtraContent,
}: IPageHeaderTabConfig) => {
return tabList && tabList.length ? (
<Tabs
className={styles.tabs}
activeKey={tabActiveKey}
onChange={key => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} key={item.key} />
))}
</Tabs>
) : null;
};
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
{...restProps}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
footer={renderFooter(restProps)}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
Exception403/snapshot.png

63.6 KB | W: | H:

Exception403/snapshot.png

63.6 KB | W: | H:

Exception403/snapshot.png
Exception403/snapshot.png
Exception403/snapshot.png
Exception403/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
Exception404/snapshot.png

58.6 KB | W: | H:

Exception404/snapshot.png

58.6 KB | W: | H:

Exception404/snapshot.png
Exception404/snapshot.png
Exception404/snapshot.png
Exception404/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
Exception500/snapshot.png

58 KB | W: | H:

Exception500/snapshot.png

58.2 KB | W: | H:

Exception500/snapshot.png
Exception500/snapshot.png
Exception500/snapshot.png
Exception500/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
FormAdvancedForm/snapshot.png

105 KB | W: | H:

FormAdvancedForm/snapshot.png

105 KB | W: | H:

FormAdvancedForm/snapshot.png
FormAdvancedForm/snapshot.png
FormAdvancedForm/snapshot.png
FormAdvancedForm/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
FormBasicForm/snapshot.png

80.7 KB | W: | H:

FormBasicForm/snapshot.png

17.1 KB | W: | H:

FormBasicForm/snapshot.png
FormBasicForm/snapshot.png
FormBasicForm/snapshot.png
FormBasicForm/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.content {
margin: 24px 24px 0;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Typography } from 'antd';
import styles from './index.less';
interface IPageHeaderWrapperProps {
content: React.ReactNode;
title?: React.ReactNode;
}
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
{...restProps}
>
{content}
</PageHeader>
{children ? <div className={styles.content}>{children}</div> : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
@import '~antd/es/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Typography } from 'antd';
import styles from './index.less';
import { GridContent } from '@ant-design/pro-layout';
interface IPageHeaderWrapperProps {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
{...restProps}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
ListBasicList/snapshot.png

131 KB | W: | H:

ListBasicList/snapshot.png

131 KB | W: | H:

ListBasicList/snapshot.png
ListBasicList/snapshot.png
ListBasicList/snapshot.png
ListBasicList/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListCardList/snapshot.png

154 KB | W: | H:

ListCardList/snapshot.png

154 KB | W: | H:

ListCardList/snapshot.png
ListCardList/snapshot.png
ListCardList/snapshot.png
ListCardList/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Typography } from 'antd';
import styles from './index.less';
import { GridContent } from '@ant-design/pro-layout';
interface IPageHeaderWrapperProps {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
{...restProps}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
ListSearch/snapshot.png

26.1 KB | W: | H:

ListSearch/snapshot.png

26.2 KB | W: | H:

ListSearch/snapshot.png
ListSearch/snapshot.png
ListSearch/snapshot.png
ListSearch/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Tabs, Typography } from 'antd';
import styles from './index.less';
import { GridContent } from '@ant-design/pro-layout';
import { TabsProps } from 'antd/es/tabs';
interface IPageHeaderTabConfig {
tabList?: Array<{
key: string;
tab: string;
}>;
tabActiveKey?: TabsProps['activeKey'];
onTabChange?: TabsProps['onChange'];
tabBarExtraContent?: TabsProps['tabBarExtraContent'];
}
interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
/**
* render Footer tabList
* In order to be compatible with the old version of the PageHeader
* basically all the functions are implemented.
*/
const renderFooter = ({
tabList,
tabActiveKey,
onTabChange,
tabBarExtraContent,
}: IPageHeaderTabConfig) => {
return tabList && tabList.length ? (
<Tabs
className={styles.tabs}
activeKey={tabActiveKey}
onChange={key => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} key={item.key} />
))}
</Tabs>
) : null;
};
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
{...restProps}
footer={renderFooter(restProps)}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
ListSearchApplications/snapshot.png

68.9 KB | W: | H:

ListSearchApplications/snapshot.png

67 KB | W: | H:

ListSearchApplications/snapshot.png
ListSearchApplications/snapshot.png
ListSearchApplications/snapshot.png
ListSearchApplications/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Typography } from 'antd';
import styles from './index.less';
import { GridContent } from '@ant-design/pro-layout';
interface IPageHeaderWrapperProps {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
{...restProps}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
ListSearchArticles/snapshot.png

290 KB | W: | H:

ListSearchArticles/snapshot.png

289 KB | W: | H:

ListSearchArticles/snapshot.png
ListSearchArticles/snapshot.png
ListSearchArticles/snapshot.png
ListSearchArticles/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListSearchProjects/snapshot.png

395 KB | W: | H:

ListSearchProjects/snapshot.png

395 KB | W: | H:

ListSearchProjects/snapshot.png
ListSearchProjects/snapshot.png
ListSearchProjects/snapshot.png
ListSearchProjects/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListTableList/snapshot.png

129 KB | W: | H:

ListTableList/snapshot.png

129 KB | W: | H:

ListTableList/snapshot.png
ListTableList/snapshot.png
ListTableList/snapshot.png
ListTableList/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ProfileBasic/snapshot.png

134 KB | W: | H:

ProfileBasic/snapshot.png

136 KB | W: | H:

ProfileBasic/snapshot.png
ProfileBasic/snapshot.png
ProfileBasic/snapshot.png
ProfileBasic/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
@import '~antd/es/style/themes/default.less';
.content {
margin: 24px 24px 0;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Typography } from 'antd';
import styles from './index.less';
interface IPageHeaderWrapperProps {
content?: React.ReactNode;
title?: React.ReactNode;
}
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({ children, content, title }) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
>
{content}
</PageHeader>
{children ? <div className={styles.content}>{children}</div> : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
ResultFail/snapshot.png

50.6 KB | W: | H:

ResultFail/snapshot.png

50.7 KB | W: | H:

ResultFail/snapshot.png
ResultFail/snapshot.png
ResultFail/snapshot.png
ResultFail/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ResultSuccess/snapshot.png

75.5 KB | W: | H:

ResultSuccess/snapshot.png

75.5 KB | W: | H:

ResultSuccess/snapshot.png
ResultSuccess/snapshot.png
ResultSuccess/snapshot.png
ResultSuccess/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
UserLogin/snapshot.png

40 KB | W: | H:

UserLogin/snapshot.png

40.1 KB | W: | H:

UserLogin/snapshot.png
UserLogin/snapshot.png
UserLogin/snapshot.png
UserLogin/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
UserRegister/snapshot.png

37.8 KB | W: | H:

UserRegister/snapshot.png

37.9 KB | W: | H:

UserRegister/snapshot.png
UserRegister/snapshot.png
UserRegister/snapshot.png
UserRegister/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
UserRegisterResult/snapshot.png

46.4 KB | W: | H:

UserRegisterResult/snapshot.png

46.4 KB | W: | H:

UserRegisterResult/snapshot.png
UserRegisterResult/snapshot.png
UserRegisterResult/snapshot.png
UserRegisterResult/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -7,9 +7,11 @@ const { join, dirname } = require('path'); ...@@ -7,9 +7,11 @@ const { join, dirname } = require('path');
const fs = require('fs'); const fs = require('fs');
const getNpmRegistry = require('getnpmregistry'); const getNpmRegistry = require('getnpmregistry');
const execa = require('execa'); const execa = require('execa');
const { kill } = require('cross-port-killer');
const env = Object.create(process.env); const env = Object.create(process.env);
env.BROWSER = 'none'; env.BROWSER = 'none';
env.PORT = process.env.PORT || '2144';
env.TEST = true; env.TEST = true;
env.COMPRESS = 'none'; env.COMPRESS = 'none';
env.PROGRESS = 'none'; env.PROGRESS = 'none';
...@@ -36,6 +38,9 @@ const startServer = async path => { ...@@ -36,6 +38,9 @@ const startServer = async path => {
return resolve(startServer); return resolve(startServer);
} }
}); });
startServer.on('exit', () => {
kill(env.PORT || 8000);
});
}); });
}; };
...@@ -58,9 +63,10 @@ const autoScroll = page => { ...@@ -58,9 +63,10 @@ const autoScroll = page => {
}; };
const getImage = async (page, path) => { const getImage = async (page, path) => {
kill(env.PORT || 8000);
const server = await startServer(path); const server = await startServer(path);
await page.reload('http://127.0.0.1:8000'); await page.reload(`http://127.0.0.1:${env.PORT}`);
await page.setViewport({ await page.setViewport({
width: 1440, width: 1440,
...@@ -73,7 +79,6 @@ const getImage = async (page, path) => { ...@@ -73,7 +79,6 @@ const getImage = async (page, path) => {
path: join(path, 'snapshot.png'), path: join(path, 'snapshot.png'),
fullPage: true, fullPage: true,
}); });
server.kill(); server.kill();
}; };
...@@ -89,7 +94,7 @@ const openBrowser = async () => { ...@@ -89,7 +94,7 @@ const openBrowser = async () => {
], ],
}); });
const page = await browser.newPage(); const page = await browser.newPage();
page.goto('http://127.0.0.1:8000'); page.goto(`http://127.0.0.1:${env.PORT}`);
return page; return page;
}; };
......
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