Merge branch 'master' of http://124.70.149.18:10880/lianghj/queenshow

src/modules/editor/actions/edit.ts

@@ -1,17 +1,27 @@
 import { toRaw } from "vue";
 import { EditorModule } from "..";
 import { ICompKeys } from "../typings";
+import { DesignComp } from "../defines/DesignTemp/DesignComp";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
   addCompToDesign(compKey: ICompKeys) {
-    const designComp = this.store.insertDesignContent(compKey);
-    this.actions.pickCurrComp(designComp.id);
+    let designComp: DesignComp;
+    if (this.store.currComp?.compKey === "Container") {
+      designComp = this.store.insertCompContainer(compKey, this.store.currComp);
+    } else {
+      designComp = this.store.insertDesignContent(compKey);
+    }
+    this.actions.pickComp(designComp.id);
   },
   // 切换当前组件
-  pickCurrComp(compId: string) {
+  pickComp(compId: string) {
     this.store.setCurrComp(compId);
   },
+  pickParentComp(compId: string) {
+    const comp = this.helper.findParentComp(compId);
+    comp && this.store.setCurrComp(comp.id);
+  },
   // 删除组件
   removeComp(compId: string) {
     if (compId === this.store.currCompId) {

src/modules/editor/actions/image.ts

@@ -0,0 +1,38 @@
+import { Exception } from "queenjs";
+import { EditorModule } from "..";
+import { DesignTemp } from "../defines/DesignTemp";
+import { editActions } from "./edit";
+
+export const ImgCompActions = EditorModule.action({
+  handleImageHotKey(key:string) {
+     if ( !this.store.isEditMode ) return;     
+     if (this.store.currComp?.compKey !== "Image") return;
+
+     console.log( this.store.currComp );
+     const value = this.store.currComp.value
+     if (key == "w") {
+        value.y = (parseFloat(value.y) - 0.5).toFixed(2)
+        return;
+     } 
+     if (key == "s") {
+        value.y = (parseFloat(value.y) + 0.5).toFixed(2)
+        return;
+     }
+     if (key == "a") {
+        value.x = (parseFloat(value.x) - 0.5).toFixed(2)
+        return;
+     }
+     if (key == "d") {
+        value.x = (parseFloat(value.x) + 0.5).toFixed(2)
+        return;
+     }
+     if (key == "q") {
+        value.s = (parseFloat(value.s) - 0.05).toFixed(2)
+        return;
+     }
+     if (key == "e") {
+        value.s = (parseFloat(value.s) + 0.05).toFixed(2)
+        return;
+     }
+  },
+});

src/modules/editor/actions/init.ts

@@ -12,6 +12,8 @@ export const initActions = EditorModule.action({
     // createProxyEffect(this.store, (type, paths, value) => {
     //   historyCtrl.onChange(this.store, type, paths, value);
     // });
+
+    this.actions.initInputEvent();
   },
 
   // 初始化数据

src/modules/editor/actions/input.ts

@@ -0,0 +1,36 @@
+import { Exception } from "queenjs";
+import { EditorModule } from "..";
+import { DesignTemp } from "../defines/DesignTemp";
+import { editActions } from "./edit";
+
+export const InputEventActions = EditorModule.action({
+  // 模块初始化
+  initInputEvent() {
+
+      //lastFocusEvent
+
+      window.addEventListener("mousemove", (event)=>{
+           if ( !this.store.isEditMode ) return;
+      })
+
+      let dx = 0, dy=0, dt = 0;
+      window.addEventListener("mousedown", (event)=>{
+          console.log(event.clientX, event.clientY)
+          dx = event.clientX;
+          dy = event.clientY;
+          dt = Date.now();
+      })
+
+      window.addEventListener("mouseup", (event)=>{
+         const x = event.clientX - dx;
+         const y = event.clientY - dy;
+         const t = Date.now() - dt;
+         if ( !this.store.isEditMode ) return;
+         
+         if (Math.abs(x) < 3 && Math.abs(y) < 3  && t < 300 ) {
+           console.log("clicked");
+         }
+         
+      })
+  },
+});

src/modules/editor/components/CompUI/basicUI/Container/component.tsx

@@ -0,0 +1,36 @@
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { useEditor } from "../../../..";
+import { DesignComp } from "../../../../defines/DesignTemp/DesignComp";
+import { Transfer } from "../Transfer";
+import { View } from "../View";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { store, config, helper } = useEditor();
+    const { value, children } = useCompData(props.compId);
+    return () => (
+      <View
+        compId={props.compId}
+        style={{
+          position: "absolute",
+          top: helper.designToNaturalSize(value.position[1]),
+          left: helper.designToNaturalSize(value.position[0]),
+        }}
+      >
+        {Object.values(children).map((comp) => {
+          const compItem = comp as DesignComp;
+          const Comp = config.compUI[compItem.compKey].Component;
+          return <Comp key={compItem.id} compId={compItem.id} />;
+        })}
+        {store.currCompId === props.compId && (
+          <Transfer compId={props.compId} />
+        )}
+      </View>
+    );
+  },
+});

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

@@ -0,0 +1,28 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+import { GroupNumber } from "../../formItems/GroupNumber";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "定位容器",
+  thumbnail: Dict_Imgs.Default,
+  value: {
+    position: [0, 0],
+  },
+  layout: {
+    size: [200, 200],
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "坐标",
+    dataIndex: "value.position",
+    component: GroupNumber,
+    props: {
+      labels: ["X", "Y"],
+    },
+  },
+]);

