调整音色的前端页面，提供更方便的试听

main/manager-api/src/main/java/xiaozhi/modules/model/dto/VoiceDTO.java

@@ -19,4 +19,30 @@ public class VoiceDTO implements Serializable {
 
     @Schema(description = "音色名称")
     private String name;
+    
+    @Schema(description = "音频播放地址")
+    private String voiceDemo;
+    
+    // 添加双参数构造函数，保持向后兼容
+    public VoiceDTO(String id, String name) {
+        this.id = id;
+        this.name = name;
+        this.voiceDemo = null;
+    }
+    
+    // 为了兼容性，添加其他可能的音频字段别名
+    @Schema(hidden = true)
+    public String getDemoUrl() {
+        return voiceDemo;
+    }
+    
+    @Schema(hidden = true)
+    public String getAudioUrl() {
+        return voiceDemo;
+    }
+    
+    @Schema(hidden = true)
+    public String getReferenceAudio() {
+        return voiceDemo;
+    }
 }

main/manager-api/src/main/java/xiaozhi/modules/timbre/service/impl/TimbreServiceImpl.java

@@ -133,7 +133,11 @@ public class TimbreServiceImpl extends BaseServiceImpl<TimbreDao, TimbreEntity>
             timbreEntities = new ArrayList<>();
         }
         List<VoiceDTO> voiceDTOs = timbreEntities.stream()
-                .map(entity -> new VoiceDTO(entity.getId(), entity.getName()))
+                .map(entity -> {
+                    VoiceDTO dto = new VoiceDTO(entity.getId(), entity.getName());
+                    dto.setVoiceDemo(entity.getVoiceDemo());
+                    return dto;
+                })
                 .collect(Collectors.toList());
 
         // 获取当前登录用户ID
@@ -205,6 +209,9 @@ public class TimbreServiceImpl extends BaseServiceImpl<TimbreDao, TimbreEntity>
         if (list.isEmpty()) {
             return null;
         }
-        return new VoiceDTO(list.get(0).getId(), list.get(0).getName());
+        TimbreEntity entity = list.get(0);
+        VoiceDTO dto = new VoiceDTO(entity.getId(), entity.getName());
+        dto.setVoiceDemo(entity.getVoiceDemo());
+        return dto;
     }
 }

main/manager-web/src/views/roleConfig.vue

@@ -3,7 +3,7 @@
     <HeaderBar />
 
     <div class="operation-bar">
-      <h2 class="page-title">{{ $t('roleConfig.title') }}</h2>
+      <h2 class="page-title">{{ $t("roleConfig.title") }}</h2>
     </div>
 
     <div class="main-wrapper">
@@ -12,21 +12,21 @@
           <el-card class="config-card" shadow="never">
             <div class="config-header">
               <div class="header-icon">
-                <img loading="lazy" src="@/assets/home/setting-user.png" alt="">
+                <img loading="lazy" src="@/assets/home/setting-user.png" alt="" />
               </div>
               <span class="header-title">{{ form.agentName }}</span>
               <div class="header-actions">
                 <div class="hint-text">
-                  <img loading="lazy" src="@/assets/home/info.png" alt="">
+                  <img loading="lazy" src="@/assets/home/info.png" alt="" />
-                  <span>{{ $t('roleConfig.restartNotice') }}</span>
+                  <span>{{ $t("roleConfig.restartNotice") }}</span>
                 </div>
                 <el-button type="primary" class="save-btn" @click="saveConfig">
-                  {{ $t('roleConfig.saveConfig') }}
+                  {{ $t("roleConfig.saveConfig") }}
                 </el-button>
-                <el-button class="reset-btn" @click="resetConfig">{{ $t('roleConfig.reset') }}</el-button>
+                <el-button class="reset-btn" @click="resetConfig">{{
-                <button class="custom-close-btn" @click="goToHome">
+                  $t("roleConfig.reset")
-                  ×
+                }}</el-button>
-                </button>
+                <button class="custom-close-btn" @click="goToHome">×</button>
               </div>
             </div>
             <div class="divider"></div>
@@ -36,97 +36,210 @@
                 <div class="form-grid">
                   <div class="form-column">
                     <el-form-item :label="$t('roleConfig.agentName') + '：'">
-                      <el-input v-model="form.agentName" class="form-input" maxlength="10" />
+                      <el-input
+                        v-model="form.agentName"
+                        class="form-input"
+                        maxlength="10"
+                      />
                     </el-form-item>
                     <el-form-item :label="$t('roleConfig.roleTemplate') + '：'">
                       <div class="template-container">
