update

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

@@ -1,49 +1,51 @@
 import { css, cx } from "@linaria/core";
 import { string } from "vue-types";
-import { useCompData } from ".";
+
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
+import { useCompData } from "../../../defines/hook";
+import { CompCover2Obj } from ".";
 
 export const Component = createUIComp({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { children } = useCompData<CompCover2Obj>(props.compId);
 
     return () => (
       <div class={cx(rootStyles, "overflow-hidden")}>
         <div class="bg flex flex-col"></div>
         <div class="relative z-1 overflow-hidden">
           <div class="mt-20px h-60px text-30px text-center text_main">
-            <Text.Component compId={children.title} />
+            <Text.Component compId={children.default[3]} />
           </div>
           <div class="h-511px mt-10px flex flex-1">
             <div class="ml-32px">
               <Image.Component
-                compId={children.img1}
+                compId={children.default[0]}
                 class="w-22.5px h-511px object-cover"
               />
             </div>
             <div class="ml-15px flex flex-col justify-between">
               <Image.Component
-                compId={children.img2}
+                compId={children.default[1]}
                 class="w-83.5px h-153px object-cover"
               />
               <Image.Component
-                compId={children.img3}
+                compId={children.default[2]}
                 class="w-83.5px h-104px object-cover"
               />
             </div>
           </div>
         </div>
-        <div class="absolute top-250px right-55px text-stroke-dark-900 z-2">
-          <Text.Component compId={children.text1} />
+        {/* <div class="absolute top-250px right-55px text-stroke-dark-900 z-2">
+          <Text.Component compId={children.default[4]} />
           <div class={"pt-50px"}>
             <Text.Component compId={children.text2} />
           </div>
           <div class="line"></div>
-        </div>
+        </div> */}
       </div>
     );
   },

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

@@ -1,6 +1,8 @@
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createCompHooks } from "../../../defines/createCompHooks";
-import { createCompId } from "../../../defines/createCompId";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
+import { CompImageObj } from "../../../basicUI/Image2";
+import { CompTextObj } from "../../../basicUI/Text";
 
 export { Component } from "./component";
 
@@ -9,64 +11,80 @@ export const options = {
   thumbnail: require("@/assets/comps/Cover2/thumbnail.jpg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {},
-  layout: {
-    size: [750, 1200],
-  },
-  children: {
-    img1: () =>
-      createCompId("Image", {
-        value: {
-          url: require("@/assets/comps/Cover2/img_1.png"),
-          x: 0,
-          y: 0,
-          s: 1,
-        },
-        layout: {
-          size: [451, 1022],
-        },
-      }),
-    img2: () =>
-      createCompId("Image", {
-        value: {
-          url: require("@/assets/comps/Cover2/img_2.jpg"),
-        },
-        layout: {
-          size: [167, 306],
-        },
-      }),
-    img3: () =>
-      createCompId("Image", {
-        value: {
-          url: require("@/assets/comps/Cover2/img_3.jpg"),
-        },
-        layout: {
-          size: [167, 208],
-        },
-      }),
-    title: () =>
-      createCompId("Text", {
-        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FASHION</span></p>`,
-        layout: {
-          size: [750, 126],
-        },
-      }),
-    text1: () =>
-      createCompId("Text", {
-        value: `<p style="line-height:1.5;"><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>`,
-        layout: {
-          size: [380, 200],
-        },
-      }),
-    text2: () =>
-      createCompId("Text", {
-        value: `<p style="text-align:right;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
-        layout: {
-          size: [380, 40],
-        },
-      }),
-  },
-});
+const Cover2Value = {}
+
+export class CompCover2Obj extends DesignCompObj<typeof Cover2Value> {
+  value = RxValue.create({
+     ...Cover2Value
+  })
+  constructor() {
+    super();
+    this.compKey = "Cover2";
+    this.layout.size = [750, 1200]
+  }
+}
+ 
+export function createComp() {
+  const out = new CompCover2Obj();
+  
+
+  const img1 = new CompImageObj();
+  img1.value.url = require("@/assets/comps/Cover2/img_1.png");
+  img1.layout.size = [451, 1022];
+
+
+  const img2 = new CompImageObj();
+  img2.value.url = require("@/assets/comps/Cover2/img_2.jpg")
+  img2.layout.size =  [167, 306];
+
+  const img3 = new CompImageObj();
+  img3.value.url = require("@/assets/comps/Cover2/img_3.jpg")
+  img3.layout.size =  [167, 208];
+
+  const tile = new CompTextObj();
+  tile.value.text =  `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FASHION</span></p>`;
+  tile.layout.size = [750, 126];
+
+  //@ts-ignore
+  out.children.objs = [img1, img2, img3, tile];
+  //@ts-ignore
+  out.children.default = out.children.objs.map(item=>item.id);
+  return out;
+}
+
+
+const createCompCover2 = createComp;
+
+export {createCompCover2}
+
+// export const { createComp, useCompData } = createCompHooks({
+//   value: {},
+//   layout: {
+//     size: [750, 1200],
+//   },
+//   children: {
+//     title: () =>
+//       createCompId("Text", {
+//         value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FASHION</span></p>`,
+//         layout: {
+//           size: [750, 126],
+//         },
+//       }),
+//     text1: () =>
+//       createCompId("Text", {
+//         value: `<p style="line-height:1.5;"><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>`,
+//         layout: {
+//           size: [380, 200],
+//         },
+//       }),
+//     text2: () =>
+//       createCompId("Text", {
+//         value: `<p style="text-align:right;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
+//         layout: {
+//           size: [380, 40],
+//         },
+//       }),
+//   },
+// });
 
 export const Form = createAttrsForm([]);

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