src/modules/editor/components/CompUI/basicUI/Image/component.tsx

@@ -1,13 +1,13 @@
 import { useEditor } from "@/modules/editor";
 import { queenApi } from "queenjs";
-import { string } from "vue-types";
+import { string , object} from "vue-types";
 import { useCompData } from ".";
 import { createUIComp } from "../../defines/createUIComp";
 
 export const Component = createUIComp({
   props: {
     compId: string(),
-    value: string(),
+    value: object<{url:string, x:number, y:number, s:number}>(),
   },
   emits: ["update:value"],
   setup(props, { emit }) {
@@ -19,17 +19,32 @@ export const Component = createUIComp({
       if (!url) return;
       
       if (comp) {
-        comp.value = url;
+        comp.value.url = url;
+        comp.value.x = 0;
+        comp.value.y = 0;
+        comp.value.s = 1;
       } else {
-        emit("update:value", url);
+
+        emit("update:value", {url, x: 0, y: 0, s: 1});
       }
     }
-    return () => (
-      <img
-        class="w-1/1 h-1/1 object-cover"
-        src={comp?.value || props.value}
-        onDblclick={store.isEditMode ? changeVal : undefined}
-      />
-    );
+
+    return () => {
+
+      const value = comp?.value || props.value;
+      const scale =  value?.s || 1;
+      const ox = value?.x || 0;
+      const oy = value?.y || 0;
+      const objFit =  (scale + "" == "1") && (ox + "") == "0" &&  (oy + "") == "0" ? "object-cover" : "object-contain"
+      
+      return (
+        <img
+          class={"w-1/1 h-1/1 " + objFit}
+          style={{transform: `scale(${scale}) translate(${ox}%,${oy}%)`}}
+          src={value?.url}
+          onDblclick={store.isEditMode ? changeVal : undefined}
+        />
+      )
+    }
   },
 });

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

@@ -7,13 +7,27 @@ export { Component } from "./component";
 export const { options, useCompData } = createOptions({
   name: "图片",
   thumbnail: Dict_Imgs.Default,
-  value: Dict_Imgs.Default,
+  value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
 });
 
 export const Form = createAttrsForm([
   {
     label: "图片",
-    dataIndex: "value",
+    dataIndex: "value.url",
+    component: "Input",
+  },
+  {
+    label: "x偏移",
+    dataIndex: "value.x",
+    component: "Input",
+  },
+  {
+    label: "y偏移",
+    dataIndex: "value.y",
+    component: "Input",
+  },{
+    label: "缩放",
+    dataIndex: "value.s",
     component: "Input",
   },
 ]);

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -34,7 +34,7 @@ export const Component = createUIComp({
         Alignment,
       ],
       fontSize: {
-        options: [12, 14, 16, 18, 20, 24, 28],
+        options: [12, 14, 16, 18, 20, 24, 28, 32, 38,42, 46],
       },
       toolbar: {
         items: [

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

@@ -0,0 +1,147 @@
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { css } from "@linaria/core";
+import { defineComponent, onMounted, ref } from "vue";
+import { string } from "vue-types";
+import { useEditor } from "../../..";
+
+export const Transfer = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { store, helper } = useEditor();
+    const resizeRef = ref<HTMLElement>();
+    const moveRef = ref<HTMLElement>();
+    const start = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      offsetX: 0,
+      offsetY: 0,
+    };
+
+    const comp = store.designCompMap.get(props.compId) as DesignComp;
+    let parentCompEl: HTMLElement;
+
+    onMounted(() => {
+      if (!resizeRef.value || !moveRef.value) return;
+      resizeRef.value.addEventListener("mousedown", startDrag);
+      moveRef.value.addEventListener("mousedown", startMove);
+      const parentContentEl = getClosestParentWithClass(
+        resizeRef.value,
+        "view_content"
+      );
+      if (!parentContentEl) return;
+      parentCompEl = parentContentEl;
+    });
+
+    function startMove(e: MouseEvent) {
+      start.x = e.clientX;
+      start.y = e.clientY;
+
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", stopMove);
+    }
+    function move(e: MouseEvent) {
+      const viewEl = parentCompEl.parentElement;
+      if (!viewEl) return;
+      start.offsetX = e.clientX - start.x;
+      start.offsetY = e.clientY - start.y;
+
+      viewEl.style.left = helper.designToNaturalSize(
+        comp.value.position[0] + start.offsetX * 2
+      );
+      viewEl.style.top = helper.designToNaturalSize(
+        comp.value.position[1] + start.offsetY * 2
+      );
+    }
+    function stopMove(e: MouseEvent) {
+      comp.value.position[0] += start.offsetX * 2;
+      comp.value.position[1] += start.offsetY * 2;
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", stopMove);
+    }
+
+    function startDrag(e: MouseEvent) {
+      start.x = e.clientX;
+      start.y = e.clientY;
+      start.width = comp.layout.size?.[0] || 0;
+      start.height = comp.layout.size?.[1] || 0;
+
+      document.addEventListener("mousemove", drag);
+      document.addEventListener("mouseup", stopDrag);
+    }
+
+    function drag(e: MouseEvent) {
+      start.offsetX = e.clientX - start.x;
+      start.offsetY = e.clientY - start.y;
+      parentCompEl.style.width = helper.designToNaturalSize(
+        start.width + start.offsetX * 2
+      );
+      parentCompEl.style.height = helper.designToNaturalSize(
+        start.height + start.offsetY * 2
+      );
+    }
+
+    function stopDrag() {
+      comp.layout.size || (comp.layout.size = [0, 0]);
+      comp.layout.size[0] = start.width + start.offsetX * 2;
+      comp.layout.size[1] = start.height + start.offsetY * 2;
+      document.removeEventListener("mousemove", drag);
+      document.removeEventListener("mouseup", stopDrag);
+    }
+
+    return () => (
+      <>
+        <div ref={resizeRef} class={resizeStyle}></div>
+        <div ref={moveRef} class={moveStyle}></div>
+      </>
+    );
+  },
+});
+
+function getClosestParentWithClass(element: HTMLElement, className: string) {
+  let parent = element.parentElement;
+
+  while (parent) {
+    if (parent.classList.contains(className)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+
+  return null;
+}
+
+const resizeStyle = css`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  border-bottom: 4px solid;
+  border-right: 4px solid;
+  border-color: @inf-primary-fade-color;
+  cursor: nwse-resize;
+  &:hover {
+    border-color: @inf-primary-color;
+  }
+`;
+
+const moveStyle = css`
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 40px;
+  height: 4px;
+  transform: translate(-50%, 50%);
+  background-color: @inf-primary-color;
+  border-radius: 4px;
+  cursor: all-scroll;
+  &:hover {
+    border-color: #fff;
+    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
+    outline: 2px solid #fff;
+  }
+`;

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

@@ -80,7 +80,7 @@ export const View = defineComponent({
           onClick={(e) => {
             e.stopPropagation();
             if (isComp && !isSelected) {
-              actions.pickCurrComp(props.compId as string);
+              actions.pickComp(props.compId as string);
             }
           }}
         >

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

@@ -3,6 +3,7 @@ import { useCompData } from ".";
 import { Image, Text } from "../../..";
 import { useEditor } from "../../../../..";
 import { createUIComp } from "../../../defines/createUIComp";
+import { css } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {
@@ -10,19 +11,66 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value } = useCompData(props.compId);
+    const { value, children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex">
-        <Image.Component
-          style={{
-            width: designToNaturalSize(value.imgSize[0]),
-            height: designToNaturalSize(value.imgSize[1]),
-          }}
-          v-model={[value.img, "value"]}
-        />
-        <Text.Component class="flex-1 ml-0.1rem" v-model={[value.desc, "value"]} />
+      <div class="relative">
+        <div class={upStyle}>
+            <div class={style}>
+            <Image.Component
+                style={{
+                width: designToNaturalSize(750),
+                height: designToNaturalSize(464),
+                }}
+                compId={children.bgImg.id}
+            />
+            </div>
+
+            <Image.Component
+                class="!absolute  bottom-0 transform translate-x-1/4 translate-y-1/4 rounded-1/2 overflow-hidden"
+                style={{
+                
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                }}
+                compId={children.item1.id}
+            />
+
+            <Image.Component
+                class="!absolute transform rounded-1/2 overflow-hidden -translate-x-1/2 bottom-0 left-1/2"
+                style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                }}
+                compId={children.item2.id}
+            />
+            
+            <Image.Component
+                class="!absolute bottom-0 right-0 rounded-1/2 overflow-hidden transform -translate-x-24/100 -translate-y-1/3"
+                style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                }}
+                compId={children.item3.id}
+            />
+        </div>
+
+        <div class="absolute top-0 left-0">
+          <Text.Component compId={children.text1.id} />
+        </div>
+
+    
+        <Text.Component compId={children.text2.id}  />
       </div>
     );
   },
 });
