refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面
This commit is contained in:
@@ -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