update compUI

src/modules/editor/actions/edit.ts

@@ -1,33 +1,30 @@
-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, index?: number) {
-    let designComp: DesignComp;
+    let compId: string;
     if (index === undefined && this.store.currComp?.compKey === "Container") {
-      designComp = this.store.insertCompContainer(compKey, this.store.currComp);
+      compId = this.store.insertCompContainer(compKey, this.store.currComp);
     } else {
-      designComp = this.store.insertDesignContent(compKey, index);
+      compId = this.store.insertDesignContent(compKey, index);
     }
-    this.actions.pickComp(designComp.id);
+    this.actions.pickComp(compId);
   },
   // 切换当前组件
   pickComp(compId: string) {
     this.store.setCurrComp(compId);
   },
+  // 切换到父组件
   pickParentComp(compId: string) {
-    const comp = this.helper.findParentComp(compId);
-    comp && this.store.setCurrComp(comp.id);
+    const pid = this.helper.findComp(compId)?.pid;
+    pid && this.store.setCurrComp(pid);
   },
   // 删除组件
   removeComp(compId: string) {
-    console.log("remove comp id=>", compId);
-      
     if (compId === this.store.currCompId) {
-      this.store.currCompId = "";
+      this.store.setCurrComp("");
     }
     this.store.deleteComp(compId);
   },

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

@@ -1,13 +1,16 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
+import { createCompHooks } from "../../defines/createCompHooks";
 import { GroupNumber } from "../../formItems/GroupNumber";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "容器",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {
     position: [0, 0],
   },

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

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

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

@@ -1,12 +1,15 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
+import { createCompHooks } from "../../defines/createCompHooks";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "文本",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: "请输入内容",
 });
 

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

@@ -1,12 +1,15 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
+import { createCompHooks } from "../../defines/createCompHooks";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "视频",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {
     url: "//infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/media/shoes.1c5c29ad.webm",
     ratio: 1,

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

@@ -1,13 +1,16 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
+import { createCompHooks } from "../../defines/createCompHooks";
 import { ImagePicker } from "../../formItems/ImagePicker";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "3D",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {
     url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
     openWindow: false,

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

@@ -1,15 +1,18 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
 import { GroupNumber } from "../../../formItems/GroupNumber";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {
-    img: {url: Dict_Imgs.Default},
+    img: { url: Dict_Imgs.Default },
     imgSize: [240, 240],
     desc: "描述",
   },

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

@@ -1,4 +1,3 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -14,16 +13,16 @@ export const Component = createUIComp({
     return () => (
       <div class="flex">
         <div class="flex-1">
-          <Text.Component compId={children.text?.id} />
+          <Text.Component compId={children.text} />
         </div>
         <div class="w-2.5rem relative">
           <Image.Component
-            compId={children.img1.id}
+            compId={children.img1}
             class="w-1.67rem h-3.06rem object-cover"
           />
           <div class="absolute bottom-0 right-1rem">
             <Image.Component
-              compId={children.img2.id}
+              compId={children.img2}
               class="w-3.17rem h-2.4rem object-cover"
             />
           </div>

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

@@ -1,34 +1,39 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片",
   thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
-    text: {
-      value: `<p><span style="color:#666;font-size:12px;"><strong>皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</strong></span></p><p><span style="color:#666;font-size:12px;"><strong>质量经久耐磨，性价比高， 经典之作用不过时。 潮流耐磨的2023年最新款皮革材料</strong></span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card11/img_1.jpg"),
-      },
-    },
-    img2: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card11/img_shoe.png"),
-      },
-    },
+    text: () =>
+      createCompId("Text", {
+        value: `<p><span style="color:#666;font-size:12px;"><strong>皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</strong></span></p><p><span style="color:#666;font-size:12px;"><strong>质量经久耐磨，性价比高， 经典之作用不过时。 潮流耐磨的2023年最新款皮革材料</strong></span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card11/img_1.jpg"),
+        },
+      }),
+    img2: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card11/img_shoe.png"),
+        },
+      }),
   },
 });
 

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

@@ -1,4 +1,3 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -12,20 +11,18 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+      <div>
+        <Text.Component compId={children.text} />
         <div class="w-6.22rem mx-auto mt-0.4rem">
           <Image.Component
-            compId={children.img1.id}
+            compId={children.img1}
             class="w-6.22rem h-6.22rem object-cover"
           />
         </div>
         <div>
-          <Text.Component compId={children.text2?.id} />
+          <Text.Component compId={children.text2} />
         </div>
       </div>
     );
   },
 });
-
-const rootStyles = css``;

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

