updata:智控台页面添加语言切换,支持中英繁。

This commit is contained in:
rainv123
2025-09-11 17:10:50 +08:00
parent a9b0775469
commit 98a1483032
41 changed files with 3800 additions and 1061 deletions
+44 -44
View File
@@ -7,72 +7,72 @@
<div class="scroll-wrapper">
<div class="table-container" ref="tableContainer" @scroll="handleScroll">
<el-table v-loading="loading" :data="filteredTtsModels" style="width: 100%;" class="data-table"
header-row-class-name="table-header" :fit="true" element-loading-text="拼命加载中"
header-row-class-name="table-header" :fit="true" :element-loading-text="$t('voicePrint.loading')"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<el-table-column label="选择" width="50" align="center">
<el-table-column :label="$t('ttsModel.select')" width="50" align="center">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.selected"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="音色编码" align="center">
<el-table-column :label="$t('ttsModel.voiceCode')" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row.editing" v-model="scope.row.voiceCode"></el-input>
<span v-else>{{ scope.row.voiceCode }}</span>
</template>
</el-table-column>
<el-table-column label="音色名称" align="center">
<el-table-column :label="$t('ttsModel.voiceName')" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row.editing" v-model="scope.row.voiceName"></el-input>
<span v-else>{{ scope.row.voiceName }}</span>
</template>
</el-table-column>
<el-table-column label="语言类型" align="center">
<el-table-column :label="$t('ttsModel.languageType')" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row.editing" v-model="scope.row.languageType"></el-input>
<span v-else>{{ scope.row.languageType }}</span>
</template>
</el-table-column>
<el-table-column v-if="!showReferenceColumns" label="试听" align="center" class-name="audio-column">
<el-table-column v-if="!showReferenceColumns" :label="$t('ttsModel.preview')" align="center" class-name="audio-column">
<template slot-scope="scope">
<div class="custom-audio-container">
<el-input v-if="scope.row.editing" v-model="scope.row.voiceDemo" placeholder="请输入MP3地址"
<el-input v-if="scope.row.editing" v-model="scope.row.voiceDemo" :placeholder="$t('ttsModel.enterMp3Url')"
class="audio-input">
</el-input>
<AudioPlayer v-else-if="isValidAudioUrl(scope.row.voiceDemo)" :audioUrl="scope.row.voiceDemo" />
</div>
</template>
</el-table-column>
<el-table-column v-if="!showReferenceColumns" label="备注" align="center">
<el-table-column v-if="!showReferenceColumns" :label="$t('ttsModel.remark')" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row.editing" type="textarea" :rows="1" autosize v-model="scope.row.remark"
placeholder="这里是备注" class="remark-input"></el-input>
:placeholder="$t('ttsModel.enterRemark')" class="remark-input"></el-input>
<span v-else>{{ scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column v-if="showReferenceColumns" label="克隆音频路径" align="center">
<el-table-column v-if="showReferenceColumns" :label="$t('ttsModel.cloneAudioPath')" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row.editing" v-model="scope.row.referenceAudio" placeholder="这里是克隆音频路径"></el-input>
<el-input v-if="scope.row.editing" v-model="scope.row.referenceAudio" :placeholder="$t('ttsModel.enterCloneAudioPath')"></el-input>
<span v-else>{{ scope.row.referenceAudio }}</span>
</template>
</el-table-column>
<el-table-column v-if="showReferenceColumns" label="克隆音频文本" align="center">
<el-table-column v-if="showReferenceColumns" :label="$t('ttsModel.cloneAudioText')" align="center">
<template slot-scope="scope">
<el-input v-if="scope.row.editing" v-model="scope.row.referenceText" placeholder="这里是克隆音频对应文本"></el-input>
<el-input v-if="scope.row.editing" v-model="scope.row.referenceText" :placeholder="$t('ttsModel.enterCloneAudioText')"></el-input>
<span v-else>{{ scope.row.referenceText }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150">
<el-table-column :label="$t('ttsModel.operation')" align="center" width="150">
<template slot-scope="scope">
<template v-if="!scope.row.editing">
<el-button type="text" size="mini" @click="startEdit(scope.row)" class="edit-btn">
编辑
</el-button>
<el-button type="text" size="mini" @click="deleteRow(scope.row)" class="delete-btn">
删除
</el-button>
{{ $t('ttsModel.edit') }}
</el-button>
<el-button type="text" size="mini" @click="deleteRow(scope.row)" class="delete-btn">
{{ $t('ttsModel.delete') }}
</el-button>
</template>
<el-button v-else type="success" size="mini" @click="saveEdit(scope.row)" class="save-Tts">保存
</el-button>
<el-button v-else type="success" size="mini" @click="saveEdit(scope.row)" class="save-Tts">{{ $t('ttsModel.save') }}
</el-button>
</template>
</el-table-column>
</el-table>
@@ -87,13 +87,13 @@
</div>
<div class="action-buttons">
<el-button type="primary" size="mini" @click="toggleSelectAll" style="background: #606ff3;border: None">
{{ selectAll ? '取消全选' : '全选' }}
{{ selectAll ? $t('ttsModel.deselectAll') : $t('ttsModel.selectAll') }}
</el-button>
<el-button type="primary" size="mini" @click="addNew" style="background: #5bc98c;border: None;">
新增
{{ $t('ttsModel.add') }}
</el-button>
<el-button type="primary" size="mini" @click="deleteRow(filteredTtsModels.filter(row => row.selected))"
style="background: red;border:None">删除
style="background: red;border:None">{{ $t('ttsModel.delete') }}
</el-button>
</div>
</el-dialog>
@@ -205,7 +205,7 @@ export default {
.map(item => ({
id: item.id || '',
voiceCode: item.ttsVoice || '',
voiceName: item.name || '未命名音色',
voiceName: item.name || this.$t('ttsModel.unnamedVoice'),
languageType: item.languages || '',
remark: item.remark || '',
referenceAudio: item.referenceAudio || '',
@@ -219,7 +219,7 @@ export default {
this.total = data.total;
} else {
this.$message.error({
message: data.msg || '获取音色列表失败',
message: data.msg || this.$t('ttsModel.getVoiceListFailed'),
showClose: true
});
}
@@ -227,7 +227,7 @@ export default {
}, (err) => {
console.error('加载失败:', err);
this.$message.error({
message: '加载音色数据失败',
message: this.$t('ttsModel.loadVoiceDataFailed'),
showClose: true
});
this.loading = false;
@@ -343,7 +343,7 @@ export default {
saveEdit(row) {
if (!row.voiceCode || !row.voiceName || !row.languageType) {
this.$message.error({
message: '音色编码、音色名称和语言类型不能为空',
message: this.$t('ttsModel.voiceCodeNameLanguageRequired'),
showClose: true
});
return;
@@ -390,7 +390,7 @@ export default {
delete row.originalData;
}
this.$message.error({
message: '操作失败,请重试',
message: this.$t('ttsModel.operationFailed'),
showClose: true
});
}
@@ -399,7 +399,7 @@ export default {
handleResponse(res, row) {
if (res.code === 0) {
this.$message.success({
message: row.id ? '修改成功' : '保存成功',
message: row.id ? this.$t('ttsModel.updateSuccess') : this.$t('ttsModel.saveSuccess'),
showClose: true
});
row.editing = false;
@@ -413,9 +413,9 @@ export default {
delete row.originalData;
}
this.$message.error({
message: res.msg || (row.id ? '修改失败' : '保存失败'),
showClose: true
});
message: res.msg || (row.id ? this.$t('ttsModel.updateFailed') : this.$t('ttsModel.saveFailed')),
showClose: true
});
}
},
@@ -429,7 +429,7 @@ export default {
addNew() {
const hasEditing = this.ttsModels.some(row => row.editing);
if (hasEditing) {
this.$message.warning('请先完成当前编辑再新增');
this.$message.warning(this.$t('ttsModel.finishEditingFirst'));
return;
}
@@ -440,7 +440,7 @@ export default {
const newRow = {
voiceCode: '',
voiceName: '',
languageType: '中文',
languageType: this.$t('editVoiceDialog.defaultLanguageType'),
voiceDemo: '',
remark: '',
referenceAudio: '',
@@ -458,34 +458,34 @@ export default {
const voices = Array.isArray(row) ? row : [row];
if (Array.isArray(row) && row.length === 0) {
this.$message.warning("请先选择需要删除的音色");
this.$message.warning(this.$t('ttsModel.selectVoiceToDelete'));
return;
}
const voiceCount = voices.length;
this.$confirm(`确定要删除选中的${voiceCount}个音色吗?`, "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
this.$confirm(this.$t('ttsModel.confirmDeleteVoice', {count: voiceCount}), this.$t('ttsModel.warning'), {
confirmButtonText: this.$t('common.confirm'),
cancelButtonText: this.$t('common.cancel'),
type: "warning",
distinguishCancelAndClose: true
}).then(() => {
const ids = voices.map(voice => voice.id);
if (ids.some(id => !id)) {
this.$message.error("存在无效的音色ID");
this.$message.error(this.$t('ttsModel.invalidVoiceId'));
return;
}
Api.timbre.deleteVoice(ids, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message: `成功删除${voiceCount}个参数`,
message: this.$t('ttsModel.deleteVoiceSuccess', {count: voiceCount}),
showClose: true
});
this.loadData(); // 刷新参数列表
} else {
this.$message.error({
message: data.msg || '删除失败,请重试',
message: data.msg || this.$t('ttsModel.deleteFailed'),
showClose: true
});
}
@@ -494,13 +494,13 @@ export default {
if (action === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除操作',
message: this.$t('ttsModel.deleteCancelled'),
duration: 1000
});
} else {
this.$message({
type: 'info',
message: '操作已关闭',
message: this.$t('ttsModel.operationClosed'),
duration: 1000
});
}