refactor(upload-voice-modal): 三阶段重构 UploadVoiceModal（329→87行, -74%）

Phase 1: 抽 types/constants - types.ts — UploadVoiceModalProps, GENDER_OPTIONS, UPLOAD_CONFIG Phase 2: 拆 5 个 UI 组件 - FileUploadZone — 拖拽上传区 - FileInfoCard — 已选文件信息卡 - UploadProgress — 上传进度条 - FormFields — 名称/性别/描述表单 - ActionButtons — 取消/上传操作按钮 Phase 3: 主组件瘦身 - 仅保留 Modal 框架 + 子组件组装 - 内联样式变量化，labelStyle/inputStyle 复用
2026-07-28 09:14:05 +08:00
parent 4578b65965
commit 5df49e6bae
8 changed files with 390 additions and 279 deletions
@@ -1,24 +1,13 @@
 import React from "react"
-import { UploadOutlined, SoundOutlined } from "@ant-design/icons"
-import { Modal, Upload, message } from "antd"
-import { type VoiceGender } from "@/pages/voices/types"
-import { formatFileSize } from "@/pages/voices/utils/format"
-
-export interface UploadVoiceModalProps {
-  open: boolean
-  uploadFile: File | null
-  uploadName: string
-  uploadGender: VoiceGender
-  uploadDesc: string
-  uploadProgress: number | null
-  onClose: () => void
-  onFileSelect: (file: File) => void
-  onFileRemove: () => void
-  onNameChange: (name: string) => void
-  onGenderChange: (gender: VoiceGender) => void
-  onDescChange: (desc: string) => void
-  onUpload: () => void
-}
+import { Modal } from "antd"
+import {
+  FileUploadZone,
+  FileInfoCard,
+  UploadProgress,
+  FormFields,
+  ActionButtons,
+} from "./upload-voice-modal"
+import type { UploadVoiceModalProps } from "./upload-voice-modal"

 /** 上传音频弹窗 */
 const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
