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

app/components/aigc/generation/TitlesTemplate.vue

@@ -38,17 +38,17 @@ const closePreview = () => {
 
 <template>
   <div
-    class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow-sm transition-shadow"
+    class="hover:shadow-xs relative flex w-full flex-col overflow-hidden rounded-lg border border-neutral-200 shadow-none transition-shadow dark:border-neutral-700"
   >
-    <div class="relative w-full aspect-16/9 group">
+    <div class="aspect-16/9 group relative w-full">
       <NuxtImg
         placeholder
         placeholder-class="w-full aspect-16/9 object-cover bg-neutral-200 dark:bg-neutral-800"
-        class="object-cover relative"
+        class="relative object-cover"
         :src="data.opening_url"
       />
       <div
-        class="absolute inset-0 bg-black/10 backdrop-blur-md opacity-0 group-hover:opacity-100 duration-300 flex flex-col gap-2 justify-center items-center"
+        class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/10 opacity-0 backdrop-blur-md duration-300 group-hover:opacity-100"
       >
         <UButton
           icon="tabler:play"
@@ -66,10 +66,10 @@ const closePreview = () => {
         />
       </div>
     </div>
-    <div class="relative p-2 flex justify-between items-center gap-2">
+    <div class="relative flex items-center justify-between gap-2 p-2">
       <div class="flex-1">
         <h1
-          class="text-base font-medium line-clamp-1"
+          class="line-clamp-1 text-base font-medium"
           :title="data.title"
         >
           {{ data.title }}
@@ -85,7 +85,8 @@ const closePreview = () => {
         >
           <UButton
             label="使用模板"
-            color="white"
+            color="neutral"
+            variant="outline"
             @click="emit('user-titles-request', data)"
           />
           <!-- <UButton
@@ -97,11 +98,11 @@ const closePreview = () => {
           <UPopover v-if="loginState.user.auth_code === 2">
             <UButton
               icon="tabler:trash"
-              color="red"
+              color="error"
             />
 
             <template #panel="{ close }">
-              <div class="flex flex-col p-2 gap-2">
+              <div class="flex flex-col gap-2 p-2">
                 <p class="text-xs text-gray-500 dark:text-gray-400">
                   素材删除后不可恢复，确认删除？
                 </p>
@@ -109,7 +110,7 @@ const closePreview = () => {
                   class="w-fit"
                   icon="tabler:trash"
                   label="确认删除"
-                  color="red"
+                  color="error"
                   size="xs"
                   @click="emit('system-titles-delete', data)"
                 />
@@ -130,12 +131,12 @@ const closePreview = () => {
               icon="tabler:trash"
               label="删除素材"
               variant="soft"
-              color="red"
+              color="error"
               size="xs"
             />
 
             <template #panel="{ close }">
-              <div class="flex flex-col p-2 gap-2">
+              <div class="flex flex-col gap-2 p-2">
                 <p class="text-xs text-gray-500 dark:text-gray-400">
                   素材删除后不可恢复，确认删除？
                 </p>
@@ -143,7 +144,7 @@ const closePreview = () => {
                   class="w-fit"
                   icon="tabler:trash"
                   label="确认删除"
-                  color="red"
+                  color="error"
                   size="xs"
                   @click="emit('user-titles-delete', data)"
                 />
@@ -155,40 +156,37 @@ const closePreview = () => {
     </div>
 
     <UModal
-      v-model="isPreviewModalOpen"
-      :ui="{ width: 'w-full sm:max-w-4xl' }"
+      v-model:open="isPreviewModalOpen"
+      :ui="{ content: 'w-full sm:max-w-4xl' }"
     >
-      <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>
+      <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
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isPreviewModalOpen = false"
+              />
             </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewModalOpen = false"
-            />
-          </div>
-        </template>
+          </template>
 
-        <video
-          v-if="previewVideoUrl"
-          class="w-full rounded-sm shadow-sm"
-          controls
-          autoplay
-          :src="previewVideoUrl"
-        ></video>
-      </UCard>
+          <video
+            v-if="previewVideoUrl"
+            class="rounded-xs shadow-xs w-full"
+            controls
+            autoplay
+            :src="previewVideoUrl"
+          ></video>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>