添加页面适配

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

@@ -4,18 +4,27 @@ import { reactive } from "vue";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { RxValue } from "../ReactCtrl/rxValue";
 import { CardState } from "../../objects/DesignTemp";
+import { isPc } from "@queenjs/utils";
+
+const PCConst = {
+   minRate: 0.42,
+   maxRate: 0.8,
+   height: 1520,
+   factor: 0.8067,
+   widths: [1900, 2356, 2920],
+   ranges: [[0.64537, 0.8], [0.52063, 0.64537], [0.42, 0.52063]]
+}
 
+const MobileConst = {
+   minRate: 0.4495,
+   maxRate: 0.75,
+   width: 750,
+   factor: 0.84312,
+   heights: [1000, 1186, 1406],
+   ranges: [[0.63234, 0.75], [0.5331387120830735, 0.632340125298328], [0.4495, 0.5331387120830735]]
+}
 
-// const WidthHeightRatios = [1.377, 1.777, 2.177];
-
-const MobleDesignWidth = 750;
-const MobleSafeHeights = [860, 1080, 1300]
-const MobleHeights = [1080, 1300, 1520]
-
-const PCWidths = [] as number[];
-const PCDesignHeight = 1520
-const PCRates = [0.42, 0.8];
-
+const AllSize = ["short","normal", "long"];
 
 export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
 export class ScreenCtrl extends ModuleControl<EditorModule> {
@@ -43,29 +52,95 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    initEvent() {
       if ( !this.store.isEditMode ) return;
       this.state.onScreenChanged(()=>this.updateAdapterState());
+       
+      const {factor, sizes, ranges} = this.createSteps(MobileConst.width, MobileConst.minRate,  MobileConst.maxRate)
+      console.log("range=>", ranges, factor, sizes);
+
+      console.log( this.getRightScreenId() );
+   }
+
+   createSteps(base: number, min:number, max:number, size = 3) {
+      const factor =  Math.pow((min / max) , 1.0 / size);
+      const ranges = [];
+      const sizes = [];
 
-      const size = 3;
-      const safeFactor =  Math.pow((PCRates[0] / PCRates[1]) , 1.0 / size);
-      let min = 0.42;
-      const pcDesignWidthRanges = [];
       for (let i=0; i<size; i++) {
-         const w =  safeFactor * PCDesignHeight / min 
+         const w =  factor * base / min 
          let pre = min;
-         min = PCDesignHeight / w;
-         PCWidths.push( w )
-         pcDesignWidthRanges.push([pre, min])
+         min = base / w;
+         sizes.push( w )
+         ranges.push([pre, min])
       }
-      const t = PCWidths[0]
-      PCWidths[0] = PCWidths[2]
-      PCWidths[2] = t; 
-      this.state.safeFactor = safeFactor;
-   }
+      const t = sizes[0]
+      sizes[0] = sizes[2]
+      sizes[2] = t;
+      
+      const t2 = ranges[0]
+      ranges[0] = ranges[2]
+      ranges[2] = t2;
+
+      return {factor, sizes, ranges}
+   } 
 
    getAdapterIndex() {
       if(this.state.screen.pageMode == "long") return 1;
       return ["short", "normal", "long"].indexOf(this.state.screen.pageSizeType)
    }
 
+   applyScreen() {
+      const option = this.getRightScreenId();
+      if ( this.store.designData.compScreenMap?.[option.sreenId] ) {
+         this.restorScreenPage(option.sreenId);
+         return;
+      }
+
+      let n= AllSize.length;
+      while(n--) {
+         const screenId = option.device + option.pageMode + AllSize[n];
+         if ( this.store.designData.compScreenMap?.[screenId] ) {
+            this.restorScreenPage(screenId);
+            return;
+         }
+      }
+      if (option.pageMode == "short") {
+         option.pageMode = "long"; 
+         return;
+      }
+
+      if (option.pageMode == "long") {//如果长页面模式找一个合适端页面拼成长页面
+         let n= AllSize.length;
+         while(n--) {
+            const screenId = option.device + "short" + AllSize[n];
+            if ( this.store.designData.compScreenMap?.[screenId] ) {
+               this.restorScreenPage(screenId);
+               return;
+            }
+         }
+      }
+   }
+
+   getRightScreenId() {
+      const currScreen = isPc() ? "pc" : "mobile";
+      const rate = isPc() ? window.innerHeight / window.innerWidth : window.innerWidth / window.innerHeight;
+
+      const sizes = currScreen == "pc" ? PCConst.ranges : MobileConst.ranges;
+      let n = 3;
+      let index = 1;
+      while(n--) {
+        const m = sizes[n]
+        if (rate >= m[0]) {
+             index = n;
+        }
+      }
+      if (this.state.screen.pageMode == "long") index = 1;
+
+      console.log("rate=>", rate);
+
+      const sreenId = currScreen + this.state.screen.pageMode + ["short", "normal", "long"][index];
+      return {sreenId, index, device: currScreen, pageMode: this.state.screen.pageMode};
+
+   }
+
    updateAdapterState() {
       if (!this.store.rootPage) return;
       
@@ -82,14 +157,19 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       this.controls.editorCtrl.state.setPage({w, h});
       this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
       this.store.rootPage.layout.size[1] = this.getCurrScreenHeight(); 
+
+      this.state.safeFactor = this.state.screen.useFor == "pc" ? PCConst.factor : MobileConst.factor; 
    }
 
-   restorScreenPage() {
+   restorScreenPage(screenId = "") {
       if (!this.store.rootPage) return;
 
+   
       //获取当前screen的配置
-      const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
+      screenId = screenId ? screenId : this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
       const screenCards = this.store.designData.compScreenMap[screenId] || [];
+      
+      console.log("apply screen=>", screenId);
 
       //刷新当前card的配置
       this.store.streamCardIds.forEach(c=>{
@@ -139,18 +219,18 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    getCurrScreenHeight() {
       const pageValue = this.state
       if ( pageValue.screen.useFor == "pc") {
-         return PCDesignHeight;
+         return PCConst.height;
       }
       const currScreenIndex = this.getAdapterIndex();
-      return MobleHeights[currScreenIndex];
+      return MobileConst.heights[currScreenIndex];
    }
 
    getCurrScreenWidth() {
       const currScreenIndex = this.getAdapterIndex();
       const pageValue = this.state
       if ( pageValue.screen.useFor == "pc" ) {
-         return PCWidths[currScreenIndex];
+         return PCConst.widths[currScreenIndex];
       }
-      return MobleDesignWidth
+      return MobileConst.width;
    }
 }

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

@@ -48,9 +48,7 @@ export const initActions = EditorModule.action({
     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/pages/h5/share/Promotion.tsx

@@ -33,6 +33,9 @@ export default defineComponent(() => {
       };
       editor.controls.wxCtrl.setShareData(shareData);
       editor.controls.wxCtrl.setShare(shareData);
+      
+      editor.controls.screenCtrl.applyScreen();
+
     });
   }
   // fetch("https://restapi.amap.com/v3/ip?key=6f53b2e09f72ad63423b2da6e08b25d7").then(response=>{