增加密码框、背景音量控制

src/api/service/text2videoService.ts

@@ -88,4 +88,25 @@ export default {
         return Promise.reject("gen_video接口通讯失败");
       });
   },
+
+  submitPwdCheck(pwd: string): Promise<string> {
+    if (!pwd) {
+      return Promise.reject("密码不能为空");
+    }
+    const post_data = { pwd: pwd }
+    return request.post('/text2video/pwd_check', post_data)
+      .then((res: any) => {
+        // console.log(res);
+        if (res && res.code === 0) {
+          return res.data.result;
+        } else {
+          const errorMessage = res ? res.message : "未知错误";
+          return Promise.reject(errorMessage);
+        }
+      })
+      .catch((err: any) => {
+        console.log(err);
+        return Promise.reject("与pwd_check接口通讯失败");
+      });
+  },
 }

src/views/home/compositions/useManyValues.ts

@@ -102,7 +102,20 @@ export const useManyValues = () => {
     80: '+80%',
     90: '+90%',
     100: '+100%',
-  })
+  });
+
+  const bgm_volume_marks = reactive<MyMarkType>({
+    0: '-100%',
+    0.5: '-50%',
+    1.0: {
+      style: {
+        color: '#1989FA',
+      },
+      label: '标准音量',
+    },
+    1.5: '+50%',
+    2.0: '+100%',
+  });
 
   const voices = [
     {
@@ -225,5 +238,6 @@ export const useManyValues = () => {
     voices: voices,
     voices_en: voices_en,
     bgm: bgm,
+    bgm_volume_marks: bgm_volume_marks,
   }
 }

src/views/home/index.vue

@@ -48,11 +48,20 @@ const voice_rate = ref(-15)
 const voice_volume = ref(0)
 const voice = ref("zh-CN-YunjianNeural")
 const bgm = ref("解忧曲")
+const bgm_volume = ref(0.3)
+const pwdCheckDialogVisible = ref(false);
+const pwdCheckValue = ref("")
 
 
 onMounted(() => {
   // 初始化示例数据
   onChangeScreen(form.screen);
+  // 初始化密码框
+  if (debug.value == true) {
+    pwdCheckDialogVisible.value = false;
+  } else {
+    pwdCheckDialogVisible.value = true;
+  }
 });
 
 const delay = (ms: any) => new Promise(res => setTimeout(res, ms));
@@ -351,6 +360,7 @@ const onGenVideo = () => {
     volume: para_volume,
     voice: voice.value,
     bgm: bgm.value,
+    bgm_volume: bgm_volume.value,
   }
   text2videoService
     .submitGenVideo(video_param)
@@ -440,6 +450,28 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
   upload.value!.handleStart(file)
   upload.value!.submit()
 }
+
+const onPwdCheckDialog = () => {
+  text2videoService
+    .submitPwdCheck(pwdCheckValue.value)
+    .then((result: string) => {
+      if (result == "success") {
+        pwdCheckDialogVisible.value = false;
+      } else {
+        ElMessage({
+          message: result,
+          type: "error",
+        });
+      }
+    })
+    .catch((error: any) => {
+      ElMessage({
+        message: error,
+        type: "error",
+      });
+    });
+
+}
 </script>
 
 <template>
@@ -563,15 +595,15 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
       </el-form-item>
       <!-- 生成视频 -->
       <el-form-item label="设置">
-        <span style="margin: 0 20px">语速：</span>
+        <span style="margin: 0 20px">TTS语速：</span>
         <el-slider v-model="voice_rate" show-input :min="-50" :max="50" :marks="default_data.marks" style="width: 900px" />
       </el-form-item>
       <el-form-item>
-        <span style="margin: 0 20px">音量：</span>
+        <span style="margin: 0 20px">TTS音量：</span>
         <el-slider v-model="voice_volume" show-input :min="-80" :max="80" :marks="default_data.marks" style="width: 900px" />
       </el-form-item>
       <el-form-item>
-        <span style="margin: 20px 20px 0 20px">语音：</span>
+        <span style="margin: 20px 20px 0 20px">TTS语音：</span>
         <el-select v-model="voice" placeholder="Select" style="width: 400px; margin-top: 20px;">
           <el-option
             v-for="item in default_data.voices"
@@ -592,7 +624,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         <audio :src="'src/assets/edge-tts-voices/' + voice + '.mp3'" controls style="height: 30px; margin: 20px 0 0 10px;"></audio>
       </el-form-item>
       <el-form-item>
-        <span style="margin: 0 20px">背景：</span>
+        <span style="margin: 0 20px">背景音乐：</span>
         <el-select v-model="bgm" placeholder="无" style="width: 400px;">
           <el-option
             v-for="item in default_data.bgm"
@@ -613,7 +645,11 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         <audio :src="'src/assets/bgm/' + bgm + '.mp3'" controls style="height: 30px; margin-left:10px;"></audio>
       </el-form-item>
       <el-form-item>
