From 1b5b0f4736ef002fd7d646f635088c62548dc639 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 19 Dec 2024 14:49:36 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9C=80=E5=A4=A7=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84=E5=A4=B4=E5=83=8F=E6=95=B0=E9=87=8F=20=E8=B6=85?=
 =?UTF-8?q?=E8=BF=87=E6=98=BE=E7=A4=BA=E4=B8=BA=E7=9C=81=E7=95=A5=E5=8F=B7?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflow/components/copy-component.vue    | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/copy-component.vue b/apps/web-antd/src/views/workflow/components/copy-component.vue
index 6f199f47..3a94d235 100644
--- a/apps/web-antd/src/views/workflow/components/copy-component.vue
+++ b/apps/web-antd/src/views/workflow/components/copy-component.vue
@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import type { User } from '#/api/system/user/model';
 
-import type { PropType } from 'vue';
+import { computed, type PropType } from 'vue';
 
 import { useVbenModal, VbenAvatar } from '@vben/common-ui';
 
@@ -15,6 +15,13 @@ defineOptions({
   inheritAttrs: false,
 });
 
+const props = withDefaults(defineProps<{ ellipseNumber?: number }>(), {
+  /**
+   * 最大显示的头像数量 超过显示为省略号头像
+   */
+  ellipseNumber: 3,
+});
+
 const emit = defineEmits<{ finish: [User[]] }>();
 
 const [UserSelectModal, modalApi] = useVbenModal({
@@ -37,13 +44,17 @@ function handleFinish(userList: User[]) {
   userListModel.value.push(...userList);
   emit('finish', userList);
 }
+
+const displayedList = computed(() => {
+  return userListModel.value.slice(0, props.ellipseNumber);
+});
 </script>
 
 <template>
   <div class="flex items-center gap-2">
-    <AvatarGroup v-if="userListModel.length > 0" class="flex-wrap">
+    <AvatarGroup v-if="userListModel.length > 0">
       <Tooltip
-        v-for="user in userListModel"
+        v-for="user in displayedList"
         :key="user.userId"
         :title="user.nickName"
         placement="top"
@@ -51,11 +62,22 @@ function handleFinish(userList: User[]) {
         <div>
           <VbenAvatar
             :alt="user.nickName"
-            class="bg-primary size-[36px] rounded-full border text-white"
+            class="bg-primary size-[36px] cursor-pointer rounded-full border text-white"
             src=""
           />
         </div>
       </Tooltip>
+      <Tooltip
+        :title="`等${userListModel.length - props.ellipseNumber}人`"
+        placement="top"
+      >
+        <Avatar
+          v-if="userListModel.length > ellipseNumber"
+          class="bg-primary flex size-[36px] cursor-pointer items-center justify-center rounded-full border text-white"
+        >
+          ...
+        </Avatar>
+      </Tooltip>
     </AvatarGroup>
     <a-button size="small" @click="handleOpen">选择人员</a-button>
     <UserSelectModal @finish="handleFinish" />