@@ -1,34 +1,40 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片",
   thumbnail: require("@/assets/comps/Card12/thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
-    text: {
-      value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:20px;"><strong>P190-2#</strong></span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    text2: {
-      value: `<p style="text-align:center;">P190-2#</p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card12/img_1.jpg"),
-      },
-    },
+    text: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:20px;"><strong>P190-2#</strong></span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    text2: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;">P190-2#</p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card12/img_1.jpg"),
+        },
+      }),
   },
 });
 

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

@@ -1,4 +1,3 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -12,19 +11,17 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+      <div>
+        <Text.Component compId={children.text} />
         <Image.Component
-          compId={children.img1.id}
+          compId={children.img1}
           class="w-1.67rem h-3.06rem object-cover"
         />
         <Image.Component
-          compId={children.imgShoe.id}
+          compId={children.imgShoe}
           class="w-1.67rem h-3.06rem object-cover"
         />
       </div>
     );
   },
 });
-
-const rootStyles = css``;

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

@@ -1,34 +1,39 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片",
   thumbnail: require("@/assets/comps/Card13/thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
-    text: {
-      value: `<p ><span >两面开边珠，无漆皮光亮&nbsp;</span></p><p ><span >却比漆皮更耐用，不容易爆皮&nbsp;</span></p><p ><span >逛着干看起来更加高档&nbsp;</span></p><p ><span >丰富多彩的流行色水，增加无限魅力</span></p><p ><span >既有复古的韵味更有时下的潮流元素</span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card13/img_1.jpg"),
-      },
-    },
-    imgShoe: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card13/img_shoe.jpg"),
-      },
-    },
+    text: () =>
+      createCompId("Text", {
+        value: `<p ><span >两面开边珠，无漆皮光亮&nbsp;</span></p><p ><span >却比漆皮更耐用，不容易爆皮&nbsp;</span></p><p ><span >逛着干看起来更加高档&nbsp;</span></p><p ><span >丰富多彩的流行色水，增加无限魅力</span></p><p ><span >既有复古的韵味更有时下的潮流元素</span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card13/img_1.jpg"),
+        },
+      }),
+    imgShoe: () =>
+      createCompId("Text", {
+        value: {
+          url: require("@/assets/comps/Card13/img_shoe.jpg"),
+        },
+      }),
   },
 });
 

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

@@ -13,13 +13,13 @@ export const Component = createUIComp({
 
     return () => (
       <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+        <Text.Component compId={children.text} />
         <Image.Component
-          compId={children.img1.id}
+          compId={children.img1}
           class="w-1.67rem h-3.06rem object-cover"
         />
         <Image.Component
-          compId={children.imgShoe.id}
+          compId={children.imgShoe}
           class="w-1.67rem h-3.06rem object-cover"
         />
       </div>

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

@@ -1,34 +1,39 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片",
   thumbnail: require("@/assets/comps/Card14/thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
-    text: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">不需要过多的言语，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">让心灵感到平和</span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card14/img_1.jpg"),
-      },
-    },
-    imgShoe: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card14/img_shoe.jpg"),
-      },
-    },
+    text: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">不需要过多的言语，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">让心灵感到平和</span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card14/img_1.jpg"),
+        },
+      }),
+    imgShoe: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card14/img_shoe.jpg"),
+        },
+      }),
   },
 });
 

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

@@ -19,10 +19,10 @@ export const Component = createUIComp({
         }}
       >
         <div class="h-1.3rem">
-          <Text.Component compId={children.title?.id} />
+          <Text.Component compId={children.title} />
         </div>
         <Image.Component
-          compId={children.img1.id}
+          compId={children.img1}
           class="w-6.22rem h-6.22rem object-cover -ml-0.28rem"
         />
         <div class="absolute right-1rem top-3rem">
@@ -33,17 +33,17 @@ export const Component = createUIComp({
             }}
           >
             <div class="px-0.33rem py-0.06rem bg-light-50">
-              <Text.Component compId={children.colorText?.id} />
+              <Text.Component compId={children.colorText} />
             </div>
           </div>
         </div>
         <div class="flex flex-row-reverse mt-0.5rem mb-0.35rem">
           <div class="w-4.75rem py-0.55rem bg-light-50 text-center border-dark-200 border-2 border-solid leading-2">
-            <Text.Component compId={children.text?.id} />
+            <Text.Component compId={children.text} />
           </div>
         </div>
         <Image.Component
-          compId={children.img2.id}
+          compId={children.img2}
           class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover  -ml-0.28rem"
         />
       </div>

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

@@ -1,12 +1,16 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片",
   thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {
     themeColor: "#6D8D70",
   },
@@ -15,31 +19,34 @@ export const { options, useCompData } = createOptions({
     margin: "0.2rem 0.35rem",
   },
   children: {
-    title: {
-      value:
-        '<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>',
-    },
-    colorText: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">3#&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">铜绿色</span></p>`,
-    },
-    text: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">绿色是个舒服的颜色，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;给人无限的对未来的憧憬，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;不需要过多的言语，让心灵感到平和</span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    img2: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card15/img_shoe.png"),
-      },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Card15/img_1.jpg"),
-      },
-    },
+    title: () =>
+      createCompId("Text", {
+        value:
+          '<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>',
+      }),
+    colorText: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">3#&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">铜绿色</span></p>`,
+      }),
+    text: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">绿色是个舒服的颜色，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;给人无限的对未来的憧憬，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;不需要过多的言语，让心灵感到平和</span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    img2: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card15/img_shoe.png"),
+        },
+      }),
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Card15/img_1.jpg"),
+        },
+      }),
   },
 });
 

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

@@ -16,58 +16,56 @@ export const Component = createUIComp({
     return () => (
       <div class="relative">
         <div class={upStyle}>
-            <div class={style}>
+          <div class={style}>
             <Image.Component
-                style={{
+              style={{
                 width: designToNaturalSize(750),
                 height: designToNaturalSize(464),
-                }}
-                compId={children.bgImg.id}
+              }}
+              compId={children.bgImg}
             />
-            </div>
+          </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  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}
+          />
 
-            <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}
-            />
+          <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}
+          />
+
+          <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}
+          />
         </div>
 
         <div class="absolute top-0 left-0">
-          <Text.Component compId={children.text1.id} />
+          <Text.Component compId={children.text1} />
         </div>
 
-    
-        <Text.Component compId={children.text2.id}  />
+        <Text.Component compId={children.text2} />
       </div>
     );
   },
 });
 const upStyle = css`
