feat: add components docs

README.md

@@ -5,6 +5,8 @@ An out-of-box UI solution for enterprise applications as a Vue boilerplate. base
 </div>
 
 
+
+
 Overview
 ----
 
@@ -118,13 +120,15 @@ yarn run lint
 ----
 
 - [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
-
 - [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
-
 - [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
-
 - [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
-
+- ANTD PRO 额外组件
+  - Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
+  - AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
+  - CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
+  - Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
+  - NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
 - 其他待补充...
 
 

src/components/AvatarList/index.md

@@ -0,0 +1,64 @@
+# AvatarList 用户头像列表
+
+
+一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
+
+
+
+引用方式：
+
+```javascript
+import AvatarList from '@/components/AvatarList'
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+    components: {
+        AvatarList,
+        AvatarListItem
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<avatar-list size="mini">
+    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+</avatar-list>
+```
+或
+```html
+<avatar-list :max-length="3">
+    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+</avatar-list>
+```
+
+
+
+## API
+
+### AvatarList
+
+| 参数               | 说明       | 类型                                 | 默认值       |
+| ---------------- | -------- | ---------------------------------- | --------- |
+| size             | 头像大小     | `large`、`small` 、`mini`, `default` | `default` |
+| maxLength        | 要显示的最大项目 | number                             | -         |
+| excessItemsStyle | 多余的项目风格  | CSSProperties                      | -         |
+
+### AvatarList.Item
+
+| 参数   | 说明     | 类型        | 默认值 |
+| ---- | ------ | --------- | --- |
+| tips | 头像展示文案 | string | -   |
+| src  | 头像图片连接 | string    | -   |
+

src/components/CountDown/index.md

@@ -0,0 +1,34 @@
+# CountDown 倒计时
+
+倒计时组件。
+
+
+
+引用方式：
+
+```javascript
+import CountDown from '@/components/CountDown/CountDown'
+
+export default {
+    components: {
+        CountDown
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<count-down :target="new Date().getTime() + 3000000" :on-end="onEndHandle" />
+```
+
+
+
+## API
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| target | 目标时间 | Date | - |
+| onEnd |  倒计时结束回调 | funtion | -|

src/components/Ellipsis/index.md

@@ -0,0 +1,38 @@
+# Ellipsis 文本自动省略号
+
+文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
+
+
+
+引用方式：
+
+```javascript
+import Ellipsis from '@/components/Ellipsis'
+
+export default {
+    components: {
+        Ellipsis
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<ellipsis :length="100" tooltip>
+        There were injuries alleged in three cases in 2015, and a
+        fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
+</ellipsis>
+```
+
+
+
+## API
+
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+tooltip | 移动到文本展示完整内容的提示 | boolean | -
+length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -

src/components/NumberInfo/index.md

@@ -0,0 +1,43 @@
+# NumberInfo 数据文本
+
+常用在数据卡片中，用于突出展示某个业务数据。
+
+
+
+引用方式：
+
+```javascript
+import NumberInfo from '@/components/NumberInfo'
+
+export default {
+    components: {
+        NumberInfo
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<number-info
+    :sub-title="() => { return 'Visits this week' }"
+    :total="12321"
+    status="up"
+    :sub-total="17.1"></number-info>
+```
+
+
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+title | 标题 | ReactNode\|string | -
+subTitle | 子标题 | ReactNode\|string | -
+total | 总量 | ReactNode\|string | -
+subTotal | 子总量 | ReactNode\|string | -
+status | 增加状态 | 'up \| down' | -
+theme | 状态样式 | string | 'light'
+gap | 设置数字和描述之间的间距（像素）| number | 8

src/components/Trend/index.md

@@ -0,0 +1,45 @@
+# Trend 趋势标记
+
+趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
+
+
+
+引用方式：
+
+```javascript
+import Trend from '@/components/Trend'
+
+export default {
+    components: {
+        Trend
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<trend flag="up">5%</trend>
+```
+或
+```html
+<trend flag="up">
+    <span slot="term">工资</span>
+    5%
+</trend>
+```
+或
+```html
+<trend flag="up" term="工资">5%</trend>
+```
+
+
+## API
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| flag | 上升下降标识：`up|down` | string | - |
+| reverseColor | 颜色反转 | Boolean | false |
+