lq1405
efa8d3b2a2
2. 修复聚合推文 任务没有文件不能删掉 3. 修复聚合推文删除所有的批次任务之后，不能再添加的问题 4. 添加版本更新通知，版本更新内容提醒 5. 添加MJ代理MJ账号设置，可以删除本地的账号和同步云端的账号（主要是状态和禁用原因）
292 lines
7.5 KiB
Vue
292 lines
7.5 KiB
Vue
<template>
|
||
<div style="display: flex; min-width: 900px; overflow: auto">
|
||
<div class="text-input">
|
||
<n-input
|
||
v-model:value="text"
|
||
type="textarea"
|
||
placeholder="请输入配音的文本内容"
|
||
:autosize="{
|
||
minRows: 30,
|
||
maxRows: 30
|
||
}"
|
||
show-count
|
||
></n-input>
|
||
<div class="tts-options">
|
||
<n-button
|
||
:color="softwareStore.SoftColor.BROWN_YELLOW"
|
||
size="small"
|
||
@click="FormatWordString"
|
||
>
|
||
格式化文档
|
||
</n-button>
|
||
<n-popover trigger="hover">
|
||
<template #trigger>
|
||
<n-button quaternary circle color="#b6a014" @click="ModifySplitChar">
|
||
<template #icon>
|
||
<n-icon size="25"> <AddCircleOutline /> </n-icon>
|
||
</template>
|
||
</n-button>
|
||
</template>
|
||
<span>添加分割标识符</span>
|
||
</n-popover>
|
||
<n-button
|
||
style="margin-right: 10px"
|
||
:color="softwareStore.SoftColor.BROWN_YELLOW"
|
||
size="small"
|
||
@click="ClearText"
|
||
>
|
||
清空内容
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
<div class="audio-setting">
|
||
<div class="param-setting">
|
||
<n-form label-placement="left">
|
||
<n-form-item label="选择配音渠道">
|
||
<n-select
|
||
placeholder="请选择配音渠道"
|
||
v-model:value="settingStore.ttsSetting.selectModel"
|
||
:options="ttsOptions"
|
||
></n-select>
|
||
</n-form-item>
|
||
</n-form>
|
||
<EdgeTTS v-if="settingStore.ttsSetting.selectModel == 'edge-tts'" />
|
||
<AzureTTS
|
||
:azureTTS="settingStore.ttsSetting.azureTTS"
|
||
v-else-if="settingStore.ttsSetting.selectModel == 'azure-tts'"
|
||
/>
|
||
</div>
|
||
<div class="autio-button">
|
||
<n-button
|
||
:color="softwareStore.SoftColor.BROWN_YELLOW"
|
||
style="margin-right: 10px"
|
||
@click="SaveTTSConfig"
|
||
>
|
||
保存配置信息
|
||
</n-button>
|
||
<n-button
|
||
:color="softwareStore.SoftColor.BROWN_YELLOW"
|
||
@click="GenerateAudio"
|
||
style="margin-right: 10px"
|
||
>
|
||
开始合成
|
||
</n-button>
|
||
<n-button
|
||
style="margin-right: 10px"
|
||
:color="softwareStore.SoftColor.BROWN_YELLOW"
|
||
@click="ShowHistory"
|
||
>
|
||
查看配音历史
|
||
</n-button>
|
||
</div>
|
||
<div style="display: flex; align-items: center">
|
||
<audio ref="audio" :src="audioUrl" controls style="width: 100%"></audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, defineComponent, onUnmounted, toRaw, reactive, h } from 'vue'
|
||
import {
|
||
useMessage,
|
||
NInput,
|
||
NSelect,
|
||
NFormItem,
|
||
NForm,
|
||
NButton,
|
||
NPopover,
|
||
NIcon,
|
||
useDialog
|
||
} from 'naive-ui'
|
||
import EdgeTTS from './EdgeTTS.vue'
|
||
import AzureTTS from './AzureTTS.vue'
|
||
import { GetTTSSelect } from '../../../../define/tts/ttsDefine'
|
||
import { useSoftwareStore } from '../../../../stores/software'
|
||
import { AddCircleOutline } from '@vicons/ionicons5'
|
||
import InputDialogContent from '../Original/Components/InputDialogContent.vue'
|
||
import { useSettingStore } from '../../../../stores/setting'
|
||
import TTSHistory from './TTSHistory.vue'
|
||
import { FormatWord } from '../../../../define/Tools/write'
|
||
|
||
let message = useMessage()
|
||
let dialog = useDialog()
|
||
let softwareStore = useSoftwareStore()
|
||
let text = ref('你好，我是你的智能语音助手')
|
||
let ttsOptions = ref([
|
||
{
|
||
label: 'EdgeTTS（免费）',
|
||
value: 'edge-tts'
|
||
}
|
||
])
|
||
let splitRef = ref(null)
|
||
let settingStore = useSettingStore()
|
||
let writeSetting = ref({
|
||
split_char: '。，“”‘’！？【】《》（）…—：；.,\'\'""!?[]<>()...-:;',
|
||
merge_count: 3,
|
||
merge_char: '，',
|
||
end_char: '。'
|
||
})
|
||
let audioUrl = ref(null)
|
||
|
||
onMounted(async () => {
|
||
softwareStore.spin.spinning = true
|
||
softwareStore.spin.tip = '正在加载，请稍等...'
|
||
try {
|
||
// 加载服务端的TTS配置（目前的TTS配置是全局的）
|
||
let res = await window.tts.GetTTSCOnfig()
|
||
if (res.code == 0) {
|
||
message.error(res.message)
|
||
} else {
|
||
settingStore.ttsSetting = res.data
|
||
}
|
||
|
||
// 加载文字设置
|
||
let writeSettingRes = await window.write.GetWriteCOnfig()
|
||
if (writeSettingRes.code == 0) {
|
||
message.error(writeSettingRes.message)
|
||
} else {
|
||
writeSetting.value = writeSettingRes.data
|
||
}
|
||
} catch (error) {
|
||
message.error('加载失败，失败原因：' + error.toString())
|
||
} finally {
|
||
softwareStore.spin.spinning = false
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 修改分割符
|
||
*/
|
||
async function ModifySplitChar() {
|
||
// 判断当前数据是不是存在
|
||
// 处理数据。获取当前的所有的数据
|
||
let dialogWidth = 400
|
||
let dialogHeight = 150
|
||
dialog.create({
|
||
title: '添加分割符',
|
||
showIcon: false,
|
||
closeOnEsc: false,
|
||
content: () =>
|
||
h(InputDialogContent, {
|
||
ref: splitRef,
|
||
initData: writeSetting.value.split_char,
|
||
placeholder: '请输入分割符'
|
||
}),
|
||
style: `width : ${dialogWidth}px; min-height : ${dialogHeight}px`,
|
||
maskClosable: false,
|
||
onClose: async () => {
|
||
writeSetting.value.split_char = splitRef.value.data
|
||
// 保存数据
|
||
let saveRes = await window.write.SaveWriteConfig(toRaw(writeSetting.value))
|
||
if (saveRes.code == 0) {
|
||
message.error(saveRes.message)
|
||
return
|
||
}
|
||
message.success('分隔符保存成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 解析/格式化文档
|
||
*/
|
||
async function FormatWordString() {
|
||
try {
|
||
let wordSrr = FormatWord(text.value)
|
||
text.value = wordSrr.join('\n')
|
||
message.success('文本格式化成功')
|
||
} catch (error) {
|
||
message.error('文本格式化失败，失败原因：' + error.toString())
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 删除文本内容
|
||
*/
|
||
async function ClearText() {
|
||
text.value = ''
|
||
}
|
||
|
||
/**
|
||
* 保存TTS配置信息
|
||
*/
|
||
async function SaveTTSConfig() {
|
||
let saveRes = await window.tts.SaveTTSConfig(toRaw(settingStore.ttsSetting))
|
||
if (saveRes.code == 0) {
|
||
message.error(saveRes.message)
|
||
return
|
||
}
|
||
message.success('TTS配置保存成功')
|
||
}
|
||
|
||
/**
|
||
* 开始合成音频
|
||
*/
|
||
async function GenerateAudio() {
|
||
if (text.value == '') {
|
||
message.error('文本内容不能为空')
|
||
return
|
||
}
|
||
|
||
softwareStore.spin.spinning = true
|
||
softwareStore.spin.tip = '正在合成音频，请稍等...'
|
||
|
||
// 保存配置信息
|
||
let saveRes = await window.tts.SaveTTSConfig(toRaw(settingStore.ttsSetting))
|
||
if (saveRes.code == 0) {
|
||
softwareStore.spin.spinning = false
|
||
message.error(saveRes.message)
|
||
return
|
||
}
|
||
|
||
// 开始真正的合成音频
|
||
let generateRes = await window.tts.GenerateAudio(text.value)
|
||
if (generateRes.code == 0) {
|
||
softwareStore.spin.spinning = false
|
||
message.error(generateRes.message)
|
||
return
|
||
}
|
||
|
||
audioUrl.value = generateRes.mp3Path
|
||
softwareStore.spin.spinning = false
|
||
}
|
||
|
||
// 显示配音的历史记录
|
||
function ShowHistory() {
|
||
let dialogWidth = window.innerWidth * 0.8
|
||
let dialogHeight = window.innerHeight * 0.9
|
||
dialog.create({
|
||
title: '配音历史记录',
|
||
showIcon: false,
|
||
closeOnEsc: false,
|
||
content: () => h(TTSHistory, { height: dialogHeight }),
|
||
style: `width : ${dialogWidth}px; min-height : ${dialogHeight}px;matgin-right: 0px`,
|
||
maskClosable: false
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.autio-button {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
}
|
||
.text-input {
|
||
flex: 4;
|
||
height: 100%;
|
||
margin-right: 10px;
|
||
}
|
||
.audio-setting {
|
||
flex: 2;
|
||
margin: 0 20px;
|
||
}
|
||
.tts-options {
|
||
margin-top: 10px;
|
||
margin-right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|