🚧 wip: add video subtitle embedding

components/aigc/generation/CGTaskCard.client.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDownload } from '~/composables/useDownload'
+import gsap from 'gsap'
+import SRTEditor from '~/components/aigc/generation/SRTEditor.vue'
+
+const toast = useToast()
+const { metaSymbol } = useShortcuts()
+
+const srtEditor = ref()
+
+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+const emit = defineEmits(['delete'])
+
+defineShortcuts({
+  'p': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        isPreviewModalOpen.value = true
+      }
+    },
+  },
+  'meta_d': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        srtEditor.value.open()
+        isDropdownOpen.value = false
+      }
+    },
+  },
+  'meta_s': {
+    handler: async () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${props.course.title}_${props.course.task_id}.srt`)
+      }
+    },
+  },
+  'delete': {
+    handler: () => {
+      if (isDropdownOpen.value) {
+        emit('delete', props.course.task_id)
+      }
+    },
+  },
+})
+
+const isDropdownOpen = ref(false)
+const isPreviewModalOpen = ref(false)
+
+const stateDisplay = computed(() => {
+  if (props.course.progress === -1) return {
+    color: 'red',
+    text: '失败',
+  }
+  if (props.course.progress === 100) return {
+    color: 'green',
+    text: '完成',
+  }
+  return {
+    color: 'blue',
+    text: !!props.course.progress ? `${tweenedGenerateProgress.value.toFixed(0)}%` : '队列中',
+  }
+})
+const isFailed = computed(() => props.course.progress === -1)
+const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)
+
+const generateProgress = computed(() => {
+  return props.course.progress || 0
+})
+const tweenedGenerateProgress = ref(0)
+watch(generateProgress, (newValue) => {
+  gsap.to(tweenedGenerateProgress, {
+    duration: 5,
+    value: newValue,
+  })
+}, {
+  immediate: true,
+})
+
+const downloadProgress = ref(0)
+
+const startDownload = async (
+  url: string,
+  filename: string,
+) => {
+  downloadProgress.value = 0
+
+  const {
+    download,
+    progressEmitter,
+  } = useDownload(url, filename)
+
+  progressEmitter.on('done', () => {
+    downloadProgress.value = 100
+    toast.add({
+      title: '下载完成',
+      description: '资源下载已完成',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  })
+
+  progressEmitter.on('progress', (progress) => {
+    downloadProgress.value = progress
+  })
+
+  progressEmitter.on('error', err => {
+    downloadProgress.value = 0
+    toast.add({
+      title: '下载失败',
+      description: err.message || '下载失败，未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  })
+
+  download()
+}
+
+const copyTaskId = (extraMessage?: string) => {
+  navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${extraMessage}` : ''))
+  toast.add({
+    title: '复制成功',
+    description: '已复制任务 ID',
+    color: 'green',
+    icon: 'i-tabler-check',
+  })
+}
+
+const isCombinationModalOpen = ref(false)
+const combinationState = ref<0 | 1 | undefined>(0)
+
+const onCombination = () => {
+  isCombinationModalOpen.value = true
+  combinationState.value = undefined
+  useVideoSubtitleEmbedding(props.course.video_url, props.course.subtitle_url).then(src => {
+    startDownload(src, `眩生花微课_${props.course.title}_${props.course.task_id}_combinated.mp4`)
+    combinationState.value = 1
+  }).catch(err => {
+    toast.add({
+      title: '嵌入字幕失败',
+      description: err.message || '未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    combinationState.value = 0
+  }).finally(() => {
+    setTimeout(() => {
+      combinationState.value = 0
+      isCombinationModalOpen.value = false
+    }, 3000)
+  })
+}
+</script>
+
+<template>
+  <div
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden">
+    <div class="relative w-full aspect-video">
+      <NuxtImg class="w-full aspect-video object-cover pointer-events-none absolute inset-0" v-if="!!course.video_cover"
+        :src="course.video_cover" alt="image" loading="lazy" />
+      <div v-else
+        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern">
+        <Icon v-if="isFailed" class="text-white text-[64px] opacity-50" name="i-tabler-alert-triangle" />
+        <Icon v-else class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video" />
+      </div>
+      <div class="absolute inset-2 flex justify-end items-start">
+        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
+          <UBadge :color="stateDisplay.color" :variant="isFailed ? 'solid' : 'subtle'" class="shadow" size="sm">
+            <Icon v-if="isFailed" class="text-base mr-0.5" name="i-tabler-alert-triangle" />
+            {{ stateDisplay.text }}
+          </UBadge>
+        </UTooltip>
+      </div>
+    </div>
+    <div class="px-2 pt-1 pb-2 flex justify-between">
+      <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">
+          <Icon class="text-base" name="i-tabler-book-2" />
+          <span class="pl-0.5">{{ course.title }}</span>
+        </h1>
+        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+          <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
+          <button v-if="course.task_id" class="hover:text-primary font-medium" tabindex="-1" :title="course.task_id"
+            @click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')">
+            复制ID
+          </button>
+        </p>
+      </div>
+      <div class="flex items-center gap-1">
+        <UButtonGroup>
+          <UButton color="white" :disabled="!isDownloadable" label="下载" leading-icon="i-tabler-download" size="xs"
+            @click="onCombination" />
+          <UDropdown v-model:open="isDropdownOpen" :items="[
+            [{
+              label: '下载原视频',
+              icon: 'i-tabler-file-plus',
+              click: () => startDownload(course.video_url, `眩生花微课_${props.course.title}_${props.course.task_id}.mp4`),
+            }, {
+              label: '预览课程',
+              icon: 'i-tabler-play',
+              shortcuts: ['P'],
+              disabled: !isDownloadable,
+              click: () => isPreviewModalOpen = true,
+            }, {
+              label: '编辑字幕',
+              icon: 'i-solar-subtitles-linear',
+              shortcuts: [metaSymbol, 'D'],
+              disabled: !isDownloadable,
+              click: () => {
+                srtEditor.open()
+                isDropdownOpen = false
+              }
+            }, {
+              label: '下载字幕',
+              icon: 'i-tabler-file-download',
+              shortcuts: [metaSymbol, 'S'],
+              disabled: !isDownloadable,
+              click: async () => {
+                await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${props.course.title}_${props.course.task_id}.srt`)
+              }
+            }], [{
+              label: '删除记录',
+              icon: 'i-tabler-trash-x',
+              shortcuts: ['Delete'],
+              click: () => emit('delete', course.task_id)
+            }],
+          ]" :popper="{ placement: 'bottom-end' }">
+            <UButton :disabled="course.progress > 1 && course.progress < 100" color="white" size="xs"
+              trailing-icon="i-tabler-dots" />
+          </UDropdown>
+        </UButtonGroup>
+      </div>
+    </div>
+    <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">
+                {{ 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 shadow" controls autoplay :src="course.video_url" />
+      </UCard>
+    </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">
+                {{ course.title }}
+              </p>
+            </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>
+    </UModal>
+    <SRTEditor ref="srtEditor" :course="course" />
+  </div>
+</template>
+
+<style scoped></style>

components/aigc/generation/CGTaskCard.vue

@@ -1,296 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import dayjs from 'dayjs'
-import { useDownload } from '~/composables/useDownload'
-import gsap from 'gsap'
-import SRTEditor from '~/components/aigc/generation/SRTEditor.vue'
-
-const toast = useToast()
-const { metaSymbol } = useShortcuts()
-
-const srtEditor = ref()
-
-const props = defineProps({
-  course: {
-    type: Object as PropType<resp.gen.CourseGenItem>,
-    required: true,
-  },
-})
-const emit = defineEmits([
-  'delete',
-])
-
-defineShortcuts({
-  'p': {
-    handler: () => {
-      if (isDropdownOpen.value && isDownloadable.value) {
-        isPreviewModalOpen.value = true
-      }
-    },
-  },
-  'meta_d': {
-    handler: () => {
-      if (isDropdownOpen.value && isDownloadable.value) {
-        srtEditor.value.open()
-        isDropdownOpen.value = false
-      }
-    },
-  },
-  'meta_s': {
-    handler: async () => {
-      if (isDropdownOpen.value && isDownloadable.value) {
-        await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
-      }
-    },
-  },
-  'delete': {
-    handler: () => {
-      if (isDropdownOpen.value) {
-        emit('delete', props.course.task_id)
-      }
-    },
-  },
-})
-
-const isDropdownOpen = ref(false)
-const isPreviewModalOpen = ref(false)
-
-const stateDisplay = computed(() => {
-  if (props.course.progress === -1) return {
-    color: 'red',
-    text: '失败',
-  }
-  if (props.course.progress === 100) return {
-    color: 'green',
-    text: '完成',
-  }
-  return {
-    color: 'blue',
-    text: !!props.course.progress ? `${ tweenedGenerateProgress.value.toFixed(0) }%` : '队列中',
-  }
-})
-const isFailed = computed(() => props.course.progress === -1)
-const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)
-
-const generateProgress = computed(() => {
-  return props.course.progress || 0
-})
-const tweenedGenerateProgress = ref(0)
-watch(generateProgress, (newValue) => {
-  gsap.to(tweenedGenerateProgress, {
-    duration: 5,
-    value: newValue,
-  })
-}, {
-  immediate: true,
-})
-
-const downloadProgress = ref(0)
-
-const startDownload = async (
-  url: string,
-  filename: string,
-) => {
-  downloadProgress.value = 0
-
-  const {
-    download,
-    progressEmitter,
-  } = useDownload(url, filename)
-
-  progressEmitter.on('done', () => {
-    downloadProgress.value = 100
-    toast.add({
-      title: '下载完成',
-      description: '资源下载已完成',
-      color: 'green',
-      icon: 'i-tabler-check',
-    })
-  })
-
-  progressEmitter.on('progress', (progress) => {
-    downloadProgress.value = progress
-  })
-
-  progressEmitter.on('error', err => {
-    downloadProgress.value = 0
-    toast.add({
-      title: '下载失败',
-      description: err.message || '下载失败，未知错误',
-      color: 'red',
-      icon: 'i-tabler-alert-triangle',
-    })
-  })
-
-  download()
-}
-
-const copyTaskId = (extraMessage?: string) => {
-  navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${ extraMessage }` : ''))
-  toast.add({
-    title: '复制成功',
-    description: '已复制任务 ID',
-    color: 'green',
-    icon: 'i-tabler-check',
-  })
-}
-</script>
-
-<template>
-  <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
-  >
-    <div class="relative w-full aspect-video">
-      <NuxtImg
-        class="w-full aspect-video object-cover pointer-events-none absolute inset-0"
-        v-if="!!course.video_cover"
-        :src="course.video_cover"
-        alt="image"
-        loading="lazy"
-      />
-      <div
-        v-else
-        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
-      >
-        <Icon
-          v-if="isFailed"
-          class="text-white text-[64px] opacity-50"
-          name="i-tabler-alert-triangle"
-        />
-        <Icon v-else class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video"/>
-      </div>
-      <div class="absolute inset-2 flex justify-end items-start">
-        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
-          <UBadge
-            :color="stateDisplay.color"
-            :variant="isFailed ? 'solid' : 'subtle'"
-            class="shadow"
-            size="sm"
-          >
-            <Icon
-              v-if="isFailed"
-              class="text-base mr-0.5"
-              name="i-tabler-alert-triangle"
-            />
-            {{ stateDisplay.text }}
-          </UBadge>
-        </UTooltip>
-      </div>
-    </div>
-    <div class="px-2 pt-1 pb-2 flex justify-between">
-      <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"
-        >
-          <Icon class="text-base" name="i-tabler-book-2"/>
-          <span class="pl-0.5">{{ course.title }}</span>
-        </h1>
-        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
-          <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
-          <button
-            v-if="course.task_id"
-            class="hover:text-primary font-medium"
-            tabindex="-1"
-            :title="course.task_id"
-            @click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')"
-          >
-            复制ID
-          </button>
-        </p>
-      </div>
-      <div class="flex items-center gap-1">
-        <UButtonGroup>
-          <UButton
-            color="white"
-            :disabled="!isDownloadable"
-            :loading="downloadProgress > 0 && downloadProgress < 100"
-            :label="downloadProgress > 0 && downloadProgress < 100 ? `${downloadProgress.toFixed(0)}%` : '下载'"
-            leading-icon="i-tabler-download"
-            size="xs"
-            @click="startDownload(course.video_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.mp4`)"
-          />
-          <UDropdown
-            v-model:open="isDropdownOpen"
-            :items="[
-              [{
-                label: '预览课程',
-                icon: 'i-tabler-play',
-                shortcuts: ['P'],
-                disabled: !isDownloadable,
-                click: () => isPreviewModalOpen = true,
-              }, {
-                label: '编辑字幕',
-                icon: 'i-solar-subtitles-linear',
-                shortcuts: [metaSymbol, 'D'],
-                disabled: !isDownloadable,
-                click: () => {
-                  srtEditor.open()
-                  isDropdownOpen = false
-                }
-              }, {
-                label: '下载字幕',
-                icon: 'i-tabler-file-download',
-                shortcuts: [metaSymbol, 'S'],
-                disabled: !isDownloadable,
-                click: async () => {
-                  await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
-                }
-              }], [{
-                label: '删除记录',
-                icon: 'i-tabler-trash-x',
-                shortcuts: ['Delete'],
-                click: () => emit('delete', course.task_id)
-              }],
-            ]"
-            :popper="{ placement: 'bottom-end' }"
-          >
-            <UButton
-              :disabled="course.progress > 1 && course.progress < 100"
-              color="white"
-              size="xs"
-              trailing-icon="i-tabler-dots"
-            />
-          </UDropdown>
-        </UButtonGroup>
-      </div>
-    </div>
-    <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">
-                {{ 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 shadow"
-          controls
-          autoplay
-          :src="course.video_url"
-        />
-      </UCard>
-    </UModal>
-    <SRTEditor
-      ref="srtEditor"
-      :course="course"
-    />
-  </div>
-</template>
-
-<style scoped>
-</style>

components/aigc/generation/GBTaskCard.vue

@@ -90,7 +90,7 @@ const onClick = () => {
           <span class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
         </div>
       </div>
-      <NuxtImg v-else :src="video.video_cover" class="brightness-90 object-cover"/>
+      <NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
     </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">
@@ -109,15 +109,19 @@ const onClick = () => {
           </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-3 text-justify">{{ video.content }}</p>
+            <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="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>
+          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

components/aigc/generation/SRTEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import { encode } from '@monosky/base64'
+import { object, string, number, type InferType } from 'yup';
 
 interface Subtitle {
   start: string;
@@ -9,6 +10,8 @@ interface Subtitle {
   active?: boolean
 }
 
+type SubtitleStyleEdit = Pick<SubtitleEmbeddingOptions, 'color' | 'fontSize' | 'bottomOffset' | 'strokeStyle' | 'textShadow'>
+
 const props = defineProps({
   course: {
     type: Object as PropType<resp.gen.CourseGenItem>,
@@ -29,6 +32,33 @@ const modified = ref(false)
 
 const videoElement = ref<HTMLVideoElement | null>(null)
 
+const subtitleStyleSchema = object({
+  color: string().required(),
+  fontSize: number().required(),
+  bottomOffset: number().required(),
+  strokeStyle: string().required(),
+  textShadow: object({
+    offsetX: number().required(),
+    offsetY: number().required(),
+    blur: number().required(),
+    color: string().required(),
+  }).required(),
+})
+type subtitleStyleSchema = InferType<typeof subtitleStyleSchema>
+
+const subtitleStyleState = reactive<SubtitleStyleEdit>({
+  color: '#000',
+  fontSize: 20,
+  bottomOffset: 0,
+  strokeStyle: 'none',
+  textShadow: {
+    offsetX: 0,
+    offsetY: 0,
+    blur: 0,
+    color: '#000',
+  },
+})
+
 const loadSrt = async () => {
   isLoading.value = true
   try {
@@ -40,7 +70,7 @@ const loadSrt = async () => {
   } catch (err) {
     toast.add({
       title: '加载字幕失败',
-      description: `${ err }` || '未知错误',
+      description: `${err}` || '未知错误',
       color: 'red',
     })
   } finally {
@@ -78,7 +108,7 @@ const parseSrt = (srt: string) => {
 
 const generateSrt = () => {
   return subtitles.value.map((subtitle, index) => {
-    return `${ index + 1 }\n${ subtitle.start } --> ${ subtitle.end }\n${ subtitle.text }\n`
+    return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
   }).join('\n')
 }
 
@@ -114,7 +144,7 @@ const syncSubtitles = () => {
     subtitle.active = currentTime >= startTime && currentTime <= endTime
     // scroll active subtitle into view
     if (subtitle.active) {
-      const element = document.getElementById(`subtitle-${ subtitles.value.indexOf(subtitle) }`)!
+      const element = document.getElementById(`subtitle-${subtitles.value.indexOf(subtitle)}`)!
       const parent = element?.parentElement
       // scroll element to the center of parent
       parent?.scrollTo({
@@ -178,25 +208,14 @@ defineExpose({
 <template>
   <div>
     <USlideover v-model="isDrawerActive" :ui="{ width: 'max-w-xl' }">
-      <UCard
-        class="flex flex-col flex-1 overflow-hidden"
-        :ui="{
-          body: { base: 'overflow-auto flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800'
-        }"
-      >
+      <UCard class="flex flex-col flex-1 overflow-hidden" :ui="{
+        body: { base: 'overflow-auto flex-1' },
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800'
+      }">
         <template #header>
-          <UButton
-            color="gray"
-            variant="ghost"
-            size="sm"
-            icon="i-tabler-x"
-            class="flex sm:hidden absolute end-5 top-5 z-10"
-            square
-            padded
-            @click="isDrawerActive = false"
-          />
+          <UButton color="gray" variant="ghost" size="sm" icon="i-tabler-x"
+            class="flex sm:hidden absolute end-5 top-5 z-10" square padded @click="isDrawerActive = false" />
           <div class="flex flex-col">
             <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
               字幕编辑器
@@ -211,48 +230,87 @@ defineExpose({
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
             <defs>
               <filter id="svgSpinnersGooeyBalls20">
-                <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/>
-                <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/>
-                <feBlend in="SourceGraphic" in2="z"/>
+                <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1" />
+                <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" />
+                <feBlend in="SourceGraphic" in2="z" />
               </filter>
             </defs>
             <g filter="url(#svgSpinnersGooeyBalls20)">
               <circle cx="5" cy="12" r="4" fill="currentColor">
                 <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                         repeatCount="indefinite" values="5;8;5"/>
+                  repeatCount="indefinite" values="5;8;5" />
               </circle>
               <circle cx="19" cy="12" r="4" fill="currentColor">
                 <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                         repeatCount="indefinite" values="19;16;19"/>
+                  repeatCount="indefinite" values="19;16;19" />
               </circle>
               <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
-                                values="0 12 12;360 12 12"/>
+                values="0 12 12;360 12 12" />
             </g>
           </svg>
         </div>
-        <div v-else class="flex flex-col h-full overflow-hidden overscroll-y-none overshadow">
+        <div v-else class="flex flex-col h-full gap-2 overflow-hidden overscroll-y-none overshadow">
           <div class="relative">
             <div class="absolute w-fit mx-auto inset-x-0 bottom-3">
               <span class="text-white font-bold text-shadow-lg">
                 {{ subtitles.find(sub => sub.active)?.text }}
               </span>
             </div>
-            <video
-              controls
-              ref="videoElement"
-              class="rounded"
-              style="-webkit-user-drag: none;"
-              :src="course.video_url"
-              @timeupdate="syncSubtitles"
-            />
+            <video controls ref="videoElement" class="rounded" style="-webkit-user-drag: none;" :src="course.video_url"
+              @timeupdate="syncSubtitles" />
           </div>
-          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto mt-2 space-y-0.5 scroll-smooth relative">
-            <li
-              v-for="(subtitle, index) in subtitles"
-              :key="index"
-              :id="'subtitle-' + index"
-            >
-              <div :class="{'text-primary': subtitle.active}">
+          <UAccordion :items="[{ label: '字幕选项' }]" color="gray" size="lg">
+            <template #item>
+              <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
+                <div class="w-full flex justify-center items-center">
+                  <div class="border-2 dark:border-neutral-700 rounded-md w-full aspect-video relative overflow-hidden">
+                    <img class="object-cover w-full h-full rounded-md"
+                      src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-04/9ed1e5c0133824f0bcf79d1ad9e9ecbb.png" />
+                    <span class="absolute font-sans font-bold bottom-0 left-1/2 transform -translate-x-1/2" :style="{
+                      color: '#fff',
+                      textShadow: '0 0 5px #000',
+                      fontSize: '20px',
+                      lineHeight: '1',
+                      bottom: '10px',
+                    }">
+                      字幕样式预览
+                    </span>
+                  </div>
+                </div>
+                <UForm :schema="subtitleStyleSchema" :state="subtitleStyleState" class="flex flex-col gap-4">
+                  <div class="flex gap-4">
+                    <UFormGroup label="字幕颜色" name="fontColor" class="w-full">
+                      <USelectMenu :options="[{
+                        label: '黑色',
+                        value: '#000',
+                      }, {
+                        label: '白色',
+                        value: '#fff',
+                      }]" option-attribute="label" value-attribute="value" />
+                    </UFormGroup>
+                    <UFormGroup label="字幕效果" name="effect" class="w-full">
+                      <USelectMenu :options="[{
+                        label: '阴影',
+                        value: 'shadow',
+                      }, {
+                        label: '描边',
+                        value: 'stroke',
+                      }]" option-attribute="label" value-attribute="value" />
+                    </UFormGroup>
+                  </div>
+                  <UFormGroup :label="`字幕大小`" name="fontSize">
+                    <URange :max="40" :min="20" :step="1" class="pt-4" size="sm" />
+                  </UFormGroup>
+                  <UFormGroup label="字幕偏移量" name="offset">
+                    <URange :max="30" :min="0" :step="1" class="pt-4" size="sm" />
+                  </UFormGroup>
+                </UForm>
+              </div>
+            </template>
+          </UAccordion>
+          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto space-y-0.5 scroll-smooth relative">
+            <li v-for="(subtitle, index) in subtitles" :key="index" :id="'subtitle-' + index">
+              <div :class="{ 'text-primary': subtitle.active }">
                 <span class="text-xs font-medium opacity-60">
                   {{ formatTimeToDayjs(subtitle.start).format('HH:mm:ss') }}
                   -
@@ -261,18 +319,11 @@ defineExpose({
                     [{{ formatTimeToDayjs(subtitle.end).diff(formatTimeToDayjs(subtitle.start), 'second') }}s]
                   </span>
                 </span>
-                <UInput
-                  v-model="subtitle.text"
-                  class="w-full"
-                  placeholder="请输入字幕内容"
-                  :name="'subtitle-' + index"
-                  :autofocus="false"
-                  :color="subtitle.active ? 'primary' : undefined"
-                  @click="onSubtitleInputClick(subtitle)"
-                  @input="() => { if(!modified) modified = true }"
-                >
+                <UInput v-model="subtitle.text" class="w-full" placeholder="请输入字幕内容" :name="'subtitle-' + index"
+                  :autofocus="false" :color="subtitle.active ? 'primary' : undefined"
+                  @click="onSubtitleInputClick(subtitle)" @input="() => { if (!modified) modified = true }">
                   <template #trailing>
-                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled"/>
+                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled" />
                   </template>
                 </UInput>
               </div>