@@ -36,17 +25,20 @@ const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
  onDescChange,
  onUpload,
 }) => {
+  const uploading = uploadProgress !== null
+  const canUpload = !!uploadFile && !!uploadName.trim()
+
  return (
    <Modal
      title="上传音频"
      open={open}
      onCancel={() => {
-        if (uploadProgress !== null) return // 上传中不可关闭
+        if (uploading) return // 上传中不可关闭
        onClose()
      }}
      footer={null}
      width={520}
-      maskClosable={uploadProgress === null}
+      maskClosable={!uploading}
    >
      <div
        style={{
@@ -57,270 +49,36 @@ const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
        }}
      >
        {/* 拖拽上传区 */}
-        <Upload.Dragger
-          accept="audio/*"
-          maxCount={1}
-          beforeUpload={(file) => {
-            onFileSelect(file)
-            return false
-          }}
-          onRemove={() => {
-            onFileRemove()
-          }}
-          showUploadList={false}
-          disabled={uploadProgress !== null}
-        >
-          <p
-            style={{
-              fontSize: 32,
-              color: "var(--primary-color)",
-              marginBottom: 8,
-            }}
-          >
-            <UploadOutlined />
-          </p>
-          <p style={{ fontSize: 14, fontWeight: 500, margin: "0 0 4px" }}>
-            点击或拖拽音频文件到此处
-          </p>
-          <p
-            style={{
-              fontSize: 12,
-              color: "var(--text-secondary)",
-              margin: 0,
-            }}
-          >
-            支持 MP3、WAV、AAC、FLAC 等格式，最大 200MB
-          </p>
-        </Upload.Dragger>
+        <FileUploadZone
+          disabled={uploading}
+          onFileSelect={onFileSelect}
+          onFileRemove={onFileRemove}
+        />

        {/* 已选文件信息 */}
-        {uploadFile && (
-          <div
-            style={{
-              padding: "10px 12px",
-              background: "var(--bg-secondary)",
-              borderRadius: 8,
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-            }}
-          >
-            <SoundOutlined style={{ fontSize: 18, color: "var(--primary-color)" }} />
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div
-                style={{
-                  fontSize: 13,
-                  fontWeight: 500,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                {uploadFile.name}
-              </div>
-              <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>
-                {formatFileSize(uploadFile.size)}
-              </div>
-            </div>
-          </div>
-        )}
+        {uploadFile && <FileInfoCard file={uploadFile} />}

        {/* 上传进度 */}
-        {uploadProgress !== null && (
-          <div style={{ textAlign: "center", padding: "8px 0" }}>
-            <div
-              style={{
-                fontSize: 22,
-                fontWeight: 700,
-                color: "var(--primary-color)",
-              }}
-            >
-              {uploadProgress}%
-            </div>
-            <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
-              {uploadProgress < 100 ? "上传中..." : "处理中..."}
-            </div>
-            <div
-              style={{
-                height: 4,
-                background: "var(--bg-tertiary)",
-                borderRadius: 2,
-                marginTop: 8,
-                overflow: "hidden",
-              }}
-            >
-              <div
-                style={{
-                  height: "100%",
-                  width: `${uploadProgress}%`,
-                  background: "var(--primary-color)",
-                  borderRadius: 2,
-                  transition: "width 0.3s ease",
-                }}
-              />
-            </div>
-          </div>
-        )}
+        {uploadProgress !== null && <UploadProgress progress={uploadProgress} />}

-        {/* 名称 */}
-        <div>
-          <div
-            style={{
-              fontSize: 13,
-              color: "var(--text-secondary)",
-              marginBottom: 6,
-            }}
-          >
-            素材名称
-          </div>
-          <input
-            value={uploadName}
-            onChange={(e) => 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",
-            }}
-          />
-        </div>
-
-        {/* 性别选择 */}
-        <div>
-          <div
-            style={{
-              fontSize: 13,
-              color: "var(--text-secondary)",
-              marginBottom: 6,
-            }}
-          >
-            音色性别
-          </div>
-          <div style={{ display: "flex", gap: 8 }}>
-            {(["female", "male", "child"] as VoiceGender[]).map((g) => (
-              <button
-                key={g}
-                type="button"
-                onClick={() => onGenderChange(g)}
-                disabled={uploadProgress !== null}
-                style={{
-                  flex: 1,
-                  padding: "6px 0",
-                  borderRadius: 8,
-                  border: `1px solid ${uploadGender === g ? "var(--primary-color)" : "var(--border-color)"}`,
-                  background: uploadGender === g ? "var(--primary-soft)" : "transparent",
-                  color: uploadGender === g ? "var(--primary-color)" : "var(--text-secondary)",
-                  fontSize: 13,
-                  fontWeight: uploadGender === g ? 600 : 400,
-                  cursor: uploadProgress !== null ? "not-allowed" : "pointer",
-                  transition: "all 0.2s",
-                }}
-              >
-                {g === "female" ? "女声" : g === "male" ? "男声" : "童声"}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* 描述 */}
-        <div>
-          <div
-            style={{
-              fontSize: 13,
-              color: "var(--text-secondary)",
-              marginBottom: 6,
-            }}
-          >
-            音色描述（可选）
-          </div>
-          <textarea
-            value={uploadDesc}
-            onChange={(e) => onDescChange(e.target.value)}
-            placeholder="描述这个音色的特点..."
-            maxLength={500}
-            rows={2}
-            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",
-              resize: "vertical",
-              fontFamily: "inherit",
-            }}
-          />
-        </div>
+        {/* 表单字段 */}
+        <FormFields
+          name={uploadName}
+          gender={uploadGender}
+          desc={uploadDesc}
+          disabled={uploading}
+          onNameChange={onNameChange}
+          onGenderChange={onGenderChange}
+          onDescChange={onDescChange}
+        />

        {/* 操作按钮 */}
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end",
-            gap: 10,
-            paddingTop: 4,
-          }}
-        >
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={uploadProgress !== null}
-            style={{
-              padding: "8px 20px",
-              borderRadius: 8,
-              border: "1px solid var(--border-color)",
-              background: "transparent",
-              fontSize: 13,
-              cursor: uploadProgress !== null ? "not-allowed" : "pointer",
-              color: "var(--text-secondary)",
-            }}
-          >
-            取消
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              if (!uploadFile) {
-                message.warning("请先选择音频文件")
-                return
-              }
-              if (!uploadName.trim()) {
-                message.warning("请输入素材名称")
-                return
-              }
-              onUpload()
-            }}
-            disabled={!uploadFile || !uploadName.trim() || uploadProgress !== null}
-            style={{
-              padding: "8px 20px",
-              borderRadius: 8,
-              border: "none",
-              background:
-                !uploadFile || !uploadName.trim() || uploadProgress !== null
-                  ? "var(--text-tertiary)"
-                  : "var(--primary-color)",
-              color: "#fff",
-              fontSize: 13,
-              fontWeight: 600,
-              cursor:
-                !uploadFile || !uploadName.trim() || uploadProgress !== null
-                  ? "not-allowed"
-                  : "pointer",
-            }}
-          >
-            {uploadProgress !== null ? "上传中..." : "开始上传"}
-          </button>
-        </div>
+        <ActionButtons
+          uploading={uploading}
+          canUpload={canUpload}
+          onCancel={onClose}
+          onUpload={onUpload}
+        />
      </div>
    </Modal>
  )
