From eac05f8e2b60789cab6e359f8945678c5c7e5d64 Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Sun, 12 Jan 2025 13:19:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(avatar-management):=20=E4=B8=BA=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E6=A8=A1=E5=9E=8B=E6=B7=BB=E5=8A=A0=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/generation/avatar-models.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/pages/generation/avatar-models.vue b/pages/generation/avatar-models.vue
index 3e3d5a7..fc670a9 100644
--- a/pages/generation/avatar-models.vue
+++ b/pages/generation/avatar-models.vue
@@ -66,11 +66,20 @@ const columns = [
       <div class="p-4">
         <div v-if="data_layout === 'grid'" class="grid grid-cols-7 gap-4">
           <div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
-            class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16]">
+            class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16] group">
             <NuxtImg :src="avatar.avatar" class="w-full h-full object-cover" />
             <div class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent">
               <UBadge color="white" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
             </div>
+            <div
+              class="absolute inset-0 flex justify-center items-center bg-white/50 opacity-0 group-hover:opacity-100 transition-opacity">
+              <UButtonGroup>
+                <UButton color="gray" icon="tabler:download" label="下载图片" variant="soft" @click="() => {
+                  const { download } = useDownload(avatar.avatar, `数字人_${avatar.name}.png`)
+                  download()
+                }"></UButton>
+              </UButtonGroup>
+            </div>
           </div>
         </div>
         <div v-else>