@@ -48,6 +48,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
         thumbnail: value.options.thumbnail,
         Component: markRaw(value.Component),
         Form: markRaw(value.Form),
+        //@ts-ignore
         createComp: value.createComp,
       });
     });

src/modules/editor/module/actions/edit.tsx

@@ -134,7 +134,15 @@ export const editActions = EditorModule.action({
     let currCard = page.currStreamCard;
 
     const currComp = createObj({compKey}, false);
-
+    debugger
+    //@ts-ignore
+    const objs :any[] = currComp.children.objs || [];
+    if (objs.length > 0) {
+      objs.forEach(o=>{
+        page.designData.compMap[o.id] = o;
+        page.setCompPid(o.id, currComp.id);
+      })
+    }
     page.designData.compMap[currComp.id] = currComp;
     page.setCompPid(currComp.id, currCard.id);
     const childIds = [...currCard.children.default];
@@ -405,7 +413,7 @@ export const editActions = EditorModule.action({
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     ctrlState.cardId = page.currStreamCardId;
     ctrlState.type = 3;
-    
+
   },
   ctrlx() {
     //console.log("ctrlv ", this.store.selected);

src/modules/editor/objects/DesignTemp/factory.ts

@@ -19,6 +19,7 @@ import { HistoryController } from "../../controllers/ReactCtrl/history";
 import { ICompKeys } from "../../typings";
 import { DesignComp, DesignCompObj } from "./DesignComp";
 import { CompCardListObj } from "../../components/CompUI/customUI/Cards/CardList";
+import { CompCover2Obj, createCompCover2 } from "../../components/CompUI/customUI/Covers/Cover2";
 
 
 const history = new HistoryController();
@@ -79,6 +80,12 @@ export function createObj( data:any, init = true) :DesignComp {
         case "CardList":
             obj = new CompCardListObj();
             break;
+        case "Cover2":
+            obj = new CompCover2Obj();
+            if (!init) {
+                obj = createCompCover2();
+            }
+            break;
     }
 
     if (obj) {

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

@@ -12,6 +12,7 @@ export function dataTransform(data: any) {
     set(data.content, paths.join("."), comp.id);
     compMap[comp.id] = comp;
     if (!comp.children) {
+      //@ts-ignore
       comp.children = CompUI[comp.compKey].createComp({
         compKey: comp.compKey,
       }).children;