0.8.2.0

app/tree/page.tsx

@@ -295,11 +295,17 @@ export default function TreePage() {
     scaleRef.current = scale
   }, [scale])
 
-  // 使用原生事件监听器处理触摸和滚轮事件（避免 passive 事件问题）
-  useEffect(() => {
-    const container = containerRef.current
+  // 滚轮和触摸事件处理函数 - 使用 useCallback 确保稳定引用
+  const bindWheelEvents = useCallback((container: HTMLDivElement | null) => {
     if (!container) return
 
+    // 清理之前的事件监听器
+    const cleanup = (container as any).__wheelCleanup
+    if (cleanup) {
+      cleanup()
+      delete (container as any).__wheelCleanup
+    }
+
     // 鼠标滚轮缩放
     const handleWheel = (e: WheelEvent) => {
       e.preventDefault()
@@ -359,13 +365,36 @@ export default function TreePage() {
     container.addEventListener('touchmove', handleTouchMove, { passive: false })
     container.addEventListener('touchend', handleTouchEnd, { passive: true })
 
-    return () => {
+    // 保存清理函数
+    ;(container as any).__wheelCleanup = () => {
       container.removeEventListener('wheel', handleWheel)
       container.removeEventListener('touchstart', handleTouchStart)
       container.removeEventListener('touchmove', handleTouchMove)
       container.removeEventListener('touchend', handleTouchEnd)
     }
-  }, [viewMode])
+  }, [])
+
+  // 使用 ref callback 在 DOM 挂载时绑定事件
+  const containerRefCallback = useCallback((node: HTMLDivElement | null) => {
+    // 更新 ref
+    (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+    
+    // 绑定事件
+    if (node && viewMode === 'traditional') {
+      bindWheelEvents(node)
+    }
+  }, [viewMode, bindWheelEvents])
+
+  // 清理事件监听器
+  useEffect(() => {
+    return () => {
+      const container = containerRef.current
+      if (container && (container as any).__wheelCleanup) {
+        (container as any).__wheelCleanup()
+        delete (container as any).__wheelCleanup
+      }
+    }
+  }, [])
 
   // 处理成员选择（关系查询模式）
   const handleMemberClick = (memberId: string) => {
@@ -780,7 +809,7 @@ export default function TreePage() {
 
           {/* Tree Canvas */}
           <div
-            ref={containerRef}
+            ref={containerRefCallback}
             className="w-full h-full overflow-hidden cursor-move relative touch-none bg-[url('https://www.transparenttextures.com/patterns/rice-paper.png')] bg-repeat select-none"
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}