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

app/components/aigc/generation/CGTaskCard.client.vue

@@ -6,7 +6,6 @@ import gsap from 'gsap'
 
 const toast = useToast()
 const loginState = useLoginState()
-const { metaSymbol } = useShortcuts()
 
 const srtEditor = ref()
 
@@ -59,17 +58,17 @@ const isPreviewModalOpen = ref(false)
 const stateDisplay = computed(() => {
   if (props.course.progress === -1)
     return {
-      color: 'red',
+      color: 'error' as const,
       text: '失败',
     }
   if (props.course.progress === 100)
     return {
-      color: 'green',
+      color: 'success' as const,
       text: '完成',
     }
   return {
-    color: 'blue',
-    text: !!props.course.progress
+    color: 'info' as const,
+    text: props.course.progress
       ? `${tweenedGenerateProgress.value.toFixed(0)}%`
       : '队列中',
   }
@@ -108,7 +107,7 @@ const startDownload = async (url: string, filename: string) => {
     toast.add({
       title: '下载完成',
       description: '资源下载已完成',
-      color: 'green',
+      color: 'success',
       icon: 'i-tabler-check',
     })
   })
@@ -122,7 +121,7 @@ const startDownload = async (url: string, filename: string) => {
     toast.add({
       title: '下载失败',
       description: err.message || '下载失败，未知错误',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
   })
@@ -137,7 +136,7 @@ const copyTaskId = (extraMessage?: string) => {
   toast.add({
     title: '复制成功',
     description: '已复制任务 ID',
-    color: 'green',
+    color: 'success',
     icon: 'i-tabler-check',
   })
 }
@@ -155,7 +154,7 @@ const onCombination = async () => {
     toast.add({
       title: '获取字幕失败',
       description: '无法获取字幕文件，请稍后重试',
-      color: 'red',
+      color: 'error',
       icon: 'i-tabler-alert-triangle',
     })
     return
@@ -174,7 +173,7 @@ const onCombination = async () => {
       toast.add({
         title: '嵌入字幕失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
       combinationState.value = 0
@@ -208,7 +207,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
         toast.add({
           title: '重试已提交',
           description: '已加入生成队列',
-          color: 'green',
+          color: 'success',
           icon: 'i-tabler-check',
         })
         // delete
@@ -217,7 +216,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
         toast.add({
           title: '提交重试失败',
           description: res.msg || '未知错误',
-          color: 'red',
+          color: 'error',
           icon: 'i-tabler-alert-triangle',
         })
       }
@@ -226,7 +225,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       toast.add({
         title: '提交重试失败',
         description: err.message || '未知错误',
-        color: 'red',
+        color: 'error',
         icon: 'i-tabler-alert-triangle',
       })
     }
@@ -236,11 +235,11 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
 
 <template>
   <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow-sm transition overflow-hidden"
+    class="hover:shadow-xs w-full overflow-hidden rounded-xl border border-neutral-200 transition dark:border-neutral-700"
   >
-    <div class="relative w-full aspect-video group">
+    <div class="group relative aspect-video w-full">
       <NuxtImg
-        class="w-full aspect-video object-cover pointer-events-none absolute inset-0"
+        class="pointer-events-none absolute inset-0 aspect-video w-full object-cover"
         v-if="!!course.video_cover"
         :src="course.video_cover"
         alt="image"
@@ -248,33 +247,33 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       />
       <div
         v-else
-        class="absolute inset-0 bg-linear-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
+        class="bg-linear-to-br to-primary-400 pattern absolute inset-0 flex items-center justify-center from-purple-400"
       >
         <Icon
           v-if="isFailed"
-          class="text-white text-[64px] opacity-50"
+          class="text-[64px] text-white opacity-50"
           name="i-tabler-alert-triangle"
         />
         <Icon
           v-else
-          class="text-white text-[64px] animate-pulse"
+          class="animate-pulse text-[64px] text-white"
           name="i-tabler-photo-video"
         />
       </div>
-      <div class="absolute inset-2 flex justify-end items-start">
+      <div class="absolute inset-2 flex items-start justify-end">
         <UTooltip
           :prevent="course.progress > -1"
           :text="course.message || ''"
         >
           <UBadge
             :color="stateDisplay.color"
-            :variant="isFailed ? 'solid' : 'subtle'"
-            class="shadow-sm"
+            variant="solid"
+            class="shadow-xs"
             size="sm"
           >
             <Icon
               v-if="isFailed"
-              class="text-base mr-0.5"
+              class="mr-0.5 text-base"
               name="i-tabler-alert-triangle"
             />
             {{ stateDisplay.text }}
@@ -283,24 +282,24 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
       </div>
       <div
         v-if="isDownloadable"
-        class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center opacity-0 group-hover:opacity-100 duration-300"
+        class="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 backdrop-blur-md duration-300 group-hover:opacity-100"
       >
         <div
-          class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer"
+          class="flex aspect-square w-14 cursor-pointer items-center justify-center rounded-full bg-gray-300/50 backdrop-blur-md"
           @click="isPreviewModalOpen = true"
         >
           <Icon
             name="i-tabler-play"
-            class="text-white text-3xl"
+            class="text-3xl text-white"
           />
         </div>
       </div>
     </div>
-    <div class="px-2 pt-1 pb-2 flex justify-between">
+    <div class="flex justify-between px-2 pb-2 pt-1">
       <div class="flex-1 overflow-hidden pt-1">
         <h1
           :title="course.title"
-          class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
+          class="inline-flex items-center overflow-hidden text-ellipsis text-nowrap text-sm font-medium"
         >
           <Icon
             class="text-base"
@@ -308,7 +307,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
           />
           <span class="pl-0.5">{{ course.title }}</span>
         </h1>
-        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+        <p class="space-x-2 pt-0.5 text-xs text-neutral-400">
           <span>
             {{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
           </span>
@@ -327,32 +326,15 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
           </button>
         </p>
       </div>
-      <div class="flex items-center gap-1">
+      <div class="flex items-end gap-1">
         <UButtonGroup>
-          <!-- <UButton
-            v-if="isFailed"
-            color="white"
-            :disabled="!isFailed"
-            label="重试"
-            leading-icon="i-tabler-refresh"
-            size="xs"
-            @click="onRetryClick(course)"
-          />
           <UButton
-            v-else
-            color="white"
-            :disabled="!isDownloadable"
-            label="下载"
-            leading-icon="i-tabler-download"
-            size="xs"
-            @click="onCombination"
-          /> -->
-          <UButton
-            color="white"
+            color="neutral"
+            variant="outline"
             :disabled="!isFailed && !isDownloadable"
             :label="isFailed ? '重试' : isDownloadable ? '下载' : '生成中'"
             :leading-icon="isFailed ? 'i-tabler-refresh' : 'i-tabler-download'"
-            size="xs"
+            size="sm"
             @click="
               () => {
                 if (isFailed) {
@@ -364,15 +346,18 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
             "
           />
           <!-- retry -->
-          <UDropdown
+          <UDropdownMenu
             v-model:open="isDropdownOpen"
+            :content="{
+              align: 'end',
+            }"
             :items="[
               [
                 {
                   label: '下载原视频',
                   icon: 'i-tabler-file-plus',
                   disabled: !isDownloadable,
-                  click: () =>
+                  onClick: () =>
                     startDownload(
                       course.video_url,
                       `眩生花微课_${props.course.title}_${props.course.task_id}.mp4`
@@ -383,14 +368,14 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
                   icon: 'i-tabler-play',
                   shortcuts: ['P'],
                   disabled: !isDownloadable,
-                  click: () => (isPreviewModalOpen = true),
+                  onClick: () => (isPreviewModalOpen = true),
                 },
                 {
                   label: '编辑字幕',
                   icon: 'i-solar-subtitles-linear',
-                  shortcuts: [metaSymbol, 'D'],
+                  shortcuts: ['meta', 'D'],
                   disabled: !isDownloadable,
-                  click: () => {
+                  onClick: () => {
                     srtEditor.open()
                     isDropdownOpen = false
                   },
@@ -398,9 +383,9 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
                 {
                   label: '下载字幕',
                   icon: 'i-tabler-file-download',
-                  shortcuts: [metaSymbol, 'S'],
+                  shortcuts: ['meta', 'S'],
                   disabled: !isDownloadable,
-                  click: async () => {
+                  onClick: async () => {
                     await startDownload(
                       await fetchCourseSubtitleUrl(course),
                       `眩生花微课_${props.course.title}_${props.course.task_id}.srt`
@@ -413,110 +398,104 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
                   label: '删除记录',
                   icon: 'i-tabler-trash-x',
                   shortcuts: ['Delete'],
-                  click: () => emit('delete', course.task_id),
+                  onClick: () => emit('delete', course.task_id),
                 },
               ],
             ]"
-            :popper="{ placement: 'bottom-end' }"
           >
             <UButton
               :disabled="course.progress > 1 && course.progress < 100"
-              color="white"
-              size="xs"
+              color="neutral"
+              variant="outline"
+              size="sm"
               trailing-icon="i-tabler-dots"
             />
-          </UDropdown>
+          </UDropdownMenu>
         </UButtonGroup>
       </div>
     </div>
-    <UModal
-      v-model="isPreviewModalOpen"
-      :ui="{ width: '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>
-              <p
-                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
-              >
-                {{ course.title }}
-              </p>
-            </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isPreviewModalOpen = false"
-            />
-          </div>
-        </template>
 
-        <video
-          class="w-full rounded-sm shadow-sm"
-          controls
-          autoplay
-          :src="course.video_url"
-        />
-      </UCard>
+    <UModal v-model:open="isPreviewModalOpen">
+      <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>
+                <p
+                  class="w-full overflow-hidden text-ellipsis text-nowrap text-xs text-blue-500"
+                >
+                  {{ course.title }}
+                </p>
+              </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isPreviewModalOpen = false"
+              />
+            </div>
+          </template>
+
+          <video
+            class="rounded-xs shadow-xs w-full"
+            controls
+            autoplay
+            :src="course.video_url"
+          />
+        </UCard>
+      </template>
     </UModal>
-    <UModal v-model="isCombinationModalOpen">
-      <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>
-              <p
-                class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
+
+    <UModal v-model:open="isCombinationModalOpen">
+      <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"
               >
-                {{ course.title }}
-              </p>
+                <p>嵌入视频字幕</p>
+                <p
+                  class="w-full overflow-hidden text-ellipsis text-nowrap text-xs text-blue-500"
+                >
+                  {{ course.title }}
+                </p>
+              </div>
+              <UButton
+                class="-my-1"
+                color="neutral"
+                icon="i-tabler-x"
+                variant="ghost"
+                @click="isCombinationModalOpen = false"
+              />
             </div>
-            <UButton
-              class="-my-1"
-              color="gray"
-              icon="i-tabler-x"
-              variant="ghost"
-              @click="isCombinationModalOpen = false"
-            />
-          </div>
-        </template>
-        <UProgress
-          animation="carousel"
-          :value="combinationState"
-          :max="['嵌入字幕中', '合并完成，开始下载']"
-        >
-          <template #step-0="{ step }">
-            <span class="inline-flex items-center gap-1 text-emerald-500">
-              <UIcon name="tabler:text-caption" />
-              {{ step }}
-            </span>
           </template>
 
-          <template #step-1="{ step }">
-            <span class="inline-flex items-center gap-1 text-primary-500">
-              <UIcon name="tabler:paperclip" />
-              {{ step }}
-            </span>
-          </template>
-        </UProgress>
-      </UCard>
+          <UProgress
+            animation="carousel"
+            :value="combinationState"
+            :max="['嵌入字幕中', '合并完成，开始下载']"
+          >
+            <template #step-0="{ step }">
+              <span class="inline-flex items-center gap-1 text-emerald-500">
+                <UIcon name="tabler:text-caption" />
+                {{ step }}
+              </span>
+            </template>
+
+            <template #step-1="{ step }">
+              <span class="text-primary-500 inline-flex items-center gap-1">
+                <UIcon name="tabler:paperclip" />
+                {{ step }}
+              </span>
+            </template>
+          </UProgress>
+        </UCard>
+      </template>
     </UModal>
     <AigcGenerationSRTEditor
       ref="srtEditor"