From 35dd478f1db9668628c5371b8ba20dd95c7c713a Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Mon, 27 Jul 2026 00:53:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor(voice):=20=E6=8B=86=E5=88=86=20Upl?= =?UTF-8?q?oadVoiceModal=EF=BC=8C=E6=8A=BD=E7=A6=BB=205=20=E4=B8=AA?= =?UTF-8?q?=E5=AD=90=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - UploadDragger: 拖拽上传区 - SelectedFileInfo: 已选文件信息 - UploadProgress: 上传进度条 - UploadFormFields: 表单区域(名称/性别/描述) - UploadActions: 底部操作按钮(取消/上传) - 主文件 329→112 行 (-66%),仅保留 Modal 壳与状态组装 --- .../voices/components/UploadVoiceModal.tsx | 315 +++--------------- .../upload-voice/SelectedFileInfo.tsx | 45 +++ .../components/upload-voice/UploadActions.tsx | 82 +++++ .../components/upload-voice/UploadDragger.tsx | 58 ++++ .../upload-voice/UploadFormFields.tsx | 114 +++++++ .../upload-voice/UploadProgress.tsx | 48 +++ 6 files changed, 396 insertions(+), 266 deletions(-) mode change 100755 => 100644 apps/web/src/pages/voices/components/UploadVoiceModal.tsx create mode 100644 apps/web/src/pages/voices/components/upload-voice/SelectedFileInfo.tsx create mode 100644 apps/web/src/pages/voices/components/upload-voice/UploadActions.tsx create mode 100644 apps/web/src/pages/voices/components/upload-voice/UploadDragger.tsx create mode 100644 apps/web/src/pages/voices/components/upload-voice/UploadFormFields.tsx create mode 100644 apps/web/src/pages/voices/components/upload-voice/UploadProgress.tsx diff --git a/apps/web/src/pages/voices/components/UploadVoiceModal.tsx b/apps/web/src/pages/voices/components/UploadVoiceModal.tsx old mode 100755 new mode 100644 index 75aaff541..31f6b81fb --- a/apps/web/src/pages/voices/components/UploadVoiceModal.tsx +++ b/apps/web/src/pages/voices/components/UploadVoiceModal.tsx @@ -1,8 +1,21 @@ +/** + * 上传音频弹窗 + * + * 子组件目录: upload-voice/ + * - UploadDragger: 拖拽上传区 + * - SelectedFileInfo: 已选文件信息 + * - UploadProgress: 上传进度条 + * - UploadFormFields: 表单区域(名称/性别/描述) + * - UploadActions: 底部操作按钮 + */ import React from "react" -import { UploadOutlined, SoundOutlined } from "@ant-design/icons" -import { Modal, Upload, message } from "antd" +import { Modal } from "antd" import { type VoiceGender } from "@/pages/voices/types" -import { formatFileSize } from "@/pages/voices/utils/format" +import UploadDragger from "./upload-voice/UploadDragger" +import SelectedFileInfo from "./upload-voice/SelectedFileInfo" +import UploadProgress from "./upload-voice/UploadProgress" +import UploadFormFields from "./upload-voice/UploadFormFields" +import UploadActions from "./upload-voice/UploadActions" export interface UploadVoiceModalProps { open: boolean @@ -20,7 +33,6 @@ export interface UploadVoiceModalProps { onUpload: () => void } -/** 上传音频弹窗 */ const UploadVoiceModal: React.FC = ({ open, uploadFile, @@ -36,17 +48,21 @@ const UploadVoiceModal: React.FC = ({ onDescChange, onUpload, }) => { + const isUploading = uploadProgress !== null + + const handleClose = () => { + if (isUploading) return // 上传中不可关闭 + onClose() + } + return ( { - if (uploadProgress !== null) return // 上传中不可关闭 - onClose() - }} + onCancel={handleClose} footer={null} width={520} - maskClosable={uploadProgress === null} + maskClosable={!isUploading} >
= ({ }} > {/* 拖拽上传区 */} - { - onFileSelect(file) - return false - }} - onRemove={() => { - onFileRemove() - }} - showUploadList={false} - disabled={uploadProgress !== null} - > -

- -

-

- 点击或拖拽音频文件到此处 -

-

- 支持 MP3、WAV、AAC、FLAC 等格式,最大 200MB -

-
+ {/* 已选文件信息 */} - {uploadFile && ( -
- -
-
- {uploadFile.name} -
-
- {formatFileSize(uploadFile.size)} -
-
-
- )} + {uploadFile && } {/* 上传进度 */} - {uploadProgress !== null && ( -
-
- {uploadProgress}% -
-
- {uploadProgress < 100 ? "上传中..." : "处理中..."} -
-
-
-
-
- )} + {isUploading && } - {/* 名称 */} -
-
- 素材名称 -
- onNameChange(e.target.value)} - placeholder="输入素材名称" - maxLength={100} - disabled={uploadProgress !== null} - style={{ - width: "100%", - padding: "8px 12px", - border: "1px solid var(--border-color)", - borderRadius: 8, - fontSize: 13, - background: "var(--bg-primary)", - color: "var(--text-primary)", - outline: "none", - }} - /> -
- - {/* 性别选择 */} -
-
- 音色性别 -
-
- {(["female", "male", "child"] as VoiceGender[]).map((g) => ( - - ))} -
-
- - {/* 描述 */} -
-
- 音色描述(可选) -
-