feat:碎片完善

src/components/exhibit/ExhibitOverlay.tsx

@@ -28,8 +28,8 @@ export interface ExhibitOverlayProps {
   autoPlayDescription?: boolean;
   /** 点击展示 */
   onClick?: () => void;
-  /** 是否禁用拖拽，默认 false。当为 true 时，禁用拖拽和缩放功能，确保 onClick 事件能正常触发 */
-  disableDrag?: boolean;
+  /** 打开回调 */
+  onOpen?: () => void;
 }
 
 type Point = { x: number; y: number };
@@ -50,7 +50,7 @@ const ExhibitOverlay = ({
   description,
   autoPlayDescription = false,
   onClick,
-  disableDrag = false,
+  onOpen,
 }: ExhibitOverlayProps) => {
   const maskSrc = getStaticImage("components/蒙版遮罩");
   const backSrc = getStaticImage("components/关闭");
@@ -139,6 +139,12 @@ const ExhibitOverlay = ({
     applyTransformStyle();
   }, [applyTransformStyle]);
 
+  useEffect(() => {
+    if (visible) {
+      onOpen?.();
+    }
+  }, [visible, onOpen]);
+
   // 关闭或切换时重置
   useEffect(() => {
     if (visible) {
@@ -242,9 +248,6 @@ const ExhibitOverlay = ({
   // 指针按下：记录初始状态
   const handlePointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
-      // 如果禁用了拖拽，直接返回，不处理拖拽事件
-      if (disableDrag) return;
-
       if (!containerRef.current || !viewElRef.current) return;
       try {
         containerRef.current.setPointerCapture(e.pointerId);
@@ -280,7 +283,7 @@ const ExhibitOverlay = ({
         }
       }
     },
-    [getDistance, disableDrag]
+    [getDistance]
   );
 
   /**
@@ -514,18 +517,14 @@ const ExhibitOverlay = ({
                       maxHeight: containerSize,
                       width: "100%",
                       height: "100%",
-                      cursor: disableDrag
-                        ? "default"
-                        : isDragging
-                        ? "grabbing"
-                        : "grab",
+                      cursor: isDragging ? "grabbing" : "grab",
                     }}
-                    onPointerDown={disableDrag ? undefined : handlePointerDown}
-                    onPointerMove={disableDrag ? undefined : handlePointerMove}
-                    onPointerUp={disableDrag ? undefined : handlePointerUp}
-                    onPointerCancel={disableDrag ? undefined : handlePointerUp}
-                    onWheel={disableDrag ? undefined : handleWheel}
-                    onDoubleClick={disableDrag ? undefined : handleDoubleClick}
+                    onPointerDown={handlePointerDown}
+                    onPointerMove={handlePointerMove}
+                    onPointerUp={handlePointerUp}
+                    onPointerCancel={handlePointerUp}
+                    onWheel={handleWheel}
+                    onDoubleClick={handleDoubleClick}
                   >
                     <div
                       ref={viewElRef}