-  position:relative;
-`
+  position: relative;
+`;
 const style = css`
   background: gray;
   clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);

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

@@ -1,45 +1,53 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { GroupNumber } from "../../../formItems/GroupNumber";
 
+const thumbnail =
+  "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685507733441_uVjZuw_thumbnail.png";
+
 export { Component } from "./component";
 
-const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685507733441_uVjZuw_thumbnail.png"
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片2",
-  thumbnail:thumbnail,
-  value: {
+  thumbnail,
+};
 
-  },
+export const { createComp, useCompData } = createCompHooks({
+  value: {},
   layout: {
     padding: "0 0 0.2rem 0",
   },
   children: {
-    bgImg: {
-      compKey: "Image",
-      value: { url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685527709350_MHQZdg_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",
+    bgImg: () =>
+      createCompId("Image", {
+        value: {
+          url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685527709350_MHQZdg_bg.png",
+          x: 0,
+          y: 0,
+          s: 1,
+        },
+      }),
+    item1: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: 26.5, y: -23.0, s: 4.05 },
+      }),
+    item2: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: -4.0, y: -13.5, s: 3.9 },
+      }),
+    item3: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: -34.0, y: -3.5, s: 4.0 },
+      }),
+    text1: () =>
+      createCompId("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: () =>
+      createCompId("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/customUI/Cards/Card3/component.tsx

@@ -15,8 +15,8 @@ export const Component = createUIComp({
     return () => (
       <div class="flex justify-between">
         <div class="flex flex-col justify-center">
-          <Text.Component compId={children.text1.id} />
-          <Text.Component class="mt-0.07rem" compId={children.text2.id} />
+          <Text.Component compId={children.text1} />
+          <Text.Component class="mt-0.07rem" compId={children.text2} />
 
           <div class="flex justify-between mt-0.07rem">
             <Image.Component
@@ -25,7 +25,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
               }}
-              compId={children.item1.id}
+              compId={children.item1}
             />
 
             <Image.Component
@@ -34,7 +34,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
               }}
-              compId={children.item2.id}
+              compId={children.item2}
             />
 
             <Image.Component
@@ -43,7 +43,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
               }}
-              compId={children.item3.id}
+              compId={children.item3}
             />
           </div>
         </div>
@@ -53,7 +53,7 @@ export const Component = createUIComp({
             width: designToNaturalSize(317),
             height: designToNaturalSize(240),
           }}
-          compId={children.bgImg.id}
+          compId={children.bgImg}
         />
       </div>
     );

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

@@ -1,44 +1,48 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { GroupNumber } from "../../../formItems/GroupNumber";
 
+const thumbnail =
+  "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685588983505_77BJpB_thumbnail.png";
+
 export { Component } from "./component";
 
-const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685588983505_77BJpB_thumbnail.png"
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片3",
-  thumbnail:thumbnail,
-  value: {
-  },
+  thumbnail: thumbnail,
+};
+
+export const { createComp, useCompData } = createCompHooks({
+  value: {},
   layout: {
     padding: "0.2rem",
   },
   children: {
-    bgImg: {
-      compKey: "Image",
-      value: { url: thumbnail, x: -25.00, y: -0.50, s: 2.1 },
-    },
-    item1: {
-        compKey: "Image",
-        value: { url: thumbnail, x: 37.00, y: -6, s: 11.00 },
-    },
-    item2: {
-        compKey: "Image",
-        value: { url: thumbnail, x: 24.00, y: -6, s: 11.15  },
-    },
-    item3: {
-        compKey: "Image",
-        value: { url: thumbnail, x: 11.00, y: -6, s: 11.70  },
-    },
-    text1: {
-        compKey: "Text",
-        value:  `<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
-    },
-    text2: {
-        compKey: "Text",
+    bgImg: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: -25.0, y: -0.5, s: 2.1 },
+      }),
+    item1: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: 37.0, y: -6, s: 11.0 },
+      }),
+    item2: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: 24.0, y: -6, s: 11.15 },
+      }),
+    item3: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: 11.0, y: -6, s: 11.7 },
+      }),
+    text1: () =>
+      createCompId("Text", {
+        value: `<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
+      }),
+    text2: () =>
+      createCompId("Text", {
         value: `复古羊巴 / 2023年新品`,
-    },
+      }),
   },
 });
 

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

@@ -15,27 +15,30 @@ export const Component = createUIComp({
     const { value, children } = useCompData(props.compId);
 
     return () => (
-    <div>
-      <Title3.Component   compId={children.title.id} />
-      <div class="flex">
-        <div class="">
-            <Image.Component class="overflow-hidden"
-                        style={{
-                            width: designToNaturalSize(250),
-                            height: designToNaturalSize(278),
-                        }}
-                        compId={children.bgImg.id}
+      <div>
+        <Title3.Component compId={children.title} />
+        <div class="flex">
+          <div class="">
+            <Image.Component
+              class="overflow-hidden"
+              style={{
+                width: designToNaturalSize(250),
+                height: designToNaturalSize(278),
+              }}
+              compId={children.bgImg}
             />
+          </div>
+          <div
+            class="flex flex-col justify-center"
+            style={{ marginLeft: designToNaturalSize(49) }}
+          >
+            <Text.Component compId={children.text1} />
+          </div>
         </div>
-        <div class="flex flex-col justify-center" style={{marginLeft: designToNaturalSize(49)}}>
-           <Text.Component compId={children.text1.id} />
-        </div>
-        </div>
-        </div>
+      </div>
     );
   },
 });
 const upStyle = css`
-  position:relative;
-  
-`
+  position: relative;
+`;

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

@@ -1,41 +1,46 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { GroupNumber } from "../../../formItems/GroupNumber";
 
+const thumbnail =
+  "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685592084017_Wu5DW5_thumbnail.png";
+
 export { Component } from "./component";
 
-const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685592084017_Wu5DW5_thumbnail.png"
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片4",
-  thumbnail:thumbnail,
-  value: {
-  },
+  thumbnail: thumbnail,
+};
+
+export const { createComp, useCompData } = createCompHooks({
+  value: {},
   layout: {
     padding: "0.2rem",
   },
   children: {
-    bgImg: {
-      compKey: "Image",
-      value: { url: thumbnail, x: 27.50, y:-6.50, s: 3.50 },
-    },
-    title: {
-        compKey: "Title3",
+    bgImg: () =>
+      createCompId("Image", {
+        value: { url: thumbnail, x: 27.5, y: -6.5, s: 3.5 },
+      }),
+    title: () =>
+      createCompId("Title3", {
         layout: {
-            margin: "0 0 0.4rem 0"
+          margin: "0 0 0.4rem 0",
         },
         children: {
-            title: {
-              value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
-            },
-            subtitle: {
-                value: `<p style="text-align:center;">/ Product Details /</p>`,
-            },
+          title: createCompId("Text", {
+            value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
+          }),
+          subtitle: createCompId("Text", {
+            value: `<p style="text-align:center;">/ Product Details /</p>`,
+          }),
         },
-    },
-    text1: {
-        compKey: "Text",
-        value:  `<p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>名称: &nbsp; P190（注塑）</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>规格: &nbsp; 52英寸</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>厚度: &nbsp; 1.0mm+0.05mm</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>底材: &nbsp; 鹿皮绒</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>用途: &nbsp; 凉鞋、跟鞋、高更鞋、</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;时尚休闲鞋等</strong></span></p>`,
-    }
+      }),
+    text1: () =>
+      createCompId("Text", {
+        value: `<p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>名称: &nbsp; P190（注塑）</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>规格: &nbsp; 52英寸</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>厚度: &nbsp; 1.0mm+0.05mm</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>底材: &nbsp; 鹿皮绒</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>用途: &nbsp; 凉鞋、跟鞋、高更鞋、</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;时尚休闲鞋等</strong></span></p>`,
+      }),
   },
 });
 

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

@@ -14,22 +14,23 @@ export const Component = createUIComp({
     const { value, children } = useCompData(props.compId);
 
     return () => (
-        <div class="relative w-full">
-            <div class="!absolute w-full h-full flex justify-center items-center">
-                <Text.Component class="!absolute w-full" compId={children.text1.id} />
-            </div>
-            <div class="flex justify-center">
-                <Image.Component 
-                            style={{
-                                width: designToNaturalSize(368),
-                                height: designToNaturalSize(275),
-                            }}
-                            compId={children.bgImg.id}  />
-            </div>
+      <div class="relative w-full">
+        <div class="!absolute w-full h-full flex justify-center items-center">
+          <Text.Component class="!absolute w-full" compId={children.text1} />
         </div>
+        <div class="flex justify-center">
+          <Image.Component
+            style={{
+              width: designToNaturalSize(368),
+              height: designToNaturalSize(275),
+            }}
+            compId={children.bgImg}
+          />
+        </div>
+      </div>
     );
   },
 });
 const upStyle = css`
-  position:relative;
-`
+  position: relative;
+`;

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

@@ -1,30 +1,32 @@
-
-
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { GroupNumber } from "../../../formItems/GroupNumber";
 
-export { Component } from "./component";
+const thumbnail =
+  "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685607488598_3mmBXh_thumbnail.png";
 
-const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685607488598_3mmBXh_thumbnail.png"
+export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片5",
-  thumbnail:thumbnail,
-  value: {
-  },
-  layout: {
+  thumbnail: thumbnail,
+};
 
-  },
+export const { createComp, useCompData } = createCompHooks({
+  value: {},
+  layout: {},
   children: {
-    bgImg: {
-      compKey: "Image",
-      value: { url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685609522134_nGPo9k_2.png" },
-    },
-    text1: {
-        compKey: "Text",
-        value:  `<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:52px;">F A SH I O N</span></p>`,
-    }
+    bgImg: () =>
+      createCompId("Image", {
+        value: {
+          url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685609522134_nGPo9k_2.png",
+        },
+      }),
+    text1: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:52px;">F A SH I O N</span></p>`,
+      }),
   },
 });
 

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

