318 lines
9.3 KiB
Vue
318 lines
9.3 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 toast = useToast()
|
|
|
|
const page = ref(1)
|
|
|
|
const isRealOpen = computed(() => props.isOpen)
|
|
|
|
const sourceTypeList = [
|
|
{ label: 'xsh_wm', value: 1, color: 'info' }, // 万木（腾讯）
|
|
{ label: 'xsh_zy', value: 2, color: 'success' }, // XSH 自有
|
|
{ label: 'xsh_fh', value: 3, color: 'warning' }, // 硅基（泛化数字人）
|
|
{ label: 'xsh_bb', value: 4, color: 'primary' }, // 百度小冰
|
|
]
|
|
// const sourceType = ref(sourceTypeList[0])
|
|
|
|
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 {
|
|
emit('close')
|
|
}
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
if (selectedDigitalHumans.value.length === 0) {
|
|
toast.add({
|
|
title: '请选择数字人',
|
|
description: '请至少选择一个数字人',
|
|
color: 'error',
|
|
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,
|
|
// source_type: sourceType.value.value,
|
|
}),
|
|
{
|
|
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,
|
|
// source_type: sourceType.value.value,
|
|
}),
|
|
{
|
|
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
|
|
v-model:open="isRealOpen"
|
|
:ui="{ content: 'w-full sm:max-w-3xl' }"
|
|
@close="handleClose"
|
|
>
|
|
<template #content>
|
|
<UCard>
|
|
<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="neutral"
|
|
icon="i-tabler-x"
|
|
variant="ghost"
|
|
@click="handleClose"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<UTabs
|
|
v-model="tabIndex"
|
|
:items="tabItems"
|
|
>
|
|
<template #content="{ item }">
|
|
<div class="grid w-full grid-cols-3 gap-4 sm:grid-cols-5">
|
|
<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 w-full cursor-pointer select-none flex-col items-center justify-center gap-2 overflow-hidden rounded-md border bg-white transition-all duration-150 dark:border-2 dark:bg-neutral-800"
|
|
@click="
|
|
!disabledDigitalHumanIds.includes(d.model_id)
|
|
? handleSelectClick(d)
|
|
: void 0
|
|
"
|
|
>
|
|
<div
|
|
v-if="disabledDigitalHumanIds.includes(d.model_id)"
|
|
class="absolute inset-0 z-10 cursor-not-allowed bg-neutral-400/50 dark:bg-neutral-700/50"
|
|
></div>
|
|
<div
|
|
:class="{
|
|
'bg-primary-50': selectedDigitalHumans.includes(d),
|
|
}"
|
|
class="relative aspect-square w-full overflow-hidden border-b bg-neutral-100 object-cover transition-all duration-150 dark:border-neutral-700 dark:bg-neutral-800"
|
|
>
|
|
<NuxtImg
|
|
:src="d.avatar"
|
|
class="-translate-y-4"
|
|
/>
|
|
<UIcon
|
|
v-if="selectedDigitalHumans.includes(d)"
|
|
class="text-primary absolute right-1 top-1 text-lg"
|
|
name="i-tabler-check"
|
|
/>
|
|
<UIcon
|
|
v-if="disabledDigitalHumanIds.includes(d.model_id)"
|
|
class="absolute right-1 top-1 text-lg text-red-500"
|
|
name="tabler:user-off"
|
|
/>
|
|
<template
|
|
v-for="(t, i) in sourceTypeList"
|
|
:key="i"
|
|
>
|
|
<UBadge
|
|
v-if="t.value === d.type"
|
|
class="absolute bottom-1 right-1"
|
|
size="xs"
|
|
variant="subtle"
|
|
:color="t.color as any"
|
|
:label="t.label"
|
|
/>
|
|
</template>
|
|
</div>
|
|
<div class="flex w-full flex-col gap-1 px-2 pb-2">
|
|
<div class="flex items-center justify-between">
|
|
<span
|
|
class="line-clamp-1 text-sm font-medium text-neutral-800 dark:text-neutral-300"
|
|
>
|
|
{{ d.name }}
|
|
</span>
|
|
<span
|
|
class="text-xs font-medium text-neutral-300 dark:text-neutral-500"
|
|
>
|
|
ID:{{ d.digital_human_id || d.id }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<!-- <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium">
|
|
选择来源:
|
|
</span>
|
|
<USelectMenu
|
|
v-model="sourceType"
|
|
:options="sourceTypeList.map(i => ({ label: i.label, value: i.value }))"
|
|
@change="page = 1"
|
|
/> -->
|
|
</div>
|
|
<UPagination
|
|
v-if="
|
|
(item.key === 'user'
|
|
? userDigitalList?.data.total || 0
|
|
: systemDigitalList?.data.total || 0) > 0
|
|
"
|
|
v-model:page="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 items-center justify-between">
|
|
<div>
|
|
<p class="select-none text-xs font-medium opacity-50">
|
|
如果没有出现您的数字人，请联系管理员开通
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<UButton
|
|
color="neutral"
|
|
label="取消"
|
|
variant="ghost"
|
|
@click="handleClose"
|
|
/>
|
|
<UButton
|
|
color="primary"
|
|
label="选择"
|
|
variant="solid"
|
|
@click="handleSubmit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</template>
|
|
</UModal>
|
|
</template>
|
|
|
|
<style scoped></style>
|