Merge branches 'dev' and 'master' of https://github.com/sendya/ant-design-pro-vue

src/components/AvatarList/Item.vue

+<template>
+  <tooltip v-if="tips !== ''">
+    <template slot="title">{{ tips }}</template>
+    <avatar :size="avatarSize" :src="src" />
+  </tooltip>
+  <avatar v-else :size="avatarSize" :src="src" />
+</template>
+
+<script>
+  import Avatar from 'ant-design-vue/es/avatar'
+  import Tooltip from 'ant-design-vue/es/tooltip'
+
+  export default {
+    name: "AvatarItem",
+    components: {
+      Avatar,
+      Tooltip
+    },
+    props: {
+      tips: {
+        type: String,
+        default: '',
+        required: false
+      },
+      src: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        size: this.$parent.size
+      }
+    },
+    computed: {
+      avatarSize () {
+        return this.size !== 'mini' && this.size || 20
+      }
+    },
+    watch: {
+      '$parent.size' (val) {
+        this.size = val
+      }
+    }
+  }
+</script>
\ No newline at end of file

src/components/AvatarList/List.vue

+<!--
+<template>
+  <div :class="[prefixCls]">
+    <ul>
+      <slot></slot>
+      <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
+
+
+      <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
+        <avatar-item :size="size">
+          <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
+        </avatar-item>
+      </template>
+    </ul>
+  </div>
+</template>
+-->
+
+<script>
+  import Avatar from 'ant-design-vue/es/avatar'
+  import AvatarItem from './Item'
+  import { filterEmpty } from '@/components/_util/util'
+
+  export default {
+    AvatarItem,
+    name: "AvatarList",
+    components: {
+      Avatar,
+      AvatarItem
+    },
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-avatar-list'
+      },
+      /**
+       * 头像大小 类型: large、small 、mini, default
+       * 默认值: default
+       */
+      size: {
+        type: [String, Number],
+        default: 'default'
+      },
+      /**
+       * 要显示的最大项目
+       */
+      maxLength: {
+        type: Number,
+        default: 0
+      },
+      /**
+       * 多余的项目风格
+       */
+      excessItemsStyle: {
+        type: Object,
+        default: () => {
+          return {
+            color: '#f56a00',
+            backgroundColor: '#fde3cf'
+          }
+        }
+      }
+    },
+    data () {
+      return {}
+    },
+    methods: {
+      getItems(items) {
+        const classString = {
+          [`${this.prefixCls}-item`]: true,
+          [`${this.size}`]: true
+        }
+
+        if (this.maxLength > 0) {
+          items = items.slice(0, this.maxLength)
+          items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
+        }
+        const itemList = items.map((item) => (
+          <li class={ classString }>{ item }</li>
+        ))
+        return itemList
+      }
+    },
+    render () {
+      const { prefixCls, size } = this.$props
+      const classString = {
+        [`${prefixCls}`]: true,
+        [`${size}`]: true,
+      }
+      const items = filterEmpty(this.$slots.default)
+      const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
+
+      return (
+        <div class={ classString }>
+          { itemsDom }
+        </div>
+      )
+    }
+  }
+</script>
\ No newline at end of file

src/components/AvatarList/index.js

+import AvatarList from './List'
+import "./index.less"
+
+export default AvatarList
\ No newline at end of file

src/components/AvatarList/index.less

+@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 {
+    list-style: none;
+    display: inline-block;
+    padding: 0;
+    margin: 0 0 0 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;
+      cursor: pointer;
+    }
+  }
+
+  &.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/CountDown/CountDown.vue

