feat: refine generation workspace experience

src/features/digital-human/DigitalHumanPage.tsx

@@ -17,7 +17,7 @@ import {
   ThunderboltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
 import "../../styles/pages/more-tools.css";
 import "../../styles/pages/image-workbench.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -97,6 +97,7 @@ function DigitalHumanPage({
   const activeTaskIdRef = useRef(activeTaskId);
   activeTaskIdRef.current = activeTaskId;
   const keepaliveRestoredRef = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
     return () => {
@@ -148,6 +149,28 @@ function DigitalHumanPage({
     setNotice("已取消");
   }, [activeTaskId]);
 
+  const handleDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer?.types?.includes("Files")) setIsDragging(true); };
+  const handleDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (!file) return;
+    if (file.type.startsWith("image/")) {
+      if (imagePreview) URL.revokeObjectURL(imagePreview);
+      setImageName(file.name);
+      setImageFile(file);
+      setImagePreview(URL.createObjectURL(file));
+      setNotice(`已拖放参考图 ${file.name}`);
+    } else if (file.type.startsWith("audio/")) {
+      if (audioPreview) URL.revokeObjectURL(audioPreview);
+      setAudioName(file.name);
+      setAudioFile(file);
+      setAudioPreview(URL.createObjectURL(file));
+      setNotice(`已拖放音频 ${file.name}`);
+    }
+  };
+
   const handleDownloadResult = async () => {
     if (!resultVideoUrl || isDownloadingResult) return;
     setIsDownloadingResult(true);
@@ -419,7 +442,17 @@ function DigitalHumanPage({
       <StudioToolLayout
         noTop
         leftPanel={
-          <>
+          <div
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            style={{ position: "relative" }}
+          >
+            {isDragging ? (
+              <div style={{ position: "absolute", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.55)", border: "2px dashed var(--primary, #4a9eff)", borderRadius: 12, pointerEvents: "none" }}>
+                <span style={{ fontSize: 18, color: "#fff", fontWeight: 600 }}>释放文件以上传</span>
+              </div>
+            ) : null}
             <div className="studio-panel__section">
               <div className="studio-panel__section-head">
                 <span className="studio-panel__section-title">参考人像</span>
@@ -492,7 +525,7 @@ function DigitalHumanPage({
                 {audioPreview ? <audio src={audioPreview} controls className="studio-audio-preview" /> : null}
               </div>
             </div>
-          </>
+          </div>
         }
         canvas={
           resultVideoUrl ? (
@@ -560,7 +593,7 @@ function DigitalHumanPage({
               </div>
               <button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !imageFile || !audioFile}>
                 <PlayCircleOutlined />
-                {isCreating ? "生成中..." : "提交 wan2.2-s2v"}
+                {isCreating ? "生成中..." : "开始生成"}
               </button>
               {isCreating && (
                 <button type="button" className="studio-generate-btn digital-human-cancel-btn" onClick={handleCancel} aria-label="取消生成任务">