@@ -1,7 +1,6 @@
-import { Dict_Imgs } from "@/dict";
 import { watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+import { useChildCreator, useCompData } from ".";
 import { useEditor } from "../../../../..";
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
@@ -12,19 +11,18 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { helper } = useEditor();
-    const { value } = useCompData(props.compId);
+    const { value, children } = useCompData(props.compId);
+    const createList = useChildCreator("list");
 
     watch(
       () => [value.total],
       () => {
-        const { total, list } = value;
-        const offset = total - list.length;
+        const { total } = value;
+        const offset = total - children.list.length;
         if (offset > 0) {
-          Array.from({ length: offset }, () => {
-            list.push({ img: Dict_Imgs.Default, desc: "描述" });
-          });
+          children.list.push(...createList(offset));
         } else {
-          list.splice(total, offset * -1);
+          children.list.splice(total, offset * -1);
         }
       }
     );
@@ -37,13 +35,13 @@ export const Component = createUIComp({
           gridGap: helper.designToNaturalSize(value.gap),
         }}
       >
-        {value.list.map((d, i) => (
+        {children.list.map((d, i) => (
           <div key={i}>
             <Image.Component
               style={{ height: helper.designToNaturalSize(value.imgHeight) }}
-              v-model={[d.img, "value"]}
+              compId={d.img}
             />
-            {value.showDesc && <Text.Component v-model={[d.desc, "value"]} />}
+            {value.showDesc && <Text.Component compId={d.desc} />}
           </div>
         ))}
       </div>

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

@@ -1,23 +1,42 @@
 import { Dict_Imgs } from "@/dict";
-import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 import { InputNumber } from "ant-design-vue";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "卡片列表",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData, useChildCreator } = createCompHooks({
   value: {
     gap: 10,
     columns: 3,
     total: 3,
     imgHeight: 120,
-    showDesc: false,
-    list: Array.from({ length: 3 }, () => ({
-      img: Dict_Imgs.Default,
-      desc: "描述",
-    })),
+    showDesc: true,
+  },
+  children: {
+    list: (length = 3) =>
+      Array.from({ length }, (_, i) => ({
+        img: createCompId("Image", {
+          value: {
+            url: Dict_Imgs.Default,
+          },
+        }),
+        desc: createCompId("Text", {
+          value: "描述" + ++i,
+        }),
+      })),
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: Dict_Imgs.Default,
+        },
+      }),
   },
 });
 

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

