update: 增加智能体独立音频设置

This commit is contained in:
Sakura-RanChen
2026-02-27 11:17:08 +08:00
parent 4ea3bea85c
commit 7b020ba55c
26 changed files with 638 additions and 29 deletions
@@ -0,0 +1,240 @@
<template>
<el-drawer
:visible.sync="drawerVisible"
:before-close="handleClose"
direction="rtl"
size="400px"
:modal="true"
:show-close="false"
custom-class="tts-advanced-drawer"
>
<div class="drawer-header" slot="title">
<span class="drawer-title">{{ $t('roleConfig.advancedSettings') }}</span>
<button class="drawer-close-btn" @click="handleClose">×</button>
</div>
<div class="drawer-content">
<el-form label-position="top">
<!-- 音量 -->
<el-form-item :label="$t('roleConfig.ttsVolume')">
<div class="slider-container">
<el-slider
v-model="localSettings.volume"
:min="-100"
:max="100"
:step="1"
:format-tooltip="formatTooltip"
class="tts-slider"
/>
<span class="slider-hint">{{ $t('roleConfig.volumeHint') }}</span>
</div>
</el-form-item>
<!-- 语速 -->
<el-form-item :label="$t('roleConfig.ttsRate')">
<div class="slider-container">
<el-slider
v-model="localSettings.speed"
:min="-100"
:max="100"
:step="1"
:format-tooltip="formatTooltip"
class="tts-slider"
/>
<span class="slider-hint">{{ $t('roleConfig.speedHint') }}</span>
</div>
</el-form-item>
<!-- 音调 -->
<el-form-item :label="$t('roleConfig.ttsPitch')">
<div class="slider-container">
<el-slider
v-model="localSettings.pitch"
:min="-100"
:max="100"
:step="1"
:format-tooltip="formatTooltip"
class="tts-slider"
/>
<span class="slider-hint">{{ $t('roleConfig.pitchHint') }}</span>
</div>
</el-form-item>
</el-form>
</div>
<div class="drawer-footer">
<el-button @click="handleCancel">{{ $t('button.cancel') }}</el-button>
<el-button type="primary" @click="handleSave">{{ $t('button.save') }}</el-button>
</div>
</el-drawer>
</template>
<script>
export default {
name: 'TtsAdvancedSettings',
props: {
visible: {
type: Boolean,
default: false
},
settings: {
type: Object,
default: () => ({
volume: 0,
speed: 0,
pitch: 0
})
}
},
data() {
return {
localSettings: {
volume: 0,
speed: 0,
pitch: 0
}
};
},
computed: {
drawerVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('update:visible', val);
}
}
},
watch: {
visible(newVal) {
if (newVal) {
// 当抽屉打开时,复制当前设置到本地
this.localSettings = { ...this.settings };
}
}
},
methods: {
handleClose() {
this.$emit('update:visible', false);
},
handleCancel() {
// 取消时不保存,直接关闭
this.handleClose();
},
handleSave() {
// 保存设置并关闭
this.$emit('save', { ...this.localSettings });
this.handleClose();
},
formatTooltip(val) {
return `${val}%`;
}
}
};
</script>
<style scoped>
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e8f0ff;
}
.drawer-title {
font-size: 18px;
font-weight: 600;
color: #3d4566;
}
.drawer-close-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #cfcfcf;
background: none;
font-size: 28px;
font-weight: lighter;
color: #cfcfcf;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
outline: none;
transition: all 0.3s;
}
.drawer-close-btn:hover {
color: #409eff;
border-color: #409eff;
}
.drawer-content {
padding: 24px;
flex: 1;
overflow-y: auto;
}
.slider-container {
width: 100%;
}
.slider-hint {
display: block;
font-size: 12px;
color: #909399;
margin-top: 8px;
line-height: 1.5;
}
.tts-slider {
width: 100%;
}
.tts-slider ::v-deep .el-slider__input {
width: 80px;
}
.tts-slider ::v-deep .el-input__inner {
text-align: center;
padding: 0 8px;
}
.drawer-footer {
padding: 16px 24px;
border-top: 1px solid #e8f0ff;
display: flex;
justify-content: center;
gap: 12px;
}
.drawer-footer .el-button {
min-width: 80px;
}
::v-deep .el-form-item__label {
font-size: 14px !important;
color: #3d4566 !important;
font-weight: 500;
padding-bottom: 8px;
}
::v-deep .el-form-item {
margin-bottom: 24px;
}
</style>
<style>
.tts-advanced-drawer .el-drawer__header {
margin-bottom: 0;
padding: 0;
}
.tts-advanced-drawer .el-drawer__body {
display: flex;
flex-direction: column;
padding: 0;
}
</style>
+8
View File
@@ -764,6 +764,14 @@ export default {
'roleConfig.intent': 'Intent',
'roleConfig.language': 'Sprache auswählen',
'roleConfig.voiceType': 'Stimmtyp',
'roleConfig.ttsVolume': 'Lautstärke',
'roleConfig.ttsRate': 'Geschwindigkeit',
'roleConfig.ttsPitch': 'Tonhöhe',
'roleConfig.ttsAdvanced': 'TTS-Parameter',
'roleConfig.advancedSettings': 'Erweiterte Einstellungen',
'roleConfig.volumeHint': '-100=Min, 0=Standard, 100=Max',
'roleConfig.speedHint': '-100=Langsamste, 0=Standard, 100=Schnellste',
'roleConfig.pitchHint': '-100=Niedrigste, 0=Standard, 100=Höchste',
'roleConfig.pleaseEnterContent': 'Bitte Inhalt eingeben',
'roleConfig.pleaseEnterLangCode': 'Bitte Sprachcode eingeben, z.B.: en_US',
'roleConfig.pleaseEnterLangName': 'Bitte Interaktionssprache eingeben, z.B.: Englisch',
+8
View File
@@ -764,6 +764,14 @@ export default {
'roleConfig.intent': 'Intent Recognition',
'roleConfig.language': 'Select Language',
'roleConfig.voiceType': 'Voice Type',
'roleConfig.ttsVolume': 'Volume',
'roleConfig.ttsRate': 'Speed',
'roleConfig.ttsPitch': 'Pitch',
'roleConfig.ttsAdvanced': 'TTS Parameters',
'roleConfig.advancedSettings': 'Advanced Settings',
'roleConfig.volumeHint': '-100=Min, 0=Standard, 100=Max',
'roleConfig.speedHint': '-100=Slowest, 0=Standard, 100=Fastest',
'roleConfig.pitchHint': '-100=Lowest, 0=Standard, 100=Highest',
'roleConfig.pleaseEnterContent': 'Please enter content',
'roleConfig.pleaseEnterLangCode': 'Please enter language code, e.g.: en_US',
'roleConfig.pleaseEnterLangName': 'Please enter interaction language, e.g.: English',
+8
View File
@@ -764,6 +764,14 @@ export default {
'roleConfig.intent': 'Nhận dạng ý định',
'roleConfig.language': 'Chọn ngôn ngữ',
'roleConfig.voiceType': 'Loại giọng nói',
'roleConfig.ttsVolume': 'Âm lượng',
'roleConfig.ttsRate': 'Tốc độ',
'roleConfig.ttsPitch': 'Cao độ',
'roleConfig.ttsAdvanced': 'Tham số TTS',
'roleConfig.advancedSettings': 'Cài đặt nâng cao',
'roleConfig.volumeHint': '-100=Tối thiểu, 0=Tiêu chuẩn, 100=Tối đa',
'roleConfig.speedHint': '-100=Chậm nhất, 0=Tiêu chuẩn, 100=Nhanh nhất',
'roleConfig.pitchHint': '-100=Thấp nhất, 0=Tiêu chuẩn, 100=Cao nhất',
'roleConfig.pleaseEnterContent': 'Vui lòng nhập nội dung',
'roleConfig.pleaseEnterLangCode': 'Vui lòng nhập mã ngôn ngữ, ví dụ: en_US',
'roleConfig.pleaseEnterLangName': 'Vui lòng nhập ngôn ngữ tương tác, ví dụ: Tiếng Anh',
+8
View File
@@ -764,6 +764,14 @@ export default {
'roleConfig.tts': '语音合成(TTS)',
'roleConfig.language': '选择语言',
'roleConfig.voiceType': '声音音色(Voice)',
'roleConfig.ttsVolume': '音量',
'roleConfig.ttsRate': '语速',
'roleConfig.ttsPitch': '音调',
'roleConfig.ttsAdvanced': 'TTS参数',
'roleConfig.advancedSettings': '高级设置',
'roleConfig.volumeHint': '-100=最小, 0=标准, 100=最大',
'roleConfig.speedHint': '-100=最慢, 0=标准, 100=最快',
'roleConfig.pitchHint': '-100=最低, 0=标准, 100=最高',
'roleConfig.pleaseEnterContent': '请输入内容',
'roleConfig.pleaseEnterLangCode': '请输入语言编码,如:zh_CN',
'roleConfig.pleaseEnterLangName': '请输入交互语种,如:中文',
+8
View File
@@ -764,6 +764,14 @@ export default {
'roleConfig.intent': '意圖識別(Intent)',
'roleConfig.language': '選擇語言',
'roleConfig.voiceType': '聲音音色(Voice)',
'roleConfig.ttsVolume': '音量',
'roleConfig.ttsRate': '語速',
'roleConfig.ttsPitch': '音調',
'roleConfig.ttsAdvanced': 'TTS參數',
'roleConfig.advancedSettings': '高級設置',
'roleConfig.volumeHint': '-100=最小, 0=標準, 100=最大',
'roleConfig.speedHint': '-100=最慢, 0=標準, 100=最快',
'roleConfig.pitchHint': '-100=最低, 0=標準, 100=最高',
'roleConfig.pleaseEnterContent': '請輸入內容',
'roleConfig.pleaseEnterLangCode': '請輸入語言編碼,如:zh_TW',
'roleConfig.pleaseEnterLangName': '請輸入交互語種,如:繁體中文',
+97 -4
View File
@@ -234,12 +234,12 @@
</el-form-item>
<div class="model-row">
<!-- 语言筛选器 -->
<el-form-item :label="$t('roleConfig.language')" class="model-item">
<el-form-item :label="$t('roleConfig.language')" class="model-item language-select-item">
<div class="model-select-wrapper">
<el-select
v-model="selectedLanguage"
:placeholder="$t('roleConfig.selectLanguage')"
class="form-select"
class="form-select language-select"
@change="filterVoicesByLanguage"
>
<el-option
@@ -251,7 +251,7 @@
</el-select>
</div>
</el-form-item>
<!-- 音色选择器 -->
<el-form-item :label="$t('roleConfig.voiceType')" class="model-item">
<div class="model-select-wrapper">
@@ -294,6 +294,13 @@
</div>
</el-option>
</el-select>
<el-button
class="edit-function-btn"
style="margin-left: 10px;"
@click="openTtsAdvancedSettings"
>
{{ $t('roleConfig.advancedSettings') }}
</el-button>
</div>
</el-form-item>
</div>
@@ -318,6 +325,11 @@
:providers="currentContextProviders"
@confirm="handleUpdateContext"
/>
<tts-advanced-settings
:visible.sync="showTtsAdvancedDialog"
:settings="ttsSettings"
@save="handleTtsSettingsSave"
/>
</div>
</template>
@@ -327,20 +339,30 @@ import { getServiceUrl } from "@/apis/api";
import RequestService from "@/apis/httpRequest";
import FunctionDialog from "@/components/FunctionDialog.vue";
import ContextProviderDialog from "@/components/ContextProviderDialog.vue";
import TtsAdvancedSettings from "@/components/TtsAdvancedSettings.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import i18n from "@/i18n";
import featureManager from "@/utils/featureManager";
export default {
name: "RoleConfigPage",
components: { HeaderBar, FunctionDialog, ContextProviderDialog },
components: { HeaderBar, FunctionDialog, ContextProviderDialog, TtsAdvancedSettings },
data() {
return {
showContextProviderDialog: false,
showTtsAdvancedDialog: false,
ttsSettings: {
volume: 0,
speed: 0,
pitch: 0
},
form: {
agentCode: "",
agentName: "",
ttsVoiceId: "",
ttsVolume: null,
ttsRate: null,
ttsPitch: null,
chatHistoryConf: 0,
systemPrompt: "",
summaryMemory: "",
@@ -422,6 +444,17 @@ export default {
}),
contextProviders: this.currentContextProviders,
};
// 只在用户设置了TTS参数时才传递(不为null/undefined
if (this.form.ttsVolume !== null && this.form.ttsVolume !== undefined) {
configData.ttsVolume = this.form.ttsVolume;
}
if (this.form.ttsRate !== null && this.form.ttsRate !== undefined) {
configData.ttsRate = this.form.ttsRate;
}
if (this.form.ttsPitch !== null && this.form.ttsPitch !== undefined) {
configData.ttsPitch = this.form.ttsPitch;
}
Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
if (data.code === 0) {
this.$message.success({
@@ -535,6 +568,14 @@ export default {
intentModelId: data.data.intentModelId,
},
};
// 同步TTS设置到ttsSettings
this.ttsSettings = {
volume: this.form.ttsVolume || 0,
speed: this.form.ttsRate || 0,
pitch: this.form.ttsPitch || 0
};
// 后端只给了最小映射:[{ id, agentId, pluginId }, ...]
const savedMappings = data.data.functions || [];
@@ -696,6 +737,13 @@ export default {
if (!currentVoiceSupportsLanguage) {
this.form.ttsVoiceId = filteredVoices.length > 0 ? filteredVoices[0].id : '';
}
// 同步到ttsSettings(如果值为null,使用0作为显示默认值,但不修改form中的值)
this.ttsSettings = {
volume: this.form.ttsVolume !== null && this.form.ttsVolume !== undefined ? this.form.ttsVolume : 0,
speed: this.form.ttsRate !== null && this.form.ttsRate !== undefined ? this.form.ttsRate : 0,
pitch: this.form.ttsPitch !== null && this.form.ttsPitch !== undefined ? this.form.ttsPitch : 0
};
},
getFunctionDisplayChar(name) {
@@ -763,6 +811,16 @@ export default {
openContextProviderDialog() {
this.showContextProviderDialog = true;
},
openTtsAdvancedSettings() {
this.showTtsAdvancedDialog = true;
},
handleTtsSettingsSave(settings) {
// 保存TTS设置
this.ttsSettings = { ...settings };
this.form.ttsVolume = settings.volume;
this.form.ttsRate = settings.speed;
this.form.ttsPitch = settings.pitch;
},
handleUpdateContext(providers) {
this.currentContextProviders = providers;
},
@@ -1316,6 +1374,15 @@ export default {
margin-bottom: 0;
}
.model-row .language-select-item {
flex: 0 0 35%;
max-width: 35%;
}
.model-row .language-select-item .language-select {
width: 100%;
}
.model-row .el-form-item__label {
font-size: 12px !important;
color: #3d4566 !important;
@@ -1491,4 +1558,30 @@ export default {
text-decoration: underline;
}
}
.slider-wrapper {
width: 100%;
padding-right: 12px;
}
.slider-hint {
display: block;
font-size: 12px;
color: #909399;
margin-top: 4px;
line-height: 1.5;
}
.tts-slider {
width: 100%;
}
.tts-slider ::v-deep .el-slider__input {
width: 80px;
}
.tts-slider ::v-deep .el-input__inner {
text-align: center;
padding: 0 8px;
}
</style>