244 lines
7.2 KiB
Vue
244 lines
7.2 KiB
Vue
<script lang="ts" setup>
|
||
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
||
|
||
const props = defineProps({
|
||
isOpen: {
|
||
type: Boolean,
|
||
required: false,
|
||
},
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
disabledDigitalHumanIds: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
defaultTab: {
|
||
type: String as PropType<'user' | 'system'>,
|
||
default: 'user',
|
||
},
|
||
})
|
||
|
||
const emit = defineEmits({
|
||
close: () => true,
|
||
select: (digitalHumans: DigitalHumanItem | DigitalHumanItem[]) => digitalHumans,
|
||
})
|
||
|
||
const loginState = useLoginState()
|
||
const modal = useModal()
|
||
const toast = useToast()
|
||
|
||
const page = ref(1)
|
||
|
||
const selectedDigitalHumans = ref<DigitalHumanItem[]>([])
|
||
const handleSelectClick = (item: DigitalHumanItem) => {
|
||
// 如果点击的项目已经在已选列表中，则移除；否则添加
|
||
if (selectedDigitalHumans.value.includes(item)) {
|
||
selectedDigitalHumans.value = selectedDigitalHumans.value.filter(d => d !== item)
|
||
} else {
|
||
selectedDigitalHumans.value = props.multiple ? [...selectedDigitalHumans.value, item] : [item]
|
||
}
|
||
}
|
||
|
||
const handleClose = () => {
|
||
selectedDigitalHumans.value = []
|
||
if (props.isOpen) {
|
||
emit('close')
|
||
} else {
|
||
modal.close()
|
||
}
|
||
}
|
||
|
||
const handleSubmit = () => {
|
||
if (selectedDigitalHumans.value.length === 0) {
|
||
toast.add({
|
||
title: '请选择数字人',
|
||
description: '请至少选择一个数字人',
|
||
color: 'red',
|
||
icon: 'i-tabler-circle-x',
|
||
})
|
||
return
|
||
}
|
||
emit('select', props.multiple ? selectedDigitalHumans.value : selectedDigitalHumans.value[0])
|
||
handleClose()
|
||
setTimeout(() => {
|
||
page.value = 1
|
||
}, 300)
|
||
}
|
||
|
||
const tabItems = [{
|
||
key: 'user',
|
||
label: '我的数字人',
|
||
icon: 'i-tabler-user',
|
||
}]
|
||
const tabIndex = ref(0)
|
||
|
||
watch(tabIndex, () => {
|
||
page.value = 1
|
||
})
|
||
|
||
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: page.value,
|
||
perpage: 15,
|
||
},
|
||
),
|
||
{
|
||
watch: [page],
|
||
},
|
||
)
|
||
|
||
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: page.value,
|
||
perpage: 15,
|
||
},
|
||
),
|
||
{
|
||
watch: [page],
|
||
},
|
||
)
|
||
|
||
onMounted(() => {
|
||
if (loginState.user.auth_code === 2) {
|
||
tabItems.push({
|
||
key: 'system',
|
||
label: '系统数字人',
|
||
icon: 'i-tabler-user-star',
|
||
})
|
||
nextTick(() => {
|
||
tabIndex.value = tabItems.findIndex(i => i.key === props.defaultTab)
|
||
console.log('tabIndex', tabIndex.value)
|
||
})
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<UModal
|
||
:model-value="isOpen"
|
||
:ui="{ width: 'w-full sm:max-w-3xl' }"
|
||
@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
|
||
v-model="tabIndex"
|
||
:items="tabItems"
|
||
>
|
||
<template #item="{ item }">
|
||
<div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||
<div
|
||
v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
|
||
:key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
|
||
:class="{
|
||
'border-primary shadow-md': selectedDigitalHumans.includes(d),
|
||
'border-neutral-200 dark:border-neutral-700': !selectedDigitalHumans.includes(d),
|
||
}"
|
||
class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
|
||
@click="!disabledDigitalHumanIds.includes(d.model_id) ? handleSelectClick(d) : void 0"
|
||
>
|
||
<div
|
||
v-if="disabledDigitalHumanIds.includes(d.model_id)"
|
||
class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
|
||
></div>
|
||
<div
|
||
:class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
|
||
class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
|
||
>
|
||
<NuxtImg :src="d.avatar" class="-translate-y-4"/>
|
||
<UIcon
|
||
v-if="selectedDigitalHumans.includes(d)"
|
||
class="absolute top-1 right-1 text-lg text-primary"
|
||
name="i-tabler-check"
|
||
/>
|
||
<UIcon
|
||
v-if="disabledDigitalHumanIds.includes(d.model_id)"
|
||
class="absolute top-1 right-1 text-lg text-red-500"
|
||
name="tabler:user-off"
|
||
/>
|
||
</div>
|
||
<div class="w-full flex flex-col gap-1 px-2 pb-2">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1">
|
||
{{ d.name }}
|
||
</span>
|
||
<span class="text-xs text-neutral-300 dark:text-neutral-500 font-medium">
|
||
ID:{{ d.digital_human_id || d.id }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-end">
|
||
<UPagination
|
||
v-if="(item.key === 'user' ? (userDigitalList?.data.total || 0) : (systemDigitalList?.data.total || 0)) > 0"
|
||
v-model="page"
|
||
:page-count="15"
|
||
:total="item.key === 'user' ? (userDigitalList?.data.total || 0) : (systemDigitalList?.data.total || 0)"
|
||
class="pt-4"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</UTabs>
|
||
|
||
<template #footer>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-xs font-medium opacity-50 select-none">
|
||
如果没有出现您的数字人，请联系管理员开通
|
||
</p>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<UButton
|
||
color="gray"
|
||
label="取消"
|
||
variant="ghost"
|
||
@click="handleClose"
|
||
/>
|
||
<UButton
|
||
color="primary"
|
||
label="选择"
|
||
variant="solid"
|
||
@click="handleSubmit"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</UCard>
|
||
</UModal>
|
||
</template>
|
||
|
||
<style scoped>
|
||
</style> |