初始化 antd-pro

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

@@ -0,0 +1,30 @@
+---
+order: 0
+title: 
+  zh-CN: 演示
+  en-US: Demo
+---
+
+## zh-CN
+
+各种数据文案的展现方式。
+
+## en-US
+
+Used for presenting various numerical data.
+
+````jsx
+import NumberInfo from 'ant-design-pro/lib/NumberInfo';
+import numeral from 'numeral';
+
+ReactDOM.render(
+  <div>
+    <NumberInfo
+      subTitle={<span>Visits this week</span>}
+      total={numeral(12321).format('0,0')}
+      status="up"
+      subTotal={17.1}
+    />
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface INumberInfoProps {
+  title?: React.ReactNode | string;
+  subTitle?: React.ReactNode | string;
+  total?: React.ReactNode | string;
+  status?: 'up' | 'down';
+  theme?: string;
+  gap?: number;
+  subTotal?: number;
+  style?: React.CSSProperties;
+}
+
+export default class NumberInfo extends React.Component<INumberInfoProps, any> {}

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

@@ -0,0 +1,19 @@
+---
+title: NumberInfo
+cols: 1
+order: 10
+---
+
+Often used in data cards for highlighting the business data.
+
+## API
+
+Property | Description | Type | Default
+----|------|-----|------
+title | title | ReactNode\|string | -
+subTitle | subtitle | ReactNode\|string | -
+total | total amount | ReactNode\|string | -
+subTotal | total amount of additional information | ReactNode\|string | -
+status | increase state | 'up \| down' | -
+theme | state style | string | 'light'
+gap | set the spacing (pixels) between numbers and descriptions | number | 8

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Icon } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const NumberInfo = ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => (
+  <div
+    className={classNames(styles.numberInfo, {
+      [styles[`numberInfo${theme}`]]: theme,
+    })}
+    {...rest}
+  >
+    {title && (
+      <div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
+        {title}
+      </div>
+    )}
+    {subTitle && (
+      <div
+        className={styles.numberInfoSubTitle}
+        title={typeof subTitle === 'string' ? subTitle : ''}
+      >
+        {subTitle}
+      </div>
+    )}
+    <div className={styles.numberInfoValue} style={gap ? { marginTop: gap } : null}>
+      <span>
+        {total}
+        {suffix && <em className={styles.suffix}>{suffix}</em>}
+      </span>
+      {(status || subTotal) && (
+        <span className={styles.subTotal}>
+          {subTotal}
+          {status && <Icon type={`caret-${status}`} />}
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+export default NumberInfo;

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

@@ -0,0 +1,68 @@
+@import '~antd/lib/style/themes/default.less';
+
+.numberInfo {
+  .suffix {
+    margin-left: 4px;
+    color: @text-color;
+    font-size: 16px;
+    font-style: normal;
+  }
+  .numberInfoTitle {
+    margin-bottom: 16px;
+    color: @text-color;
+    font-size: @font-size-lg;
+    transition: all 0.3s;
+  }
+  .numberInfoSubTitle {
+    height: 22px;
+    overflow: hidden;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: 22px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+  .numberInfoValue {
+    margin-top: 4px;
+    overflow: hidden;
+    font-size: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      margin-right: 32px;
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    .subTotal {
+      margin-right: 0;
+      color: @text-color-secondary;
+      font-size: @font-size-lg;
+      vertical-align: top;
+      i {
+        margin-left: 4px;
+        font-size: 12px;
+        transform: scale(0.82);
+      }
+      :global {
+        .anticon-caret-up {
+          color: @red-6;
+        }
+        .anticon-caret-down {
+          color: @green-6;
+        }
+      }
+    }
+  }
+}
+.numberInfolight {
+  .numberInfoValue {
+    & > span {
+      color: @text-color;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+---
+title: NumberInfo
+subtitle: 数据文本
+cols: 1
+order: 10
+---
+
+常用在数据卡片中，用于突出展示某个业务数据。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+title | 标题 | ReactNode\|string | -
+subTitle | 子标题 | ReactNode\|string | -
+total | 总量 | ReactNode\|string | -
+subTotal | 子总量 | ReactNode\|string | -
+status | 增加状态 | 'up \| down' | -
+theme | 状态样式 | string | 'light'
+gap | 设置数字和描述之间的间距（像素）| number | 8