-                        <div v-for="(template, index) in templates" :key="`template-${index}`" class="template-item"
+                        <div
-                          :class="{ 'template-loading': loadingTemplate }" @click="selectTemplate(template)">
+                          v-for="(template, index) in templates"
+                          :key="`template-${index}`"
+                          class="template-item"
+                          :class="{ 'template-loading': loadingTemplate }"
+                          @click="selectTemplate(template)"
+                        >
                           {{ template.agentName }}
                         </div>
                       </div>
                     </el-form-item>
                     <el-form-item :label="$t('roleConfig.roleIntroduction') + '：'">
-                      <el-input type="textarea" rows="9" resize="none"
+                      <el-input
-                        :placeholder="$t('roleConfig.pleaseEnterContent')" v-model="form.systemPrompt" maxlength="2000"
+                        type="textarea"
-                        show-word-limit class="form-textarea" />
+                        rows="9"
+                        resize="none"
+                        :placeholder="$t('roleConfig.pleaseEnterContent')"
+                        v-model="form.systemPrompt"
+                        maxlength="2000"
+                        show-word-limit
+                        class="form-textarea"
+                      />
                     </el-form-item>
 
                     <el-form-item :label="$t('roleConfig.memoryHis') + '：'">
-                      <el-input type="textarea" rows="6" resize="none" v-model="form.summaryMemory" maxlength="2000"
+                      <el-input
-                        show-word-limit class="form-textarea"
+                        type="textarea"
-                        :disabled="form.model.memModelId !== 'Memory_mem_local_short'" />
+                        rows="6"
+                        resize="none"
+                        v-model="form.summaryMemory"
+                        maxlength="2000"
+                        show-word-limit
+                        class="form-textarea"
+                        :disabled="form.model.memModelId !== 'Memory_mem_local_short'"
+                      />
                     </el-form-item>
-                    <el-form-item :label="$t('roleConfig.languageCode') + '：'" style="display: none;">
+                    <el-form-item
-                      <el-input v-model="form.langCode" :placeholder="$t('roleConfig.pleaseEnterLangCode')"
+                      :label="$t('roleConfig.languageCode') + '：'"
-                        maxlength="10" show-word-limit class="form-input" />
+                      style="display: none"
+                    >
+                      <el-input
+                        v-model="form.langCode"
+                        :placeholder="$t('roleConfig.pleaseEnterLangCode')"
+                        maxlength="10"
+                        show-word-limit
+                        class="form-input"
+                      />
                     </el-form-item>
-                    <el-form-item :label="$t('roleConfig.interactionLanguage') + '：'" style="display: none;">
+                    <el-form-item
-                      <el-input v-model="form.language" :placeholder="$t('roleConfig.pleaseEnterLangName')"
+                      :label="$t('roleConfig.interactionLanguage') + '：'"
-                        maxlength="10" show-word-limit class="form-input" />
+                      style="display: none"
+                    >
+                      <el-input
+                        v-model="form.language"
+                        :placeholder="$t('roleConfig.pleaseEnterLangName')"
+                        maxlength="10"
+                        show-word-limit
+                        class="form-input"
+                      />
                     </el-form-item>
                   </div>
                   <div class="form-column">
                     <div class="model-row">
                       <el-form-item :label="$t('roleConfig.vad')" class="model-item">
                         <div class="model-select-wrapper">
-                          <el-select v-model="form.model.vadModelId" filterable
+                          <el-select
-                            :placeholder="$t('roleConfig.pleaseSelect')" class="form-select"
+                            v-model="form.model.vadModelId"
-                            @change="handleModelChange('VAD', $event)">
+                            filterable
-                            <el-option v-for="(item, optionIndex) in modelOptions['VAD']"
+                            :placeholder="$t('roleConfig.pleaseSelect')"
-                              :key="`option-vad-${optionIndex}`" :label="item.label" :value="item.value" />
+                            class="form-select"
+                            @change="handleModelChange('VAD', $event)"
+                          >
+                            <el-option
+                              v-for="(item, optionIndex) in modelOptions['VAD']"
+                              :key="`option-vad-${optionIndex}`"
+                              :label="item.label"
+                              :value="item.value"
+                            />
                           </el-select>
                         </div>
                       </el-form-item>
                       <el-form-item :label="$t('roleConfig.asr')" class="model-item">
                         <div class="model-select-wrapper">
-                          <el-select v-model="form.model.asrModelId" filterable
+                          <el-select
-                            :placeholder="$t('roleConfig.pleaseSelect')" class="form-select"
+                            v-model="form.model.asrModelId"
-                            @change="handleModelChange('ASR', $event)">
+                            filterable
-                            <el-option v-for="(item, optionIndex) in modelOptions['ASR']"
+                            :placeholder="$t('roleConfig.pleaseSelect')"
-                              :key="`option-asr-${optionIndex}`" :label="item.label" :value="item.value" />
+                            class="form-select"
+                            @change="handleModelChange('ASR', $event)"
+                          >
+                            <el-option
+                              v-for="(item, optionIndex) in modelOptions['ASR']"
+                              :key="`option-asr-${optionIndex}`"
+                              :label="item.label"
+                              :value="item.value"
+                            />
                           </el-select>
                         </div>
                       </el-form-item>
                     </div>