+<template>
+  <span>
+    {{ lastTime | format }}
+  </span>
+</template>
+
+<script>
+
+  function fixedZero(val) {
+    return val * 1 < 10 ? `0${val}` : val;
+  }
+
+  export default {
+    name: "CountDown",
+    props: {
+      format: {
+        type: Function,
+        default: undefined
+      },
+      target: {
+        type: [Date, Number],
+        required: true,
+      },
+      onEnd: {
+        type: Function,
+        default: () => {
+        }
+      }
+    },
+    data() {
+      return {
+        dateTime: '0',
+        originTargetTime: 0,
+        lastTime: 0,
+        timer: 0,
+        interval: 1000
+      }
+    },
+    filters: {
+      format(time) {
+        const hours = 60 * 60 * 1000;
+        const minutes = 60 * 1000;
+
+        const h = Math.floor(time / hours);
+        const m = Math.floor((time - h * hours) / minutes);
+        const s = Math.floor((time - h * hours - m * minutes) / 1000);
+        return `${fixedZero(h)}:${fixedZero(m)}:${fixedZero(s)}`
+      }
+    },
+    created() {
+      this.initTime()
+      this.tick()
+    },
+    methods: {
+      initTime() {
+        let lastTime = 0;
+        let targetTime = 0;
+        this.originTargetTime = this.target
+        try {
+          if (Object.prototype.toString.call(this.target) === '[object Date]') {
+            targetTime = this.target
+          } else {
+            targetTime = new Date(this.target).getTime()
+          }
+        } catch (e) {
+          throw new Error('invalid target prop')
+        }
+
+        lastTime = targetTime - new Date().getTime();
+
+        this.lastTime = lastTime < 0 ? 0 : lastTime
+      },
+      tick() {
+        const {onEnd} = this
+
+        this.timer = setTimeout(() => {
+          if (this.lastTime < this.interval) {
+            clearTimeout(this.timer)
+            this.lastTime = 0
+            if (typeof onEnd === 'function') {
+              onEnd();
+            }
+          } else {
+            this.lastTime -= this.interval
+            this.tick()
+          }
+        }, this.interval)
+      }
+    },
+    beforeUpdate () {
+      if (this.originTargetTime !== this.target) {
+        this.initTime()
+      }
+    },
+    beforeDestroy() {
+      clearTimeout(this.timer)
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/CountDown/index.js

+import CountDown from './CountDown'
+
+export default CountDown
\ No newline at end of file

src/components/Ellipsis/Ellipsis.vue

+<script>
+  import Tooltip from 'ant-design-vue/es/tooltip'
+  import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
+/*
+  const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+  const TooltipOverlayStyle = {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+  };
+*/
+
+  export default {
+    name: 'Ellipsis',
+    components: {
+      Tooltip
+    },
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-ellipsis'
+      },
+      tooltip: {
+        type: Boolean
+      },
+      length: {
+        type: Number,
+        required: true
+      },
+      lines: {
+        type: Number,
+        default: 1
+      },
+      fullWidthRecognition: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      getStrDom (str) {
+        return (
+          <span>{ cutStrByFullLength(str, this.length) + '...' }</span>
+        )
+      },
+      getTooltip ( fullStr) {
+        return (
+          <Tooltip>
+            <template slot="title">{ fullStr }</template>
+            { this.getStrDom(fullStr) }
+          </Tooltip>
+        )
+      }
+    },
+    render () {
+      const { tooltip, length } = this.$props
+      let str = this.$slots.default.map(vNode => vNode.text).join("")
+      const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str);
+      return (
+        strDom
+      )
+    }
+  }
+</script>
\ No newline at end of file

src/components/Ellipsis/index.js

+import Ellipsis from './Ellipsis'
+
+export default Ellipsis
\ No newline at end of file

src/components/NumberInfo/NumberInfo.vue

+<template>
+  <div :class="[prefixCls]">
+    <slot name="subtitle">
+      <div :class="[`${prefixCls}-subtitle`]">{{ typeof subTitle === 'string' ? subTitle : subTitle() }}</div>
+    </slot>
+    <div class="number-info-value">
+      <span>{{ total }}</span>
+      <span class="sub-total">
+        {{ subTotal }}
+        <icon :type="`caret-${status}`" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Icon from 'ant-design-vue/es/icon'
+
+  export default {
+    name: 'NumberInfo',
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-number-info'
+      },
+      total: {
+        type: Number,
+        required: true
+      },
+      subTotal: {
+        type: Number,
+        required: true
+      },
+      subTitle: {
+        type: [String, Function],
+        default: ''
+      },
+      status: {
+        type: String,
+        default: 'up'
+      }
+    },
+    components: {
+      Icon
+    },
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>
\ No newline at end of file

src/components/NumberInfo/index.js

+import NumberInfo from './NumberInfo'
+
+export default NumberInfo
\ No newline at end of file

src/components/NumberInfo/index.less