@@ -1,51 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { watch } from "vue";
-import { string } from "vue-types";
-import { useChildCreator, useCompData } from ".";
-import { useEditor } from "../../../../..";
-import { Image, Image2, Text } from "../../../basicUI";
-import { createUIComp } from "../../../defines/createUIComp";
-
-export const Component = createUIComp({
-  props: {
-    compId: string().isRequired,
-  },
-  setup(props) {
-    const { helper } = useEditor();
-    const comp = useCompData(props.compId);
-    const createList = useChildCreator("list");
-
-    watch(
-      () => [comp.value.total],
-      () => {
-        const { total } = comp.value;
-        const offset = total - comp.children.list.length;
-        if (offset > 0) {
-          comp.children.list.push(...createList(offset));
-        } else {
-          comp.children.list.splice(total, offset * -1);
-        }
-      }
-    );
-
-    return () => (
-      <div
-        class="grid"
-        style={{
-          gridTemplateColumns: `repeat(${value.columns}, 1fr)`,
-          gridGap: helper.designToNaturalSize(value.gap),
-        }}
-      >
-        {value.list.map((d, i) => (
-          <div key={i}>
-            <Image2.Component
-              style={{ height: helper.designToNaturalSize(value.imgHeight) }}
-              compId={d.id}
-            />
-            {value.showDesc && <Text.Component v-model={[d.desc, "value"]} />}
-          </div>
-        ))}
-      </div>
-    );
-  },
-});

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

@@ -1,57 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { InputNumber } from "ant-design-vue";
-import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { CompFactory, createCompHooks } from "../../../defines/createCompHooks";
-
-export { Component } from "./component";
-
-export const config = {
-  name: "卡片列表",
-  thumbnail: Dict_Imgs.Default,
-};
-
-export const { createComp, useCompData, useChildCreator } = createCompHooks({
-  value: {
-    gap: 10,
-    columns: 3,
-    total: 3,
-    imgHeight: 120,
-    showDesc: true,
-  },
-  children: {
-    list: (length = 3) =>
-      Array.from({ length }, () => ({
-        img: CompFactory.create("Image"),
-        desc: CompFactory.create("Text"),
-      })),
-    img1: () => CompFactory.create("Image"),
-  },
-});
-
-export const Form = createAttrsForm([
-  {
-    label: "卡片总数",
-    dataIndex: "value.total",
-    component: InputNumber,
-  },
-  {
-    label: "每行数量",
-    dataIndex: "value.columns",
-    component: InputNumber,
-  },
-  {
-    label: "卡片间距",
-    dataIndex: "value.gap",
-    component: InputNumber,
-  },
-  {
-    label: "图片高度",
-    dataIndex: "value.imgHeight",
-    component: InputNumber,
-  },
-  {
-    label: "显示描述",
-    dataIndex: "value.showDesc",
-    component: "Switch",
-  },
-]);

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -23,7 +23,7 @@ export const Component = createUIComp({
     return () => {
       return (
         <div class={compStyle} ref={elRef}>
-          <Text.Component compId={children.title.id} />
+          <Text.Component compId={children.title} />
           <div class="arrow">↓</div>
         </div>
       );

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

@@ -1,24 +1,29 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "封面",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   background: {
     image:
       "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
   },
   children: {
-    title: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">新科技反光面料</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">引领潮流新风尚</span></p><p style="text-align:center;">&nbsp;</p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:16px;">时尚 ｜ 精致 ｜ 百搭</span></p>`,
-      layout: {
-        margin: "1.4rem auto 0",
-      },
-    },
+    title: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">新科技反光面料</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">引领潮流新风尚</span></p><p style="text-align:center;">&nbsp;</p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:16px;">时尚 ｜ 精致 ｜ 百搭</span></p>`,
+        layout: {
+          margin: "1.4rem auto 0",
+        },
+      }),
   },
 });
 

src/modules/editor/components/CompUI/customUI/Covers/Cover2/component.tsx

