From f968d274d0ab0401db09a219f97e81ac5a82b9a7 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Mon, 31 Aug 2026 01:52:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(assets):=20=E6=8B=96=E6=8B=BD=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E7=94=A8enter/leave=E8=AE=A1=E6=95=B0=E5=99=A8?=
 =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E7=BB=8F=E8=BF=87=E5=AD=90=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E6=97=B6=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI Review 指出 onDragLeave 在鼠标经过按钮/文字等子元素时会误触发
setDragOver(false)，导致拖入过程中高亮不停闪烁。
改为 dragenter/dragleave 配对计数，计数器归零（真正离开容器）才取消高亮。
---
 .../pages/assets/components/AssetUploadZone.tsx   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/assets/components/AssetUploadZone.tsx b/apps/web/src/pages/assets/components/AssetUploadZone.tsx
index 0b78e5f01..bb9abdac8 100644
--- a/apps/web/src/pages/assets/components/AssetUploadZone.tsx
+++ b/apps/web/src/pages/assets/components/AssetUploadZone.tsx
@@ -20,6 +20,9 @@ export const AssetUploadZone: React.FC<AssetUploadZoneProps> = ({
   onUpload,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null)
+  // dragenter/dragleave 在经过子元素时会成对触发，用计数器避免高亮闪烁；
+  // 计数器归零（拖拽真正离开容器）才取消高亮
+  const dragDepthRef = useRef(0)
   const [dragOver, setDragOver] = useState(false)
 
   const pickFiles = (list: FileList | null) => {
@@ -30,16 +33,24 @@ export const AssetUploadZone: React.FC<AssetUploadZoneProps> = ({
   return (
     <div
       className={`xx-asset-upload-entry${dragOver ? " xx-asset-upload-entry-dragover" : ""}`}
+      onDragEnter={(e) => {
+        e.preventDefault()
+        dragDepthRef.current += 1
+        setDragOver(true)
+      }}
       onDragOver={(e) => {
         e.preventDefault()
-        setDragOver(true)
       }}
       onDragLeave={(e) => {
         e.preventDefault()
-        setDragOver(false)
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
+        if (dragDepthRef.current === 0) {
+          setDragOver(false)
+        }
       }}
       onDrop={(e) => {
         e.preventDefault()
+        dragDepthRef.current = 0
         setDragOver(false)
         pickFiles(e.dataTransfer.files)
       }}