refactor(deps): migrate to nuxt v4
This commit is contained in:
317
app/components/ModalDigitalHumanSelect.vue
Normal file
317
app/components/ModalDigitalHumanSelect.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<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 sourceTypeList = [
|
||||
{ label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
|
||||
{ label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
|
||||
{ label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
|
||||
{ label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
|
||||
]
|
||||
// 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 {
|
||||
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,
|
||||
// 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
|
||||
: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"
|
||||
/>
|
||||
<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"
|
||||
:label="t.label"
|
||||
/>
|
||||
</template>
|
||||
</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-between items-end">
|
||||
<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-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>
|
||||
Reference in New Issue
Block a user