@@ -16,33 +16,30 @@ export const Component = createUIComp({
         <div class="bg flex flex-col"></div>
         <div class="relative z-1 overflow-hidden">
           <div class="mt-0.4rem h-1.2rem text-30px text-center text_main">
-            <Text.Component compId={children.title.id} />
+            <Text.Component compId={children.title} />
           </div>
           <div class="h-10.22rem mt-10px flex flex-1">
             <div class="ml-0.64rem">
               <Image.Component
-                compId={children.img1.id}
+                compId={children.img1}
                 class="w-4.5rem h-10.22rem object-cover"
               />
             </div>
             <div class="ml-0.3rem flex flex-col justify-between">
               <Image.Component
-                compId={children.img2.id}
+                compId={children.img2}
                 class="w-1.67rem h-3.06rem object-cover"
               />
               <Image.Component
-                compId={children.img3.id}
+                compId={children.img3}
                 class="w-1.67rem h-2.08rem object-cover"
               />
             </div>
           </div>
         </div>
         <div class="absolute top-5rem right-1.1rem text-stroke-dark-900 z-2">
-          <Text.Component compId={children.text1?.id} />
-          <Text.Component
-            class="mt-1rem text-right"
-            compId={children.text2?.id}
-          />
+          <Text.Component compId={children.text1} />
+          <Text.Component class="mt-1rem text-right" compId={children.text2} />
           <div class="line"></div>
         </div>
       </div>

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

@@ -1,46 +1,51 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "标题",
   thumbnail: require("@/assets/comps/Cover2/thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   children: {
-    img1: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Cover2/img_1.png"),
-        x: 0,
-        y: 0,
-        s: 1,
-      },
-    },
-    img2: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Cover2/img_2.jpg"),
-      },
-    },
-    img3: {
-      compKey: "Image",
-      value: {
-        url: require("@/assets/comps/Cover2/img_3.jpg"),
-      },
-    },
-    title: {
-      compKey: "Text",
-      value: `<p style="text-align:center;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FasHION</span></p><p>&nbsp;</p>`,
-    },
-    text1: {
-      compKey: "Text",
-      value: `<p><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;"><strong>全新 &nbsp; &nbsp; 时尚 &nbsp; &nbsp;</strong></span><span style="color:hsl(0,0%,0%);font-size:20px;"><strong>简约</strong></span></p>`,
-    },
-    text2: {
-      compKey: "Text",
-      value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
-    },
+    img1: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Cover2/img_1.png"),
+          x: 0,
+          y: 0,
+          s: 1,
+        },
+      }),
+    img2: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Cover2/img_2.jpg"),
+        },
+      }),
+    img3: () =>
+      createCompId("Image", {
+        value: {
+          url: require("@/assets/comps/Cover2/img_3.jpg"),
+        },
+      }),
+    title: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FasHION</span></p><p>&nbsp;</p>`,
+      }),
+    text1: () =>
+      createCompId("Text", {
+        value: `<p><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;"><strong>全新 &nbsp; &nbsp; 时尚 &nbsp; &nbsp;</strong></span><span style="color:hsl(0,0%,0%);font-size:20px;"><strong>简约</strong></span></p>`,
+      }),
+    text2: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
+      }),
   },
 });
 

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

@@ -1,12 +1,15 @@
 import { InputNumber } from "ant-design-vue";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "文字",
   thumbnail: require("./thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   layout: { margin: "0.2rem 0.3rem", padding: " 0 0.2rem" },
   value: {
     gap: 20,

src/modules/editor/components/CompUI/customUI/Titles/Title1/component.tsx

@@ -12,13 +12,13 @@ export const Component = createUIComp({
     const { value, children } = useCompData(props.compId);
     return () => (
       <>
-        <Text.Component compId={children.title.id} />
+        <Text.Component compId={children.title} />
         <Text.Component
           class={compStyle}
           style={{
             "--theme-color": value.themeColor,
           }}
-          compId={children.subTitle.id}
+          compId={children.subTitle}
         />
       </>
     );

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

@@ -1,30 +1,36 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "标题",
   thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {
     themeColor: "#666666",
   },
   children: {
-    title: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
-    subTitle: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 30%);font-size:16px;">2023主推新品</span></p>`,
-      layout: {
-        textAlign: "center",
-        margin: "0.1rem auto 0",
-      },
-    },
+    title: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
+    subTitle: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 30%);font-size:16px;">2023主推新品</span></p>`,
+        layout: {
+          textAlign: "center",
+          margin: "0.1rem auto 0",
+        },
+      }),
   },
 });
 

src/modules/editor/components/CompUI/customUI/Titles/Title2/component.tsx

@@ -18,7 +18,7 @@ export const Component = createUIComp({
         </div>
         <Text.Component
           class="px-0.5rem max-w-4.8rem"
-          compId={children.title?.id}
+          compId={children.title}
         />
         <div class={cx(border, "right w-0.5rem text-0.34rem")}>
           &frasl; &frasl;

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

@@ -1,22 +1,27 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "标题",
   thumbnail: require("./thumbnail.jpg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
-    title: {
-      value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`,
-      layout: {
-        textAlign: "center",
-      },
-    },
+    title: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`,
+        layout: {
+          textAlign: "center",
+        },
+      }),
   },
 });
 

src/modules/editor/components/CompUI/customUI/Titles/Title3/component.tsx

