From 7f39d28a339f39e14c459a71fe768b59164e1ef8 Mon Sep 17 00:00:00 2001
From: ice <jlau.ice@gmail.com>
Date: Mon, 26 Jan 2026 16:15:03 +0800
Subject: [PATCH] fix(frontend): hide upload mask when drag leaves window

Use dragCounter to track drag enter/leave events properly.
The mask now hides when user drags file out of the browser window.

- Add dragleave event listener
- Use counter to handle nested element drag events
- Reset counter on drop and unmount

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/views/platform/index.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/platform/index.vue b/frontend/src/views/platform/index.vue
index 654b5c83e..ab2e9ad72 100644
--- a/frontend/src/views/platform/index.vue
+++ b/frontend/src/views/platform/index.vue
@@ -27,6 +27,9 @@ let ismask = ref(false)
 let uploadInput = ref();
 const { t } = useI18n();
 
+// 用于跟踪拖拽进入/离开的计数器，解决子元素触发 dragleave 的问题
+let dragCounter = 0;
+
 // 获取当前知识库ID
 const getCurrentKbId = (): string | null => {
     return (route.params as any)?.kbId as string || null
@@ -60,6 +63,7 @@ const checkKnowledgeBaseInitialization = async (): Promise<boolean> => {
 // 全局拖拽事件处理
 const handleGlobalDragEnter = (event: DragEvent) => {
     event.preventDefault();
+    dragCounter++;
     if (event.dataTransfer) {
         event.dataTransfer.effectAllowed = 'all';
     }
@@ -71,11 +75,19 @@ const handleGlobalDragOver = (event: DragEvent) => {
     if (event.dataTransfer) {
         event.dataTransfer.dropEffect = 'copy';
     }
-    ismask.value = true;
+}
+
+const handleGlobalDragLeave = (event: DragEvent) => {
+    event.preventDefault();
+    dragCounter--;
+    if (dragCounter === 0) {
+        ismask.value = false;
+    }
 }
 
 const handleGlobalDrop = async (event: DragEvent) => {
     event.preventDefault();
+    dragCounter = 0;
     ismask.value = false;
     
     const DataTransferFiles = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
@@ -104,6 +116,7 @@ const handleGlobalDrop = async (event: DragEvent) => {
 onMounted(() => {
     document.addEventListener('dragenter', handleGlobalDragEnter, true);
     document.addEventListener('dragover', handleGlobalDragOver, true);
+    document.addEventListener('dragleave', handleGlobalDragLeave, true);
     document.addEventListener('drop', handleGlobalDrop, true);
 });
 
@@ -111,7 +124,9 @@ onMounted(() => {
 onUnmounted(() => {
     document.removeEventListener('dragenter', handleGlobalDragEnter, true);
     document.removeEventListener('dragover', handleGlobalDragOver, true);
+    document.removeEventListener('dragleave', handleGlobalDragLeave, true);
     document.removeEventListener('drop', handleGlobalDrop, true);
+    dragCounter = 0;
 });
 </script>
 <style lang="less">