添加翻页模式

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

@@ -23,6 +23,14 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
         value: muisc,
         options: [{ label: "无", value: "" }, ...MusicOptions],
       },
+    },{
+      label: "页面模式",
+      dataIndex: "value.pageMode",
+      component: Select,
+      props: {
+        class: "w-full flex-1 overflow-hidden",
+        options: [{ label: "长页", value: "long" }, { label: "翻页", value: "short" }],
+      },
     },
     {
       dataIndex: "value.music",

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

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { defineComponent , reactive} from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { useEditor } from "../../../..";
@@ -13,21 +13,35 @@ export const Component = defineComponent({
   },
   setup(props, { slots }) {
     const editor = useEditor();
-    const { helper } = editor;
+    const { helper, store } = editor;
     const compRef = useCompRef(props.compId);
+
+  
+
     return () => {
-      const { children, layout, value } = useCompData(props.compId);
+      const comp = useCompData(props.compId);
+      const { children, layout, value } = comp;
       const compMusic = value.music || "";
       const curValue = MusicOptions.find((e) => {
         return e.value == compMusic;
       });
+      const style = helper.createStyle(layout || { size: [750] }, comp);
+      if (comp.value.pageMode == "short") {
+        style.height = "100%";
+      }
+
+      const contextStyle:any = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
+      if (!store.shortPage.isMoving) {
+        contextStyle.transition = "transform .4s ease-out";
+      }
+
       return (
         <div
           ref={compRef}
-          style={helper.createStyle(layout || { size: [750] })}
-          class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
+          style={style}
+          class={[comp.value.pageMode != "short" && "!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
         >
-          <div class="relative z-1000">
+          <div class="relative z-1000" style={contextStyle}>
             {slots.Container?.(
               children.default.map((compId) => {
                 const comp = helper.findComp(compId);

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

@@ -6,6 +6,7 @@ import { defineComponent, onMounted, ref } from "vue";
 import { string ,bool} from "vue-types";
 import { useEditor } from "../../..";
 import { useCompRef , useCompEditLayerRef} from "./hooks";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 export const View = defineComponent({
   props: {
@@ -32,6 +33,17 @@ export const View = defineComponent({
       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) {
+        //  const cards = store.streamCardIds;
+        //  const index = cards.indexOf(props.compId)
+        //  style.position = "absolute";
+        //  style.top = index * 100  + "vh";
+         style.height = "100vh"
+      }
+
       return (
         <div
           ref={compRef}
@@ -42,7 +54,7 @@ export const View = defineComponent({
             store.currStreamCardId == props.compId && CurrCompStyle,
             isFocus  && AnchorCompStyle
           ]}
-          style={helper.createStyle(comp.layout)}
+          style={style}
           onClick={(e) => {
             if (!store.isEditMode) {
               e.stopPropagation();

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

@@ -21,6 +21,54 @@ export function useCompRef(compId: string) {
       compRef.value.compId= compId;
       compRef.value.compKey= comp.compKey;
     }
+
+    if (comp?.compKey == "Page" && store.isPreview && store.rootPage.value.pageMode == "short") {
+      let downY = 0;
+      compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
+          //  e.preventDefault();
+          //  e.stopPropagation();
+
+           console.log("touch start");
+           store.shortPage.offset = 0;
+
+           downY = e.targetTouches[0].clientY;
+           store.shortPage.isMoving = false;
+      })
+
+      compRef.value.addEventListener("touchmove", (e:TouchEvent)=>{
+        e.preventDefault();
+        e.stopPropagation();
+
+        let offset = e.targetTouches[0].clientY -  downY
+        console.log("touch moving", offset);
+        store.shortPage.isMoving = true;
+        if (offset < 0 ) {
+           if (store.shortPage.index == store.streamCardIds.length -1) {
+            offset = 0;
+           }
+        }
+        if (offset > 0 ) {
+          if (store.shortPage.index == 0) {
+            offset = 0;
+          }
+        }
+        store.shortPage.offset = offset;
+      })
+
+      compRef.value.addEventListener("touchend", (e:TouchEvent)=>{
+        store.shortPage.isMoving = false;
+        if (store.shortPage.offset < 0 ) {
+             store.shortPage.index +=1;
+        } 
+        if (store.shortPage.offset > 0 ) {
+          store.shortPage.index -=1;
+          if (store.shortPage.index < 0 ) {
+            store.shortPage.index = 0;
+          }
+        }
+        store.shortPage.offset = 0;
+      });
+    }
   });
   return compRef;
 }

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

@@ -94,8 +94,8 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout> & { size: any[] }) {
-    return createCompStyle(this, layout);
+  createStyle(layout: Partial<Layout> & { size: any[] }, comp:DesignComp) {
+    return createCompStyle(this, layout, comp);
   },
   isCurrComp(compId: string) {
     return this.store.currCompId === compId;

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

@@ -24,9 +24,18 @@ export const store = EditorModule.store({
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
     compEditReslut: 0, // -1 取消， 1 确定 
-    lastSelected: ""   //最后上传
+    lastSelected: "",   //最后上传
+
+    shortPage: {
+       index: 0,
+       offset: 0,
+       isMoving:false,
+    }
   }),
   getters: {
+    rootPage(state) {
+      return state.designData.compMap["root"] as DesignComp
+    },
     isEditMode(): boolean {
       return !this.store.isPreview;
     },

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

@@ -2,12 +2,15 @@ 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 { DesignComp } from "../DesignComp";
 
-export function createCompStyle(module: EditorModule, layout: Layout) {
+export function createCompStyle(module: EditorModule, layout: Layout,  comp:DesignComp) {
   const { designToNaturalSize } = module.helper;
   const style: any = {};
   const transform: any = {};
 
+
+
   // if (layout.alignSelf) {
   //   style.alignSelf = layout.alignSelf;
   // }
@@ -95,7 +98,7 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
       style.backgroundColor = layout.background.color;
     }
   }
-
+  
   return style;
 }