@@ -1,4 +1,3 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Text } from "../../../basicUI";
@@ -13,15 +12,9 @@ export const Component = createUIComp({
 
     return () => (
       <div class="flex flex-col items-center">
-        <Text.Component
-          class=""
-          compId={children.title?.id}
-        />
-        <Text.Component
-          class=""
-          compId={children.subtitle?.id}
-        />
+        <Text.Component class="" compId={children.title} />
+        <Text.Component class="" compId={children.subtitle} />
       </div>
     );
   },
-});
+});

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

@@ -1,26 +1,32 @@
 //https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685591011649_FHii9K_thumbnail.png
 
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
-const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685591011649_FHii9K_thumbnail.png";
 
-export const { options, useCompData } = createOptions({
+export const options = {
   name: "标题3",
-  thumbnail: thumbnail,
+  thumbnail:
+    "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685591011649_FHii9K_thumbnail.png",
+};
+
+export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.2rem",
   },
   children: {
-    title: {
-      value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
-    },
-    subtitle: {
+    title: () =>
+      createCompId("Text", {
+        value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
+      }),
+    subtitle: () =>
+      createCompId("Text", {
         value: `<p style="text-align:center;">/ Product Details /</p>`,
-    },
+      }),
   },
 });
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([]);

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

@@ -11,60 +11,35 @@ type IOptions<T, C> = {
   children?: C;
 };
 
-function createComp(
-  defaultOpts: any,
-  opts: any,
-  onCreate: (comp: DesignComp) => void
+export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
+  defaultOpts: IOptions<T, C>
 ) {
-  const defOpts = cloneDeep(defaultOpts);
-  if (defOpts.children) {
-    Object.entries(defOpts.children).forEach(([key, fn]: any) => {
-      defOpts.children[key] = fn();
-    });
+  function createComp(opts: any) {
+    const defData: any = cloneDeep(defaultOpts);
+    if (defData.children) {
+      Object.entries(defData.children).forEach(([key, fn]: any) => {
+        defData.children[key] = fn();
+      });
+    }
+    const options = Object.assign(defData, opts);
+    return new DesignComp(options);
   }
-  const options = Object.assign(defOpts, opts);
-  const comp = new DesignComp(options);
-  onCreate(comp);
-  return comp.id;
-}
 
-function useCompData(compId: string) {
-  const editor = useEditor();
-  let data = editor.store.designCompMap.get(compId);
-  return data as any;
-}
+  function useCompData(compId: string) {
+    const editor = useEditor();
+    const comp = editor.store.designData.compMap[compId];
+    return comp as {
+      value: T;
+      children: { [name in keyof C]: ReturnType<C[name]> };
+    };
+  }
 
-export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
-  defaultOpts: IOptions<T, C>
-) {
   function useChildCreator(key: keyof C) {
     //
   }
   return {
-    createComp: createComp.bind(null, defaultOpts),
-    useCompData: useCompData as (compId: string) => {
-      id: string;
-      value: T;
-      children: DeepObj<{ [name in keyof C]: ReturnType<C[name]> }>;
-    },
+    createComp,
+    useCompData,
     useChildCreator,
   };
 }
-
-export interface CompType {
-  id: string;
-}
-
-export class CompFactory {
-  static create(type: string): CompType {
-    return { id: type };
-  }
-}
-
-type DeepObj<T> = T extends object
-  ? T extends CompType
-    ? string
-    : T
-  : T extends Array<infer P>
-  ? DeepObj<P>[]
-  : T;

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

@@ -0,0 +1,22 @@
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { CompUI } from "..";
+
+const cacheCompArr: DesignComp[] = [];
+
+export function addCacheToMap(obj: Record<string, DesignComp>) {
+  cacheCompArr.forEach((comp) => {
+    obj[comp.id] = comp;
+  });
+  cacheCompArr.length = 0;
+}
+
+export function createCompId(
+  compKey: keyof typeof CompUI,
+  options?: any
+): string {
+  const comp = CompUI[compKey].createComp(
+    Object.assign(options || {}, { compKey })
+  );
+  cacheCompArr.push(comp);
+  return comp.id;
+}

src/modules/editor/config/index.ts

@@ -1,7 +0,0 @@
-import { Dict_Apis } from "@/dict";
-
-export default {
-  httpConfig: {
-    baseURL: Dict_Apis.promotion,
-  },
-};

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

@@ -3,12 +3,13 @@ import { Background, ICompKeys, Layout } from "../../typings";
 import { cloneDeep } from "lodash";
 
 export class DesignComp {
+  declare pid: string;
   id = nanoid();
   compKey: ICompKeys = "Text";
   value: any = undefined;
   layout: Layout = {};
   background: Background = {};
-  children: Record<string, DesignComp> = {};
+  children: Record<string, any> = {};
 
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;

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

@@ -4,11 +4,11 @@ export class DesignTemp {
   _id!: string;
   title = "";
   pageStyle?: any;
-  content: DesignComp[] = [];
+  content: string[] = [];
+  compMap: { [compId: string]: DesignComp } = {};
 
   constructor(data?: Partial<DesignTemp>) {
     if (!data) return;
-    data.content = data.content?.map((d) => new DesignComp(d)) || [];
     Object.assign(this, data);
   }
 }

src/modules/editor/helpers/index.ts

@@ -1,14 +1,22 @@
 import { EditorModule } from "..";
+import { DesignComp } from "../defines/DesignTemp/DesignComp";
 
 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;
+  findComp(compId: string) {
+    const { compMap } = this.store.designData;
+    const comp = compMap[compId];
+    if (comp) return comp;
+  },
+  findParentComp(compId: string): DesignComp | undefined {
+    const comp = this.helper.findComp(compId);
+    if (comp?.pid) {
+      return this.helper.findComp(comp?.pid);
+    }
+  },
+  findRootComp() {
+    return this.store.designData.compMap["root"];
   },
 });

