XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Timothy Yin
2025-01-12 13:19:22 +08:00
parent 4294d400fc
commit eac05f8e2b
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pages/generation/avatar-models.vue
View File

@@ -66,11 +66,20 @@ const columns = [
<div class="p-4"> <div class="p-4">
<div v-if="data_layout === 'grid'" class="grid grid-cols-7 gap-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" <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" /> <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"> <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> <UBadge color="white" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
</div> </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> </div>
<div v-else> <div v-else>