update

src/modules/editor/components/CompUI/CompController.tsx

@@ -0,0 +1,65 @@
+import {reactive, computed} from "vue"
+import { DesignComp } from "../../defines/DesignTemp/DesignComp"
+import { cloneDeep } from "lodash";
+
+export class CompController{
+    state = reactive({
+        _id: "",
+        title: "",
+        pageStyle: {}, 
+        content: [] as DesignComp[]
+    })
+    //包括所有部件和所有列表的
+    designCompMap = new Map<string, DesignComp>();  
+    CompTypes = [] as  {type:string, name:string, thumbnail:string, isBasic: boolean}[];
+
+    initPageData(designData:any) {
+        this.state._id = designData._id;
+        this.state.title = designData.title;
+        this.state.pageStyle = designData.pageStyle;
+        this.state.content = designData.content;
+        const arr = this.state.content || [];
+        this.designCompMap.clear();
+        while (arr.length) {
+            const item = arr[0];
+            this.designCompMap.set(item.id, item);
+        }
+    }
+    insertPageCompData(data: any) {
+        this.state.content.push( data );
+        this.designCompMap.set(data.id,  data);
+    }
+
+    setCompState(compId: string , data:any) {
+        this.designCompMap.set(compId, data);
+    }
+    getCompState(compId:string )  {
+        return this.designCompMap.get(compId) as DesignComp;
+    }
+}
+
+export const CompCtrl = new CompController();
+
+type CommPropType = Pick<DesignComp, "compKey" | "background" | "layout" | "id">
+export function RegCompType<T>(info: {type:string , name:string, thumbnail:string, isBasic?:boolean},  getDef:(Partial<CommPropType> & {value: T})|(()=>Partial<CommPropType> & {value: T})) {
+    info.isBasic = info.isBasic ? true : false;
+    if (!CompCtrl.CompTypes.find(item=>item.type == info.type)) {
+        CompCtrl.CompTypes.push(info as any);
+    }
+    const createCompData =  function(values: Partial<T>, comm?: Partial<CommPropType>) {
+        const defvalues = typeof getDef == "function" ? getDef():getDef;
+        defvalues.compKey = info.type as any
+        const c = Object.assign({}, defvalues, comm, {value: values}) as CommPropType &{value: T}
+        const ret = new DesignComp(c) as typeof c;
+        CompCtrl.setCompState(ret.id, ret);
+        return ret;
+    }
+
+    type ValueType = ReturnType<typeof createCompData>
+
+    function useCompData(compId: string) {
+        return CompCtrl.getCompState(compId) as ValueType;
+    }
+
+    return {useCompData, createCompData}
+}

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

