将音频资产管理的文本转语音功能从标签页改为下拉选择模式,在知识库文件管理中将文档详情从路由跳转改为弹窗展示
This commit is contained in:
WUSIJIAN
@@ -6,168 +6,172 @@
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-tabs v-model="activeTab" class="audio-tabs">
|
||||
<el-tab-pane label="上传音频" name="upload">
|
||||
<el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="100px">
|
||||
<el-form-item label="音频名称" prop="name">
|
||||
<el-input v-model="uploadForm.name" placeholder="请输入音频名称" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="音色类型" prop="voiceType">
|
||||
<el-select v-model="uploadForm.voiceType" placeholder="请选择音色类型" style="width: 100%">
|
||||
<el-option label="男声" value="male" />
|
||||
<el-option label="女声" value="female" />
|
||||
<el-option label="童声" value="child" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上传文件" prop="file">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="audio-uploader"
|
||||
drag
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
accept=".mp3,.wav,.pcm,.flac"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">支持 mp3、wav、pcm、flac 格式，文件大小不超过 50MB</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 上传预览 -->
|
||||
<div v-if="uploadPreview.show" class="preview-section">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">文件信息</span>
|
||||
<el-tag type="success" size="small">已选择</el-tag>
|
||||
</div>
|
||||
<div class="preview-info">
|
||||
<span>文件名: {{ uploadPreview.fileName }}</span>
|
||||
<span>文件大小: {{ formatFileSize(uploadPreview.fileSize) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- 模式切换下拉菜单 -->
|
||||
<div class="mode-switch">
|
||||
<el-select v-model="activeMode" style="width: 160px">
|
||||
<el-option label="上传音频" value="upload" />
|
||||
<el-option label="文本转语音" value="tts" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!-- 上传音频模式 -->
|
||||
<el-form v-if="activeMode === 'upload'" ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="100px" class="audio-form">
|
||||
<el-form-item label="音频名称" prop="name">
|
||||
<el-input v-model="uploadForm.name" placeholder="请输入音频名称" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
|
||||
<el-tab-pane label="文本转语音" name="tts">
|
||||
<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 label="音色类型" prop="voiceType">
|
||||
<el-select v-model="uploadForm.voiceType" placeholder="请选择音色类型" style="width: 100%">
|
||||
<el-option label="男声" value="male" />
|
||||
<el-option label="女声" value="female" />
|
||||
<el-option label="童声" value="child" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上传文件" prop="file">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="audio-uploader"
|
||||
drag
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
accept=".mp3,.wav,.pcm,.flac"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">支持 mp3、wav、pcm、flac 格式，文件大小不超过 50MB</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 上传预览 -->
|
||||
<div v-if="uploadPreview.show" class="preview-section">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">文件信息</span>
|
||||
<el-tag type="success" size="small">已选择</el-tag>
|
||||
</div>
|
||||
<div class="preview-info">
|
||||
<span>文件名: {{ uploadPreview.fileName }}</span>
|
||||
<span>文件大小: {{ formatFileSize(uploadPreview.fileSize) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 文本转语音模式 -->
|
||||
<el-form v-else ref="formRef" :model="form" :rules="rules" label-width="100px" class="audio-form">
|
||||
<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-form-item label="文本内容" prop="text">
|
||||
<el-input
|
||||
v-model="form.text"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
placeholder="请输入要转换的文本内容"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</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-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-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-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>
|
||||
|
||||
<!-- TTS预览区域 -->
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- TTS预览区域 -->
|
||||
<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>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<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>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<template v-if="activeTab === 'upload'">
|
||||
<template v-if="activeMode === 'upload'">
|
||||
<el-button type="primary" :loading="uploading" :disabled="!uploadPreview.show" @click="handleUpload">
|
||||
<el-icon><ele-Upload /></el-icon>
|
||||
{{ uploading ? '上传中...' : '上传音频' }}
|
||||
@@ -196,7 +200,7 @@ import type { FormInstance, FormRules, UploadInstance, UploadFile, UploadRawFile
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const visible = ref(false);
|
||||
const activeTab = ref('upload');
|
||||
const activeMode = ref<'upload' | 'tts'>('upload');
|
||||
const formRef = ref<FormInstance>();
|
||||
const uploadFormRef = ref<FormInstance>();
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
@@ -260,7 +264,7 @@ const openDialog = () => {
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
activeTab.value = 'upload';
|
||||
activeMode.value = 'upload';
|
||||
// 重置上传表单
|
||||
uploadForm.name = '';
|
||||
uploadForm.voiceType = '';
|
||||
@@ -462,10 +466,12 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.audio-tabs {
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.mode-switch {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.audio-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.audio-uploader {
|
||||
|
||||
Reference in New Issue
Block a user