修复百分比高度预览时bug

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

@@ -1,4 +1,4 @@
-import { Comp_Design_Size } from "@/modules/editor/dicts/CompOptions";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { PageForm } from "./PageForm";
 
@@ -15,7 +15,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
-    size: [...(Comp_Design_Size as [number, number])],
+    size: [...(Design_Page_Size as [number, number])],
     background: {
       color: "#ffffff",
     },

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

@@ -3,10 +3,11 @@ import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { css } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { defineComponent, onMounted, ref } from "vue";
-import { string ,bool} from "vue-types";
+import { string, bool } from "vue-types";
 import { useEditor } from "../../..";
-import { useCompRef , useCompEditLayerRef} from "./hooks";
+import { useCompRef, useCompEditLayerRef } from "./hooks";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 
 export const View = defineComponent({
   props: {
@@ -17,7 +18,9 @@ export const View = defineComponent({
   setup(props, { slots, emit }) {
     const { store, actions, helper, controls } = useEditor();
     const compRef = useCompRef(props.compId);
-    const editorLayerRef = props.editlayer? useCompEditLayerRef(props.compId) : ref();
+    const editorLayerRef = props.editlayer
+      ? useCompEditLayerRef(props.compId)
+      : ref();
 
     return () => {
       const comp = helper.findComp(props.compId);
@@ -30,18 +33,23 @@ export const View = defineComponent({
       const m = obj.worldTransform.clone();
       m.invert();
 
-      let isFocus = store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId;
+      let isFocus =
+        store.isEditMode &&
+        store.selected.length > 1 &&
+        store.lastSelected == props.compId;
       isFocus = isFocus || store.currCompId == props.compId;
-       
+
       const style = helper.createStyle(comp.layout, comp);
       const page = helper.findRootComp() as DesignComp;
 
-      if (isStreamCard && page.value.pageMode == "short" && store.isPreview) {
+      if (isStreamCard && page.value.pageMode == "short" && store.isDisplay) {
         //  const cards = store.streamCardIds;
         //  const index = cards.indexOf(props.compId)
         //  style.position = "absolute";
         //  style.top = index * 100  + "vh";
-         style.height = "100vh"
+        style.height = helper.designToNaturalSize(Design_Page_Size[1], {
+          adaptiveH: true,
+        });
       }
 
       return (
@@ -49,10 +57,12 @@ export const View = defineComponent({
           ref={compRef}
           class={[
             viewStyle,
-            store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
+            store.isEditMode &&
+              controls.selectCtrl._state != 0 &&
+              editCompStyle,
             isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
-            isFocus  && AnchorCompStyle
+            isFocus && AnchorCompStyle,
           ]}
           style={style}
           onClick={(e) => {
@@ -77,13 +87,15 @@ export const View = defineComponent({
             {slots.default?.()}
           </div>
 
-          {store.isEditMode && isStreamCard && store.currStreamCardId == props.compId && <Hudop compId={props.compId} />}
+          {store.isEditMode &&
+            isStreamCard &&
+            store.currStreamCardId == props.compId && (
+              <Hudop compId={props.compId} />
+            )}
 
-          {
-             store.isEditMode && props.editlayer && <div ref={editorLayerRef} class={editAreaStyle}>
-                
-             </div>
-          }
+          {store.isEditMode && props.editlayer && (
+            <div ref={editorLayerRef} class={editAreaStyle}></div>
+          )}
         </div>
       );
     };
@@ -188,13 +200,13 @@ const editAreaStyle = css`
   width: 100%;
   height: 100%;
   pointer-events: none;
-`
+`;
 
 const editAreaTestStyle = css`
-   position: absolute;
-   top: 0;
+  position: absolute;
+  top: 0;
   left: 0;
   width: 100px;
   height: 100px;
   background-color: red;
-`
+`;

src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -22,7 +22,7 @@ export function useCompRef(compId: string) {
       compRef.value.compKey= comp.compKey;
     }
 
-    if (comp?.compKey == "Page" && store.isPreview && store.rootPage.value.pageMode == "short") {
+    if (comp?.compKey == "Page" && !store.isEditMode && store.rootPage.value.pageMode == "short") {
       let downY = 0;
       compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
           //  e.preventDefault();

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -21,7 +21,7 @@ export const Component = createUIComp({
       });
     }
 
-    if (editor.store.isPreview) {
+    if (!editor.store.isEditMode) {
       watch(
         () => editor.store.compPids[props.compId],
         () => {

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

@@ -11,9 +11,9 @@ import { GroupNumber } from "../formItems/GroupNumber";
 
 export const layoutColumns: ColumnItem[] = [
   {
-    label: "尺寸",
+    // label: "尺寸",
     dataIndex: "layout.size",
-    component: GroupNumber,
+    component: Size,
     props: {
       labels: ["宽度", "高度"],
     },

src/modules/editor/dicts/CompOptions.ts

@@ -1 +1,3 @@
-export const Comp_Design_Size = [750, 1300];
+export const Design_Page_Size = [750, 1300];
+export const Viewport_Size = 375;
+export const Design_Pixel_Ratio = Design_Page_Size[0] / Viewport_Size;

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

@@ -1,21 +1,30 @@
+import { isPc } from "@queenjs/utils";
 import { nanoid } from "nanoid";
 import { EditorModule } from "..";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
+import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
-  designToNaturalSize(value: number) {
-    // return parseFloat((value / 100).toFixed(2)) + "rem";
-    return value / 2 + "px";
-  },
   pxToDesignSize(value: number) {
-    return value * 2;
+    return value * Design_Pixel_Ratio;
   },
   designSizeToPx(value: number) {
-    return value / 2.0;
+    return value / Design_Pixel_Ratio;
+  },
+  designToNaturalSize(
+    value: number,
+    options?: { adaptiveH?: boolean }
+  ): string {
+    if (options?.adaptiveH && !isPc()) {
+      value =
+        value *
+        ((window.innerHeight * Design_Pixel_Ratio) / Design_Page_Size[1]);
+    }
+    return this.helper.designSizeToPx(value) + "px";
   },
 
   findComp(compId: string) {
@@ -94,7 +103,7 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout> & { size: any[] }, comp:DesignComp) {
+  createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
     return createCompStyle(this, layout, comp);
   },
   isCurrComp(compId: string) {
@@ -108,11 +117,14 @@ export const helpers = EditorModule.helper({
     return i >= 0;
   },
   isCompCanDelete(compId: string): boolean {
-    return this.helper.isStreamCardChild(compId) || (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1);
+    return (
+      this.helper.isStreamCardChild(compId) ||
+      (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1)
+    );
   },
 
   isShowSaveComp(comp: DesignComp): boolean {
-    if ( !this.helper.isStreamCardChild(comp.id) ) return false;
+    if (!this.helper.isStreamCardChild(comp.id)) return false;
     return true;
   },
 

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

@@ -23,21 +23,21 @@ export const store = EditorModule.store({
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
-    compEditReslut: 0, // -1 取消， 1 确定 
-    lastSelected: "",   //最后上传
+    compEditReslut: 0, // -1 取消， 1 确定
+    lastSelected: "", //最后上传
 
     shortPage: {
-       index: 0,
-       offset: 0,
-       isMoving:false,
-    }
+      index: 0,
+      offset: 0,
+      isMoving: false,
+    },
   }),
   getters: {
     rootPage(state) {
-      return state.designData.compMap["root"] as DesignComp
+      return state.designData.compMap["root"] as DesignComp;
     },
     isEditMode(): boolean {
-      return !this.store.isPreview;
+      return !this.store.isPreview && !this.store.isDisplay;
     },
     isEditPage(state) {
       return state.mode === "editPage";
@@ -48,7 +48,7 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
-    isDisplay(state){
+    isDisplay(state) {
       return state.mode === "display";
     },
     compMap(state) {

src/modules/editor/objects/DesignTemp/creates/CompSize.ts

@@ -1,24 +1,24 @@
-import { Comp_Design_Size } from "@/modules/editor/dicts/CompOptions";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 
 export const CompSizeOpts = {
   w: {
     label: "宽度",
     vUnit: "vw",
     getVSize(w: number) {
-      return (w / Comp_Design_Size[0]) * 100;
+      return (w / Design_Page_Size[0]) * 100;
     },
     getPxSize(w: number) {
-      return (w * Comp_Design_Size[0]) / 100;
+      return (w * Design_Page_Size[0]) / 100;
     },
   },
   h: {
     label: "高度",
     vUnit: "vh",
     getVSize(h: number) {
-      return (h / Comp_Design_Size[1]) * 100;
+      return (h / Design_Page_Size[1]) * 100;
     },
     getPxSize(h: number) {
-      return (h * Comp_Design_Size[1]) / 100;
+      return (h * Design_Page_Size[1]) / 100;
     },
   },
 };

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -3,7 +3,6 @@ import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
 import { DesignComp } from "../DesignComp";
 import { compMasks } from "./CompMasks";
-import { CompSizeOpts } from "./CompSize";
 
 export function createCompStyle(
   module: EditorModule,
@@ -84,11 +83,7 @@ export function createCompStyle(
       style.width = designToNaturalSize(w);
     }
     if (h) {
-      if (module.store.isDisplay && hUnit === "%") {
-        style.height = CompSizeOpts.h.getVSize(h) + CompSizeOpts.h.vUnit;
-      } else {
-        style.height = designToNaturalSize(h);
-      }
+      style.height = designToNaturalSize(h, { adaptiveH: hUnit === "%" });
     }
   }
 
@@ -98,9 +93,9 @@ export function createCompStyle(
 
   if (layout.transformMatrix) {
     const m = Matrix.createFromMatrixStr(layout.transformMatrix);
-    if (module.store.isDisplay) {
-      m.ty = (pxToDesignSize(m.ty) / 1300) * window.innerHeight;
-    }
+    m.ty = parseFloat(
+      designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
+    );
     style.transform = m.getMatrixStr(); //layout.transformMatrix;
     style.transformOrigin = "0 0";
   } else {

src/pages/h5/share/Promotion.tsx

@@ -1,7 +1,5 @@
 import { initEditor } from "@/modules/editor";
-import {
-  Comp_Design_Size
-} from "@/modules/editor/dicts/CompOptions";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { isPc } from "@queenjs/utils";
 import { defineComponent } from "vue";
 
@@ -47,9 +45,9 @@ export default defineComponent(() => {
       <div
         class={isPc() ? `scrollbar overflow-x-hidden` : `overflow-x-hidden`}
         style={{
-          height: isPc()
-            ? editor.helper.designSizeToPx(Comp_Design_Size[1])
-            : "100%",
+          height: editor.helper.designToNaturalSize(Design_Page_Size[1], {
+            adaptiveH: true,
+          }),
         }}
       >
         <editor.components.Preview />