@@ -0,0 +1,68 @@
+import React from "react"
+
+interface ActionButtonsProps {
+  uploading: boolean
+  canUpload: boolean
+  onCancel: () => void
+  onUpload: () => void
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({
+  uploading,
+  canUpload,
+  onCancel,
+  onUpload,
+}) => {
+  const disabled = uploading || !canUpload
+
+  const handleUpload = () => {
+    onUpload()
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 10,
+        paddingTop: 4,
+      }}
+    >
+      <button
+        type="button"
+        onClick={onCancel}
+        disabled={uploading}
+        style={{
+          padding: "8px 20px",
+          borderRadius: 8,
+          border: "1px solid var(--border-color)",
+          background: "transparent",
+          fontSize: 13,
+          cursor: uploading ? "not-allowed" : "pointer",
+          color: "var(--text-secondary)",
+        }}
+      >
+        取消
+      </button>
+      <button
+        type="button"
+        onClick={handleUpload}
+        disabled={disabled}
+        style={{
+          padding: "8px 20px",
+          borderRadius: 8,
+          border: "none",
+          background: disabled ? "var(--text-tertiary)" : "var(--primary-color)",
+          color: "#fff",
+          fontSize: 13,
+          fontWeight: 600,
+          cursor: disabled ? "not-allowed" : "pointer",
+        }}
+      >
+        {uploading ? "上传中..." : "开始上传"}
+      </button>
+    </div>
+  )
+}
+
+export default ActionButtons
@@ -0,0 +1,42 @@
+import React from "react"
+import { SoundOutlined } from "@ant-design/icons"
+import { formatFileSize } from "@/pages/voices/utils/format"
+
+interface FileInfoCardProps {
+  file: File
+}
+
+const FileInfoCard: React.FC<FileInfoCardProps> = ({ file }) => {
+  return (
+    <div
+      style={{
+        padding: "10px 12px",
+        background: "var(--bg-secondary)",
+        borderRadius: 8,
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+      }}
+    >
+      <SoundOutlined style={{ fontSize: 18, color: "var(--primary-color)" }} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 13,
+            fontWeight: 500,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {file.name}
+        </div>
+        <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>
+          {formatFileSize(file.size)}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FileInfoCard
@@ -0,0 +1,56 @@
+import React from "react"
+import { UploadOutlined } from "@ant-design/icons"
+import { Upload } from "antd"
+import { UPLOAD_CONFIG } from "./types"
+
+interface FileUploadZoneProps {
+  disabled: boolean
+  onFileSelect: (file: File) => void
+  onFileRemove: () => void
+}
+
+const FileUploadZone: React.FC<FileUploadZoneProps> = ({
+  disabled,
+  onFileSelect,
+  onFileRemove,
+}) => {
+  return (
+    <Upload.Dragger
+      accept={UPLOAD_CONFIG.accept}
+      maxCount={1}
+      beforeUpload={(file) => {
+        onFileSelect(file)
+        return false
+      }}
+      onRemove={() => {
+        onFileRemove()
+      }}
+      showUploadList={false}
+      disabled={disabled}
+    >
+      <p
+        style={{
+          fontSize: 32,
+          color: "var(--primary-color)",
+          marginBottom: 8,
+        }}
+      >
+        <UploadOutlined />
+      </p>
+      <p style={{ fontSize: 14, fontWeight: 500, margin: "0 0 4px" }}>
+        点击或拖拽音频文件到此处
+      </p>
+      <p
+        style={{
+          fontSize: 12,
+          color: "var(--text-secondary)",
+          margin: 0,
+        }}
+      >
+        支持 MP3、WAV、AAC、FLAC 等格式，最大 {UPLOAD_CONFIG.maxSizeMB}MB
+      </p>
+    </Upload.Dragger>
+  )
+}
+
+export default FileUploadZone
@@ -0,0 +1,106 @@
+import React from "react"
+import type { VoiceGender } from "@/pages/voices/types"
+import { GENDER_OPTIONS, UPLOAD_CONFIG } from "./types"
+
+interface FormFieldsProps {
+  name: string
+  gender: VoiceGender
+  desc: string
+  disabled: boolean
+  onNameChange: (name: string) => void
+  onGenderChange: (gender: VoiceGender) => void
+  onDescChange: (desc: string) => void
+}
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 13,
+  color: "var(--text-secondary)",
+  marginBottom: 6,
+}
+
+const inputStyle: React.CSSProperties = {
+  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",
+}
+
+const FormFields: React.FC<FormFieldsProps> = ({
+  name,
+  gender,
+  desc,
+  disabled,
+  onNameChange,
+  onGenderChange,
+  onDescChange,
+}) => {
+  return (
+    <>
+      {/* 名称 */}
+      <div>
+        <div style={labelStyle}>素材名称</div>
+        <input
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+          placeholder="输入素材名称"
+          maxLength={UPLOAD_CONFIG.maxNameLength}
+          disabled={disabled}
+          style={inputStyle}
+        />
+      </div>
+
+      {/* 性别选择 */}
+      <div>
+        <div style={labelStyle}>音色性别</div>
+        <div style={{ display: "flex", gap: 8 }}>
+          {GENDER_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => onGenderChange(opt.value)}
+              disabled={disabled}
+              style={{
+                flex: 1,
+                padding: "6px 0",
+                borderRadius: 8,
+                border: `1px solid ${gender === opt.value ? "var(--primary-color)" : "var(--border-color)"}`,
+                background: gender === opt.value ? "var(--primary-soft)" : "transparent",
+                color: gender === opt.value ? "var(--primary-color)" : "var(--text-secondary)",
+                fontSize: 13,
+                fontWeight: gender === opt.value ? 600 : 400,
+                cursor: disabled ? "not-allowed" : "pointer",
+                transition: "all 0.2s",
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 描述 */}
+      <div>
+        <div style={labelStyle}>音色描述（可选）</div>
+        <textarea
+          value={desc}
+          onChange={(e) => onDescChange(e.target.value)}
+          placeholder="描述这个音色的特点..."
+          maxLength={UPLOAD_CONFIG.maxDescLength}
+          rows={2}
+          disabled={disabled}
+          style={{
+            ...inputStyle,
+            resize: "vertical",
+            fontFamily: "inherit",
+          }}
+        />
+      </div>
+    </>
+  )
+}
+
+export default FormFields
@@ -0,0 +1,45 @@
+import React from "react"
+
+interface UploadProgressProps {
+  progress: number
+}
+
+const UploadProgress: React.FC<UploadProgressProps> = ({ progress }) => {
+  return (
+    <div style={{ textAlign: "center", padding: "8px 0" }}>
+      <div
+        style={{
+          fontSize: 22,
+          fontWeight: 700,
+          color: "var(--primary-color)",
+        }}
+      >
+        {progress}%
+      </div>
+      <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
+        {progress < 100 ? "上传中..." : "处理中..."}
+      </div>
+      <div
+        style={{
+          height: 4,
+          background: "var(--bg-tertiary)",
+          borderRadius: 2,
+          marginTop: 8,
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            height: "100%",
+            width: `${progress}%`,
+            background: "var(--primary-color)",
+            borderRadius: 2,
+            transition: "width 0.3s ease",
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UploadProgress
@@ -0,0 +1,6 @@
+export { default as FileUploadZone } from "./FileUploadZone"
+export { default as FileInfoCard } from "./FileInfoCard"
+export { default as UploadProgress } from "./UploadProgress"
+export { default as FormFields } from "./FormFields"
+export { default as ActionButtons } from "./ActionButtons"
+export * from "./types"
@@ -0,0 +1,30 @@
+import type { VoiceGender } from "@/pages/voices/types"
+
+export interface UploadVoiceModalProps {
+  open: boolean
+  uploadFile: File | null
+  uploadName: string
+  uploadGender: VoiceGender
+  uploadDesc: string
+  uploadProgress: number | null
+  onClose: () => void
+  onFileSelect: (file: File) => void
+  onFileRemove: () => void
+  onNameChange: (name: string) => void
+  onGenderChange: (gender: VoiceGender) => void
+  onDescChange: (desc: string) => void
+  onUpload: () => void
+}
+
+export const GENDER_OPTIONS: { value: VoiceGender; label: string }[] = [
+  { value: "female", label: "女声" },
+  { value: "male", label: "男声" },
+  { value: "child", label: "童声" },
+]
+
+export const UPLOAD_CONFIG = {
+  maxSizeMB: 200,
+  maxNameLength: 100,
+  maxDescLength: 500,
+  accept: "audio/*",
+} as const