diff --git a/apps/web/src/pages/voices/components/UploadVoiceModal.tsx b/apps/web/src/pages/voices/components/UploadVoiceModal.tsx index 58a051e17..3ee873418 100755 --- a/apps/web/src/pages/voices/components/UploadVoiceModal.tsx +++ b/apps/web/src/pages/voices/components/UploadVoiceModal.tsx @@ -28,7 +28,7 @@ const UploadVoiceModal: React.FC = ({ return ( 上传配音素材} open={open} onCancel={() => { if (uploading) return // 上传中不可关闭 @@ -43,7 +43,7 @@ const UploadVoiceModal: React.FC = ({ display: "flex", flexDirection: "column", gap: 16, - padding: "8px 0", + padding: "12px 0 4px", }} > {/* 拖拽上传区 */} diff --git a/apps/web/src/pages/voices/components/upload-voice-modal/ActionButtons.tsx b/apps/web/src/pages/voices/components/upload-voice-modal/ActionButtons.tsx index 99020e4a0..141398f3a 100755 --- a/apps/web/src/pages/voices/components/upload-voice-modal/ActionButtons.tsx +++ b/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 = ({ onCancel, onUpload, }) => { - const disabled = uploading || !canUpload - - const handleUpload = () => { - onUpload() - } - return (
= ({ paddingTop: 4, }} > - - + {uploading ? "上传中" : "开始上传"} +
) } diff --git a/apps/web/src/pages/voices/components/upload-voice-modal/FileInfoCard.tsx b/apps/web/src/pages/voices/components/upload-voice-modal/FileInfoCard.tsx index a48123dda..b43d1635a 100755 --- a/apps/web/src/pages/voices/components/upload-voice-modal/FileInfoCard.tsx +++ b/apps/web/src/pages/voices/components/upload-voice-modal/FileInfoCard.tsx @@ -10,28 +10,57 @@ const FileInfoCard: React.FC = ({ file }) => { return (
- + {/* 文件图标圆形底托 */} +
+ +
+ + {/* 文件信息 */}
{file.name}
-
+
{formatFileSize(file.size)}
diff --git a/apps/web/src/pages/voices/components/upload-voice-modal/FileUploadZone.tsx b/apps/web/src/pages/voices/components/upload-voice-modal/FileUploadZone.tsx index 201be9b1b..70114eb16 100755 --- a/apps/web/src/pages/voices/components/upload-voice-modal/FileUploadZone.tsx +++ b/apps/web/src/pages/voices/components/upload-voice-modal/FileUploadZone.tsx @@ -14,6 +14,8 @@ const FileUploadZone: React.FC = ({ onFileSelect, onFileRemove, }) => { + const [isHovered, setIsHovered] = React.useState(false) + return ( = ({ showUploadList={false} disabled={disabled} > -

setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} > - -

-

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

-

- 支持 MP3、WAV、AAC、FLAC 等格式,最大 {UPLOAD_CONFIG.maxSizeMB}MB -

+ {/* 图标圆形底托 */} +
+ +
+ + {/* 主文案 */} +

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

+ + {/* 副文案 */} +

+ 支持 MP3、WAV、AAC、FLAC 等格式,最大 {UPLOAD_CONFIG.maxSizeMB}MB +

+
) } diff --git a/apps/web/src/pages/voices/components/upload-voice-modal/FormFields.tsx b/apps/web/src/pages/voices/components/upload-voice-modal/FormFields.tsx index 38c6c44de..42c56322e 100755 --- a/apps/web/src/pages/voices/components/upload-voice-modal/FormFields.tsx +++ b/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 = ({ name, desc, @@ -44,7 +54,14 @@ const FormFields: React.FC = ({ 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" + }} />
@@ -59,9 +76,17 @@ const FormFields: React.FC = ({ 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" }} /> diff --git a/apps/web/src/pages/voices/components/upload-voice-modal/UploadProgress.tsx b/apps/web/src/pages/voices/components/upload-voice-modal/UploadProgress.tsx index 9f47c3aaa..b6e56e153 100755 --- a/apps/web/src/pages/voices/components/upload-voice-modal/UploadProgress.tsx +++ b/apps/web/src/pages/voices/components/upload-voice-modal/UploadProgress.tsx @@ -6,25 +6,40 @@ interface UploadProgressProps { const UploadProgress: React.FC = ({ progress }) => { return ( -
+
{progress}%
-
+
{progress < 100 ? "上传中..." : "处理中..."}
@@ -32,7 +47,9 @@ const UploadProgress: React.FC = ({ 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", }}