From aaee1ac0814b28eae4cc887827bef3f5d84fff73 Mon Sep 17 00:00:00 2001 From: DDMeaqua Date: Sat, 14 Sep 2024 14:49:04 +0800 Subject: [PATCH] chore: test css --- app/components/chat.module.scss | 27 ++++++++++++++ app/components/chat.tsx | 63 ++++++++++++++++++++++----------- app/icons/file-upload.svg | 15 ++++++++ app/locales/cn.ts | 2 ++ app/locales/en.ts | 2 ++ app/locales/tw.ts | 2 ++ 6 files changed, 90 insertions(+), 21 deletions(-) create mode 100644 app/icons/file-upload.svg diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index 7176399cc..cffaab6e2 100644 --- a/app/components/chat.module.scss +++ b/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; + } +} \ No newline at end of file diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 8edb28e6c..da6f1fa15 100644 --- a/app/components/chat.tsx +++ b/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) => { - event.preventDefault(); // 阻止默认行为 - const acceptedTypes = [ - "image/png", - "image/jpeg", - "image/webp", - "image/heic", - "image/heif", - ]; + const [showDragOverlay, setShowDragOverlay] = useState(false); - const files = event.dataTransfer.files; // 获取拖拽的文件 - if (files.length > 0) { + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + setShowDragOverlay(true); + }; + + const handleDragEnter = (e: React.DragEvent) => { + setShowDragOverlay(true); + }; + + const handleDragLeave = (e: React.DragEvent) => { + if (!e.currentTarget.contains(e.relatedTarget as Node)) { + setShowDragOverlay(false); + } + }; + + const handleDrop = async (e: React.DragEvent) => { + 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 ( -
+
+
+ + + +

{Locale.Chat.Actions.Addanything}

+ {Locale.Chat.Actions.AddanythingSub} +
{isMobileScreen && (
@@ -1752,8 +1775,6 @@ function _Chat() { fontSize: config.fontSize, fontFamily: config.fontFamily, }} - onDrop={handleDrop} - onDragOver={(e) => e.preventDefault()} /> {attachImages.length != 0 && (
diff --git a/app/icons/file-upload.svg b/app/icons/file-upload.svg new file mode 100644 index 000000000..0ee406796 --- /dev/null +++ b/app/icons/file-upload.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 33e368f69..314d082cf 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -43,6 +43,8 @@ const cn = { Delete: "删除", Edit: "编辑", FullScreen: "全屏", + Addanything: "添加任意内容", + AddanythingSub: "将任意文件拖拽到此处添加到对话中", }, Commands: { new: "新建聊天", diff --git a/app/locales/en.ts b/app/locales/en.ts index 403b9b687..60cebb9b7 100644 --- a/app/locales/en.ts +++ b/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", diff --git a/app/locales/tw.ts b/app/locales/tw.ts index 6b2c0fd65..5cb49dda7 100644 --- a/app/locales/tw.ts +++ b/app/locales/tw.ts @@ -43,6 +43,8 @@ const tw = { PinToastAction: "檢視", Delete: "刪除", Edit: "編輯", + Addanything: "添加任意內容", + AddanythingSub: "將任意文件拖曳到此處添加到對話中", }, Commands: { new: "新建聊天",