chore: test css

Author: DDMeaqua

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,30 +1374,34 @@ function _Chat() {
     setAttachImages(images);
   }
 
-  const handleDrop = async (event: React.DragEvent<HTMLTextAreaElement>) => {
-    event.preventDefault(); // 阻止默认行为
-    const acceptedTypes = [
-      "image/png",
-      "image/jpeg",
-      "image/webp",
-      "image/heic",
-      "image/heif",
-    ];
-
-    const files = event.dataTransfer.files; // 获取拖拽的文件
-    if (files.length > 0) {
+  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];
-
-        // 检查文件类型是否是图片
-        if (!acceptedTypes.includes(file.type)) {
-          console.warn("文件类型不被接受:", file.type);
-          continue; // 如果不是图片类型，跳过这个文件
-        }
-
         try {
           const dataUrl = await uploadImageRemote(file); // 上传文件
           imagesData.push(dataUrl);
@@ -1411,7 +1416,25 @@ function _Chat() {
   };
 
   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">
@@ -1752,8 +1775,6 @@ function _Chat() {
               fontSize: config.fontSize,
               fontFamily: config.fontFamily,
             }}
-            onDrop={handleDrop}
-            onDragOver={(e) => e.preventDefault()}
           />
           {attachImages.length != 0 && (
             <div className={styles["attach-images"]}>

app/icons/file-upload.svg

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

app/locales/cn.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/en.ts

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