refactor(deps): migrate to nuxt v4

app/components/aigc/generation/GBTaskCard.vue

@@ -0,0 +1,627 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  video: {
+    type: Object as PropType<GBVideoItem>,
+    required: true,
+  },
+})
+
+const emit = defineEmits({
+  delete: (video: GBVideoItem) => video,
+})
+
+const dayjs = useDayjs()
+const toast = useToast()
+
+const isFailed = computed(() => {
+  return props.video.progress === -1
+})
+const isPreviewModalOpen = ref(false)
+const isVideoBackgroundPreviewOpen = ref(false)
+const isFullContentOpen = ref(false)
+const downloadingState = reactive({
+  subtitle: 0,
+  video: 0,
+})
+
+// 背景选择相关状态
+const selectedBackgroundFile = ref<File | null>(null)
+const selectedBackgroundPreview = ref<string>('')
+const isCombinatorLoading = ref(false)
+const compositingProgress = ref(0)
+const compositingPhase = ref<
+  'loading' | 'analyzing' | 'preparing' | 'executing' | 'finalizing'
+>('loading')
+const combinatorError = ref<string>('')
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const compositedVideoBlob = ref<Blob | null>(null)
+
+// 阶段显示文本
+const phaseText = computed(() => {
+  const phaseMap: Record<typeof compositingPhase.value, string> = {
+    loading: '加载资源...',
+    analyzing: '分析图片...',
+    preparing: '准备合成...',
+    executing: '合成中...',
+    finalizing: '完成处理...',
+  }
+  return phaseMap[compositingPhase.value]
+})
+
+const handleBackgroundFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+
+  if (!file) return
+
+  // 验证文件类型
+  if (!file.type.startsWith('image/')) {
+    toast.add({
+      title: '文件类型错误',
+      description: '请选择一个图片文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+
+  selectedBackgroundFile.value = file
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    selectedBackgroundPreview.value = e.target?.result as string
+  }
+  reader.readAsDataURL(file)
+  combinatorError.value = ''
+  compositedVideoBlob.value = null
+}
+
+const composeBackgroundVideo = async () => {
+  if (!selectedBackgroundFile.value) {
+    toast.add({
+      title: '未选择图片',
+      description: '请先选择一个背景图片',
+      color: 'orange',
+      icon: 'i-tabler-alert-circle',
+    })
+    return
+  }
+
+  try {
+    isCombinatorLoading.value = true
+    compositingProgress.value = 0
+    combinatorError.value = ''
+
+    // 使用 FFmpeg WASM 进行视频背景合成
+    const resultBlob = await useVideoBackgroundCompositing(
+      props.video.video_alpha_url!,
+      selectedBackgroundFile.value,
+      {
+        onProgress: (info) => {
+          compositingProgress.value = info.progress
+          compositingPhase.value = info.phase
+        },
+      }
+    )
+
+    compositedVideoBlob.value = resultBlob
+
+    toast.add({
+      title: '合成成功',
+      description: '背景已成功合成，可预览或下载',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  } catch (err: any) {
+    combinatorError.value = err.message || '合成失败，请重试'
+    toast.add({
+      title: '合成失败',
+      description: combinatorError.value,
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  } finally {
+    isCombinatorLoading.value = false
+  }
+}
+
+const downloadCompositedVideo = () => {
+  if (!compositedVideoBlob.value) return
+
+  const url = URL.createObjectURL(compositedVideoBlob.value)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${props.video.title || props.video.task_id}_composited.mp4`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+const compositedVideoUrl = computed(() => {
+  return compositedVideoBlob.value
+    ? URL.createObjectURL(compositedVideoBlob.value)
+    : ''
+})
+
+const startDownload = (url: string, filename: string) => {
+  if (url.endsWith('.ass')) {
+    downloadingState.subtitle = 0
+  } else {
+    downloadingState.video = 0
+  }
+
+  const { download, progressEmitter } = useDownload(url, filename)
+
+  progressEmitter.on('progress', (progress) => {
+    if (url.endsWith('.ass')) {
+      downloadingState.subtitle = progress
+    } else {
+      downloadingState.video = progress
+    }
+    console.log(downloadingState)
+  })
+
+  progressEmitter.on('done', () => {
+    if (url.endsWith('.ass')) {
+      downloadingState.subtitle = 100
+    } else {
+      downloadingState.video = 100
+    }
+    toast.add({
+      title: '下载完成',
+      description: '资源下载已完成',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  })
+
+  progressEmitter.on('error', (err) => {
+    if (url.endsWith('.ass')) {
+      downloadingState.subtitle = 0
+    } else {
+      downloadingState.video = 0
+    }
+    toast.add({
+      title: '下载失败',
+      description: err.message || '下载失败，未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  })
+
+  download()
+}
+</script>
+
+<template>
+  <div
+    class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
+  >
+    <div
+      class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group"
+    >
+      <div
+        v-if="!video.video_cover"
+        class="w-full h-full flex flex-col justify-center items-center gap-2"
+        :class="!isFailed ? 'bg-primary' : 'bg-rose-400'"
+      >
+        <UIcon
+          v-if="!isFailed"
+          class="animate-spin text-4xl text-white"
+          name="tabler:loader"
+        />
+        <UIcon
+          v-else
+          class="text-4xl text-white"
+          name="tabler:alert-triangle"
+        />
+        <div class="flex flex-col items-center gap-0.5">
+          <span class="text-sm font-bold text-white/90">
+            {{ isFailed ? '生成失败' : '火速生成中...' }}
+          </span>
+          <span
+            v-if="!isFailed"
+            class="text-xs font-medium text-white/50"
+          >
+            {{ video.progress }}%
+          </span>
+        </div>
+      </div>
+      <NuxtImg
+        v-else
+        :src="video.video_cover"
+        class="w-full h-full brightness-90 object-cover"
+      />
+      <div
+        class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300"
+      >
+        <div
+          class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer"
+          @click="isPreviewModalOpen = true"
+        >
+          <Icon
+            name="i-tabler-play"
+            class="text-white text-3xl"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex-1 flex flex-col justify-between gap-2">
+      <div
+        class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5"
+      >
+        <ul class="grid grid-cols-2 gap-1.5">
+          <li class="col-span-2">
+            <!--            <h2 class="text-2xs font-medium text-primary-500">标题</h2>-->
+            <p class="text-sm font-bold line-clamp-1">
+              {{ video.title || '无标题' }}
+            </p>
+          </li>
+          <li class="">
+            <h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
+            <p class="text-xs line-clamp-1">
+              {{
+                video.complete_time
+                  ? dayjs(video.complete_time * 1000).format(
+                      'YYYY-MM-DD HH:mm:ss'
+                    )
+                  : '进行中'
+              }}
+            </p>
+          </li>
+          <li class="">
+            <h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
+            <p class="text-xs line-clamp-1">
+              {{
+                video.duration
+                  ? dayjs.duration(video.duration || 0).format('HH:mm:ss')
+                  : '进行中'
+              }}
+            </p>
+          </li>
+          <li
+            class="col-span-2 cursor-pointer"
+            @click="isFullContentOpen = true"
+          >
+            <h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
+            <p class="text-xs line-clamp-4 text-justify">{{ video.content }}</p>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap"
+      >
+        <!--        <div-->
+        <!--          class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
+        <!--          <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
+        <!--          <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
+        <!--        </div>-->
+        <div
+          class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none"
+        >
+          <p class="text-2xs text-neutral-400 dark:text-neutral-500">
+            {{ video.digital_human_id }}
+          </p>
+        </div>
+        <div class="space-x-2">
+          <UButton
+            class="transition-all sm:opacity-0 sm:translate-x-4 sm:pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto"
+            color="red"
+            icon="i-tabler-trash"
+            size="xs"
+            variant="soft"
+            @click="emit('delete', video)"
+          />
+          <UButtonGroup size="xs">
+            <UButton
+              :label="
+                downloadingState.subtitle > 0 && downloadingState.subtitle < 100
+                  ? `${downloadingState.subtitle.toFixed(0)}%`
+                  : '字幕'
+              "
+              :loading="
+                downloadingState.subtitle > 0 && downloadingState.subtitle < 100
+              "
+              :disabled="!video.subtitle"
+              color="primary"
+              leading-icon="i-tabler-file-download"
+              variant="soft"
+              @click="
+                startDownload(
+                  video.subtitle!,
+                  (video.title || video.task_id) + '.ass'
+                )
+              "
+            />
+            <UDropdown
+              :items="[
+                [
+                  {
+                    label: '绿幕视频下载',
+                    icon: 'tabler:download',
+                    click: () => {
+                      startDownload(
+                        video.video_url!,
+                        (video.title || video.task_id) + '.mp4'
+                      )
+                    },
+                  },
+                  {
+                    label: '合成背景图片',
+                    icon: 'tabler:background',
+                    click: () => {
+                      isVideoBackgroundPreviewOpen = true
+                    },
+                    disabled: !video.video_alpha_url,
+                  },
+                ],
+              ]"
+            >
+              <UButton
+                :label="
+                  downloadingState.video > 0 && downloadingState.video < 100
+                    ? `${downloadingState.video.toFixed(0)}%`
+                    : '视频'
+                "
+                :loading="
+                  downloadingState.video > 0 && downloadingState.video < 100
+                "
+                :disabled="!video.video_url"
+                color="primary"
+                leading-icon="i-tabler-download"
+                variant="soft"
+              />
+            </UDropdown>
+          </UButtonGroup>
+        </div>
+      </div>
+    </div>
+    <!-- Full video content -->
+    <UModal v-model="isFullContentOpen">
+      <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"
+            >
+              {{ video.title || '无标题' }}
+              <span class="block text-xs text-primary">驱动内容</span>
+            </h3>
+            <UButton
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isFullContentOpen = false"
+            />
+          </div>
+        </template>
+
+        <div>
+          <article class="prose">
+            <p class="text-justify">{{ video.content }}</p>
+          </article>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="primary"
+              @click="isFullContentOpen = false"
+            >
+              关闭
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+    <UModal v-model="isPreviewModalOpen">
+      <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"
+              >
+                {{ video.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 shadow"
+          controls
+          autoplay
+          :src="video.video_url"
+        />
+      </UCard>
+    </UModal>
+    <UModal v-model="isVideoBackgroundPreviewOpen">
+      <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"
+              >
+                {{ video.title }}
+              </p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isVideoBackgroundPreviewOpen = false"
+            />
+          </div>
+        </template>
+
+        <div class="space-y-4">
+          <!-- 背景图片选择区域 -->
+          <div
+            v-if="!compositedVideoBlob && !isCombinatorLoading"
+            class="border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-lg p-4"
+          >
+            <div class="space-y-3">
+              <div class="text-sm font-medium text-gray-900 dark:text-white">
+                选择背景图片
+              </div>
+
+              <!-- 预览区域 -->
+              <!-- <div v-if="selectedBackgroundPreview" class="relative w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
+                <img :src="selectedBackgroundPreview" alt="背景预览" class="w-full h-full object-cover" />
+              </div>
+              <div v-else class="w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800 flex flex-col items-center justify-center gap-2">
+                <UIcon class="text-3xl text-neutral-400" name="tabler:photo" />
+                <span class="text-xs text-neutral-400">点击选择图片</span>
+              </div> -->
+
+              <!-- 文件输入 -->
+              <input
+                ref="fileInputRef"
+                type="file"
+                accept="image/*"
+                class="hidden"
+                @change="handleBackgroundFileSelect"
+              />
+
+              <!-- 选择按钮 -->
+              <UButton
+                block
+                color="primary"
+                icon="i-tabler-photo-plus"
+                label="选择图片"
+                variant="soft"
+                @click="fileInputRef?.click()"
+              />
+
+              <!-- 选中的文件名 -->
+              <div
+                v-if="selectedBackgroundFile"
+                class="text-xs text-neutral-500 dark:text-neutral-400"
+              >
+                已选择: {{ selectedBackgroundFile.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 错误提示 -->
+          <UAlert
+            v-if="combinatorError"
+            color="red"
+            icon="i-tabler-alert-triangle"
+            title="合成失败"
+            :description="combinatorError"
+          />
+
+          <!-- 合成进度 -->
+          <div
+            v-if="isCombinatorLoading"
+            class="space-y-2"
+          >
+            <div class="flex justify-between items-center">
+              <span class="text-sm font-medium text-gray-900 dark:text-white">
+                {{ phaseText }}
+              </span>
+              <span class="text-xs text-neutral-500">
+                {{ compositingProgress }}%
+              </span>
+            </div>
+            <UProgress :value="compositingProgress" />
+          </div>
+
+          <!-- 合成预览 -->
+          <div
+            v-if="compositedVideoBlob"
+            class="space-y-2"
+          >
+            <div class="text-sm font-medium text-gray-900 dark:text-white">
+              视频预览
+            </div>
+            <video
+              class="w-full rounded-lg shadow bg-black"
+              controls
+              autoplay
+              muted
+              :src="compositedVideoUrl"
+            />
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="gray"
+              label="取消"
+              :disabled="isCombinatorLoading"
+              @click="isVideoBackgroundPreviewOpen = false"
+            />
+            <UButton
+              v-if="compositedVideoBlob"
+              color="gray"
+              label="重新选择"
+              @click="
+                () => {
+                  selectedBackgroundFile = null
+                  selectedBackgroundPreview = ''
+                  compositedVideoBlob = null
+                  combinatorError = ''
+                  isCombinatorLoading = false
+                }
+              "
+            />
+            <UButton
+              v-if="compositedVideoBlob"
+              color="green"
+              icon="i-tabler-download"
+              label="下载合成视频"
+              @click="downloadCompositedVideo"
+            />
+            <UButton
+              v-else
+              :disabled="!selectedBackgroundFile || isCombinatorLoading"
+              :loading="isCombinatorLoading"
+              color="primary"
+              icon="i-tabler-wand"
+              :label="isCombinatorLoading ? '合成中' : '开始合成'"
+              @click="composeBackgroundVideo"
+            />
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped></style>