diff --git a/src/renderer/src/hooks/useDrag.ts b/src/renderer/src/hooks/useDrag.ts
new file mode 100644
index 0000000000..b48382e550
--- /dev/null
+++ b/src/renderer/src/hooks/useDrag.ts
@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react'
+
+export const useDrag = <T extends HTMLElement>(onDrop: (e: React.DragEvent<T>) => Promise<void> | void) => {
+  const [isDragging, setIsDragging] = useState(false)
+
+  const handleDragOver = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDragEnter = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    // 确保是离开当前元素，而不是进入子元素
+    if (e.currentTarget.contains(e.relatedTarget as Node)) {
+      return
+    }
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent<T>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragging(false)
+      await onDrop(e)
+    },
+    [onDrop]
+  )
+
+  return { isDragging, handleDragOver, handleDragEnter, handleDragLeave, handleDrop }
+}