draft: 2d digital human selector
This commit is contained in:
195
components/ModalDigitalHumanSelect.vue
Normal file
195
components/ModalDigitalHumanSelect.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script lang="ts" setup>
|
||||
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits({
|
||||
close: () => true,
|
||||
select: (value: DigitalHumanItem) => value,
|
||||
})
|
||||
|
||||
const loginState = useLoginState()
|
||||
const modal = useModal()
|
||||
const toast = useToast()
|
||||
|
||||
const selectedDigitalHumans = ref<DigitalHumanItem[]>([])
|
||||
const handleSelectClick = (item: DigitalHumanItem) => {
|
||||
if (props.multiple) {
|
||||
if (selectedDigitalHumans.value.includes(item)) {
|
||||
selectedDigitalHumans.value = selectedDigitalHumans.value.filter(d => d !== item)
|
||||
} else {
|
||||
selectedDigitalHumans.value.push(item)
|
||||
}
|
||||
} else {
|
||||
selectedDigitalHumans.value = [item]
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
if (props.isOpen) {
|
||||
emit('close')
|
||||
} else {
|
||||
modal.close()
|
||||
}
|
||||
}
|
||||
|
||||
const tabItems = [{
|
||||
key: 'user',
|
||||
label: '用户数字人',
|
||||
icon: 'i-tabler-user',
|
||||
}, {
|
||||
key: 'system',
|
||||
label: '系统数字人',
|
||||
icon: 'i-tabler-user-star',
|
||||
}]
|
||||
|
||||
const {
|
||||
data: userDigitalList,
|
||||
} = 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: 1,
|
||||
perpage: 20,
|
||||
},
|
||||
),
|
||||
{
|
||||
transform: res => {
|
||||
if (res.ret !== 200) {
|
||||
toast.add({
|
||||
title: '获取数字人列表失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return []
|
||||
}
|
||||
return res?.data.items || []
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const {
|
||||
data: systemDigitalList,
|
||||
} = useAsyncData(
|
||||
'system-digital-human',
|
||||
() => useFetchWrapped<req.gen.DigitalHumanList & AuthedRequest, BaseResponse<PagedData<DigitalHumanItem>>>(
|
||||
'App.Digital_Human.GetList',
|
||||
{
|
||||
token: loginState.token!,
|
||||
user_id: loginState.user.id,
|
||||
to_user_id: loginState.user.id,
|
||||
page: 1,
|
||||
perpage: 20,
|
||||
},
|
||||
),
|
||||
{
|
||||
transform: res => {
|
||||
if (res.ret !== 200) {
|
||||
toast.add({
|
||||
title: '获取系统数字人列表失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return []
|
||||
}
|
||||
return res?.data.items || []
|
||||
},
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal
|
||||
:model-value="isOpen"
|
||||
:ui="{ width: 'w-full sm:max-w-4xl' }"
|
||||
@close="handleClose"
|
||||
>
|
||||
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
数字人选择器
|
||||
</h3>
|
||||
<UButton
|
||||
class="-my-1"
|
||||
color="gray"
|
||||
icon="i-tabler-x"
|
||||
variant="ghost"
|
||||
@click="handleClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div v-if="item.key === 'user'" class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="(d, i) in userDigitalList"
|
||||
:key="`user-digital-${d.model_id}`" class="relative overflow-hidden w-full aspect-[10/16] bg-white rounded-md shadow-md transition-all ring-2 ring-primary-400"
|
||||
@click="handleSelectClick(d)"
|
||||
>
|
||||
<div class="absolute w-full h-full -top-[35%] -left-[15%] rotate-[60deg] bg-primary-400"></div>
|
||||
<div class="absolute left-0 bottom-[44%] rotate-[-30deg]">
|
||||
<span class="text-xs text-white font-semibold">{{ d.description }}</span>
|
||||
</div>
|
||||
<div class="absolute left-1 bottom-[34%] rotate-[-30deg]">
|
||||
<span class="text-lg text-primary font-semibold">{{ d.name }}</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 rounded-tr bg-primary-400 px-1 pb-1">
|
||||
<span class="text-xs text-white leading-none font-black">·SELECTED·</span>
|
||||
</div>
|
||||
<NuxtImg :src="d.avatar" class="absolute bottom-0 -right-7 h-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.key === 'system'">
|
||||
system
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-xs font-medium opacity-50">
|
||||
如果没有出现您的数字人，请联系管理员开通
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<UButton
|
||||
color="gray"
|
||||
label="取消"
|
||||
variant="ghost"
|
||||
@click="handleClose"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
label="选择"
|
||||
type="submit"
|
||||
variant="solid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user