feat:remove descriptionList

ProfileAdvanced/src/DescriptionList/Description.tsx

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

ProfileAdvanced/src/DescriptionList/DescriptionList.tsx

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

ProfileAdvanced/src/DescriptionList/index.less

-@import '~antd/es/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;
-    }
-  }
-}

ProfileAdvanced/src/DescriptionList/index.tsx

-import DescriptionList from './DescriptionList';
-
-export default DescriptionList;

ProfileAdvanced/src/DescriptionList/responsive.tsx

-export default {
-  1: { xs: 24 },
-  2: { xs: 24, sm: 12 },
-  3: { xs: 24, sm: 12, md: 8 },
-  4: { xs: 24, sm: 12, md: 6 },
-};

ProfileAdvanced/src/index.tsx

 import React, { Component, Fragment } from 'react';
 import { Dispatch } from 'redux';
-import { RouteContext, GridContent } from '@ant-design/pro-layout';
+import { GridContent, PageHeaderWrapper } from '@ant-design/pro-layout';
 import { connect } from 'dva';
 import {
   Button,
@@ -12,22 +12,17 @@ import {
   Steps,
   Card,
   Popover,
-  PageHeader,
   Badge,
   Table,
   Tooltip,
   Divider,
-  Typography,
-  Tabs,
+  Descriptions,
 } from 'antd';
-import { TabsProps } from 'antd/es/tabs';
 import classNames from 'classnames';
-import DescriptionList from './DescriptionList';
 import styles from './style.less';
 import { AdvancedProfileData } from './data';
 
 const { Step } = Steps;
-const { Description } = DescriptionList;
 const ButtonGroup = Button.Group;
 
 const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
@@ -73,55 +68,18 @@ const extra = (
 );
 
 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="关联单据">
+  <Descriptions className={styles.headerList} size="small" column={2}>
+    <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
+    <Descriptions.Item label="订购产品">XX 服务</Descriptions.Item>
+    <Descriptions.Item label="创建时间">2017-07-07</Descriptions.Item>
+    <Descriptions.Item label="关联单据">
       <a href="">12421</a>
-    </Description>
-    <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
-    <Description term="备注">请于两个工作日内确认</Description>
-  </DescriptionList>
+    </Descriptions.Item>
+    <Descriptions.Item label="生效日期">2017-07-07 ~ 2017-08-08</Descriptions.Item>
+    <Descriptions.Item label="备注">请于两个工作日内确认</Descriptions.Item>
+  </Descriptions>
 );
 