@@ -13,7 +13,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { store, helper } = useEditor();
-    const { value, children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
     return () => (
       <View
         compId={props.compId}
@@ -23,7 +23,7 @@ export const Component = defineComponent({
           left: helper.designToNaturalSize(value.position[0]),
         }}
       >
-        {Object.values(children).map((comp) => {
+        { value.children.map((comp) => {
           const compItem = comp as DesignComp;
           const Comp = CompUI[compItem.compKey].Component;
           return <Comp key={compItem.id} compId={compItem.id} />;

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

@@ -1,15 +1,19 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
 import { GroupNumber } from "../../formItems/GroupNumber";
+import { RegCompType } from "../../CompController";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "容器",
   thumbnail: Dict_Imgs.Default,
+  type: "Container",
+  isBasic: true,
+},{
   value: {
     position: [0, 0],
+    children: [],
   },
   layout: {
     size: [200, 200],

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

@@ -6,29 +6,24 @@ import { View } from "../View";
 
 export const Component = defineComponent({
   props: {
-    compId: string(),
-    value: object<{ url: string; x: number; y: number; s: number }>(),
+    compId: string().isRequired,
   },
-  emits: ["update:value"],
-  setup(props, { emit }) {
-    const comp = props.compId ? useCompData(props.compId) : null;
+  setup(props,) {
+    const comp =  useCompData(props.compId);
+
     const { store, controls } = useEditor();
     async function changeVal() {
       const url = await controls.pickCtrl.pickOneImage();
       if (!url) return;
 
-      if (comp) {
-        comp.value.url = url;
-        comp.value.x = 0;
-        comp.value.y = 0;
-        comp.value.s = 1;
-      } else {
-        emit("update:value", { url, x: 0, y: 0, s: 1 });
-      }
+      comp.value.url = url;
+      comp.value.x = 0;
+      comp.value.y = 0;
+      comp.value.s = 1;
     }
 
     return () => {
-      const value = comp?.value || props.value;
+      const value = comp.value;
       const scale = value?.s || 1;
       const ox = value?.x || 0;
       const oy = value?.y || 0;

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

@@ -1,12 +1,17 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions } from "../../defines/createOptions";
+import { RegCompType } from "../../CompController";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
-  name: "图片",
+export const { createCompData, useCompData } = RegCompType({
+   name: "图片",
   thumbnail: Dict_Imgs.Default,
+  type: "Image",
+  isBasic: true,
+},
+{ 
   value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
 });
 

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

@@ -1,54 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { defineComponent } from "vue";
-import { string } from "vue-types";
-import { useCompData } from ".";
-import { View } from "../View";
-
-export const Component = defineComponent({
-  props: {
-    compId: string().isRequired
-  },
-  setup(props,) {
-    const compConf =  useCompData(props.compId) ;
-    
-    const { store, controls } = useEditor();
-    async function changeVal() {
-      const url = await controls.pickCtrl.pickOneImage();
-      if (!url) return;
-
-      compConf.value.url = url;
-      compConf.value.x = 0;
-      compConf.value.y = 0;
-      compConf.value.s = 1;
-    }
-
-    return () => {
-      const value = compConf.value;
-      const scale = value?.s || 1;
-      const ox = value?.x || 0;
-      const oy = value?.y || 0;
-      const objectFit =
-        scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
-          ? "cover"
-          : "contain";
-
-      console.log("Scalexxxxxxxxxxxxxxxxxx=>", compConf);
-
-      return (
-        <View
-          compId={compConf.id}
-          onDblclick={store.isEditMode ? changeVal : undefined}
-        >
-          <img
-            class={"w-1/1 h-1/1 object-cover pointer-events-none"}
-            style={{
-              transform: `scale(${scale}) translate(${ox}%,${oy}%)`,
-              objectFit,
-            }}
-            src={value?.url}
-          />
-        </View>
-      );
-    };
-  },
-});

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

@@ -1,35 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions2 } from "../../defines/createOptions";
-import { RegCompType } from "../../defines/creator";
-
-export { Component } from "./component";
-
-export const { createCompData, useCompData } = RegCompType(
-    {type: "Image2", name: "图片", thumbnail: Dict_Imgs.Default},
-    {
-      value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
-    }
-);
-
-export const Form = createAttrsForm([
-  {
-    label: "图片",
-    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

@@ -14,12 +14,10 @@ import { createUIComp } from "../../defines/createUIComp";
 
 export const Component = createUIComp({
   props: {
-    compId: string(),
-    value: string().def(""),
+    compId: string().isRequired,
   },
-  emits: ["update:value"],
-  setup(props, { emit }) {
-    const comp = props.compId ? useCompData(props.compId) : null;
+  setup(props) {
+    const comp =   useCompData(props.compId);
     const { store } = useEditor();
     const config = {
       plugins: [
@@ -64,15 +62,11 @@ export const Component = createUIComp({
           editor={InlineEditor}
           onBlur={(e: any, editor: InlineEditor) => {
             state.focus = false;
-            if (comp) {
-              comp.value = editor.getData();
-            } else {
-              emit("update:value", editor.getData());
-            }
+            comp.value = editor.getData();
           }}
           onFocus={() => (state.focus = true)}
           onReady={(editor: InlineEditor) => {
-            editor.setData(comp?.value || props.value);
+            editor.setData(comp.value);
             if (!store.isEditMode) {
               editor.enableReadOnlyMode("editor");
             }

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

@@ -1,12 +1,16 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions } from "../../defines/createOptions";
+import { RegCompType } from "../../CompController";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "文本",
   thumbnail: Dict_Imgs.Default,
+  type: "Text",
+  isBasic: true,
+},{
   value: "请输入内容",
 });
 

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

@@ -1,12 +1,17 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions } from "../../defines/createOptions";
+import { RegCompType } from "../../CompController";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
-  name: "视频",
+export const { createCompData, useCompData } = RegCompType({
+ name: "视频",
   thumbnail: Dict_Imgs.Default,
+  type: "Video",
+  isBasic: true,
+},
+  {
   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 { ImagePicker } from "../../formItems/ImagePicker";
+import { RegCompType } from "../../CompController";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "3D",
   thumbnail: Dict_Imgs.Default,
+  type: "Web3D",
+  isBasic: true,
+},{
   value: {
     url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
     openWindow: false,

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

@@ -19,9 +19,9 @@ export const Component = createUIComp({
             width: designToNaturalSize(value.imgSize[0]),
             height: designToNaturalSize(value.imgSize[1]),
           }}
-          v-model={[value.img, "value"]}
+          compId={value.img.id}
         />
-        <Text.Component class="flex-1 ml-0.1rem" v-model={[value.desc, "value"]} />
+        <Text.Component class="flex-1 ml-0.1rem" compId={value.desc.id} />
       </div>
     );
   },

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

@@ -1,20 +1,23 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 import { GroupNumber } from "../../../formItems/GroupNumber";
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "卡片",
   thumbnail: Dict_Imgs.Default,
-  value: {
-    img: {url: Dict_Imgs.Default},
-    imgSize: [240, 240],
-    desc: "描述",
-  },
-});
-
+  type: "Card",
+ }, ()=>({
+    value: {
+      img:  Image.createCompData({}),
+      imgSize: [240, 240],
+      desc: Text.createCompData("描述"),
+    }
+ })
+);
 export const Form = createAttrsForm([
   {
     label: "图片尺寸",

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

@@ -9,21 +9,21 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div class="flex">
         <div class="flex-1">
-          <Text.Component compId={children.text?.id} />
+          <Text.Component compId={value.text?.id} />
         </div>
         <div class="w-2.5rem relative">
           <Image.Component
-            compId={children.img1.id}
+            compId={value.img1.id}
             class="w-1.67rem h-3.06rem object-cover"
           />
           <div class="absolute bottom-0 right-1rem">
             <Image.Component
-              compId={children.img2.id}
+              compId={value.img2.id}
               class="w-3.17rem h-2.4rem object-cover"
             />
           </div>

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

@@ -1,35 +1,22 @@
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "卡片",
   thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
-  value: {},
+  type: "Card11",
+},()=>({
+  value: {
+    text: Text.createCompData( `<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: Image.createCompData({ url: require("@/assets/comps/Card11/img_1.jpg")}),
+    img2: Image.createCompData({ url: require("@/assets/comps/Card11/img_shoe.png")}),
+  },
   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"),
-      },
-    },
-  },
-});
+  }
+}));
 
 export const Form = createAttrsForm([]);

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

@@ -9,19 +9,19 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+        <Text.Component compId={value.text?.id} />
         <div class="w-6.22rem mx-auto mt-0.4rem">
           <Image.Component
-            compId={children.img1.id}
+            compId={value.img1.id}
             class="w-6.22rem h-6.22rem object-cover"
           />
         </div>
         <div>
-          <Text.Component compId={children.text2?.id} />
+          <Text.Component compId={value.text2?.id} />
         </div>
       </div>
     );

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

@@ -1,35 +1,32 @@
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
+  type: "Card12",
   name: "卡片",
   thumbnail: require("@/assets/comps/Card12/thumbnail.jpg"),
-  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>`,
+},()=>({
+  value: {
+    text: Text.createCompData(`<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>`,
+    }),
+    text2: Text.createCompData( `<p style="text-align:center;">P190-2#</p>`,{
       layout: {
         textAlign: "center",
       },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
+    }),
+    img1: Image.createCompData({
         url: require("@/assets/comps/Card12/img_1.jpg"),
-      },
-    },
+    })
   },
-});
+  layout: {
+    padding: "0.5rem 0",
+  }
+}));
 
 export const Form = createAttrsForm([]);

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

@@ -9,17 +9,17 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+        <Text.Component compId={value.text?.id} />
         <Image.Component
-          compId={children.img1.id}
+          compId={value.img1.id}
           class="w-1.67rem h-3.06rem object-cover"
         />
         <Image.Component
-          compId={children.imgShoe.id}
+          compId={value.imgShoe.id}
           class="w-1.67rem h-3.06rem object-cover"
         />
       </div>

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

@@ -1,35 +1,32 @@
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
-  name: "卡片",
+export const { createCompData, useCompData } = RegCompType({
   thumbnail: require("@/assets/comps/Card13/thumbnail.jpg"),
-  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>`,
+   name: "卡片",
+   type: "Card13"
+},()=>({
+  value: {
+    text: Text.createCompData( `<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: {
+    }),
+    img1: Image.createCompData({
         url: require("@/assets/comps/Card13/img_1.jpg"),
       },
-    },
-    imgShoe: {
-      compKey: "Image",
-      value: {
+    ),
+    imgShoe: Image.createCompData({
         url: require("@/assets/comps/Card13/img_shoe.jpg"),
       },
-    },
+    )
+  },
+  layout: {
+    padding: "0.5rem 0",
   },
-});
+}));
 
 export const Form = createAttrsForm([]);

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

@@ -9,17 +9,17 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+        <Text.Component compId={value.text?.id} />
         <Image.Component
-          compId={children.img1.id}
+          compId={value.img1.id}
           class="w-1.67rem h-3.06rem object-cover"
         />
         <Image.Component
-          compId={children.imgShoe.id}
+          compId={value.imgShoe.id}
           class="w-1.67rem h-3.06rem object-cover"
         />
       </div>

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

@@ -1,35 +1,33 @@
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "卡片",
   thumbnail: require("@/assets/comps/Card14/thumbnail.jpg"),
-  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>`,
+  type: "Card14"
+},()=>({
+  value: {
+    text: Text.createCompData(`<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: {
+    }),
+    img1: Image.createCompData({
         url: require("@/assets/comps/Card14/img_1.jpg"),
       },
-    },
-    imgShoe: {
-      compKey: "Image",
-      value: {
+    ),
+    imgShoe: Image.createCompData({
         url: require("@/assets/comps/Card14/img_shoe.jpg"),
       },
-    },
+    )
+  },
+  layout: {
+    padding: "0.5rem 0",
   },
-});
+ 
+}));
 
 export const Form = createAttrsForm([]);

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

@@ -9,7 +9,7 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children, value } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div
@@ -19,10 +19,10 @@ export const Component = createUIComp({
         }}
       >
         <div class="h-1.3rem">
-          <Text.Component compId={children.title?.id} />
+          <Text.Component compId={value.title.id} />
         </div>
         <Image.Component
-          compId={children.img1.id}
+          compId={value.img1.id}
           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={value.colorText?.id} />
             </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={value.text?.id} />
           </div>
         </div>
         <Image.Component
-          compId={children.img2.id}
+          compId={value.img2.id}
           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,47 +1,42 @@
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
-  name: "卡片",
+export const { createCompData, useCompData } = RegCompType({
+   name: "卡片",
   thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
+  type: "Card15"
+},()=>({
+
   value: {
     themeColor: "#6D8D70",
-  },
-  layout: {
-    // padding: "0.5rem 0",
-    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>`,
+    title: Text.createCompData('<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>'),
+    
+    colorText: Text.createCompData(`<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: Text.createCompData(`<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: {
+    }),
+
+    img2: Image.createCompData({
         url: require("@/assets/comps/Card15/img_shoe.png"),
-      },
-    },
-    img1: {
-      compKey: "Image",
-      value: {
+    }),
+    
+    img1: Image.createCompData({
         url: require("@/assets/comps/Card15/img_1.jpg"),
-      },
-    },
+      }
+    ),
+  },
+  layout: {
+    // padding: "0.5rem 0",
+    margin: "0.2rem 0.35rem",
   },
-});
+}));
 
 export const Form = createAttrsForm([
   {

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

@@ -11,7 +11,7 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value, children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div class="relative">
@@ -22,7 +22,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(750),
                 height: designToNaturalSize(464),
                 }}
-                compId={children.bgImg.id}
+                compId={value.bgImg.id}
             />
             </div>
 
@@ -33,7 +33,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(191),
                 height: designToNaturalSize(191),
                 }}
-                compId={children.item1.id}
+                compId={value.item1.id}
             />
 
             <Image.Component
@@ -42,7 +42,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(191),
                 height: designToNaturalSize(191),
                 }}
-                compId={children.item2.id}
+                compId={value.item2.id}
             />
             
             <Image.Component
@@ -51,16 +51,16 @@ export const Component = createUIComp({
                 width: designToNaturalSize(191),
                 height: designToNaturalSize(191),
                 }}
-                compId={children.item3.id}
+                compId={value.item3.id}
             />
         </div>
 
         <div class="absolute top-0 left-0">
-          <Text.Component compId={children.text1.id} />
+          <Text.Component compId={value.text1.id} />
         </div>
 
     
-        <Text.Component compId={children.text2.id}  />
+        <Text.Component compId={value.text2.id}  />
       </div>
     );
   },

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

@@ -1,47 +1,29 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 import { GroupNumber } from "../../../formItems/GroupNumber";
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 
 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 { createCompData, useCompData } = RegCompType({
   name: "卡片2",
   thumbnail:thumbnail,
+  type: "Card2"
+},()=>({
   value: {
-
+    bgImg: Image.createCompData({url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685527709350_MHQZdg_bg.png" }),
+    item1: Image.createCompData({ url: thumbnail, x: 26.50, y: -23.00, s: 4.05 }),
+    item2: Image.createCompData({ url: thumbnail, x: -4.0, y: -13.50, s: 3.90 }),
+    item3: Image.createCompData({ url: thumbnail, x: -34.00, y: -3.5, s: 4.0 }),
+    text1: Text.createCompData(`<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: Text.createCompData( `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`)
   },
   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",
-        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
-    },
-  },
-});
+  }
+}));
 
 export const Form = createAttrsForm([
   {

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

@@ -10,13 +10,13 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     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={value.text1.id} />
+          <Text.Component class="mt-0.07rem" compId={value.text2.id} />
 
           <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={value.item1.id}
             />
 
             <Image.Component
@@ -34,7 +34,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
               }}
-              compId={children.item2.id}
+              compId={value.item2.id}
             />
 
             <Image.Component
@@ -43,7 +43,7 @@ export const Component = createUIComp({
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
               }}
-              compId={children.item3.id}
+              compId={value.item3.id}
             />
           </div>
         </div>
@@ -53,7 +53,7 @@ export const Component = createUIComp({
             width: designToNaturalSize(317),
             height: designToNaturalSize(240),
           }}
-          compId={children.bgImg.id}
+          compId={value.bgImg.id}
         />
       </div>
     );

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

