feat: add drop upload img

app/components/chat.module.scss

@@ -646,3 +646,30 @@
     bottom: 30px;
   }
 }
+
+.drag-overlay {
+  display: none;
+}
+
+.drag-overlay-show {
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.01);
+  justify-content: center;
+  align-items: center;
+  color: var(--black);
+  font-size: 14px;
+  z-index: 9999;
+  backdrop-filter: blur(10px);
+
+  p {
+    font-size: 16px;
+    font-weight: 700;
+  }
+}

app/components/chat.tsx

@@ -42,6 +42,7 @@ import SizeIcon from "../icons/size.svg";
 import QualityIcon from "../icons/hd.svg";
 import StyleIcon from "../icons/palette.svg";
 import PluginIcon from "../icons/plugin.svg";
+import FileUploadIcon from "../icons/file-upload.svg";
 
 import {
   ChatMessage,
@@ -1373,8 +1374,67 @@ function _Chat() {
     setAttachImages(images);
   }
 
+  const [showDragOverlay, setShowDragOverlay] = useState(false);
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setShowDragOverlay(true);
+  };
+
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    setShowDragOverlay(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setShowDragOverlay(false);
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setShowDragOverlay(false);
+
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      const imagesData: string[] = [];
+      setUploading(true);
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        try {
+          const dataUrl = await uploadImageRemote(file); // 上传文件
+          imagesData.push(dataUrl);
+        } catch (error) {
+          console.error("上传文件失败", error);
+        }
+      }
+
+      setAttachImages(imagesData);
+      setUploading(false);
+    }
+  };
+
   return (
-    <div className={styles.chat} key={session.id}>
+    <div
+      className={styles.chat}
+      key={session.id}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div
+        id="drag-overlay"
+        className={
+          showDragOverlay ? styles["drag-overlay-show"] : styles["drag-overlay"]
+        }
+      >
+        <span>
+          <FileUploadIcon />
+        </span>
+        <p>{Locale.Chat.Actions.Addanything}</p>
+        <span>{Locale.Chat.Actions.AddanythingSub}</span>
+      </div>
       <div className="window-header" data-tauri-drag-region>
         {isMobileScreen && (
           <div className="window-actions">

app/locales/cn.ts

@@ -43,6 +43,8 @@ const cn = {
       Delete: "删除",
       Edit: "编辑",
       FullScreen: "全屏",
+      Addanything: "添加任意内容",
+      AddanythingSub: "将任意文件拖拽到此处添加到对话中",
     },
     Commands: {
       new: "新建聊天",

app/locales/en.ts

@@ -45,6 +45,8 @@ const en: LocaleType = {
       Delete: "Delete",
       Edit: "Edit",
       FullScreen: "FullScreen",
+      Addanything: "Add anything",
+      AddanythingSub: "Drop any file here to add it to the conversation",
     },
     Commands: {
       new: "Start a new chat",

app/locales/tw.ts

@@ -43,6 +43,8 @@ const tw = {
       PinToastAction: "檢視",
       Delete: "刪除",
       Edit: "編輯",
+      Addanything: "添加任意內容",
+      AddanythingSub: "將任意文件拖曳到此處添加到對話中",
     },
     Commands: {
       new: "新建聊天",