feat(avatar-management): 为头像模型添加下载图片功能

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>