添加屏幕模式

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

@@ -24,7 +24,17 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
         value: muisc,
         options: [{ label: "无", value: "" }, ...MusicOptions],
       },
-    },{
+    },
+    {
+      label: "屏幕类型",
+      dataIndex: "value.useFor",
+      component: Select,
+      props: {
+        class: "w-full flex-1 overflow-hidden",
+        options: [{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }],
+      },
+    },
+    {
       label: "页面模式",
       dataIndex: "value.pageMode",
       component: Select,
@@ -32,6 +42,14 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
         class: "w-full flex-1 overflow-hidden",
         options: [{ label: "长页", value: "long" }, { label: "翻页", value: "short" }],
       },
+    },{
+      label: "屏幕长度",
+      component: Select,
+      dataIndex: "value.pageSizeType",
+      props: {
+        class: "w-full flex-1 overflow-hidden",
+        options: [{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}],
+      },
     },
     {
       dataIndex: "value.music",
@@ -58,7 +76,7 @@ export const PageForm = defineComponent({
 
       return (
         <div class={formStyle}>
-          <div class="text-white">页面样式</div>
+          <div class="text-white">作品属性</div>
           <FormUI
             data={props.component}
             columns={styleColumns(curValue?.value || "")}

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

@@ -10,7 +10,11 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: {},
+  value: {
+    useFor: "mobile",
+    pageMode: "long",
+    pageSizeType: "normal"
+  },
   children: {
     default: () => [] as string[],
   },

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

@@ -22,7 +22,7 @@ export class AnimCtrl extends ModuleControl<EditorModule> {
 
      }).run();
   }
-
+  
   startAnim(index:number) {
     const childrens = this.helper.findCardAllChildren(index);
 

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

@@ -0,0 +1,47 @@
+import { Effect, ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import { reactive } from "vue";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+
+
+// const WidthHeightRatios = [1.377, 1.777, 2.177];
+
+const MobleDesignWidth = 750;
+const MobleSafeHeights = [860, 1080, 1300]
+const MobleHeights = [1080, 1300, 1520]
+
+
+export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
+export class ScreenCtrl extends ModuleControl<EditorModule> {
+   state = reactive({
+      currScreenIndex: 1, //普通屏幕
+      safeTip: 0.5      
+   })
+   initEvent() {
+       //监听页面的模式
+     Effect.value(()=>this.store.rootPage?.value).item((v)=>v?.pageMode && v.pageSizeType, (pageValue)=>{
+         console.log("pageMode=>change", pageValue)
+
+         const types = ["short", "normal", "long"];
+         let i = types.indexOf(pageValue.pageSizeType)
+         if (i == -1) i = 1;
+         this.state.currScreenIndex = i;
+
+         if (pageValue.pageMode == "short") {
+            this.onSetShortMode()
+         }
+      }).run();
+   }
+   getCurrScreenHeight() {
+
+
+      return MobleHeights[this.state.currScreenIndex];
+   }
+
+   onSetShortMode() {
+      this.store.streamCardIds.forEach(c=>{
+         const card = this.helper.findComp(c) as DesignComp;
+         card.setH(this.getCurrScreenHeight());
+      })
+   }
+}

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

@@ -173,6 +173,11 @@ export const helpers = EditorModule.helper({
 
     const compMap = this.store.designData.compMap;
     const card = compMap[streamCardId];
+    if (this.store.isShortPage) {
+       card.setH(this.controls.screenCtrl.getCurrScreenHeight());
+       return;
+    }
+    
     const childs = card.children.default || [];
     let maxH = 0,
       n = childs.length;

src/modules/editor/module/index.ts

@@ -24,6 +24,7 @@ import { ImageCropperCtrl } from "../controllers/CropperCtrl";
 import { MediaCtrl } from "../controllers/MediaCtrl/indext";
 import { AnimCtrl } from "../controllers/AnimCtrl";
 import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
+import { ScreenCtrl } from "../controllers/ScreenCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -65,13 +66,16 @@ export class EditorModule extends ModuleRoot {
     cropCtrl: new ImageCropperCtrl(this),
     mediaCtrl: new MediaCtrl(this),
     textEditorCtrl: new TextEditorCtrl(this),
-    animCtrl: new AnimCtrl(this)
+    animCtrl: new AnimCtrl(this),
+    screenCtrl: new ScreenCtrl(this),
   };
+
   compObjsMap = new Map<string, CompObject>();
 
   onReady() {
     this.actions.init();
     this.controls.animCtrl.initEvent();
+    this.controls.screenCtrl.initEvent();
   }
 
   jumpIndexHtml(route = "#/") {

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

@@ -33,6 +33,10 @@ export const store = EditorModule.store({
     },
   }),
   getters: {
+    isShortPage(state) {
+      return state.designData.compMap["root"]?.value.pageMode == "short";
+    },
+
     rootPage(state) {
       return state.designData.compMap["root"] as DesignComp;
     },

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

@@ -93,9 +93,9 @@ export function createCompStyle(
 
   if (layout.transformMatrix) {
     const m = Matrix.createFromMatrixStr(layout.transformMatrix);
-    m.ty = parseFloat(
-      designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
-    );
+    // m.ty = parseFloat(
+    //   designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
+    // );
     style.transform = m.getMatrixStr(); //layout.transformMatrix;
     style.transformOrigin = "0 0";
   } else {