From 581a146d2fb1da1b67923973c81f5fe1bd19c348 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Tue, 28 Jul 2026 14:07:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor(voice-materials):=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=20MaterialForm=20=E4=B8=BA=E5=AD=90=E7=BB=84=E4=BB=B6=EF=BC=88?=
 =?UTF-8?q?186=E2=86=92108=E8=A1=8C,=20-42%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MaterialForm.tsx               | 86 ++-----------------
 .../material-form/FileUploadField.tsx         | 73 ++++++++++++++++
 .../material-form/GenderSelector.tsx          | 32 +++++++
 3 files changed, 110 insertions(+), 81 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/voice-materials/components/MaterialForm.tsx
 create mode 100755 apps/web/src/pages/voice-materials/components/material-form/FileUploadField.tsx
 create mode 100755 apps/web/src/pages/voice-materials/components/material-form/GenderSelector.tsx

diff --git a/apps/web/src/pages/voice-materials/components/MaterialForm.tsx b/apps/web/src/pages/voice-materials/components/MaterialForm.tsx
old mode 100644
new mode 100755
index 17c088460..1d173f688
--- a/apps/web/src/pages/voice-materials/components/MaterialForm.tsx
+++ b/apps/web/src/pages/voice-materials/components/MaterialForm.tsx
@@ -1,11 +1,10 @@
-import React, { useState, useRef } from "react"
-import { UploadOutlined, SoundOutlined, CloseOutlined } from "@ant-design/icons"
+import React, { useState } from "react"
 import { Button, Input } from "@/components/ui"
 import { type TagItem } from "@/api/tags"
 import { type VoiceGender, type VoiceMaterial } from "../types"
-import { GENDER_OPTIONS } from "../constants"
-import { genderClass, formatFileSize } from "../utils/format"
 import TagSelector from "./TagSelector"
