fix(assets): 拖拽高亮用enter/leave计数器，避免经过子元素时闪烁

AI Review 指出 onDragLeave 在鼠标经过按钮/文字等子元素时会误触发 setDragOver(false)，导致拖入过程中高亮不停闪烁。改为 dragenter/dragleave 配对计数，计数器归零（真正离开容器）才取消高亮。
2026-08-31 01:52:14 +08:00
parent eed93dd567
commit f968d274d0
1 changed files with 13 additions and 2 deletions
@@ -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)
      }}