sionrui/frontend/app/web-gold/src/views/dh/VoiceCopy.vue

<template>
  <div class="voice-copy-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">配音管理</h1>
      <a-button type="primary" @click="handleCreate">
        <template #icon>
          <PlusOutlined />
        </template>
        <span>新建配音</span>
      </a-button>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <a-space>
        <a-input
          v-model:value="searchParams.name"
          placeholder="搜索配音名称"
          style="width: 250px"
          allow-clear
          @press-enter="handleSearch"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
        <a-button type="primary" @click="handleSearch">查询</a-button>
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </div>

    <!-- 列表表格 -->
    <div class="table-container">
      <a-table
        :columns="columns"
        :data-source="voiceList"
        :loading="loading"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <div class="voice-name">{{ record.name || '未命名' }}</div>
          </template>
          <template v-else-if="column.key === 'transcription'">
            <div class="transcription-text">{{ formatTranscription(record.transcription) }}</div>
          </template>
          <template v-else-if="column.key === 'createTime'">
            <span>{{ formatDateTime(record.createTime) }}</span>
          </template>
          <template v-else-if="column.key === 'fileUrl'">
            <a-button type="link" size="small" @click="handlePlayAudio(record)">
              <template #icon>
                <PlayCircleOutlined />
              </template>
              播放
            </a-button>
          </template>
          <template v-else-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
              <a-button
                type="link"
                size="small"
                :loading="transcribingId === record.id"
                :disabled="!!record.transcription"
                @click="handleTranscribe(record)"
              >
                {{ record.transcription ? '已识别' : '识别' }}
              </a-button>
              <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 新建/编辑表单 Modal -->
    <a-modal
      v-model:open="modalVisible"
      :title="isCreateMode ? '新建配音' : '编辑配音'"
      :width="600"
      :confirm-loading="submitting"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical"
      >
        <a-form-item label="配音名称" name="name">
          <a-input v-model:value="formData.name" placeholder="请输入配音名称" />
        </a-form-item>

        <a-form-item
          v-if="isCreateMode"
          label="音频文件"
          name="fileId"
          :rules="[{ required: true, message: '请上传音频文件' }]"
        >
          <a-upload
            v-model:file-list="fileList"
            :custom-request="handleCustomUpload"
            :before-upload="handleBeforeUpload"
            :show-upload-list="true"
            :max-count="1"
            accept="audio/*,.mp3,.wav,.aac,.m4a,.flac,.ogg"
            @remove="handleRemoveFile"
            @change="handleFileListChange"
          >
            <a-button type="primary" :loading="uploading">
              <template #icon>
                <UploadOutlined v-if="!uploading" />
              </template>
              {{ uploading ? '上传中...' : (fileList.length > 0 ? '重新上传' : '上传音频文件') }}
            </a-button>
          </a-upload>
          <div class="upload-hint">支持格式：MP3、WAV、AAC、M4A、FLAC、OGG，单个文件不超过 100MB</div>
        </a-form-item>

        <a-form-item label="备注" name="note">
          <a-textarea
            v-model:value="formData.note"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </a-form-item>

        <a-form-item
          v-if="!isCreateMode"
          label="识别内容"
          name="transcription"
        >
          <a-textarea
            v-model:value="formData.transcription"
            :rows="4"
            placeholder="识别内容，支持手动修改"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 音频播放器 -->
    <audio ref="audioPlayer" style="display: none" controls />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { message, Modal } from 'ant-design-vue'
import {
  PlusOutlined,
  SearchOutlined,
  UploadOutlined,
  PlayCircleOutlined
} from '@ant-design/icons-vue'
import { VoiceService } from '@/api/voice'
import { MaterialService } from '@/api/material'
import dayjs from 'dayjs'

// ========== 常量定义 ==========
const POLLING_CONFIG = {
  interval: 10000, // 轮询间隔：10秒
  maxCount: 30, // 最大轮询次数：30次（5分钟）
  transcriptionMaxLength: 50 // 识别内容最大显示长度
}

const DEFAULT_FORM_DATA = {
  id: null,
  name: '',
  fileId: null,
  autoTranscribe: true,
  language: 'zh-CN',
  gender: 'female',
  note: '',
  transcription: ''
}

// ========== 响应式数据 ==========
const loading = ref(false)
const submitting = ref(false)
const uploading = ref(false)
const voiceList = ref([])
const transcribingId = ref(null)
const modalVisible = ref(false)
const formMode = ref('create')
const formRef = ref(null)
const audioPlayer = ref(null)
const fileList = ref([])
let pollingTimer = null

