feat: refine generation workspace experience

src/features/character-mix/CharacterMixPage.tsx

@@ -16,7 +16,7 @@ import {
   ThunderboltOutlined,
   VideoCameraOutlined,
 } 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 StudioToolLayout from "../../components/StudioToolLayout";
@@ -60,6 +60,7 @@ function CharacterMixPage({
   const [resultUrl, setResultUrl] = useState<string | null>(null);
   const abortRef = useRef(false);
   const taskIdRef = useRef<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
     return () => {
@@ -235,6 +236,32 @@ function CharacterMixPage({
     }
   };
 
+  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 (characterPreview) URL.revokeObjectURL(characterPreview);
+      setCharacterFile(file.name);
+      setCharacterPreview(URL.createObjectURL(file));
+      const reader = new FileReader();
+      reader.onload = () => { if (typeof reader.result === "string") setCharacterDataUrl(reader.result); };
+      reader.readAsDataURL(file);
+      setNotice(`已选择人物图 ${file.name}`);
+    } else if (file.type.startsWith("video/")) {
+      if (videoPreview) URL.revokeObjectURL(videoPreview);
+      setVideoFile(file.name);
+      setVideoPreview(URL.createObjectURL(file));
+      const reader2 = new FileReader();
+      reader2.onload = () => { if (typeof reader2.result === "string") setVideoDataUrl(reader2.result); };
+      reader2.readAsDataURL(file);
+      setNotice(`已选择参考视频 ${file.name}`);
+    }
+  };
+
   return (
     <section className="image-workbench-page character-mix-page" aria-label="角色迁移">
       <header className="image-workbench-topbar">
@@ -294,7 +321,17 @@ function CharacterMixPage({
       <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>
@@ -372,7 +409,7 @@ function CharacterMixPage({
                 </label>
               </div>
             </div>
-          </>
+          </div>
         }
         canvas={
           isCreating ? (