Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/assets/icons/components/IconFit.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconFit = createIcon(<svg viewBox="0 0 36 36"><g transform="translate(-1366 -951)"><rect fill="none" width="36" height="36" rx="4" transform="translate(1366 951)"/><g transform="translate(-0.111 -0.112)"><g transform="translate(1375.111 960.112)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M33,6h4.444v4.444" transform="translate(-19.444 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M37.444,33v4.444H33" transform="translate(-19.444 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M10.444,37.444H6V33" transform="translate(-6 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M6,10.444V6h4.444" transform="translate(-6 -6)"/></g><rect fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" width="6" height="6" transform="translate(1381.112 966.112)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -23,6 +23,7 @@ export * from "./components/IconCube";
 export * from "./components/IconCut";
 export * from "./components/IconDelete";
 export * from "./components/IconEmpty";
+export * from "./components/IconFit";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";

src/assets/icons/svg/fit.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 36 36"><g transform="translate(-1366 -951)"><rect fill="none" width="36" height="36" rx="4" transform="translate(1366 951)"/><g transform="translate(-0.111 -0.112)"><g transform="translate(1375.111 960.112)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M33,6h4.444v4.444" transform="translate(-19.444 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M37.444,33v4.444H33" transform="translate(-19.444 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M10.444,37.444H6V33" transform="translate(-6 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M6,10.444V6h4.444" transform="translate(-6 -6)"/></g><rect fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" width="6" height="6" transform="translate(1381.112 966.112)"/></g></g></svg>

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

@@ -13,7 +13,9 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const { controls, actions, store } = useEditor();
+    const { controls, store } = useEditor();
+
+    const mapContainerRef = ref();
 
     const comp = useCompData(props.compId);
     const { value } = comp;
@@ -33,7 +35,7 @@ export const Component = defineComponent({
       // })
       //   .then((res) => {
       // AMap.value = res;
-      map.value = new AMap.Map(props.compId, {
+      map.value = new AMap.Map(mapContainerRef.value, {
         // viewMode: "3D",
         zoom: 11,
         center: value.addressInfo.lnglat,
@@ -44,10 +46,9 @@ export const Component = defineComponent({
           position: value.addressInfo.lnglat,
         });
         map.value.add(marker.value);
-        if (!store.isEditMode) {
-          const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
-          map.value.addControl(toolbar);
-        }
+
+        const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
+        map.value.addControl(toolbar);
       });
       // })
       // .catch((e: any) => {
@@ -61,11 +62,8 @@ export const Component = defineComponent({
       map.value.setZoomAndCenter(11, value.addressInfo.lnglat);
     }
 
-    // openMap(options) {
-    //   this.controls.wxCtrl.openMap(options);
-    // },
-
     function openMap() {
+      if (store.isEditMode) return;
       const options = {
         latitude: value.addressInfo.lnglat[1], // 纬度，浮点数，范围为90 ~ -90
         longitude: value.addressInfo.lnglat[0], // 经度，浮点数，范围为180 ~ -180。
@@ -87,22 +85,18 @@ export const Component = defineComponent({
     return () => (
       <View compId={props.compId}>
         <div
-          id={props.compId}
+          ref={mapContainerRef}
           class="w-1/1"
-          // style={{ aspectRatio: 1 }}
           style={{
             height: "calc(100% - 44px)",
           }}
         ></div>
-        {!store.isEditMode && (
-          <div
-            class="absolute right-20px bottom-50px rounded-1/2 w-40px h-40px flex items-center justify-center bg-[#0085fe]"
-            onClick={openMap}
-          >
-            <IconAirPlain class="text-20px" />
-          </div>
-        )}
-
+        <div
+          class="absolute right-20px bottom-50px rounded-1/2 w-40px h-40px flex items-center justify-center bg-[#0085fe]"
+          onClick={openMap}
+        >
+          <IconAirPlain class="text-20px" />
+        </div>
         <div class="text-14px text-[#666] py-15px text-center bg-light-50">
           {value.addressInfo.address}
         </div>

src/modules/editor/components/CompUI/basicUI/Page/screen.tsx

@@ -6,28 +6,43 @@ export default defineComponent({
     setup(props, ctx) {
         const editor = useEditor();
         const ctrl = editor.controls.screenCtrl;
-        
+
         return ()=>{
             return (
                 <div class="px-16px">
                     <div class="flex items-center">
                         <span class="w-70px">屏幕类型</span>
-                        <Select value={ctrl.state.useFor} onChange={(v)=>{
-                            ctrl.state.setUseFor(v as any);
+                        <Select value={ctrl.state.screen.useFor} onChange={(v)=>{
+                            const s = {useFor: v, pageMode: ctrl.state.screen.pageMode, pageSizeType: ctrl.state.screen.pageSizeType}
+                            ctrl.saveScreenPage();
+                            ctrl.state.setScreen(s as any);
+
                         }} class = "flex-1 overflow-hidden" options={[{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }]}  />
                     </div>
                     <div  class="flex items-center mt-5px">
                         <span class="w-70px">页面模式</span>
                         <Select onChange={(v)=>{
-                            ctrl.state.setPageMode(v as any);
-                        }} value={ctrl.state.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "长页", value: "long" }, { label: "翻页", value: "short" }]}  />
-                    </div>
-                    <div  class="flex items-center mt-5px">
-                        <span class="w-70px">屏幕长度</span>
-                        <Select onChange={(v)=>{
-                            ctrl.state.setPageSizeType(v as any);
-                        }} value={ctrl.state.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
+                            ctrl.saveScreenPage();
+                            const s = {useFor: ctrl.state.screen.useFor, pageMode:v, pageSizeType: ctrl.state.screen.pageSizeType} 
+                            if( v == "long") {
+                                s.pageSizeType = "normal";
+                            }
+                            ctrl.state.setScreen(s as any);
+                            editor.controls.editorCtrl.autoInScreen();
+
+                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "长页", value: "long" }, { label: "翻页", value: "short" }]}  />
                     </div>
+                    {
+                        ctrl.state.screen.pageMode == "short" && <div  class="flex items-center mt-5px">
+                           <span class="w-70px">屏幕长度</span>
+                           <Select onChange={(v)=>{
+                               ctrl.saveScreenPage();
+                               const s = {useFor: ctrl.state.screen.useFor, pageMode:ctrl.state.screen.pageMode, pageSizeType: v}
+                               ctrl.state.setScreen(s as any);
+                           }} value={ctrl.state.screen.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
+                       </div>
+                    }
+                 
                 </div>
             )
         }

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -122,7 +122,7 @@ export const View = defineComponent({
         }
       }
 
-      const isLongPage = controls.screenCtrl.state.pageMode == "long";
+      const isLongPage = controls.screenCtrl.isLongPage
 
       return (
         <div
@@ -361,5 +361,5 @@ const divideStyle = css`
 `;
 
 const safeAreaStyles = css`
-  box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.3);
 `;

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -313,14 +313,14 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
             {/* 动效 */}
             <>
               <Divider />
-              {/* <div>
+              <div>
                 <span class="text-white">动效</span>
               </div>
               <FormUI
                 data={component}
                 columns={animateColumns}
                 onChange={changeVal}
-              /> */}
+              />
             </>
           </div>
         );

src/modules/editor/components/CompUI/formItems/NewColorPicker/Picker.tsx

@@ -3,7 +3,6 @@ import iro from "@jaames/iro";
 import { css, cx } from "@linaria/core";
 import { Input, InputNumber } from "ant-design-vue";
 import Color from "color";
-import { nanoid } from "nanoid";
 import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 import { string } from "vue-types";
 
@@ -21,8 +20,8 @@ export default defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const containerId = `id_${nanoid(5)}`;
     const pickr = ref<any>(null);
+    const containerRef = ref();
 
     const state = reactive({
       showPicker: false,
@@ -33,10 +32,9 @@ export default defineComponent({
 
     function initPicker() {
       if (window.EyeDropper) state.showPicker = true;
-      const element = document.querySelector(`.${containerId}`);
-      if (!element) return;
+      if (!containerRef.value) return;
       // @ts-ignore
-      pickr.value = new iro.ColorPicker(element, {
+      pickr.value = new iro.ColorPicker(containerRef.value, {
         width: 270,
         boxHeight: 150,
         color: props.value,
@@ -149,7 +147,7 @@ export default defineComponent({
 
       return (
         <div class={styles}>
-          <div class={containerId}></div>
+          <div ref={containerRef}></div>
           <div class="mt-15px flex items-center justify-between">
             <Input
               bordered={false}

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

@@ -10,6 +10,7 @@ import { IconPlus, IconReduce } from "@queenjs/icons";
 import { InputNumber } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
+import { IconFit } from "@/assets/icons";
 
 export default defineUI({
   setup() {
@@ -74,12 +75,15 @@ export default defineUI({
             <div
               class={cx(group, "flex items-center p-4px rounded bg-[#262626]")}
             >
+              <IconFit class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800" 
+               onClick={() => editorCtrl.autoInScreen()}
+              />
               <IconReduce
-                class="ml-5px text-light-50 text-30px cursor-pointer transition hover:bg-dark-800"
+                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                 onClick={() => editorCtrl.setScale(scale - 0.1)}
               />
               <IconPlus
-                class="text-light-50 text-30px cursor-pointer transition hover:bg-dark-800"
+                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                 onClick={() => editorCtrl.setScale(scale + 0.1)}
               />
               <InputNumber
@@ -88,7 +92,7 @@ export default defineUI({
                 bordered={false}
                 controls={false}
                 value={scale}
-                class="!w-60px !ml-10px text-center !bg-[#303030] rounded"
+                class="!w-60px text-center !bg-[#303030] rounded"
                 formatter={(v: any) => Math.floor(v * 100) + "%"}
                 onPressEnter={(e: any) => {
                   const newScale = e.target.value.split("%")[0] / 100;
@@ -128,14 +132,22 @@ const bottomBtnStyles = css`
 `;
 
 const group = css`
+  .ant-input-number,
+  .inficon {
+    transition: all 0.3s ease-in-out;
+  }
   .inficon {
-    transition: all 0.2s ease-in;
-    margin-right: -37px;
+    margin-right: -36px;
   }
   .ant-input-number-input {
+    height: 36px;
+    line-height: 36px;
     text-align: center;
   }
   &:hover {
+    .ant-input-number {
+      margin-left: 10px;
+    }
     .inficon {
       margin-right: 0;
     }

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

@@ -3,6 +3,7 @@ import { EditorModule } from "../../module";
 import { reactive } from "vue";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { RxValue } from "../ReactCtrl/rxValue";
+import { CardState } from "../../objects/DesignTemp";
 
 
 // const WidthHeightRatios = [1.377, 1.777, 2.177];
@@ -19,24 +20,29 @@ const PCRates = [0.42, 0.8];
 export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
 export class ScreenCtrl extends ModuleControl<EditorModule> {
    state = RxValue.create({
-      useFor: "mobile" as "mobile" | "pc", // pc 还是 手机
-      pageMode: "long" as "long" | "short", //长页面还是短页面(一屏高度)
-      pageSizeType: "normal" as "normal" | "long" | "short", //适配类型 长屏 正常 短屏幕
-
+      screen: {
+            useFor: "mobile" as "mobile" | "pc", // pc 还是 手机
+            pageMode: "long" as "long" | "short", //长页面还是短页面(一屏高度)
+            pageSizeType: "normal" as "normal" | "long" | "short", //适配类型 长屏 正常 短屏幕
+      },
       docWidth: window.innerWidth,   //实际屏幕宽度
       docHeight: window.innerHeight,  //实际屏幕高度
       safeFactor: 0.8,
    })
+
    get isShortPage () {
-      return this.state.pageMode == "short";
+      return this.state.screen.pageMode == "short";
+   }
+   get isLongPage() {
+      return this.state.screen.pageMode == "long";
+   }
+   get currScreenId() {
+      return this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
    }
    
    initEvent() {
       if ( !this.store.isEditMode ) return;
-
-      this.state.onUseForChanged(()=>this.updateAdapterState());
-      this.state.onPageModeChanged(()=>this.updateAdapterState());
-      this.state.onPageSizeTypeChanged(()=>this.updateAdapterState());
+      this.state.onScreenChanged(()=>this.updateAdapterState());
 
       const size = 3;
       const safeFactor =  Math.pow((PCRates[0] / PCRates[1]) , 1.0 / size);
@@ -56,12 +62,14 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
 
    getAdapterIndex() {
-      if(this.state.pageMode == "long") return 1;
-      return ["short", "normal", "long"].indexOf(this.state.pageSizeType)
+      if(this.state.screen.pageMode == "long") return 1;
+      return ["short", "normal", "long"].indexOf(this.state.screen.pageSizeType)
    }
 
    updateAdapterState() {
       if (!this.store.rootPage) return;
+      
+      this.restorScreenPage();
 
       this.store.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
@@ -72,15 +80,65 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       const h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
 
       this.controls.editorCtrl.state.setPage({w, h});
-
-     
       this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
-      this.store.rootPage.layout.size[1] = this.getCurrScreenHeight();
+      this.store.rootPage.layout.size[1] = this.getCurrScreenHeight(); 
+   }
+
+   restorScreenPage() {
+      if (!this.store.rootPage) return;
+
+      //获取当前screen的配置
+      const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
+      const screenCards = this.store.designData.compScreenMap[screenId] || [];
+
+      //刷新当前card的配置
+      this.store.streamCardIds.forEach(c=>{
+         const card = this.helper.findComp(c) as DesignComp;
+         const screenCard = screenCards.find(item=>item.id == c)
+         let newChilds:string[] = [];
+         let childrs = screenCard?.children || [];
+         childrs.forEach(item=>{
+            newChilds.push(item.id);
+            const screenComp = this.helper.findComp(item.id) as DesignComp;
+            screenComp.layout.size[0] = item.size[0];
+            screenComp.layout.size[1] = item.size[1];
+            screenComp.layout.transformMatrix = item.matrix;
+         })
+         card.children.default = newChilds;
+      })
+   }
+
+   saveScreenPage() {
+      //获取当前screen的配置
+      const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
+      const screenCards =  ScreenCtrl.createScreenCards(this.store.compMap, this.store.rootPage);
+      if (!this.store.designData.compScreenMap) this.store.designData.compScreenMap = {};
+      this.store.designData.compScreenMap[screenId] = screenCards;
+   }
+
+  static createScreenCards(compMap:any, rootPage: DesignComp) {
+      //获取当前screen的配置
+      const screenCards =  [] as CardState [];
+      const streamCardIds = rootPage.children.default || [];
+      streamCardIds.forEach(c=>{
+         const card = compMap[c] as DesignComp;
+         const screenCard :CardState = {
+            id: c,
+            children: []
+         }
+         let childrs = card.children.default || [];
+         childrs.forEach(item=>{
+            const c = compMap[item] as DesignComp;
+            screenCard.children.push({id: item, size: c.layout.size, matrix: c.layout.transformMatrix as string} );
+         })
+         screenCards.push(screenCard);
+      })
+      return screenCards;
    }
 
    getCurrScreenHeight() {
       const pageValue = this.state
-      if ( pageValue.useFor == "pc") {
+      if ( pageValue.screen.useFor == "pc") {
          return PCDesignHeight;
       }
       const currScreenIndex = this.getAdapterIndex();
@@ -90,7 +148,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    getCurrScreenWidth() {
       const currScreenIndex = this.getAdapterIndex();
       const pageValue = this.state
-      if ( pageValue.useFor == "pc" ) {
+      if ( pageValue.screen.useFor == "pc" ) {
          return PCWidths[currScreenIndex];
       }
       return MobleDesignWidth

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

@@ -16,6 +16,7 @@ const ctrlState = {
   selected: [] as string[],
   type: 0,  // 1 ctrlc 2 ctrlx
   cardId: "", //当前的卡片Id
+  screenId: "", //屏幕Id
   selWidth: 0,
   selX: 0,
   selY: 0
@@ -326,8 +327,14 @@ export const editActions = EditorModule.action({
   },
 
   ctrlc() {
-    //  console.log("contrc ", this.store.selected);
-    ctrlState.selected = this.store.selected.slice(0);
+    ctrlState.selected = []; 
+    const children = this.store.currStreamCard.children.default || [];
+    children.forEach(c=>{
+      if (this.store.selected.indexOf(c) > -1) {
+        ctrlState.selected.push(c);
+      }
+    })
+    ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 1;
     const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
@@ -390,10 +397,19 @@ export const editActions = EditorModule.action({
   ctrlx() {
     //console.log("ctrlv ", this.store.selected);
     //console.log("ctrlv ", this.store.selected);
-    ctrlState.selected = this.store.selected.slice(0);
+
+    //保持图层顺序
+    ctrlState.selected = []; 
+    const children = this.store.currStreamCard.children.default || [];
+    children.forEach(c=>{
+      if (this.store.selected.indexOf(c) > -1) {
+        ctrlState.selected.push(c);
+      }
+    })
+
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 2;
-    
+    ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
     ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
     objc.setPivot(0);
@@ -435,8 +451,8 @@ export const editActions = EditorModule.action({
 
       deepCopy(cp);
     });
-
     this.actions.addComps(news);
+
     this.actions.selectObjs(news);
 
     setTimeout(() => {
@@ -460,7 +476,10 @@ export const editActions = EditorModule.action({
           this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
           return;
       }
-      this.controls.selectCtrl.translate(20, 20);
+
+      if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
+        this.controls.selectCtrl.translate(20, 20);
+      }
     }, 100);
   },
 
@@ -606,14 +625,14 @@ export const editActions = EditorModule.action({
   async saveDesign() {
     try {
       // 清除无用组件
-      this.helper.clearUnusedComps(this.store.designData.compMap);
+      this.helper.clearProjectUnusedComps(this.store.designData.compMap);
       const c = this.controls.screenCtrl;
-
+      c.saveScreenPage();
       const root = this.helper.findRootComp() as DesignComp;
-      root.value.useFor = c.state.useFor;
-      root.value.pageMode = c.state.pageMode;
-      root.value.pageSizeType = c.state.pageSizeType;
-
+      root.value.useFor = c.state.screen.useFor;
+      root.value.pageMode = c.state.screen.pageMode;
+      root.value.pageSizeType = c.state.screen.pageSizeType;
+      
       // 封面截屏
       if (!this.store.designData.thumbnail) {
         await this.actions.updateThumbnailByScreenshot();

src/modules/editor/module/actions/init.ts

@@ -30,11 +30,6 @@ export const initActions = EditorModule.action({
     const ret = await this.https.getDesignDetail(id, { isSys });
     this.store.setDesignData(ret.result);
 
-    const root = this.helper.findRootComp() as DesignComp;
-    this.controls.screenCtrl.state.useFor = root.value.useFor || "mobile";
-    this.controls.screenCtrl.state.pageMode = root.value.pageMode || "long";
-    this.controls.screenCtrl.state.pageSizeType = root.value.pageSizeType || "normal";
-  
     //设置组件父子关系
     const ite = (root:any)=> {
       const cards = root.children?.default || [];
@@ -47,6 +42,15 @@ export const initActions = EditorModule.action({
       })
     }
     ite(this.store.rootPage);
+
+    const root = this.helper.findRootComp() as DesignComp;
+    this.controls.screenCtrl.state.screen.useFor= root.value.useFor || "mobile"
+    this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode || "long"  
+    this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType || "normal"
+
+    if ( !root.value.useFor && !root.value.pageMode ) {//模板版本
+
+    }
   },
 
   async initWkDesign(id: string) {

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

@@ -147,12 +147,49 @@ export const helpers = EditorModule.helper({
       return used;
     };
     getUsedIds([rootId]);
+
+    Object.keys(compMap).forEach((compId) => {
+      if (!used.has(compId)) {
+        delete compMap[compId];
+      }
+    });
+  },
+
+  clearProjectUnusedComps(compMap: Record<string, DesignComp>) {
+    const used = new Set<string>();
+    const getUsedIds = (ids: string[]) => {
+      ids.forEach((id) => {
+        const comp = compMap[id];
+        if (!comp) return;
+        used.add(id);
+        getUsedIds(comp.getChildIds());
+      });
+      return used;
+    };
+    getUsedIds(["root"]);
+
+    const compScreenMap = this.store.designData.compScreenMap
+    const keys = Object.keys(compScreenMap) 
+    keys.forEach(k=>{
+        const card = compScreenMap[k];
+        card.forEach(c=>{
+          c.children.forEach(item=>{
+            const comp = compMap[item.id];
+            if (!comp) return;
+            used.add(item.id);
+            getUsedIds([item.id])
+          })
+        })
+    })
+    
     Object.keys(compMap).forEach((compId) => {
       if (!used.has(compId)) {
         delete compMap[compId];
       }
     });
   },
+
+
   getPointOffsetWith(e: MouseEvent, dom: HTMLElement) {
     const domRect = dom.getBoundingClientRect();
     return {

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

@@ -179,7 +179,6 @@ export const store = EditorModule.store({
     },
 
     deleteComp(compId: string) {
-      const { compMap } = this.store.designData;
       const parentComp = this.helper.findParentComp(compId);
       let deleteOK = false;
       if (parentComp) {
@@ -196,12 +195,6 @@ export const store = EditorModule.store({
       }
 
       if (deleteOK) {
-        //不删除孩子节点
-        // const comp = this.helper.findComp(compId) as DesignComp;
-        // const ids = comp.getChildIds();
-        // [compId, ...ids].forEach((id) => {
-        //   delete compMap[id];
-        // });
         delete this.store.compPids[compId];
       }
     },

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

@@ -1,5 +1,11 @@
 import { DesignComp } from "./DesignComp";
 import { dataTransform } from "./versions/1.0.0";
+import { dataTransform as V101Upgrade } from "./versions/1.0.1";
+
+export type CardState = {
+  id: string;
+  children: {id:string, matrix: string, size: [number, number, { unit?: "px" | "%" }?]}[]
+}
 
 export class DesignTemp {
   version?: string;
@@ -7,13 +13,14 @@ export class DesignTemp {
   title = "";
   desc = "";
   pageStyle?: any;
-  content: string[] = ["root"];
+  content: string[] = ["root"]; //rootPcShort rootPcNormal rootPcLong rootMobShort rootMobLong
   thumbnail?: string;
   compMap: { [compId: string]: DesignComp } = {};
+  compScreenMap: {[Screen: string]: CardState[]} = {}
 
   constructor(data?: Partial<DesignTemp>) {
     if (!data) return;
-    Object.assign(this, dataTransform(data));
+    Object.assign(this, V101Upgrade(dataTransform(data)));
     // 初始化DesignComp
     Object.entries(this.compMap).forEach(([key, value]) => {
       this.compMap[key] = new DesignComp(value);

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

@@ -0,0 +1,14 @@
+import { ScreenCtrl } from "@/modules/editor/controllers/ScreenCtrl";
+export function dataTransform(data: any) {
+  if (data.version == "1.0.1") {
+    return data;
+  }
+  data.version = "1.0.1";
+  if (!data.compScreenMap) { //默认为手机 long页面
+        data.compMap.root.value.pageMode = "long";
+        data.compMap.root.value.useFor = "mobile";
+        data.compMap.root.value.pageSizeType = "normal";
+      data.compScreenMap = {"mobilelongnormal": ScreenCtrl.createScreenCards(data.compMap, data.compMap.root)}
+   }
+   return data;
+}