update

src/modules/editor/actions/edit.ts

@@ -2,15 +2,16 @@ import { toRaw } from "vue";
 import { EditorModule } from "..";
 import { ICompKeys } from "../typings";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
+import { CompCtrl } from "../components/CompUI/CompController";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
   addCompToDesign(compKey: ICompKeys, index?: number) {
     let designComp;
     if (index === undefined && this.store.currComp?.compKey === "Container") {
-      designComp = this.store.insertCompContainer(compKey, this.store.currComp);
+      designComp = CompCtrl.insertCompContainer(compKey, this.store.currComp);
     } else {
-      designComp = this.store.insertDesignContent(compKey, index);
+      designComp = CompCtrl.insertDesignContent(compKey, index)
     }
     if (designComp) {
       this.actions.pickComp(designComp.id);

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

@@ -19,24 +19,48 @@ export class CompController{
         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.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);
+
+    insertDesignContent(compKey: string, index?: number) {
+        index === undefined && (index = this.state.content.length);
+        const comp = this.createCompData(compKey);
+        if (!comp) return;
+       
+        this.state.content.push( comp );
+        this.designCompMap.set(comp.id,  comp);
+
+        return comp;
+    }
+
+    insertCompContainer(compKey: string, container: DesignComp) {
+        const compData = this.createCompData(compKey) 
+        if (!compData) {
+           console.error("没有找到对应的组件")
+           return;
+        }
+        container.value.children || (container.value.children = []);
+        container.value.children.push( compData );
+  
+        return compData;
     }
 
     createCompData(compKey: string) {
         const CompType =  this.CompTypes.find(item=>item.type == compKey);
         if (!CompType) return;
 
-        return CompType.createCompData({});
+
+        return CompType.createCompData(this.isText(compKey) ? "": {});
+    }
+
+    isText(compKey:string) {
+        return compKey == "Text";
     }
 
     getCompType(compKey:string) {
@@ -60,12 +84,21 @@ export function RegCompType<T>(info: {type:string , name:string, thumbnail:strin
     const createCompData =  function(values: Partial<T>, comm?: Partial<CommPropType>) {
         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 isStrValue = (typeof values == "string" || typeof defvalues.value == "string");
+        if (isStrValue && values) {
+            //@ts-ignore
+            defvalues.value = values;
+        }
+        const c = Object.assign({}, defvalues, comm) as CommPropType &{value: T}
+         if (!isStrValue &&  values != null ) {
+            c.value = {...c.value, ...values}
+        }
         const ret = new DesignComp(c) as typeof c;
+        const out = reactive(ret)
+        CompCtrl.setCompState(ret.id, out);
 
-        CompCtrl.setCompState(ret.id, reactive(ret));
-       
-        return ret;
+        return out;
     }
 
     type ValueType = ReturnType<typeof createCompData>

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

@@ -7,7 +7,7 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import { reactive } from "vue";
+import { reactive, toRaw } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { createUIComp } from "../../defines/createUIComp";
@@ -66,7 +66,11 @@ export const Component = createUIComp({
           }}
           onFocus={() => (state.focus = true)}
           onReady={(editor: InlineEditor) => {
-            editor.setData(comp.value);
+
+            const t = toRaw(comp.value);
+            console.log("===>", t)
+            editor.setData( t );
+            
             if (!store.isEditMode) {
               editor.enableReadOnlyMode("editor");
             }

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

@@ -7,7 +7,7 @@ export { Component } from "./component";
 export const { createCompData, useCompData } = RegCompType({
   name: "卡片",
   thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
-  type: "Card11",
+  type: "Cards11",
 },()=>({
   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",}}),

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

@@ -5,7 +5,7 @@ import { createAttrsForm } from "../../../defines/createAttrsForm";
 export { Component } from "./component";
 
 export const { createCompData, useCompData } = RegCompType({
-  type: "Card12",
+  type: "Cards12",
   name: "卡片",
   thumbnail: require("@/assets/comps/Card12/thumbnail.jpg"),
 },()=>({

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

@@ -7,7 +7,7 @@ export { Component } from "./component";
 export const { createCompData, useCompData } = RegCompType({
   thumbnail: require("@/assets/comps/Card13/thumbnail.jpg"),
    name: "卡片",
-   type: "Card13"
+   type: "Cards13"
 },()=>({
   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>`,{

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

@@ -7,7 +7,7 @@ export { Component } from "./component";
 export const { createCompData, useCompData } = RegCompType({
   name: "卡片",
   thumbnail: require("@/assets/comps/Card14/thumbnail.jpg"),
-  type: "Card14"
+  type: "Cards14"
 },()=>({
   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>`,{

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

@@ -8,7 +8,7 @@ export { Component } from "./component";
 export const { createCompData, useCompData } = RegCompType({
    name: "卡片",
   thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
-  type: "Card15"
+  type: "Cards15"
 },()=>({
 
   value: {

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

@@ -9,7 +9,6 @@ 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";

src/modules/editor/stores/index.ts

@@ -10,16 +10,20 @@ export const store = EditorModule.store({
   state: () => ({
     mode: "edit" as EditorMode,
     currCompId: "",
-    designData: new DesignTemp(),
-    designCompMap: new Map<string, DesignComp>(),
   }),
   getters: {
     isEditMode(state) {
       return state.mode === "edit";
     },
     currComp(state) {
-      return state.designCompMap.get(state.currCompId);
+      return CompCtrl.getCompState(state.currCompId);
     },
+    designData(state) {
+      return CompCtrl.state;
+    },
+    designCompMap(state) {
+      return CompCtrl.designCompMap;
+    }
   },
   actions: {
     setCompData(id: string, data:any) {
@@ -48,29 +52,6 @@ export const store = EditorModule.store({
       // this.store.designData = new DesignTemp(data);
       // this.store.initDesignCompMap();
     },
-    insertDesignContent(compKey: ICompKeys, index?: number) {
-      index === undefined && (index = this.store.designData.content.length);
-
-      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 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;