-        <span style="margin: 0 20px">字幕：</span>
+        <span style="margin: 0 20px">背景音量：</span>
+        <el-slider v-model="bgm_volume" show-input step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks" style="width: 600px" />
+      </el-form-item>
+      <el-form-item>
+        <span style="margin: 10px 20px">字幕：</span>
         <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
       </el-form-item>
       <el-form-item>
@@ -623,6 +659,26 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         <video :src="form.final_video" controls></video>
       </el-form-item>
     </el-form>
+    <!-- 授权密码框 -->
+    <el-dialog
+      v-model=pwdCheckDialogVisible
+      title="请输入密码"
+      width="20%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <el-form :model="form">
+        <el-form-item label="密码">
+          <el-input v-model="pwdCheckValue" autocomplete="off" type="password" show-password />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onPwdCheckDialog()">ok</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </main>
 </template>
 

src/views/home/index_en.vue

@@ -48,10 +48,20 @@ const voice_rate = ref(-10)
 const voice_volume = ref(0)
 const voice = ref("en-US-BrianNeural")
 const bgm = ref("解忧曲")
+const bgm_volume = ref(0.3)
+const pwdCheckDialogVisible = ref(false);
+const pwdCheckValue = ref("")
+
 
 onMounted(() => {
   // 初始化示例数据
   onChangeScreen(form.screen);
+  // 初始化密码框
+  if (debug.value == true) {
+    pwdCheckDialogVisible.value = false;
+  } else {
+    pwdCheckDialogVisible.value = true;
+  }
 });
 
 const delay = (ms: any) => new Promise(res => setTimeout(res, ms));
@@ -350,6 +360,7 @@ const onGenVideo = () => {
     volume: para_volume,
     voice: voice.value,
     bgm: bgm.value,
+    bgm_volume: bgm_volume.value,
   }
   text2videoService
     .submitGenVideo(video_param)
@@ -432,6 +443,28 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
   upload.value!.handleStart(file)
   upload.value!.submit()
 }
+
+const onPwdCheckDialog = () => {
+  text2videoService
+    .submitPwdCheck(pwdCheckValue.value)
+    .then((result: string) => {
+      if (result == "success") {
+        pwdCheckDialogVisible.value = false;
+      } else {
+        ElMessage({
+          message: result,
+          type: "error",
+        });
+      }
+    })
+    .catch((error: any) => {
+      ElMessage({
+        message: error,
+        type: "error",
+      });
+    });
+
+}
 </script>
 
 <template>
@@ -555,15 +588,15 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
       </el-form-item>
       <!-- 生成视频 -->
       <el-form-item label="设置">
-        <span style="margin: 0 20px">语速：</span>
+        <span style="margin: 0 20px">TTS语速：</span>
         <el-slider v-model="voice_rate" show-input :min="-50" :max="50" :marks="default_data.marks" style="width: 900px" />
       </el-form-item>
       <el-form-item>
-        <span style="margin: 0 20px">音量：</span>
+        <span style="margin: 0 20px">TTS音量：</span>
         <el-slider v-model="voice_volume" show-input :min="-80" :max="80" :marks="default_data.marks" style="width: 900px" />
       </el-form-item>
       <el-form-item>
-        <span style="margin: 20px 20px 0 20px">语音：</span>
+        <span style="margin: 20px 20px 0 20px">TTS语音：</span>
         <el-select v-model="voice" placeholder="Select" style="width: 400px; margin-top: 20px;">
           <el-option
             v-for="item in default_data.voices_en"
@@ -584,7 +617,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         <audio :src="'src/assets/edge-tts-voices/' + voice + '.mp3'" controls style="height: 30px; margin: 20px 0 0 10px;"></audio>
       </el-form-item>
       <el-form-item>
-        <span style="margin: 0 20px">背景：</span>
+        <span style="margin: 0 20px">背景音乐：</span>
         <el-select v-model="bgm" placeholder="无" style="width: 400px;">
           <el-option
             v-for="item in default_data.bgm"
@@ -604,6 +637,10 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         </el-select>
         <audio :src="'src/assets/bgm/' + bgm + '.mp3'" controls style="height: 30px; margin-left:10px;"></audio>
       </el-form-item>
+      <el-form-item>
+        <span style="margin: 0 20px">背景音量：</span>
+        <el-slider v-model="bgm_volume" show-input step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks" style="width: 600px" />
+      </el-form-item>
       <el-form-item>
         <span style="margin: 0 20px">字幕：</span>
         <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
@@ -615,6 +652,26 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         <video :src="form.final_video" controls></video>
       </el-form-item>
     </el-form>
+    <!-- 授权密码框 -->
+    <el-dialog
+      v-model=pwdCheckDialogVisible
+      title="请输入密码"
+      width="20%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <el-form :model="form">
+        <el-form-item label="密码">
+          <el-input v-model="pwdCheckValue" autocomplete="off" type="password" show-password />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onPwdCheckDialog()">ok</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </main>
 </template>