sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化

Browse Source
This commit is contained in:
sion123
2026-04-05 17:27:31 +08:00
parent 464c98b4d0
commit f391a8c0d0
9 changed files with 473 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

437
frontend/app/web-gold/src/views/dh/VoiceCopy.vue
View File

@@ -1,18 +1,12 @@
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ref, reactive, onMounted } from 'vue'
import { toast } from 'vue-sonner'
import { Icon } from '@iconify/vue'
import dayjs from 'dayjs'
import { MaterialService } from '@/api/material'
import { VoiceService } from '@/api/voice'
import { useUpload } from '@/composables/useUpload'
import useVoiceText from '@/hooks/web/useVoiceText'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { Spinner } from '@/components/ui/spinner'
import {
Table,
@@ -22,13 +16,6 @@ import {
TableHeader,
TableRow,
} from '@/components/ui/table'
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import {
AlertDialog,
AlertDialogAction,
@@ -40,39 +27,18 @@ import {
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Progress } from '@/components/ui/progress'
import TaskPageLayout from '@/views/system/task-management/components/TaskPageLayout.vue'
// ========== 常量 ==========
const MAX_FILE_SIZE = 5 * 1024 * 1024
const VALID_AUDIO_TYPES = ['audio/mpeg', 'audio/wav', 'audio/aac', 'audio/mp4', 'audio/flac', 'audio/ogg']
const VALID_AUDIO_EXTENSIONS = ['.mp3', '.wav', '.aac', '.m4a', '.flac', '.ogg']
const DEFAULT_FORM_DATA = {
id: null,
name: '',
fileId: null,
autoTranscribe: true,
language: 'zh-CN',
gender: 'female',
note: '',
text: '',
fileUrl: ''
}
import VoiceCopyDialog from './VoiceCopyDialog.vue'
// ========== 响应式数据 ==========
const loading = ref(false)
const submitting = ref(false)
const voiceList = ref([])
const modalVisible = ref(false)
const deleteDialogVisible = ref(false)
const deleteTarget = ref(null)
const formMode = ref('create')
const dialogVisible = ref(false)
const dialogMode = ref('create')
const dialogRecord = ref(null)
const audioPlayer = ref(null)
const fileList = ref([])
const extractingText = ref(false)
const fileInputRef = ref(null)
const isDragging = ref(false)
const searchParams = reactive({
name: '',
@@ -87,22 +53,6 @@ const pagination = reactive({
showSizeChanger: true,
})
const formData = reactive({ ...DEFAULT_FORM_DATA })
// ========== Hooks ==========
const { state: uploadState, upload } = useUpload()
const { getVoiceText } = useVoiceText()
// ========== 计算属性 ==========
const isCreateMode = computed(() => formMode.value === 'create')
const isSubmitDisabled = computed(() => {
if (!isCreateMode.value) return false
if (extractingText.value) return true
if (formData.fileId && !formData.text) return true
return false
})
// ========== 工具函数 ==========
const formatDateTime = (value) => {
if (!value) return '-'
@@ -151,35 +101,15 @@ function handlePageChange(page) {
// ========== CRUD 操作 ==========
function handleCreate() {
formMode.value = 'create'
resetForm()
modalVisible.value = true
dialogMode.value = 'create'
dialogRecord.value = null
dialogVisible.value = true
}
async function handleEdit(record) {
formMode.value = 'edit'
try {
const res = await VoiceService.get(record.id)
if (res.code === 0 && res.data) {
Object.assign(formData, {
id: res.data.id || null,
name: res.data.name || '',
fileId: res.data.fileId || null,
language: res.data.language || 'zh-CN',
gender: res.data.gender || 'female',
note: res.data.note || ''
})
}
} catch (error) {
console.error('获取配音详情失败:', error)
Object.assign(formData, {
id: record.id,
name: record.name || '',
fileId: record.fileId || null,
note: record.note || ''
})
}
modalVisible.value = true
function handleEdit(record) {
dialogMode.value = 'edit'
dialogRecord.value = record
dialogVisible.value = true
}
function handleDelete(record) {
@@ -216,154 +146,6 @@ function handlePlayAudio(record) {
}
}
// ========== 文件上传 ==========
function triggerFileInput() {
fileInputRef.value?.click()
}
function handleFileSelect(event) {
const file = event.target.files?.[0]
if (file) processFile(file)
}
function handleDragOver(e) {
e.preventDefault()
isDragging.value = true
}
function handleDragLeave() {
isDragging.value = false
}
function handleDrop(event) {
event.preventDefault()
isDragging.value = false
const file = event.dataTransfer?.files?.[0]
if (file) processFile(file)
}
function validateFile(file) {
if (file.size > MAX_FILE_SIZE) {
toast.error('文件大小不能超过 5MB')
return false
}
const fileName = file.name.toLowerCase()
const isValid = VALID_AUDIO_TYPES.some(t => file.type.includes(t)) ||
VALID_AUDIO_EXTENSIONS.some(ext => fileName.endsWith(ext))
if (!isValid) {
toast.error('请上传音频文件（MP3、WAV、AAC 等）')
return false
}
return true
}
async function processFile(file) {
if (!validateFile(file)) return
try {
await upload(file, {
fileCategory: 'voice',
groupId: null,
onSuccess: async (id, fileUrl) => {
formData.fileId = id
formData.fileUrl = fileUrl
fileList.value = [file]
await fetchAudioTextById(id)
},
onError: (error) => {
toast.error(error.message || '上传失败')
}
})
} catch (error) {
console.error('上传失败:', error)
}
}
async function fetchAudioTextById(fileId) {
if (!fileId) return
extractingText.value = true
try {
const res = await MaterialService.getAudioPlayUrl(fileId)
if (res.code === 0 && res.data) {
const results = await getVoiceText([{ audio_url: res.data }])
if (results?.length > 0) {
formData.text = results[0].value || ''
}
}
} catch (error) {
console.error('获取音频文本失败:', error)
toast.error('语音识别失败')
} finally {
extractingText.value = false
}
}
function handleRemoveFile() {
formData.fileId = null
formData.text = ''
formData.fileUrl = ''
fileList.value = []
}
// ========== 表单操作 ==========
async function handleSubmit() {
if (!formData.name.trim()) {
toast.warning('请输入配音名称')
return
}
if (isCreateMode.value && !formData.fileId) {
toast.warning('请上传音频文件')
return
}
submitting.value = true
const params = isCreateMode.value
? {
name: formData.name,
fileId: formData.fileId,
autoTranscribe: formData.autoTranscribe,
language: formData.language,
gender: formData.gender,
note: formData.note,
text: formData.text
}
: {
id: formData.id,
name: formData.name,
language: formData.language,
gender: formData.gender,
note: formData.note
}
try {
const res = isCreateMode.value
? await VoiceService.create(params)
: await VoiceService.update(params)
if (res.code !== 0) {
toast.error(res.msg || '操作失败')
return
}
toast.success(isCreateMode.value ? '创建成功' : '更新成功')
modalVisible.value = false
loadVoiceList()
} catch (error) {
console.error('提交失败:', error)
toast.error('操作失败，请稍后重试')
} finally {
submitting.value = false
}
}
function handleCancel() {
modalVisible.value = false
resetForm()
}
function resetForm() {
Object.assign(formData, { ...DEFAULT_FORM_DATA })
fileList.value = []
}
// ========== 生命周期 ==========
onMounted(() => loadVoiceList())
</script>
@@ -467,102 +249,12 @@ onMounted(() => loadVoiceList())
<!-- 弹窗 -->
<template #modals>
<!-- 新建/编辑弹窗 -->
<Dialog :open="modalVisible" @update:open="(v) => modalVisible = v">
<DialogContent class="sm:max-w-lg">
<DialogHeader>
<DialogTitle>{{ isCreateMode ? '新建配音' : '编辑配音' }}</DialogTitle>
</DialogHeader>
<div class="space-y-5 py-2">
<!-- 名称 -->
<div class="space-y-2">
<Label for="name">配音名称 <span class="text-destructive">*</span></Label>
<Input id="name" v-model="formData.name" placeholder="请输入配音名称" />
</div>
<!-- 上传区域 -->
<div v-if="isCreateMode" class="space-y-2">
<Label>音频文件 <span class="text-destructive">*</span></Label>
<!-- 未上传状态 -->
<div
v-if="fileList.length === 0 && !uploadState.uploading && !extractingText"
class="upload-zone"
:class="{ 'upload-zone--dragging': isDragging }"
@click="triggerFileInput"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@drop="handleDrop"
>
<div class="upload-zone__icon">
<Icon icon="lucide:cloud-upload" />
</div>
<p class="upload-zone__title">点击或拖拽音频文件到此区域</p>
<p class="upload-zone__hint">支持 MP3、WAV、AAC、M4A、FLAC、OGG，最大 5MB</p>
</div>
<!-- 上传中 -->
<div v-else-if="uploadState.uploading" class="upload-status">
<Progress :value="50" class="w-16" />
<p class="mt-3 text-sm text-muted-foreground">正在上传...</p>
</div>
<!-- 识别中 -->
<div v-else-if="extractingText" class="upload-status">
<Progress :value="50" class="w-16" />
<p class="mt-3 text-sm text-muted-foreground">正在识别语音...</p>
</div>
<!-- 已上传 -->
<div v-else class="upload-preview">
<div class="upload-preview__icon">
<Icon icon="lucide:file-audio" />
</div>
<div class="upload-preview__info">
<span class="upload-preview__name">{{ fileList[0]?.name || '音频文件' }}</span>
<Badge v-if="formData.text" variant="secondary" class="gap-1">
<Icon icon="lucide:check-circle" class="size-3" />
已识别语音
</Badge>
<Badge v-else variant="outline" class="gap-1 text-amber-600">
<Icon icon="lucide:alert-circle" class="size-3" />
未识别到语音
</Badge>
</div>
<Button variant="ghost" size="sm" class="text-destructive" @click="handleRemoveFile">
<Icon icon="lucide:x" class="size-4" />
</Button>
</div>
<input
ref="fileInputRef"
type="file"
accept="audio/*,.mp3,.wav,.aac,.m4a,.flac,.ogg"
class="hidden"
@change="handleFileSelect"
/>
</div>
<!-- 备注 -->
<div class="space-y-2">
<Label for="note">备注</Label>
<Textarea
id="note"
v-model="formData.note"
placeholder="备注信息（选填）"
:rows="2"
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" @click="handleCancel">取消</Button>
<Button :disabled="isSubmitDisabled" :loading="submitting" @click="handleSubmit">
保存
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<VoiceCopyDialog
v-model:open="dialogVisible"
:mode="dialogMode"
:record="dialogRecord"
@success="loadVoiceList"
/>
<!-- 删除确认 -->
<AlertDialog :open="deleteDialogVisible" @update:open="(v) => deleteDialogVisible = v">
@@ -588,98 +280,5 @@ onMounted(() => loadVoiceList())
</TaskPageLayout>
</div>
<audio ref="audioPlayer" class="hidden" />
</template>
<style scoped lang="less">
// 上传区域
.upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
background: var(--muted);
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: var(--primary);
background: oklch(0.97 0.01 254.604);
}
&--dragging {
border-color: var(--primary);
background: oklch(0.95 0.02 254.604);
}
&__icon {
font-size: 36px;
color: var(--primary);
margin-bottom: var(--space-3);
opacity: 0.8;
}
&__title {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--foreground);
margin-bottom: var(--space-1);
}
&__hint {
font-size: var(--font-size-xs);
color: var(--muted-foreground);
}
}
.upload-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
background: var(--muted);
}
.upload-preview {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid oklch(0.92 0.02 145);
border-radius: var(--radius-lg);
background: oklch(0.98 0.01 145);
&__icon {
font-size: 28px;
color: var(--primary);
}
&__info {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
&__name {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--foreground);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.hidden {
display: none;
}
</style>