const searchParams = reactive({
  name: '',
  pageNo: 1,
  pageSize: 10
})

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`
})

const formData = reactive({ ...DEFAULT_FORM_DATA })

// ========== 计算属性 ==========
const isCreateMode = computed(() => formMode.value === 'create')

// ========== 表格配置 ==========
const columns = [
  { title: '配音名称', key: 'name', dataIndex: 'name', width: 200 },
  { title: '识别内容', key: 'transcription', dataIndex: 'transcription', width: 300 },
  { title: '创建时间', key: 'createTime', dataIndex: 'createTime', width: 180 },
  { title: '操作', key: 'actions', width: 200, fixed: 'right' }
]

// ========== 表单验证规则 ==========
const formRules = {
  name: [{ required: true, message: '请输入配音名称' }],
  fileId: [{ required: true, message: '请上传音频文件' }]
}

// ========== 工具函数 ==========
const formatTranscription = (transcription) => {
  if (!transcription) return '未识别'
  if (transcription.length <= POLLING_CONFIG.transcriptionMaxLength) return transcription
  return transcription.substring(0, POLLING_CONFIG.transcriptionMaxLength) + '...'
}

const formatDateTime = (value) => {
  if (!value) return '-'
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}

const fillFormData = (data) => {
  Object.assign(formData, {
    id: data.id || null,
    name: data.name || '',
    fileId: data.fileId || null,
    language: data.language || 'zh-CN',
    gender: data.gender || 'female',
    note: data.note || '',
    transcription: data.transcription || ''
  })
}

// ========== 数据加载 ==========
const loadVoiceList = async () => {
  loading.value = true
  try {
    const params = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      name: searchParams.name || undefined
    }
    const res = await VoiceService.getPage(params)
    if (res.code === 0) {
      voiceList.value = res.data.list || []
      pagination.total = res.data.total || 0
    } else {
      message.error(res.msg || '加载失败')
    }
  } catch (error) {
    console.error('加载配音列表失败:', error)
    message.error('加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// ========== 搜索和分页 ==========
const handleSearch = () => {
  pagination.current = 1
  loadVoiceList()
}

const handleReset = () => {
  searchParams.name = ''
  pagination.current = 1
  loadVoiceList()
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  loadVoiceList()
}

// ========== CRUD 操作 ==========
const handleCreate = () => {
  formMode.value = 'create'
  resetForm()
  modalVisible.value = true
}

const handleEdit = async (record) => {
  formMode.value = 'edit'
  try {
    const res = await VoiceService.get(record.id)
    if (res.code === 0 && res.data) {
      fillFormData(res.data)
    } else {
      fillFormData(record) // 获取失败时使用列表数据
    }
  } catch (error) {
    console.error('获取配音详情失败:', error)
    fillFormData(record) // 异常时使用列表数据
  }
  modalVisible.value = true
}

const handleDelete = (record) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除配音「${record.name}」吗？此操作不可恢复。`,
    okText: '删除',
    okButtonProps: { danger: true },
    cancelText: '取消',
    onOk: async () => {
      try {
        const res = await VoiceService.delete(record.id)
        if (res.code === 0) {
          message.success('删除成功')
          loadVoiceList()
        } else {
          message.error(res.msg || '删除失败')
        }
      } catch (error) {
        console.error('删除失败:', error)
        message.error('删除失败，请稍后重试')
      }
    }
  })
}

// ========== 语音识别 ==========
const handleTranscribe = async (record) => {
  transcribingId.value = record.id
  try {
    const res = await VoiceService.transcribe(record.id)
    if (res.code === 0) {
      message.success('识别任务已提交，正在识别中...')
      startPollingTranscription(record.id)
    } else {
      message.error(res.msg || '识别失败')
      transcribingId.value = null
    }
  } catch (error) {
    console.error('识别失败:', error)
    message.error('识别失败，请稍后重试')
    transcribingId.value = null
  }
}

const stopPolling = () => {
  if (pollingTimer) {
    clearInterval(pollingTimer)
    pollingTimer = null
  }
  transcribingId.value = null
}

const startPollingTranscription = (voiceId) => {
  stopPolling()
  
  let pollCount = 0
  pollingTimer = setInterval(async () => {
    pollCount++
    
    try {
      const res = await VoiceService.get(voiceId)
      if (res.code === 0 && res.data?.transcription) {
        stopPolling()
        message.success('识别完成')
        loadVoiceList()
        return
      }
      
      if (pollCount >= POLLING_CONFIG.maxCount) {
        stopPolling()
        message.warning('识别超时，请稍后手动刷新查看结果')
        loadVoiceList()
      }
    } catch (error) {
      console.error('轮询识别结果失败:', error)
      if (pollCount >= POLLING_CONFIG.maxCount) {
        stopPolling()
      }
    }
  }, POLLING_CONFIG.interval)
}