+import FileUploadField from "./material-form/FileUploadField"
+import GenderSelector from "./material-form/GenderSelector"
 
 export interface MaterialFormProps {
   initial?: VoiceMaterial
@@ -33,7 +32,6 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
   const [gender, setGender] = useState<VoiceGender>(initial?.gender ?? "female")
   const [selectedTagIds, setSelectedTagIds] = useState<string[]>(initial?.tagIds ?? [])
   const [file, setFile] = useState<File | undefined>(undefined)
-  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleSubmit = () => {
     if (!name.trim()) return
@@ -53,65 +51,10 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
 
   return (
     <div className="vmat-form">
-      {/* 音频文件上传（编辑模式不显示） */}
       {!initial && (
-        <div className="vmat-form-field">
-          <label className="vmat-form-label">音频文件 *</label>
-          <div
-            className="vmat-upload-zone"
-            onClick={() => fileInputRef.current?.click()}
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={(e) => {
-              e.preventDefault()
-              const f = e.dataTransfer.files[0]
-              if (f?.type.startsWith("audio/")) setFile(f)
-            }}
-          >
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="audio/*"
-              style={{ display: "none" }}
-              onChange={(e) => {
-                const f = e.target.files?.[0]
-                if (f) setFile(f)
-              }}
-            />
-            {file ? (
-              <div className="vmat-upload-selected">
-                <SoundOutlined className="vmat-upload-icon" />
-                <span className="vmat-upload-filename">{file.name}</span>
-                <span className="vmat-upload-filesize">{formatFileSize(file.size)}</span>
-                <button
-                  type="button"
-                  className="vmat-upload-clear"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setFile(undefined)
-                  }}
-                >
-                  <CloseOutlined />
-                </button>
-              </div>
-            ) : (
-              <div className="vmat-upload-placeholder">
-                <UploadOutlined className="vmat-upload-icon" />
-                <p>点击或拖拽音频文件到此处</p>
-                <span>支持 MP3、WAV、AAC、FLAC 等格式</span>
-              </div>
-            )}
-          </div>
-          {/* 上传进度条 */}
-          {uploadProgress !== null && uploadProgress !== undefined && (
-            <div className="vmat-upload-progress">
-              <div className="vmat-upload-progress-bar" style={{ width: `${uploadProgress}%` }} />
-              <span className="vmat-upload-progress-text">{uploadProgress}%</span>
-            </div>
-          )}
-        </div>
+        <FileUploadField file={file} onChange={setFile} uploadProgress={uploadProgress} />
       )}
 
-      {/* 名称 */}
       <div className="vmat-form-field">
         <label className="vmat-form-label">名称 *</label>
         <Input
@@ -122,7 +65,6 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
         />
       </div>
 
-      {/* 音色描述 */}
       <div className="vmat-form-field">
         <label className="vmat-form-label">音色描述</label>
         <Input.TextArea
@@ -134,25 +76,8 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
         />
       </div>
 
-      {/* 性别 */}
-      <div className="vmat-form-field">
-        <label className="vmat-form-label">性别</label>
-        <div className="vmat-gender-group">
-          {GENDER_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              type="button"
-              className={`vmat-gender-btn${gender === opt.value ? " active" : ""} ${genderClass(opt.value)}`}
-              onClick={() => setGender(opt.value)}
-            >
-              {opt.icon}
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
+      <GenderSelector value={gender} onChange={setGender} />
 
-      {/* 风格标签 */}
       <div className="vmat-form-field">
         <label className="vmat-form-label">风格标签</label>
         <TagSelector
@@ -164,7 +89,6 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
         />
       </div>
 
-      {/* 操作按钮 */}
       <div className="vmat-form-actions">
         <Button buttonType="ghost" buttonSize="md" onClick={onCancel}>
           取消
diff --git a/apps/web/src/pages/voice-materials/components/material-form/FileUploadField.tsx b/apps/web/src/pages/voice-materials/components/material-form/FileUploadField.tsx
new file mode 100755
index 000000000..f0bef3b2b
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/material-form/FileUploadField.tsx
@@ -0,0 +1,73 @@
+import React, { useRef } from "react"
+import { UploadOutlined, SoundOutlined, CloseOutlined } from "@ant-design/icons"
+import { formatFileSize } from "../../utils/format"
+
+interface FileUploadFieldProps {
+  file: File | undefined
+  onChange: (file: File | undefined) => void
+  uploadProgress?: number | null
+}
+
+const FileUploadField: React.FC<FileUploadFieldProps> = ({ file, onChange, uploadProgress }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    const f = e.dataTransfer.files[0]
+    if (f?.type.startsWith("audio/")) onChange(f)
+  }
+
+  return (
+    <div className="vmat-form-field">
+      <label className="vmat-form-label">音频文件 *</label>
+      <div
+        className="vmat-upload-zone"
+        onClick={() => fileInputRef.current?.click()}
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={handleDrop}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="audio/*"
+          style={{ display: "none" }}
+          onChange={(e) => {
+            const f = e.target.files?.[0]
+            if (f) onChange(f)
+          }}
+        />
+        {file ? (
+          <div className="vmat-upload-selected">
+            <SoundOutlined className="vmat-upload-icon" />
+            <span className="vmat-upload-filename">{file.name}</span>
+            <span className="vmat-upload-filesize">{formatFileSize(file.size)}</span>
+            <button
+              type="button"
+              className="vmat-upload-clear"
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange(undefined)
+              }}
+            >
+              <CloseOutlined />
+            </button>
+          </div>
+        ) : (
+          <div className="vmat-upload-placeholder">
+            <UploadOutlined className="vmat-upload-icon" />
+            <p>点击或拖拽音频文件到此处</p>
+            <span>支持 MP3、WAV、AAC、FLAC 等格式</span>
+          </div>
+        )}
+      </div>
+      {uploadProgress !== null && uploadProgress !== undefined && (
+        <div className="vmat-upload-progress">
+          <div className="vmat-upload-progress-bar" style={{ width: `${uploadProgress}%` }} />
+          <span className="vmat-upload-progress-text">{uploadProgress}%</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FileUploadField
diff --git a/apps/web/src/pages/voice-materials/components/material-form/GenderSelector.tsx b/apps/web/src/pages/voice-materials/components/material-form/GenderSelector.tsx
new file mode 100755
index 000000000..15c7c9453
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/material-form/GenderSelector.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import type { VoiceGender } from "../../types"
+import { GENDER_OPTIONS } from "../../constants"
+import { genderClass } from "../../utils/format"
+
+interface GenderSelectorProps {
+  value: VoiceGender
+  onChange: (value: VoiceGender) => void
+}
+
+const GenderSelector: React.FC<GenderSelectorProps> = ({ value, onChange }) => {
+  return (
+    <div className="vmat-form-field">
+      <label className="vmat-form-label">性别</label>
+      <div className="vmat-gender-group">
+        {GENDER_OPTIONS.map((opt) => (
+          <button
+            key={opt.value}
+            type="button"
+            className={`vmat-gender-btn${value === opt.value ? " active" : ""} ${genderClass(opt.value)}`}
+            onClick={() => onChange(opt.value)}
+          >
+            {opt.icon}
+            {opt.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default GenderSelector