+const upStyle = css`
+  position:relative;
+`
+const style = css`
+  background: gray;
+  clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);
+  transform-origin: center;
+  transform: translate(0%, 0%) scale(1);
+`;

src/modules/editor/components/CompUI/customUI/Cards/Card2/index.tsx

@@ -5,13 +5,41 @@ import { GroupNumber } from "../../../formItems/GroupNumber";
 
 export { Component } from "./component";
 
+const thumbnail =  require("@/assets/comps/card2/thumbnail.png")
 export const { options, useCompData } = createOptions({
   name: "卡片2",
-  thumbnail: require("@/assets/thumbnails/1.png"),
+  thumbnail:thumbnail,
   value: {
-    img: Dict_Imgs.Default,
-    imgSize: [240, 240],
-    desc: "描述",
+
+  },
+  layout: {
+    padding: "0 0 0.2rem 0",
+  },
+  children: {
+    bgImg: {
+      compKey: "Image",
+      value: { url: require("@/assets/comps/card2/bg.png"), x: 0, y: 0, s: 1 },
+    },
+    item1: {
+        compKey: "Image",
+        value: { url: thumbnail, x: 26.50, y: -23.00, s: 4.05 },
+    },
+    item2: {
+        compKey: "Image",
+        value: { url: thumbnail, x: -4.0, y: -13.50, s: 3.90 },
+    },
+    item3: {
+        compKey: "Image",
+        value: { url: thumbnail, x: -34.00, y: -3.5, s: 4.0 },
+    },
+    text1: {
+        compKey: "Text",
+        value:  `<p><span style="font-size:42px;"><strong>&nbsp; </strong></span><span style="color:hsl(0, 0%, 100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0, 0%, 100%);font-size:20px;">&nbsp; &nbsp; &nbsp;可注塑</span></p>`,
+    },
+    text2: {
+        compKey: "Text",
+        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
+    },
   },
 });
 

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