-/**
- * 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>
@@ -236,7 +194,7 @@ const columns = [
   }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
-  { loading: boolean; BLOCK_NAME_CAMEL_CASE: AdvancedProfileData; dispatch: Dispatch },
+  { loading: boolean; BLOCK_NAME_CAMEL_CASE: AdvancedProfileData; dispatch: Dispatch<any> },
   {
     operationKey: string;
     stepDirection: 'horizontal' | 'vertical';
@@ -251,7 +209,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   };
 
   componentDidMount() {
-    const { dispatch, BLOCK_NAME_CAMEL_CASE } = this.props;
+    const { dispatch } = this.props;
     dispatch({
       type: 'BLOCK_NAME_CAMEL_CASE/fetchAdvanced',
     });
@@ -312,28 +270,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
       ),
     };
     return (
-      <RouteContext.Consumer>
-        {value => {
-          return (
-            <>
-              <PageHeader
-                {...value}
-                title={
-                  <Typography.Title
-                    level={4}
-                    style={{
-                      margin: 0,
-                    }}
-                  >
-                    单号：234231029431
-                  </Typography.Title>
-                }
-                style={{
-                  margin: -24,
-                }}
+      <PageHeaderWrapper
+        title="单号：234231029431"
         extra={action}
-                footer={
-                  <RenderFooter
+        content={description}
+        extraContent={extra}
+        tabActiveKey="detail"
         tabList={[
           {
             key: 'detail',
@@ -344,26 +286,16 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
             tab: '规则',
           },
         ]}
-                  />
-                }
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                  }}
       >
-                  {description}
-                  {extra}
-                </div>
-              </PageHeader>
         <div
           style={{
             margin: 24,
             marginTop: 48,
           }}
+          className={styles.main}
         >
           <GridContent>
-                  <Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}>
+            <Card title="流程进度" style={{ marginBottom: 24 }}>
               <Steps direction={stepDirection} progressDot={customDot} current={1}>
                 <Step title="创建项目" description={desc1} />
                 <Step title="部门初审" description={desc2} />
@@ -372,21 +304,20 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
               </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="联系地址">
+              <Descriptions style={{ marginBottom: 24 }}>
+                <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
+                <Descriptions.Item label="会员卡号">32943898021309809423</Descriptions.Item>
+                <Descriptions.Item label="身份证">3321944288191034921</Descriptions.Item>
+                <Descriptions.Item label="联系方式">18112345678</Descriptions.Item>
+                <Descriptions.Item label="联系地址">
                   曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
-                      </Description>
-                    </DescriptionList>
-                    <DescriptionList style={{ marginBottom: 24 }} title="信息组">
-                      <Description term="某某数据">725</Description>
-                      <Description term="该数据更新时间">2017-08-08</Description>
-                      <Description>&nbsp;</Description>
-                      <Description
-                        term={
+                </Descriptions.Item>
+              </Descriptions>
+              <Descriptions style={{ marginBottom: 24 }} title="信息组">
+                <Descriptions.Item label="某某数据">725</Descriptions.Item>
+                <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
+                <Descriptions.Item
+                  label={
                     <span>
                       某某数据
                       <Tooltip title="数据说明">
@@ -399,37 +330,32 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                   }
                 >
                   725
-                      </Description>
-                      <Description term="该数据更新时间">2017-08-08</Description>
-                    </DescriptionList>
+                </Descriptions.Item>
+                <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
+              </Descriptions>
               <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="描述">
+                <Descriptions style={{ marginBottom: 16 }} title="组名称">
+                  <Descriptions.Item label="负责人">林东东</Descriptions.Item>
+                  <Descriptions.Item label="角色码">1234567</Descriptions.Item>
+                  <Descriptions.Item label="所属部门">XX公司 - YY部</Descriptions.Item>
+                  <Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item>
+                  <Descriptions.Item label="描述">
                     这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
-                        </Description>
-                      </DescriptionList>
+                  </Descriptions.Item>
+                </Descriptions>
                 <Divider style={{ margin: '16px 0' }} />
-                      <DescriptionList
-                        size="small"
-                        style={{ marginBottom: 16 }}
-                        title="组名称"
-                        col={1}
-                      >
-                        <Description term="学名">
+                <Descriptions style={{ marginBottom: 16 }} title="组名称" column={1}>
+                  <Descriptions.Item label="学名">
                     Citrullus lanatus (Thunb.) Matsum. et
                     Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
-                        </Description>
-                      </DescriptionList>
+                  </Descriptions.Item>
+                </Descriptions>
                 <Divider style={{ margin: '16px 0' }} />
-                      <DescriptionList size="small" title="组名称">
-                        <Description term="负责人">付小小</Description>
-                        <Description term="角色码">1234568</Description>
-                      </DescriptionList>
+                <Descriptions title="组名称">
+                  <Descriptions.Item label="负责人">付小小</Descriptions.Item>
+                  <Descriptions.Item label="角色码">1234568</Descriptions.Item>
+                </Descriptions>
               </Card>
             </Card>
             <Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
@@ -448,10 +374,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
             </Card>
           </GridContent>
         </div>
-            </>
-          );
-        }}
-      </RouteContext.Consumer>
+      </PageHeaderWrapper>
     );
   }
 }

ProfileAdvanced/src/style.less

 @import '~antd/es/style/themes/default.less';
 
+.main {
+  table {
+    table-layout: fixed;
+  }
+}
+
 .headerList {
   margin-bottom: 4px;
+  :global {
+    .ant-descriptions-row > td {
+      padding-bottom: 8px;
+    }
+  }
 }
 
 .tabsCard {

ProfileBasic/src/components/DescriptionList/Description.tsx

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

ProfileBasic/src/components/DescriptionList/DescriptionList.tsx

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

ProfileBasic/src/components/DescriptionList/index.less

-@import '~antd/es/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;
-    }
-  }
-}

ProfileBasic/src/components/DescriptionList/index.tsx

-import DescriptionList from './DescriptionList';
-
-export default DescriptionList;

ProfileBasic/src/components/DescriptionList/responsive.tsx

-export default {
-  1: { xs: 24 },
-  2: { xs: 24, sm: 12 },
-  3: { xs: 24, sm: 12, md: 8 },
-  4: { xs: 24, sm: 12, md: 6 },
-};

ProfileBasic/src/index.tsx

 import React, { Component } from 'react';
 import { connect } from 'dva';
-import { Card, Badge, Table, Divider } from 'antd';
-import DescriptionList from './components/DescriptionList';
+import { Card, Badge, Table, Descriptions, Divider } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import styles from './style.less';
 import { BasicProfileDataType, BasicGood } from './data';
 import { Dispatch } from 'redux';
-const { Description } = DescriptionList;
 
 const progressColumns = [
   {
@@ -169,20 +167,20 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     return (
       <PageHeaderWrapper>
         <Card bordered={false}>
-          <DescriptionList size="large" title="退款申请" style={{ marginBottom: 32 }}>
-            <Description term="取货单号">1000000000</Description>
-            <Description term="状态">已取货</Description>
-            <Description term="销售单号">1234123421</Description>
-            <Description term="子订单">3214321432</Description>
-          </DescriptionList>
+          <Descriptions title="退款申请" style={{ marginBottom: 32 }}>
+            <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
+            <Descriptions.Item label="状态">已取货</Descriptions.Item>
+            <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
+            <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
+          </Descriptions>
           <Divider style={{ marginBottom: 32 }} />
-          <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
-            <Description term="用户姓名">付小小</Description>
-            <Description term="联系电话">18100000000</Description>
-            <Description term="常用快递">菜鸟仓储</Description>
-            <Description term="取货地址">浙江省杭州市西湖区万塘路18号</Description>
-            <Description term="备注">无</Description>
-          </DescriptionList>
+          <Descriptions title="用户信息" style={{ marginBottom: 32 }}>
+            <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
+            <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
+            <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
+            <Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
+            <Descriptions.Item label="备注">无</Descriptions.Item>
+          </Descriptions>
           <Divider style={{ marginBottom: 32 }} />
           <div className={styles.title}>退货商品</div>
           <Table

_scripts/screenshot.js

@@ -84,7 +84,7 @@ const getImage = async (page, path) => {
 
 const openBrowser = async () => {
   browser = await puppeteer.launch({
-    headless: false,
+    headless: true,
     args: [
       '--disable-gpu',
       '--disable-dev-shm-usage',

package.json

 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='AccountCenter/src' umi dev",
+    "dev": "cross-env PAGES_PATH='ProfileAdvanced/src' umi dev",
     "start": "umi dev",
     "lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
     "lint-staged": "lint-staged",