@@ -1,46 +1,29 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 import { GroupNumber } from "../../../formItems/GroupNumber";
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 
 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 { createCompData, useCompData } = RegCompType({
   name: "卡片3",
   thumbnail:thumbnail,
+  type: "Card3",
+},()=>({
   value: {
+    bgImg: Image.createCompData({ url: thumbnail, x: -25.00, y: -0.50, s: 2.1 }),
+    item1: Image.createCompData({ url: thumbnail, x: 37.00, y: -6, s: 11.00 }),
+    item2: Image.createCompData({ url: thumbnail, x: 24.00, y: -6, s: 11.15  }),
+    item3:  Image.createCompData( { url: thumbnail, x: 11.00, y: -6, s: 11.70  }),
+    text1: Text.createCompData(`<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`),
+    text2: Text.createCompData( `复古羊巴 / 2023年新品`),
   },
   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",
-        value: `复古羊巴 / 2023年新品`,
-    },
-  },
-});
+}));
 
 export const Form = createAttrsForm([
   {

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

@@ -12,11 +12,11 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value, children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
     <div>
-      <Title3.Component   compId={children.title.id} />
+      <Title3.Component   compId={value.title.id} />
       <div class="flex">
         <div class="">
             <Image.Component class="overflow-hidden"
@@ -24,11 +24,11 @@ export const Component = createUIComp({
                             width: designToNaturalSize(250),
                             height: designToNaturalSize(278),
                         }}
-                        compId={children.bgImg.id}
+                        compId={value.bgImg.id}
             />
         </div>
         <div class="flex flex-col justify-center" style={{marginLeft: designToNaturalSize(49)}}>
-           <Text.Component compId={children.text1.id} />
+           <Text.Component compId={value.text1.id} />
         </div>
         </div>
         </div>

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

@@ -1,43 +1,33 @@
-import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
-import { GroupNumber } from "../../../formItems/GroupNumber";
+import { Title3 } from "../..";
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
+import { createAttrsForm } from "../../../defines/createAttrsForm";import { GroupNumber } from "../../../formItems/GroupNumber";
 
 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 { createCompData, useCompData } = RegCompType({
   name: "卡片4",
   thumbnail:thumbnail,
+  type: "Card4",
+},
+()=>({
   value: {
+    bgImg: Image.createCompData({ url: thumbnail, x: 27.50, y:-6.50, s: 3.50 }),
+    title: Title3.createCompData({
+              title:  Text.createCompData(`<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`),
+              subtitle: Text.createCompData(`<p style="text-align:center;">/ Product Details /</p>`),
+           }, {
+            layout: {
+              margin: "0 0 0.4rem 0"
+            }
+    }),
+    text1: Text.createCompData( `<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>`),
   },
   layout: {
     padding: "0.2rem",
   },
-  children: {
-    bgImg: {
-      compKey: "Image",
-      value: { url: thumbnail, x: 27.50, y:-6.50, s: 3.50 },
-    },
-    title: {
-        compKey: "Title3",
-        layout: {
-            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>`,
-            },
-        },
-    },
-    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>`,
-    }
-  },
-});
+}));
 
 export const Form = createAttrsForm([
   {

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

@@ -11,12 +11,12 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value, children } = useCompData(props.compId);
+    const { value } = 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} />
+                <Text.Component class="!absolute w-full" compId={value.text1.id} />
             </div>
             <div class="flex justify-center">
                 <Image.Component 
@@ -24,7 +24,7 @@ export const Component = createUIComp({
                                 width: designToNaturalSize(368),
                                 height: designToNaturalSize(275),
                             }}
-                            compId={children.bgImg.id}  />
+                            compId={value.bgImg.id}  />
             </div>
         </div>
     );

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

@@ -1,31 +1,25 @@
-
-
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 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"
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "卡片5",
   thumbnail:thumbnail,
+  type: "Card5",
+},{
+
   value: {
+    bgImg: Image.createCompData({ url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685609522134_nGPo9k_2.png" }),
+    text1: Text.createCompData(`<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:52px;">F A SH I O N</span></p>`),
   },
   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>`,
-    }
-  },
 });
 
 export const Form = createAttrsForm([

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

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

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

@@ -1,50 +1,37 @@
 import { Dict_Imgs } from "@/dict";
-import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
-import { InputNumber } from "ant-design-vue";
+import * as Image from "../../../basicUI/Image"
+import { RegCompType , CompCtrl} from "../../../CompController";
+import { Text } from "../../../basicUI";
 
-export { Component } from "./component";
+const {createCompData, useCompData} = RegCompType(
+    {type: "CardList", name: "CardList", thumbnail: Dict_Imgs.Default},
+    ()=>({
+        value: {
+            gap: 10,
+            columns: 3,
+            total: 3,
+            imgHeight: 120,
+            showDesc: true,
+            list: Array.from({ length: 3 }, () => ({
+                img:  Image.createCompData({url: Dict_Imgs.Default}),
+                desc: Text.createCompData("描述"),
+            })),
+        }
+    })
+)
 
-export const { options, useCompData } = createOptions({
-  name: "卡片列表",
-  thumbnail: Dict_Imgs.Default,
-  value: {
-    gap: 10,
-    columns: 3,
-    total: 3,
-    imgHeight: 120,
-    showDesc: false,
-    list: Array.from({ length: 3 }, () => ({
-      img: Dict_Imgs.Default,
-      desc: "描述",
-    })),
-  },
-});
+const onChangeListTotal = function(compId:string) {
+    const data = CompCtrl.getCompState(compId)
+    const { total, list } = data.value;
+    const offset = total - list.length;
+    if (offset > 0) {
+      Array.from({ length: offset }, () => {
+        list.push({ img: Image.createCompData({url: Dict_Imgs.Default}), desc: "描述" });
+      });
+    } else {
+      list.splice(total, offset * -1);
+    }
+    return {} as any;
+}
 
-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",
-  },
-]);
+export {createCompData, useCompData, onChangeListTotal}

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

@@ -1,45 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { watch } from "vue";
-import { string } from "vue-types";
-
-import { useEditor } from "../../../../..";
-import { Image, Text } from "../../../basicUI";
-import { createUIComp } from "../../../defines/createUIComp";
-import { onChangeListTotal, useCompData } from ".";
-
-export const Component = createUIComp({
-  props: {
-    compId: string().isRequired,
-  },
-  setup(props) {
-    const { helper } = useEditor();
-    const { value } = useCompData(props.compId);
-
-    watch(
-      () => [value.total],
-      () => {
-        onChangeListTotal(props.compId);
-      }
-    );
-
-    return () => (
-      <div
-        class="grid"
-        style={{
-          gridTemplateColumns: `repeat(${value.columns}, 1fr)`,
-          gridGap: helper.designToNaturalSize(value.gap),
-        }}
-      >
-        {value.list.map((d:any, i:number) => (
-          <div key={i}>
-            <Image.Component
-              style={{ height: helper.designToNaturalSize(value.imgHeight) }}
-              compId={d.image.id} 
-            />
-            {value.showDesc && <Text.Component compId={d.text.id}  />}
-          </div>
-        ))}
-      </div>
-    );
-  },
-});

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

@@ -1,38 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-
-
-import { RegCompType } from "../../../defines/creator";
-import * as Image2 from "../../../basicUI/Image2"
-
-const {createCompData, useCompData} = RegCompType(
-    {type: "CardList", name: "CardList", thumbnail: Dict_Imgs.Default},
-    {
-        value: {
-            gap: 10,
-            columns: 3,
-            total: 3,
-            imgHeight: 120,
-            showDesc: true,
-            list: Array.from({ length: 3 }, () => ({
-                img:  Image2.createCompData({url: Dict_Imgs.Default}),
-                desc: "描述",
-            })),
-        }
-    })
-    
-const onChangeListTotal = function(compId:string) {
-    //@ts-ignore
-    const data = Ctrl.getCompData(compId)
-    const { total, list } = data.value;
-    const offset = total - list.length;
-    if (offset > 0) {
-      Array.from({ length: offset }, () => {
-        list.push({ img: Image2.createCompData({url: Dict_Imgs.Default}), desc: "描述" });
-      });
-    } else {
-      list.splice(total, offset * -1);
-    }
-    return {} as any;
-}
-
-export {createCompData, useCompData, onChangeListTotal}

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

@@ -11,7 +11,7 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     const elRef = ref();
     onMounted(() => {
@@ -23,7 +23,7 @@ export const Component = createUIComp({
     return () => {
       return (
         <div class={compStyle} ref={elRef}>
-          <Text.Component compId={children.title.id} />
+          <Text.Component compId={value.title.id} />
           <div class="arrow">↓</div>
         </div>
       );

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

@@ -1,24 +1,27 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { RegCompType } from "../../../CompController";
+import { Text } from "../../../basicUI";
+
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "封面",
   thumbnail: Dict_Imgs.Default,
-  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>`,
+  type: "Cover",
+},{
+  
+  value: {
+    title: Text.createCompData(`<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",
       },
-    },
+    }),
+  },
+  background: {
+    image:
+      "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
   },
 });
 

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

@@ -9,39 +9,39 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(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-0.4rem h-1.2rem text-30px text-center text_main">
-            <Text.Component compId={children.title.id} />
+            <Text.Component compId={value.title.id} />
           </div>
           <div class="h-10.22rem mt-10px flex flex-1">
             <div class="ml-0.64rem">
               <Image.Component
-                compId={children.img1.id}
+                compId={value.img1.id}
                 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={value.img2.id}
                 class="w-1.67rem h-3.06rem object-cover"
               />
               <Image.Component
-                compId={children.img3.id}
+                compId={value.img3.id}
                 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 compId={value.text1?.id} />
           <Text.Component
             class="mt-1rem text-right"
-            compId={children.text2?.id}
+            compId={value.text2?.id}
           />
           <div class="line"></div>
         </div>

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

@@ -1,46 +1,33 @@
+import { RegCompType } from "../../../CompController";
+import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "标题",
   thumbnail: require("@/assets/comps/Cover2/thumbnail.jpg"),
-  value: {},
-  children: {
-    img1: {
-      compKey: "Image",
-      value: {
+  type: "Cover2"
+},{
+  value: {
+    img1: Image.createCompData({
         url: require("@/assets/comps/Cover2/img_1.png"),
         x: 0,
         y: 0,
         s: 1,
-      },
-    },
-    img2: {
-      compKey: "Image",
-      value: {
+    }),
+    img2: Image.createCompData({
         url: require("@/assets/comps/Cover2/img_2.jpg"),
-      },
-    },
-    img3: {
-      compKey: "Image",
-      value: {
+    }),
+    
+    img3: Image.createCompData({
         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>`,
-    },
+    }),
+    
+    title: Text.createCompData(`<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: Text.createCompData(`<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: Text.createCompData(`<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`),
   },
 });
 

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

@@ -1,26 +1,24 @@
 //https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685591011649_FHii9K_thumbnail.png
 
+import { RegCompType } from "../../../CompController";
+import { Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 
 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 { createCompData, useCompData } = RegCompType({
   name: "标题3",
   thumbnail: thumbnail,
-  value: {},
+  type: "Title3",
+}, ()=>({
+  value: {
+    title: Text.createCompData(`<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`),
+    subtitle: Text.createCompData(`<p style="text-align:center;">/ Product Details /</p>`),
+  },
   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: {
-        value: `<p style="text-align:center;">/ Product Details /</p>`,
-    },
-  },
-});
+}));
 
 export const Form = createAttrsForm([]);

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

@@ -9,6 +9,8 @@ export * as Cards12 from "./Cards/Card12";
 export * as Cards13 from "./Cards/Card13";
 export * as Cards14 from "./Cards/Card14";
 export * as Cards15 from "./Cards/Card15";
+export * as CardList2 from "./Cards/CardList";
+
 
 export * as Cover from "./Covers/Cover";
 export * as Cover2 from "./Covers/Cover2";

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

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

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

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