✨ feat(SRTEditor): 添加导出视频功能的状态管理

components/aigc/generation/SRTEditor.vue

@@ -27,6 +27,7 @@ const isSaving = ref(false)
 const rawSrt = ref<string | null>(null)
 const subtitles = ref<Subtitle[]>([])
 const modified = ref(false)
+const isExporting = ref(false)
 
 const videoElement = ref<HTMLVideoElement | null>(null)
 
@@ -175,7 +176,7 @@ const saveNewSubtitle = () => {
 }
 
 const exportVideo = () => {
-  isSaving.value = true
+  isExporting.value = true
   useVideoSubtitleEmbedding(props.course.video_url, props.course.subtitle_url, {
     color: subtitleStyleState.color,
     fontSize: subtitleStyleState.fontSize,
@@ -196,7 +197,7 @@ const exportVideo = () => {
     const { download } = useDownload(blobUrl, 'combined_video.mp4')
     download()
   }).finally(() => {
-    isSaving.value = false
+    isExporting.value = false
   })
 }
 
@@ -219,7 +220,7 @@ defineExpose({
 
 <template>
   <div>
-    <USlideover v-model="isDrawerActive" :ui="{ width: 'max-w-xl' }">
+    <USlideover v-model="isDrawerActive" :prevent-close="modified" :ui="{ width: 'max-w-xl' }">
       <UCard class="flex flex-col flex-1 overflow-hidden" :ui="{
         body: { base: 'overflow-auto flex-1' },
         ring: '',
@@ -356,10 +357,10 @@ defineExpose({
         <template #footer>
           <div class="flex justify-end items-center gap-2">
             <span v-if="modified" class="text-sm text-yellow-500 font-medium">已更改但未保存</span>
-            <UButton :loading="isSaving" variant="soft" icon="i-tabler-file-export" @click="exportVideo">
+            <UButton :loading="isExporting" variant="soft" icon="i-tabler-file-export" @click="exportVideo">
               导出视频
             </UButton>
-            <UButton :disabled="!modified" :loading="isSaving" icon="i-tabler-device-floppy" @click="saveNewSubtitle">
+            <UButton :disabled="isExporting || !modified" :loading="isSaving" icon="i-tabler-device-floppy" @click="saveNewSubtitle">
               保存{{ isSaving ? '中' : '' }}
             </UButton>
           </div>