105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
const loginState = useLoginState()
|
|
|
|
const data_layout = ref<'grid' | 'list'>('grid')
|
|
const pagination = reactive({
|
|
page: 1,
|
|
pageSize: 15,
|
|
})
|
|
|
|
const {
|
|
data: userAvatarList,
|
|
status: userAvatarStatus,
|
|
} = useAsyncData(
|
|
'user-digital-human',
|
|
() => useFetchWrapped<req.gen.DigitalHumanList & AuthedRequest, BaseResponse<PagedData<DigitalHumanItem>>>(
|
|
'App.User_UserDigital.GetList',
|
|
{
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
page: pagination.page,
|
|
perpage: pagination.pageSize,
|
|
},
|
|
),
|
|
{
|
|
watch: [pagination],
|
|
},
|
|
)
|
|
|
|
const columns = [
|
|
{
|
|
key: 'avatar',
|
|
label: '图片',
|
|
},
|
|
{
|
|
key: 'name',
|
|
label: '名称',
|
|
},
|
|
{
|
|
key: 'model_id',
|
|
label: 'ID',
|
|
},
|
|
{
|
|
key: 'description',
|
|
label: '备注',
|
|
},
|
|
{
|
|
key: 'actions',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<LoginNeededContent>
|
|
<div class="h-full">
|
|
<div class="p-4 pb-0">
|
|
<BubbleTitle title="数字讲师管理" subtitle="Avatars">
|
|
<template #action>
|
|
<UButton :icon="data_layout === 'grid' ? 'tabler:layout-list' : 'tabler:layout-grid'" variant="soft"
|
|
color="gray" @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
|
|
:label="data_layout === 'grid' ? '列表视图' : '宫格视图'" />
|
|
</template>
|
|
</BubbleTitle>
|
|
<GradientDivider />
|
|
</div>
|
|
<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]">
|
|
<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>
|
|
</div>
|
|
<div v-else>
|
|
<div class="flex flex-col gap-4">
|
|
<pre>{{ userAvatarList?.data.items }}</pre>
|
|
<UTable :rows="userAvatarList?.data.items" :columns="columns" :loading="userAvatarStatus === 'pending'"
|
|
:progress="{ color: 'amber', animation: 'carousel' }" class="border dark:border-neutral-800 rounded-md">
|
|
<template #avatar-data="{ row }">
|
|
<NuxtImg :src="row.avatar" class="h-16 aspect-[9/16] rounded-lg" />
|
|
</template>
|
|
<template #actions-data="{ row }">
|
|
<div class="flex gap-2">
|
|
<UButton color="gray" icon="tabler:download" label="下载图片" variant="soft" size="xs" @click="() => {
|
|
const { download } = useDownload(row.avatar, `数字人_${row.name}.png`)
|
|
download()
|
|
}" />
|
|
</div>
|
|
</template>
|
|
</UTable>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<UPagination v-model="pagination.page" :max="9" :page-count="pagination.pageSize"
|
|
:total="userAvatarList?.data.total || 0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LoginNeededContent>
|
|
</template>
|
|
|
|
<style scoped></style>
|