wip

2025-03-20 14:53:02 +00:00
parent 111b6fbadd
commit 9cd93e60df
10 changed files with 227 additions and 95 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,36 +1,72 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import DraggablePanel from "@/components/DraggablePanel";
 import Logo from "@/components/Logo";
 import Preview from "@/components/Draggable/Preview";
 import Draggable from "@/components/Draggable/Draggable";
-import { useComponentsStore } from "@/hooks/useComponentsStore";
+import PreviewStore from "@/stores/previewStore";
+import { useObserver } from "mobx-react-lite";
+import ComponentsStore from "@/stores/componentStore";

 export default function Home() {
  const [isChangeSize, setIsSizeChangeSize] = useState(false);
  const [isDraggable, setIsDraggable] = useState(false);
-  const [units, setUnit] = useComponentsStore([
-    {
-      id: "1",
-      x: 0,
-      y: 0,
-      width: 320,
-      height: 160,
-      component: ()=> <Logo />
-    },
-    {
-      id: "2",
-      x: 336,
-      y: 0,
-      width: 160,
-      height: 320,
-      component: ()=> <Logo />
-    },
-  ]);
+  const { components } = ComponentsStore;
+  useEffect(() => {
+    ComponentsStore.initComponent([
+      {
+        id: "1",
+        x: 0,
+        y: 0,
+        width: 320,
+        height: 160,
+        component: () => <Logo />
+      },
+      {
+        id: "2",
+        x: 336,
+        y: 0,
+        width: 160,
+        height: 320,
+        component: () => <Logo />
+      },
+      {
+        id: "3",
+        x: 336,
+        y: 0,
+        width: 160,
+        height: 320,
+        component: () => <Logo />
+      },
+      {
+        id: "4",
+        x: 336,
+        y: 0,
+        width: 160,
+        height: 320,
+        component: () => <Logo />
+      },
+      {
+        id: "5",
+        x: 336,
+        y: 0,
+        width: 160,
+        height: 320,
+        component: () => <Logo />
+      },
+      {
+        id: "6",
+        x: 336,
+        y: 0,
+        width: 160,
+        height: 320,
+        component: () => <Logo />
+      },
+    ]);
+  }, [])

-  return (
+  return useObserver(() => (
    <div className="h-screen w-screen p-4">
-      <Preview x={400} y={234} width={234} height={234} />
      <label className="swap">
        <input
          type="checkbox"
@@ -48,7 +84,7 @@ export default function Home() {
        <div className="swap-off">锁定</div>
      </label>
      <DraggablePanel draggable={isDraggable}>
-        {units.map((item) => (
+        {ComponentsStore.components.map((item) => (
          <Draggable
            key={item.id}
            id={item.id}
@@ -61,5 +97,5 @@ export default function Home() {
        ))}
      </DraggablePanel>
    </div>
-  );
+  ));
 }
--- a/components/Draggable/Draggable.tsx
+++ b/components/Draggable/Draggable.tsx
@@ -1,38 +1,35 @@
 "use client";
 import "@/app/globals.css";
+import _ from "lodash";
+
 import { useDraggable } from "@dnd-kit/core";
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { nearestMultiple } from "./utils";
+import PreviewStore from "@/stores/previewStore";

 export default function Draggable(props: DraggablePropsType) {
  const targetRef = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<NodeJS.Timeout>(null);
  const [size, setSize] = useState({ width: 16, height: 16 });
-  const { id, component, data, x, y, width, height } = props;
+  const { id, component, data, x, y, width:_width, height:_height  } = props;
+  const [width, setWidth] = useState(_width);
+  const [height, setHeight] = useState(_height);
+
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id,
+    data: props
  });

  const style = transform
    ? {
-        top: y,
-        left: x,
-        width: width,
-        height: height,
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        opacity: 0.6,
-      }
-    : {
-        top: y,
-        left: x,
-        width: width,
-        height: height,
-      };
+      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      opacity: 0.3,
+    }
+    : {};
  useEffect(() => {
    const element = targetRef.current;
    if (!element) return;

-    // 创建 ResizeObserver 实例
-    let timer: any;
    const observer = new ResizeObserver(
      _.throttle((entries: any) => {
        for (const entry of entries) {
@@ -41,33 +38,43 @@ export default function Draggable(props: DraggablePropsType) {
            width: nearestMultiple(width),
            height: nearestMultiple(height),
          });
-          if (timer) {
-            clearTimeout(timer);
+          const x = nearestMultiple(element.offsetLeft);
+          const y = nearestMultiple(element.offsetTop);
+          PreviewStore.changePreviewX(x);
+          PreviewStore.changePreviewY(y);
+          PreviewStore.changePreviewWidth(nearestMultiple(width));
+          PreviewStore.changePreviewHeight(nearestMultiple(height));
+          if (timerRef.current) {
+            clearTimeout(timerRef.current);
          }
-          // setIsResize(true);
-          timer = setTimeout(() => {
-            entry.target.style.width = nearestMultiple(width) + "px";
-            entry.target.style.height = nearestMultiple(height) + "px";
-            // syncSize(entry.contentRect, containerRef.current);
-            // setIsResize(false);
-          }, 150);
+          timerRef.current = setTimeout(() => {
+            console.log(PreviewStore.width, PreviewStore.height);
+            setWidth(PreviewStore.width);
+            setHeight(PreviewStore.height);
+          }, 2000);
        }
      }, 30),
    );

-    // 开始观察元素
    observer.observe(element);
-
-    // 组件卸载时断开连接
    return () => {
      observer.disconnect();
    };
-  }, []); // 空依赖数组确保只运行一次
+  }, []);

  const className = transform ? "shadow-xl absolute w-min min-w-[128px] min-h-[128px]" : "absolute w-min resize overflow-hidden min-w-[128px] min-h-[128px]";

  return (
-    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+    <div className={className} ref={(el) => {
+      setNodeRef(el);  // DnD 的 ref
+      (targetRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    }} style={{
+      top: y,
+      left: x,
+      width: width,
+      height: height,
+      ...style,
+    }} {...attributes} title={`${width}x${height}`}>
      <button
        className="btn absolute top-1 right-1 z-50 btn-square btn-soft"
        {...listeners}
@@ -79,7 +86,7 @@ export default function Draggable(props: DraggablePropsType) {
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
-          className="size-6"
+          className="size-6 pointer-events-none"
        >
          <path
            strokeLinecap="round"
@@ -88,7 +95,7 @@ export default function Draggable(props: DraggablePropsType) {
          />
        </svg>
      </button>
-      {component && component(data??{})}
+      {component && component(data ?? {})}
    </div>
  );
 }
--- a/components/Draggable/Preview.tsx
+++ b/components/Draggable/Preview.tsx
@@ -13,17 +13,21 @@ export default function Preview(props: PreviewPropsType) {

  useEffect(() => {
    setStyle({
-      top: x,
-      left: y,
+      top: y,
+      left: x,
      width: width,
      height: height,
+      // visibility: width * height === 0 ? 'hidden' : 'none'
    });
-  }, [height, props, width, x, y])
+  }, [props.height, props.width, props.x, props.y])
  return (
    <div
-      className="absolute border-2 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
+      className="absolute border-2 z-50 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
      style={style}
-    ></div>
+    >
+      {width * height === 0 || `${width} * ${height}`}
+      {x * y === 0 || `${x}, ${y}`}
+    </div>
  );
 }

--- a/components/DraggablePanel.tsx
+++ b/components/DraggablePanel.tsx
@@ -2,6 +2,12 @@
 import classnames from "classnames";
 import { DndContext } from "@dnd-kit/core";
 import { Droppable } from "./Droppable";
+import PreviewStore from "@/stores/previewStore";
+import ComponentStore from '@/stores/componentStore';
+import Preview from "./Draggable/Preview";
+import { useObserver } from "mobx-react-lite";
+import { nearestMultiple } from "./Draggable/utils";
+import { ReactElement } from "react";

 export default function DraggablePanel(props: DraggablePanelType) {
  const { draggable, wdith = "full", height = "full", children } = props;
@@ -15,13 +21,46 @@ export default function DraggablePanel(props: DraggablePanelType) {
      "base-100": !draggable, // 当 disabled 为 true 时添加
    },
  );
-  return (
-    <DndContext >
+  return useObserver(() => (
+    <DndContext 
+      onDragMove={(event) => {
+        const node = event?.activatorEvent?.target?.parentNode;
+        const rect = node.getBoundingClientRect();
+        const { width, height } = rect;
+        const x = nearestMultiple(node.offsetLeft + event.delta.x);
+        const y = nearestMultiple(node.offsetTop + event.delta.y);
+        PreviewStore.changePreviewX(x);
+        PreviewStore.changePreviewY(y);
+        PreviewStore.changePreviewWidth(nearestMultiple(width));
+        PreviewStore.changePreviewHeight(nearestMultiple(height));
+      }}
+      onDragEnd={(event) => {
+        const node = event?.activatorEvent?.target?.parentNode;
+        const rect = node.getBoundingClientRect();
+        const { width, height } = rect;
+        const x = nearestMultiple(node.offsetLeft + event.delta.x);
+        const y = nearestMultiple(node.offsetTop + event.delta.y);
+        PreviewStore.changePreviewX(0);
+        PreviewStore.changePreviewY(0);
+        PreviewStore.changePreviewWidth(0);
+        PreviewStore.changePreviewHeight(0);
+        ComponentStore.changeComponent({
+          id: event?.active?.data?.current?.id,
+          component: event?.active?.data?.current?.component,
+          x,
+          y,
+          width: nearestMultiple(width),
+          height: nearestMultiple(height),
+        });
+    }}>
      <Droppable>
-        <div className={draggablePanelClass}>{children}</div>
+        <div className={draggablePanelClass}>
+          <Preview x={PreviewStore.x} y={PreviewStore.y} width={PreviewStore.width} height={PreviewStore.height} />
+          {children}
+        </div>
      </Droppable>
    </DndContext>
-  );
+  ));
 }

 export type DraggablePanelType = {
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
    "@heroicons/react": "^2.2.0",
    "classnames": "^2.5.1",
    "lodash": "^4.17.21",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
    "next": "15.2.3",
    "next-auth": "5.0.0-beta.25",
    "react": "^19.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -210,79 +210,67 @@ packages:
    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-libvips-linux-arm@1.0.5':
    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-libvips-linux-s390x@1.0.4':
    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-libvips-linux-x64@1.0.4':
    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@img/sharp-linux-arm64@0.33.5':
    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-linux-arm@0.33.5':
    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-linux-s390x@0.33.5':
    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-linux-x64@0.33.5':
    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@img/sharp-linuxmusl-arm64@0.33.5':
    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@img/sharp-linuxmusl-x64@0.33.5':
    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@img/sharp-wasm32@0.33.5':
    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
@@ -327,28 +315,24 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@next/swc-linux-arm64-musl@15.2.3':
    resolution: {integrity: sha512-2gAPA7P652D3HzR4cLyAuVYwYqjG0mt/3pHSWTCyKZq/N/dJcUAEoNQMyUmwTZWCJRKofB+JPuDVP2aD8w2J6Q==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@next/swc-linux-x64-gnu@15.2.3':
    resolution: {integrity: sha512-ODSKvrdMgAJOVU4qElflYy1KSZRM3M45JVbeZu42TINCMG3anp7YCBn80RkISV6bhzKwcUqLBAmOiWkaGtBA9w==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@next/swc-linux-x64-musl@15.2.3':
    resolution: {integrity: sha512-ZR9kLwCWrlYxwEoytqPi1jhPd1TlsSJWAc+H/CJHmHkf2nD92MQpSRIURR1iNgA/kuFSdxB8xIPt4p/T78kwsg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@next/swc-win32-arm64-msvc@15.2.3':
    resolution: {integrity: sha512-+G2FrDcfm2YDbhDiObDU/qPriWeiz/9cRR0yMWJeTLGGX6/x8oryO3tt7HhodA1vZ8r2ddJPCjtLcpaVl7TE2Q==}
@@ -431,28 +415,24 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@tailwindcss/oxide-linux-arm64-musl@4.0.14':
    resolution: {integrity: sha512-gVkJdnR/L6iIcGYXx64HGJRmlme2FGr/aZH0W6u4A3RgPMAb+6ELRLi+UBiH83RXBm9vwCfkIC/q8T51h8vUJQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@tailwindcss/oxide-linux-x64-gnu@4.0.14':
    resolution: {integrity: sha512-EE+EQ+c6tTpzsg+LGO1uuusjXxYx0Q00JE5ubcIGfsogSKth8n8i2BcS2wYTQe4jXGs+BQs35l78BIPzgwLddw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@tailwindcss/oxide-linux-x64-musl@4.0.14':
    resolution: {integrity: sha512-KCCOzo+L6XPT0oUp2Jwh233ETRQ/F6cwUnMnR0FvMUCbkDAzHbcyOgpfuAtRa5HD0WbTbH4pVD+S0pn1EhNfbw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@tailwindcss/oxide-win32-arm64-msvc@4.0.14':
    resolution: {integrity: sha512-AHObFiFL9lNYcm3tZSPqa/cHGpM5wOrNmM2uOMoKppp+0Hom5uuyRh0QkOp7jftsHZdrZUpmoz0Mp6vhh2XtUg==}
@@ -570,25 +550,21 @@ packages:
    resolution: {integrity: sha512-RfYtlCtJrv5i6TO4dSlpbyOJX9Zbhmkqrr9hjDfr6YyE5KD0ywLRzw8UjXsohxG1XWgRpb2tvPuRYtURJwbqWg==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@unrs/rspack-resolver-binding-linux-arm64-musl@1.1.2':
    resolution: {integrity: sha512-MaITzkoqsn1Rm3+YnplubgAQEfOt+2jHfFvuFhXseUfcfbxe8Zyc3TM7LKwgv7mRVjIl+/yYN5JqL0cjbnhAnQ==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@unrs/rspack-resolver-binding-linux-x64-gnu@1.1.2':
    resolution: {integrity: sha512-Nu981XmzQqis/uB3j4Gi3p5BYCd/zReU5zbJmjMrEH7IIRH0dxZpdOmS/+KwEk6ao7Xd8P2D2gDHpHD/QTp0aQ==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@unrs/rspack-resolver-binding-linux-x64-musl@1.1.2':
    resolution: {integrity: sha512-xJupeDvaRpV0ADMuG1dY9jkOjhUzTqtykvchiU2NldSD+nafSUcMWnoqzNUx7HGiqbTMOw9d9xT8ZiFs+6ZFyQ==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@unrs/rspack-resolver-binding-wasm32-wasi@1.1.2':
    resolution: {integrity: sha512-un6X/xInks+KEgGpIHFV8BdoODHRohaDRvOwtjq+FXuoI4Ga0P6sLRvf4rPSZDvoMnqUhZtVNG0jG9oxOnrrLQ==}
@@ -1302,28 +1278,24 @@ packages:
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  lightningcss-linux-arm64-musl@1.29.2:
    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  lightningcss-linux-x64-gnu@1.29.2:
    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  lightningcss-linux-x64-musl@1.29.2:
    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  lightningcss-win32-arm64-msvc@1.29.2:
    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
--- a/stores/componentStore.ts
+++ b/stores/componentStore.ts
@@ -0,0 +1,29 @@
+import { DraggablePropsType } from "@/components/Draggable/Draggable";
+import { makeAutoObservable } from "mobx";
+
+class ComponentsStore {
+    components:DraggablePropsType[] = [];
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  initComponent(componentsList:DraggablePropsType[]) {
+    this.components = componentsList || [];
+  }
+
+  changeComponent(componentsList:DraggablePropsType) {
+    this.components = this.components.map(item => {
+      if (item.id !== componentsList.id) {
+        return item;
+      }
+      return componentsList;
+    })
+  }
+
+  delectComponent(componentsList:DraggablePropsType) {
+    this.components = this.components.filter(item => item.id !== componentsList.id);
+  }
+}
+
+export default new ComponentsStore();
--- a/stores/counterStore.ts
+++ b/stores/counterStore.ts
@@ -1,4 +1,3 @@
-// stores/counterStore.ts
 import { makeAutoObservable } from "mobx";

 export class CounterStore {
--- a/stores/previewStore.ts
+++ b/stores/previewStore.ts
@@ -0,0 +1,43 @@
+import { DraggablePropsType } from "@/components/Draggable/Draggable";
+import { makeAutoObservable } from "mobx";
+
+class PreviewStore {
+    width: number = 0;
+    height: number = 0;
+    x: number = 0;
+    y: number = 0;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    changePreview(x: number, y: number, width: number, height: number) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+
+    changePreviewX(x: number) {
+        this.x = x;
+    }
+    changePreviewY(y: number) {
+        this.y = y;
+    }
+    changePreviewWidth(width: number) {
+        this.width = width;
+    }
+    changePreviewHeight(height: number) {
+        this.height = height;
+    }
+
+    clearPreview() {
+        this.width = 0;
+        this.height = 0;
+        this.x = 0;
+        this.y = 0;
+    }
+}
+
+
+export default new PreviewStore();
--- a/stores/storeContext.tsx
+++ b/stores/storeContext.tsx
@@ -1,3 +1,4 @@
+"use client";
 // stores/storeContext.ts
 import { createContext, useContext } from "react";
 import { CounterStore } from "./counterStore";
@@ -12,7 +13,7 @@ export const initializeStores = (initialData = {}) => {
  const counterStore = new CounterStore();
  
  // 服务端预取数据注入
-  if (initialData.counterStore) {
+  if (initialData?.counterStore) {
    counterStore.count = initialData.counterStore.count;
  }