feat: 优化上传音频弹窗视觉 (UploadVoiceModal)

- FileUploadZone: 上传区增加 hover 动效、圆形图标底托、柔和渐变背景
- FileInfoCard: 文件图标增加圆形背景色块、微阴影和边框
- FormFields: 标签加粗加深、input/textarea 增加 focus 动效、性别按钮增加图标前缀
- ActionButtons: 替换为 Ant Design Button 组件，保持风格统一
- UploadProgress: 增加卡片式背景、圆角边框
- UploadVoiceModal: 标题加粗、间距优化

所有修改仅涉及视觉样式，不改变业务逻辑和接口调用

apps/web/src/pages/voices/components/UploadVoiceModal.tsx

@@ -28,7 +28,7 @@ const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
 
   return (
     <Modal
-      title="上传配音素材"
+      title={<span style={{ fontSize: 16, fontWeight: 600 }}>上传配音素材</span>}
       open={open}
       onCancel={() => {
         if (uploading) return // 上传中不可关闭
@@ -43,7 +43,7 @@ const UploadVoiceModal: React.FC<UploadVoiceModalProps> = ({
           display: "flex",
           flexDirection: "column",
           gap: 16,
-          padding: "8px 0",
+          padding: "12px 0 4px",
         }}
       >
         {/* 拖拽上传区 */}

apps/web/src/pages/voices/components/upload-voice-modal/ActionButtons.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Button } from "antd"
 
 interface ActionButtonsProps {
   uploading: boolean
@@ -13,12 +14,6 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   onCancel,
   onUpload,
 }) => {
-  const disabled = uploading || !canUpload
-
-  const handleUpload = () => {
-    onUpload()
-  }
-
   return (
     <div
       style={{
@@ -28,39 +23,32 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
         paddingTop: 4,
       }}
     >
-      <button
-        type="button"
+      <Button
         onClick={onCancel}
         disabled={uploading}
         style={{
-          padding: "8px 20px",
+          height: 36,
           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}
+      </Button>
+      <Button
+        type="primary"
+        onClick={onUpload}
+        disabled={!canUpload}
+        loading={uploading}
         style={{
-          padding: "8px 20px",
+          height: 36,
           borderRadius: 8,
-          border: "none",
-          background: disabled ? "var(--text-tertiary)" : "var(--primary-color)",
-          color: "#fff",
           fontSize: 13,
           fontWeight: 600,
-          cursor: disabled ? "not-allowed" : "pointer",
+          minWidth: 100,
         }}
       >
-        {uploading ? "上传中..." : "开始上传"}
-      </button>
+        {uploading ? "上传中" : "开始上传"}
+      </Button>
     </div>
   )
 }

apps/web/src/pages/voices/components/upload-voice-modal/FileInfoCard.tsx

@@ -10,28 +10,57 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({ file }) => {
   return (
     <div
       style={{
-        padding: "10px 12px",
+        padding: "10px 14px",
         background: "var(--bg-secondary)",
-        borderRadius: 8,
+        borderRadius: 10,
         display: "flex",
         alignItems: "center",
-        gap: 10,
+        gap: 12,
+        border: "1px solid var(--border-color)",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
       }}
     >
-      <SoundOutlined style={{ fontSize: 18, color: "var(--primary-color)" }} />
+      {/* 文件图标圆形底托 */}
+      <div
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: "50%",
+          background: "var(--primary-soft, rgba(22, 119, 255, 0.1))",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        <SoundOutlined
+          style={{ fontSize: 16, color: "var(--primary-color)" }}
+        />
+      </div>
+
+      {/* 文件信息 */}
       <div style={{ flex: 1, minWidth: 0 }}>
         <div
           style={{
             fontSize: 13,
             fontWeight: 500,
+            color: "var(--text-primary)",
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
+            lineHeight: 1.4,
           }}
         >
           {file.name}
         </div>
-        <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>
+        <div
+          style={{
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            marginTop: 2,
+            lineHeight: 1.3,
+          }}
+        >
           {formatFileSize(file.size)}
         </div>
       </div>

apps/web/src/pages/voices/components/upload-voice-modal/FileUploadZone.tsx

@@ -14,6 +14,8 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
   onFileSelect,
   onFileRemove,
 }) => {
+  const [isHovered, setIsHovered] = React.useState(false)
+
   return (
     <Upload.Dragger
       accept={UPLOAD_CONFIG.accept}
@@ -28,25 +30,73 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
       showUploadList={false}
       disabled={disabled}
     >
-      <p
+      <div
         style={{
-          fontSize: 32,
-          color: "var(--primary-color)",
-          marginBottom: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "20px 16px",
+          borderRadius: 12,
+          background: isHovered
+            ? "var(--primary-soft, rgba(22, 119, 255, 0.08))"
+            : "var(--primary-soft, rgba(22, 119, 255, 0.03))",
+          border: `2px dashed ${isHovered ? "var(--primary-color)" : "var(--border-color)"}`,
+          transition: "all 0.25s ease",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
         }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
-        <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>
+        {/* 图标圆形底托 */}
+        <div
+          style={{
+            width: 44,
+            height: 44,
+            borderRadius: "50%",
+            background: "var(--primary-soft, rgba(22, 119, 255, 0.1))",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: 10,
+            transition: "transform 0.2s ease",
+            transform: isHovered ? "scale(1.08)" : "scale(1)",
+          }}
+        >
+          <UploadOutlined
+            style={{
+              fontSize: 20,
+              color: "var(--primary-color)",
+            }}
+          />
+        </div>
+
+        {/* 主文案 */}
+        <p
+          style={{
+            fontSize: 14,
+            fontWeight: 500,
+            color: "var(--text-primary)",
+            margin: "0 0 6px",
+            lineHeight: 1.4,
+          }}
+        >
+          点击或拖拽音频文件到此处
+        </p>
+
+        {/* 副文案 */}
+        <p
+          style={{
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            margin: 0,
+            lineHeight: 1.4,
+          }}
+        >
+          支持 MP3、WAV、AAC、FLAC 等格式，最大 {UPLOAD_CONFIG.maxSizeMB}MB
+        </p>
+      </div>
     </Upload.Dragger>
   )
 }

apps/web/src/pages/voices/components/upload-voice-modal/FormFields.tsx

@@ -10,22 +10,32 @@ interface FormFieldsProps {
 }
 
 const labelStyle: React.CSSProperties = {
-  fontSize: 13,
-  color: "var(--text-secondary)",
+  fontSize: 12,
+  fontWeight: 600,
+  color: "var(--text-primary, #333)",
   marginBottom: 6,
+  letterSpacing: "0.02em",
 }
 
-const inputStyle: React.CSSProperties = {
+const baseInputStyle: React.CSSProperties = {
   width: "100%",
-  padding: "8px 12px",
+  padding: "10px 12px",
   border: "1px solid var(--border-color)",
   borderRadius: 8,
   fontSize: 13,
   background: "var(--bg-primary)",
   color: "var(--text-primary)",
   outline: "none",
+  transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+  lineHeight: 1.5,
 }
 
+const focusStyle: React.CSSProperties = {
+  borderColor: "var(--primary-color)",
+  boxShadow: "0 0 0 2px var(--primary-soft, rgba(22, 119, 255, 0.12))",
+}
+
+
 const FormFields: React.FC<FormFieldsProps> = ({
   name,
   desc,
@@ -44,7 +54,14 @@ const FormFields: React.FC<FormFieldsProps> = ({
           placeholder="输入配音名称"
           maxLength={UPLOAD_CONFIG.maxNameLength}
           disabled={disabled}
-          style={inputStyle}
+          style={baseInputStyle}
+          onFocus={(e) => {
+            Object.assign(e.target.style, focusStyle)
+          }}
+          onBlur={(e) => {
+            e.target.style.borderColor = "var(--border-color)"
+            e.target.style.boxShadow = "none"
+          }}
         />
       </div>
 
@@ -59,9 +76,17 @@ const FormFields: React.FC<FormFieldsProps> = ({
           rows={2}
           disabled={disabled}
           style={{
-            ...inputStyle,
+            ...baseInputStyle,
             resize: "vertical",
             fontFamily: "inherit",
+            minHeight: 56,
+          }}
+          onFocus={(e) => {
+            Object.assign(e.target.style, focusStyle)
+          }}
+          onBlur={(e) => {
+            e.target.style.borderColor = "var(--border-color)"
+            e.target.style.boxShadow = "none"
           }}
         />
       </div>

apps/web/src/pages/voices/components/upload-voice-modal/UploadProgress.tsx

@@ -6,25 +6,40 @@ interface UploadProgressProps {
 
 const UploadProgress: React.FC<UploadProgressProps> = ({ progress }) => {
   return (
-    <div style={{ textAlign: "center", padding: "8px 0" }}>
+    <div
+      style={{
+        padding: "12px 16px",
+        background: "var(--bg-secondary)",
+        borderRadius: 10,
+        textAlign: "center",
+        border: "1px solid var(--border-color)",
+      }}
+    >
       <div
         style={{
-          fontSize: 22,
+          fontSize: 20,
           fontWeight: 700,
           color: "var(--primary-color)",
+          lineHeight: 1.2,
         }}
       >
         {progress}%
       </div>
-      <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
+      <div
+        style={{
+          fontSize: 12,
+          color: "var(--text-secondary)",
+          marginTop: 2,
+          marginBottom: 10,
+        }}
+      >
         {progress < 100 ? "上传中..." : "处理中..."}
       </div>
       <div
         style={{
           height: 4,
-          background: "var(--bg-tertiary)",
+          background: "var(--bg-tertiary, #f0f0f0)",
           borderRadius: 2,
-          marginTop: 8,
           overflow: "hidden",
         }}
       >
@@ -32,7 +47,9 @@ const UploadProgress: React.FC<UploadProgressProps> = ({ progress }) => {
           style={{
             height: "100%",
             width: `${progress}%`,
-            background: "var(--primary-color)",
+            background: progress < 100
+              ? "var(--primary-color)"
+              : "var(--success-color, #52c41a)",
             borderRadius: 2,
             transition: "width 0.3s ease",
           }}