chore: retry CI

- FormFields.tsx: genderIcons 添加 elderly 字段，修复 TS2741 错误
- FileInfoCard.tsx / UploadProgress.tsx: 修复 prettier 格式问题

apps/web/package-lock.json

@@ -1845,27 +1845,6 @@
         "react": "^18 || ^19"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
@@ -1935,14 +1914,6 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2009,14 +1980,14 @@
       "version": "15.7.15",
       "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.31",
       "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.3.31.tgz",
       "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -3110,14 +3081,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4028,18 +3991,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immer": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
-      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4466,17 +4417,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -5008,44 +4948,6 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/pretty-format/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",

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,55 @@ 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,7 @@ 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",
           }}