From 3bf28a5d4555bf2a10754474db81d70b04ee432a Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Wed, 28 Feb 2024 16:22:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=B4=E5=83=8F=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Avatars/index.ts           |  1 +
 src/components/Avatars/src/Avatars.vue    | 74 +++++++++++++++++++++--
 src/components/Avatars/src/types/index.ts |  4 ++
 src/components/Backtop/src/Backtop.vue    |  2 +-
 src/views/Components/Avatars.vue          | 44 +++++++++++++-
 5 files changed, 117 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Avatars/src/types/index.ts

diff --git a/src/components/Avatars/index.ts b/src/components/Avatars/index.ts
index 35d2129..5eaa329 100644
--- a/src/components/Avatars/index.ts
+++ b/src/components/Avatars/index.ts
@@ -1,3 +1,4 @@
 import Avatars from './src/Avatars.vue'
 
+export type { AvatarItem } from './src/types'
 export { Avatars }
diff --git a/src/components/Avatars/src/Avatars.vue b/src/components/Avatars/src/Avatars.vue
index c159068..bae1737 100644
--- a/src/components/Avatars/src/Avatars.vue
+++ b/src/components/Avatars/src/Avatars.vue
@@ -1,15 +1,79 @@
 <script setup lang="ts">
-import { ComponentSize } from 'element-plus'
-import { PropType } from 'vue'
+import { ComponentSize, ElAvatar, ElTooltip } from 'element-plus'
+import { PropType, computed } from 'vue'
+import { AvatarItem } from './types'
+import { useDesign } from '@/hooks/web/useDesign'
 
-defineProps({
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('avatars')
+
+const props = defineProps({
   size: {
-    type: String as PropType<ComponentSize>,
+    type: [String, Number] as PropType<ComponentSize | number>,
     default: ''
+  },
+  max: {
+    type: Number,
+    default: 5
+  },
+  data: {
+    type: Array as PropType<AvatarItem[]>,
+    default: () => []
+  },
+  showTooltip: {
+    type: Boolean,
+    default: true
   }
 })
+
+const filterData = computed(() => props.data.slice(0, props.max))
 </script>
 
 <template>
-  <div> 头像 </div>
+  <div :class="prefixCls" class="flex items-center">
+    <template v-for="item in filterData" :key="item.url">
+      <template v-if="showTooltip && item.name">
+        <ElTooltip :content="item.name" placement="top">
+          <ElAvatar
+            :size="size"
+            :src="item.url"
+            class="relative"
+            :style="{
+              zIndex: filterData.indexOf(item)
+            }"
+          />
+        </ElTooltip>
+      </template>
+      <template v-else>
+        <ElAvatar
+          :size="size"
+          :src="item.url"
+          class="relative"
+          :style="{
+            zIndex: filterData.indexOf(item)
+          }"
+        />
+      </template>
+    </template>
+
+    <ElAvatar
+      v-if="data.length > max"
+      :style="{
+        zIndex: data.length
+      }"
+    >
+      <span>+{{ data.length - max }}</span>
+    </ElAvatar>
+  </div>
 </template>
+
+<style scoped lang="less">
+@prefix-cls: ~'@{namespace}-avatars';
+
+.@{prefix-cls} {
+  .@{elNamespace}-avatar + .@{elNamespace}-avatar {
+    margin-left: -15px;
+  }
+}
+</style>
diff --git a/src/components/Avatars/src/types/index.ts b/src/components/Avatars/src/types/index.ts
new file mode 100644
index 0000000..c2554ee
--- /dev/null
+++ b/src/components/Avatars/src/types/index.ts
@@ -0,0 +1,4 @@
+export interface AvatarItem {
+  url: string
+  name?: string
+}
diff --git a/src/components/Backtop/src/Backtop.vue b/src/components/Backtop/src/Backtop.vue
index f5c2fc4..4619017 100644
--- a/src/components/Backtop/src/Backtop.vue
+++ b/src/components/Backtop/src/Backtop.vue
@@ -9,7 +9,7 @@ const prefixCls = getPrefixCls('backtop')
 
 <template>
   <ElBacktop
-    :class="`${prefixCls}-backtop`"
+    :class="prefixCls"
     :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
   />
 </template>
diff --git a/src/views/Components/Avatars.vue b/src/views/Components/Avatars.vue
index eefe0dd..430c758 100644
--- a/src/views/Components/Avatars.vue
+++ b/src/views/Components/Avatars.vue
@@ -1,13 +1,53 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Avatars } from '@/components/Avatars'
+import { Avatars, AvatarItem } from '@/components/Avatars'
+import { ref } from 'vue'
 
 const { t } = useI18n()
+
+const data = ref<AvatarItem[]>([
+  {
+    name: 'Lily',
+    url: 'https://avatars.githubusercontent.com/u/3459374?v=4'
+  },
+  {
+    name: 'Amanda',
+    url: 'https://avatars.githubusercontent.com/u/3459375?v=4'
+  },
+  {
+    name: 'Daisy',
+    url: 'https://avatars.githubusercontent.com/u/3459376?v=4'
+  },
+  {
+    name: 'Olivia',
+    url: 'https://avatars.githubusercontent.com/u/3459377?v=4'
+  },
+  {
+    name: 'Tina',
+    url: 'https://avatars.githubusercontent.com/u/3459378?v=4'
+  },
+  {
+    name: 'Kitty',
+    url: 'https://avatars.githubusercontent.com/u/3459323?v=4'
+  },
+  {
+    name: 'Helen',
+    url: 'https://avatars.githubusercontent.com/u/3459324?v=4'
+  },
+  {
+    name: 'Sophia',
+    url: 'https://avatars.githubusercontent.com/u/3459325?v=4'
+  },
+  {
+    name: 'Wendy',
+    url: 'https://avatars.githubusercontent.com/u/3459326?v=4'
+  }
+])
 </script>
 
 <template>
   <ContentWrap :title="t('router.avatars')" :message="t('avatarsDemo.title')">
-    <Avatars />
+    <Avatars :data="data" />
   </ContentWrap>
 </template>