添加自适应高度

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

@@ -12,7 +12,7 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
     const { store, controls } = useEditor();
-    const img = useImage(() => ({ value: comp.value, size: comp.layout.size }));
+    const img = useImage(() => ({ value: comp.value, size: comp.layout.size.slice(0, 2) as number[] }));
 
     async function changeVal() {
       if (!store.isEditMode) return;

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

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

src/modules/editor/components/CompUI/formItems/Size.tsx

@@ -1,54 +1,90 @@
+import { CompSizeOpts } from "@/modules/editor/objects/DesignTemp/creates/CompSize";
 import { InputNumber, Select } from "ant-design-vue";
-import { defineComponent, reactive } from "vue";
+import { defineComponent } from "vue";
 import { any } from "vue-types";
 
-const labels = ["宽度", "高度"];
 const selectOptions = [
-  { value: "px", label: "像素" },
-  { value: "%", label: "百分比" },
+  { value: "px", label: "像素", options: { step: 1 } },
+  { value: "%", label: "比例", options: { step: 0.1, max: 100, min: 0 } },
 ];
 
 export const Size = defineComponent({
   props: {
-    value: any<number[]>().def([]),
+    value: any<[number, number, string?, string?]>().def([0, 0]),
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const state = reactive({
-      unit: "px",
-    });
+    const CompSizeOptsList = [CompSizeOpts.w, CompSizeOpts.h];
 
-    function changeVal(index: number, v: any) {
-      // const { value } = props;
-      // value[index] = parseInt(v) || 0;
-      // emit("change", value);
+    function changeVal(unit: any, index: number, v: any) {
+      const { value } = props;
+      value[index] = parseFloat(v) || 0;
+      if (unit === "%") {
+        value[index] = CompSizeOptsList[index].getPxSize(
+          value[index] as number
+        );
+      }
+      emit("change", value);
+    }
+
+    function changeUnit(index: number, unit: any) {
+      const { value } = props;
+      value[index + 2] = unit;
+      emit("change", value);
+    }
+
+    function fmtVal(val: number, unit: string, index: number) {
+      switch (unit) {
+        case "px":
+          return val.toFixed(0);
+        case "%":
+          return CompSizeOptsList[index].getVSize(val).toFixed(1);
+        default:
+          return "";
+      }
     }
 
     return () => {
-      let values = [...props.value];
+      const values = props.value.slice(0, 2) as number[];
+      const units = props.value.slice(2) as string[];
 
       return (
         <div class="flex space-x-10px">
-          {values.map((value, i) => (
-            <div key={i}>
-              <div class="mb-5px">{labels[i]}</div>
+          {values.map((value, i) => {
+            const unit = units[i] || selectOptions[0].value;
+            const inputOpts =
+              selectOptions.find((d) => d.value === unit)?.options || {};
+            return (
               <InputNumber
-                controls={false}
-                value={value}
-                onChange={changeVal.bind(null, i)}
-              />
-            </div>
-          ))}
-          <div>
-            <div class="mb-5px">单位</div>
-            <Select
-              value={state.unit}
-              class="min-w-85px"
-              options={selectOptions}
-              // @ts-ignore
-              onChange={(v) => (state.unit = v)}
-            ></Select>
-          </div>
+                key={i + unit}
+                value={fmtVal(value as number, unit, i)}
+                onChange={changeVal.bind(null, unit, i)}
+                {...inputOpts}
+              >
+                {{
+                  addonBefore() {
+                    return (
+                      <span class="-mx-8px">
+                        {CompSizeOptsList[i].label}
+                        <Select
+                          value={unit}
+                          onChange={changeUnit.bind(null, i)}
+                        >
+                          {selectOptions.map((d) => {
+                            return (
+                              <Select.Option key={d.value}>
+                                {d.value === "%" ? CompSizeOptsList[i].vUnit : d.value}
+                              </Select.Option>
+                            );
+                          })}
+                        </Select>
+                      </span>
+                    );
+                  },
+                }}
+              </InputNumber>
+            );
+          })}
         </div>
       );
     };

src/modules/editor/controllers/TransferCtrl/transforms/resize.ts

@@ -2,7 +2,7 @@ import { TransCreateFn, TransferCtrl } from "..";
 
 function getResize(this: TransferCtrl, direction: string) {
   const { transEvent, currComp } = this;
-  const size = [...(currComp.layout.size || [])];
+  const size = currComp.layout.size;
   if (direction.indexOf("x") != -1) {
     size[0] = transEvent.width + transEvent.offsetX * 2;
   }

src/modules/editor/dicts/CompOptions.ts

@@ -0,0 +1 @@
+export const Comp_Design_Size = [750, 1300];

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

@@ -832,7 +832,6 @@ export const editActions = EditorModule.action({
   },
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
-    comp.layout.size || (comp.layout.size = []);
     comp.layout.size[0] = 750;
   },
   //

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

@@ -39,6 +39,9 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
+    isDisplay(state){
+      return state.mode === "display";
+    },
     compMap(state) {
       return state.designData.compMap;
     },

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

@@ -67,16 +67,12 @@ export class DesignComp {
   }
 
   setH(height: number) {
-    if (!this.layout.size) this.layout.size = [];
     this.layout.size[1] = height;
   }
   setW(w: number) {
-    if (!this.layout.size) this.layout.size = [];
     this.layout.size[0] = w;
   }
   setSize(w: number, h: number) {
-    if (!this.layout.size) this.layout.size = [];
-
     this.layout.size[0] = w;
     this.layout.size[1] = h;
   }

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

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

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

@@ -1,10 +1,12 @@
 import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
 import { compMasks } from "./CompMasks";
-import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";
+// import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";
+import { CompSizeOpts } from "./CompSize";
+import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
 
 export function createCompStyle(module: EditorModule, layout: Layout) {
-  const { designToNaturalSize } = module.helper;
+  const { designToNaturalSize, pxToDesignSize } = module.helper;
   const style: any = {};
   const transform: any = {};
 
@@ -73,9 +75,17 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   }
 
   if (layout.size) {
-    const [w, h] = layout.size;
-    if (w) style.width = designToNaturalSize(w);
-    if (h) style.height = designToNaturalSize(h);
+    const [w, h, wUnit, hUnit] = layout.size;
+    if (w) {
+      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);
+      }
+    }
   }
 
   if (layout.position) {
@@ -83,7 +93,11 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   }
 
   if (layout.transformMatrix) {
-    style.transform = layout.transformMatrix;
+    const m = Matrix.createFromMatrixStr(layout.transformMatrix);
+    if (module.store.isDisplay) {
+      m.ty = (pxToDesignSize(m.ty) / 1300) * window.innerHeight;
+    }
+    style.transform = m.getMatrixStr(); //layout.transformMatrix;
     style.transformOrigin = "0 0";
   } else {
     const v = parseTransform(transform);

src/modules/editor/typings.ts

@@ -2,12 +2,12 @@ import { CompUI } from "./components/CompUI";
 
 export type ICompKeys = keyof typeof CompUI;
 
-export type EditorMode = "editPage" | "editComp" | "preview";
+export type EditorMode = "editPage" | "editComp" | "preview" | "display"
 
 export type Layout = {
   position?: "absolute";
   visible?: boolean;
-  size: number[]; // width height
+  size: [number, number, string?, string?]; // width height wUnit hUnit
   mask?: string;
   alignSelf?: string;
   transform?: {

src/pages/h5/share/Promotion.tsx

@@ -1,4 +1,7 @@
 import { initEditor } from "@/modules/editor";
+import {
+  Comp_Design_Size
+} from "@/modules/editor/dicts/CompOptions";
 import { isPc } from "@queenjs/utils";
 import { defineComponent } from "vue";
 
@@ -9,7 +12,7 @@ export default defineComponent(() => {
   const isSys = params.get("isSys");
   const isWk = params.get("isWk");
 
-  editor.actions.switchMode("preview");
+  editor.actions.switchMode("display");
 
   if (id) {
     if (isWk) {
@@ -41,7 +44,14 @@ export default defineComponent(() => {
 
   return () => (
     <div class="flex items-center justify-center h-100vh bg-gray-100">
-      <div class={isPc() ? `h-620px scrollbar overflow-x-hidden` : `h-full overflow-x-hidden`}>
+      <div
+        class={isPc() ? `scrollbar overflow-x-hidden` : `overflow-x-hidden`}
+        style={{
+          height: isPc()
+            ? editor.helper.designSizeToPx(Comp_Design_Size[1])
+            : "100%",
+        }}
+      >
         <editor.components.Preview />
       </div>
     </div>