// ========== 音频播放 ==========
const handlePlayAudio = (record) => {
  if (record.fileUrl && audioPlayer.value) {
    audioPlayer.value.src = record.fileUrl
    audioPlayer.value.play()
  } else {
    message.warning('音频文件不存在')
  }
}

// ========== 文件上传 ==========
const handleBeforeUpload = (file) => {
  // 检查文件大小（100MB）
  const MAX_FILE_SIZE = 100 * 1024 * 1024
  if (file.size > MAX_FILE_SIZE) {
    message.error('文件大小不能超过 100MB')
    return false
  }

  // 检查文件类型
  const validTypes = ['audio/mpeg', 'audio/wav', 'audio/wave', 'audio/x-wav', 'audio/aac', 'audio/mp4', 'audio/flac', 'audio/ogg']
  const validExtensions = ['.mp3', '.wav', '.aac', '.m4a', '.flac', '.ogg']
  const fileName = file.name.toLowerCase()
  const fileType = file.type.toLowerCase()
  
  const isValidType = validTypes.some(type => fileType.includes(type)) || 
                      validExtensions.some(ext => fileName.endsWith(ext))
  
  if (!isValidType) {
    message.error('请上传音频文件（MP3、WAV、AAC、M4A、FLAC、OGG）')
    return false
  }

  return true // 允许添加到文件列表
}

const handleCustomUpload = async (options) => {
  const { file, onSuccess, onError } = options
  
  uploading.value = true
  
  try {
    const res = await MaterialService.uploadFile(file, 'voice', null)
    
    if (res.code === 0) {
      formData.fileId = res.data
      message.success('文件上传成功')
      
      // 使用 nextTick 确保 DOM 更新完成后再调用回调
      await nextTick()
      
      // 安全调用 onSuccess
      if (onSuccess && typeof onSuccess === 'function') {
        try {
          onSuccess(res, file)
        } catch (err) {
          console.warn('onSuccess 回调执行失败:', err)
        }
      }
    } else {
      const errorMsg = res.msg || '上传失败'
      message.error(errorMsg)
      
      // 安全调用 onError
      if (onError && typeof onError === 'function') {
        try {
          onError(new Error(errorMsg))
        } catch (err) {
          console.warn('onError 回调执行失败:', err)
        }
      }
    }
  } catch (error) {
    console.error('上传失败:', error)
    const errorMsg = error?.message || '上传失败，请稍后重试'
    message.error(errorMsg)
    
    // 安全调用 onError
    if (onError && typeof onError === 'function') {
      try {
        onError(error)
      } catch (err) {
        console.warn('onError 回调执行失败:', err)
      }
    }
  } finally {
    uploading.value = false
  }
}

const handleFileListChange = (info) => {
  // 处理文件列表变化，避免直接修改导致 DOM 错误
  const { fileList: newFileList } = info
  
  // 只更新文件列表，不直接修改文件项的状态
  // 让组件自己管理状态
  if (newFileList) {
    fileList.value = newFileList.filter(item => item.status !== 'removed')
  }
}

const handleRemoveFile = () => {
  formData.fileId = null
  fileList.value = []
}

// ========== 表单操作 ==========
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    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
        }
      : {
          id: formData.id,
          name: formData.name,
          language: formData.language,
          gender: formData.gender,
          note: formData.note,
          transcription: formData.transcription
        }

    const res = isCreateMode.value
      ? await VoiceService.create(params)
      : await VoiceService.update(params)

    if (res.code === 0) {
      message.success(isCreateMode.value ? '创建成功' : '更新成功')
      modalVisible.value = false
      
      // 如果开启了自动识别，开始轮询识别结果
      if (isCreateMode.value && formData.autoTranscribe && res.data) {
        const voiceId = res.data
        message.info('自动识别已启动，正在识别中...')
        startPollingTranscription(voiceId)
      }
      
      loadVoiceList()
    } else {
      message.error(res.msg || '操作失败')
    }
  } catch (error) {
    if (error?.errorFields) {
      // 表单验证失败，不显示错误
      return
    }
    console.error('提交失败:', error)
    message.error('操作失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

const handleCancel = () => {
  modalVisible.value = false
  resetForm()
}

const resetForm = () => {
  Object.assign(formData, { ...DEFAULT_FORM_DATA })
  fileList.value = []
  formRef.value?.resetFields()
}

// ========== 生命周期 ==========
onMounted(() => {
  loadVoiceList()
})

onUnmounted(() => {
  stopPolling()
})
</script>

<style scoped>
.voice-copy-page {
  padding: 24px;
  background: var(--color-bg);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header .ant-btn {
  display: inline-flex;
  align-items: center;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.search-bar {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

.table-container {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 16px;
}

.voice-name {
  font-weight: 500;
  color: var(--color-text);
}

.transcription-text {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.uploaded-file-info {
  margin-top: 8px;
}

.upload-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}

.form-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
</style>