update

src/modules/editor/components/CompUI/basicUI/Image/index.ts

@@ -1,6 +1,5 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
 import { createCompHooks } from "../../defines/createCompHooks";
 
 export { Component } from "./component";

src/modules/editor/components/CompUI/basicUI/Image2/index.ts

@@ -1,15 +1,14 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions2 } from "../../defines/createOptions";
 import { RegCompType } from "../../defines/creator";
 
 export { Component } from "./component";
 
 export const { createCompData, useCompData } = RegCompType(
-    {type: "Image2", name: "图片", thumbnail: Dict_Imgs.Default},
-    {
-      value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
-    }
+  { type: "Image2", name: "图片", thumbnail: Dict_Imgs.Default },
+  {
+    value: { url: Dict_Imgs.Default, x: 0, y: 0, s: 1 },
+  }
 );
 
 export const Form = createAttrsForm([
@@ -27,7 +26,8 @@ export const Form = createAttrsForm([
     label: "y偏移",
     dataIndex: "value.y",
     component: "Input",
-  },{
+  },
+  {
     label: "缩放",
     dataIndex: "value.s",
     component: "Input",

src/modules/editor/components/CompUI/basicUI/Transfer.tsx

@@ -1,4 +1,3 @@
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineComponent, onMounted, ref } from "vue";
 import { string } from "vue-types";
@@ -21,7 +20,7 @@ export const Transfer = defineComponent({
       offsetY: 0,
     };
 
-    const comp = store.designCompMap.get(props.compId) as DesignComp;
+    const comp = store.designData.compMap[props.compId];
     let parentCompEl: HTMLElement;
 
     onMounted(() => {

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -13,7 +13,7 @@ export const View = defineComponent({
   setup(props, { slots, emit }) {
     const { store, actions, helper } = useEditor();
     const comp =
-      (props.compId && store.designCompMap.get(props.compId)) ||
+      (props.compId && store.designData.compMap[props.compId]) ||
       new DesignComp();
 
     function createStyle(): any {

src/modules/editor/components/CompUI/customUI/Cards/CardList/component.tsx

@@ -12,20 +12,20 @@ export const Component = createUIComp({
   setup(props) {
     const { helper } = useEditor();
     const { value, children } = useCompData(props.compId);
-    const createList = useChildCreator("list");
+    // const createList = useChildCreator("list");
 
-    watch(
-      () => [value.total],
-      () => {
-        const { total } = value;
-        const offset = total - children.list.length;
-        if (offset > 0) {
-          children.list.push(...createList(offset));
-        } else {
-          children.list.splice(total, offset * -1);
-        }
-      }
-    );
+    // watch(
+    //   () => [value.total],
+    //   () => {
+    //     const { total } = value;
+    //     const offset = total - children.list.length;
+    //     if (offset > 0) {
+    //       children.list.push(...createList(offset));
+    //     } else {
+    //       children.list.splice(total, offset * -1);
+    //     }
+    //   }
+    // );
 
     return () => (
       <div

src/modules/editor/components/CompUI/customUI/Covers/Cover2/index.ts

@@ -1,7 +1,6 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createCompHooks } from "../../../defines/createCompHooks";
 import { createCompId } from "../../../defines/createCompId";
-import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 

src/modules/editor/components/CompUI/customUI/index.ts

@@ -1,4 +1,4 @@
-// export * as Card from "./Cards/Card";
+export * as Card from "./Cards/Card";
 export * as Card2 from "./Cards/Card2";
 export * as Card3 from "./Cards/Card3";
 export * as CardList from "./Cards/CardList";

src/modules/editor/components/CompUI/defines/createOptions.ts

@@ -1,42 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { Background, Layout } from "../../../typings";
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
-import { reactive } from "vue";
-
-type IOptions<T, C> = {
-  name: string;
-  compKey?: string;
-  thumbnail: string;
-  value: T;
-  layout?: Layout;
-  background?: Background;
-  children?: C;
-};
-
-export function createOptions<T, C>(options: IOptions<T, C>) {
-  function useCompData(compId: string): {
-    value: T;
-    children: Record<keyof C, DesignComp>;
-  } {
-    const editor = useEditor();
-    return editor.store.designCompMap.get(compId) as any;
-  }
-  return { options, useCompData };
-}
-
-export function createOptions2<T, C>(defaults: IOptions<T, C>) {
-  function useCompData(compId: string): {
-    id:  string,
-    value: T;
-    children: Record<keyof C, DesignComp>;
-  } {
-    const editor = useEditor();
-    let data = editor.store.designCompMap.get(compId);
-    if (!data || !compId ) {//为空,则创建一个
-        data = reactive(new DesignComp(defaults as any));
-        editor.store.setCompData(data.id, data);
-    }
-    return data as any;
-  }
-  return { options: defaults, useCompData };
-}

src/modules/editor/components/CompUI/defines/creator.ts

@@ -1,29 +1,37 @@
 import { useEditor } from "@/modules/editor";
 import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 import { cloneDeep } from "lodash";
-import { any, object } from "vue-types";
 
-type CommPropType = Pick<DesignComp, "compKey" | "background" | "layout" | "id">
-
-
-function RegCompType<T>(info: {type:string , name:string, thumbnail:string},  defValue:  Partial<CommPropType> & {value: T}) {
-
-    const createCompData =  function(values: Partial<T>, comm?: Partial<CommPropType>) {
-
-        const defvalues = cloneDeep(defValue)
-        defvalues.compKey = info.type as any
-
-        const c = Object.assign({}, defvalues, comm, {value: values}) as CommPropType &{value: T}
-        return new DesignComp(c) as typeof c;
-    }
-
-    type ValueType = ReturnType<typeof createCompData>
-
-    function useCompData(compId: string){
-        const editor = useEditor();
-        return editor.store.designCompMap.get(compId) as ValueType;
-    }
-    return {useCompData, createCompData}
+type CommPropType = Pick<
+  DesignComp,
+  "compKey" | "background" | "layout" | "id"
+>;
+
+function RegCompType<T>(
+  info: { type: string; name: string; thumbnail: string },
+  defValue: Partial<CommPropType> & { value: T }
+) {
+  const createCompData = function (
+    values: Partial<T>,
+    comm?: Partial<CommPropType>
+  ) {
+    const defvalues = cloneDeep(defValue);
+    defvalues.compKey = info.type as any;
+
+    const c = Object.assign({}, defvalues, comm, {
+      value: values,
+    }) as CommPropType & { value: T };
+    return new DesignComp(c) as typeof c;
+  };
+
+  type ValueType = ReturnType<typeof createCompData>;
+
+  function useCompData(compId: string) {
+    const editor = useEditor();
+    return editor.store.designData.compMap[compId] as ValueType;
+  }
+  return { useCompData, createCompData };
 }
 
-export {RegCompType}
+export { RegCompType };
+

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

@@ -7,9 +7,10 @@ export default defineUI({
     const { store } = useEditor();
     return () => (
       <div>
-        {store.designData.content.map((d) => {
-          const Comp: any = CompUI[d.compKey]?.Component;
-          return Comp && <Comp key={d.id} compId={d.id} />;
+        {store.designData.content.map((id) => {
+          const compKey = store.designData.compMap[id]?.compKey;
+          const Comp: any = CompUI[compKey]?.Component;
+          return Comp && <Comp key={id} compId={id} />;
         })}
       </div>
     );

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

@@ -11,7 +11,7 @@ import ErrorComp from "../../CompUI/placeHoder";
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { store, actions } = editor;
+    const { store, actions, helper } = editor;
 
     const hotKeyCtrl = new HotKeyCtrl(editor);
     hotKeyCtrl.init();
@@ -22,11 +22,13 @@ export default defineUI({
     const compsGroup = computed(() => {
       const normalArr: DesignComp[] = [];
       const posArr: DesignComp[] = [];
-      store.designData.content.forEach((d) => {
-        if (d.compKey === "Container") {
-          posArr.push(d);
+      store.designData.content.forEach((id) => {
+        const comp = helper.findComp(id);
+        if (!comp) return;
+        if (comp.compKey === "Container") {
+          posArr.push(comp);
         } else {
-          normalArr.push(d);
+          normalArr.push(comp);
         }
       });
       console.log(normalArr, posArr);

src/modules/editor/defines/DesignTemp/DesignComp.ts

@@ -14,12 +14,6 @@ export class DesignComp {
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;
     const newData = cloneDeep(filterObj(data));
-
-    if (newData.children) {
-      Object.entries(newData.children).forEach(([key, value]) => {
-        newData.children[key] = new DesignComp(value as any);
-      });
-    }
     Object.assign(this, newData);
   }
 }

src/modules/editor/defines/DesignTemp/index.ts

@@ -1,6 +1,9 @@
+
 import { DesignComp } from "./DesignComp";
+import { dataTransform } from "./versions/0.0.1";
 
 export class DesignTemp {
+  version?: string;
   _id!: string;
   title = "";
   pageStyle?: any;
@@ -9,6 +12,6 @@ export class DesignTemp {
 
   constructor(data?: Partial<DesignTemp>) {
     if (!data) return;
-    Object.assign(this, data);
+    Object.assign(this, dataTransform(data));
   }
 }

src/modules/editor/defines/DesignTemp/versions/0.0.1.ts

@@ -0,0 +1,43 @@
+import { CompUI } from "@/modules/editor/components/CompUI";
+import { addCacheToMap } from "@/modules/editor/components/CompUI/defines/createCompId";
+import { set } from "lodash";
+import { AnyFun } from "queenjs/typing";
+import { DesignComp } from "../DesignComp";
+
+export function dataTransform(data: any) {
+  data.compMap || (data.compMap = {});
+  deepEachComp(data.content, (...args: any[]) => {
+    const comp = args.pop();
+    set(data.content, args.join("."), comp.id);
+    data.compMap[comp.id] = comp;
+    if (!comp.children)
+      comp.children = (CompUI as any)[comp.compKey].createComp({
+        compKey: comp.compKey,
+      }).children;
+    addCacheToMap(data.compMap);
+  });
+  return data;
+}
+
+function deepEachComp(obj: any, itemFn: AnyFun) {
+  if (obj instanceof Array) {
+    obj.forEach((item, i) => deepEachComp(item, itemFn.bind(null, i)));
+  } else if (obj instanceof Object) {
+    if (isComp(obj)) {
+      deepEachComp(obj.children, itemFn.bind(null, "children"));
+      itemFn(obj);
+    } else {
+      Object.entries(obj).map(([key, item]) => {
+        deepEachComp(item, itemFn.bind(null, key));
+      });
+    }
+  }
+}
+
+function isComp(obj: any): obj is DesignComp {
+  if (obj.compKey) {
+    return true;
+  } else {
+    return false;
+  }
+}