mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 15:13:55 +08:00
update: 增加智能体独立音频设置
This commit is contained in:
@@ -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>
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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': '请输入交互语种,如:中文',
|
||||
|
||||
@@ -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': '請輸入交互語種,如:繁體中文',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user