-                    <el-form-item v-for="(model, index) in models.slice(2)" :key="`model-${index}`"
+                    <el-form-item
-                      :label="$t('roleConfig.' + model.type.toLowerCase())" class="model-item">
+                      v-for="(model, index) in models.slice(2)"
+                      :key="`model-${index}`"
+                      :label="$t('roleConfig.' + model.type.toLowerCase())"
+                      class="model-item"
+                    >
                       <div class="model-select-wrapper">
-                        <el-select v-model="form.model[model.key]" filterable
+                        <el-select
-                          :placeholder="$t('roleConfig.pleaseSelect')" class="form-select"
+                          v-model="form.model[model.key]"
-                          @change="handleModelChange(model.type, $event)">
+                          filterable
-                          <el-option v-for="(item, optionIndex) in modelOptions[model.type]" v-if="!item.isHidden"
+                          :placeholder="$t('roleConfig.pleaseSelect')"
-                            :key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value" />
+                          class="form-select"
+                          @change="handleModelChange(model.type, $event)"
+                        >
+                          <el-option
+                            v-for="(item, optionIndex) in modelOptions[model.type]"
+                            v-if="!item.isHidden"
+                            :key="`option-${index}-${optionIndex}`"
+                            :label="item.label"
+                            :value="item.value"
+                          />
                         </el-select>
                         <div v-if="showFunctionIcons(model.type)" class="function-icons">
-                          <el-tooltip v-for="func in currentFunctions" :key="func.name" effect="dark" placement="top"
+                          <el-tooltip
-                            popper-class="custom-tooltip">
+                            v-for="func in currentFunctions"
+                            :key="func.name"
+                            effect="dark"
+                            placement="top"
+                            popper-class="custom-tooltip"
+                          >
                             <div slot="content">
                               <div><strong>功能名称:</strong> {{ func.name }}</div>
                             </div>
-                            <div class="icon-dot" :style="{ backgroundColor: getFunctionColor(func.name) }">
+                            <div
+                              class="icon-dot"
+                              :style="{ backgroundColor: getFunctionColor(func.name) }"
+                            >
                               {{ func.name.charAt(0) }}
                             </div>
                           </el-tooltip>
-                          <el-button class="edit-function-btn" @click="openFunctionDialog"
+                          <el-button
-                            :class="{ 'active-btn': showFunctionDialog }">
+                            class="edit-function-btn"
-                            {{ $t('roleConfig.editFunctions') }}
+                            @click="openFunctionDialog"
+                            :class="{ 'active-btn': showFunctionDialog }"
+                          >
+                            {{ $t("roleConfig.editFunctions") }}
                           </el-button>
                         </div>
-                        <div v-if="model.type === 'Memory' && form.model.memModelId !== 'Memory_nomem'"
+                        <div
-                          class="chat-history-options">
+                          v-if="
-                          <el-radio-group v-model="form.chatHistoryConf" @change="updateChatHistoryConf">
+                            model.type === 'Memory' &&
-                            <el-radio-button :label="1">{{ $t('roleConfig.reportText') }}</el-radio-button>
+                            form.model.memModelId !== 'Memory_nomem'
-                            <el-radio-button :label="2">{{ $t('roleConfig.reportTextVoice') }}</el-radio-button>
+                          "
+                          class="chat-history-options"
+                        >
+                          <el-radio-group
+                            v-model="form.chatHistoryConf"
+                            @change="updateChatHistoryConf"
+                          >
+                            <el-radio-button :label="1">{{
+                              $t("roleConfig.reportText")
+                            }}</el-radio-button>
+                            <el-radio-button :label="2">{{
+                              $t("roleConfig.reportTextVoice")
+                            }}</el-radio-button>
                           </el-radio-group>
                         </div>
                       </div>
                     </el-form-item>
                     <el-form-item :label="$t('roleConfig.voiceType')">
