feat: save modified subtitle

components/aigc/course-generate/CGTaskCard.vue

@@ -37,9 +37,9 @@ defineShortcuts({
     },
   },
   'meta_s': {
-    handler: () => {
+    handler: async () => {
       if (isDropdownOpen.value && isDownloadable.value) {
-        startDownload(props.course.subtitle_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
+        await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
       }
     },
   },
@@ -220,7 +220,7 @@ const copyTaskId = (extraMessage?: string) => {
                 disabled: !isDownloadable,
                 click: () => isPreviewModalOpen = true,
               }, {
-                label: '查看字幕',
+                label: '编辑字幕',
                 icon: 'i-solar-subtitles-linear',
                 shortcuts: [metaSymbol, 'D'],
                 disabled: !isDownloadable,
@@ -233,8 +233,8 @@ const copyTaskId = (extraMessage?: string) => {
                 icon: 'i-tabler-file-download',
                 shortcuts: [metaSymbol, 'S'],
                 disabled: !isDownloadable,
-                click: () => {
-                  startDownload(course.subtitle_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
+                click: async () => {
+                  await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
                 }
               }], [{
                 label: '删除记录',

components/aigc/course-generate/SRTEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
+import { encode } from '@monosky/base64'
 
 interface Subtitle {
   start: string;
@@ -17,18 +18,22 @@ const props = defineProps({
 
 const dayjs = useDayjs()
 const toast = useToast()
+const loginState = useLoginState()
 
 const isDrawerActive = ref(false)
 const isLoading = ref(true)
+const isSaving = ref(false)
 const rawSrt = ref<string | null>(null)
 const subtitles = ref<Subtitle[]>([])
+const modified = ref(false)
 
 const videoElement = ref<HTMLVideoElement | null>(null)
 
 const loadSrt = async () => {
   isLoading.value = true
   try {
-    const response = await fetch(props.course.subtitle_url)
+    // const response = await fetch(props.course.subtitle_url)
+    const response = await fetch(await fetchCourseSubtitleUrl(props.course))
     const text = await response.text()
     rawSrt.value = text
     parseSrt(text)
@@ -129,6 +134,30 @@ const onSubtitleInputClick = (subtitle: Subtitle) => {
   videoElement.value.pause()
 }
 
+const saveNewSubtitle = () => {
+  isSaving.value = true
+  const encodedSubtitle = encode(generateSrt())
+  useFetchWrapped<
+    req.gen.CourseSubtitleCreate & AuthedRequest,
+    BaseResponse<resp.gen.CourseSubtitleCreate>
+  >('App.Digital_VideoSubtitle.CreateFile', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    sub_type: 1,
+    sub_content: encodedSubtitle,
+    task_id: props.course?.task_id,
+  }).then(_ => {
+    modified.value = false
+    toast.add({
+      color: 'green',
+      title: '字幕已保存',
+      description: '修改后的字幕文件已保存',
+    })
+  }).finally(() => {
+    isSaving.value = false
+  })
+}
+
 onMounted(() => {
   if (rawSrt.value) {
     parseSrt(rawSrt.value)
@@ -240,6 +269,7 @@ defineExpose({
                   :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"/>
@@ -252,11 +282,12 @@ defineExpose({
 
         <template #footer>
           <!-- TODO: 24/07/02 Modified subtitles upload -->
-          <UButton @click="() => {
-            console.log(generateSrt())
-          }">
-            Generate
-          </UButton>
+          <div class="flex justify-end items-center gap-2">
+            <span v-if="modified" class="text-sm text-yellow-500 font-medium">已更改但未保存</span>
+            <UButton :disabled="!modified" :loading="isSaving" @click="saveNewSubtitle">
+              保存{{ isSaving ? '中' : '' }}
+            </UButton>
+          </div>
         </template>
       </UCard>
     </USlideover>