red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新开发环境API服务地址,将主服务和新功能服务的IP地址从内网地址改为公网地址116.204.74.41,在音频资产管理中新增文本转语音功能按钮和对话框组件,在知识库文件管理中将文件名改为可点击链接支持跳转到文档详情页面

Browse Source
This commit is contained in:
WUSIJIAN
2026-02-03 15:43:16 +08:00
parent 30bfa8ddc3
commit 61ba18b03f
5 changed files with 846 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
src/views/digitalHuman/audioAssets/component/ttsDialog.vue Normal file
View File

@@ -0,0 +1,358 @@
<template>
<el-dialog
v-model="visible"
title="文本转语音"
width="700px"
:close-on-click-modal="false"
@close="handleClose"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="音频名称" prop="name">
<el-input v-model="form.name" placeholder="请输入音频名称" maxlength="50" show-word-limit />
</el-form-item>
<el-form-item label="文本内容" prop="text">
<el-input
v-model="form.text"
type="textarea"
:rows="5"
placeholder="请输入要转换的文本内容"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="音色选择" prop="voice">
<el-select v-model="form.voice" placeholder="请选择音色" style="width: 100%">
<el-option-group label="男声">
<el-option label="商务男声" value="male_business" />
<el-option label="磁性男声" value="male_magnetic" />
<el-option label="新闻男声" value="male_news" />
</el-option-group>
<el-option-group label="女声">
<el-option label="甜美女声" value="female_sweet" />
<el-option label="知性女声" value="female_intellectual" />
<el-option label="温柔女声" value="female_gentle" />
</el-option-group>
<el-option-group label="童声">
<el-option label="活泼童声" value="child_lively" />
<el-option label="可爱童声" value="child_cute" />
</el-option-group>
</el-select>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="语速">
<el-slider v-model="form.speed" :min="0.5" :max="2" :step="0.1" :format-tooltip="(val: number) => val + 'x'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="音量">
<el-slider v-model="form.volume" :min="0" :max="100" :format-tooltip="(val: number) => val + '%'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="音调">
<el-slider v-model="form.pitch" :min="-12" :max="12" :step="1" :format-tooltip="(val: number) => (val > 0 ? '+' : '') + val" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采样率">
<el-select v-model="form.sampleRate" style="width: 100%">
<el-option label="16000Hz" :value="16000" />
<el-option label="22050Hz" :value="22050" />
<el-option label="44100Hz" :value="44100" />
<el-option label="48000Hz" :value="48000" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="输出格式">
<el-radio-group v-model="form.format">
<el-radio label="mp3">MP3</el-radio>
<el-radio label="wav">WAV</el-radio>
<el-radio label="pcm">PCM</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 预览区域 -->
<div v-if="previewGenerated" class="preview-section">
<div class="preview-header">
<span class="preview-title">预览</span>
<el-tag type="success" size="small">已生成</el-tag>
</div>
<div class="preview-player">
<el-button
:type="isPlaying ? 'danger' : 'primary'"
circle
@click="togglePreview"
>
<el-icon>
<ele-VideoPlay v-if="!isPlaying" />
<ele-VideoPause v-else />
</el-icon>
</el-button>
<el-progress
:percentage="playProgress"
:show-text="false"
style="flex: 1; margin: 0 15px"
/>
<span class="duration">{{ formatDuration(previewDuration) }}</span>
</div>
<div class="preview-info">
<span>文件大小: {{ formatFileSize(previewFileSize) }}</span>
<span>时长: {{ formatDuration(previewDuration) }}</span>
<span>采样率: {{ form.sampleRate }}Hz</span>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="warning" :loading="generating" @click="handleGenerate">
<el-icon><ele-Headset /></el-icon>
{{ generating ? '生成中...' : '生成预览' }}
</el-button>
<el-button type="primary" :disabled="!previewGenerated" :loading="saving" @click="handleSave">
<el-icon><ele-Check /></el-icon>
保存音频
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
const emit = defineEmits(['success']);
const visible = ref(false);
const formRef = ref<FormInstance>();
const generating = ref(false);
const saving = ref(false);
const previewGenerated = ref(false);
const isPlaying = ref(false);
const playProgress = ref(0);
const previewDuration = ref(0);
const previewFileSize = ref(0);
let progressTimer: ReturnType<typeof setInterval> | null = null;
const form = reactive({
name: '',
text: '',
voice: 'female_sweet',
speed: 1.0,
volume: 80,
pitch: 0,
sampleRate: 44100,
format: 'mp3',
});
const rules = reactive<FormRules>({
name: [{ required: true, message: '请输入音频名称', trigger: 'blur' }],
text: [
{ required: true, message: '请输入文本内容', trigger: 'blur' },
{ min: 1, max: 500, message: '文本内容长度在1-500个字符之间', trigger: 'blur' },
],
voice: [{ required: true, message: '请选择音色', trigger: 'change' }],
});
// 打开弹窗
const openDialog = () => {
visible.value = true;
resetForm();
};
// 重置表单
const resetForm = () => {
form.name = '';
form.text = '';
form.voice = 'female_sweet';
form.speed = 1.0;
form.volume = 80;
form.pitch = 0;
form.sampleRate = 44100;
form.format = 'mp3';
previewGenerated.value = false;
isPlaying.value = false;
playProgress.value = 0;
previewDuration.value = 0;
previewFileSize.value = 0;
};
// 关闭弹窗
const handleClose = () => {
stopPreview();
visible.value = false;
};
// 生成预览
const handleGenerate = async () => {
if (!formRef.value) return;
await formRef.value.validate((valid) => {
if (!valid) return;
generating.value = true;
// 模拟生成过程
setTimeout(() => {
// 根据文本长度估算时长（假设每秒5个字）
const textLength = form.text.length;
const baseDuration = Math.ceil(textLength / 5);
previewDuration.value = Math.max(3, Math.round(baseDuration / form.speed));
// 估算文件大小
const bitrate = form.format === 'wav' ? 1411 : form.format === 'mp3' ? 128 : 256;
previewFileSize.value = Math.round((previewDuration.value * bitrate * 1000) / 8);
previewGenerated.value = true;
generating.value = false;
ElMessage.success('语音生成成功，请试听预览');
}, 1500);
});
};
// 播放/暂停预览
const togglePreview = () => {
if (isPlaying.value) {
stopPreview();
} else {
startPreview();
}
};
// 开始播放
const startPreview = () => {
isPlaying.value = true;
playProgress.value = 0;
const totalSteps = previewDuration.value * 10;
let currentStep = 0;
progressTimer = setInterval(() => {
currentStep++;
playProgress.value = Math.round((currentStep / totalSteps) * 100);
if (playProgress.value >= 100) {
stopPreview();
}
}, 100);
};
// 停止播放
const stopPreview = () => {
isPlaying.value = false;
playProgress.value = 0;
if (progressTimer) {
clearInterval(progressTimer);
progressTimer = null;
}
};
// 保存音频
const handleSave = async () => {
saving.value = true;
// 模拟保存过程
setTimeout(() => {
saving.value = false;
ElMessage.success('音频保存成功');
emit('success', {
name: form.name,
voiceType: form.voice.split('_')[0],
duration: previewDuration.value,
fileSize: previewFileSize.value,
sampleRate: form.sampleRate,
format: form.format,
});
handleClose();
}, 1000);
};
// 格式化时长
const formatDuration = (seconds: number) => {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins}:${secs.toString().padStart(2, '0')}`;
};
// 格式化文件大小
const formatFileSize = (bytes: number) => {
if (bytes < 1024) return bytes + 'B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
return (bytes / 1024 / 1024).toFixed(1) + 'MB';
};
// 监听表单变化，重置预览状态
watch(
() => [form.text, form.voice, form.speed, form.pitch],
() => {
if (previewGenerated.value) {
previewGenerated.value = false;
stopPreview();
}
}
);
defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
.preview-section {
margin-top: 20px;
padding: 16px;
background: #f5f7fa;
border-radius: 8px;
border: 1px solid #ebeef5;
.preview-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
.preview-title {
font-size: 14px;
font-weight: 600;
color: #303133;
}
}
.preview-player {
display: flex;
align-items: center;
margin-bottom: 12px;
.duration {
font-size: 12px;
color: #909399;
min-width: 40px;
}
}
.preview-info {
display: flex;
gap: 20px;
font-size: 12px;
color: #909399;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
}
</style>