-                      <el-select v-model="form.ttsVoiceId" :placeholder="$t('roleConfig.pleaseSelect')"
+                      <el-select
-                        class="form-select">
+                        v-model="form.ttsVoiceId"
-                        <el-option v-for="(item, index) in voiceOptions" :key="`voice-${index}`" :label="item.label"
+                        filterable
-                          :value="item.value" />
+                        :placeholder="$t('roleConfig.pleaseSelect')"
+                        class="form-select"
+                      >
+                        <el-option
+                        v-for="(item, index) in voiceOptions"
+                        :key="`voice-${index}`"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                          <span>{{ item.label }}</span>
+                          <template v-if="hasAudioPreview(item)">
+                            <el-button
+                              type="text"
+                              icon="el-icon-video-play"
+                              size="small"
+                              @click.stop="playVoicePreview(item.value)"
+                              :loading="playingVoice && form.ttsVoiceId === item.value"
+                              class="play-button"
+                            />
+                          </template>
+                        </div>
+                      </el-option>
                       </el-select>
                     </el-form-item>
                   </div>
@@ -137,19 +250,25 @@
         </div>
       </div>
     </div>
-    <function-dialog v-model="showFunctionDialog" :functions="currentFunctions" :all-functions="allFunctions"
+    <function-dialog
-      :agent-id="$route.query.agentId" @update-functions="handleUpdateFunctions" @dialog-closed="handleDialogClosed" />
+      v-model="showFunctionDialog"
+      :functions="currentFunctions"
+      :all-functions="allFunctions"
+      :agent-id="$route.query.agentId"
+      @update-functions="handleUpdateFunctions"
+      @dialog-closed="handleDialogClosed"
+    />
   </div>
 </template>
 
 <script>
-import Api from '@/apis/api';
+import Api from "@/apis/api";
 import FunctionDialog from "@/components/FunctionDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
