diff --git a/AdvancedForm/src/index.tsx b/AdvancedForm/src/index.tsx
index ba8b99eefbde794063ccbaa9ff485ef518db6363..5af6945009cdff006ab0d547f9fc33af4dfc68ca 100644
--- a/AdvancedForm/src/index.tsx
+++ b/AdvancedForm/src/index.tsx
@@ -99,7 +99,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
           content={errorList}
           overlayClassName={styles.errorPopover}
           trigger="click"
-          getPopupContainer={trigger => trigger.parentNode}
+          getPopupContainer={trigger => trigger && trigger.parentNode}
         >
           <Icon type="exclamation-circle" />
         </Popover>
@@ -269,7 +269,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <TimePicker
                       placeholder="提醒时间"
                       style={{ width: '100%' }}
-                      getPopupContainer={trigger => trigger.parentNode}
+                      getPopupContainer={trigger => trigger.ParentNode}
                     />
                   )}
                 </Form.Item>
diff --git a/AdvancedProfile/.umirc.js b/AdvancedProfile/.umirc.js
deleted file mode 100644
index 545b4c7a99507a4973cd944fc2eafbd612ead8ef..0000000000000000000000000000000000000000
--- a/AdvancedProfile/.umirc.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  plugins: [
-    ['umi-plugin-block-dev', {
-      layout: 'ant-design-pro',
-    }],
-    ['umi-plugin-react', {
-      dva: true,
-      locale: true,
-      antd: true,
-    }]
-  ],
-}
diff --git a/AdvancedProfile/package.json b/AdvancedProfile/package.json
index 9aeeaea2596c7e71fff128e477615b03f1a8956c..e97a6a98b5503e175b620a9c031bd065e5a879d0 100644
--- a/AdvancedProfile/package.json
+++ b/AdvancedProfile/package.json
@@ -11,7 +11,6 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/advancedprofile"
   },
   "dependencies": {
-    "ant-design-pro": "^2.1.1",
     "antd": "^3.10.9",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
diff --git a/AdvancedProfile/src/DescriptionList/Description.tsx b/AdvancedProfile/src/DescriptionList/Description.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d09ea52a040e201a6cfef808a2a5c79fc5d02eca
--- /dev/null
+++ b/AdvancedProfile/src/DescriptionList/Description.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Col } from 'antd';
+import styles from './index.less';
+import responsive from './responsive';
+import { ColProps } from 'antd/es/col';
+
+export interface DescriptionProps extends ColProps {
+  column?: number;
+  key?: string | number;
+  style?: React.CSSProperties;
+  term?: React.ReactNode;
+}
+
+const Description: React.SFC<DescriptionProps> = props => {
+  const { term, column = 3, children, ...restProps } = props;
+  return (
+    <Col {...responsive[column]} {...restProps}>
+      {term && <div className={styles.term}>{term}</div>}
+      {children !== null && children !== undefined && (
+        <div className={styles.detail}>{children}</div>
+      )}
+    </Col>
+  );
+};
+
+export default Description;
diff --git a/AdvancedProfile/src/DescriptionList/DescriptionList.tsx b/AdvancedProfile/src/DescriptionList/DescriptionList.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6806a733c39e3cb32c5f3b1c282b8dc520b5e16
--- /dev/null
+++ b/AdvancedProfile/src/DescriptionList/DescriptionList.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Row } from 'antd';
+import styles from './index.less';
+import Description, { DescriptionProps } from './Description';
+
+export interface DescriptionListProps {
+  className?: string;
+  col?: number;
+  description?: DescriptionProps[];
+  gutter?: number;
+  layout?: 'horizontal' | 'vertical';
+  size?: 'large' | 'small';
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+}
+
+const DescriptionList: React.SFC<DescriptionListProps> & {
+  Description: typeof Description;
+} = ({
+  className,
+  title,
+  col = 3,
+  layout = 'horizontal',
+  gutter = 32,
+  children,
+  size,
+  ...restProps
+}) => {
+  const clsString = classNames(styles.descriptionList, styles[layout], className, {
+    [styles.small]: size === 'small',
+    [styles.large]: size === 'large',
+  });
+  const column = col > 4 ? 4 : col;
+  return (
+    <div className={clsString} {...restProps}>
+      {title ? <div className={styles.title}>{title}</div> : null}
+      <Row gutter={gutter}>
+        {React.Children.map(children, (child: any) =>
+          child ? React.cloneElement(child, { column }) : child
+        )}
+      </Row>
+    </div>
+  );
+};
+
+DescriptionList.Description = Description;
+
+export default DescriptionList;
diff --git a/AdvancedProfile/src/DescriptionList/index.less b/AdvancedProfile/src/DescriptionList/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..c3cf8e69e7cd0269f359b20fa73e868a7e87182b
--- /dev/null
+++ b/AdvancedProfile/src/DescriptionList/index.less
@@ -0,0 +1,92 @@
+@import '~antd/lib/style/themes/default.less';
+
+.descriptionList {
+  // offset the padding-bottom of last row
+  :global {
+    .ant-row {
+      margin-bottom: -16px;
+      overflow: hidden;
+    }
+  }
+  // fix margin top error of following descriptionList
+  & + & {
+    :global {
+      .ant-row {
+        margin-top: 16px;
+      }
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .term {
+    display: table-cell;
+    padding-bottom: 16px;
+    color: @heading-color;
+    // Line-height is 22px IE dom height will calculate error
+    line-height: 20px;
+    white-space: nowrap;
+
+    &::after {
+      position: relative;
+      top: -0.5px;
+      margin: 0 8px 0 2px;
+      content: ':';
+    }
+  }
+
+  .detail {
+    display: table-cell;
+    width: 100%;
+    padding-bottom: 16px;
+    color: @text-color;
+    line-height: 20px;
+  }
+
+  &.small {
+    // offset the padding-bottom of last row
+    :global {
+      .ant-row {
+        margin-bottom: -8px;
+      }
+    }
+    // fix margin top error of following descriptionList
+    & + .descriptionList {
+      :global {
+        .ant-row {
+          margin-top: 8px;
+        }
+      }
+    }
+    .title {
+      margin-bottom: 12px;
+      color: @text-color;
+    }
+    .term,
+    .detail {
+      padding-bottom: 8px;
+    }
+  }
+
+  &.large {
+    .title {
+      font-size: 16px;
+    }
+  }
+
+  &.vertical {
+    .term {
+      display: block;
+      padding-bottom: 8px;
+    }
+
+    .detail {
+      display: block;
+    }
+  }
+}
diff --git a/AdvancedProfile/src/DescriptionList/index.tsx b/AdvancedProfile/src/DescriptionList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..24ce8f7a0e0951ebdd1fd1afe78908f68be40fef
--- /dev/null
+++ b/AdvancedProfile/src/DescriptionList/index.tsx
@@ -0,0 +1,3 @@
+import DescriptionList from './DescriptionList';
+
+export default DescriptionList;
diff --git a/AdvancedProfile/src/DescriptionList/responsive.tsx b/AdvancedProfile/src/DescriptionList/responsive.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a5aa73f781e3eccdbae4dffd656e201589575554
--- /dev/null
+++ b/AdvancedProfile/src/DescriptionList/responsive.tsx
@@ -0,0 +1,6 @@
+export default {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 },
+};
diff --git a/AdvancedProfile/src/_mock.js b/AdvancedProfile/src/_mock.ts
similarity index 100%
rename from AdvancedProfile/src/_mock.js
rename to AdvancedProfile/src/_mock.ts
diff --git a/AdvancedProfile/src/components/PageHeaderWrapper/index.js b/AdvancedProfile/src/components/PageHeaderWrapper/index.js
deleted file mode 100644
index 9e839c45ffc1a3f170a4034441324e69d7cf717b..0000000000000000000000000000000000000000
--- a/AdvancedProfile/src/components/PageHeaderWrapper/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
-import { PageHeader } from 'ant-design-pro';
-import styles from './index.less';
-
-const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
-  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
-    <PageHeader
-      wide={contentWidth === 'Fixed'}
-      home={<FormattedMessage id="BLOCK_NAME.menu.home" defaultMessage="Home" />}
-      key="pageheader"
-      {...restProps}
-      linkElement={Link}
-      itemRender={item => {
-        if (item.locale) {
-          return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
-        }
-        return item.title;
-      }}
-    />
-    {children ? <div className={styles.content}>{children}</div> : null}
-  </div>
-);
-
-export default PageHeaderWrapper;
diff --git a/AdvancedProfile/src/components/PageHeaderWrapper/index.less b/AdvancedProfile/src/components/PageHeaderWrapper/index.less
deleted file mode 100644
index 39a449657a98b039c29e6654fd117267cbb5283a..0000000000000000000000000000000000000000
--- a/AdvancedProfile/src/components/PageHeaderWrapper/index.less
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.content {
-  margin: 24px 24px 0;
-}
-
-@media screen and (max-width: @screen-sm) {
-  .content {
-    margin: 24px 0 0;
-  }
-}
diff --git a/AdvancedProfile/src/index.js b/AdvancedProfile/src/index.js
deleted file mode 100644
index 341c0aa39b74b5b99e6b52a64cfd74749cb6d961..0000000000000000000000000000000000000000
--- a/AdvancedProfile/src/index.js
+++ /dev/null
@@ -1,353 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import { connect } from 'dva';
-import {
-  Button,
-  Menu,
-  Dropdown,
-  Icon,
-  Row,
-  Col,
-  Steps,
-  Card,
-  Popover,
-  Badge,
-  Table,
-  Tooltip,
-  Divider,
-} from 'antd';
-import classNames from 'classnames';
-import { DescriptionList } from 'ant-design-pro';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
-import styles from './style.less';
-
-const { Step } = Steps;
-const { Description } = DescriptionList;
-const ButtonGroup = Button.Group;
-
-const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
-
-const menu = (
-  <Menu>
-    <Menu.Item key="1">选项一</Menu.Item>
-    <Menu.Item key="2">选项二</Menu.Item>
-    <Menu.Item key="3">选项三</Menu.Item>
-  </Menu>
-);
-
-const action = (
-  <Fragment>
-    <ButtonGroup>
-      <Button>操作</Button>
-      <Button>操作</Button>
-      <Dropdown overlay={menu} placement="bottomRight">
-        <Button>
-          <Icon type="ellipsis" />
-        </Button>
-      </Dropdown>
-    </ButtonGroup>
-    <Button type="primary">主操作</Button>
-  </Fragment>
-);
-
-const extra = (
-  <Row>
-    <Col xs={24} sm={12}>
-      <div className={styles.textSecondary}>状态</div>
-      <div className={styles.heading}>待审批</div>
-    </Col>
-    <Col xs={24} sm={12}>
-      <div className={styles.textSecondary}>订单金额</div>
-      <div className={styles.heading}>¥ 568.08</div>
-    </Col>
-  </Row>
-);
-
-const description = (
-  <DescriptionList className={styles.headerList} size="small" col="2">
-    <Description term="创建人">曲丽丽</Description>
-    <Description term="订购产品">XX 服务</Description>
-    <Description term="创建时间">2017-07-07</Description>
-    <Description term="关联单据">
-      <a href="">12421</a>
-    </Description>
-    <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
-    <Description term="备注">请于两个工作日内确认</Description>
-  </DescriptionList>
-);
-
-const tabList = [
-  {
-    key: 'detail',
-    tab: '详情',
-  },
-  {
-    key: 'rule',
-    tab: '规则',
-  },
-];
-
-const desc1 = (
-  <div className={classNames(styles.textSecondary, styles.stepDescription)}>
-    <Fragment>
-      曲丽丽
-      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
-    </Fragment>
-    <div>2016-12-12 12:32</div>
-  </div>
-);
-
-const desc2 = (
-  <div className={styles.stepDescription}>
-    <Fragment>
-      周毛毛
-      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
-    </Fragment>
-    <div>
-      <a href="">催一下</a>
-    </div>
-  </div>
-);
-
-const popoverContent = (
-  <div style={{ width: 160 }}>
-    吴加号
-    <span className={styles.textSecondary} style={{ float: 'right' }}>
-      <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
-    </span>
-    <div className={styles.textSecondary} style={{ marginTop: 4 }}>
-      耗时：2小时25分钟
-    </div>
-  </div>
-);
-
-const customDot = (dot, { status }) =>
-  status === 'process' ? (
-    <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
-      {dot}
-    </Popover>
-  ) : (
-    dot
-  );
-
-const operationTabList = [
-  {
-    key: 'tab1',
-    tab: '操作日志一',
-  },
-  {
-    key: 'tab2',
-    tab: '操作日志二',
-  },
-  {
-    key: 'tab3',
-    tab: '操作日志三',
-  },
-];
-
-const columns = [
-  {
-    title: '操作类型',
-    dataIndex: 'type',
-    key: 'type',
-  },
-  {
-    title: '操作人',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: '执行结果',
-    dataIndex: 'status',
-    key: 'status',
-    render: text =>
-      text === 'agree' ? (
-        <Badge status="success" text="成功" />
-      ) : (
-        <Badge status="error" text="驳回" />
-      ),
-  },
-  {
-    title: '操作时间',
-    dataIndex: 'updatedAt',
-    key: 'updatedAt',
-  },
-  {
-    title: '备注',
-    dataIndex: 'memo',
-    key: 'memo',
-  },
-];
-
-@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
-  BLOCK_NAME_CAMEL_CASE,
-  loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchAdvanced'],
-}))
-class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
-  state = {
-    operationkey: 'tab1',
-    stepDirection: 'horizontal',
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'BLOCK_NAME_CAMEL_CASE/fetchAdvanced',
-    });
-
-    this.setStepDirection();
-    window.addEventListener('resize', this.setStepDirection, { passive: true });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.setStepDirection);
-    this.setStepDirection.cancel();
-  }
-
-  onOperationTabChange = key => {
-    this.setState({ operationkey: key });
-  };
-
-  @Bind()
-  @Debounce(200)
-  setStepDirection() {
-    const { stepDirection } = this.state;
-    const w = getWindowWidth();
-    if (stepDirection !== 'vertical' && w <= 576) {
-      this.setState({
-        stepDirection: 'vertical',
-      });
-    } else if (stepDirection !== 'horizontal' && w > 576) {
-      this.setState({
-        stepDirection: 'horizontal',
-      });
-    }
-  }
-
-  render() {
-    const { stepDirection, operationkey } = this.state;
-    const { BLOCK_NAME_CAMEL_CASE, loading } = this.props;
-    const { advancedOperation1, advancedOperation2, advancedOperation3 } = BLOCK_NAME_CAMEL_CASE;
-    const contentList = {
-      tab1: (
-        <Table
-          pagination={false}
-          loading={loading}
-          dataSource={advancedOperation1}
-          columns={columns}
-        />
-      ),
-      tab2: (
-        <Table
-          pagination={false}
-          loading={loading}
-          dataSource={advancedOperation2}
-          columns={columns}
-        />
-      ),
-      tab3: (
-        <Table
-          pagination={false}
-          loading={loading}
-          dataSource={advancedOperation3}
-          columns={columns}
-        />
-      ),
-    };
-
-    return (
-      <PageHeaderWrapper
-        title="单号：234231029431"
-        logo={
-          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
-        }
-        action={action}
-        content={description}
-        extraContent={extra}
-        tabList={tabList}
-      >
-        <Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}>
-          <Steps direction={stepDirection} progressDot={customDot} current={1}>
-            <Step title="创建项目" description={desc1} />
-            <Step title="部门初审" description={desc2} />
-            <Step title="财务复核" />
-            <Step title="完成" />
-          </Steps>
-        </Card>
-        <Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
-          <DescriptionList style={{ marginBottom: 24 }}>
-            <Description term="用户姓名">付小小</Description>
-            <Description term="会员卡号">32943898021309809423</Description>
-            <Description term="身份证">3321944288191034921</Description>
-            <Description term="联系方式">18112345678</Description>
-            <Description term="联系地址">
-              曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
-            </Description>
-          </DescriptionList>
-          <DescriptionList style={{ marginBottom: 24 }} title="信息组">
-            <Description term="某某数据">725</Description>
-            <Description term="该数据更新时间">2017-08-08</Description>
-            <Description>&nbsp;</Description>
-            <Description
-              term={
-                <span>
-                  某某数据
-                  <Tooltip title="数据说明">
-                    <Icon
-                      style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
-                      type="info-circle-o"
-                    />
-                  </Tooltip>
-                </span>
-              }
-            >
-              725
-            </Description>
-            <Description term="该数据更新时间">2017-08-08</Description>
-          </DescriptionList>
-          <h4 style={{ marginBottom: 16 }}>信息组</h4>
-          <Card type="inner" title="多层级信息组">
-            <DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称">
-              <Description term="负责人">林东东</Description>
-              <Description term="角色码">1234567</Description>
-              <Description term="所属部门">XX公司 - YY部</Description>
-              <Description term="过期时间">2017-08-08</Description>
-              <Description term="描述">
-                这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
-              </Description>
-            </DescriptionList>
-            <Divider style={{ margin: '16px 0' }} />
-            <DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称" col="1">
-              <Description term="学名">
-                Citrullus lanatus (Thunb.) Matsum. et
-                Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
-              </Description>
-            </DescriptionList>
-            <Divider style={{ margin: '16px 0' }} />
-            <DescriptionList size="small" title="组名称">
-              <Description term="负责人">付小小</Description>
-              <Description term="角色码">1234568</Description>
-            </DescriptionList>
-          </Card>
-        </Card>
-        <Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
-          <div className={styles.noData}>
-            <Icon type="frown-o" />
-            暂无数据
-          </div>
-        </Card>
-        <Card
-          className={styles.tabsCard}
-          bordered={false}
-          tabList={operationTabList}
-          onTabChange={this.onOperationTabChange}
-        >
-          {contentList[operationkey]}
-        </Card>
-      </PageHeaderWrapper>
-    );
-  }
-}
-
-export default PAGE_NAME_UPPER_CAMEL_CASE;
diff --git a/AdvancedProfile/src/index.tsx b/AdvancedProfile/src/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..34ef725202dbd3d1e8b8eb4de355df54d8b3fce1
--- /dev/null
+++ b/AdvancedProfile/src/index.tsx
@@ -0,0 +1,489 @@
+import React, { Component, Fragment } from 'react';
+import { Dispatch } from 'redux';
+import { RouteContext, GridContent } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import {
+  Button,
+  Menu,
+  Dropdown,
+  Icon,
+  Row,
+  Col,
+  Steps,
+  Card,
+  Popover,
+  PageHeader,
+  Badge,
+  Table,
+  Tooltip,
+  Divider,
+  Typography,
+  Tabs,
+} from 'antd';
+import { TabsProps } from 'antd/lib/tabs';
+import classNames from 'classnames';
+import DescriptionList from './DescriptionList';
+import styles from './style.less';
+
+const { Step } = Steps;
+const { Description } = DescriptionList;
+const ButtonGroup = Button.Group;
+
+const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
+
+const menu = (
+  <Menu>
+    <Menu.Item key="1">选项一</Menu.Item>
+    <Menu.Item key="2">选项二</Menu.Item>
+    <Menu.Item key="3">选项三</Menu.Item>
+  </Menu>
+);
+
+const action = (
+  <Fragment>
+    <ButtonGroup>
+      <Button>操作</Button>
+      <Button>操作</Button>
+      <Dropdown overlay={menu} placement="bottomRight">
+        <Button>
+          <Icon type="ellipsis" />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>
+    <Button type="primary">主操作</Button>
+  </Fragment>
+);
+
+const extra = (
+  <Row
+    style={{
+      minWidth: 400,
+    }}
+  >
+    <Col xs={24} sm={12}>
+      <div className={styles.textSecondary}>状态</div>
+      <div className={styles.heading}>待审批</div>
+    </Col>
+    <Col xs={24} sm={12}>
+      <div className={styles.textSecondary}>订单金额</div>
+      <div className={styles.heading}>¥ 568.08</div>
+    </Col>
+  </Row>
+);
+
+const description = (
+  <DescriptionList className={styles.headerList} size="small" col={2}>
+    <Description term="创建人">曲丽丽</Description>
+    <Description term="订购产品">XX 服务</Description>
+    <Description term="创建时间">2017-07-07</Description>
+    <Description term="关联单据">
+      <a href="">12421</a>
+    </Description>
+    <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
+    <Description term="备注">请于两个工作日内确认</Description>
+  </DescriptionList>
+);
+
+const tabList = [
+  {
+    key: 'detail',
+    tab: '详情',
+  },
+  {
+    key: 'rule',
+    tab: '规则',
+  },
+];
+
+/**
+ * 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,
+}: {
+  tabList: Array<{
+    tab: string;
+    key: string;
+  }>;
+  tabActiveKey?: string;
+  onTabChange?: (key: string) => void;
+  tabBarExtraContent?: TabsProps['tabBarExtraContent'];
+}) => {
+  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 desc1 = (
+  <div className={classNames(styles.textSecondary, styles.stepDescription)}>
+    <Fragment>
+      曲丽丽
+      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
+    </Fragment>
+    <div>2016-12-12 12:32</div>
+  </div>
+);
+
+const desc2 = (
+  <div className={styles.stepDescription}>
+    <Fragment>
+      周毛毛
+      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
+    </Fragment>
+    <div>
+      <a href="">催一下</a>
+    </div>
+  </div>
+);
+
+const popoverContent = (
+  <div style={{ width: 160 }}>
+    吴加号
+    <span className={styles.textSecondary} style={{ float: 'right' }}>
+      <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
+    </span>
+    <div className={styles.textSecondary} style={{ marginTop: 4 }}>
+      耗时：2小时25分钟
+    </div>
+  </div>
+);
+
+const customDot = (
+  dot: React.ReactNode,
+  {
+    status,
+  }: {
+    status: string;
+  }
+) =>
+  status === 'process' ? (
+    <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
+      {dot}
+    </Popover>
+  ) : (
+    dot
+  );
+
+const operationTabList = [
+  {
+    key: 'tab1',
+    tab: '操作日志一',
+  },
+  {
+    key: 'tab2',
+    tab: '操作日志二',
+  },
+  {
+    key: 'tab3',
+    tab: '操作日志三',
+  },
+];
+
+const columns = [
+  {
+    title: '操作类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '操作人',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '执行结果',
+    dataIndex: 'status',
+    key: 'status',
+    render: (text: string) =>
+      text === 'agree' ? (
+        <Badge status="success" text="成功" />
+      ) : (
+        <Badge status="error" text="驳回" />
+      ),
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+  },
+  {
+    title: '备注',
+    dataIndex: 'memo',
+    key: 'memo',
+  },
+];
+export interface AdvancedOperation1 {
+  key: string;
+  type: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  memo: string;
+}
+
+export interface AdvancedOperation2 {
+  key: string;
+  type: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  memo: string;
+}
+
+export interface AdvancedOperation3 {
+  key: string;
+  type: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  memo: string;
+}
+
+export interface RootDataObject {
+  advancedOperation1: AdvancedOperation1[];
+  advancedOperation2: AdvancedOperation2[];
+  advancedOperation3: AdvancedOperation3[];
+}
+
+@connect(
+  ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading,
+  }: {
+    BLOCK_NAME_CAMEL_CASE: RootDataObject;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchAdvanced'],
+  })
+)
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
+  { loading: boolean; BLOCK_NAME_CAMEL_CASE: RootDataObject; dispatch: Dispatch },
+  {
+    operationKey: string;
+    stepDirection: 'horizontal' | 'vertical';
+  }
+> {
+  public state: {
+    operationKey: string;
+    stepDirection: 'horizontal' | 'vertical';
+  } = {
+    operationKey: 'tab1',
+    stepDirection: 'horizontal',
+  };
+
+  componentDidMount() {
+    const { dispatch, BLOCK_NAME_CAMEL_CASE } = this.props;
+    console.log(BLOCK_NAME_CAMEL_CASE);
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/fetchAdvanced',
+    });
+
+    this.setStepDirection();
+    window.addEventListener('resize', this.setStepDirection, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setStepDirection);
+  }
+
+  onOperationTabChange = (key: string) => {
+    this.setState({ operationKey: key });
+  };
+  setStepDirection = () => {
+    const { stepDirection } = this.state;
+    const w = getWindowWidth();
+    if (stepDirection !== 'vertical' && w <= 576) {
+      this.setState({
+        stepDirection: 'vertical',
+      });
+    } else if (stepDirection !== 'horizontal' && w > 576) {
+      this.setState({
+        stepDirection: 'horizontal',
+      });
+    }
+  };
+
+  render() {
+    const { stepDirection, operationKey } = this.state;
+    const { BLOCK_NAME_CAMEL_CASE, loading } = this.props;
+    const { advancedOperation1, advancedOperation2, advancedOperation3 } = BLOCK_NAME_CAMEL_CASE;
+    const contentList = {
+      tab1: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation1}
+          columns={columns}
+        />
+      ),
+      tab2: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation2}
+          columns={columns}
+        />
+      ),
+      tab3: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation3}
+          columns={columns}
+        />
+      ),
+    };
+    return (
+      <RouteContext.Consumer>
+        {value => {
+          return (
+            <>
+              <PageHeader
+                {...value}
+                title={
+                  <Typography.Title
+                    level={4}
+                    style={{
+                      margin: 0,
+                    }}
+                  >
+                    单号：234231029431
+                  </Typography.Title>
+                }
+                style={{
+                  margin: -24,
+                }}
+                extra={action}
+                footer={<RenderFooter tabList={tabList} />}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                  }}
+                >
+                  {description}
+                  {extra}
+                </div>
+              </PageHeader>
+              <div
+                style={{
+                  margin: 24,
+                  marginTop: 48,
+                }}
+              >
+                <GridContent>
+                  <Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}>
+                    <Steps direction={stepDirection} progressDot={customDot} current={1}>
+                      <Step title="创建项目" description={desc1} />
+                      <Step title="部门初审" description={desc2} />
+                      <Step title="财务复核" />
+                      <Step title="完成" />
+                    </Steps>
+                  </Card>
+                  <Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
+                    <DescriptionList style={{ marginBottom: 24 }}>
+                      <Description term="用户姓名">付小小</Description>
+                      <Description term="会员卡号">32943898021309809423</Description>
+                      <Description term="身份证">3321944288191034921</Description>
+                      <Description term="联系方式">18112345678</Description>
+                      <Description term="联系地址">
+                        曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+                      </Description>
+                    </DescriptionList>
+                    <DescriptionList style={{ marginBottom: 24 }} title="信息组">
+                      <Description term="某某数据">725</Description>
+                      <Description term="该数据更新时间">2017-08-08</Description>
+                      <Description>&nbsp;</Description>
+                      <Description
+                        term={
+                          <span>
+                            某某数据
+                            <Tooltip title="数据说明">
+                              <Icon
+                                style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
+                                type="info-circle-o"
+                              />
+                            </Tooltip>
+                          </span>
+                        }
+                      >
+                        725
+                      </Description>
+                      <Description term="该数据更新时间">2017-08-08</Description>
+                    </DescriptionList>
+                    <h4 style={{ marginBottom: 16 }}>信息组</h4>
+                    <Card type="inner" title="多层级信息组">
+                      <DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称">
+                        <Description term="负责人">林东东</Description>
+                        <Description term="角色码">1234567</Description>
+                        <Description term="所属部门">XX公司 - YY部</Description>
+                        <Description term="过期时间">2017-08-08</Description>
+                        <Description term="描述">
+                          这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+                        </Description>
+                      </DescriptionList>
+                      <Divider style={{ margin: '16px 0' }} />
+                      <DescriptionList
+                        size="small"
+                        style={{ marginBottom: 16 }}
+                        title="组名称"
+                        col={1}
+                      >
+                        <Description term="学名">
+                          Citrullus lanatus (Thunb.) Matsum. et
+                          Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
+                        </Description>
+                      </DescriptionList>
+                      <Divider style={{ margin: '16px 0' }} />
+                      <DescriptionList size="small" title="组名称">
+                        <Description term="负责人">付小小</Description>
+                        <Description term="角色码">1234568</Description>
+                      </DescriptionList>
+                    </Card>
+                  </Card>
+                  <Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
+                    <div className={styles.noData}>
+                      <Icon type="frown-o" />
+                      暂无数据
+                    </div>
+                  </Card>
+                  <Card
+                    className={styles.tabsCard}
+                    bordered={false}
+                    tabList={operationTabList}
+                    onTabChange={this.onOperationTabChange}
+                  >
+                    {contentList[operationKey]}
+                  </Card>
+                </GridContent>
+              </div>
+            </>
+          );
+        }}
+      </RouteContext.Consumer>
+    );
+  }
+}
+
+export default PAGE_NAME_UPPER_CAMEL_CASE;
diff --git a/AdvancedProfile/src/model.js b/AdvancedProfile/src/model.ts
similarity index 100%
rename from AdvancedProfile/src/model.js
rename to AdvancedProfile/src/model.ts
diff --git a/AdvancedProfile/src/service.js b/AdvancedProfile/src/service.ts
similarity index 100%
rename from AdvancedProfile/src/service.js
rename to AdvancedProfile/src/service.ts
diff --git a/package.json b/package.json
index 500c3244adaba4e2002f46a7c08258c997fd2c8d..33d8bf36b2a50607542d30e6a39ce4f2cbe86610 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "PAGES_PATH='AdvancedForm/src' umi dev",
+    "dev": "cross-env PAGES_PATH='AdvancedProfile/src' umi dev",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
     "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
@@ -45,5 +45,9 @@
     "hooks": {
       "pre-commit": "npm run lint-staged"
     }
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "^4.0.5",
+    "cross-env": "^5.2.0"
   }
 }