[fix]: voice selection bugfix.

frontend/src/views/Welcome/Components/PromptText.vue

@@ -140,6 +140,7 @@ watch(() => props.open, (newOpen) => {
         v-model:open="props.open"
         :title="null"
         :mask-closable="false"
+        :closable="false"
         centered
         @update:open="(val: boolean) => emit('update:open', val)"
     >
@@ -170,7 +171,7 @@ watch(() => props.open, (newOpen) => {
                     allow-clear
                     class="prompt-textarea"
                 />
-                <a-button key="back" @click="handleResetPrompt('en')" style="margin-top: 16px;">Reset</a-button>
+                <a-button size="small" key="reset-en" @click="handleResetPrompt('en')" style="margin-top: 16px;">Reset</a-button>
             </div>
             <div v-if="languageSegment == 'zh'" class="prompt-item">
                 <a-textarea
@@ -182,7 +183,7 @@ watch(() => props.open, (newOpen) => {
                     allow-clear
                     class="prompt-textarea"
                 />
-                <a-button key="back" @click="handleResetPrompt('zh')" style="margin-top: 16px;">Reset</a-button>
+                <a-button size="small" key="reset-zh" @click="handleResetPrompt('zh')" style="margin-top: 16px;">Reset</a-button>
             </div>
         </div>
     </a-modal>
@@ -205,7 +206,7 @@ watch(() => props.open, (newOpen) => {
 }
 
 .prompt-content {
-    margin-top: 2px;
+    margin-top: 16px;
 
     .prompt-title {
         margin-bottom: 24px;

frontend/src/views/Welcome/index.vue

@@ -2,7 +2,7 @@
 
 import router from "@/router.ts";
 import { useSettingsStore } from "@/stores/config.ts";
-import { onMounted, onUnmounted, ref, reactive, computed, h } from "vue";
+import { onMounted, onUnmounted, ref, reactive, computed, watch, h } from "vue";
 import { Modal } from 'ant-design-vue';
 import { SoundTwoTone, SoundOutlined } from "@ant-design/icons-vue";
 import axios from "axios";
@@ -67,6 +67,8 @@ const modalLoading = ref<boolean>(false);
 
 const handleVoiceModalCancel = () => {
     voiceModelOpen.value = false;
+    role.value = settingsStore.$state.role;
+    language.value = settingsStore.$state.language;
 };
 
 const handleVoiceModalSubmit = async () => {
@@ -153,6 +155,18 @@ const filteredRoles = computed(() => {
     return roles.filter(ro => ro['is_chinese_voice'] == is_chinese);
 });
 
+watch(
+  () => language.value,
+  (newLang) => {
+    // 语言切换后，自动选中第一个可用角色
+    if (filteredRoles.value.length > 0) {
+      role.value = filteredRoles.value[0]['id'];
+    } else {
+      role.value = "";
+    }
+  }
+);
+
 
 const fetchTTSRoles = async () => {
     try {
@@ -318,11 +332,11 @@ const isPlaying = (id: string) => {
                         <div class="custom-popover-item" @click="togglePopover('prompt')">Prompt调试</div>
                     </div>
                 </template>
-                <img :src="setting" alt="item actions" style="width: 28px; height: 28px; margin-right:24px;margin-bottom: 24px;">
+                <img :src="setting" alt="item actions" style="width: 28px; height: 28px; margin-right:24px;margin-top: 16px;">
             </a-popover>
         </div>
 
-        <a-modal v-model:open="voiceModelOpen" :title="null" :mask-closable="false" centered>
+        <a-modal v-model:open="voiceModelOpen" :title="null" :mask-closable="false" :closable="false" centered>
             <template #footer>
                 <a-button key="back" @click="handleVoiceModalCancel">Cancel</a-button>
                 <a-button key="submit" type="primary" :loading="modalLoading" @click="handleVoiceModalSubmit">Submit</a-button>
@@ -385,8 +399,8 @@ const isPlaying = (id: string) => {
 <style lang="scss" scoped>
 
 .languages {
-    margin-top: 40px;
-    margin-bottom: 8px;
+    margin-top: 24px;
+    margin-bottom: 24px;
 
     p {
         font-size: 16px;