fix: 保存视频草稿画幅比例

src/store/modules/creation.ts

-import { DraftConfig, LangType } from '@/store/types/creation'
+import { DraftConfig, LangType, ScreenType } from '@/store/types/creation'
 import { DriveType, TaskType } from '@/store/types/template'
 import { defineStore } from 'pinia'
 
@@ -7,6 +7,7 @@ function defaultDigitalCreation(): DraftConfig {
     id: null,
     coverUrl: null,
     draftName: '',
+    pronunciationLanguage: LangType.CANTONESE,
     taskType: TaskType.BASE_VIDEO,
     inputImageUrl: null,
     driveType: DriveType.TEXT,
@@ -17,6 +18,7 @@ function defaultDigitalCreation(): DraftConfig {
     pitch: '5',
     inputAudioUrl: null,
     figureId: null,
+    pageLayout: ScreenType.PORTRAIT,
     width: 720,
     height: 1280,
     cameraId: null,
@@ -34,7 +36,6 @@ function defaultDigitalCreation(): DraftConfig {
     logoUrl: null,
     bgmUrl: null,
     materialUrl: null,
-    pronunciationLanguage: LangType.CANTONESE,
   }
 }
 

src/store/types/creation.ts

@@ -72,6 +72,7 @@ export interface DraftConfig {
   id: number | null
   coverUrl: string | null
   draftName: string
+  pronunciationLanguage: LangType
   taskType: TaskType
   inputImageUrl: string | null
   driveType: DriveType
@@ -82,6 +83,7 @@ export interface DraftConfig {
   pitch: string
   inputAudioUrl: string | null
   figureId: string | null
+  pageLayout: ScreenType
   width: number
   height: number
   cameraId: number | null
@@ -99,8 +101,6 @@ export interface DraftConfig {
   logoUrl: string | null
   bgmUrl: string | null
   materialUrl: string | null
-  pronunciationLanguage: LangType
-  pageLayout?: string
   memberId?: number
   modifiedTime?: string
 }

src/views/creation/layout/index.vue

@@ -41,6 +41,7 @@ async function getDigitalTemplate(id: string) {
       id: null,
       coverUrl: digitalTemplate.coverUrl,
       draftName: '新建數字人視頻' + formatDateTime(new Date()),
+      pronunciationLanguage: digitalTemplate.ttsParams?.person ? LangType.MANDARIN : LangType.CANTONESE,
       taskType: digitalTemplate.taskType,
       inputImageUrl: digitalTemplate.digitalHumanImageUrl,
       driveType: digitalTemplate.driveType,
@@ -51,6 +52,7 @@ async function getDigitalTemplate(id: string) {
       pitch: digitalTemplate.ttsParams?.pitch || digitalCreationStore.pitch,
       inputAudioUrl: digitalTemplate.inputAudioUrl,
       figureId: digitalTemplate.figureId,
+      pageLayout: digitalTemplate.videoParams?.pageLayout || digitalCreationStore.pageLayout,
       width:
         digitalTemplate.videoParams?.width ||
         (digitalTemplate.videoParams?.pageLayout === ScreenType.LANDSCAPE ? 1280 : 720),
@@ -76,7 +78,6 @@ async function getDigitalTemplate(id: string) {
       logoUrl: digitalTemplate.logoParams?.logoUrl || null,
       bgmUrl: digitalTemplate.bgmParams?.bgmUrl || null,
       materialUrl: digitalTemplate.materialUrl,
-      pronunciationLanguage: digitalTemplate.ttsParams?.person ? LangType.MANDARIN : LangType.CANTONESE,
     }
     digitalCreationStore.updateDigitalCreation(draftConfig)
     audioSettingStore.setVoiceType(draftConfig.person ? VoiceType.MANDARIN_FEMALE : VoiceType.CANTONESE_FEMALE)
@@ -97,6 +98,8 @@ async function getTaskConfig(id: string) {
     const draftConfig: DraftConfig = {
       id: null,
       draftName: '新建數字人視頻' + formatDateTime(new Date()),
+      pronunciationLanguage: res.data.person ? LangType.MANDARIN : LangType.CANTONESE,
+      pageLayout: res.data.pageLayout || digitalCreationStore.pageLayout,
       width: res.data.width || (res.data.pageLayout === ScreenType.LANDSCAPE ? 1280 : 720),
       height: res.data.height || (res.data.pageLayout === ScreenType.LANDSCAPE ? 720 : 1280),
       w: res.data.w || (res.data.pageLayout === ScreenType.LANDSCAPE ? 607 : 1080),
@@ -125,7 +128,6 @@ async function getTaskConfig(id: string) {
       logoUrl: res.data.logoUrl || digitalCreationStore.logoUrl,
       bgmUrl: res.data.bgmUrl || digitalCreationStore.bgmUrl,
       materialUrl: res.data.materialUrl || digitalCreationStore.materialUrl,
-      pronunciationLanguage: res.data.person ? LangType.MANDARIN : LangType.CANTONESE,
     }
     digitalCreationStore.updateDigitalCreation(draftConfig)
     audioSettingStore.setVoiceType(draftConfig.person ? VoiceType.MANDARIN_FEMALE : VoiceType.CANTONESE_FEMALE)

src/views/workbench/components/recent-creation.vue

 <script setup lang="ts">
 import { fetchDraftsList } from '@/apis/drafts'
+import { ScreenType } from '@/store/types/creation'
 import { TaskType } from '@/store/types/template'
 import { formatDateTime } from '@/utils/date-formatter'
 import { Right } from '@icon-park/vue-next'
@@ -12,6 +13,7 @@ interface CreationTemplateInfoItem {
   coverUrl: string
   modifiedTime: string
   draftName: string
+  pageLayout: ScreenType
 }
 
 const router = useRouter()
@@ -42,6 +44,7 @@ function getRecentCreationList() {
       modifiedTime: item.modifiedTime,
       coverUrl: item.coverUrl,
       taskType: item.taskType,
+      pageLayout: item.pageLayout,
     }))
 
     fetchCreationTemplateInfoListLoading.value = false
@@ -94,11 +97,14 @@ function handleToCreation(draftId: number) {
               class="mr-[10px] inline-block pb-[16px]"
             >
               <div
-                class="relative mb-[12px] h-[145px] w-[145px] cursor-pointer overflow-hidden rounded-[12px] bg-[#f3f4fb]"
+                class="relative mb-[12px] flex h-[145px] w-[145px] cursor-pointer items-center justify-center overflow-hidden rounded-[12px] bg-[#f3f4fb]"
                 @click="handleToCreation(templateInfoItem.id)"
               >
                 <img
-                  class="z-1 relative h-full w-full object-contain transition-[scale] duration-300 ease-in-out hover:scale-110"
+                  class="z-1 relative object-cover transition-[scale] duration-300 ease-in-out hover:scale-110"
+                  :class="
+                    templateInfoItem.pageLayout === ScreenType.LANDSCAPE ? 'aspect-[16/9]' : 'aspect-[9/16] h-full'
+                  "
                   :src="templateInfoItem.coverUrl"
                   alt="cover"
                 />