wip

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();

stores/counterStore.ts

@@ -1,4 +1,3 @@
-// stores/counterStore.ts
 import { makeAutoObservable } from "mobx";
 
 export class CounterStore {

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();

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