fix:解决拖拽问题

src/hooks/usePageScale.ts

@@ -0,0 +1,86 @@
+import { useEffect, useState, useMemo } from "react";
+
+/**
+ * 等比例缩放Hook
+ * 基于1920*1080设计稿进行等比例缩放
+ */
+export function usePageScale() {
+  // 设计稿尺寸
+  const DESIGN_WIDTH = 1920;
+  const DESIGN_HEIGHT = 1080;
+
+  // 当前窗口尺寸
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+
+  // 缩放比例
+  const scale = useMemo(() => {
+    const scaleX = windowWidth / DESIGN_WIDTH;
+    const scaleY = windowHeight / DESIGN_HEIGHT;
+
+    // 取较小的缩放比例，确保内容完全显示在视窗内
+    return Math.min(scaleX, scaleY);
+  }, [windowWidth, windowHeight]);
+
+  // 缩放后的实际尺寸
+  const scaledWidth = useMemo(() => DESIGN_WIDTH * scale, [scale]);
+  const scaledHeight = useMemo(() => DESIGN_HEIGHT * scale, [scale]);
+
+  // 居中偏移量
+  const offsetX = useMemo(
+    () => (windowWidth - scaledWidth) / 2,
+    [windowWidth, scaledWidth]
+  );
+  const offsetY = useMemo(
+    () => (windowHeight - scaledHeight) / 2,
+    [windowHeight, scaledHeight]
+  );
+
+  // 缩放样式对象
+  const scaleStyle = useMemo(
+    () => ({
+      transform: `scale(${scale})`,
+      transformOrigin: "top left",
+      width: `${DESIGN_WIDTH}px`,
+      height: `${DESIGN_HEIGHT}px`,
+      position: "absolute" as const,
+      left: `${offsetX}px`,
+      top: `${offsetY}px`,
+    }),
+    [scale, offsetX, offsetY]
+  );
+
+  // 更新窗口尺寸
+  const updateWindowSize = () => {
+    setWindowWidth(window.innerWidth);
+    setWindowHeight(window.innerHeight);
+  };
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    window.addEventListener("resize", updateWindowSize);
+    updateWindowSize();
+
+    return () => {
+      window.removeEventListener("resize", updateWindowSize);
+    };
+  }, []);
+
+  return {
+    // 响应式数据
+    windowWidth,
+    windowHeight,
+    scale,
+    scaledWidth,
+    scaledHeight,
+    offsetX,
+    offsetY,
+
+    // 样式对象
+    scaleStyle,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT,
+  };
+}