XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面

Browse Source
This commit is contained in:
Timothy Yin
2026-02-10 18:07:44 +08:00
parent d0bca215c1
commit 75f1987be3
49 changed files with 4892 additions and 6599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
app/pages/generation/admin/digital-human-train.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { object, string, number } from 'yup'
import type { FormSubmitEvent } from '#ui/types'
import type { FormSubmitEvent, TableColumn } from '#ui/types'
useHead({
title: '数字人定制管理 | 管理员',
@@ -40,38 +40,38 @@ const {
const trainList = computed(() => trainListResp.value?.data.items || [])
// 表格列定义
const columns = [
const columns: TableColumn<DigitalHumanTrainItem>[] = [
{
key: 'id',
label: 'ID',
accessorKey: 'id',
header: 'ID',
},
{
key: 'dh_name',
label: '数字人名称',
accessorKey: 'dh_name',
header: '数字人名称',
},
{
key: 'organization',
label: '单位名称',
accessorKey: 'organization',
header: '单位名称',
},
{
key: 'user_id',
label: '用户ID',
accessorKey: 'user_id',
header: '用户ID',
},
{
key: 'create_time',
label: '创建时间',
accessorKey: 'create_time',
header: '创建时间',
},
{
key: 'video_url',
label: '数字人视频',
accessorKey: 'video_url',
header: '数字人视频',
},
{
key: 'auth_video_url',
label: '授权视频',
accessorKey: 'auth_video_url',
header: '授权视频',
},
{
key: 'actions',
label: '操作',
accessorKey: 'actions',
header: '操作',
},
]
@@ -126,7 +126,7 @@ const handleAvatarUpload = (files: FileList) => {
toast.add({
title: '文件格式错误',
description: '请上传图片文件',
color: 'red',
color: 'error',
icon: 'i-tabler-alert-triangle',
})
return
@@ -137,7 +137,7 @@ const handleAvatarUpload = (files: FileList) => {
toast.add({
title: '文件过大',
description: '图片文件大小不能超过10MB',
color: 'red',
color: 'error',
icon: 'i-tabler-alert-triangle',
})
return
@@ -155,7 +155,7 @@ const onProcessSubmit = async (
if (!avatarFile.value) {
toast.add({
title: '请上传数字人预览图',
color: 'red',
color: 'error',
icon: 'i-tabler-alert-triangle',
})
return
@@ -225,7 +225,7 @@ const onProcessSubmit = async (
? `，失败 ${createUserResult.data.failed} 个`
: ''
}`,
color: 'green',
color: 'success',
icon: 'i-tabler-check',
})
@@ -250,7 +250,7 @@ const onProcessSubmit = async (
toast.add({
title: '录入失败',
description: errorMessage,
color: 'red',
color: 'error',
icon: 'i-tabler-alert-triangle',
})
} finally {
@@ -274,7 +274,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
toast.add({
title: '删除成功',
description: '定制记录已删除',
color: 'green',
color: 'success',
icon: 'i-tabler-check',
})
await refreshTrainList()
@@ -288,7 +288,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
toast.add({
title: '删除失败',
description: errorMessage,
color: 'red',
color: 'error',
icon: 'i-tabler-alert-triangle',
})
}
@@ -304,7 +304,7 @@ const previewVideo = (videoUrl: string, title: string) => {
// 创建一个简单的视频预览弹窗
const videoModal = document.createElement('div')
videoModal.className =
'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'
'fixed inset-0 z-50 flex items-center justify-center bg-black/50'
const videoContainer = document.createElement('div')
videoContainer.className =
@@ -323,7 +323,7 @@ const previewVideo = (videoUrl: string, title: string) => {
const closeButton = document.createElement('button')
closeButton.textContent = '关闭'
closeButton.className =
'mt-4 px-4 py-2 bg-gray-500 text-white rounded-sm hover:bg-gray-600'
'mt-4 px-4 py-2 bg-gray-500 text-white rounded-xs hover:bg-gray-600'
closeButton.onclick = () => {
document.body.removeChild(videoModal)
}
@@ -352,11 +352,11 @@ const previewVideo = (videoUrl: string, title: string) => {
>
<template #action>
<UButton
color="gray"
color="neutral"
variant="soft"
icon="i-tabler-refresh"
label="刷新"
@click="refreshTrainList"
@click="() => refreshTrainList()"
/>
</template>
</BubbleTitle>
@@ -374,77 +374,80 @@ const previewVideo = (videoUrl: string, title: string) => {
<div class="flex flex-col gap-4">
<UTable
:rows="trainList"
:data="trainList"
:columns="columns"
:loading="trainListStatus === 'pending'"
:progress="{ color: 'amber', animation: 'carousel' }"
class="border dark:border-neutral-800 rounded-md"
loading-color="warning"
loading-animation="carousel"
class="rounded-md border dark:border-neutral-800"
>
<template #create_time-data="{ row }">
<span class="text-sm">{{ formatTime(row.create_time) }}</span>
<template #create_time-cell="{ row }">
<span class="text-sm">
{{ formatTime(row.original.create_time) }}
</span>
</template>
<template #video_url-data="{ row }">
<template #video_url-cell="{ row }">
<div class="flex gap-2">
<UButton
color="blue"
color="info"
variant="soft"
size="xs"
icon="i-tabler-download"
:to="row.video_url"
:to="row.original.video_url"
target="_blank"
label="下载"
/>
<UButton
color="green"
color="success"
variant="soft"
size="xs"
icon="i-tabler-eye"
label="预览"
@click="previewVideo(row.video_url, '数字人视频')"
@click="previewVideo(row.original.video_url, '数字人视频')"
/>
</div>
</template>
<template #auth_video_url-data="{ row }">
<template #auth_video_url-cell="{ row }">
<div class="flex gap-2">
<UButton
color="blue"
color="info"
variant="soft"
size="xs"
icon="i-tabler-download"
:to="row.auth_video_url"
:to="row.original.auth_video_url"
target="_blank"
label="下载"
/>
<UButton
color="green"
color="success"
variant="soft"
size="xs"
icon="i-tabler-eye"
label="预览"
@click="previewVideo(row.auth_video_url, '授权视频')"
@click="previewVideo(row.original.auth_video_url, '授权视频')"
/>
</div>
</template>
<template #actions-data="{ row }">
<template #actions-cell="{ row }">
<div class="flex gap-2">
<UButton
color="amber"
color="warning"
variant="soft"
size="xs"
icon="i-tabler-user-cog"
label="录入"
@click="handleProcessTrain(row)"
@click="handleProcessTrain(row.original)"
/>
<UButton
color="red"
color="error"
variant="soft"
size="xs"
icon="i-tabler-trash"
label="删除"
@click="handleDeleteTrain(row)"
@click="handleDeleteTrain(row.original)"
/>
</div>
</template>
@@ -452,7 +455,7 @@ const previewVideo = (videoUrl: string, title: string) => {
<div class="flex justify-end">
<UPagination
v-model="pagination.page"
v-model:page="pagination.page"
:max="9"
:page-count="pagination.pageSize"
:total="trainListResp?.data.total || 0"
@@ -462,125 +465,127 @@ const previewVideo = (videoUrl: string, title: string) => {
</div>
<!-- 录入数字人弹窗 -->
<USlideover v-model="isProcessModalOpen">
<UCard
:ui="{
body: { base: 'flex-1' },
ring: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
}"
class="flex flex-col flex-1"
>
<template #header>
<UButton
class="flex absolute end-5 top-5 z-10"
color="gray"
icon="i-tabler-x"
padded
size="sm"
square
variant="ghost"
@click="isProcessModalOpen = false"
/>
<div>
<h3 class="text-lg font-semibold">录入数字人</h3>
<p class="text-sm text-gray-500 mt-1">
为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
{{ currentTrainItem?.user_id }}
</p>
</div>
</template>
<UForm
class="space-y-4"
:schema="processFormSchema"
:state="processFormState"
@submit="onProcessSubmit"
<USlideover v-model:open="isProcessModalOpen">
<template #content>
<UCard
:ui="{
body: 'flex-1',
}"
class="flex flex-1 flex-col"
>
<UFormGroup
label="名称"
name="name"
>
<UInput v-model="processFormState.name" />
</UFormGroup>
<UFormGroup
label="数字人ID"
name="model_id"
description="请输入五位数字人ID"
>
<UInput
v-model="processFormState.model_id"
type="number"
placeholder="请输入数字人ID"
/>
</UFormGroup>
<UFormGroup
label="描述"
name="description"
>
<UTextarea
v-model="processFormState.description"
rows="3"
/>
</UFormGroup>
<UFormGroup
label="供应商类型"
name="type"
>
<USelectMenu
v-model="processFormState.type"
value-attribute="value"
:options="sourceTypeList"
/>
</UFormGroup>
<UFormGroup
label="数字人预览图"
required
>
<UniFileDnD
accept="image/png,image/jpeg,image/jpg"
@change="handleAvatarUpload"
>
<template #default>
<div class="text-center">
<UIcon
name="i-heroicons-photo"
class="mx-auto h-12 w-12 text-gray-400"
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ avatarFile ? avatarFile.name : '点击或拖拽上传图片' }}
</span>
</div>
</div>
</template>
</UniFileDnD>
</UFormGroup>
<div class="flex justify-end gap-2 pt-4">
<template #header>
<UButton
type="button"
color="gray"
variant="soft"
class="absolute end-5 top-5 z-10 flex"
color="neutral"
variant="ghost"
icon="i-tabler-x"
padded
size="sm"
square
@click="isProcessModalOpen = false"
/>
<div>
<h3 class="text-lg font-semibold">录入数字人</h3>
<p class="mt-1 text-sm text-gray-500">
为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
{{ currentTrainItem?.user_id }}
</p>
</div>
</template>
<UForm
class="space-y-4"
:schema="processFormSchema"
:state="processFormState"
@submit="onProcessSubmit"
>
<UFormField
label="名称"
name="name"
>
取消
</UButton>
<UButton
type="submit"
color="primary"
:loading="isProcessing"
:disabled="isProcessing"
<UInput v-model="processFormState.name" />
</UFormField>
<UFormField
label="数字人ID"
name="model_id"
description="请输入五位数字人ID"
>
{{ isProcessing ? '录入中...' : '录入并分配' }}
</UButton>
</div>
</UForm>
</UCard>
<UInput
v-model="processFormState.model_id"
type="number"
placeholder="请输入数字人ID"
/>
</UFormField>
<UFormField
label="描述"
name="description"
>
<UTextarea
v-model="processFormState.description"
:rows="3"
/>
</UFormField>
<UFormField
label="供应商类型"
name="type"
>
<USelectMenu
v-model="processFormState.type"
value-attribute="value"
:options="sourceTypeList"
/>
</UFormField>
<UFormField
label="数字人预览图"
required
>
<UniFileDnD
accept="image/png,image/jpeg,image/jpg"
@change="handleAvatarUpload"
>
<template #default>
<div class="text-center">
<UIcon
name="i-heroicons-photo"
class="mx-auto h-12 w-12 text-gray-400"
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{
avatarFile ? avatarFile.name : '点击或拖拽上传图片'
}}
</span>
</div>
</div>
</template>
</UniFileDnD>
</UFormField>
<div class="flex justify-end gap-2 pt-4">
<UButton
type="button"
color="neutral"
variant="soft"
@click="isProcessModalOpen = false"
>
取消
</UButton>
<UButton
type="submit"
color="primary"
:loading="isProcessing"
:disabled="isProcessing"
>
{{ isProcessing ? '录入中...' : '录入并分配' }}
</UButton>
</div>
</UForm>
</UCard>
</template>
</USlideover>
</div>
</template>