feat: save modified subtitle

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>