refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面
This commit is contained in:
@@ -12,8 +12,8 @@ const emit = defineEmits({
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const modal = useModal()
|
||||
const loginState = useLoginState()
|
||||
const isRealOpen = computed(() => props.isOpen)
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
@@ -48,7 +48,7 @@ const handleClose = () => {
|
||||
if (props.isOpen) {
|
||||
emit('close')
|
||||
} else {
|
||||
modal.close()
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@ const handleSubmit = () => {
|
||||
toast.add({
|
||||
title: '请选择片头',
|
||||
description: '请选择一个片头',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -69,118 +69,115 @@ const handleSubmit = () => {
|
||||
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||
<div
|
||||
v-for="(titles, i) in userTitlesTemplate?.data.items"
|
||||
:key="`user-titles-${titles.id}`"
|
||||
:class="{
|
||||
'border-primary shadow-md': selectedTitle?.id === titles.id,
|
||||
'border-neutral-200 dark:border-neutral-700':
|
||||
selectedTitle?.id !== titles.id,
|
||||
}"
|
||||
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="selectedTitle = titles"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'bg-primary-50': selectedTitle?.id === titles.id,
|
||||
}"
|
||||
class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-video object-cover overflow-hidden transition-all duration-150"
|
||||
<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"
|
||||
>
|
||||
<NuxtImg :src="titles.opening_url" />
|
||||
<UIcon
|
||||
v-if="selectedTitle?.id === titles.id"
|
||||
class="absolute top-1 right-1 text-lg text-primary"
|
||||
name="i-tabler-check"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
{{ titles.title }}
|
||||
</span>
|
||||
<span
|
||||
class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
|
||||
>
|
||||
ID:{{ titles.id }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<UPagination
|
||||
v-if="(userTitlesTemplate?.data.total || 0) > 0"
|
||||
v-model="pagination.page"
|
||||
:page-count="pagination.pageSize"
|
||||
:total="userTitlesTemplate?.data.total || 0"
|
||||
class="pt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-xs font-medium opacity-50 select-none">
|
||||
如果此处没有您的片头，请在
|
||||
<a
|
||||
class="text-primary"
|
||||
href="/generation/materials"
|
||||
target="_blank"
|
||||
>
|
||||
片头模版库
|
||||
</a>
|
||||
页面确认已经制作完毕
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
视频片头选择器
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
label="取消"
|
||||
class="-my-1"
|
||||
color="neutral"
|
||||
icon="i-tabler-x"
|
||||
variant="ghost"
|
||||
@click="handleClose"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
label="选择"
|
||||
variant="solid"
|
||||
@click="handleSubmit"
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<div class="grid w-full grid-cols-2 gap-4 sm:grid-cols-3">
|
||||
<div
|
||||
v-for="(titles, i) in userTitlesTemplate?.data.items"
|
||||
:key="`user-titles-${titles.id}`"
|
||||
:class="{
|
||||
'border-primary shadow-md': selectedTitle?.id === titles.id,
|
||||
'border-neutral-200 dark:border-neutral-700':
|
||||
selectedTitle?.id !== titles.id,
|
||||
}"
|
||||
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="selectedTitle = titles"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'bg-primary-50': selectedTitle?.id === titles.id,
|
||||
}"
|
||||
class="relative aspect-video w-full overflow-hidden border-b bg-neutral-100 object-cover transition-all duration-150 dark:border-neutral-700 dark:bg-neutral-800"
|
||||
>
|
||||
<NuxtImg :src="titles.opening_url" />
|
||||
<UIcon
|
||||
v-if="selectedTitle?.id === titles.id"
|
||||
class="text-primary absolute right-1 top-1 text-lg"
|
||||
name="i-tabler-check"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
{{ titles.title }}
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-medium text-neutral-300 dark:text-neutral-500"
|
||||
>
|
||||
ID:{{ titles.id }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<UPagination
|
||||
v-if="(userTitlesTemplate?.data.total || 0) > 0"
|
||||
v-model:page="pagination.page"
|
||||
:page-count="pagination.pageSize"
|
||||
:total="userTitlesTemplate?.data.total || 0"
|
||||
class="pt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="select-none text-xs font-medium opacity-50">
|
||||
如果此处没有您的片头，请在
|
||||
<a
|
||||
class="text-primary"
|
||||
href="/generation/materials"
|
||||
target="_blank"
|
||||
>
|
||||
片头模版库
|
||||
</a>
|
||||
页面确认已经制作完毕
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user