diff --git a/DashboardWorkplace/src/components/PageHeaderWrapper/index.less b/DashboardWorkplace/src/components/PageHeaderWrapper/index.less
deleted file mode 100644
index 908db575ae9f0a0cd75d04952ba4f37b3002da42..0000000000000000000000000000000000000000
--- a/DashboardWorkplace/src/components/PageHeaderWrapper/index.less
+++ /dev/null
@@ -1,86 +0,0 @@
-@import '~antd/lib/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;
-  }
-}
diff --git a/DashboardWorkplace/src/components/PageHeaderWrapper/index.tsx b/DashboardWorkplace/src/components/PageHeaderWrapper/index.tsx
deleted file mode 100644
index f8f545507ae22d66c5b9f886e4d97a988fb8dc9e..0000000000000000000000000000000000000000
--- a/DashboardWorkplace/src/components/PageHeaderWrapper/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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,
-  content,
-  title,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader {...restProps} {...value} title={title || value.title}>
-          <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;
diff --git a/DashboardWorkplace/src/index.tsx b/DashboardWorkplace/src/index.tsx
index 590fbe7ae28a352beb6a2c0231435457a26f8265..327dab31382d15d97f7602ffcdc0963a09b07043 100644
--- a/DashboardWorkplace/src/index.tsx
+++ b/DashboardWorkplace/src/index.tsx
@@ -6,10 +6,10 @@ import { Row, Col, Card, List, Avatar } from 'antd';
 import { Dispatch } from 'redux';
 
 import EditableLinkGroup from './components/EditableLinkGroup';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
 import Radar from './components/Radar';
 import { ModalState } from './model';
 import { ICurrentUser, IActivities, IRadarData, INotice } from './data';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 import styles from './style.less';
 
diff --git a/EditorFlow/src/components/PageHeaderWrapper/index.less b/EditorFlow/src/components/PageHeaderWrapper/index.less
deleted file mode 100644
index 908db575ae9f0a0cd75d04952ba4f37b3002da42..0000000000000000000000000000000000000000
--- a/EditorFlow/src/components/PageHeaderWrapper/index.less
+++ /dev/null
@@ -1,86 +0,0 @@
-@import '~antd/lib/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;
-  }
-}
diff --git a/EditorFlow/src/components/PageHeaderWrapper/index.tsx b/EditorFlow/src/components/PageHeaderWrapper/index.tsx
deleted file mode 100644
index afe7458770ad1daf2f141e2cfd82ee28a20283ac..0000000000000000000000000000000000000000
--- a/EditorFlow/src/components/PageHeaderWrapper/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-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/lib/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;
diff --git a/EditorFlow/src/index.tsx b/EditorFlow/src/index.tsx
index 29ca776c2b38251883c2c932059ddf519148e8ea..ce6bfba4f6b1e9f71a6af4743e89e937181b83bd 100644
--- a/EditorFlow/src/index.tsx
+++ b/EditorFlow/src/index.tsx
@@ -7,7 +7,7 @@ import { FlowToolbar } from './components/EditorToolbar';
 import { FlowItemPanel } from './components/EditorItemPanel';
 import { FlowDetailPanel } from './components/EditorDetailPanel';
 import styles from './index.less';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { formatMessage } from 'umi-plugin-react/locale';
 
 GGEditor.setTrackable(false);
diff --git a/EditorKoni/src/index.tsx b/EditorKoni/src/index.tsx
index 09390c5e971a5382aaaf8ada2d0aeb5163d0f8d0..af0bb8ea9e0d6a4946ab2296a1a5e74d253efff3 100644
--- a/EditorKoni/src/index.tsx
+++ b/EditorKoni/src/index.tsx
@@ -7,7 +7,7 @@ import { KoniToolbar } from './components/EditorToolbar';
 import { KoniItemPanel } from './components/EditorItemPanel';
 import { KoniDetailPanel } from './components/EditorDetailPanel';
 import styles from './index.less';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { formatMessage } from 'umi-plugin-react/locale';
 
 GGEditor.setTrackable(false);
diff --git a/EditorMind/src/index.tsx b/EditorMind/src/index.tsx
index ef085858c3053ee9b2b2e39727da8fe0cdd1c096..6b0e93b84fb907943e165ff0255c74b84fb218b5 100644
--- a/EditorMind/src/index.tsx
+++ b/EditorMind/src/index.tsx
@@ -7,7 +7,7 @@ import { MindToolbar } from './components/EditorToolbar';
 import { MindDetailPanel } from './components/EditorDetailPanel';
 import data from './worldCup2018.json';
 import styles from './index.less';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { formatMessage } from 'umi-plugin-react/locale';
 
 GGEditor.setTrackable(false);
