refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -54,7 +54,7 @@ const navigateToPage = (path: string) => {
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="page in adminPages"
|
||||
:key="page.path"
|
||||
@@ -62,14 +62,11 @@ const navigateToPage = (path: string) => {
|
||||
@click="navigateToPage(page.path)"
|
||||
>
|
||||
<UCard
|
||||
class="hover:shadow-lg transition-all duration-200 group-hover:scale-105"
|
||||
:ui="{
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-700 group-hover:ring-gray-300 dark:group-hover:ring-gray-600',
|
||||
}"
|
||||
class="transition-all duration-200 hover:shadow-lg group-hover:scale-105"
|
||||
>
|
||||
<div class="flex flex-col items-center text-center p-6">
|
||||
<div class="flex flex-col items-center p-6 text-center">
|
||||
<div
|
||||
class="w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors"
|
||||
class="mb-4 flex h-16 w-16 items-center justify-center rounded-full transition-colors"
|
||||
:class="{
|
||||
'bg-blue-100 dark:bg-blue-900/30': page.color === 'blue',
|
||||
'bg-amber-100 dark:bg-amber-900/30': page.color === 'amber',
|
||||
@@ -78,7 +75,7 @@ const navigateToPage = (path: string) => {
|
||||
>
|
||||
<UIcon
|
||||
:name="page.icon"
|
||||
class="w-8 h-8"
|
||||
class="h-8 w-8"
|
||||
:class="{
|
||||
'text-blue-600 dark:text-blue-400': page.color === 'blue',
|
||||
'text-amber-600 dark:text-amber-400':
|
||||
@@ -90,24 +87,24 @@ const navigateToPage = (path: string) => {
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
|
||||
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
|
||||
>
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
|
||||
class="text-sm leading-relaxed text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
{{ page.description }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors"
|
||||
class="mt-4 flex items-center text-sm text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300"
|
||||
>
|
||||
<span>进入管理</span>
|
||||
<UIcon
|
||||
name="i-heroicons-arrow-right"
|
||||
class="ml-1 w-4 h-4"
|
||||
class="ml-1 h-4 w-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { number, object, string, type InferType } from 'yup'
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import type { FormSubmitEvent, TableColumn } from '#ui/types'
|
||||
|
||||
const toast = useToast()
|
||||
const loginState = useLoginState()
|
||||
@@ -94,7 +94,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '数字人已删除',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
refreshSystemAvatarList()
|
||||
@@ -102,7 +102,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -111,43 +111,43 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const columns = [
|
||||
const columns: TableColumn<DigitalHumanItem>[] = [
|
||||
{
|
||||
key: 'avatar',
|
||||
label: '图片',
|
||||
accessorKey: 'avatar',
|
||||
header: '图片',
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '名称',
|
||||
accessorKey: 'name',
|
||||
header: '名称',
|
||||
},
|
||||
{
|
||||
key: 'model_id',
|
||||
label: 'ID',
|
||||
accessorKey: 'model_id',
|
||||
header: 'ID',
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '来源',
|
||||
accessorKey: 'type',
|
||||
header: '来源',
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
label: '备注',
|
||||
accessorKey: 'description',
|
||||
header: '备注',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
accessorKey: 'actions',
|
||||
},
|
||||
]
|
||||
|
||||
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' as const }, // 万木（腾讯）
|
||||
{ label: 'xsh_zy', value: 2, color: 'success' as const }, // XSH 自有
|
||||
{ label: 'xsh_fh', value: 3, color: 'warning' as const }, // 硅基（泛化数字人）
|
||||
{ label: 'xsh_bb', value: 4, color: 'primary' as const }, // 百度小冰
|
||||
]
|
||||
|
||||
const isCreateSlideOpen = ref(false)
|
||||
@@ -189,7 +189,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
toast.add({
|
||||
title: '创建成功',
|
||||
description: '数字人已创建',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
refreshSystemAvatarList()
|
||||
@@ -199,7 +199,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -208,7 +208,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -216,20 +216,22 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
|
||||
const onAvatarUpload = async (files: FileList) => {
|
||||
const file = files[0]
|
||||
if (!file) return
|
||||
|
||||
try {
|
||||
const url = await useFileGo(file, 'material')
|
||||
createAvatarState.avatar = url
|
||||
toast.add({
|
||||
title: '上传文件成功',
|
||||
description: '文件已上传',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} catch {
|
||||
toast.add({
|
||||
title: '上传文件失败',
|
||||
description: '请重试',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -245,7 +247,7 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
>
|
||||
<template #action>
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
:label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
|
||||
@click="showSystemAvatar = !showSystemAvatar"
|
||||
@@ -257,20 +259,20 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
: 'tabler:layout-grid'
|
||||
"
|
||||
variant="soft"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
@click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
|
||||
:label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
|
||||
/>
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:user-cog"
|
||||
label="定制管理"
|
||||
:to="'/generation/admin/digital-human-train'"
|
||||
/>
|
||||
<UButton
|
||||
color="blue"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="tabler:user-plus"
|
||||
label="定制数字人"
|
||||
@@ -278,7 +280,7 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
/>
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:plus"
|
||||
label="创建数字人"
|
||||
@@ -305,18 +307,18 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
? systemAvatarList?.data.items
|
||||
: userAvatarList?.data.items"
|
||||
:key="avatar.model_id || k"
|
||||
class="relative rounded-lg shadow-sm overflow-hidden w-full aspect-9/16 group"
|
||||
class="shadow-xs aspect-9/16 group relative w-full overflow-hidden rounded-lg"
|
||||
>
|
||||
<NuxtImg
|
||||
:src="avatar.avatar"
|
||||
class="w-full h-full object-cover"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 p-2 bg-linear-to-t from-black/50 to-transparent flex gap-2"
|
||||
class="bg-linear-to-t absolute inset-x-0 bottom-0 flex gap-2 from-black/50 to-transparent p-2"
|
||||
>
|
||||
<UBadge
|
||||
color="white"
|
||||
variant="solid"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
icon="tabler:user-screen"
|
||||
>
|
||||
{{ avatar.name }}
|
||||
@@ -334,11 +336,11 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center bg-white/50 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 dark:bg-neutral-800/50"
|
||||
>
|
||||
<UButtonGroup>
|
||||
<UButton
|
||||
color="black"
|
||||
color="neutral"
|
||||
icon="tabler:download"
|
||||
label="下载图片"
|
||||
@click="
|
||||
@@ -353,7 +355,7 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
/>
|
||||
</UButtonGroup>
|
||||
<span
|
||||
class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4"
|
||||
class="pt-4 text-xs font-medium text-neutral-400 dark:text-neutral-300"
|
||||
>
|
||||
ID: {{ avatar.model_id }}
|
||||
</span>
|
||||
@@ -363,39 +365,40 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
<div v-else>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UTable
|
||||
:rows="
|
||||
:data="
|
||||
showSystemAvatar
|
||||
? systemAvatarList?.data.items
|
||||
: userAvatarList?.data.items
|
||||
"
|
||||
:columns="columns"
|
||||
:loading="userAvatarStatus === '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 #avatar-data="{ row }">
|
||||
<template #avatar-cell="{ row }">
|
||||
<NuxtImg
|
||||
:src="row.avatar"
|
||||
class="h-16 aspect-9/16 rounded-lg"
|
||||
:src="row.original.avatar"
|
||||
class="h-16 w-auto rounded-lg object-contain"
|
||||
/>
|
||||
</template>
|
||||
<template #type-data="{ row }">
|
||||
<template #type-cell="{ row }">
|
||||
<template
|
||||
v-for="(t, i) in sourceTypeList"
|
||||
:key="i"
|
||||
>
|
||||
<UBadge
|
||||
v-if="t.value === row.type"
|
||||
v-if="t.value === row.original.type"
|
||||
variant="subtle"
|
||||
:color="t.color"
|
||||
:label="t.label"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<template #actions-cell="{ row }">
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
icon="tabler:download"
|
||||
label="下载图片"
|
||||
variant="soft"
|
||||
@@ -403,29 +406,29 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
@click="
|
||||
() => {
|
||||
const { download } = useDownload(
|
||||
row.avatar,
|
||||
`数字人_${row.name}.png`
|
||||
row.original.avatar,
|
||||
`数字人_${row.original.name}.png`
|
||||
)
|
||||
download()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<UButton
|
||||
color="red"
|
||||
color="error"
|
||||
icon="tabler:trash"
|
||||
label="删除"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
@click="onSystemAvatarDelete(row)"
|
||||
@click="onSystemAvatarDelete(row.original)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<div class="mt-4 flex justify-end">
|
||||
<UPagination
|
||||
v-model="pagination.page"
|
||||
v-model:page="pagination.page"
|
||||
:max="9"
|
||||
:page-count="pagination.pageSize"
|
||||
:total="userAvatarList?.data.total || 0"
|
||||
@@ -433,81 +436,81 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<USlideover v-model="isCreateSlideOpen">
|
||||
<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="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCreateSlideOpen = false"
|
||||
/>
|
||||
创建系统数字人
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-3"
|
||||
:schema="createAvatarSchema"
|
||||
:state="createAvatarState"
|
||||
@submit="onCreateAvatarSubmit"
|
||||
<USlideover v-model:open="isCreateSlideOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<UFormGroup
|
||||
label="名称"
|
||||
name="name"
|
||||
>
|
||||
<UInput v-model="createAvatarState.name" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="备注"
|
||||
name="description"
|
||||
>
|
||||
<UInput v-model="createAvatarState.description" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="ID"
|
||||
name="model_id"
|
||||
>
|
||||
<UInput v-model="createAvatarState.model_id" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="图片"
|
||||
name="avatar"
|
||||
>
|
||||
<UniFileDnD
|
||||
accept="image/png,image/jpeg"
|
||||
@change="onAvatarUpload"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="类型"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="createAvatarState.type"
|
||||
value-attribute="value"
|
||||
:options="sourceTypeList"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup class="flex justify-end pt-4">
|
||||
<template #header>
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
label="创建"
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
icon="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCreateSlideOpen = false"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</UCard>
|
||||
创建系统数字人
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-3"
|
||||
:schema="createAvatarSchema"
|
||||
:state="createAvatarState"
|
||||
@submit="onCreateAvatarSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="名称"
|
||||
name="name"
|
||||
>
|
||||
<UInput v-model="createAvatarState.name" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="备注"
|
||||
name="description"
|
||||
>
|
||||
<UInput v-model="createAvatarState.description" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="ID"
|
||||
name="model_id"
|
||||
>
|
||||
<UInput v-model="createAvatarState.model_id" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="图片"
|
||||
name="avatar"
|
||||
>
|
||||
<UniFileDnD
|
||||
accept="image/png,image/jpeg"
|
||||
@change="onAvatarUpload"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="类型"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="createAvatarState.type"
|
||||
:items="sourceTypeList"
|
||||
value-key="value"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField class="flex justify-end pt-4">
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
label="创建"
|
||||
/>
|
||||
</UFormField>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<!-- 数字人定制对话框 -->
|
||||
|
||||
@@ -4,8 +4,9 @@ import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
|
||||
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
||||
|
||||
const toast = useToast()
|
||||
const modal = useModal()
|
||||
const slide = useSlideover()
|
||||
const overlay = useOverlay()
|
||||
const modal = overlay.create(ModalAuthentication)
|
||||
const slide = overlay.create(SlideCreateCourse)
|
||||
const loginState = useLoginState()
|
||||
|
||||
const deletePending = ref(false)
|
||||
@@ -28,12 +29,10 @@ const { data: courseList, refresh: refreshCourseList } = useAsyncData(
|
||||
}
|
||||
)
|
||||
|
||||
const onCreateCourseClick = () => {
|
||||
slide.open(SlideCreateCourse, {
|
||||
onSuccess: () => {
|
||||
refreshCourseList()
|
||||
},
|
||||
})
|
||||
const onCreateCourseClick = async () => {
|
||||
const slideInst = slide.open()
|
||||
await slideInst
|
||||
refreshCourseList()
|
||||
}
|
||||
|
||||
const onCourseDelete = (task_id: string) => {
|
||||
@@ -53,14 +52,14 @@ const onCourseDelete = (task_id: string) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除任务记录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -107,7 +106,7 @@ onMounted(() => {
|
||||
@click="
|
||||
() => {
|
||||
if (!loginState.is_logged_in) {
|
||||
modal.open(ModalAuthentication)
|
||||
modal.open()
|
||||
return
|
||||
}
|
||||
onCreateCourseClick()
|
||||
@@ -121,7 +120,7 @@ onMounted(() => {
|
||||
<Transition name="loading-screen">
|
||||
<div
|
||||
v-if="courseList?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -134,7 +133,7 @@ onMounted(() => {
|
||||
class="p-4"
|
||||
>
|
||||
<div
|
||||
class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4"
|
||||
class="relative grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5"
|
||||
>
|
||||
<TransitionGroup
|
||||
name="card"
|
||||
@@ -149,9 +148,9 @@ onMounted(() => {
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<div class="mt-4 flex justify-end">
|
||||
<UPagination
|
||||
v-model="page"
|
||||
v-model:page="page"
|
||||
:max="9"
|
||||
:page-count="16"
|
||||
:total="courseList?.data.total || 0"
|
||||
|
||||
@@ -5,7 +5,8 @@ import { useTourState } from '~/composables/useTourState'
|
||||
import SlideCreateCourseGreen from '~/components/SlideCreateCourseGreen.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const slide = useSlideover()
|
||||
const overlay = useOverlay()
|
||||
const slide = overlay.create(SlideCreateCourseGreen)
|
||||
const toast = useToast()
|
||||
const loginState = useLoginState()
|
||||
const tourState = useTourState()
|
||||
@@ -35,12 +36,10 @@ const { data: videoList, refresh: refreshVideoList } = useAsyncData(
|
||||
}
|
||||
)
|
||||
|
||||
const onCreateCourseGreenClick = () => {
|
||||
slide.open(SlideCreateCourseGreen, {
|
||||
onSuccess: () => {
|
||||
refreshVideoList()
|
||||
},
|
||||
})
|
||||
const onCreateCourseGreenClick = async () => {
|
||||
const slideInst = slide.open()
|
||||
await slideInst
|
||||
refreshVideoList()
|
||||
}
|
||||
|
||||
const onCourseGreenDelete = (task: GBVideoItem) => {
|
||||
@@ -58,14 +57,14 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除任务记录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -137,7 +136,6 @@ onMounted(() => {
|
||||
id="input-search"
|
||||
v-model="searchInput"
|
||||
:autofocus="false"
|
||||
:ui="{ icon: { trailing: { pointer: '' } } }"
|
||||
autocomplete="off"
|
||||
placeholder="标题搜索"
|
||||
variant="outline"
|
||||
@@ -146,7 +144,7 @@ onMounted(() => {
|
||||
<UButton
|
||||
v-show="searchInput !== ''"
|
||||
:padded="false"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
icon="i-tabler-x"
|
||||
variant="link"
|
||||
@click="searchInput = ''"
|
||||
@@ -172,7 +170,7 @@ onMounted(() => {
|
||||
<Transition name="loading-screen">
|
||||
<div
|
||||
v-if="videoList?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -183,7 +181,7 @@ onMounted(() => {
|
||||
<div v-else>
|
||||
<div class="p-4">
|
||||
<div
|
||||
class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4"
|
||||
class="relative grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5"
|
||||
>
|
||||
<TransitionGroup
|
||||
name="card"
|
||||
@@ -198,9 +196,9 @@ onMounted(() => {
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<div class="mt-4 flex justify-end">
|
||||
<UPagination
|
||||
v-model="page"
|
||||
v-model:page="page"
|
||||
:max="9"
|
||||
:page-count="pageCount"
|
||||
:total="videoList?.data.total || 0"
|
||||
|
||||
@@ -110,14 +110,14 @@ const onSystemTitlesDelete = (titles: TitlesTemplate) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除系统片头模板',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -126,7 +126,7 @@ const onSystemTitlesDelete = (titles: TitlesTemplate) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -153,14 +153,14 @@ const onUserTitlesDelete = (titles: TitlesTemplate) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除片头素材',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -188,14 +188,14 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
toast.add({
|
||||
title: '提交成功',
|
||||
description: '已提交片头制作请求',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '提交失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -217,7 +217,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
>
|
||||
<template #action>
|
||||
<UButton
|
||||
color="amber"
|
||||
color="warning"
|
||||
icon="tabler:plus"
|
||||
variant="soft"
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
@@ -231,18 +231,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-if="systemTitlesTemplateStatus === 'pending'"
|
||||
>
|
||||
<USkeleton
|
||||
class="w-full aspect-video"
|
||||
class="aspect-video w-full"
|
||||
v-for="i in systemPagination.pageSize"
|
||||
:key="i"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="systemTitlesTemplate?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -253,7 +253,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-else
|
||||
>
|
||||
<AigcGenerationTitlesTemplate
|
||||
@@ -298,18 +298,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</template>
|
||||
</UAlert>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-if="userTitlesTemplateStatus === 'pending'"
|
||||
>
|
||||
<USkeleton
|
||||
class="w-full aspect-video"
|
||||
class="aspect-video w-full"
|
||||
v-for="i in userPagination.pageSize"
|
||||
:key="i"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="userTitlesTemplate?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -320,7 +320,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-else
|
||||
>
|
||||
<AigcGenerationTitlesTemplate
|
||||
@@ -333,90 +333,87 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal v-model="isUserTitlesRequestModalActive">
|
||||
<UCard
|
||||
:ui="{
|
||||
ring: '',
|
||||
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
|
||||
>
|
||||
<p>使用模板</p>
|
||||
</div>
|
||||
<UButton
|
||||
class="-my-1"
|
||||
color="gray"
|
||||
icon="i-tabler-x"
|
||||
variant="ghost"
|
||||
@click="isUserTitlesRequestModalActive = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="userTitlesSchema"
|
||||
:state="userTitlesState"
|
||||
@submit="onUserTitlesSubmit"
|
||||
>
|
||||
<UFormGroup
|
||||
label="课程名称"
|
||||
name="title"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.title" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="主讲人"
|
||||
name="description"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.description" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="备注"
|
||||
name="remark"
|
||||
help="可选，可以在此处填写学校、单位等额外信息"
|
||||
>
|
||||
<UTextarea v-model="userTitlesState.remark" />
|
||||
</UFormGroup>
|
||||
<UFormGroup name="title_id">
|
||||
<UInput
|
||||
type="hidden"
|
||||
v-model="userTitlesState.title_id"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UAlert
|
||||
icon="tabler:info-circle"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
title="片头片尾模板"
|
||||
description="提交模板相应字段后，待工作人员制作好后即可使用"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<UModal v-model:open="isUserTitlesRequestModalActive">
|
||||
<template #content>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
>
|
||||
<p>使用模板</p>
|
||||
</div>
|
||||
<UButton
|
||||
color="primary"
|
||||
variant="soft"
|
||||
label="取消"
|
||||
class="-my-1"
|
||||
color="neutral"
|
||||
icon="i-tabler-x"
|
||||
variant="ghost"
|
||||
@click="isUserTitlesRequestModalActive = false"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="userTitlesSchema"
|
||||
:state="userTitlesState"
|
||||
@submit="onUserTitlesSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="课程名称"
|
||||
name="title"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.title" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="主讲人"
|
||||
name="description"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.description" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="备注"
|
||||
name="remark"
|
||||
help="可选，可以在此处填写学校、单位等额外信息"
|
||||
>
|
||||
<UTextarea v-model="userTitlesState.remark" />
|
||||
</UFormField>
|
||||
<UFormField name="title_id">
|
||||
<UInput
|
||||
type="hidden"
|
||||
v-model="userTitlesState.title_id"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UAlert
|
||||
icon="tabler:info-circle"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
title="片头片尾模板"
|
||||
description="提交模板相应字段后，待工作人员制作好后即可使用"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton
|
||||
color="primary"
|
||||
variant="soft"
|
||||
label="取消"
|
||||
@click="isUserTitlesRequestModalActive = false"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -102,7 +102,7 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
|
||||
toast.add({
|
||||
title: '创建成功',
|
||||
description: '已加入模板库',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
isCreateSlideOpen.value = false
|
||||
@@ -120,14 +120,14 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: '请检查输入是否正确',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
|
||||
const url = await useFileGo(files[0], 'material')
|
||||
const url = await useFileGo(files[0]!, 'material')
|
||||
if (type === 'preview') {
|
||||
pptCreateState.preview_url = url
|
||||
} else {
|
||||
@@ -136,7 +136,7 @@ const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
|
||||
toast.add({
|
||||
title: '上传成功',
|
||||
description: `已上传 ${type === 'preview' ? '预览图' : 'PPT 文件'}`,
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
}
|
||||
@@ -156,14 +156,14 @@ const onDeletePPT = (ppt: PPTTemplate) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除模板',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -172,7 +172,7 @@ const onDeletePPT = (ppt: PPTTemplate) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -196,7 +196,7 @@ const onCreateCat = () => {
|
||||
toast.add({
|
||||
title: '创建成功',
|
||||
description: '已加入分类列表',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
createCatInput.value = ''
|
||||
@@ -206,7 +206,7 @@ const onCreateCat = () => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: '请检查输入是否正确',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -228,14 +228,14 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除分类',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -244,7 +244,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: '请检查输入是否正确',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -262,7 +262,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
label="分类管理"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:grid"
|
||||
@click="isCatSlideOpen = true"
|
||||
@@ -270,7 +270,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
label="创建模板"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:plus"
|
||||
@click="isCreateSlideOpen = true"
|
||||
@@ -293,7 +293,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
'bg-primary text-white': selectedCat === cat.id,
|
||||
'bg-gray-100 text-gray-500': selectedCat !== cat.id,
|
||||
}"
|
||||
class="rounded-lg px-4 py-2 text-sm cursor-pointer"
|
||||
class="cursor-pointer rounded-lg px-4 py-2 text-sm"
|
||||
>
|
||||
{{ cat.type }}
|
||||
</div>
|
||||
@@ -302,7 +302,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-if="pptTemplates?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -314,20 +314,20 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
|
||||
class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
v-for="ppt in pptTemplates?.data.items"
|
||||
:key="ppt.id"
|
||||
class="relative bg-white rounded-lg shadow-md overflow-hidden"
|
||||
class="relative overflow-hidden rounded-lg bg-white shadow-md"
|
||||
>
|
||||
<NuxtImg
|
||||
:src="ppt.preview_url"
|
||||
:alt="ppt.title"
|
||||
class="w-full aspect-video object-cover"
|
||||
class="aspect-video w-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-linear-to-t from-black/50 to-transparent"
|
||||
class="bg-linear-to-t absolute inset-x-0 bottom-0 flex items-end justify-between from-black/50 to-transparent p-3 pt-6"
|
||||
>
|
||||
<div class="space-y-0.5">
|
||||
<h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
|
||||
@@ -340,7 +340,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
size="sm"
|
||||
color="red"
|
||||
color="error"
|
||||
icon="tabler:trash"
|
||||
variant="soft"
|
||||
@click="onDeletePPT(ppt)"
|
||||
@@ -357,173 +357,173 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-end">
|
||||
<div class="flex w-full justify-end">
|
||||
<UPagination
|
||||
v-if="(pptTemplates?.data.total || 0) > pagination.perpage"
|
||||
:total="pptTemplates?.data.total"
|
||||
:page-count="pagination.perpage"
|
||||
:max="9"
|
||||
v-model="pagination.page"
|
||||
v-model:page="pagination.page"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<USlideover v-model="isCreateSlideOpen">
|
||||
<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="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCreateSlideOpen = false"
|
||||
/>
|
||||
创建 PPT 模板
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="pptCreateSchema"
|
||||
:state="pptCreateState"
|
||||
@submit="onCreateSubmit"
|
||||
<USlideover v-model:open="isCreateSlideOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<UFormGroup
|
||||
label="模板标题"
|
||||
name="title"
|
||||
>
|
||||
<UInput v-model="pptCreateState.title" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="模板描述"
|
||||
name="description"
|
||||
>
|
||||
<UTextarea v-model="pptCreateState.description" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="模板分类"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="pptCreateState.type"
|
||||
value-attribute="value"
|
||||
option-attribute="label"
|
||||
searchable
|
||||
searchable-placeholder="搜索现有分类..."
|
||||
:options="selectMenuOptions"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="预览图"
|
||||
name="preview_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'preview')"
|
||||
accept="image/png,image/jpeg"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="PPT 文件"
|
||||
name="file_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'ppt')"
|
||||
accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<template #header>
|
||||
<UButton
|
||||
label="创建"
|
||||
color="primary"
|
||||
type="submit"
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
icon="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCreateSlideOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</USlideover>
|
||||
<USlideover v-model="isCatSlideOpen">
|
||||
<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="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCatSlideOpen = false"
|
||||
/>
|
||||
PPT 模板分类管理
|
||||
</template>
|
||||
创建 PPT 模板
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="创建分类">
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="pptCreateSchema"
|
||||
:state="pptCreateState"
|
||||
@submit="onCreateSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="模板标题"
|
||||
name="title"
|
||||
>
|
||||
<UInput
|
||||
class="flex-1"
|
||||
placeholder="分类名称"
|
||||
v-model="createCatInput"
|
||||
<UInput v-model="pptCreateState.title" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="模板描述"
|
||||
name="description"
|
||||
>
|
||||
<UTextarea v-model="pptCreateState.description" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="模板分类"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="pptCreateState.type"
|
||||
:items="selectMenuOptions"
|
||||
value-key="value"
|
||||
searchable
|
||||
searchable-placeholder="搜索现有分类..."
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="预览图"
|
||||
name="preview_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'preview')"
|
||||
accept="image/png,image/jpeg"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="PPT 文件"
|
||||
name="file_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'ppt')"
|
||||
accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UButton
|
||||
icon="tabler:plus"
|
||||
color="gray"
|
||||
label="创建"
|
||||
:disabled="!createCatInput"
|
||||
@click="onCreateCat"
|
||||
color="primary"
|
||||
type="submit"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</UFormGroup>
|
||||
<div class="border dark:border-neutral-700 rounded-md">
|
||||
<UTable
|
||||
:columns="[
|
||||
{ key: 'id', label: 'ID' },
|
||||
{ key: 'type', label: '分类' },
|
||||
{ key: 'create_time', label: '创建时间' },
|
||||
{ key: 'actions' },
|
||||
]"
|
||||
:rows="pptCategories?.data.items"
|
||||
>
|
||||
<template #create_time-data="{ row }">
|
||||
{{
|
||||
dayjs(row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<UButton
|
||||
color="red"
|
||||
icon="tabler:trash"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="onDeleteCat(row)"
|
||||
</div>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<USlideover v-model:open="isCatSlideOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<template #header>
|
||||
<UButton
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
icon="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCatSlideOpen = false"
|
||||
/>
|
||||
PPT 模板分类管理
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<UFormField label="创建分类">
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<UInput
|
||||
class="flex-1"
|
||||
placeholder="分类名称"
|
||||
v-model="createCatInput"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
<UButton
|
||||
icon="tabler:plus"
|
||||
color="neutral"
|
||||
label="创建"
|
||||
:disabled="!createCatInput"
|
||||
@click="onCreateCat"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</UFormField>
|
||||
<div class="rounded-md border dark:border-neutral-700">
|
||||
<UTable
|
||||
:columns="[
|
||||
{ accessorKey: 'id', header: 'ID' },
|
||||
{ accessorKey: 'type', header: '分类' },
|
||||
{ accessorKey: 'create_time', header: '创建时间' },
|
||||
{ accessorKey: 'actions' },
|
||||
]"
|
||||
:rows="pptCategories?.data.items"
|
||||
>
|
||||
<template #create_time-data="{ row }">
|
||||
{{
|
||||
dayjs(row.original.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<UButton
|
||||
color="error"
|
||||
icon="tabler:trash"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="onDeleteCat(row.original)"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user