xiaoxia
83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
/**
|
||
* CloneModal — 音色克隆弹窗（共享组件）
|
||
*
|
||
* 功能：
|
||
* - 步骤引导：上传/录制音频 → 填写信息 → 提交克隆
|
||
* - 两种输入方式：上传文件（wav/mp3/m4a，≤10MB）或浏览器原生录音（MediaRecorder）
|
||
* - 提交：先 uploadAsset 获取真实 URL，再 createVoiceClone
|
||
* - 进度展示：上传中 → 克隆中 → 完成（三阶段可视化）
|
||
* - 错误处理：上传失败、格式错误、大小超限、录音权限拒绝等提示
|
||
*
|
||
* V21 Design System — 零 antd 直接导入
|
||
*/
|
||
import React from "react"
|
||
import { Modal } from "@/components/ui"
|
||
import type { CloneModalProps } from "./types/cloneModal"
|
||
import useCloneModal from "./hooks/useCloneModal"
|
||
import InputView from "./clone-modal/InputView"
|
||
import ProgressView from "./clone-modal/ProgressView"
|
||
import "./clone-modal.css"
|
||
|
||
const CloneModal: React.FC<CloneModalProps> = ({ open, onClose, onSuccess }) => {
|
||
const {
|
||
phase,
|
||
voiceName,
|
||
voiceDescription,
|
||
selectedFile,
|
||
dragActive,
|
||
errorMessage,
|
||
isRecording,
|
||
recordTime,
|
||
recordedBlob,
|
||
canSubmit,
|
||
isProcessing,
|
||
setVoiceName,
|
||
setVoiceDescription,
|
||
setDragActive,
|
||
handleFileSelect,
|
||
handleRecordToggle,
|
||
handleClose,
|
||
handleSubmit,
|
||
} = useCloneModal({ open, onClose, onSuccess })
|
||
|
||
return (
|
||
<Modal
|
||
open={open}
|
||
onCancel={handleClose}
|
||
title="克隆我的音色"
|
||
width={560}
|
||
footer={null}
|
||
destroyOnClose
|
||
maskClosable={!isProcessing}
|
||
keyboard={!isProcessing}
|
||
>
|
||
{/* 输入阶段 */}
|
||
{phase === "input" && (
|
||
<InputView
|
||
voiceName={voiceName}
|
||
voiceDescription={voiceDescription}
|
||
selectedFile={selectedFile}
|
||
dragActive={dragActive}
|
||
isRecording={isRecording}
|
||
recordTime={recordTime}
|
||
recordedBlob={recordedBlob}
|
||
errorMessage={errorMessage}
|
||
canSubmit={canSubmit}
|
||
onVoiceNameChange={setVoiceName}
|
||
onVoiceDescChange={setVoiceDescription}
|
||
onDragActiveChange={setDragActive}
|
||
onFileSelect={handleFileSelect}
|
||
onRecordToggle={handleRecordToggle}
|
||
onClose={handleClose}
|
||
onSubmit={handleSubmit}
|
||
/>
|
||
)}
|
||
|
||
{/* 进度 / 完成阶段 */}
|
||
{phase !== "input" && <ProgressView phase={phase} />}
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
export default CloneModal
|