diff --git a/FormAdvancedForm/src/index.tsx b/FormAdvancedForm/src/index.tsx
index 20d611ee0a479b2ba547a376e9b42fcbbfded359..c4f083ad9ace2869e36bbff2be51c670bb87836c 100644
--- a/FormAdvancedForm/src/index.tsx
+++ b/FormAdvancedForm/src/index.tsx
@@ -18,6 +18,7 @@ import styles from './style.less';
 import { FormComponentProps } from 'antd/lib/form';
 import { Dispatch } from 'redux';
 import FooterToolbar from './components/FooterToolbar';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@@ -98,10 +99,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
       if (!errors[key]) {
         return null;
       }
+      const errorMessage = errors[key] || [];
       return (
         <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
           <Icon type="cross-circle-o" className={styles.errorIcon} />
-          <div className={styles.errorMessage}>{errors[key][0]}</div>
+          <div className={styles.errorMessage}>{errorMessage[0]}</div>
           <div className={styles.errorField}>{fieldLabels[key]}</div>
         </li>
       );
@@ -164,164 +166,166 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
     const { width } = this.state;
     return (
       <>
-        <Card title="仓库管理" className={styles.card} bordered={false}>
-          <Form layout="vertical" hideRequiredMark>
-            <Row gutter={16}>
-              <Col lg={6} md={12} sm={24}>
-                <Form.Item label={fieldLabels.name}>
-                  {getFieldDecorator('name', {
-                    rules: [{ required: true, message: '请输入仓库名称' }],
-                  })(<Input placeholder="请输入仓库名称" />)}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
-                <Form.Item label={fieldLabels.url}>
-                  {getFieldDecorator('url', {
-                    rules: [{ required: true, message: '请选择' }],
-                  })(
-                    <Input
-                      style={{ width: '100%' }}
-                      addonBefore="http://"
-                      addonAfter=".com"
-                      placeholder="请输入"
-                    />,
-                  )}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
-                <Form.Item label={fieldLabels.owner}>
-                  {getFieldDecorator('owner', {
-                    rules: [{ required: true, message: '请选择管理员' }],
-                  })(
-                    <Select placeholder="请选择管理员">
-                      <Option value="xiao">付晓晓</Option>
-                      <Option value="mao">周毛毛</Option>
-                    </Select>,
-                  )}
-                </Form.Item>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col lg={6} md={12} sm={24}>
-                <Form.Item label={fieldLabels.approver}>
-                  {getFieldDecorator('approver', {
-                    rules: [{ required: true, message: '请选择审批员' }],
-                  })(
-                    <Select placeholder="请选择审批员">
-                      <Option value="xiao">付晓晓</Option>
-                      <Option value="mao">周毛毛</Option>
-                    </Select>,
-                  )}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
-                <Form.Item label={fieldLabels.dateRange}>
-                  {getFieldDecorator('dateRange', {
-                    rules: [{ required: true, message: '请选择生效日期' }],
-                  })(
-                    <RangePicker
-                      placeholder={['开始日期', '结束日期']}
-                      style={{ width: '100%' }}
-                    />,
-                  )}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
-                <Form.Item label={fieldLabels.type}>
-                  {getFieldDecorator('type', {
-                    rules: [{ required: true, message: '请选择仓库类型' }],
-                  })(
-                    <Select placeholder="请选择仓库类型">
-                      <Option value="private">私密</Option>
-                      <Option value="public">公开</Option>
-                    </Select>,
-                  )}
-                </Form.Item>
-              </Col>
-            </Row>
-          </Form>
-        </Card>
-        <Card title="任务管理" className={styles.card} bordered={false}>
-          <Form layout="vertical" hideRequiredMark>
-            <Row gutter={16}>
-              <Col lg={6} md={12} sm={24}>
-                <Form.Item label={fieldLabels.name2}>
-                  {getFieldDecorator('name2', {
-                    rules: [{ required: true, message: '请输入' }],
-                  })(<Input placeholder="请输入" />)}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
-                <Form.Item label={fieldLabels.url2}>
-                  {getFieldDecorator('url2', {
-                    rules: [{ required: true, message: '请选择' }],
-                  })(<Input placeholder="请输入" />)}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
-                <Form.Item label={fieldLabels.owner2}>
-                  {getFieldDecorator('owner2', {
-                    rules: [{ required: true, message: '请选择管理员' }],
-                  })(
-                    <Select placeholder="请选择管理员">
-                      <Option value="xiao">付晓晓</Option>
-                      <Option value="mao">周毛毛</Option>
-                    </Select>,
-                  )}
-                </Form.Item>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col lg={6} md={12} sm={24}>
-                <Form.Item label={fieldLabels.approver2}>
-                  {getFieldDecorator('approver2', {
-                    rules: [{ required: true, message: '请选择审批员' }],
-                  })(
-                    <Select placeholder="请选择审批员">
-                      <Option value="xiao">付晓晓</Option>
-                      <Option value="mao">周毛毛</Option>
-                    </Select>,
-                  )}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
-                <Form.Item label={fieldLabels.dateRange2}>
-                  {getFieldDecorator('dateRange2', {
-                    rules: [{ required: true, message: '请输入' }],
-                  })(
-                    <TimePicker
-                      placeholder="提醒时间"
-                      style={{ width: '100%' }}
-                      getPopupContainer={trigger => {
-                        if (trigger && trigger.parentNode) {
-                          return trigger.parentNode as HTMLElement;
-                        }
-                        return trigger;
-                      }}
-                    />,
-                  )}
-                </Form.Item>
-              </Col>
-              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
-                <Form.Item label={fieldLabels.type2}>
-                  {getFieldDecorator('type2', {
-                    rules: [{ required: true, message: '请选择仓库类型' }],
-                  })(
-                    <Select placeholder="请选择仓库类型">
-                      <Option value="private">私密</Option>
-                      <Option value="public">公开</Option>
-                    </Select>,
-                  )}
-                </Form.Item>
-              </Col>
-            </Row>
-          </Form>
-        </Card>
-        <Card title="成员管理" bordered={false}>
-          {getFieldDecorator('members', {
-            initialValue: tableData,
-          })(<TableForm />)}
-        </Card>
+        <PageHeaderWrapper content="高级表单常见于一次性输入和提交大批量数据的场景。">
+          <Card title="仓库管理" className={styles.card} bordered={false}>
+            <Form layout="vertical" hideRequiredMark>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.name}>
+                    {getFieldDecorator('name', {
+                      rules: [{ required: true, message: '请输入仓库名称' }],
+                    })(<Input placeholder="请输入仓库名称" />)}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.url}>
+                    {getFieldDecorator('url', {
+                      rules: [{ required: true, message: '请选择' }],
+                    })(
+                      <Input
+                        style={{ width: '100%' }}
+                        addonBefore="http://"
+                        addonAfter=".com"
+                        placeholder="请输入"
+                      />,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.owner}>
+                    {getFieldDecorator('owner', {
+                      rules: [{ required: true, message: '请选择管理员' }],
+                    })(
+                      <Select placeholder="请选择管理员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.approver}>
+                    {getFieldDecorator('approver', {
+                      rules: [{ required: true, message: '请选择审批员' }],
+                    })(
+                      <Select placeholder="请选择审批员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.dateRange}>
+                    {getFieldDecorator('dateRange', {
+                      rules: [{ required: true, message: '请选择生效日期' }],
+                    })(
+                      <RangePicker
+                        placeholder={['开始日期', '结束日期']}
+                        style={{ width: '100%' }}
+                      />,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.type}>
+                    {getFieldDecorator('type', {
+                      rules: [{ required: true, message: '请选择仓库类型' }],
+                    })(
+                      <Select placeholder="请选择仓库类型">
+                        <Option value="private">私密</Option>
+                        <Option value="public">公开</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+            </Form>
+          </Card>
+          <Card title="任务管理" className={styles.card} bordered={false}>
+            <Form layout="vertical" hideRequiredMark>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.name2}>
+                    {getFieldDecorator('name2', {
+                      rules: [{ required: true, message: '请输入' }],
+                    })(<Input placeholder="请输入" />)}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.url2}>
+                    {getFieldDecorator('url2', {
+                      rules: [{ required: true, message: '请选择' }],
+                    })(<Input placeholder="请输入" />)}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.owner2}>
+                    {getFieldDecorator('owner2', {
+                      rules: [{ required: true, message: '请选择管理员' }],
+                    })(
+                      <Select placeholder="请选择管理员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.approver2}>
+                    {getFieldDecorator('approver2', {
+                      rules: [{ required: true, message: '请选择审批员' }],
+                    })(
+                      <Select placeholder="请选择审批员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.dateRange2}>
+                    {getFieldDecorator('dateRange2', {
+                      rules: [{ required: true, message: '请输入' }],
+                    })(
+                      <TimePicker
+                        placeholder="提醒时间"
+                        style={{ width: '100%' }}
+                        getPopupContainer={trigger => {
+                          if (trigger && trigger.parentNode) {
+                            return trigger.parentNode as HTMLElement;
+                          }
+                          return trigger;
+                        }}
+                      />,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.type2}>
+                    {getFieldDecorator('type2', {
+                      rules: [{ required: true, message: '请选择仓库类型' }],
+                    })(
+                      <Select placeholder="请选择仓库类型">
+                        <Option value="private">私密</Option>
+                        <Option value="public">公开</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+            </Form>
+          </Card>
+          <Card title="成员管理" bordered={false}>
+            {getFieldDecorator('members', {
+              initialValue: tableData,
+            })(<TableForm />)}
+          </Card>
+        </PageHeaderWrapper>
         <FooterToolbar style={{ width }}>
           {this.getErrorInfo()}
           <Button type="primary" onClick={this.validate} loading={submitting}>
diff --git a/FormAdvancedForm/src/locales/en-US.ts b/FormAdvancedForm/src/locales/en-US.ts
deleted file mode 100644
index 06f130b319a848ef019572468746972dbee9a7ac..0000000000000000000000000000000000000000
--- a/FormAdvancedForm/src/locales/en-US.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-export default {
-  'BLOCK_NAME.basic.title': 'Basic form',
-  'BLOCK_NAME.basic.description':
-    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
-
-  'BLOCK_NAME.email.required': 'Please enter your email!',
-  'BLOCK_NAME.email.wrong-format': 'The email address is in the wrong format!',
-  'BLOCK_NAME.userName.required': 'Please enter your userName!',
-  'BLOCK_NAME.password.required': 'Please enter your password!',
-  'BLOCK_NAME.password.twice': 'The passwords entered twice do not match!',
-  'BLOCK_NAME.strength.msg':
-    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
-  'BLOCK_NAME.strength.strong': 'Strength: strong',
-  'BLOCK_NAME.strength.medium': 'Strength: medium',
-  'BLOCK_NAME.strength.short': 'Strength: too short',
-  'BLOCK_NAME.confirm-password.required': 'Please confirm your password!',
-  'BLOCK_NAME.phone-number.required': 'Please enter your phone number!',
-  'BLOCK_NAME.phone-number.wrong-format': 'Malformed phone number!',
-  'BLOCK_NAME.verification-code.required': 'Please enter the verification code!',
-  'BLOCK_NAME.title.required': 'Please enter a title',
-  'BLOCK_NAME.date.required': 'Please select the start and end date',
-  'BLOCK_NAME.goal.required': 'Please enter a description of the goal',
-  'BLOCK_NAME.standard.required': 'Please enter a metric',
-
-  'BLOCK_NAME.form.get-captcha': 'Get Captcha',
-  'BLOCK_NAME.captcha.second': 'sec',
-  'BLOCK_NAME.form.optional': ' (optional) ',
-  'BLOCK_NAME.form.submit': 'Submit',
-  'BLOCK_NAME.form.save': 'Save',
-  'BLOCK_NAME.email.placeholder': 'Email',
-  'BLOCK_NAME.password.placeholder': 'Password',
-  'BLOCK_NAME.confirm-password.placeholder': 'Confirm password',
-  'BLOCK_NAME.phone-number.placeholder': 'Phone number',
-  'BLOCK_NAME.verification-code.placeholder': 'Verification code',
-  'BLOCK_NAME.title.label': 'Title',
-  'BLOCK_NAME.title.placeholder': 'Give the target a name',
-  'BLOCK_NAME.date.label': 'Start and end date',
-  'BLOCK_NAME.placeholder.start': 'Start date',
-  'BLOCK_NAME.placeholder.end': 'End date',
-  'BLOCK_NAME.goal.label': 'Goal description',
-  'BLOCK_NAME.goal.placeholder': 'Please enter your work goals',
-  'BLOCK_NAME.standard.label': 'Metrics',
-  'BLOCK_NAME.standard.placeholder': 'Please enter a metric',
-  'BLOCK_NAME.client.label': 'Client',
-  'BLOCK_NAME.label.tooltip': 'Target service object',
-  'BLOCK_NAME.client.placeholder':
-    'Please describe your customer service, internal customers directly @ Name / job number',
-  'BLOCK_NAME.invites.label': 'Inviting critics',
-  'BLOCK_NAME.invites.placeholder':
-    'Please direct @ Name / job number, you can invite up to 5 people',
-  'BLOCK_NAME.weight.label': 'Weight',
-  'BLOCK_NAME.weight.placeholder': 'Please enter weight',
-  'BLOCK_NAME.public.label': 'Target disclosure',
-  'BLOCK_NAME.label.help': 'Customers and invitees are shared by default',
-  'BLOCK_NAME.radio.public': 'Public',
-  'BLOCK_NAME.radio.partially-public': 'Partially public',
-  'BLOCK_NAME.radio.private': 'Private',
-  'BLOCK_NAME.publicUsers.placeholder': 'Open to',
-  'BLOCK_NAME.option.A': 'Colleague A',
-  'BLOCK_NAME.option.B': 'Colleague B',
-  'BLOCK_NAME.option.C': 'Colleague C',
-};
diff --git a/FormAdvancedForm/src/locales/pt-BR.ts b/FormAdvancedForm/src/locales/pt-BR.ts
deleted file mode 100644
index c88bccb366065a849c6ea0a30c57f64a4a19cf85..0000000000000000000000000000000000000000
--- a/FormAdvancedForm/src/locales/pt-BR.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export default {
-  'BLOCK_NAME.basic.title': 'Basic form',
-  'BLOCK_NAME.basic.description':
-    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
-
-  'BLOCK_NAME.email.required': 'Por favor insira seu email!',
-  'BLOCK_NAME.email.wrong-format': 'O email está errado!',
-  'BLOCK_NAME.userName.required': 'Por favor insira nome de usuário!',
-  'BLOCK_NAME.password.required': 'Por favor insira sua senha!',
-  'BLOCK_NAME.password.twice': 'As senhas não estão iguais!',
-  'BLOCK_NAME.strength.msg':
-    'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
-  'BLOCK_NAME.strength.strong': 'Força: forte',
-  'BLOCK_NAME.strength.medium': 'Força: média',
-  'BLOCK_NAME.strength.short': 'Força: curta',
-  'BLOCK_NAME.confirm-password.required': 'Por favor confirme sua senha!',
-  'BLOCK_NAME.phone-number.required': 'Por favor insira seu telefone!',
-  'BLOCK_NAME.phone-number.wrong-format': 'Formato de telefone errado!',
-  'BLOCK_NAME.verification-code.required': 'Por favor insira seu código de verificação!',
-
-  'BLOCK_NAME.form.get-captcha': 'Get Captcha',
-  'BLOCK_NAME.captcha.second': 'sec',
-  'BLOCK_NAME.email.placeholder': 'Email',
-  'BLOCK_NAME.password.placeholder': 'Senha',
-  'BLOCK_NAME.confirm-password.placeholder': 'Confirme a senha',
-  'BLOCK_NAME.phone-number.placeholder': 'Telefone',
-  'BLOCK_NAME.verification-code.placeholder': 'Código de verificação',
-  'BLOCK_NAME.form.optional': ' (optional) ',
-  'BLOCK_NAME.form.submit': 'Submit',
-  'BLOCK_NAME.form.save': 'Save',
-  'BLOCK_NAME.title.label': 'Title',
-  'BLOCK_NAME.title.placeholder': 'Give the target a name',
-  'BLOCK_NAME.date.label': 'Start and end date',
-  'BLOCK_NAME.placeholder.start': 'Start date',
-  'BLOCK_NAME.placeholder.end': 'End date',
-  'BLOCK_NAME.goal.label': 'Goal description',
-  'BLOCK_NAME.goal.placeholder': 'Please enter your work goals',
-  'BLOCK_NAME.standard.label': 'Metrics',
-  'BLOCK_NAME.standard.placeholder': 'Please enter a metric',
-  'BLOCK_NAME.client.label': 'Client',
-  'BLOCK_NAME.label.tooltip': 'Target service object',
-  'BLOCK_NAME.client.placeholder':
-    'Please describe your customer service, internal customers directly @ Name / job number',
-  'BLOCK_NAME.invites.label': 'Inviting critics',
-  'BLOCK_NAME.invites.placeholder':
-    'Please direct @ Name / job number, you can invite up to 5 people',
-  'BLOCK_NAME.weight.label': 'Weight',
-  'BLOCK_NAME.weight.placeholder': 'Please enter weight',
-  'BLOCK_NAME.public.label': 'Target disclosure',
-  'BLOCK_NAME.label.help': 'Customers and invitees are shared by default',
-  'BLOCK_NAME.radio.public': 'Public',
-  'BLOCK_NAME.radio.partially-public': 'Partially public',
-  'BLOCK_NAME.radio.private': 'Private',
-  'BLOCK_NAME.publicUsers.placeholder': 'Open to',
-  'BLOCK_NAME.option.A': 'Colleague A',
-  'BLOCK_NAME.option.B': 'Colleague B',
-  'BLOCK_NAME.option.C': 'Colleague C',
-};
diff --git a/FormAdvancedForm/src/locales/zh-CN.ts b/FormAdvancedForm/src/locales/zh-CN.ts
deleted file mode 100644
index d9a4b1deb9b5d6f5aa748d6a7aa85ee087cbd416..0000000000000000000000000000000000000000
--- a/FormAdvancedForm/src/locales/zh-CN.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export default {
-  'BLOCK_NAME.basic.title': '基础表单',
-  'BLOCK_NAME.basic.description':
-    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
-
-  'BLOCK_NAME.email.required': '请输入邮箱地址！',
-  'BLOCK_NAME.email.wrong-format': '邮箱地址格式错误！',
-  'BLOCK_NAME.userName.required': '请输入用户名!',
-  'BLOCK_NAME.password.required': '请输入密码！',
-  'BLOCK_NAME.password.twice': '两次输入的密码不匹配!',
-  'BLOCK_NAME.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
-  'BLOCK_NAME.strength.strong': '强度：强',
-  'BLOCK_NAME.strength.medium': '强度：中',
-  'BLOCK_NAME.strength.short': '强度：太短',
-  'BLOCK_NAME.confirm-password.required': '请确认密码！',
-  'BLOCK_NAME.phone-number.required': '请输入手机号！',
-  'BLOCK_NAME.phone-number.wrong-format': '手机号格式错误！',
-  'BLOCK_NAME.verification-code.required': '请输入验证码！',
-  'BLOCK_NAME.title.required': '请输入标题',
-  'BLOCK_NAME.date.required': '请选择起止日期',
-  'BLOCK_NAME.goal.required': '请输入目标描述',
-  'BLOCK_NAME.standard.required': '请输入衡量标准',
-
-  'BLOCK_NAME.form.get-captcha': '获取验证码',
-  'BLOCK_NAME.captcha.second': '秒',
-  'BLOCK_NAME.form.optional': '（选填）',
-  'BLOCK_NAME.form.submit': '提交',
-  'BLOCK_NAME.form.save': '保存',
-  'BLOCK_NAME.email.placeholder': '邮箱',
-  'BLOCK_NAME.password.placeholder': '至少6位密码，区分大小写',
-  'BLOCK_NAME.confirm-password.placeholder': '确认密码',
-  'BLOCK_NAME.phone-number.placeholder': '手机号',
-  'BLOCK_NAME.verification-code.placeholder': '验证码',
-  'BLOCK_NAME.title.label': '标题',
-  'BLOCK_NAME.title.placeholder': '给目标起个名字',
-  'BLOCK_NAME.date.label': '起止日期',
-  'BLOCK_NAME.placeholder.start': '开始日期',
-  'BLOCK_NAME.placeholder.end': '结束日期',
-  'BLOCK_NAME.goal.label': '目标描述',
-  'BLOCK_NAME.goal.placeholder': '请输入你的阶段性工作目标',
-  'BLOCK_NAME.standard.label': '衡量标准',
-  'BLOCK_NAME.standard.placeholder': '请输入衡量标准',
-  'BLOCK_NAME.client.label': '客户',
-  'BLOCK_NAME.label.tooltip': '目标的服务对象',
-  'BLOCK_NAME.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
-  'BLOCK_NAME.invites.label': '邀评人',
-  'BLOCK_NAME.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
-  'BLOCK_NAME.weight.label': '权重',
-  'BLOCK_NAME.weight.placeholder': '请输入',
-  'BLOCK_NAME.public.label': '目标公开',
-  'BLOCK_NAME.label.help': '客户、邀评人默认被分享',
-  'BLOCK_NAME.radio.public': '公开',
-  'BLOCK_NAME.radio.partially-public': '部分公开',
-  'BLOCK_NAME.radio.private': '不公开',
-  'BLOCK_NAME.publicUsers.placeholder': '公开给',
-  'BLOCK_NAME.option.A': '同事甲',
-  'BLOCK_NAME.option.B': '同事乙',
-  'BLOCK_NAME.option.C': '同事丙',
-};
diff --git a/FormAdvancedForm/src/locales/zh-TW.ts b/FormAdvancedForm/src/locales/zh-TW.ts
deleted file mode 100644
index d42f8520ecb62730bdca8f6aa83ec32982c05932..0000000000000000000000000000000000000000
--- a/FormAdvancedForm/src/locales/zh-TW.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export default {
-  'BLOCK_NAME.basic.title': '基礎表單',
-  'BLOCK_NAME.basic.description':
-    '表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。',
-
-  'BLOCK_NAME.email.required': '請輸入郵箱地址！',
-  'BLOCK_NAME.email.wrong-format': '郵箱地址格式錯誤！',
-  'BLOCK_NAME.userName.required': '請輸入賬戶!',
-  'BLOCK_NAME.password.required': '請輸入密碼！',
-  'BLOCK_NAME.password.twice': '兩次輸入的密碼不匹配!',
-  'BLOCK_NAME.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
-  'BLOCK_NAME.strength.strong': '強度：強',
-  'BLOCK_NAME.strength.medium': '強度：中',
-  'BLOCK_NAME.strength.short': '強度：太短',
-  'BLOCK_NAME.confirm-password.required': '請確認密碼！',
-  'BLOCK_NAME.phone-number.required': '請輸入手機號！',
-  'BLOCK_NAME.phone-number.wrong-format': '手機號格式錯誤！',
-  'BLOCK_NAME.verification-code.required': '請輸入驗證碼！',
-  'BLOCK_NAME.title.required': '請輸入標題',
-  'BLOCK_NAME.date.required': '請選擇起止日期',
-  'BLOCK_NAME.goal.required': '請輸入目標描述',
-  'BLOCK_NAME.standard.required': '請輸入衡量標淮',
-
-  'BLOCK_NAME.form.get-captcha': '獲取驗證碼',
-  'BLOCK_NAME.captcha.second': '秒',
-  'BLOCK_NAME.form.optional': '（選填）',
-  'BLOCK_NAME.form.submit': '提交',
-  'BLOCK_NAME.form.save': '保存',
-  'BLOCK_NAME.email.placeholder': '郵箱',
-  'BLOCK_NAME.password.placeholder': '至少6位密碼，區分大小寫',
-  'BLOCK_NAME.confirm-password.placeholder': '確認密碼',
-  'BLOCK_NAME.phone-number.placeholder': '手機號',
-  'BLOCK_NAME.verification-code.placeholder': '驗證碼',
-  'BLOCK_NAME.title.label': '標題',
-  'BLOCK_NAME.title.placeholder': '給目標起個名字',
-  'BLOCK_NAME.date.label': '起止日期',
-  'BLOCK_NAME.placeholder.start': '開始日期',
-  'BLOCK_NAME.placeholder.end': '結束日期',
-  'BLOCK_NAME.goal.label': '目標描述',
-  'BLOCK_NAME.goal.placeholder': '請輸入妳的階段性工作目標',
-  'BLOCK_NAME.standard.label': '衡量標淮',
-  'BLOCK_NAME.standard.placeholder': '請輸入衡量標淮',
-  'BLOCK_NAME.client.label': '客戶',
-  'BLOCK_NAME.label.tooltip': '目標的服務對象',
-  'BLOCK_NAME.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
-  'BLOCK_NAME.invites.label': '邀評人',
-  'BLOCK_NAME.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
-  'BLOCK_NAME.weight.label': '權重',
-  'BLOCK_NAME.weight.placeholder': '請輸入',
-  'BLOCK_NAME.public.label': '目標公開',
-  'BLOCK_NAME.label.help': '客戶、邀評人默認被分享',
-  'BLOCK_NAME.radio.public': '公開',
-  'BLOCK_NAME.radio.partially-public': '部分公開',
-  'BLOCK_NAME.radio.private': '不公開',
-  'BLOCK_NAME.publicUsers.placeholder': '公開給',
-  'BLOCK_NAME.option.A': '同事甲',
-  'BLOCK_NAME.option.B': '同事乙',
-  'BLOCK_NAME.option.C': '同事丙',
-};
diff --git a/FormBasicForm/src/index.tsx b/FormBasicForm/src/index.tsx
index 50125d1bc6855e1b642e6ecf0ff7557631cdc44e..d7ef1eb9c4d9fc477aa045e8cd65213eb72a9b67 100644
--- a/FormBasicForm/src/index.tsx
+++ b/FormBasicForm/src/index.tsx
@@ -13,7 +13,7 @@ import {
   Icon,
   Tooltip,
 } from 'antd';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import styles from './style.less';
 import { FormComponentProps } from 'antd/lib/form';
 import { Dispatch } from 'redux';
diff --git a/FormStepForm/src/index.tsx b/FormStepForm/src/index.tsx
index f14f8f3cbc1fd03394919c021f6bd723b1fb0def..62ebc682eab2de3b7d86a35de5e77f7959213db7 100644
--- a/FormStepForm/src/index.tsx
+++ b/FormStepForm/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { Card, Steps } from 'antd';
 import { connect } from 'dva';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import Step1 from './components/Step1';
 import Step2 from './components/Step2';
 import Step3 from './components/Step3';
diff --git a/ListBasicList/src/data.d.ts b/ListBasicList/src/data.d.ts
index b28aefacf0623b950b0b63fcfa1267c008cd76fe..9796369f880bbd79449c0f6b89c5f0d5b2388c3b 100644
--- a/ListBasicList/src/data.d.ts
+++ b/ListBasicList/src/data.d.ts
@@ -1,10 +1,10 @@
-export interface member {
+export interface Member {
   avatar: string;
   name: string;
   id: string;
 }
 
-export interface basiclistitemdatatype {
+export interface BasicListItemDataType {
   id: string;
   owner: string;
   title: string;
diff --git a/ListBasicList/src/index.tsx b/ListBasicList/src/index.tsx
index dcffabb0937101c0af149e8439a8c72622bdc02d..4ac748824fc073dd8bb434cf144cf978a25afa54 100644
--- a/ListBasicList/src/index.tsx
+++ b/ListBasicList/src/index.tsx
@@ -25,7 +25,7 @@ import { IStateType } from './model';
 import { Dispatch } from 'redux';
 import { BasicListItemDataType } from './data';
 import Result from './Result';
-import { GridContent } from '@ant-design/pro-layout';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 import styles from './style.less';
 
@@ -290,8 +290,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
       );
     };
     return (
-      <React.Fragment>
-        <GridContent>
+      <>
+        <PageHeaderWrapper>
           <div className={styles.standardList}>
             <Card bordered={false}>
               <Row>
@@ -321,9 +321,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                 icon="plus"
                 onClick={this.showModal}
                 ref={component => {
-                  /* eslint-disable */
                   this.addBtn = findDOMNode(component) as HTMLButtonElement;
-                  /* eslint-enable */
                 }}
               >
                 添加
@@ -360,7 +358,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
               />
             </Card>
           </div>
-        </GridContent>
+        </PageHeaderWrapper>
 
         <Modal
           title={done ? null : `任务${current ? '编辑' : '添加'}`}
@@ -373,7 +371,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
         >
           {getModalContent()}
         </Modal>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/ListCardList/src/index.tsx b/ListCardList/src/index.tsx
index 3a4b89e71944848393bbe59e3172c392e281786d..27beda26b2420eef18c5c18adf74800f52c0fc92 100644
--- a/ListCardList/src/index.tsx
+++ b/ListCardList/src/index.tsx
@@ -4,7 +4,7 @@ import { Dispatch } from 'redux';
 import { IStateType } from './model';
 import { CardListItemDataType } from './data';
 import { Card, Button, Typography, Icon, List } from 'antd';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 const { Paragraph } = Typography;
 
diff --git a/ListSearch/src/index.tsx b/ListSearch/src/index.tsx
index 7e7c66003a3884def2af39b61a5189e5171148d5..418a8244ddd7b8922b92cac571f8f1047e14d852 100644
--- a/ListSearch/src/index.tsx
+++ b/ListSearch/src/index.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import router from 'umi/router';
 import { connect } from 'dva';
 import { Input } from 'antd';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   match: {
diff --git a/ListTableList/src/index.tsx b/ListTableList/src/index.tsx
index ca7f8f9b6287eb43148c17ff07be83962d47f8d9..0bc8d6ceb8bdf11fd8e680072480d9c5e9f302df 100644
--- a/ListTableList/src/index.tsx
+++ b/ListTableList/src/index.tsx
@@ -27,6 +27,7 @@ import { IStateType } from './model';
 import styles from './style.less';
 import UpdateForm, { IFormValsType } from './components/UpdateForm';
 import CreateForm from './components/CreateForm';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -435,7 +436,7 @@ class TableList extends Component<TableListProps, TableListState> {
       handleUpdate: this.handleUpdate,
     };
     return (
-      <Fragment>
+      <PageHeaderWrapper>
         <Card bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListForm}>{this.renderForm()}</div>
@@ -473,7 +474,7 @@ class TableList extends Component<TableListProps, TableListState> {
             form={form}
           />
         ) : null}
-      </Fragment>
+      </PageHeaderWrapper>
     );
   }
 }
diff --git a/ProfileBasic/src/index.tsx b/ProfileBasic/src/index.tsx
index 07db1bd16279a2e8ccc5848762de8f9d05d83fd8..0bca5f69ed61809e7a082e9e3e109cd6bc08c8b4 100644
--- a/ProfileBasic/src/index.tsx
+++ b/ProfileBasic/src/index.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Card, Badge, Table, Divider } from 'antd';
 import DescriptionList from './components/DescriptionList';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import styles from './style.less';
 import { BasicProfileDataType, BasicGood } from './data';
 import { Dispatch } from 'redux';
diff --git a/package.json b/package.json
index 52c8bfbff25013a56d0ccf3ab4c9bc3a33013f02..5fc4ae56e5fcbeb68889100d48655fc2744711c6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='EditorFlow/src' umi dev",
+    "dev": "cross-env PAGES_PATH='ListBasicList/src' umi dev",
     "lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
     "lint-staged": "lint-staged",
     "lint-staged:ts": "tslint",
@@ -26,7 +26,9 @@
     "**/*.{ts,tsx}": "npm run lint-staged:ts"
   },
   "dependencies": {
-    "cross-env": "^5.2.0"
+    "@types/react-dom": "^16.8.4",
+    "cross-env": "^5.2.0",
+    "react-dom": "^16.8.6"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.7",