chore: 修改视频配置时才保存草稿

src/store/modules/creation.ts

@@ -7,10 +7,7 @@ function defaultDigitalCreation(): DraftConfig {
     id: null,
     coverUrl: null,
     draftName: '',
-    videoName: '',
-    videoDuration: null,
     taskType: TaskType.BASE_VIDEO,
-    requestId: null,
     inputImageUrl: null,
     driveType: DriveType.TEXT,
     text: '',
@@ -19,16 +16,14 @@ function defaultDigitalCreation(): DraftConfig {
     volume: '5',
     pitch: '5',
     inputAudioUrl: null,
-    callbackUrl: null,
     figureId: null,
     width: 720,
     height: 1280,
-    transparent: 'N',
     cameraId: null,
     x: 0,
     y: 0,
-    w: 0,
-    h: 0,
+    w: 1080,
+    h: 1920,
     subtitlePolicy: 'SRT',
     enabled: 'N',
     backgroundImageUrl: null,

src/store/types/creation.ts

@@ -68,10 +68,7 @@ export interface DraftConfig {
   id: number | null
   coverUrl: string | null
   draftName: string
-  videoName: string
-  videoDuration: number | null
   taskType: TaskType
-  requestId: string | null
   inputImageUrl: string | null
   driveType: DriveType
   text: string
@@ -80,11 +77,9 @@ export interface DraftConfig {
   volume: string
   pitch: string
   inputAudioUrl: string | null
-  callbackUrl: string | null
   figureId: string | null
   width: number
   height: number
-  transparent: string
   cameraId: number | null
   x: number
   y: number

src/views/creation/layout/header-bar.vue

@@ -4,6 +4,7 @@ import { fetchUniversalCurrency } from '@/apis/user'
 import { useAudioSettingStore } from '@/store/modules/audio-setting'
 import { useDigitalCreationStore } from '@/store/modules/creation'
 import { BaseVideoTask, DraftConfig } from '@/store/types/creation'
+import { isEqual } from 'lodash-es'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -11,17 +12,19 @@ const router = useRouter()
 const audioSettingStore = useAudioSettingStore()
 const digitalCreationStore = useDigitalCreationStore()
 const draftName = ref('')
+const videoName = ref('')
+const transparent = ref('N')
 const userCurrency = ref(0)
 const editDraftName = ref(false)
 const autoSaveSuccess = ref(false)
 const showExportModal = ref(false)
 const isExporting = ref(false)
-// const ratioValue = ref(720)
+const savedConfig = ref<DraftConfig>()
 const ratioList = [
   { value: 720, label: '720p' },
   { value: 1080, label: '1080p' },
 ]
-const transparent = [
+const transparentList = [
   { value: 'N', label: '全部' },
   { value: 'Y', label: '僅數字人（透明背景）' },
 ]
@@ -67,12 +70,17 @@ watch(
 onMounted(() => {
   getUniversalCurrency()
   timer = setInterval(() => {
-    !isExporting.value && saveDraft()
+    const unsavedConfig = { ...digitalCreationStore.$state, modifiedTime: '' }
+    const isModified = !isEqual(unsavedConfig, savedConfig.value)
+    if (!savedConfig.value || (isModified && !isExporting.value)) {
+      saveDraft()
+    }
   }, 5000)
 })
 
-onUnmounted(() => {
-  saveDraft()
+onUnmounted(async () => {
+  await saveDraft()
+  digitalCreationStore.resetDigitalCreation()
   clearInterval(timer)
   timer = null
 })
@@ -99,6 +107,8 @@ async function saveDraft(autoSave: boolean = true) {
   if (res.code === 0) {
     autoSave ? (autoSaveSuccess.value = true) : window.$message.success('保存成功')
     digitalCreationStore.updateDigitalCreation(res.data)
+    const temp: DraftConfig = { ...res.data, modifiedTime: '' }
+    savedConfig.value = temp
   }
 }
 
@@ -111,7 +121,7 @@ async function calculateConsumption() {
 
 // 导出视频
 function confirmExport() {
-  if (!digitalCreationStore.videoName) {
+  if (!videoName.value) {
     window.$message.error('請輸入視頻名稱')
     return false
   }
@@ -126,10 +136,10 @@ async function createBaseVideoTask() {
   isExporting.value = true
   const payload: BaseVideoTask = {
     draftId: digitalCreationStore.id!,
-    videoName: digitalCreationStore.videoName,
+    videoName: videoName.value,
     width: digitalCreationStore.width,
     height: digitalCreationStore.height,
-    transparent: digitalCreationStore.transparent,
+    transparent: transparent.value,
     videoType: 'mp4',
     audioUrl: digitalCreationStore.inputAudioUrl!,
   }
@@ -186,7 +196,7 @@ async function getUniversalCurrency() {
   <n-modal v-model:show="showExportModal" preset="dialog" title="導出視頻" @after-leave="isExporting = false">
     <n-form ref="formRef" :label-width="100" label-placement="left">
       <n-form-item label="視頻名稱" required>
-        <n-input v-model:value="digitalCreationStore.videoName" placeholder="請輸入視頻名稱" />
+        <n-input v-model:value="videoName" placeholder="請輸入視頻名稱" />
       </n-form-item>
       <n-form-item label="視頻分辨率" required>
         <n-radio-group v-model:value="ratioValue" name="ratio">
@@ -198,9 +208,9 @@ async function getUniversalCurrency() {
         </n-radio-group>
       </n-form-item>
       <n-form-item label="導出範圍" required>
-        <n-radio-group v-model:value="digitalCreationStore.transparent" name="transparent">
+        <n-radio-group v-model:value="transparent" name="transparent">
           <n-space>
-            <n-radio v-for="item in transparent" :key="item.value" :value="item.value">
+            <n-radio v-for="item in transparentList" :key="item.value" :value="item.value">
               {{ item.label }}
             </n-radio>
           </n-space>

src/views/creation/layout/index.vue

 <script setup lang="ts">
 import { fetchDraftConfigById } from '@/apis/digital-creation'
+import { fetchGetTaskConfig } from '@/apis/opus'
 import { fetchDigitalHumanTemplateStatus } from '@/apis/template'
 import { useDigitalCreationStore } from '@/store/modules/creation'
-import { DraftConfig, LangType } from '@/store/types/creation'
+import { DraftConfig } from '@/store/types/creation'
 import { DigitalTemplate } from '@/store/types/template'
+import { formatDateTime } from '@/utils/date-formatter'
 import { onMounted } from 'vue'
 import HeaderBar from './header-bar.vue'
 import MainContent from './main-content.vue'
 import SideBar from './side-bar.vue'
-import { fetchGetTaskConfig } from '@/apis/opus'
 
 interface Props {
   templateId?: string
@@ -37,30 +38,25 @@ async function getDigitalTemplate(id: string) {
     const draftConfig: DraftConfig = {
       id: null,
       coverUrl: digitalTemplate.coverUrl,
-      draftName: `新建數字人視頻`,
-      videoName: '',
-      videoDuration: null,
+      draftName: '新建數字人視頻' + formatDateTime(new Date()),
       taskType: digitalTemplate.taskType,
-      requestId: digitalTemplate.requestId,
       inputImageUrl: digitalTemplate.digitalHumanImageUrl,
       driveType: digitalTemplate.driveType,
       text: digitalTemplate.text,
-      person: digitalTemplate.ttsParams?.person || null,
-      speed: digitalTemplate.ttsParams?.speed || '5',
-      volume: digitalTemplate.ttsParams?.volume || '5',
-      pitch: digitalTemplate.ttsParams?.pitch || '5',
+      person: digitalTemplate.ttsParams?.person || digitalCreationStore.person,
+      speed: digitalTemplate.ttsParams?.speed || digitalCreationStore.speed,
+      volume: digitalTemplate.ttsParams?.volume || digitalCreationStore.volume,
+      pitch: digitalTemplate.ttsParams?.pitch || digitalCreationStore.pitch,
       inputAudioUrl: digitalTemplate.inputAudioUrl,
-      callbackUrl: digitalTemplate.callbackUrl,
       figureId: digitalTemplate.figureId,
-      width: digitalTemplate.videoParams?.width || 1080,
-      height: digitalTemplate.videoParams?.height || 1920,
-      transparent: digitalTemplate.videoParams?.transparent ? 'Y' : 'N',
+      width: digitalTemplate.videoParams?.width || digitalCreationStore.width,
+      height: digitalTemplate.videoParams?.height || digitalCreationStore.height,
       cameraId: digitalTemplate.dhParams?.cameraId || null,
-      x: digitalTemplate.dhParams?.position.x || 0,
-      y: digitalTemplate.dhParams?.position.y || 0,
-      w: digitalTemplate.dhParams?.position.w || 0,
-      h: digitalTemplate.dhParams?.position.h || 0,
-      subtitlePolicy: digitalTemplate.subtitleParams?.subtitlePolicy || 'SRT',
+      x: digitalTemplate.dhParams?.position.x || digitalCreationStore.x,
+      w: digitalTemplate.dhParams?.position.w || digitalCreationStore.w,
+      y: digitalTemplate.dhParams?.position.y || digitalCreationStore.y,
+      h: digitalTemplate.dhParams?.position.h || digitalCreationStore.h,
+      subtitlePolicy: digitalTemplate.subtitleParams?.subtitlePolicy || digitalCreationStore.subtitlePolicy,
       enabled: digitalTemplate.subtitleParams?.enabled ? 'Y' : 'N',
       backgroundImageUrl: digitalTemplate.backgroundImageUrl,
       autoAnimoji: digitalTemplate.autoAnimoji ? 'Y' : 'N',
@@ -70,7 +66,7 @@ async function getDigitalTemplate(id: string) {
       logoUrl: digitalTemplate.logoParams?.logoUrl || null,
       bgmUrl: digitalTemplate.bgmParams?.bgmUrl || null,
       materialUrl: digitalTemplate.materialUrl,
-      pronunciationLanguage: LangType.CANTONESE,
+      pronunciationLanguage: digitalCreationStore.pronunciationLanguage,
     }
     digitalCreationStore.updateDigitalCreation(draftConfig)
   }
@@ -86,7 +82,10 @@ async function getDraft(id: string) {
 async function getTaskConfig(id: string) {
   const res = await fetchGetTaskConfig<DraftConfig>(id)
   if (res.code === 0) {
-    digitalCreationStore.updateDigitalCreation(res.data)
+    digitalCreationStore.updateDigitalCreation({
+      ...res.data,
+      draftName: '新建數字人視頻' + formatDateTime(new Date()),
+    })
   }
 }
 </script>