feat: 多页面拖拽上传、滚动条精简、UI优化

- 剧本评测/分辨率提升/数字人/角色迁移/图片工作台/去水印/电商：新增外部拖拽文件上传
- 电商：爆款图复刻上传框支持拖拽+大滚动条，短视频/模特图/详情图滚动条精简回退
- 图片工作台：右侧输出面板移至左侧提示词上方，删除局部重绘遮罩/结果框
- 数字人：生成按钮改为「开始生成」
- 局部重绘：编辑遮罩→编辑页面
- 对话框生成器：新增对话/视频模式、模型/速度/深度选择按钮
- 视频时长默认改为5秒
- 工具箱页面空状态logo统一绿底亮色图标
- 多处CSS滚动条和布局优化

src/features/ecommerce/panels/EcommerceClonePanel.tsx

@@ -7,6 +7,7 @@ import {
   ReloadOutlined,
   SettingOutlined,
 } from "@ant-design/icons";
+import { createPortal } from "react-dom";
 import type { CSSProperties, ChangeEvent, DragEvent, MutableRefObject, RefObject } from "react";
 import { useRef, useState } from "react";
 
@@ -118,6 +119,10 @@ interface EcommerceClonePanelProps {
   setOpenCloneBasicSelect: (value: CloneBasicSelectKey | null) => void;
   setCloneReferenceMode: (value: CloneReferenceMode) => void;
   handleCloneReferenceUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  isCloneReferenceDragging: boolean;
+  handleCloneReferenceDragOver: (event: DragEvent<HTMLButtonElement>) => void;
+  handleCloneReferenceDragLeave: (event: DragEvent<HTMLButtonElement>) => void;
+  handleCloneReferenceDrop: (event: DragEvent<HTMLButtonElement>) => void;
   setCloneReplicateLevel: (value: CloneReplicateLevelKey) => void;
   startCloneSetCountHold: (key: CloneSetCountKey, delta: -1 | 1, disabled: boolean) => void;
   clearCloneSetCountHold: () => void;
@@ -186,6 +191,10 @@ export default function EcommerceClonePanel({
   setOpenCloneBasicSelect,
   setCloneReferenceMode,
   handleCloneReferenceUpload,
+  isCloneReferenceDragging,
+  handleCloneReferenceDragOver,
+  handleCloneReferenceDragLeave,
+  handleCloneReferenceDrop,
   setCloneReplicateLevel,
   startCloneSetCountHold,
   clearCloneSetCountHold,
@@ -210,6 +219,14 @@ export default function EcommerceClonePanel({
   const videoOutfitRefRef = useRef<HTMLInputElement>(null);
   const [videoOutfitVideoUrl, setVideoOutfitVideoUrl] = useState<string | null>(null);
   const [videoOutfitRefUrl, setVideoOutfitRefUrl] = useState<string | null>(null);
+  const [zoomImage, setZoomImage] = useState<{ src: string; x: number; y: number } | null>(null);
+
+  const handleFileMouseEnter = (src: string, event: React.MouseEvent<HTMLElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setZoomImage({ src, x: rect.left + rect.width / 2, y: rect.top });
+  };
+
+  const handleFileMouseLeave = () => setZoomImage(null);
 
   const handleVideoOutfitVideoChange = () => {
     const file = videoOutfitVideoRef.current?.files?.[0] || null;
@@ -383,23 +400,44 @@ export default function EcommerceClonePanel({
                 </button>
               </div>
               {cloneReferenceMode === "upload" ? (
-                <button type="button" className="clone-ai-replicate-upload" onClick={() => cloneReferenceInputRef.current?.click()}>
-                  <span>
-                    <CloudUploadOutlined />
-                    <span className="clone-ai-replicate-upload-text">添加图片</span>
-                  </span>
-                  <em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages} 张`}</em>
+                <button
+                  type="button"
+                  className={`clone-ai-replicate-upload${isCloneReferenceDragging ? " is-dragging" : ""}${cloneReferenceImages.length ? " has-files" : ""}`}
+                  onClick={() => cloneReferenceInputRef.current?.click()}
+                  onDragOver={handleCloneReferenceDragOver}
+                  onDragLeave={handleCloneReferenceDragLeave}
+                  onDrop={handleCloneReferenceDrop}
+                >
                   {cloneReferenceImages.length ? (
-                    <div className="clone-ai-replicate-preview" aria-hidden="true">
-                      {cloneReferenceImages.slice(0, 4).map((item) => (
-                        <figure key={item.id}>
-                          <img src={item.src} alt="" />
-                          <span className="uploaded-image-zoom">
+                    <>
+                      <div className="clone-ai-replicate-files">
+                        {cloneReferenceImages.map((item) => (
+                          <figure
+                            key={item.id}
+                            className="clone-ai-replicate-file"
+                            onMouseEnter={(e) => handleFileMouseEnter(item.src, e)}
+                            onMouseLeave={handleFileMouseLeave}
+                          >
                             <img src={item.src} alt="" />
-                          </span>
-                        </figure>
-                      ))}
-                      {cloneReferenceImages.length > 4 ? <b>+{cloneReferenceImages.length - 4}</b> : null}
+                          </figure>
+                        ))}
+                      </div>
+                      <span className="clone-ai-replicate-add-more">
+                        <CloudUploadOutlined />
+                        点击继续上传文件
+                      </span>
+                    </>
+                  ) : (
+                    <span>
+                      <CloudUploadOutlined />
+                      <span className="clone-ai-replicate-upload-text">拖拽或点击上传参考图</span>
+                    </span>
+                  )}
+                  <em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages} 张`}</em>
+                  {isCloneReferenceDragging ? (
+                    <div className="clone-ai-replicate-upload-overlay">
+                      <CloudUploadOutlined />
+                      <span>释放文件以上传</span>
                     </div>
                   ) : null}
                 </button>
@@ -754,6 +792,18 @@ export default function EcommerceClonePanel({
           </button>
         ) : null}
       </div>
+      {zoomImage
+        ? createPortal(
+            <div
+              className="clone-ai-zoom-portal"
+              style={{ left: zoomImage.x, top: zoomImage.y } as CSSProperties}
+              onMouseLeave={handleFileMouseLeave}
+            >
+              <img src={zoomImage.src} alt="" />
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   );
 }