-import i18n from '@/i18n';
+import i18n from "@/i18n";
 
 export default {
-  name: 'RoleConfigPage',
+  name: "RoleConfigPage",
   components: { HeaderBar, FunctionDialog },
   data() {
     return {
@@ -171,35 +290,43 @@ export default {
           vllmModelId: "",
           memModelId: "",
           intentModelId: "",
-        }
+        },
       },
       models: [
-        { label: this.$t('roleConfig.vad'), key: 'vadModelId', type: 'VAD' },
+        { label: this.$t("roleConfig.vad"), key: "vadModelId", type: "VAD" },
-        { label: this.$t('roleConfig.asr'), key: 'asrModelId', type: 'ASR' },
+        { label: this.$t("roleConfig.asr"), key: "asrModelId", type: "ASR" },
-        { label: this.$t('roleConfig.llm'), key: 'llmModelId', type: 'LLM' },
+        { label: this.$t("roleConfig.llm"), key: "llmModelId", type: "LLM" },
-        { label: this.$t('roleConfig.vllm'), key: 'vllmModelId', type: 'VLLM' },
+        { label: this.$t("roleConfig.vllm"), key: "vllmModelId", type: "VLLM" },
-        { label: this.$t('roleConfig.intent'), key: 'intentModelId', type: 'Intent' },
+        { label: this.$t("roleConfig.intent"), key: "intentModelId", type: "Intent" },
-        { label: this.$t('roleConfig.memory'), key: 'memModelId', type: 'Memory' },
+        { label: this.$t("roleConfig.memory"), key: "memModelId", type: "Memory" },
-        { label: this.$t('roleConfig.tts'), key: 'ttsModelId', type: 'TTS' }
+        { label: this.$t("roleConfig.tts"), key: "ttsModelId", type: "TTS" },
       ],
       llmModeTypeMap: new Map(),
       modelOptions: {},
       templates: [],
       loadingTemplate: false,
       voiceOptions: [],
+      voiceDetails: {}, // 保存完整的音色信息
       showFunctionDialog: false,
       currentFunctions: [],
       functionColorMap: [
-        '#FF6B6B', '#4ECDC4', '#45B7D1',
+        "#FF6B6B",
-        '#96CEB4', '#FFEEAD', '#D4A5A5', '#A2836E'
+        "#4ECDC4",
+        "#45B7D1",
+        "#96CEB4",
+        "#FFEEAD",
+        "#D4A5A5",
+        "#A2836E",
       ],
       allFunctions: [],
       originalFunctions: [],
-    }
+      playingVoice: false,
+      currentAudio: null,
+    };
   },
   methods: {
     goToHome() {
-      this.$router.push('/home');
+      this.$router.push("/home");
     },
     saveConfig() {
       const configData = {
@@ -219,67 +346,68 @@ export default {
         langCode: this.form.langCode,
         language: this.form.language,
         sort: this.form.sort,
-        functions: this.currentFunctions.map(item => {
+        functions: this.currentFunctions.map((item) => {
-          return ({
+          return {
             pluginId: item.id,
-            paramInfo: item.params
+            paramInfo: item.params,
-          })
+          };
-        })
+        }),
       };
       Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
         if (data.code === 0) {
           this.$message.success({
-            message: i18n.t('roleConfig.saveSuccess'),
+            message: i18n.t("roleConfig.saveSuccess"),
-            showClose: true
+            showClose: true,
           });
         } else {
           this.$message.error({
-            message: data.msg || i18n.t('roleConfig.saveFailed'),
+            message: data.msg || i18n.t("roleConfig.saveFailed"),
-            showClose: true
+            showClose: true,
           });
         }
       });
     },
     resetConfig() {
-      this.$confirm(i18n.t('roleConfig.confirmReset'), i18n.t('message.info'), {
+      this.$confirm(i18n.t("roleConfig.confirmReset"), i18n.t("message.info"), {
-        confirmButtonText: i18n.t('button.ok'),
+        confirmButtonText: i18n.t("button.ok"),
-        cancelButtonText: i18n.t('button.cancel'),
+        cancelButtonText: i18n.t("button.cancel"),
-        type: 'warning'
+        type: "warning",
-      }).then(() => {
+      })
-        this.form = {
+        .then(() => {
-          agentCode: "",
+          this.form = {
-          agentName: "",
+            agentCode: "",
-          ttsVoiceId: "",
+            agentName: "",
-          chatHistoryConf: 0,
+            ttsVoiceId: "",
-          systemPrompt: "",
+            chatHistoryConf: 0,
-          summaryMemory: "",
+            systemPrompt: "",
-          langCode: "",
+            summaryMemory: "",
-          language: "",
+            langCode: "",
-          sort: "",
+            language: "",
-          model: {
+            sort: "",
-            ttsModelId: "",
+            model: {
-            vadModelId: "",
+              ttsModelId: "",
-            asrModelId: "",
+              vadModelId: "",
-            llmModelId: "",
+              asrModelId: "",
-            vllmModelId: "",
+              llmModelId: "",
-            memModelId: "",
+              vllmModelId: "",
-            intentModelId: "",
+              memModelId: "",
-          }
+              intentModelId: "",
-        }
+            },
-        this.currentFunctions = [];
+          };
-        this.$message.success({
+          this.currentFunctions = [];
-          message: i18n.t('roleConfig.resetSuccess'),
+          this.$message.success({
-          showClose: true
+            message: i18n.t("roleConfig.resetSuccess"),
+            showClose: true,
+          });
         })
-      }).catch(() => {
+        .catch(() => {});
-      });
     },
     fetchTemplates() {
       Api.agent.getAgentTemplate(({ data }) => {
         if (data.code === 0) {
           this.templates = data.data;
         } else {
-          this.$message.error(data.msg || i18n.t('roleConfig.fetchTemplatesFailed'));
+          this.$message.error(data.msg || i18n.t("roleConfig.fetchTemplatesFailed"));
         }
       });
     },
@@ -289,15 +417,15 @@ export default {
       try {
         this.applyTemplateData(template);
         this.$message.success({
-          message: `${template.agentName}${i18n.t('roleConfig.templateApplied')}`,
+          message: `${template.agentName}${i18n.t("roleConfig.templateApplied")}`,
-          showClose: true
+          showClose: true,
         });
       } catch (error) {
         this.$message.error({
-          message: i18n.t('roleConfig.applyTemplateFailed'),
+          message: i18n.t("roleConfig.applyTemplateFailed"),
-          showClose: true
+          showClose: true,
         });
-        console.error('应用模板失败:', error);
+        console.error("应用模板失败:", error);
       } finally {
         this.loadingTemplate = false;
       }
@@ -318,8 +446,8 @@ export default {
           llmModelId: templateData.llmModelId || this.form.model.llmModelId,
           vllmModelId: templateData.vllmModelId || this.form.model.vllmModelId,
           memModelId: templateData.memModelId || this.form.model.memModelId,
-          intentModelId: templateData.intentModelId || this.form.model.intentModelId
+          intentModelId: templateData.intentModelId || this.form.model.intentModelId,
-        }
+        },
       };
     },
     fetchAgentConfig(agentId) {
@@ -335,8 +463,8 @@ export default {
               llmModelId: data.data.llmModelId,
               vllmModelId: data.data.vllmModelId,
               memModelId: data.data.memModelId,
-              intentModelId: data.data.intentModelId
+              intentModelId: data.data.intentModelId,
-            }
+            },
           };
           // 后端只给了最小映射：[{ id, agentId, pluginId }, ...]
           const savedMappings = data.data.functions || [];
