72 lines
2.5 KiB
Vue
72 lines
2.5 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,
|
|
} = 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],
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<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="ghost"
|
|
@click="data_layout = data_layout === 'grid' ? 'list' : '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">
|
|
<div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
|
|
class="flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
|
|
<NuxtImg :src="avatar.avatar" class="w-16 h-16 rounded-lg" />
|
|
<div class="flex flex-col gap-1">
|
|
<UBadge color="gray" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
|
|
<UBadge color="gray" variant="solid" icon="tabler:user-screen">{{ avatar.model_id }}</UBadge>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</template>
|
|
|
|
<style scoped></style>
|