wip

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>
-  );
+  ));
 }