+@import "../index";
+
+@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info";
+
+.@{numberInfo-prefix-cls} {
+
+  .ant-pro-number-info-subtitle {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    height: 22px;
+    line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  .number-info-value {
+    margin-top: 4px;
+    font-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+
+    & > span {
+      color: @heading-color;
+      display: inline-block;
+      line-height: 32px;
+      height: 32px;
+      font-size: 24px;
+      margin-right: 32px;
+    }
+
+    .sub-total {
+      color: @text-color-secondary;
+      font-size: @font-size-lg;
+      vertical-align: top;
+      margin-right: 0;
+      i {
+        font-size: 12px;
+        transform: scale(0.82);
+        margin-left: 4px;
+      }
+      :global {
+        .anticon-caret-up {
+          color: @red-6;
+        }
+        .anticon-caret-down {
+          color: @green-6;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/Trend/Trend.vue

+<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>
\ No newline at end of file

src/components/Trend/index.js

+import Trend from './Trend.vue'
+
+export default Trend
\ No newline at end of file

src/components/Trend/index.less

+@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;
+  }
+}
\ No newline at end of file

src/components/_util/StringUtil.js

+
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1
+    }
+    return pre + 2
+  }, 0)
+
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1
+    } else {
+      showLength += 2
+    }
+    if (showLength <= maxLength) {
+      return pre + cur
+    }
+    return pre
+  }, '')
+}
\ No newline at end of file

src/components/_util/util.js

+/**
+ * components util
+ */
+
+/**
+ * 清理空值，对象
+ * @param children
+ * @returns {*[]}
+ */
+export function filterEmpty (children = []) {
+  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+}
\ No newline at end of file

src/components/index.less

+@import "~ant-design-vue/lib/style/index";
+
+// The prefix to use on all css classes from ant-pro.
+@ant-pro-prefix             : ant-pro;
\ No newline at end of file

src/config/router.config.js

-import { UserLayout, BasicLayout, RouteView, PageView } from '@/components/layouts'
+import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
 
 export const asyncRouterMap = [
 
@@ -314,6 +314,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

 <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 style="margin-top: 1rem">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 style="margin-bottom: 3rem">
+
+      <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>
+
+    <h2># AvatarList 组件 </h2>
+
+    <a-divider> AvatarList </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <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>
+
+      <a-divider type="vertical" style="margin: 0 16px" />
+
+      <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>
+    </a-card>
+
+    <h2># CountDown 组件 </h2>
+
+    <a-divider> CountDown </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <count-down
+        style="font-size: 2rem"
+        :target="new Date().getTime() + 3000000"
+        :on-end="onEndHandle">
+      </count-down>
+
+      <a-divider type="vertical" style="margin: 0 16px" />
+
+      <count-down
+        style="font-size: 2rem"
+        :target="new Date().getTime() + 10000"
+        :on-end="onEndHandle2">
+      </count-down>
+    </a-card>
+
+    <h2># Ellipsis 组件 </h2>
+
+    <a-divider> Ellipsis </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <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>
+    </a-card>
+
+    <h2># NumberInfo 组件 </h2>
+
+    <a-divider> NumberInfo </a-divider>
+    <a-card>
+      <number-info
+        :sub-title="() => { return 'Visits this week' }"
+        :total="12321"
+        status="up"
+        :sub-total="17.1"></number-info>
+    </a-card>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+  // @ is an alias to /src
+
+  import Trend from '@/components/Trend'
+  import AvatarList from '@/components/AvatarList'
+  import CountDown from '@/components/CountDown/CountDown'
+  import Ellipsis from '@/components/Ellipsis'
+  import NumberInfo from '@/components/NumberInfo'
+
+  const AvatarListItem = AvatarList.AvatarItem
 
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
+  export default {
+    name: 'Home',
+    components: {
+      NumberInfo,
+      Ellipsis,
+      CountDown,
+      Trend,
+      AvatarList,
+      AvatarListItem
+    },
+    data () {
+      return {
+        targetTime: new Date().getTime() + 3900000
+      }
+    },
+    methods: {
+      onEndHandle () {
+        this.$message.success('CountDown callback!!!')
+      },
+      onEndHandle2 () {
+        this.$notification.open({
+          message: 'Notification Title',
+          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+        });
+      }
+    }
   }
-}
 </script>
+
+<style scoped>
+  .home {
+    width: 900px;
+    margin: 0 auto;
+    padding: 25px 0;
+  }
+  .home > .banner {
+    text-align: center;
+    padding: 25px 0;
+    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>
@@ -44,8 +50,14 @@
             <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
           </div>
           <template slot="footer">
-            <trend style="margin-right: 16px;" term="同周比" :percentage="12" :type="true" :fixed="0" />
-            <trend term="日环比" :target="80" :value="78" :fixed="0" />
+            <trend flag="down" style="margin-right: 16px;">
+              <span slot="term">同周比</span>
+              12%
+            </trend>
+            <trend flag="up">
+              <span slot="term">日环比</span>
+              80%
+            </trend>
           </template>
         </chart-card>
       </a-col>
@@ -141,7 +153,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++) {