@@ -348,8 +476,8 @@ export default {
 
           ensureFuncs.then(() => {
             // 合并：按照 pluginId（id 字段）把全量元数据信息补齐
-            this.currentFunctions = savedMappings.map(mapping => {
+            this.currentFunctions = savedMappings.map((mapping) => {
-              const meta = this.allFunctions.find(f => f.id === mapping.pluginId);
+              const meta = this.allFunctions.find((f) => f.id === mapping.pluginId);
               if (!meta) {
                 // 插件定义没找到，退化处理
                 return { id: mapping.pluginId, name: mapping.pluginId, params: {} };
@@ -359,7 +487,7 @@ export default {
                 name: meta.name,
                 // 后端如果还有 paramInfo 字段就用 mapping.paramInfo，否则用 meta.params 默认值
                 params: mapping.paramInfo || { ...meta.params },
-                fieldsMeta: meta.fieldsMeta  // 保留以便对话框渲染 tooltip
+                fieldsMeta: meta.fieldsMeta, // 保留以便对话框渲染 tooltip
               };
             });
             // 备份原始，以备取消时恢复
@@ -369,44 +497,48 @@ export default {
             this.updateIntentOptionsVisibility();
           });
         } else {
-          this.$message.error(data.msg || i18n.t('roleConfig.fetchConfigFailed'));
+          this.$message.error(data.msg || i18n.t("roleConfig.fetchConfigFailed"));
         }
       });
     },
     fetchModelOptions() {
-      this.models.forEach(model => {
+      this.models.forEach((model) => {
         if (model.type != "LLM") {
-          Api.model.getModelNames(model.type, '', ({ data }) => {
+          Api.model.getModelNames(model.type, "", ({ data }) => {
             if (data.code === 0) {
-              this.$set(this.modelOptions, model.type, data.data.map(item => ({
+              this.$set(
-                value: item.id,
+                this.modelOptions,
-                label: item.modelName,
+                model.type,
-                isHidden: false
+                data.data.map((item) => ({
-              })));
+                  value: item.id,
+                  label: item.modelName,
+                  isHidden: false,
+                }))
+              );
 
               // 如果是意图识别选项，需要根据当前LLM类型更新可见性
-              if (model.type === 'Intent') {
+              if (model.type === "Intent") {
                 this.updateIntentOptionsVisibility();
               }
             } else {
-              this.$message.error(data.msg || i18n.t('roleConfig.fetchModelsFailed'));
+              this.$message.error(data.msg || i18n.t("roleConfig.fetchModelsFailed"));
             }
           });
         } else {
-          Api.model.getLlmModelCodeList('', ({ data }) => {
+          Api.model.getLlmModelCodeList("", ({ data }) => {
             if (data.code === 0) {
-              let LLMdata = []
+              let LLMdata = [];
-              data.data.forEach(item => {
+              data.data.forEach((item) => {
                 LLMdata.push({
                   value: item.id,
                   label: item.modelName,
-                  isHidden: false
+                  isHidden: false,
-                })
+                });
-                this.llmModeTypeMap.set(item.id, item.type)
+                this.llmModeTypeMap.set(item.id, item.type);
-              })
+              });
               this.$set(this.modelOptions, model.type, LLMdata);
             } else {
-              this.$message.error(data.msg || '获取LLM模型列表失败');
+              this.$message.error(data.msg || "获取LLM模型列表失败");
             }
           });
         }
@@ -415,16 +547,24 @@ export default {
     fetchVoiceOptions(modelId) {
       if (!modelId) {
         this.voiceOptions = [];
+        this.voiceDetails = {};
         return;
       }
-      Api.model.getModelVoices(modelId, '', ({ data }) => {
+      Api.model.getModelVoices(modelId, "", ({ data }) => {
         if (data.code === 0 && data.data) {
-          this.voiceOptions = data.data.map(voice => ({
+          this.voiceOptions = data.data.map((voice) => ({
             value: voice.id,
-            label: voice.name
+            label: voice.name,
           }));
+          // 保存完整的音色信息，添加调试信息
+          console.log('获取到的音色数据:', data.data);
+          this.voiceDetails = data.data.reduce((acc, voice) => {
+            acc[voice.id] = voice;
+            return acc;
+          }, {});
         } else {
           this.voiceOptions = [];
+          this.voiceDetails = {};
         }
       });
     },
@@ -433,20 +573,23 @@ export default {
       return this.functionColorMap[hash % this.functionColorMap.length];
     },
     showFunctionIcons(type) {
-      return type === 'Intent' &&
+      return type === "Intent" && this.form.model.intentModelId !== "Intent_nointent";
-        this.form.model.intentModelId !== 'Intent_nointent';
     },
     handleModelChange(type, value) {
-      if (type === 'Intent' && value !== 'Intent_nointent') {
+      if (type === "Intent" && value !== "Intent_nointent") {
         this.fetchAllFunctions();
       }
-      if (type === 'Memory' && value === 'Memory_nomem') {
+      if (type === "Memory" && value === "Memory_nomem") {
         this.form.chatHistoryConf = 0;
       }
-      if (type === 'Memory' && value !== 'Memory_nomem' && (this.form.chatHistoryConf === 0 || this.form.chatHistoryConf === null)) {
+      if (
+        type === "Memory" &&
+        value !== "Memory_nomem" &&
+        (this.form.chatHistoryConf === 0 || this.form.chatHistoryConf === null)
+      ) {
         this.form.chatHistoryConf = 2;
       }
-      if (type === 'LLM') {
+      if (type === "LLM") {
         // 当LLM类型改变时，更新意图识别选项的可见性
         this.updateIntentOptionsVisibility();
       }
@@ -455,8 +598,8 @@ export default {
       return new Promise((resolve, reject) => {
         Api.model.getPluginFunctionList(null, ({ data }) => {
           if (data.code === 0) {
-            this.allFunctions = data.data.map(item => {
+            this.allFunctions = data.data.map((item) => {
-              const meta = JSON.parse(item.fields || '[]');
+              const meta = JSON.parse(item.fields || "[]");
               const params = meta.reduce((m, f) => {
                 m[f.key] = f.default;
                 return m;
@@ -465,7 +608,7 @@ export default {
             });
             resolve();
           } else {
-            this.$message.error(data.msg || i18n.t('roleConfig.fetchPluginsFailed'));
+            this.$message.error(data.msg || i18n.t("roleConfig.fetchPluginsFailed"));
             reject();
           }
         });
@@ -474,7 +617,7 @@ export default {
     openFunctionDialog() {
       // 显示编辑对话框时，确保 allFunctions 已经加载
       if (this.allFunctions.length === 0) {
-        this.fetchAllFunctions().then(() => this.showFunctionDialog = true);
+        this.fetchAllFunctions().then(() => (this.showFunctionDialog = true));
       } else {
         this.showFunctionDialog = true;
       }
@@ -493,12 +636,12 @@ export default {
     updateIntentOptionsVisibility() {
       // 根据当前选择的LLM类型更新意图识别选项的可见性
       const currentLlmId = this.form.model.llmModelId;
-      if (!currentLlmId || !this.modelOptions['Intent']) return;
+      if (!currentLlmId || !this.modelOptions["Intent"]) return;
 
       const llmType = this.llmModeTypeMap.get(currentLlmId);
       if (!llmType) return;
 
-      this.modelOptions['Intent'].forEach(item => {
+      this.modelOptions["Intent"].forEach((item) => {
         if (item.value === "Intent_function_call") {
           // 如果llmType是openai或ollama，允许选择function_call
           // 否则隐藏function_call选项
@@ -514,35 +657,154 @@ export default {
       });
 
       // 如果当前选择的意图识别是function_call，但LLM类型不支持，则设置为可选的第一项
-      if (this.form.model.intentModelId === "Intent_function_call" &&
+      if (
-        llmType !== "openai" && llmType !== "ollama") {
+        this.form.model.intentModelId === "Intent_function_call" &&
+        llmType !== "openai" &&
+        llmType !== "ollama"
+      ) {
         // 找到第一个可见的选项
-        const firstVisibleOption = this.modelOptions['Intent'].find(item => !item.isHidden);
+        const firstVisibleOption = this.modelOptions["Intent"].find(
+          (item) => !item.isHidden
+        );
         if (firstVisibleOption) {
           this.form.model.intentModelId = firstVisibleOption.value;
         } else {
           // 如果没有可见选项，设置为Intent_nointent
-          this.form.model.intentModelId = 'Intent_nointent';
+          this.form.model.intentModelId = "Intent_nointent";
         }
       }
     },
+    // 检查是否有音频预览
+    hasAudioPreview(item) {
+      // 检查item中是否包含音频相关字段
+      const hasAudioFields = item.voiceDemo || item.demoUrl || item.audioUrl || 
+                           item.voice_demo || item.sample_voice || item.referenceAudio;
+      return hasAudioFields && typeof hasAudioFields === 'string' && hasAudioFields.trim() !== '';
+    },
+    
+    // 播放音色预览
+    playVoicePreview(voiceId = null) {
+      // 如果传入了voiceId，则使用传入的，否则使用当前选中的
+      const targetVoiceId = voiceId || this.form.ttsVoiceId;
+      
+      if (!targetVoiceId) {
+        this.$message.warning("请先选择一个音色");
+        return;
+      }
+
+      // 停止当前正在播放的音频
+      if (this.currentAudio) {
+        this.currentAudio.pause();
+        this.currentAudio = null;
+      }
+
+      try {
+        // 从保存的音色详情中获取音频URL
+        const voiceDetail = this.voiceDetails[targetVoiceId];
+        
+        // 添加调试信息
+        console.log('当前选择的音色ID:', targetVoiceId);
+        console.log('音色详情:', voiceDetail);
+        
+        // 尝试多种可能的音频属性名
+        let audioUrl = null;
+        if (voiceDetail) {
+          // 首先尝试直接从voiceDetail中获取各种可能的音频字段
+          audioUrl = voiceDetail.voiceDemo || 
+                     voiceDetail.demoUrl || 
+                     voiceDetail.audioUrl || 
+                     voiceDetail.voice_demo || 
+                     voiceDetail.sample_voice;
+          
+          // 如果没有找到，尝试检查是否有URL格式的字段
+          if (!audioUrl) {
+            for (const key in voiceDetail) {
+              const value = voiceDetail[key];
+              if (typeof value === 'string' && 
+                  (value.startsWith('http://') || 
+                   value.startsWith('https://') || 
+                   value.endsWith('.mp3') || 
+                   value.endsWith('.wav') || 
+                   value.endsWith('.ogg'))) {
+                audioUrl = value;
+                console.log(`发现可能的音频URL在字段 '${key}':`, audioUrl);
+                break;
+              }
+            }
+          }
+        }
+        
+        if (!audioUrl) {
+          // 如果没有音频URL，显示友好的提示
+          this.$message.warning("该音色暂无可预览的音频");
+          return;
+        }
+
+        // 设置播放状态
+        this.playingVoice = true;
+        
+        // 创建并播放音频
+        this.currentAudio = new Audio(audioUrl);
+
+        // 设置音量
+        this.currentAudio.volume = 1.0;
+
+        // 设置超时，防止加载过长时间
+        const timeoutId = setTimeout(() => {
+          if (this.currentAudio && this.playingVoice) {
+            this.$message.warning("音频加载时间较长，请稍后重试");
+            this.playingVoice = false;
+          }
+        }, 10000); // 10秒超时
+
+        // 监听播放错误
+        this.currentAudio.onerror = () => {
+          clearTimeout(timeoutId);
+          console.error('音频播放错误');
+          this.$message.warning("音频播放失败");
+          this.playingVoice = false;
+        };
+
+        // 监听播放开始，清除超时
+        this.currentAudio.onplay = () => {
+          clearTimeout(timeoutId);
+        };
+
+        // 监听播放结束
+        this.currentAudio.onended = () => {
+          this.playingVoice = false;
+        };
+
+        // 实际调用play方法开始播放
+        this.currentAudio.play().catch((error) => {
+          clearTimeout(timeoutId);
+          console.error('播放失败:', error);
+          this.$message.warning("无法播放音频");
+          this.playingVoice = false;
+        });
+      } catch (error) {
+        console.error("播放音频过程出错:", error);
+        this.$message.error("播放音频过程出错");
+        this.playingVoice = false;
+      }
+    },
     updateChatHistoryConf() {
-      if (this.form.model.memModelId === 'Memory_nomem') {
+      if (this.form.model.memModelId === "Memory_nomem") {
         this.form.chatHistoryConf = 0;
       }
     },
   },
   watch: {
-    'form.model.ttsModelId': {
+    "form.model.ttsModelId": {
       handler(newVal, oldVal) {
         if (oldVal && newVal !== oldVal) {
-          this.form.ttsVoiceId = '';
+          this.form.ttsVoiceId = "";
           this.fetchVoiceOptions(newVal);
         } else {
           this.fetchVoiceOptions(newVal);
         }
       },
-      immediate: true
+      immediate: true,
     },
     voiceOptions: {
       handler(newVal) {
@@ -550,8 +812,8 @@ export default {
           this.form.ttsVoiceId = newVal[0].value;
         }
       },
-      immediate: true
+      immediate: true,
-    }
+    },
   },
   mounted() {
     const agentId = this.$route.query.agentId;
@@ -561,8 +823,8 @@ export default {
     }
     this.fetchModelOptions();
     this.fetchTemplates();
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
@@ -686,12 +948,32 @@ export default {
 
 .form-select {
   width: 100%;
+  height: 36px;
+}
+
+.play-button {
+  color: #409EFF;
+  transition: color 0.3s;
+}
+
+.play-button:hover {
+  color: #66b1ff;
+}
+
+.play-button.is-loading {
+  color: #909399;
 }
 
 .form-textarea {
   width: 100%;
 }
 
+.voice-select-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .template-container {
   display: flex;
   gap: 8px;
@@ -801,8 +1083,8 @@ export default {
 }
 
 .custom-close-btn:hover {
-  color: #409EFF;
+  color: #409eff;
-  border-color: #409EFF;
+  border-color: #409eff;
 }
 
 .edit-function-btn {
@@ -873,4 +1155,4 @@ export default {
   height: 32px;
   margin-left: 8px;
 }
-</style>
+</style>