update

src/modules/editor/actions/init.ts

@@ -1,5 +1,4 @@
 import { EditorModule } from "..";
-import { createProxyEffect } from "../defines/ProxyStore/createProxy";
 import { DesignTemp } from "../defines/DesignTemp";
 import { editActions } from "./edit";
 
@@ -9,11 +8,10 @@ export const initActions = EditorModule.action({
     const { historyCtrl } = this.controls;
     historyCtrl.proxyActions(Object.keys(editActions));
 
-    console.log(this.store);
-    createProxyEffect(this.store, (...args) => {
-      console.log(...args);
-      historyCtrl.onChange(this.store, ...args);
-    });
+    // createProxyEffect(this.store, (type, paths, value) => {
+    //   historyCtrl.onChange(this.store, type, paths, value);
+    // });
+   
   },
 
   // 初始化数据

src/modules/editor/components/AttrsUI/CardDemo.tsx

@@ -0,0 +1,16 @@
+import { createAttrsHoc } from "./_createAttrsHoc";
+
+export const CardDemo = createAttrsHoc([
+  {
+    label: "标题",
+    dataIndex: "title",
+  },
+  {
+    label: "卡片数量",
+    dataIndex: "cardColumns",
+  },
+  {
+    label: "主题颜色",
+    dataIndex: "themeColor",
+  },
+]);

src/modules/editor/components/AttrsUI/Image.tsx

@@ -0,0 +1,7 @@
+import { createAttrsHoc } from "./_createAttrsHoc";
+
+export const Image = createAttrsHoc([
+  {
+    label: "图片",
+  },
+]);

src/modules/editor/components/AttrsUI/Text.tsx

@@ -0,0 +1,7 @@
+import { createAttrsHoc } from "./_createAttrsHoc";
+
+export const Text = createAttrsHoc([
+  {
+    label: "文本",
+  },
+]);

src/modules/editor/components/AttrsUI/_createAttrsHoc.tsx

@@ -0,0 +1,35 @@
+import { Input } from "ant-design-vue";
+import { get } from "lodash";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export function createAttrsHoc(
+  options: { label: string; dataIndex?: string }[]
+) {
+  return defineComponent({
+    props: {
+      value: any(),
+    },
+    emits: ["update:value"],
+    setup(props, { emit }) {
+      return () => (
+        <div>
+          {options.map((d) => {
+            const val = d.dataIndex
+              ? get(props.value, d.dataIndex)
+              : props.value;
+            return (
+              <div>
+                <div>{d.label}</div>
+                <Input
+                  value={val}
+                  onChange={(e) => emit("update:value", e.target.value)}
+                />
+              </div>
+            );
+          })}
+        </div>
+      );
+    },
+  });
+}

src/modules/editor/components/AttrsUI/index.ts

@@ -0,0 +1,3 @@
+export { Image } from "./Image";
+export { Text } from "./Text";
+export { CardDemo } from "./CardDemo";

src/modules/editor/components/Viewport/Slider/SliderRight.tsx

@@ -1,51 +1,25 @@
 import { useEditor } from "@/modules/editor";
-import { getOption } from "@/modules/editor/config/compUIOptions/create";
-import { Input } from "ant-design-vue";
-import { get, set } from "lodash";
 import { defineUI } from "queenjs";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
+    const { AttrsUI } = editor.components;
 
     return () => {
-      const currCompUIOpts = getOption(
-        editor.config.compUIOptions,
-        editor.store.currComp?.compKey
-      );
+      const { currComp } = editor.store;
+      const CurrCompAttrs = AttrsUI[currComp?.compKey as "Image"];
       return (
         <div>
           <div class="p-16px border-bottom !border-2px">设置栏</div>
-          {currCompUIOpts && (
-            <div class="m-16px">
-              <div>当前组件</div>
+          <div class="m-16px">
+            <div>当前组件</div>
+            {currComp && CurrCompAttrs && (
               <div class="py-16px space-y-10px">
-                {currCompUIOpts.valueOpts.map((d) => {
-                  return (
-                    <div class="">
-                      <div>{d.label}</div>
-                      <Input
-                        value={
-                          d.dataIndex
-                            ? get(editor.store.currComp?.value, d.dataIndex)
-                            : editor.store.currComp?.value
-                        }
-                        onChange={(e) =>
-                          set(
-                            d.dataIndex
-                              ? editor.store.currComp?.value
-                              : editor.store.currComp,
-                            d.dataIndex || "value",
-                            e.target.value
-                          )
-                        }
-                      />
-                    </div>
-                  );
-                })}
+                <CurrCompAttrs v-model={[currComp.value, "value"]} />
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       );
     };

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -0,0 +1,26 @@
+import { useEditor } from "@/modules/editor";
+import { Button } from "ant-design-vue";
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    const { controls } = useEditor();
+    const { history } = controls.historyCtrl;
+    return () => (
+      <div>
+        <Button
+          onClick={() => history.undo()}
+          disabled={!history.state.canUndo}
+        >
+          撤销
+        </Button>
+        <Button
+          onClick={() => history.redo()}
+          disabled={!history.state.canRedo}
+        >
+          重做
+        </Button>
+      </div>
+    );
+  },
+});

src/modules/editor/components/Viewport/index.tsx

@@ -3,6 +3,7 @@ import Canvas from "./Canvas";
 import Header from "./Header";
 import SliderLeft from "./Slider/SliderLeft";
 import SliderRight from "./Slider/SliderRight";
+import Toolbar from "./Toolbar";
 
 export default defineUI({
   slots: {
@@ -10,6 +11,7 @@ export default defineUI({
     SliderLeft,
     SliderRight,
     Canvas,
+    Toolbar
   },
   setup(props, { slots }) {
     return () => (
@@ -17,7 +19,10 @@ export default defineUI({
         <slots.Header class="p-16px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
           <slots.SliderLeft class="w-300px bg-component border-right !border-2px" />
-          <slots.Canvas class="flex-1 p-30px" />
+          <div class="flex flex-col flex-1">
+            {/* <slots.Toolbar /> */}
+            <slots.Canvas class="flex-1 p-30px" />
+          </div>
           <slots.SliderRight class="w-300px bg-component border-left !border-2px" />
         </div>
       </div>

src/modules/editor/components/index.ts

@@ -1,7 +1,9 @@
 import Viewport from "./Viewport";
 import * as CompUI from "./CompUI";
+import * as AttrsUI from "./AttrsUI";
 
 export default {
   Viewport,
   CompUI,
+  AttrsUI,
 };

src/modules/editor/controllers/HistoryCtrl/index.ts

@@ -11,7 +11,7 @@ export class HistoryCtrl {
     this.history = new HistoryController(historyTotal);
   }
 
-  onChange(root: any, type: string, paths: string[], value: any, old?: any) {
+  onChange(root: any, type: string, paths: string[], value: any) {
     const action = new Action(
       root,
       `${type}:${paths.join(".")}`,

src/modules/editor/defines/ProxyStore/createProxy.ts

@@ -1,119 +0,0 @@
-import { isProxy, toRaw } from "vue";
-
-const stateWatchers = new WeakMap();
-
-export function createProxy<T>(target: T, paths: string[] = [], getRoot?: () => any): T {
-  if (
-    typeof target === "object" &&
-    !isProxy(target) &&
-    !(target instanceof Function) &&
-    target !== null
-  ) {
-    if (!getRoot) getRoot = () => proxyRoot;
-    for (const key in target) {
-      const proxy = createProxy(target[key], [...paths, key], getRoot);
-      target[key] = proxy;
-    }
-    const proxyRoot = new Proxy(target as any, {
-      get: (target, key, receiver) => {
-        if (key == "isProxy") {
-          return true;
-        }
-        return Reflect.get(target, key, receiver);
-      },
-      ...(target instanceof Array
-        ? arrayHandler(paths, getRoot)
-        : objectHandler(paths, getRoot)),
-    });
-    console.log(proxyRoot);
-    return proxyRoot;
-  } else {
-    return target;
-  }
-}
-
-function arrayHandler(paths: string[], getRoot: () => any) {
-  let removeIndex: any = null;
-  let removeOld: any = null;
-  return {
-    set: (target: Array<any>, key: string, value: any, receiver: any) => {
-      if (key === "length") {
-        removeIndex = null;
-        removeOld = null;
-      } else if (!removeIndex) {
-        if (!value.isProxy) {
-          const pathArr = [...paths, key];
-          if (+key == target.length) {
-            emit("add", pathArr, value, null, getRoot);
-          } else {
-            emit("set", pathArr, value, target[+key], getRoot);
-          }
-          value = createProxy(value, pathArr, getRoot);
-        } else {
-          removeIndex = key;
-          removeOld = target[+key];
-        }
-      }
-
-      return Reflect.set(target, key, value, receiver);
-    },
-    deleteProperty: (target: Array<any>, key: string) => {
-      if (!removeIndex) {
-        removeIndex = key;
-        removeOld = target[+key];
-      }
-      emit("remove", [...paths, removeIndex], null, removeOld, getRoot);
-      return Reflect.deleteProperty(target, key);
-    },
-  };
-}
-
-function objectHandler(paths: string[], getRoot: () => any) {
-  return {
-    set: (
-      target: { [name: string]: any },
-      key: string,
-      value: any,
-      receiver: any
-    ) => {
-      // eslint-disable-next-line
-      const actionType = target.hasOwnProperty(key) ? "set" : "add";
-      emit(actionType, [...paths, key], value, target[key], getRoot);
-      return Reflect.set(
-        target,
-        key,
-        createProxy(value, [...paths, key], getRoot),
-        receiver
-      );
-    },
-    deleteProperty: (target: { [name: string]: any }, key: string) => {
-      emit("remove", [...paths, key], null, target[key], getRoot);
-      return Reflect.deleteProperty(target, key);
-    },
-  };
-}
-
-function emit(
-  type: string,
-  paths: string[],
-  val: any,
-  old: any,
-  getRoot: () => any
-) {
-  const handler = stateWatchers.get(getRoot());
-  handler?.(type, paths, val, old);
-}
-
-export function createProxyEffect(
-  target: any,
-  handler: (
-    type: "set" | "add" | "remove",
-    paths: string[],
-    val: any,
-    old: any
-  ) => void
-) {
-  const key = toRaw(target);
-  const handles = stateWatchers.get(key) || [];
-  handles.push(handler);
-}

src/modules/editor/stores/index.ts

@@ -1,17 +1,15 @@
 import { EditorModule } from "..";
 import { getOption } from "../config/compUIOptions/create";
-import { createProxy } from "../defines/ProxyStore/createProxy";
 import { DesignTemp } from "../defines/DesignTemp";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
 import { ICompKeys } from "../typings";
 
 export const store = EditorModule.store({
-  state: () =>
-    createProxy({
-      mode: "edit",
-      currCompId: "",
-      designData: new DesignTemp(),
-    }),
+  state: () => ({
+    mode: "edit",
+    currCompId: "",
+    designData: new DesignTemp(),
+  }),
   getters: {
     isEditMode(state) {
       return state.mode === "edit";