@@ -1,6 +1,7 @@
 export * as Cover2 from "./customUI/Cover2";
 export * as Image from "./basicUI/Image";
 export * as Text from "./basicUI/Text";
+export * as Container from "./basicUI/Container";
 export * as Card from "./customUI/Cards/Card";
 export * as CardList from "./customUI/Cards/CardList";
 export * as Cover from "./customUI/Cover";

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

@@ -1,6 +1,7 @@
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { onUnmounted } from "vue";
+import { computed, onUnmounted } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
@@ -18,16 +19,40 @@ export default defineUI({
       hotKeyCtrl.destroy();
     });
 
+    const compsGroup = computed(() => {
+      const normalArr: DesignComp[] = [];
+      const posArr: DesignComp[] = [];
+      store.designData.content.forEach((d) => {
+        if (d.compKey === "Container") {
+          posArr.push(d);
+        } else {
+          normalArr.push(d);
+        }
+      });
+      console.log(normalArr, posArr);
+      return {
+        normalArr,
+        posArr,
+      };
+    });
+
     return () => (
       <div class={contentStyle}>
+        <div class="relative z-10">
+          {compsGroup.value.posArr.map((d) => {
+            const Comp: any = config.compUI[d.compKey]?.Component;
+            return Comp ? <Comp key={d.id} compId={d.id} /> : undefined;
+          })}
+        </div>
         {store.isEditMode ? (
           <Container
             style={store.designData.pageStyle}
             onDrop={(e: any) => actions.moveComp(e.removedIndex, e.addedIndex)}
             non-drag-area-selector={".drag-disable"}
           >
-            {store.designData.content.map((d) => {
-              const Comp: any = config.compUI[d.compKey]?.Component || ErrorComp;
+            {compsGroup.value.normalArr.map((d) => {
+              const Comp: any =
+                config.compUI[d.compKey]?.Component || ErrorComp;
               return (
                 <Draggable key={d.id}>
                   <Comp compId={d.id} />
@@ -44,6 +69,7 @@ export default defineUI({
 });
 
 const contentStyle = css`
+  position: relative;
   border: 1px solid transparent;
   @apply min-h-750px bg-white;
 

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

@@ -2,18 +2,35 @@ import hotkeys from "hotkeys-js";
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../..";
 
-type IHotKeyItem = { hotKey: string; action: (this: EditorModule) => void };
+type IHotKeyItem = { hotKey: string; action: (this: EditorModule, key:string) => void };
 
 export class HotKeyCtrl extends ModuleControl<EditorModule> {
   // 热键配置
   hotKeys = this.defineHotKeys([
+    // 切换到父组件
+    {
+      hotKey: "ctrl+up",
+      action() {
+        this.actions.pickParentComp(this.store.currCompId);
+      },
+    },
     // 删除当前组件
     {
       hotKey: "Backspace,del",
-      action() {
+      action(key:string) {
         this.actions.removeComp(this.store.currCompId);
       },
     },
+
+    {
+      hotKey: "q,w,a,s,d,e",
+      action(key:string) {
+        // this.actions.removeComp(this.store.currCompId);
+        // console.log("image hot key down", key);
+        this.actions.handleImageHotKey(key)
+      },
+    },
+
   ]);
 
   init() {
@@ -24,10 +41,11 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
       module.moduleName,
       function (event, handler) {
         event.preventDefault();
+        
         const hotAct = hotKeys.find((d) =>
           d.hotKey.split(",").includes(handler.key)
         );
-        hotAct?.action.call(module);
+        hotAct?.action.call(module, handler.key);
       }
     );
     hotkeys.setScope(module.moduleName);

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

@@ -6,9 +6,9 @@ export class DesignComp {
   id = nanoid();
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  layout?: Layout = {};
-  background?: Background = {};
-  children?: Record<string, DesignComp> = {};
+  layout: Layout = {};
+  background: Background = {};
+  children: Record<string, DesignComp> = {};
 
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;

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

@@ -12,22 +12,3 @@ export class DesignTemp {
     Object.assign(this, data);
   }
 }
-
-const a = {
-  content: [
-    {
-      id: "",
-      value: {},
-      background: {},
-      layout: {},
-      children: {
-        title: {
-          id: "",
-          value: {},
-          background: {},
-          layout: {},
-        },
-      },
-    },
-  ],
-};

src/modules/editor/helpers/index.ts

@@ -4,4 +4,11 @@ export const helpers = EditorModule.helper({
   designToNaturalSize(value: number) {
     return value / 100 + "rem";
   },
+  findParentComp(compId: string) {
+    const { content } = this.store.designData;
+    const comp = content.find((comp) => {
+      return Object.values(comp.children || {}).find((d) => d.id === compId);
+    });
+    return comp;
+  },
 });

src/modules/editor/index.ts

@@ -8,12 +8,14 @@ import { helpers } from "./helpers";
 import { https } from "./https";
 import { store } from "./stores";
 import { ImagePickController } from "./controllers/ImagePickerController";
+import { ImgCompActions } from "./actions/image";
+import { InputEventActions } from "./actions/input";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig(config);
   components = this.useComponents(components);
 
-  actions = this.createActions([initActions, editActions]);
+  actions = this.createActions([initActions, editActions, ImgCompActions, InputEventActions]);
   https = this.createHttps(https);
   store = this.createStore(store);
   helper = this.createHelper(helpers);

src/modules/editor/stores/index.ts

@@ -1,3 +1,4 @@
+import { nanoid } from "nanoid";
 import { EditorModule } from "..";
 import { DesignTemp } from "../defines/DesignTemp";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
@@ -53,15 +54,34 @@ export const store = EditorModule.store({
       this.store.initDesignCompMap();
       return comp;
     },
+    insertCompContainer(compKey: ICompKeys, container: DesignComp) {
+      const options = this.config.compUI[compKey].options;
+      const comp = new DesignComp({
+        compKey,
+        value: options?.value,
+        layout: options?.layout,
+        background: options?.background,
+        children: options?.children as any,
+      });
+      container.children || (container.children = {});
+      container.children[comp.id] = comp;
+      this.store.initDesignCompMap();
+      return comp;
+    },
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
     },
     deleteComp(compId: string) {
-      const index = this.store.designData.content.findIndex(
-        (d) => d.id === compId
-      );
-      if (index !== -1) {
-        this.store.designData.content.splice(index, 1);
+      const parentComp = this.helper.findParentComp(compId);
+      if (parentComp) {
+        delete parentComp.children[compId];
+      } else {
+        const index = this.store.designData.content.findIndex(
+          (d) => d.id === compId
+        );
+        if (index !== -1) {
+          this.store.designData.content.splice(index, 1);
+        }
       }
     },
     moveComp(selIndex: number, targetIndex: number) {