local queen5

src/comm/controllers/ProjectCtrl/index.ts

@@ -9,7 +9,7 @@ import {
   PackProduct,
   PackSceneProduct,
 } from "@/comm/objects/pack";
-import { compMap } from "./tempComp";
+import { render } from "nats.ws/lib/nats-base-client/util";
 
 async function createDefaultSpu3dConf() {
   const currTime = new Date().toISOString();
@@ -58,7 +58,6 @@ export class ProjectController extends Controller {
   async onReady() {
     const params = new URLSearchParams(location.search);
     const projectPath = params.get("id") as string;
-    console.log(projectPath)
     this.RootDir = projectPath;
     const deviceCtrl = useCtx().deviceCtrl;
 
@@ -111,7 +110,7 @@ export class ProjectController extends Controller {
     const deviceCtrl = useCtx().deviceCtrl;
     try {
       const { text } = await deviceCtrl.ReadFileText(
-        `${this.RootDir}/project.queen5`
+        `${this.RootDir}/queen5/project.queen5`
       );
       let data = {} as any;
       if (!text) {
@@ -183,6 +182,10 @@ export class ProjectController extends Controller {
 
     return "";
   }
+  isLocalUrl(url: string) {
+    const reg = /(http:|https:)?\/\//gi;
+    return !reg.test(url);
+  }
 
   async createProject(path: string) {
     const deviceCtrl = useCtx().deviceCtrl;

src/comm/controllers/ProjectCtrl/tempComp.ts

@@ -1,87 +0,0 @@
-export const compMap = {
-  NPTFcJBIRnN2cbYuoFgxt: {
-    children: {
-      default: ["e9JBgmPvFvbCODpPmt5Kf"],
-    },
-    compKey: "Container",
-    id: "NPTFcJBIRnN2cbYuoFgxt",
-    layout: {
-      anim: "",
-      background: {
-        color: "#ffffff",
-      },
-      border: {
-        color: "",
-        radius: 0,
-        radius2: 0,
-        style: "",
-        width: 0,
-      },
-      locked: false,
-      opacity: 1,
-      size: [2732, 57.39578973439113],
-      transformMatrix: "matrix(1,0,0, 1,0,0)",
-      visible: true,
-    },
-    value: {},
-  },
-  e9JBgmPvFvbCODpPmt5Kf: {
-    children: {
-      default: [],
-    },
-    compKey: "Text",
-    id: "e9JBgmPvFvbCODpPmt5Kf",
-    layout: {
-      anim: "",
-      background: {
-        color: "",
-      },
-      border: {
-        color: "",
-        radius: 0,
-        radius2: 0,
-        style: "",
-        width: 0,
-      },
-      locked: false,
-      opacity: 1,
-      size: [750, 54],
-      transformMatrix: "matrix(1,0,0,1,134.7900826446279,1.697894867195564)",
-      visible: true,
-    },
-    value: {
-      text: '\u003cp style="text-align:center;line-height:1.5;"\u003e\u003cspan style="font-size:18px;"\u003e请输入内容\u003c/span\u003e\u003c/p\u003e',
-    },
-  },
-  root: {
-    children: {
-      default: ["NPTFcJBIRnN2cbYuoFgxt"],
-    },
-    compKey: "Page",
-    id: "root",
-    layout: {
-      anim: "",
-      background: {
-        color: "#ffffff",
-      },
-      border: {
-        color: "",
-        radius: 0,
-        radius2: 0,
-        style: "",
-        width: 0,
-      },
-      locked: false,
-      opacity: 1,
-      size: [2732, 1536],
-      transformMatrix: "matrix(1,0,0, 1,0,0)",
-      visible: true,
-    },
-    value: {
-      music: "",
-      pageMode: "long",
-      pageSizeType: "normal",
-      useFor: "pc",
-    },
-  },
-};

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

@@ -7,6 +7,7 @@ import { View } from "../View";
 import { css } from "@linaria/core";
 import { CompImageObj } from ".";
 import { useCompData } from "../../defines/hook";
+import { useCtx } from "@/comm/ctx";
 
 export const Component = defineComponent({
   props: {
@@ -17,10 +18,13 @@ export const Component = defineComponent({
     const comp = useCompData<CompImageObj>(props.compId);
 
     const { actions, helper, store, controls } = useEditor();
-
+    const ctx = useCtx();
     function setImageSize(url: string) {
       if (!helper.isStreamCardChild(props.compId)) return;
       const temImg = new Image();
+      if (ctx.prjCtrl.isLocalUrl(url)) {
+        url = ctx.prjCtrl.getHttpAbsoluteUri(url);
+      }
       temImg.src = url;
 
       temImg.onload = function () {
@@ -57,7 +61,10 @@ export const Component = defineComponent({
     );
 
     return () => {
-      const value = comp.value;
+      const value ={...comp.value} ;
+      if (ctx.prjCtrl.isLocalUrl(value.url)) {
+        value.url = ctx.prjCtrl.getHttpAbsoluteUri(value.url);
+      }
       const scale = value.s || 1;
       const ox = value?.x || 0;
       const oy = value?.y || 0;
@@ -74,8 +81,8 @@ export const Component = defineComponent({
         objectFit,
         transformOrigin: "center",
         width: "100%",
-        height: "100%"
-      }
+        height: "100%",
+      };
 
       if (value.matrix) {
         styleObj.transform = value.matrix;
@@ -97,17 +104,22 @@ export const Component = defineComponent({
           }}
           editlayer={props.editlayer}
         >
-          <div class={["w-1/1 h-1/1 object-cover pointer-events-none overflow-hidden", isCropping && cropingBorder]} >
+          <div
+            class={[
+              "w-1/1 h-1/1 object-cover pointer-events-none overflow-hidden",
+              isCropping && cropingBorder,
+            ]}
+          >
             <img
-                  crossorigin="anonymous"
-                  class={"w-1/1 h-1/1 object-cover"}
-                  style={styleObj as any}
-                  src={
-                    value.url.startsWith("data:image/png")
-                      ? value.url
-                      : value.url + "?editMode=" + store.isEditMode
-                  }
-              />
+              crossorigin="anonymous"
+              class={"w-1/1 h-1/1 object-cover"}
+              style={styleObj as any}
+              src={
+                value.url.startsWith("data:image/png")
+                  ? value.url
+                  : value.url + "?editMode=" + store.isEditMode
+              }
+            />
           </div>
         </View>
       );
@@ -116,5 +128,5 @@ export const Component = defineComponent({
 });
 
 const cropingBorder = css`
- border: 1px solid orange;
-`
+  border: 1px solid orange;
+`;

src/modules/editor/components/Viewport/Content/index.tsx

@@ -62,7 +62,7 @@ export default defineUI({
               <Container
                 class="space-y-15px mt-15px"
                 onDrop={(e: any) => {
-                  if (e.payload) {
+                  if (e.payload) {                               
                     actions.addCompToDesign(e.payload, e.addedIndex);
                   } else {
                     actions.moveComp(e.removedIndex, e.addedIndex);
@@ -174,8 +174,7 @@ export default defineUI({
                               }
                               return false;
                             }}
-                            onDrop={(e: any) => {
-                              // debugger;
+                            onDrop={(e: any) => {                            
                               if (e.payload) {
                                 console.log("xx a");
                                 actions.addCompToDesign(

src/modules/editor/components/Viewport/Header/PreviewDesignModal.tsx

@@ -134,8 +134,8 @@ export default defineComponent({
             >
               <IconExit class="text-20px mr-5px" /> 退出预览
             </Button>
-            <span class="text-14px select-none">{data.title}</span>
-            <Dropdown
+            {/* <span class="text-14px select-none">{data.title}</span> */}
+            {/* <Dropdown
               overlay={<ShareBox />}
               trigger="click"
               placement="bottomRight"
@@ -143,7 +143,7 @@ export default defineComponent({
               <Button class="text-dark-500 hover:text-dark-500" type="primary">
                 分享
               </Button>
-            </Dropdown>
+            </Dropdown> */}
           </div>
           <div
             ref={pageRef}

src/modules/editor/components/Viewport/Header/SaveOrShare.tsx

@@ -32,7 +32,7 @@ export default defineUI({
           class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:(!bg-dark-100)"
           onClick={showPreviewModal}
         />
-        {store.isEditPage && (
+        {/* {store.isEditPage && (
           <Dropdown
             overlay={<ShareBox />}
             trigger="click"
@@ -45,7 +45,7 @@ export default defineUI({
               分享
             </Button>
           </Dropdown>
-        )}
+        )} */}
         <Button
           class="text-12px text-dark-500 hover:text-dark-500"
           type="primary"

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

@@ -1,17 +1,11 @@
-import { defineComponent, onMounted, provide, reactive } from "vue";
+import { defineComponent, onMounted, reactive } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { string } from "vue-types";
 
+import { useCtx } from "@/comm/ctx";
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
-import { useResource } from "@/modules/resource";
-import { Loadmore } from "@queenjs/ui";
-import { Button } from "ant-design-vue";
-import { queenApi } from "queenjs";
-import SourceItem from "./Sources/SourceItem";
-import { useCtx } from "@/comm/ctx";
 import { nanoid } from "nanoid";
-import image from "@queenjs/ui/image";
+import SourceItem from "./Sources/SourceItem";
 export default defineComponent({
   setup(props) {
     const editor = useEditor();
@@ -22,19 +16,27 @@ export default defineComponent({
     });
     const ctx = useCtx();
     function clickToDesign(url: string) {
+      // const relaUrl=ctx.prjCtrl.getHttpAbsoluteUri(url)
+      // console.log(relaUrl)
       editor.actions.addImageToDesign(url);
     }
 
     function getData() {
+      console.log(ctx.prjCtrl.getOutputDir());
       ctx.deviceCtrl
         .GetFilesInDir(ctx.prjCtrl.getOutputDir(), "\\.png$")
         .then((ret: any) => {
           console.log(ret);
           ret &&
             ret.map((e: any) => {
+              const relaUrl = ctx.prjCtrl.getRelativeUri(e.Fpath);
+              const absoUrl = ctx.prjCtrl.getHttpAbsoluteUri(relaUrl);
               state.renderImages.push({
                 _id: nanoid(),
-                file: { url: e.Fpath, size: e.Size },
+                file: {
+                  url: absoUrl,
+                  size: e.Size,
+                },
                 fileType: "image",
                 createTime: e.CreateAt * 1000,
               });
@@ -57,7 +59,7 @@ export default defineComponent({
             animation-duration={0}
             get-child-payload={(index: number) => {
               return {
-                type: "image",
+                type: "Image",
                 data: dataSource[index],
               };
             }}
@@ -70,6 +72,7 @@ export default defineComponent({
                   isVideo={false}
                   tagable={true}
                   onClick={() => clickToDesign(item.file.url)}
+                  hasEdit={false}
                   onMenu={async (name) => {
                     console.log(name);
                     if (name == "delete") {

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

@@ -101,6 +101,7 @@ export default defineUI({
     record: any(),
     tagable: bool().def(false),
     isVideo: bool().def(false),
+    hasEdit: bool().def(true),
   },
   emits: ["edit", "preview", "menu", "click"],
   setup(props, { emit }) {
@@ -145,9 +146,11 @@ export default defineUI({
                 placement="bottom"
                 overlay={
                   <Menu class="w-90px">
-                    {/* <Menu.Item>
-                      <div onClick={() => emit("menu", "edit")}>编辑</div>
-                    </Menu.Item> */}
+                    {props.hasEdit && (
+                      <Menu.Item>
+                        <div onClick={() => emit("menu", "edit")}>编辑</div>
+                      </Menu.Item>
+                    )}
                     <Menu.Item>
                       <div onClick={() => emit("menu", "delete")}>删除</div>
                     </Menu.Item>

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

@@ -82,8 +82,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
   // }
 
 
-  createCompId(compKey: ICompKeys) {
-
+  createCompId(compKey: ICompKeys) { 
     const page = this.controls.pageCtrl;
     let compId = "";
     const compItem = this.state.components.get(compKey);

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

@@ -11,252 +11,283 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { nanoid } from "nanoid";
 import { eachValuesAndPathsDeep } from "@/utils";
 import { set } from "lodash";
-
+import { useCtx } from "@/comm/ctx";
+import { CompImageObj } from "../../components/CompUI/basicUI/Image2";
 
 export class PageCtrl extends ModuleControl<EditorModule> {
-  
-    state = RxValue.create({
-        currCompId: "root",
-        currStreamCardId: "",
-        rootId: "",
-        designId: "",
-        title: ''
-    }, history)
-    get currStreamCardId() {
-      return this.state.currStreamCardId;
-    }
-    get currCompId() {
-      return this.state.currCompId;
-    }
-    
-    initEvent() {
+  state = RxValue.create(
+    {
+      currCompId: "root",
+      currStreamCardId: "",
+      rootId: "",
+      designId: "",
+      title: "",
+    },
+    history
+  );
+  get currStreamCardId() {
+    return this.state.currStreamCardId;
+  }
+  get currCompId() {
+    return this.state.currCompId;
+  }
 
-        const updatePid = (pid:string)=>{
-           const comps = this.compMap[pid]?.children.default || [];
-           comps.forEach(c=>{
-               this.setCompPid(c, pid)
-               updatePid(c);
-           })
+  initEvent() {
+    const updatePid = (pid: string) => {
+      const comps = this.compMap[pid]?.children.default || [];
+      comps.forEach((c) => {
+        this.setCompPid(c, pid);
+        updatePid(c);
+      });
+    };
+
+    this.rootPage.children.default?.forEach((cid) => {
+      const card = this.compMap[cid];
+      let first = true;
+      this.setCompPid(cid, this.rootPage.id);
+      updatePid(this.rootPage.id);
+      card.children.onDefaultChanged((childs) => {
+        if (first) {
+          first = false;
+          return;
         }
+        childs.forEach((c) => {
+          this.setCompPid(c, card.id);
+          updatePid(c);
+        });
+        this.helper.extendStreamCard(cid);
+      });
+    });
+  }
 
-        this.rootPage.children.default?.forEach(cid=>{
-            const card = this.compMap[cid];
-            let first = true;
-            this.setCompPid(cid, this.rootPage.id);
-            updatePid(this.rootPage.id)
-            card.children.onDefaultChanged((childs)=>{
-                if (first) {
-                    first = false;
-                    return;
-                }
-                childs.forEach(c=>{
-                  this.setCompPid(c, card.id);
-                  updatePid(c)
-                })
-                this.helper.extendStreamCard(cid);
-            })
-        })
-    }
+  designData = {} as DesignTemp;
+  compPids = {} as Record<string, string>;
 
-    designData = {} as DesignTemp
-    compPids = {} as Record<string, string>;
+  toJson() {
+    const out: any = {
+      _id: this.designData._id,
+      version: this.designData.version,
 
-    toJson() {
-        const out:any = {
-           _id: this.designData._id,
-           version: this.designData.version,
-         
-           title: this.designData.title,
-           desc: this.designData.desc,
-           pageStyle: this.designData.pageStyle,
-           content: this.designData.content,
-           thumbnail: this.designData.thumbnail,
-           compScreenMap: this.designData.compScreenMap,
-        }
+      title: this.designData.title,
+      desc: this.designData.desc,
+      pageStyle: this.designData.pageStyle,
+      content: this.designData.content,
+      thumbnail: this.designData.thumbnail,
+      compScreenMap: this.designData.compScreenMap,
+    };
 
-        const keys = Object.keys(this.designData.compMap);
-        const compMap :any = {};
-        keys.forEach(k=>{
-           compMap[k] = this.designData.compMap[k].toJson?.();
-        })
-        out.compMap = compMap;
-        console.log(out);
+    const keys = Object.keys(this.designData.compMap);
+    const compMap: any = {};
+    keys.forEach((k) => {
+      compMap[k] = this.designData.compMap[k].toJson?.();
+    });
+    out.compMap = compMap;
+    console.log(out);
 
-        return out;
-    }
+    return out;
+  }
 
-    setCompPid(compId: string, pid: string) {
-        this.compPids[compId] = pid;
-    }
-    get compMap() {
-        return this.designData.compMap || {};
-    }
-    get currComp() {
-        return this.compMap[this.state.currCompId];
-    }
-    get currStreamCard() {
-        return this.compMap[this.state.currStreamCardId];
-    }
-    
-    get streamCardIds(): string[] {
-        return this.rootPage?.children.default || [];
+  setCompPid(compId: string, pid: string) {
+    this.compPids[compId] = pid;
+  }
+  get compMap() {
+    return this.designData.compMap || {};
+  }
+  get currComp() {
+    return this.compMap[this.state.currCompId];
+  }
+  get currStreamCard() {
+    return this.compMap[this.state.currStreamCardId];
+  }
+
+  get streamCardIds(): string[] {
+    return this.rootPage?.children.default || [];
+  }
+
+  async saveAssetsLocal(comp: DesignComp) {
+    const { deviceCtrl, prjCtrl } = useCtx();
+    if (!prjCtrl.isLocalUrl(comp.value.url)) {
+      const nameIndex = comp.value.url.lastIndexOf("/");
+      const assetsName = comp.value.url.substring(nameIndex + 1);
+      const fpath = `queen5/assets/${assetsName}`;
+      if (this.store.filesCacheUrl.get(assetsName)) {
+        comp.value.url = fpath;
+        return;
+      }
+      this.store.filesCacheUrl.set(assetsName, "start");
+      deviceCtrl.DownloadFile(
+        comp.value.url,
+        prjCtrl.createPath(fpath),
+        60 * 5,
+        (status: string, p: any) => {
+          if (status == "succ") {
+            comp.value.url = fpath;
+            this.store.filesCacheUrl.set(assetsName, "succ");
+          }
+          if (status == "error") {
+            this.store.filesCacheUrl.delete(assetsName);
+          }
+        }
+      );
     }
+  }
 
-    setDesignData(data: Partial<DesignTemp>) {  
-       history.enable = false;
-       this.designData = new DesignTemp(data);
-       this.state.title = data.title || '';
-        //设置组件父子关系
-        const ite = (root:any)=> {
-          const cards = root.children?.default || [];
-          cards.forEach((c:string)=>{
-            this.setCompPid(c, root.id);
-              const r = this.compMap[c];
-              if (r) {
-                ite(r);
-              }
-          })
+  setDesignData(data: Partial<DesignTemp>) {
+    history.enable = false;
+    this.designData = new DesignTemp(data);
+    this.state.title = data.title || "";
+    //设置组件父子关系
+    const ite = (root: any) => {
+      const cards = root.children?.default || [];
+      cards.forEach((c: string) => {
+        this.setCompPid(c, root.id);
+        const r = this.compMap[c];
+        if (r) {
+          ite(r);
         }
-        ite(this.designData.compMap.root);
+      });
+    };
+    ite(this.designData.compMap.root);
 
-        this.state.rootId = "root";
-        this.state.currStreamCardId = this.streamCardIds[0];
-        this.initEvent();
-        this.controls.propsCtrl.state.propId = "root";
+    this.state.rootId = "root";
+    this.state.currStreamCardId = this.streamCardIds[0];
+    this.initEvent();
+    this.controls.propsCtrl.state.propId = "root";
 
-        const root = this.rootPage;
-        this.controls.screenCtrl.state.screen.useFor= root.value.useFor as any || "mobile"
-        this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode as any || "long"  
-        this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType as any || "normal"
-        
-        if (this.store.isEditMode) {
-          this.controls.screenCtrl.updateAdapterState();
-        }
-        
-        setTimeout(() => {
-              history.clear();
-              history.enable = true;
-        }, 1000);
-    }
+    const root = this.rootPage;
+    this.controls.screenCtrl.state.screen.useFor =
+      (root.value.useFor as any) || "mobile";
+    this.controls.screenCtrl.state.screen.pageMode =
+      (root.value.pageMode as any) || "long";
+    this.controls.screenCtrl.state.screen.pageSizeType =
+      (root.value.pageSizeType as any) || "normal";
 
-    get rootPage() {
-        return this.compMap[this.state.rootId] as CompPageObj;
+    if (this.store.isEditMode) {
+      this.controls.screenCtrl.updateAdapterState();
     }
 
-    setCurrComp(compId: string) {
-        if (compId == "") compId = "root";
-        this.state.setCurrCompId(compId);
-        if (compId == "root") {
-          return;
-        }
+    setTimeout(() => {
+      history.clear();
+      history.enable = true;
+    }, 1000);
+  }
 
-        const comps = this.helper.getCompTrees(compId);
-        let cardId = comps[1]?.id || "";
-        if (cardId) {
-          if (this.helper.isStreamCard(compId)) {
-            cardId = compId;
-          }
-          this.state.setCurrStreamCardId(cardId);
-        }
+  get rootPage() {
+    return this.compMap[this.state.rootId] as CompPageObj;
+  }
+
+  setCurrComp(compId: string) {
+    if (compId == "") compId = "root";
+    this.state.setCurrCompId(compId);
+    if (compId == "root") {
+      return;
     }
 
-    findParentComp(compId: string): DesignComp | undefined {
-      const comp = this.compMap[compId];
-      if (comp) return this.compMap[this.compPids[compId]];
+    const comps = this.helper.getCompTrees(compId);
+    let cardId = comps[1]?.id || "";
+    if (cardId) {
+      if (this.helper.isStreamCard(compId)) {
+        cardId = compId;
+      }
+      this.state.setCurrStreamCardId(cardId);
     }
+  }
 
-    deleteComp(compId: string) {
-        const parentComp = this.findParentComp(compId);
-        let deleteOK = false;
-        if (parentComp) {
-          const ids = [...(parentComp.children.default || [])];
-          // 只能删除children.default中的组件
-          if (ids?.includes(compId)) {
-            const index = ids.findIndex((id) => id === compId);
-            if (index >= 0) {
-              ids.splice(index, 1);
-              parentComp.children.setDefault(ids);
-              deleteOK = true;
-            }
-          }
-        }
-        if (deleteOK) {
-          delete this.compPids[compId];
-        }
-    }  
+  findParentComp(compId: string): DesignComp | undefined {
+    const comp = this.compMap[compId];
+    if (comp) return this.compMap[this.compPids[compId]];
+  }
 
-    insertDesignCard(index?: number) {
-        const card = createObj({compKey: "Container"}, false);
-        if(this.controls.screenCtrl.state.screen.useFor == 'pc'){
-          card.layout.size = [2732, 1536]
+  deleteComp(compId: string) {
+    const parentComp = this.findParentComp(compId);
+    let deleteOK = false;
+    if (parentComp) {
+      const ids = [...(parentComp.children.default || [])];
+      // 只能删除children.default中的组件
+      if (ids?.includes(compId)) {
+        const index = ids.findIndex((id) => id === compId);
+        if (index >= 0) {
+          ids.splice(index, 1);
+          parentComp.children.setDefault(ids);
+          deleteOK = true;
         }
-        this.setCompPid(card.id, this.rootPage.id);
-        this.compMap[card.id] = card;
-        const childIds = [...this.rootPage.children.default];
-        index === undefined && (index = childIds.length);
-        childIds.splice(index, 0, card.id);
-        this.rootPage.children.setDefault(childIds);
-        card.children.onDefaultChanged(()=>{
-            this.helper.extendStreamCard(card.id);
-        })
-        return card.id;
+      }
     }
+    if (deleteOK) {
+      delete this.compPids[compId];
+    }
+  }
 
-    insertCompContainer(compKey: ICompKeys, container: DesignComp) {
-        const compId = this.controls.compUICtrl.createCompId(compKey);
-        this.setCompPid(compId, container.id);
+  insertDesignCard(index?: number) {
+    const card = createObj({ compKey: "Container" }, false);
+    if (this.controls.screenCtrl.state.screen.useFor == "pc") {
+      card.layout.size = [2732, 1536];
+    }
+    this.setCompPid(card.id, this.rootPage.id);
+    this.compMap[card.id] = card;
+    const childIds = [...this.rootPage.children.default];
+    index === undefined && (index = childIds.length);
+    childIds.splice(index, 0, card.id);
+    this.rootPage.children.setDefault(childIds);
+    card.children.onDefaultChanged(() => {
+      this.helper.extendStreamCard(card.id);
+    });
+    return card.id;
+  }
 
-        const childIds = [...(container.children.default || [])];
-        childIds.push(compId);
-        container.children.setDefault(childIds);
+  insertCompContainer(compKey: ICompKeys, container: DesignComp) {
+    const compId = this.controls.compUICtrl.createCompId(compKey);
+    this.setCompPid(compId, container.id);
 
-        return compId;
-    }
+    const childIds = [...(container.children.default || [])];
+    childIds.push(compId);
+    container.children.setDefault(childIds);
 
-    moveComp(selIndex: number, targetIndex: number) {
+    return compId;
+  }
 
-        const pageCompIds = [...this.streamCardIds];
-        const [selComp] = pageCompIds.splice(selIndex, 1);
-        pageCompIds.splice(targetIndex, 0, selComp);
-        this.rootPage.children.setDefault(pageCompIds );
+  moveComp(selIndex: number, targetIndex: number) {
+    const pageCompIds = [...this.streamCardIds];
+    const [selComp] = pageCompIds.splice(selIndex, 1);
+    pageCompIds.splice(targetIndex, 0, selComp);
+    this.rootPage.children.setDefault(pageCompIds);
 
-        history.submit();
-    }
+    history.submit();
+  }
 
-    addUserCard(detail: any) {
-        const { compMap } = this.controls.pageCtrl.designData;
-        const idMap = new Map<string, string>();
-        const nextCompMap: Record<string, DesignComp> = {};
-        Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
-          ([key, comp]) => {
-            
-            if (key === "root") {
-              idMap.set(key, nanoid());
-              comp.title = detail.title;
-              comp.thumbnail = detail.thumbnail;
-            }
-            const newPid = idMap.get(key) || nanoid();
-            idMap.set(key, newPid);
-            comp.id = newPid;
-            eachValuesAndPathsDeep(
-              comp.children,
-              (v) => typeof v === "string",
-              (v, paths) => {
-                const id = idMap.get(v) || nanoid();
-                idMap.set(v, id);
+  addUserCard(detail: any) {
+    const { compMap } = this.controls.pageCtrl.designData;
+    const idMap = new Map<string, string>();
+    const nextCompMap: Record<string, DesignComp> = {};
+    Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
+      ([key, comp]) => {
+        if (key === "root") {
+          idMap.set(key, nanoid());
+          comp.title = detail.title;
+          comp.thumbnail = detail.thumbnail;
+        }
+        const newPid = idMap.get(key) || nanoid();
+        idMap.set(key, newPid);
+        comp.id = newPid;
+        eachValuesAndPathsDeep(
+          comp.children,
+          (v) => typeof v === "string",
+          (v, paths) => {
+            const id = idMap.get(v) || nanoid();
+            idMap.set(v, id);
+
+            this.setCompPid(id, newPid);
 
-                this.setCompPid(id, newPid)
-                
-                set(comp.children, paths, id);
-              }
-            );
-            nextCompMap[newPid] = createObj(comp);
+            set(comp.children, paths, id);
           }
         );
-        Object.assign(compMap, nextCompMap);
-        return nextCompMap[idMap.get("root") as string];
-    }
-    setDesignThumbnail(url: string) {
-      this.designData.thumbnail = url;
-    }
+        nextCompMap[newPid] = createObj(comp);
+      }
+    );
+    Object.assign(compMap, nextCompMap);
+    return nextCompMap[idMap.get("root") as string];
+  }
+  setDesignThumbnail(url: string) {
+    this.designData.thumbnail = url;
+  }
 }

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

@@ -1,16 +1,13 @@
-import { cloneDeep, pick } from "lodash";
-import { nanoid } from "nanoid";
+import { useCtx } from "@/comm/ctx";
+import { pick } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
-import { ObjsContainer } from "../../controllers/SelectCtrl/ObjsContainer";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { ICompKeys, Layout } from "../../typings";
-import CompSave from "../../components/CompSave";
-import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
 import { cloneObj, createObj, history } from "../../objects/DesignTemp/factory";
+import { ICompKeys } from "../../typings";
 
 const ctrlState = {
   selected: [] as string[],
@@ -23,70 +20,71 @@ const ctrlState = {
 };
 
 export const editActions = EditorModule.action({
-  
   async addImageToDesign(url) {
-      queenApi.showLoading("图片加载中")
-      const maxW = this.controls.screenCtrl.getCurrScreenWidth();
-      try {
-        const temImg :any = await this.helper.loadImage(url);
-        const ratio = temImg.width / temImg.height;
-        const W = temImg.width > maxW ? maxW : temImg.width;
-        const H = W / ratio;
-        await this.actions.clickCompToDesign("Image", (comp)=>{
-
-          comp.setSize(W,  H );
-          comp.value.url = url;
-        })
-      } catch(e) {
-        queenApi.hideLoading();
-        queenApi.messageError("图片加载失败");
-        return
-      }
+    queenApi.showLoading("图片加载中");
+    const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+    try {
+      const temImg: any = await this.helper.loadImage(url);
+      const ratio = temImg.width / temImg.height;
+      const W = temImg.width > maxW ? maxW : temImg.width;
+      const H = W / ratio;
+      const page = this.controls.pageCtrl;
+      await this.actions.clickCompToDesign("Image", (comp) => {
+        comp.setSize(W, H);
+        comp.value.url = url;
+        page.saveAssetsLocal(comp);
+      });
+    } catch (e) {
       queenApi.hideLoading();
+      queenApi.messageError("图片加载失败");
+      return;
+    }
+    queenApi.hideLoading();
   },
-  async dragAddImageToDesign(e:MouseEvent, url) {
-      const page = this.controls.pageCtrl;
-      if (!page.currStreamCardId) {
-          queenApi.messageError("请先选中一个卡片");
-          return;
-      }
+  async dragAddImageToDesign(e: MouseEvent, url) {
+    const page = this.controls.pageCtrl;
+    if (!page.currStreamCardId) {
+      queenApi.messageError("请先选中一个卡片");
+      return;
+    }
 
-      queenApi.showLoading("图片加载中")
-      const maxW = this.controls.screenCtrl.getCurrScreenWidth();
-      try {
-        const temImg :any = await this.helper.loadImage(url);
-        const ratio = temImg.width / temImg.height;
-        const W = temImg.width > maxW ? maxW : temImg.width;
-        const H = W / ratio;
-
-        const currCard = page.currStreamCard;
-        const currComp = createObj({compKey:"Image"}, false);
-        currComp.setSize(W,  H );
-        currComp.value.url = url;
-        page.designData.compMap[currComp.id] = currComp;
-        // page.setCompPid(currComp.id, page.currStreamCardId);
-        const childIds = [...page.currStreamCard.children.default];
-        childIds.push(currComp.id);
-        currCard.children.setDefault(childIds);
-        this.controls.editorCtrl.clickPickComp(currComp.id);
-        this.actions.centerLastComp(e);
-      } catch(e) {
-        queenApi.hideLoading();
-        queenApi.messageError("图片加载失败");
-        return
-      }
+    queenApi.showLoading("图片加载中");
+    const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+    try {
+      const temImg: any = await this.helper.loadImage(url);
+      const ratio = temImg.width / temImg.height;
+      const W = temImg.width > maxW ? maxW : temImg.width;
+      const H = W / ratio;
+
+      const currCard = page.currStreamCard;
+      const currComp = createObj({ compKey: "Image" }, false);
+      currComp.setSize(W, H);
+      currComp.value.url = url;
+      page.designData.compMap[currComp.id] = currComp;
+      page.saveAssetsLocal(page.designData.compMap[currComp.id]);
+      // page.setCompPid(currComp.id, page.currStreamCardId);
+      const childIds = [...page.currStreamCard.children.default];
+      childIds.push(currComp.id);
+      currCard.children.setDefault(childIds);
+      this.controls.editorCtrl.clickPickComp(currComp.id);
+      this.actions.centerLastComp(e);
+    } catch (e) {
       queenApi.hideLoading();
-      history.submit();
+      queenApi.messageError("图片加载失败");
+      return;
+    }
+    queenApi.hideLoading();
+    history.submit();
   },
 
-  async dragAddVideoToDesign(e:MouseEvent, url) {
+  async dragAddVideoToDesign(e: MouseEvent, url) {
     const page = this.controls.pageCtrl;
     if (!page.currStreamCardId) {
-        queenApi.messageError("请先选中一个卡片");
-        return;
+      queenApi.messageError("请先选中一个卡片");
+      return;
     }
 
-    queenApi.showLoading("视频加载中")
+    queenApi.showLoading("视频加载中");
     // const maxW = this.controls.screenCtrl.getCurrScreenWidth();
     try {
       // const temImg :any = await this.helper.loadImage(url);
@@ -95,7 +93,7 @@ export const editActions = EditorModule.action({
       // const H = W / ratio;
 
       const currCard = page.currStreamCard;
-      const currComp = createObj({compKey:"Video"}, false);
+      const currComp = createObj({ compKey: "Video" }, false);
       // currComp.setSize(W,  H );
       currComp.value.url = url;
       page.designData.compMap[currComp.id] = currComp;
@@ -105,22 +103,26 @@ export const editActions = EditorModule.action({
       currCard.children.setDefault(childIds);
       this.controls.editorCtrl.clickPickComp(currComp.id);
       this.actions.centerLastComp(e);
-    } catch(e) {
+    } catch (e) {
       queenApi.hideLoading();
       queenApi.messageError("图片加载失败");
-      return
+      return;
     }
     queenApi.hideLoading();
     history.submit();
-},
+  },
 
   // 通过点击添加组件到画布
-  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void, history=true) {
+  async clickCompToDesign(
+    compKey: ICompKeys,
+    cb?: (comp: DesignComp) => void,
+    history = true
+  ) {
     const page = this.controls.pageCtrl;
 
     if (!page.currStreamCardId) {
-        queenApi.messageError("请先选中一个卡片");
-        return;
+      queenApi.messageError("请先选中一个卡片");
+      return;
     }
 
     let yOffset = 0;
@@ -133,15 +135,15 @@ export const editActions = EditorModule.action({
     }
     let currCard = page.currStreamCard;
 
-    const currComp = createObj({compKey}, false);
+    const currComp = createObj({ compKey }, false);
     // debugger
     //@ts-ignore
-    const objs :any[] = currComp.children.objs || [];
+    const objs: any[] = currComp.children.objs || [];
     if (objs.length > 0) {
-      objs.forEach(o=>{
+      objs.forEach((o) => {
         page.designData.compMap[o.id] = o;
         page.setCompPid(o.id, currComp.id);
-      })
+      });
     }
     page.designData.compMap[currComp.id] = currComp;
     page.setCompPid(currComp.id, currCard.id);
@@ -180,7 +182,6 @@ export const editActions = EditorModule.action({
 
   // 通过点击添加组件到画布
   async clickCompUserToDesign(id: string, isSys) {
-
     const page = this.controls.pageCtrl;
 
     if (!page.currStreamCardId) {
@@ -199,11 +200,10 @@ export const editActions = EditorModule.action({
 
     page.setCompPid(compId, currCard.id);
 
-
     this.actions.initAddedCompPos(this.store.currCompId, compId, currCard.id);
 
     this.controls.editorCtrl.clickPickComp(compId);
-    
+
     history.submit();
   },
 
@@ -241,7 +241,6 @@ export const editActions = EditorModule.action({
 
   // 通过拖拽添加组件到画布
   async dragCompToDesign(event: MouseEvent, compKey: string, data: any) {
-    
     const page = this.controls.pageCtrl;
 
     if (compKey == "CompCard") {
@@ -257,13 +256,12 @@ export const editActions = EditorModule.action({
       page.setCompPid(compId, currCard.id);
 
       this.controls.editorCtrl.clickPickComp(compId);
-    
     } else {
       await this.actions.addCompToDesign(compKey as any);
     }
 
     setTimeout(() => {
-      this.actions.centerLastComp(event)
+      this.actions.centerLastComp(event);
       const currComp = this.controls.pageCtrl.currComp;
       if (compKey == "Text") {
         this.actions.textFocus(currComp.id, true);
@@ -273,10 +271,10 @@ export const editActions = EditorModule.action({
     }, 100);
   },
 
-  centerLastComp(event:MouseEvent) {
+  centerLastComp(event: MouseEvent) {
     const currCardDom = this.store.currStreamCard.$el;
     const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
-    const page  = this.controls.pageCtrl;
+    const page = this.controls.pageCtrl;
     let selCtrl = this.controls.selectCtrl;
 
     const w = this.controls.screenCtrl.getCurrScreenWidth();
@@ -299,15 +297,11 @@ export const editActions = EditorModule.action({
       return;
     }
     if (compKey == "Container") {
-      const  compId = page.insertDesignCard(index);
+      const compId = page.insertDesignCard(index);
       this.controls.editorCtrl.clickPickComp(compId);
       return;
     }
-
-    const compId = page.insertCompContainer(
-      compKey,
-      this.store.currStreamCard
-    );
+    const compId = page.insertCompContainer(compKey, this.store.currStreamCard);
 
     this.controls.editorCtrl.clickPickComp(compId);
   },
@@ -324,7 +318,7 @@ export const editActions = EditorModule.action({
     ctrlState.selected = [];
     const children = page.currStreamCard.children.default || [];
     const gizmo = this.controls.selectCtrl.gizmo;
-    const selected = gizmo.selected.map(item=>item.comp.id);
+    const selected = gizmo.selected.map((item) => item.comp.id);
 
     children.forEach((c) => {
       if (selected.indexOf(c) > -1) {
@@ -359,14 +353,13 @@ export const editActions = EditorModule.action({
 
     const w = this.controls.screenCtrl.getCurrScreenWidth();
     if (this.selected.length == 1) {
-      const size :any = layout.size.slice(0);
+      const size: any = layout.size.slice(0);
       let isSame = false;
       if (isWidth) {
-        isSame = w == size[0]
+        isSame = w == size[0];
         size[0] = w;
-      }
-      else {
-        isSame = size[1] == this.store.currStreamCard.layout.size[1]
+      } else {
+        isSame = size[1] == this.store.currStreamCard.layout.size[1];
         size[1] = this.store.currStreamCard.layout.size[1];
       }
       if (!isSame) {
@@ -375,7 +368,7 @@ export const editActions = EditorModule.action({
       }
       return;
     }
-    
+
     const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
@@ -413,14 +406,13 @@ export const editActions = EditorModule.action({
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     ctrlState.cardId = page.currStreamCardId;
     ctrlState.type = 3;
-
   },
   ctrlx() {
     //console.log("ctrlv ", this.store.selected);
     //console.log("ctrlv ", this.store.selected);
-    const page =  this.controls.pageCtrl;
+    const page = this.controls.pageCtrl;
     const gizmo = this.controls.selectCtrl.gizmo;
-    const selected = gizmo.selected.map(item=>item.comp.id);
+    const selected = gizmo.selected.map((item) => item.comp.id);
 
     //保持图层顺序
     ctrlState.selected = [];
@@ -477,38 +469,38 @@ export const editActions = EditorModule.action({
     this.controls.selectCtrl.gizmo.selectObjs(news);
 
     //剪辑
- 
-      if (ctrlState.type == 2) {
-        //剪辑删除原来的组件
-        const card = this.helper.findComp(ctrlState.cardId) as DesignComp;
-        const childs = card.children.default?.slice(0) || [];
-        ctrlState.selected.forEach((s) => {
-          let i = childs.indexOf(s);
-          if (i != -1) {
-            childs.splice(i, 1);
-          }
-        });
-        card.children.default = childs;
-        this.helper.extendStreamCard(ctrlState.cardId);
-        ctrlState.selected = [];
-      }
 
-      //获取当前选中的内容
-      if (ctrlState.cardId != ctrl.currStreamCardId) {
-        //跨卡片拷贝
-        let pox = this.helper.getCardNextPosY(
-          ctrl.currStreamCardId,
-          ctrlState.selWidth
-        );
-        this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
-        return;
-      }
+    if (ctrlState.type == 2) {
+      //剪辑删除原来的组件
+      const card = this.helper.findComp(ctrlState.cardId) as DesignComp;
+      const childs = card.children.default?.slice(0) || [];
+      ctrlState.selected.forEach((s) => {
+        let i = childs.indexOf(s);
+        if (i != -1) {
+          childs.splice(i, 1);
+        }
+      });
+      card.children.default = childs;
+      this.helper.extendStreamCard(ctrlState.cardId);
+      ctrlState.selected = [];
+    }
 
-      if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
-        this.controls.selectCtrl.translate(20, 20);
-      }
+    //获取当前选中的内容
+    if (ctrlState.cardId != ctrl.currStreamCardId) {
+      //跨卡片拷贝
+      let pox = this.helper.getCardNextPosY(
+        ctrl.currStreamCardId,
+        ctrlState.selWidth
+      );
+      this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
+      return;
+    }
 
-      history.submit();
+    if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
+      this.controls.selectCtrl.translate(20, 20);
+    }
+
+    history.submit();
   },
 
   addComps(ids: string[]) {
@@ -521,7 +513,7 @@ export const editActions = EditorModule.action({
     const childrens = (this.store.currStreamCard.children.default || []).slice(
       0
     );
-    this.controls.selectCtrl.gizmo.selectObjs(childrens)
+    this.controls.selectCtrl.gizmo.selectObjs(childrens);
   },
 
   // 删除组件
@@ -536,9 +528,9 @@ export const editActions = EditorModule.action({
   },
 
   // 删除组件
-  removeComp(compId: string, submitHistory= false) {
+  removeComp(compId: string, submitHistory = false) {
     const ctrl = this.controls.pageCtrl;
-    
+
     const paths = this.helper.getCompTrees(compId);
     if (!paths[2]) {
       if (this.helper.isStreamCard(compId)) {
@@ -578,7 +570,7 @@ export const editActions = EditorModule.action({
     let nextCard = ctrl.currStreamCardId;
     if (compId == ctrl.currStreamCardId) {
       const i = ctrl.streamCardIds.indexOf(compId);
-      nextCard =ctrl.streamCardIds[i + 1];
+      nextCard = ctrl.streamCardIds[i + 1];
       if (!nextCard) {
         nextCard = ctrl.streamCardIds[i - 1];
       }
@@ -683,22 +675,23 @@ export const editActions = EditorModule.action({
       root.value.pageSizeType = c.state.screen.pageSizeType;
 
       // 封面截屏
-      if (!ctrl.designData.thumbnail) {
-        await this.actions.updateThumbnailByScreenshot();
-      }
+      // if (!ctrl.designData.thumbnail) {
+      //   await this.actions.updateThumbnailByScreenshot();
+      // }
 
       queenApi.showLoading("保存中");
-      
-      await this.controls.uploader.uploadBlobs(ctrl.designData);
-      if (this.store.isWk) {
-        await this.https[this.store.isEditPage ? "saveWkDesign" : "saveComp"](
-          ctrl.toJson()
-        );
-      } else {
-        await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
-          ctrl.toJson()
-        );
-      }
+
+      await this.actions.saveDesignLocal();
+      // await this.controls.uploader.uploadBlobs(ctrl.designData);
+      // if (this.store.isWk) {
+      //   await this.https[this.store.isEditPage ? "saveWkDesign" : "saveComp"](
+      //     ctrl.toJson()
+      //   );
+      // } else {
+      //   await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
+      //     ctrl.toJson()
+      //   );
+      // }
       queenApi.messageSuccess("保存成功");
     } catch (error: any) {
       throw Exception.error(error.toString());
@@ -706,11 +699,22 @@ export const editActions = EditorModule.action({
       queenApi.hideLoading();
     }
   },
+  async saveDesignLocal() {
+    const ctrl = this.controls.pageCtrl;
+    const { deviceCtrl, prjCtrl } = useCtx();
+    const ok = await deviceCtrl.WriteFileText(
+      `${prjCtrl.RootDir}/queen5/project.queen5`,
+      JSON.stringify(ctrl.toJson())
+    );
+    if (!ok) {
+      return Promise.reject("保存失败");
+    }
+  },
 
   // 截屏保存封面
   async updateThumbnailByScreenshot(autoSave?: boolean) {
     const ctrl = this.controls.pageCtrl;
-    
+
     try {
       const rootComp = ctrl.rootPage;
       if (!rootComp) return;
@@ -743,7 +747,6 @@ export const editActions = EditorModule.action({
     comp.layout.transformMatrix = transformMatrix;
   },
 
-
   // 设置组件显示隐藏
   setCompVisible(comp: DesignComp) {
     comp.layout.visible = comp.layout.visible === false ? true : false;
@@ -768,8 +771,7 @@ export const editActions = EditorModule.action({
   },
   // 设置组件层级
   setCompLayer(comp: DesignComp, offset: number) {
-
-    const currCard = this.controls.pageCtrl.currStreamCard
+    const currCard = this.controls.pageCtrl.currStreamCard;
     const cards = currCard.children.default.slice(0);
 
     const i = cards.indexOf(comp.id);
@@ -795,7 +797,6 @@ export const editActions = EditorModule.action({
   },
   //横向对齐
   setAlignX(flag: 0 | 1 | 2 | 3, isGroup = false) {
-    
     console.log("alignX");
 
     const selectCtrl = this.controls.selectCtrl;
@@ -805,7 +806,6 @@ export const editActions = EditorModule.action({
     const gizmo = selectCtrl.gizmo;
 
     if (gizmo.selected.length == 1 || isGroup) {
-    
       const box = gizmo.getBound();
 
       switch (flag) {
@@ -921,7 +921,6 @@ export const editActions = EditorModule.action({
     const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
-
     const anchor = new CompObject(anchorBox);
     const anchorRect = anchor.getBox();
 
@@ -965,7 +964,7 @@ export const editActions = EditorModule.action({
       });
 
       gizmo.parent.updateTransform();
-      history.submit()
+      history.submit();
       return;
     }
 
@@ -1002,7 +1001,7 @@ export const editActions = EditorModule.action({
     const gizmo = this.controls.selectCtrl.gizmo;
 
     const parentMtrx = gizmo.parent.worldTransform.clone();
-    gizmo.selectObjs([]);//取消选择
+    gizmo.selectObjs([]); //取消选择
 
     childs.forEach((o) => {
       const obj = this.helper.findComp(o) as DesignComp;
@@ -1020,9 +1019,9 @@ export const editActions = EditorModule.action({
     );
     parentChilds.push(...childs);
     const page = this.controls.pageCtrl;
-    childs.forEach(item=>{
+    childs.forEach((item) => {
       page.setCompPid(item, card.id);
-    })
+    });
     card.children.setDefault(parentChilds);
     this.controls.editorCtrl.clickPickComp(childs[0]);
 
@@ -1030,11 +1029,10 @@ export const editActions = EditorModule.action({
   },
 
   createGroupComps() {
- 
     const gizmo = this.controls.selectCtrl.gizmo;
     const page = this.controls.pageCtrl;
 
-    const sels = gizmo.selected.map(item=>item.comp.id);
+    const sels = gizmo.selected.map((item) => item.comp.id);
     const id = this.controls.compUICtrl.createCompId("Group");
     const comp = this.helper.findComp(id) as DesignComp;
     const chils = this.controls.pageCtrl.currStreamCard.children.default || [];
@@ -1049,14 +1047,14 @@ export const editActions = EditorModule.action({
     newChilds.push(id);
 
     //更新节点的新位置
-    const newMatrixMap:any= {};
+    const newMatrixMap: any = {};
     gizmo.parent.children.forEach((obj) => {
       const cobj = obj as CompObject;
       const comp = cobj.comp;
       newMatrixMap[comp.id] = cobj.localTransform.getMatrixStr();
     });
     page.currStreamCard.children.setDefault(newChilds);
- 
+
     //再添加新的节点
     comp.layout.setSize([
       this.helper.pxToDesignSize(gizmo.width),
@@ -1066,10 +1064,10 @@ export const editActions = EditorModule.action({
 
     this.controls.selectCtrl.gizmo.selectObjs([]);
 
-    groupChilds.forEach((c)=> {
-        const comp = this.helper.findComp(c) as DesignComp;
-        comp.layout.setTransformMatrix(newMatrixMap[c]);
-        page.setCompPid(c, id);
+    groupChilds.forEach((c) => {
+      const comp = this.helper.findComp(c) as DesignComp;
+      comp.layout.setTransformMatrix(newMatrixMap[c]);
+      page.setCompPid(c, id);
     });
     comp.children.setDefault(groupChilds);
 
@@ -1113,11 +1111,11 @@ export const editActions = EditorModule.action({
       content: "要替换正在编辑的内容？",
     });
     if (!res) return;
-    
+
     const frameData = await this.https.getDesignDetail(record._id, {
       isSys: true,
     });
-    const { compMap, content, desc, thumbnail, title , _id} = frameData.result;
+    const { compMap, content, desc, thumbnail, title, _id } = frameData.result;
 
     const designData = {
       _id: ctrl.designData._id,

src/modules/editor/module/stores/index.ts

@@ -11,6 +11,7 @@ export const store = EditorModule.store({
     compEditMode: false, //组件编辑模式
     compEditReslut: 0, // -1 取消， 1 确定
     tplCategory: undefined,
+    filesCacheUrl: new Map(),
   }),
   getters: {
     currCompId() {