refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面
This commit is contained in:
@@ -27,16 +27,17 @@ const emit = defineEmits({
|
||||
})
|
||||
|
||||
const loginState = useLoginState()
|
||||
const modal = useModal()
|
||||
const toast = useToast()
|
||||
|
||||
const page = ref(1)
|
||||
|
||||
const isRealOpen = computed(() => props.isOpen)
|
||||
|
||||
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' }, // 百度小冰
|
||||
{ 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])
|
||||
|
||||
@@ -59,7 +60,7 @@ const handleClose = () => {
|
||||
if (props.isOpen) {
|
||||
emit('close')
|
||||
} else {
|
||||
modal.close()
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,7 +69,7 @@ const handleSubmit = () => {
|
||||
toast.add({
|
||||
title: '请选择数字人',
|
||||
description: '请至少选择一个数字人',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -77,7 +78,7 @@ const handleSubmit = () => {
|
||||
'select',
|
||||
props.multiple
|
||||
? selectedDigitalHumans.value
|
||||
: selectedDigitalHumans.value[0]
|
||||
: selectedDigitalHumans.value[0]!
|
||||
)
|
||||
handleClose()
|
||||
setTimeout(() => {
|
||||
@@ -153,113 +154,111 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<UModal
|
||||
:model-value="isOpen"
|
||||
:ui="{ width: 'w-full sm:max-w-3xl' }"
|
||||
v-model:open="isRealOpen"
|
||||
:ui="{ content: '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
|
||||
"
|
||||
<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-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"
|
||||
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
|
||||
"
|
||||
>
|
||||
<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
|
||||
<div
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<UBadge
|
||||
v-if="t.value === d.type"
|
||||
class="absolute bottom-1 right-1"
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
:color="t.color"
|
||||
:label="t.label"
|
||||
<NuxtImg
|
||||
:src="d.avatar"
|
||||
class="-translate-y-4"
|
||||
/>
|
||||
</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"
|
||||
<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"
|
||||
>
|
||||
{{ d.name }}
|
||||
</span>
|
||||
<span
|
||||
class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
|
||||
>
|
||||
ID:{{ d.digital_human_id || d.id }}
|
||||
</span>
|
||||
<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>
|
||||
<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">
|
||||
<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
|
||||
@@ -267,50 +266,51 @@ onMounted(() => {
|
||||
: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>
|
||||
<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>
|
||||
</UCard>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user