初始化 antd-pro

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

@@ -0,0 +1,17 @@
+---
+order: 0
+title: 演示
+---
+
+在数值背后添加一个小图标来标识涨跌情况。
+
+```jsx
+import Trend from 'ant-design-pro/lib/Trend';
+
+ReactDOM.render(
+  <div>
+    <Trend flag="up" >12%</Trend>
+    <Trend flag="down" style={{ marginLeft: 8 }}>11%</Trend>
+  </div>
+, mountNode);
+```

admin-web/src/components/Trend/demo/reverse.md

@@ -0,0 +1,17 @@
+---
+order: 0
+title: 颜色反转
+---
+
+在数值背后添加一个小图标来标识涨跌情况。
+
+```jsx
+import Trend from 'ant-design-pro/lib/Trend';
+
+ReactDOM.render(
+  <div>
+    <Trend flag="up" reverseColor={true} >12%</Trend>
+    <Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>11%</Trend>
+  </div>
+, mountNode);
+```

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface ITrendProps {
+  colorful?: boolean;
+  flag: 'up' | 'down';
+  style?: React.CSSProperties;
+  reverseColor?: boolean;
+}
+
+export default class Trend extends React.Component<ITrendProps, any> {}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Icon } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const Trend = ({ colorful = true, reverseColor = false, flag, children, className, ...rest }) => {
+  const classString = classNames(
+    styles.trendItem,
+    {
+      [styles.trendItemGrey]: !colorful,
+      [styles.reverseColor]: reverseColor && colorful,
+    },
+    className
+  );
+  return (
+    <div {...rest} className={classString} title={typeof children === 'string' ? children : ''}>
+      <span>{children}</span>
+      {flag && (
+        <span className={styles[flag]}>
+          <Icon type={`caret-${flag}`} />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Trend;

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

@@ -0,0 +1,37 @@
+@import '~antd/lib/style/themes/default.less';
+
+.trendItem {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    position: relative;
+    top: 1px;
+    margin-left: 4px;
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+  .up {
+    color: @red-6;
+  }
+  .down {
+    top: -1px;
+    color: @green-6;
+  }
+
+  &.trendItemGrey .up,
+  &.trendItemGrey .down {
+    color: @text-color;
+  }
+
+  &.reverseColor .up {
+    color: @green-6;
+  }
+  &.reverseColor .down {
+    color: @red-6;
+  }
+}

admin-web/src/components/Trend/index.md

@@ -0,0 +1,20 @@
+---
+title: Trend
+subtitle: 趋势标记
+cols: 1
+order: 14
+---
+
+趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
+
+## API
+
+```html
+<Trend flag="up">50%</Trend>
+```
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| colorful | 是否彩色标记 | Boolean | true |
+| flag | 上升下降标识：`up|down` | string | - |
+| reverseColor | 颜色反转 | Boolean | false |