初始化 antd-pro

admin-web/src/components/DescriptionList/Description.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export default class Description extends React.Component<
+  {
+    term: React.ReactNode;
+    style?: React.CSSProperties;
+  },
+  any
+> {}

admin-web/src/components/DescriptionList/Description.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col } from 'antd';
+import styles from './index.less';
+import responsive from './responsive';
+
+const Description = ({ term, column, children, ...restProps }) => (
+  <Col {...responsive[column]} {...restProps}>
+    {term && <div className={styles.term}>{term}</div>}
+    {children !== null && children !== undefined && <div className={styles.detail}>{children}</div>}
+  </Col>
+);
+
+Description.defaultProps = {
+  term: '',
+};
+
+Description.propTypes = {
+  term: PropTypes.node,
+};
+
+export default Description;

admin-web/src/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Row } from 'antd';
+import styles from './index.less';
+
+const DescriptionList = ({
+  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 =>
+          child ? React.cloneElement(child, { column }) : child
+        )}
+      </Row>
+    </div>
+  );
+};
+
+export default DescriptionList;

admin-web/src/components/DescriptionList/demo/basic.md

@@ -0,0 +1,43 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+基本描述列表。
+
+## en-US
+
+Basic DescriptionList.
+
+````jsx
+import DescriptionList from 'ant-design-pro/lib/DescriptionList';
+
+const { Description } = DescriptionList;
+
+ReactDOM.render(
+  <DescriptionList size="large" title="title">
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+  </DescriptionList>
+, mountNode);
+````

admin-web/src/components/DescriptionList/demo/vertical.md

@@ -0,0 +1,43 @@
+---
+order: 1
+title:
+  zh-CN: 垂直型
+  en-US: Vertical
+---
+
+## zh-CN
+
+垂直布局。
+
+## en-US
+
+Vertical layout.
+
+````jsx
+import DescriptionList from 'ant-design-pro/lib/DescriptionList';
+
+const { Description } = DescriptionList;
+
+ReactDOM.render(
+  <DescriptionList size="large" title="title" layout="vertical">
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+  </DescriptionList>
+, mountNode);
+````

admin-web/src/components/DescriptionList/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Description from './Description';
+
+export interface IDescriptionListProps {
+  layout?: 'horizontal' | 'vertical';
+  col?: number;
+  title: React.ReactNode;
+  gutter?: number;
+  size?: 'large' | 'small';
+  style?: React.CSSProperties;
+}
+
+export default class DescriptionList extends React.Component<IDescriptionListProps, any> {
+  public static Description: typeof Description;
+}

admin-web/src/components/DescriptionList/index.en-US.md

@@ -0,0 +1,33 @@
+---
+title: DescriptionList
+cols: 1
+order: 4
+---
+
+Groups display multiple read-only fields, which are common to informational displays on detail pages.
+
+## API
+
+### DescriptionList
+
+| Property      | Description                         | Type        | Default |
+|----------|------------------------------------------|-------------|---------|
+| layout    | type of layout                          | Enum{'horizontal', 'vertical'}  | 'horizontal' |
+| col       | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules)             | number(0 < col <= 4)  | 3 |
+| title     | title                                 | ReactNode  | - |
+| gutter    | specify the distance between two items, unit is `px`  | number  | 32 |
+| size     | size of list       | Enum{'large', 'small'}  | - |
+
+#### Responsive Rules
+
+| Window Width        | Columns Number                             | 
+|---------------------|---------------------------------------------|
+| `≥768px`           |  `col`                                       |
+| `≥576px`           |  `col < 2 ? col : 2`                         |
+| `<576px`           |  `1`                                         |
+
+### DescriptionList.Description
+
+| Property | Description                                      | Type         | Default |
+|----------|------------------------------------------|-------------|-------|
+| term     | item title                                 | ReactNode  | - |

admin-web/src/components/DescriptionList/index.js

@@ -0,0 +1,5 @@
+import DescriptionList from './DescriptionList';
+import Description from './Description';
+
+DescriptionList.Description = Description;
+export default DescriptionList;

admin-web/src/components/DescriptionList/index.less

@@ -0,0 +1,76 @@
+@import '~antd/lib/style/themes/default.less';
+
+.descriptionList {
+  // offset the padding-bottom of last row
+  :global {
+    .ant-row {
+      margin-bottom: -16px;
+      overflow: hidden;
+    }
+  }
+
+  .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;
+      }
+    }
+    .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;
+    }
+  }
+}

admin-web/src/components/DescriptionList/index.zh-CN.md

@@ -0,0 +1,37 @@
+---
+title: DescriptionList
+subtitle: 描述列表
+cols: 1
+order: 4
+---
+
+成组展示多个只读字段，常见于详情页的信息展示。
+
+## API
+
+### DescriptionList
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| layout    | 布局方式                                 | Enum{'horizontal', 'vertical'}  | 'horizontal' |
+| col       | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定          | number(0 < col <= 4)  | 3 |
+| title     | 列表标题                                 | ReactNode  | - |
+| gutter    | 列表项间距，单位为 `px`                    | number  | 32 |
+| size     | 列表型号        | Enum{'large', 'small'}  | - |
+
+#### 响应式规则
+
+| 窗口宽度             | 展示列数                                      | 
+|---------------------|---------------------------------------------|
+| `≥768px`           |  `col`                                       |
+| `≥576px`           |  `col < 2 ? col : 2`                         |
+| `<576px`           |  `1`                                         |
+
+### DescriptionList.Description
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| term     | 列表项标题                                 | ReactNode  | - |
+
+
+

admin-web/src/components/DescriptionList/responsive.js

@@ -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 },
+};