333 lines
11 KiB
Vue
333 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div class="ai-voice-page">
|
|||
|
|
<!-- 头部区域 -->
|
|||
|
|
<div class="page-header">
|
|||
|
|
<div class="title">AI语音</div>
|
|||
|
|
<div class="subtitle">将文本快速转换为自然流畅的语音</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<!-- 左侧语音控制 -->
|
|||
|
|
<div class="control-panel">
|
|||
|
|
<div class="panel-title">语音控制</div>
|
|||
|
|
<div class="form-container">
|
|||
|
|
<BasicForm @register="registerForm" :schemas="leftFormSchemas" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 中间区域：试听 + 文案 + 常用场景 + 生成按钮 -->
|
|||
|
|
<div class="middle-wrapper">
|
|||
|
|
<!-- 试听区域 -->
|
|||
|
|
<div class="preview-panel">
|
|||
|
|
<div class="panel-title">试听区域</div>
|
|||
|
|
<div class="preview-content">
|
|||
|
|
<div v-if="!currentAudioUrl" class="empty-state">
|
|||
|
|
<Icon icon="ant-design:customer-service-outlined" size="72" color="#c0c4cc" />
|
|||
|
|
<p>填写下方文案并点击「开始合成」</p>
|
|||
|
|
<p class="tip">支持调整倍速、音量增益和声色，生成更加个性化的语音效果</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else class="audio-player-wrapper">
|
|||
|
|
<audio ref="audioRef" :src="currentAudioUrl" controls class="audio-control" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 当前播放音频信息 -->
|
|||
|
|
<div v-if="currentAudioUrl" class="audio-info-section">
|
|||
|
|
<div class="current-audio-info">
|
|||
|
|
<span class="info-label">当前语音：</span>
|
|||
|
|
<span class="info-text">{{ currentText }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 文案输入和常用场景 -->
|
|||
|
|
<div class="input-section">
|
|||
|
|
<!-- 文案输入框 -->
|
|||
|
|
<div class="form-item-group">
|
|||
|
|
<label class="form-label">文案</label>
|
|||
|
|
<a-textarea v-model:value="formText" :rows="4" :maxlength="500" show-count placeholder="请输入要合成的文案内容" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 常用场景 -->
|
|||
|
|
<div class="preset-group">
|
|||
|
|
<div class="preset-label">常用场景</div>
|
|||
|
|
<div class="preset-items">
|
|||
|
|
<div v-for="item in presetTexts" :key="item" class="preset-item" @click.prevent="handleApplyPreset(item)">
|
|||
|
|
{{ item }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 开始合成按钮 -->
|
|||
|
|
<div class="action-btn-group">
|
|||
|
|
<a-button type="primary" size="large" block :loading="generating" @click="handleSynthesize">
|
|||
|
|
<Icon icon="ant-design:sound-outlined" />
|
|||
|
|
开始合成
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧生成历史 - 列表风格 -->
|
|||
|
|
<div class="history-panel">
|
|||
|
|
<div class="panel-title">生成历史</div>
|
|||
|
|
<div class="history-list-wrapper">
|
|||
|
|
<div v-if="historyList.length === 0" class="empty-history">
|
|||
|
|
<p>暂无生成历史</p>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="history-list">
|
|||
|
|
<div v-for="item in historyList" :key="item.id" class="history-item">
|
|||
|
|
<div class="item-header">
|
|||
|
|
<span class="item-title" :title="item.content">{{ item.content }}</span>
|
|||
|
|
<span class="item-time">{{ item.createTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="item-actions">
|
|||
|
|
<a-button type="text" size="small" @click="handlePlay(item)">
|
|||
|
|
<Icon icon="ant-design:sound-outlined" />
|
|||
|
|
播放
|
|||
|
|
</a-button>
|
|||
|
|
<a-button type="text" size="small" @click="handleUseText(item)">
|
|||
|
|
<Icon icon="ant-design:copy-outlined" />
|
|||
|
|
复用文案
|
|||
|
|
</a-button>
|
|||
|
|
<a-button type="text" size="small" @click="handleDownload(item)">
|
|||
|
|
<Icon icon="ant-design:download-outlined" />
|
|||
|
|
下载
|
|||
|
|
</a-button>
|
|||
|
|
<a-button type="text" size="small" danger @click="handleDelete(item.id)">
|
|||
|
|
<Icon icon="ant-design:delete-outlined" />
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|||
|
|
import { BasicForm, useForm } from '@/components/Form';
|
|||
|
|
import { Icon } from '@/components/Icon';
|
|||
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|||
|
|
import { voiceFormSchemas } from './AiVoice.data';
|
|||
|
|
import { generateVoiceAsync, queryVoiceTask, getVoiceListByUser, deleteVoiceRecord } from '@/views/super/airag/aivoice/AiVoice.api';
|
|||
|
|
import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
|
|||
|
|
import { useUserStore } from '@/store/modules/user';
|
|||
|
|
|
|||
|
|
const TASK_ID_KEY = 'ai_voice_task_id';
|
|||
|
|
|
|||
|
|
const { createMessage } = useMessage();
|
|||
|
|
const userStore = useUserStore();
|
|||
|
|
|
|||
|
|
// 左侧表单：只包含模型、倍速、音量、声色，不包含文案
|
|||
|
|
const leftFormSchemas = voiceFormSchemas.filter((item) => !['text'].includes(item.field));
|
|||
|
|
|
|||
|
|
const [registerForm, { validate }] = useForm({
|
|||
|
|
schemas: leftFormSchemas,
|
|||
|
|
showActionButtonGroup: false,
|
|||
|
|
wrapperCol: { span: 24 },
|
|||
|
|
labelCol: { span: 24 },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const generating = ref(false);
|
|||
|
|
const audioRef = ref<HTMLAudioElement | null>(null);
|
|||
|
|
const currentAudioUrl = ref<string>('');
|
|||
|
|
const currentText = ref<string>('');
|
|||
|
|
const formText = ref<string>(''); // 文案输入框的独立状态
|
|||
|
|
const historyList = ref<any[]>([]);
|
|||
|
|
const isPresetApplying = ref(false); // 防抖标志
|
|||
|
|
let pollTimer: ReturnType<typeof setTimeout> | null = null;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据当前用户id加载语音列表
|
|||
|
|
*/
|
|||
|
|
async function loadVoiceList() {
|
|||
|
|
try {
|
|||
|
|
const userId = userStore.getUserInfo?.id;
|
|||
|
|
if (!userId) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
await getVoiceListByUser({ userId }).then((res) =>{
|
|||
|
|
if(res && res.result){
|
|||
|
|
for (const rs of res.result) {
|
|||
|
|
if (rs.voiceUrl) {
|
|||
|
|
rs.audioUrl = getFileAccessHttpUrl(rs.voiceUrl) || '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
historyList.value = res.result || [];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面加载时获取历史列表
|
|||
|
|
loadVoiceList();
|
|||
|
|
|
|||
|
|
const presetTexts = [
|
|||
|
|
'欢迎来到我们的平台，祝您使用愉快！',
|
|||
|
|
'今天的天气非常好，适合出门散步。',
|
|||
|
|
'尊敬的客户，您的订单已发货，请注意查收。',
|
|||
|
|
'Welcome to our platform, we hope you enjoy the experience!',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 应用预设文案
|
|||
|
|
*/
|
|||
|
|
function handleApplyPreset(text: string) {
|
|||
|
|
if (isPresetApplying.value) return;
|
|||
|
|
|
|||
|
|
isPresetApplying.value = true;
|
|||
|
|
formText.value = text;
|
|||
|
|
|
|||
|
|
// 300ms 后取消防抖标志
|
|||
|
|
setTimeout(() => {
|
|||
|
|
isPresetApplying.value = false;
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 开始合成（异步轮询模式）
|
|||
|
|
*/
|
|||
|
|
async function handleSynthesize() {
|
|||
|
|
try {
|
|||
|
|
const values = await validate();
|
|||
|
|
|
|||
|
|
if (!formText.value.trim()) {
|
|||
|
|
createMessage.warn('请输入文案内容');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
generating.value = true;
|
|||
|
|
currentAudioUrl.value = '';
|
|||
|
|
values.content = formText.value.trim();
|
|||
|
|
|
|||
|
|
//update-begin---wangshuai---date:20260415 for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
|
|||
|
|
const res = await generateVoiceAsync(values);
|
|||
|
|
if (res.success && res.result) {
|
|||
|
|
const taskId = res.result as string;
|
|||
|
|
localStorage.setItem(TASK_ID_KEY, taskId);
|
|||
|
|
startPolling(taskId);
|
|||
|
|
} else {
|
|||
|
|
generating.value = false;
|
|||
|
|
createMessage.error(res.message || '提交任务失败');
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
generating.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 轮询查询语音任务结果 */
|
|||
|
|
function startPolling(taskId: string) {
|
|||
|
|
const poll = () => {
|
|||
|
|
queryVoiceTask(taskId)
|
|||
|
|
//update-end---wangshuai---date:20260415 for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.success) {
|
|||
|
|
//update-begin---wangshuai---date:20260415 for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
|
|||
|
|
if (res.result === 'pending' || res.result === null) {
|
|||
|
|
pollTimer = setTimeout(poll, 3000);
|
|||
|
|
} else {
|
|||
|
|
generating.value = false;
|
|||
|
|
localStorage.removeItem(TASK_ID_KEY);
|
|||
|
|
currentAudioUrl.value = getFileAccessHttpUrl(res.result.voiceUrl) || '';
|
|||
|
|
currentText.value = formText.value;
|
|||
|
|
createMessage.success('语音合成完成');
|
|||
|
|
loadVoiceList();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
generating.value = false;
|
|||
|
|
localStorage.removeItem(TASK_ID_KEY);
|
|||
|
|
createMessage.error(res.message || '语音合成失败');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
pollTimer = setTimeout(poll, 3000);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
poll();
|
|||
|
|
//update-end---wangshuai---date:20260415 for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//update-begin---wangshuai---date:20260415 for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
|
|||
|
|
onMounted(() => {
|
|||
|
|
const savedTaskId = localStorage.getItem(TASK_ID_KEY);
|
|||
|
|
if (savedTaskId) {
|
|||
|
|
generating.value = true;
|
|||
|
|
currentAudioUrl.value = '';
|
|||
|
|
startPolling(savedTaskId);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (pollTimer) {
|
|||
|
|
clearTimeout(pollTimer);
|
|||
|
|
pollTimer = null;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//update-end---wangshuai---date:20260415 for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 从历史记录中播放
|
|||
|
|
*/
|
|||
|
|
function handlePlay(record: any) {
|
|||
|
|
currentAudioUrl.value = getFileAccessHttpUrl(record.voiceUrl) || '';
|
|||
|
|
currentText.value = record.content;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
(audioRef.value as any)?.play?.();
|
|||
|
|
}, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将历史记录的文案回填到文案输入框
|
|||
|
|
*/
|
|||
|
|
function handleUseText(record: any) {
|
|||
|
|
formText.value = record.content;
|
|||
|
|
createMessage.success('已将文案填入输入框');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 下载语音文件
|
|||
|
|
*/
|
|||
|
|
function handleDownload(record: any) {
|
|||
|
|
const url = getFileAccessHttpUrl(record.voiceUrl);
|
|||
|
|
if (!url) {
|
|||
|
|
createMessage.error('下载地址不存在');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = url;
|
|||
|
|
link.download = record.fileName || 'voice.wav';
|
|||
|
|
link.target = '_blank';
|
|||
|
|
document.body.appendChild(link);
|
|||
|
|
link.click();
|
|||
|
|
document.body.removeChild(link);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 删除历史记录
|
|||
|
|
*/
|
|||
|
|
async function handleDelete(id: string) {
|
|||
|
|
const userId = userStore.getUserInfo?.id;
|
|||
|
|
if (!userId) return;
|
|||
|
|
try {
|
|||
|
|
const res = await deleteVoiceRecord({ userId: userId, recordId: id });
|
|||
|
|
if (res.success) {
|
|||
|
|
createMessage.success('已删除');
|
|||
|
|
loadVoiceList();
|
|||
|
|
} else {
|
|||
|
|
createMessage.error(res.message || '删除失败');
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
createMessage.error('删除失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
@import './AiVoice.less';
|
|||
|
|
</style>
|