feat: 绿幕视频自定义背景图片

components/SlideCreateCourseGreen.vue

@@ -20,6 +20,7 @@ const createCourseSchema = object({
   digital_human_id: number().not([0], '请选择数字人'),
   source_type: number().default(0).required(),
   speed: number().default(1.0).min(0.5).max(1.5).required(),
+  bg_img: string().optional(),
 })
 
 type CreateCourseSchema = InferType<typeof createCourseSchema>
@@ -30,9 +31,11 @@ const createCourseState = reactive({
   digital_human_id: 0,
   source_type: 0,
   speed: 1.0,
+  bg_img: undefined,
 })
 
 const selected_digital_human = ref<DigitalHumanItem | null>(null)
+const selected_bg_img = ref<File | undefined>();
 
 watchEffect(() => {
   if (selected_digital_human.value) {
@@ -44,7 +47,24 @@ watchEffect(() => {
 
 const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSchema>) => {  
   creationPending.value = true
-  useFetchWrapped<req.gen.GBVideoCreate & AuthedRequest, BaseResponse<resp.gen.GBVideoCreate>>('App.Digital_VideoTask.Create', {
+
+  let bgImgUrl = undefined
+
+  if (selected_bg_img.value) {
+    bgImgUrl = await useFileGo(selected_bg_img.value, 'tmp')
+  }
+
+  let payload: {
+    token: string;
+    user_id: number;
+    title: string;
+    content: string;
+    digital_human_id: any;
+    speed: number;
+    device_id: string;
+    source_type: 1 | 2 | undefined;
+    bg_img?: string;
+  } = {
     token: loginState.token!,
     user_id: loginState.user.id,
     title: event.data.title,
@@ -53,7 +73,27 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
     speed: 2 - event.data.speed,
     device_id: 'XSHAssistant Web',
     source_type: event.data.source_type as 1 | 2 | undefined,
-  }).then(res => {
+  }
+
+  if (selected_bg_img.value) {
+    if (!bgImgUrl) {
+      toast.add({
+        title: '上传失败',
+        description: '背景图片上传失败，请重试',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+      selected_bg_img.value = undefined
+      creationPending.value = false
+      return
+    }
+    payload = {
+      ...payload,
+      bg_img: bgImgUrl,
+    }
+  }
+
+  useFetchWrapped<req.gen.GBVideoCreate & AuthedRequest, BaseResponse<resp.gen.GBVideoCreate>>('App.Digital_VideoTask.Create', payload).then(res => {
     if (!!res.data.task_id) {
       toast.add({
         title: '创建成功',
@@ -142,6 +182,10 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
           </UFormGroup>
         </div>
 
+        <UFormGroup label="背景图片" name="bg_img" help="可以上传图片作为视频背景，留空则为绿幕背景">
+          <UInput type="file" accept="image/jpg,image/png" placeholder="选择背景图片" @change="selected_bg_img = $event?.[0] || undefined"/>
+        </UFormGroup>
+
         <UFormGroup label="驱动内容" name="content" required>
           <!--          <template #help>-->
           <!--            <p class="text-xs text-neutral-400">-->

typings/types.d.ts

@@ -251,6 +251,7 @@ namespace req {
       speed?: number
       // 1: upstream 2: internal
       source_type?: 1 | 2
+      bg_img?: string
     }
 
     interface GBVideoDelete {