feat(SlideCreateCourseGreen): 添加背景合成开关以支持自定义背景

components/SlideCreateCourseGreen.vue

@@ -39,11 +39,12 @@ const createCourseState = reactive({
   digital_human_id: 0,
   source_type: 0,
   speed: 1.0,
-  bg_img: 'https://service1.fenshenzhike.com/default_background.png',
+  bg_img: '',
 })
 
 const selected_digital_human = ref<DigitalHumanItem | null>(null)
 const selected_bg_img = ref<File | undefined>()
+const enableBackgroundCompositing = ref(false)
 
 watchEffect(() => {
   if (selected_digital_human.value) {
@@ -56,6 +57,13 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  // 根据背景合成开关更新 bg_img
+  createCourseState.bg_img = enableBackgroundCompositing.value
+    ? 'https://service1.fenshenzhike.com/default_background.png'
+    : ''
+})
+
 const onCreateCourseGreenSubmit = async (
   event: FormSubmitEvent<CreateCourseSchema>
 ) => {
@@ -224,13 +232,13 @@ const onCreateCourseGreenSubmit = async (
           />
         </UFormGroup>
 
-        <UAlert
+        <UFormGroup
-          icon="tabler:background"
+          label="启用背景合成"
-          color="sky"
+          name="bg_img"
-          variant="subtle"
+          help="开启后生成透明通道，可在视频生成完毕后选择自定义背景合成；关闭则使用绿幕背景。"
-          title="自定义背景图片"
+        >
-          description="背景图片可在视频生成完毕后，在下载选单中选择合成。默认为绿幕背景。"
+          <UToggle v-model="enableBackgroundCompositing" />
-        />
+        </UFormGroup>
 
         <UAccordion
           :items="[{ label: '高级选项' }]"