feat: add pro components - trend, avatarList

src/components/AvatarList/Item.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    item
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "AvatarItem",
+    props: {
+      tips: {
+        type: String,
+        default: '',
+        required: false
+      },
+      src: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/AvatarList/List.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+  import Avatar from 'ant-design-vue/es/avatar'
+  import AvatarListItem from './Item'
+
+  export default {
+    name: "AvatarList",
+    components: {
+      Avatar,
+      AvatarListItem
+    },
+    props: {
+      /**
+       * 头像大小 类型: large、small 、mini, default
+       * 默认值: default
+       */
+      size: {
+        type: String,
+        default: 'default'
+      },
+      /**
+       * 要显示的最大项目
+       */
+      maxLength: {
+        type: Number,
+        default: 3
+      },
+      /**
+       * 额外 CSS 风格
+       */
+      excessItemsStyle: {
+        type: Object,
+        default: () => {}
+      }
+    },
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/AvatarList/index.js

@@ -0,0 +1,3 @@
+import AvatarList from './List'
+
+export default AvatarList

src/components/AvatarList/index.less

@@ -0,0 +1,56 @@
+@import "../index";
+
+@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list";
+@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item";
+
+.@{avatar-list-prefix-cls} {
+  display: inline-block;
+
+  ul {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 0;
+  }
+}
+
+.@{avatar-list-item-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  margin-left: -8px;
+  width: @avatar-size-base;
+  height: @avatar-size-base;
+
+  :global {
+    .ant-avatar {
+      border: 1px solid #fff;
+    }
+  }
+
+  .large {
+    width: @avatar-size-lg;
+    height: @avatar-size-lg;
+  }
+
+  .small {
+    width: @avatar-size-sm;
+    height: @avatar-size-sm;
+  }
+
+  .mini {
+    width: 20px;
+    height: 20px;
+
+    :global {
+      .ant-avatar {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+
+        .ant-avatar-string {
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+}

src/components/Trend/Trend.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="[prefixCls, reverseColor && 'reverse-color' ]">
+    <span>
+      <slot name="term"></slot>
+      <span class="item-text">
+        <slot></slot>
+      </span>
+    </span>
+    <span :class="[flag]"><a-icon :type="`caret-${flag}`"/></span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Trend",
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-trend'
+      },
+      /**
+       * 上升下降标识：up|down
+       */
+      flag: {
+        type: String,
+        required: true
+      },
+      /**
+       * 颜色反转
+       */
+      reverseColor: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

src/components/Trend/index.js

@@ -0,0 +1,3 @@
+import Trend from './Trend.vue'
+
+export default Trend

src/components/Trend/index.less

@@ -0,0 +1,42 @@
+@import "../index";
+
+@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
+
+.@{trend-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+
+  .item-text {
+    display: inline-block;
+    margin-left: 8px;
+    color: rgba(0,0,0,.85);
+  }
+
+  .up {
+    color: @red-6;
+  }
+  .down {
+    color: @green-6;
+    top: -1px;
+  }
+
+  &.reverse-color .up {
+    color: @green-6;
+  }
+  &.reverse-color .down {
+    color: @red-6;
+  }
+}

src/components/index.less

@@ -0,0 +1,4 @@
+@import "~ant-design-vue/lib/style/index";
+
+// The prefix to use on all css classes from ant-pro.
+@ant-pro-prefix             : ant-pro;

src/config/router.config.js

@@ -1,4 +1,4 @@
-import { UserLayout, BasicLayout, RouteView, PageView } from '@/components/layouts'
+import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
 
 export const asyncRouterMap = [
 
@@ -313,6 +313,19 @@ export const constantRouterMap = [
     ]
   },
 
+  {
+    path: '/test',
+    component: BlankLayout,
+    redirect: '/test/home',
+    children: [
+      {
+        path: 'home',
+        name: 'TestHome',
+        component: () => import('@/views/Home')
+      }
+    ]
+  },
+
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')

src/views/Home.vue

@@ -1,18 +1,74 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div class="banner">
+      <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
+      <h3>Welcome to Your Vue.js App</h3>
+    </div>
+
+    <br/>
+
+    <h2># Trend 组件 </h2>
+
+    <a-divider> 正常 </a-divider>
+
+    <a-card>
+
+      <trend flag="up" style="margin-right: 16px;">
+        <span slot="term">工资</span>
+        5%
+      </trend>
+      <trend flag="up" style="margin-right: 16px;">
+        <span slot="term">工作量</span>
+        50%
+      </trend>
+      <trend flag="down">
+        <span slot="term">身体状态</span>
+        50%
+      </trend>
+
+    </a-card>
+
+    <a-divider> 颜色反转 </a-divider>
+
+    <a-card>
+
+      <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
+        <span slot="term">工资</span>
+        5%
+      </trend>
+      <trend flag="down" :reverse-color="true" style="margin-right: 16px;">
+        <span slot="term">工作量</span>
+        50%
+      </trend>
+
+    </a-card>
+
+    <a-divider> 例子 </a-divider>
+
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+  // @ is an alias to /src
 
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
+  import Trend from '@/components/Trend'
+
+  export default {
+    name: 'Home',
+    components: {
+      Trend
+    }
   }
-}
 </script>
+
+<style scoped>
+  .home {
+    width: 900px;
+    margin: 0 auto;
+  }
+  .home > .banner {
+    text-align: center;
+    padding-top: 25px;
+    margin: 25px 0;
+  }
+</style>

src/views/dashboard/Analysis.vue

@@ -7,8 +7,14 @@
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
-            <trend style="margin-right: 16px;" term="同周比" :percentage="12" :type="true" :fixed="0" />
-            <trend term="日环比" :target="100" :value="89" :fixed="0" />
+            <trend flag="up" style="margin-right: 16px;">
+              <span slot="term">周同比</span>
+              12%
+            </trend>
+            <trend flag="down">
+              <span slot="term">日同比</span>
+              11%
+            </trend>
           </div>
           <template slot="footer">日均销售额<span>￥ 234.56</span></template>
         </chart-card>
@@ -141,7 +147,7 @@
   import MiniProgress from '@/components/chart/MiniProgress'
   import RankList from '@/components/chart/RankList'
   import Bar from '@/components/chart/Bar'
-  import Trend from '@/components/chart/Trend'
+  import Trend from '@/components/Trend'
 
   const rankList = []
   for (let i = 0; i < 7; i++) {