feat:提交实验室环境配置

src/hooks/useDragAndDrop.ts

@@ -18,6 +18,7 @@ export function useDragAndDrop<T = any>() {
     dragData: null,
     mousePosition: { x: 0, y: 0 },
   });
+  const isDraggingRef = useRef(false);
 
   // 开始拖拽
   const startDrag = useCallback((data: T, event?: React.MouseEvent) => {
@@ -26,12 +27,14 @@ export function useDragAndDrop<T = any>() {
       event.stopPropagation();
 
       // 立即获取鼠标初始位置
+      isDraggingRef.current = true;
       setState({
         isDragging: true,
         dragData: data,
         mousePosition: { x: event.clientX, y: event.clientY },
       });
     } else {
+      isDraggingRef.current = true;
       setState({
         isDragging: true,
         dragData: data,
@@ -42,6 +45,7 @@ export function useDragAndDrop<T = any>() {
 
   // 结束拖拽
   const endDrag = useCallback(() => {
+    isDraggingRef.current = false;
     setState({
       isDragging: false,
       dragData: null,
@@ -49,11 +53,10 @@ export function useDragAndDrop<T = any>() {
     });
   }, []);
 
-  // 监听鼠标移动
+  // 监听鼠标移动 - 使用独立的事件监听器
   useEffect(() => {
-    if (!state.isDragging) return;
-
     const handleMouseMove = (e: MouseEvent) => {
+      if (!isDraggingRef.current) return;
       setState((prev) => ({
         ...prev,
         mousePosition: { x: e.clientX, y: e.clientY },
@@ -65,6 +68,7 @@ export function useDragAndDrop<T = any>() {
       // 这里只是提供一个安全机制
     };
 
+    // 始终添加事件监听器，在handleMouseMove内部检查拖拽状态
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
 
@@ -72,7 +76,7 @@ export function useDragAndDrop<T = any>() {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [state.isDragging]);
+  }, []); // 空依赖数组，只在组件挂载/卸载时执行
 
   // 将屏幕坐标转换为缩放后的页面坐标
   const screenToScaledCoords = useCallback(
@@ -131,7 +135,8 @@ export function useDropZone() {
       mouseY >= rect.top &&
       mouseY <= rect.bottom;
 
-    setIsOver(over);
+    // 只有当状态真正改变时才更新
+    setIsOver((prev) => (prev !== over ? over : prev));
     return over;
   }, []);