From 9f244f371920f1d40ebcbe6e0ec8d8a336e2469e Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Mon, 6 Aug 2018 16:30:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EAvatarList=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/detail/BasicDetail.vue         | 23 ++++++
 .../list/Search/ApplicationList.vue           | 25 +++++--
 src/components/list/Search/ProjectList.vue    | 13 +++-
 src/components/tool/AvatarList.vue            | 74 +++++++++++++++++++
 src/router/index.js                           |  3 +-
 5 files changed, 130 insertions(+), 8 deletions(-)
 create mode 100644 src/components/detail/BasicDetail.vue
 create mode 100644 src/components/tool/AvatarList.vue

diff --git a/src/components/detail/BasicDetail.vue b/src/components/detail/BasicDetail.vue
new file mode 100644
index 0000000..85b7e18
--- /dev/null
+++ b/src/components/detail/BasicDetail.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <a-card :bordered="false">
+      <a-tooltip slot="title" title="test" >
+        <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
+      </a-tooltip>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import ACard from 'vue-antd-ui/es/card/Card'
+import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+export default {
+  name: 'BasicDetail',
+  components: {AAvatar, ATooltip, ACard}
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/list/Search/ApplicationList.vue b/src/components/list/Search/ApplicationList.vue
index fe3e684..8ea5331 100644
--- a/src/components/list/Search/ApplicationList.vue
+++ b/src/components/list/Search/ApplicationList.vue
@@ -21,6 +21,11 @@
             </a-tooltip>
             <a-dropdown class="tool">
               <a-icon type="ellipsis" />
+              <a-menu slot="overlay">
+                <a-menu-item>1 item</a-menu-item>
+                <a-menu-item>2 item</a-menu-item>
+                <a-menu-item>3 item</a-menu-item>
+              </a-menu>
             </a-dropdown>
           </ul>
           <div class="content">
@@ -49,9 +54,13 @@ import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
 import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
 import AIcon from 'vue-antd-ui/es/icon/icon'
 import ADropdown from 'vue-antd-ui/es/dropdown'
+import AMenu from 'vue-antd-ui/es/menu/index'
+
+const AMenuItem = AMenu.Item
+
 export default {
   name: 'ApplicationList',
-  components: {ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
+  components: {AMenuItem, AMenu, ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
 }
 </script>
 
@@ -99,16 +108,22 @@ export default {
     list-style: none;
     margin: 0;
     padding: 0;
-    height: 38px;
+    height: 47px;
     .tool{
       width: 25%;
       float: left;
       text-align: center;
       margin: 12px 0;
       color: rgba(0,0,0,.45);
-    }
-    .tool:not(:last-child) {
-      border-right: 1px solid #e8e8e8;
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 22px;
+      &:hover{
+        color: #1890ff;
+      }
+      &:not(:last-child) {
+        border-right: 1px solid #e8e8e8;
+      }
     }
   }
 </style>
diff --git a/src/components/list/Search/ProjectList.vue b/src/components/list/Search/ProjectList.vue
index ec36f29..bcfd013 100644
--- a/src/components/list/Search/ProjectList.vue
+++ b/src/components/list/Search/ProjectList.vue
@@ -14,7 +14,11 @@
           </a-card-meta>
           <div class="content">
             <span>4小时前</span>
-            <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
+            <avatar-list>
+              <avatar-list-item size="small" tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
+              <avatar-list-item size="small" tips="周星星" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png" />
+              <avatar-list-item size="small" tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png" />
+            </avatar-list>
           </div>
         </a-card>
       </a-list-item>
@@ -29,9 +33,14 @@ import AList from 'vue-antd-ui/es/list'
 import AListItem from 'vue-antd-ui/es/list/Item'
 import ACardMeta from 'vue-antd-ui/es/card/Meta'
 import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import AvatarList from '../../tool/AvatarList'
+import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
+
+const AvatarListItem = AvatarList.Item
+
 export default {
   name: 'ProjectList',
-  components: {AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
+  components: {ATooltip, AvatarListItem, AvatarList, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
 }
 </script>
 
diff --git a/src/components/tool/AvatarList.vue b/src/components/tool/AvatarList.vue
new file mode 100644
index 0000000..3e35e81
--- /dev/null
+++ b/src/components/tool/AvatarList.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="avatar-list">
+    <ul>
+      <slot>
+      </slot>
+    </ul>
+  </div>
+</template>
+
+<script>
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
+const Item = {
+  name: 'AvatarListItem',
+  props: {
+    size: {
+      type: String,
+      required: false,
+      default: 'small'
+    },
+    src: {
+      type: String,
+      required: true
+    },
+    tips: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    renderAvatar (h, size, src) {
+      return h(AAvatar, {props: {size: size, src: src}}, [])
+    }
+  },
+  render (h) {
+    const avatar = this.renderAvatar(h, this.$props.size, this.$props.src)
+    return h(
+      'li',
+      {class: 'avatar-item'},
+      [!this.$props.tips ? h(ATooltip, {props: {title: this.$props.tips}}, [avatar]) : avatar]
+    )
+  }
+}
+export default {
+  name: 'AvatarList',
+  components: {ATooltip},
+  Item: Item
+}
+</script>
+
+<style lang="less">
+  .avatar-list {
+    display: inline-block;
+    ul {
+      display: inline-block;
+      margin-left: 8px;
+      font-size: 0;
+      .avatar-item {
+        display: inline-block;
+        font-size: 14px;
+        margin-left: -8px;
+        width: 20px;
+        height: 20px;
+        :global {
+          .ant-avatar {
+            border: 1px solid #fff;
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index a7ddb12..d346f1e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,6 +22,7 @@ import ApplicationList from '@/components/list/search/ApplicationList'
 import ProjectList from '@/components/list/search/ProjectList'
 import WorkPlace from '@/components/dashboard/WorkPlace'
 import Login from '@/components/login/Login'
+import BasicDetail from '@/components/detail/BasicDetail'
 
 Vue.use(Router)
 
@@ -149,7 +150,7 @@ export default new Router({
               path: '/detail/basic',
               name: '基础详情页',
               icon: 'none',
-              component: NotFound
+              component: BasicDetail
             },
             {
               path: '/detail/advanced',