src/modules/editor/index.ts

@@ -1,21 +1,30 @@
+import { Dict_Apis } from "@/dict";
 import { ModuleRoot } from "queenjs";
 import { editActions } from "./actions/edit";
+import { ImgCompActions } from "./actions/image";
 import { initActions } from "./actions/init";
+import { InputEventActions } from "./actions/input";
 import components from "./components";
-import config from "./config";
 import { HistoryCtrl } from "./controllers/HistoryCtrl";
+import { ImagePickController } from "./controllers/ImagePickerController";
 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);
+  config = this.setConfig({
+    httpConfig: {
+      baseURL: Dict_Apis.promotion,
+    },
+  });
   components = this.useComponents(components);
 
-  actions = this.createActions([initActions, editActions, ImgCompActions, InputEventActions]);
+  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,5 +1,8 @@
 import { EditorModule } from "..";
-import { CompUI } from "../components/CompUI";
+import {
+  addCacheToMap,
+  createCompId,
+} from "../components/CompUI/defines/createCompId";
 import { DesignTemp } from "../defines/DesignTemp";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
 import { EditorMode, ICompKeys } from "../typings";
@@ -9,87 +12,67 @@ export const store = EditorModule.store({
     mode: "edit" as EditorMode,
     currCompId: "",
     designData: new DesignTemp(),
-    designCompMap: new Map<string, DesignComp>(),
   }),
   getters: {
     isEditMode(state) {
       return state.mode === "edit";
     },
     currComp(state) {
-      return state.designCompMap.get(state.currCompId);
+      return state.designData.compMap[state.currCompId];
     },
   },
   actions: {
-    setCompData(id: string, data:any) {
-      this.store.designCompMap.set(id, data)
+    setCompData(id: string, data: any) {
+      this.store.designData.compMap[id] = data;
     },
     setMode(v: EditorMode) {
       this.store.mode = v;
     },
-    initDesignCompMap() {
-      const { designData, designCompMap } = this.store;
-      const arr = [...designData.content];
-      designCompMap.clear();
-      while (arr.length) {
-        const item = arr[0];
-        designCompMap.set(item.id, item);
-        arr.shift();
-        if (item.children) {
-          arr.unshift(...Object.values(item.children));
-        }
-      }
-    },
     initDesignData(data: Partial<DesignTemp>) {
       this.store.designData = new DesignTemp(data);
-      this.store.initDesignCompMap();
     },
     insertDesignContent(compKey: ICompKeys, index?: number) {
       index === undefined && (index = this.store.designData.content.length);
-      const options = CompUI[compKey].options;
-      const comp = new DesignComp({
-        compKey,
-        value: options?.value,
-        layout: options?.layout,
-        background: options?.background,
-        children: options?.children as any,
-      });
-      this.store.designData.content.splice(index, 0, comp);
-      this.store.initDesignCompMap();
-      return comp;
+      const compId = createCompId(compKey);
+      addCacheToMap(this.store.designData.compMap);
+      this.store.designData.content.splice(index, 0, compId);
+      return compId;
     },
     insertCompContainer(compKey: ICompKeys, container: DesignComp) {
-      const options = CompUI[compKey].options;
-      const comp = new DesignComp({
-        compKey,
-        value: options?.value,
-        layout: options?.layout,
-        background: options?.background,
-        children: options?.children as any,
-      });
+      const compId = createCompId(compKey);
+      addCacheToMap(this.store.designData.compMap);
       container.children || (container.children = {});
-      container.children[comp.id] = comp;
-      this.store.initDesignCompMap();
-      return comp;
+      container.children[compId] = compId;
+      return compId;
     },
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
     },
     deleteComp(compId: string) {
+      const { content, compMap } = this.store.designData;
       const parentComp = this.helper.findParentComp(compId);
+      let deleteOK = false;
       if (parentComp) {
-        console.log("find parent comp=>", parentComp);
-        compId = parentComp?.id;
-        // delete parentComp.children[compId];
+        // 只能删除children中以compId作为key的组件
+        if (parentComp.children?.[compId]) {
+          delete parentComp.children[compId];
+          deleteOK = true;
+        }
+      } else {
+        const index = content.findIndex((id) => id === compId);
+        if (index >= 0) {
+          content.splice(index, 1);
+          deleteOK = true;
+        }
       }
 
-      //  else {
-      const index = this.store.designData.content.findIndex(
-        (d) => d.id === compId
-      );
-      if (index !== -1) {
-        this.store.designData.content.splice(index, 1);
+      if (deleteOK) {
+        const comp = this.helper.findComp(compId);
+        const ids = flatCompChildIds(comp?.children || {});
+        [compId, ...ids].forEach((id) => {
+          delete compMap[id];
+        });
       }
-      // }
     },
     moveComp(selIndex: number, targetIndex: number) {
       const { content } = this.store.designData;
@@ -98,3 +81,14 @@ export const store = EditorModule.store({
     },
   },
 });
+
+function flatCompChildIds(obj: object, ids: string[] = []) {
+  Object.values(obj).forEach((item) => {
+    if (item instanceof Object) {
+      flatCompChildIds(item, ids);
+    } else if (typeof item === "string") {
+      ids.push(item);
+    }
+  });
+  return ids;
+}