fixed compile error

src/modules/editor/actions/edit.ts

@@ -6,13 +6,15 @@ import { DesignComp } from "../defines/DesignTemp/DesignComp";
 export const editActions = EditorModule.action({
   // 添加组件到画布
   addCompToDesign(compKey: ICompKeys, index?: number) {
-    let designComp: DesignComp;
+    let designComp;
     if (index === undefined && this.store.currComp?.compKey === "Container") {
       designComp = this.store.insertCompContainer(compKey, this.store.currComp);
     } else {
       designComp = this.store.insertDesignContent(compKey, index);
     }
-    this.actions.pickComp(designComp.id);
+    if (designComp) {
+      this.actions.pickComp(designComp.id);
+    }
   },
   // 切换当前组件
   pickComp(compId: string) {

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

@@ -2,6 +2,8 @@ import {reactive, computed} from "vue"
 import { DesignComp } from "../../defines/DesignTemp/DesignComp"
 import { cloneDeep } from "lodash";
 
+type CreateFunc = (values:any, comm?: Partial<CommPropType>)=>DesignComp;
+
 export class CompController{
     state = reactive({
         _id: "",
@@ -11,7 +13,7 @@ export class CompController{
     })
     //包括所有部件和所有列表的
     designCompMap = new Map<string, DesignComp>();  
-    CompTypes = [] as  {type:string, name:string, thumbnail:string, isBasic: boolean}[];
+    CompTypes = [] as  {type:string, name:string, thumbnail:string, isBasic: boolean, createCompData: CreateFunc}[];
 
     initPageData(designData:any) {
         this.state._id = designData._id;
@@ -30,6 +32,17 @@ export class CompController{
         this.designCompMap.set(data.id,  data);
     }
 
+    createCompData(compKey: string) {
+        const CompType =  this.CompTypes.find(item=>item.type == compKey);
+        if (!CompType) return;
+
+        return CompType.createCompData({});
+    }
+
+    getCompType(compKey:string) {
+        return  this.CompTypes.find(item=>item.type == compKey);
+    }
+
     setCompState(compId: string , data:any) {
         this.designCompMap.set(compId, data);
     }
@@ -43,15 +56,15 @@ 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;
+        const defvalues = typeof getDef == "function" ? getDef(): cloneDeep(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);
+
+        CompCtrl.setCompState(ret.id, reactive(ret));
+       
         return ret;
     }
 
@@ -61,5 +74,12 @@ export function RegCompType<T>(info: {type:string , name:string, thumbnail:strin
         return CompCtrl.getCompState(compId) as ValueType;
     }
 
+    //@ts-ignore
+    info.createCompData = createCompData;
+
+    if (!CompCtrl.CompTypes.find(item=>item.type == info.type)) {
+        CompCtrl.CompTypes.push(info as any);
+    }
+
     return {useCompData, createCompData}
 }

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

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

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

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

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

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

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

@@ -2,6 +2,9 @@ import { Dict_Imgs } from "@/dict";
 import * as Image from "../../../basicUI/Image"
 import { RegCompType , CompCtrl} from "../../../CompController";
 import { Text } from "../../../basicUI";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+
+export { Component } from "./component"
 
 const {createCompData, useCompData} = RegCompType(
     {type: "CardList", name: "CardList", thumbnail: Dict_Imgs.Default},
@@ -34,4 +37,7 @@ const onChangeListTotal = function(compId:string) {
     return {} as any;
 }
 
-export {createCompData, useCompData, onChangeListTotal}
+export {createCompData, useCompData, onChangeListTotal}
+
+
+export const Form = createAttrsForm([]);

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

@@ -10,8 +10,7 @@ export const { createCompData, useCompData } = RegCompType({
   name: "封面",
   thumbnail: Dict_Imgs.Default,
   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: {
@@ -23,6 +22,6 @@ export const { createCompData, useCompData } = RegCompType({
     image:
       "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
   },
-});
+}));
 
 export const Form = createAttrsForm([]);

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

@@ -8,7 +8,7 @@ export const { createCompData, useCompData } = RegCompType({
   name: "标题",
   thumbnail: require("@/assets/comps/Cover2/thumbnail.jpg"),
   type: "Cover2"
-},{
+}, ()=>({
   value: {
     img1: Image.createCompData({
         url: require("@/assets/comps/Cover2/img_1.png"),
@@ -29,6 +29,6 @@ export const { createCompData, useCompData } = RegCompType({
     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>`),
   },
-});
+}));
 
 export const Form = createAttrsForm([]);

src/modules/editor/components/CompUI/customUI/Texts/Text1/component.tsx

@@ -2,7 +2,7 @@ import { useEditor } from "@/modules/editor";
 import { css, cx } from "@linaria/core";
 import { watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+import { OnColumeChange, useCompData } from ".";
 import { Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
@@ -17,15 +17,7 @@ export const Component = createUIComp({
     watch(
       () => [value.columns],
       () => {
-        const { columns, list } = value;
-        const offset = columns - list.length;
-        if (offset > 0) {
-          Array.from({ length: offset }, () => {
-            list.push({ label: "标题", content: "内容" });
-          });
-        } else {
-          list.splice(columns, offset * -1);
-        }
+        OnColumeChange(props.compId);
       }
     );
 
@@ -48,12 +40,12 @@ export const Component = createUIComp({
               }}
             >
               <Text.Component
-                v-model={[d.label, "value"]}
+                compId={d.label.id}
                 class="text text-center"
               />
             </div>
             <Text.Component
-              v-model={[d.content, "value"]}
+              compId={d.content.id}
               class="flex-1 ml-0.3rem"
             />
           </div>

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

@@ -1,12 +1,16 @@
 import { InputNumber } from "ant-design-vue";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
+import { CompCtrl, RegCompType } from "../../../CompController";
+import { Text } from "../../../basicUI";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions({
+export const { createCompData, useCompData } = RegCompType({
   name: "文字",
   thumbnail: require("./thumbnail.jpg"),
+  type: "Text1",
+}, {
+ 
   layout: { margin: "0.2rem 0.3rem", padding: " 0 0.2rem" },
   value: {
     gap: 20,
@@ -15,29 +19,42 @@ export const { options, useCompData } = createOptions({
     showBackground: true,
     list: [
       {
-        label: "产品名称",
-        content: "P190（注塑）",
+        label: Text.createCompData("产品名称"),
+        content: Text.createCompData("P190（注塑）"),
       },
       {
-        label: "产品规格",
-        content: "52英寸",
+        label: Text.createCompData("产品规格"),
+        content: Text.createCompData("52英寸"),
       },
       {
-        label: "产品厚度",
-        content: "1.0mm+0.05mm",
+        label: Text.createCompData("产品厚度"),
+        content: Text.createCompData("1.0mm+0.05mm"),
       },
       {
-        label: "产品底材",
-        content: "产品底材",
+        label: Text.createCompData("产品底材"),
+        content: Text.createCompData("产品底材"),
       },
       {
-        label: "产品用途",
-        content: "凉鞋、跟鞋、高更鞋、时尚休闲鞋等",
+        label: Text.createCompData("产品用途"),
+        content: Text.createCompData("凉鞋、跟鞋、高更鞋、时尚休闲鞋等"),
       },
     ],
   },
 });
 
+export function OnColumeChange(CompId: string) {
+  const value = CompCtrl.getCompState(CompId) as any;
+  const { columns, list } = value;
+  const offset = columns - list.length;
+  if (offset > 0) {
+    Array.from({ length: offset }, () => {
+      list.push({ label: Text.createCompData("标题"), content: Text.createCompData("内容") });
+    });
+  } else {
+    list.splice(columns, offset * -1);
+  }
+} 
+
 export const Form = createAttrsForm([
   {
     label: "列表行数",

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

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

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

@@ -1,32 +1,31 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
 import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
+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,
+  type: "Title1",
+}, ()=>({
   value: {
     themeColor: "#666666",
-  },
-  children: {
-    title: {
-      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
+    title: Text.createCompData(`<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>`,
+    }),
+    subTitle:Text.createCompData(`<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",
       },
-    },
+    }),
   },
-});
+}));
 
 export const Form = createAttrsForm([
   {

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

@@ -9,7 +9,7 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { value } = useCompData(props.compId);
 
     return () => (
       <div class="flex items-center justify-center px-0.1rem">
@@ -18,7 +18,7 @@ export const Component = createUIComp({
         </div>
         <Text.Component
           class="px-0.5rem max-w-4.8rem"
-          compId={children.title?.id}
+          compId={value.title?.id}
         />
         <div class={cx(border, "right w-0.5rem text-0.34rem")}>
           &frasl; &frasl;

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

@@ -1,23 +1,25 @@
+import { RegCompType } from "../../../CompController";
+import { 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("./thumbnail.jpg"),
-  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>`,
+  type: "Title2"
+}, ()=>({
+  
+  value: {
+    title: Text.createCompData(`<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`, {
       layout: {
         textAlign: "center",
       },
-    },
+    }),
+  },
+  layout: {
+    padding: "0.5rem 0",
   },
-});
+}));
 
 export const Form = createAttrsForm([]);

src/modules/editor/components/CompUI/customUI/Titles/Title3/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="flex flex-col items-center">
         <Text.Component
           class=""
-          compId={children.title?.id}
+          compId={value.title?.id}
         />
         <Text.Component
           class=""
-          compId={children.subtitle?.id}
+          compId={value.subtitle?.id}
         />
       </div>
     );

src/modules/editor/components/Viewport/Slider/SliderLeft.tsx

@@ -6,6 +6,7 @@ import { Container, Draggable } from "vue-dndrop";
 import { css } from "@linaria/core";
 import * as basicUI from "../../CompUI/basicUI";
 import * as customUI from "../../CompUI/customUI";
+import { CompCtrl } from "../../CompUI/CompController";
 
 export default defineUI({
   setup() {
@@ -29,7 +30,11 @@ export default defineUI({
               return Object.keys(basicUI)[index];
             }}
           >
-            {Object.entries(basicUI).map(([compKey, uiOpt]) => {
+            {Object.entries(basicUI).map(([compKey]) => {
+
+              const ComType = CompCtrl.getCompType(compKey) as any;
+
+      
               return (
                 <Draggable key={compKey}>
                   <div
@@ -40,10 +45,10 @@ export default defineUI({
                   >
                     <img
                       class="w-full rounded-2px pointer-events-none"
-                      src={uiOpt.options.thumbnail}
+                      src={ComType.thumbnail}
                       alt="封面图"
                     />
-                    {uiOpt.options.name}
+                    {ComType.name}
                   </div>
                 </Draggable>
               );
@@ -58,7 +63,10 @@ export default defineUI({
               return Object.keys(customUI)[index];
             }}
           >
-            {Object.entries(customUI).map(([compKey, uiOpt]) => {
+            {Object.entries(customUI).map(([compKey]) => {
+              const ComType = CompCtrl.getCompType(compKey) as any;
+
+
               return (
                 <Draggable>
                   <div
@@ -70,10 +78,10 @@ export default defineUI({
                   >
                     <img
                       class="w-full rounded pointer-events-none"
-                      src={uiOpt.options.thumbnail}
+                      src={ ComType.thumbnail }
                       alt="封面图"
                     />
-                    {/* {uiOpt.options.name} */}
+                    {/* {ComType.name} */}
                   </div>
                 </Draggable>
               );

src/modules/editor/stores/index.ts

@@ -1,9 +1,11 @@
 import { EditorModule } from "..";
 import { CompUI } from "../components/CompUI";
+import { CompCtrl } from "../components/CompUI/CompController";
 import { DesignTemp } from "../defines/DesignTemp";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
 import { EditorMode, ICompKeys } from "../typings";
 
+
 export const store = EditorModule.store({
   state: () => ({
     mode: "edit" as EditorMode,
@@ -40,37 +42,36 @@ export const store = EditorModule.store({
       }
     },
     initDesignData(data: Partial<DesignTemp>) {
-      this.store.designData = new DesignTemp(data);
-      this.store.initDesignCompMap();
+
+      CompCtrl.initPageData(data);
+
+      // 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();
+
+      const comp = CompCtrl.createCompData(compKey);
+      if (!comp) return;
+      // this.store.designData.content.splice(index, 0, comp);
+
+      CompCtrl.insertPageCompData(comp);
+      
       return comp;
     },
+
     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,
-      });
-      container.children || (container.children = {});
-      container.children[comp.id] = comp;
-      this.store.initDesignCompMap();
-      return comp;
+      const compData = CompCtrl.createCompData(compKey) 
+      if (!compData) {
+         console.error("没有找到对应的组件")
+         return;
+      }
+      container.value.children || (container.value.children = []);
+      container.value.children.push( compData );
+
+      return compData;
     },
+
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
     },