不同设备，模式适配

package.json

@@ -74,7 +74,7 @@
     "rimraf": "^3.0.2",
     "rxjs": "^7.8.1",
     "scp2": "^0.5.0",
-    "swiper": "^8.4.4",
+    "swiper": "^10.1.0",
     "three": "^0.146.0",
     "vconsole": "^3.15.1",
     "vue": "^3.2.45",

src/assets/icons/components/IconArrowUp.tsx

@@ -0,0 +1,8 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconArrowUp = createIcon(<svg viewBox="0 0 13 13">
+    <g transform="translate(0 0)">
+        <path fill='currentColor' d="M4.152,1.357a1,1,0,0,1,1.7,0l3.2,5.113A1,1,0,0,1,8.2,8H1.8A1,1,0,0,1,.956,6.47Z"
+            transform="translate(1 1) rotate(0)" />
+    </g>
+</svg>)

src/assets/icons/index.ts

@@ -15,6 +15,7 @@ export * from "./components/IconAlignYBetween";
 export * from "./components/IconAlignYBottom";
 export * from "./components/IconAlignYTop";
 export * from "./components/IconApplication";
+export * from "./components/IconArrowUp";
 export * from "./components/IconClear";
 export * from "./components/IconCombination";
 export * from "./components/IconCroperr";

src/assets/icons/svg/arrowUp.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 13 13">
+    <g transform="translate(0 0)">
+        <path fill='currentColor' d="M4.152,1.357a1,1,0,0,1,1.7,0l3.2,5.113A1,1,0,0,1,8.2,8H1.8A1,1,0,0,1,.956,6.47Z"
+            transform="translate(1 1) rotate(0)" />
+    </g>
+</svg>

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

@@ -1,45 +1,87 @@
+import { css, cx } from "@linaria/core";
 import { defineComponent } from "vue";
 import { bool, string } from "vue-types";
 import { useCompData } from ".";
+import { CompUI } from "../..";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
+import { formatColor } from "../../formItems/NewColorPicker/ColorList";
 import { View } from "../View";
-import { CompUI } from "../..";
-import { SelectTransfer } from "../Transfer/select";
-import { sortedArray } from "three/src/animation/AnimationUtils";
-import { css } from "@linaria/core";
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
-    showMask: bool().def(false)
+    showMask: bool().def(false),
   },
   setup(props) {
-    const { helper, controls , store} = useEditor();
+    const { helper, controls, store } = useEditor();
     const { children } = useCompData(props.compId);
 
     const isStreamCard = helper.isStreamCard(props.compId);
 
-    return () => {
+    const isShowSwiper = () => {
+      const { value } = store.rootPage;
+      return (
+        value.pageMode == "short" &&
+        // && value.useFor == "pc"
+        !store.isEditMode
+      );
+    };
 
+    const getContainerStyles = () => {
       const rootPage = store.rootPage;
-      const style:any = {};
-      if (isStreamCard && rootPage?.value.pageMode == "short" && store.isDisplay) {
-        console.log("is stream card");
-        style.height = "100vh";
-        style.width = "100vw";
-        style.display =  "flex";
-        style.justifyContent =  "center";
-        style.flexDirection = "column";
-        style.justifyItems = "center";
-        style.position = "relative";
-        style.overflow =  "hidden";
-        
+      const isPcDesign = rootPage.value.useFor == "pc";
+      const isShortDesign = rootPage.value.pageMode == "short";
+
+      const style: any = {};
+      // 翻页
+      if (isStreamCard && isShortDesign && store.isDisplay) {
+        if (!isPcDesign) {
+          style.height = "100%";
+          style.width = "100%";
+        } else {
+          style.height = "100vh";
+          style.width = "100vw";
+        }
+        // if (isPcDesign) {
+        const comp = helper.findComp(props.compId);
+        if (!comp) return;
+        if (!comp.layout.background) return;
+        if (comp.layout.background.color) {
+          style.background = formatColor(comp.layout.background.color);
+        }
+        // }
+
+        style.display = "flex";
+        style.justifyContent = "center";
+        style.alignItems = "center";
       }
+      return style;
+    };
+
+    const createScale = () => {
+      const showSwiper = isShowSwiper();
+      if (!showSwiper) return;
+      const scale = controls.previewCtrl.state.scale;
+      const style = { transform: `scale(${scale})` };
+      return style;
+    };
+
+    return () => {
+      const showSwiper = isShowSwiper();
+      const containerStyles = getContainerStyles();
+      const containerScale = createScale();
 
       return (
-        <div class={CardStyle} style={style}>
-          <View compId={props.compId} showMask={props.showMask}>
+        <div
+          class={cx(rootStyles, showSwiper && "swiper-slide")}
+          style={containerStyles}
+        >
+          <View
+            compId={props.compId}
+            style={containerScale}
+            showMask={props.showMask}
+          >
             {children.default?.map((compId) => {
               const compItem = helper.findComp(compId) as DesignComp;
               const Comp =
@@ -51,10 +93,17 @@ export const Component = defineComponent({
           </View>
         </div>
       );
-    }
+    };
   },
 });
 
-const CardStyle = css`
-
-`
+const rootStyles = css`
+  &.swiper-slide {
+    > div {
+      background: none !important;
+    }
+  }
+  &.swiper-slide-active {
+    z-index: 10;
+  }
+`;

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

@@ -1,9 +1,14 @@
-import { defineComponent , reactive} from "vue";
+import { css, cx } from "@linaria/core";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { defineComponent, nextTick, onMounted, onUnmounted } from "vue";
 import { string } from "vue-types";
+
+import { IconArrowUp } from "@/assets/icons";
 import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
-import { css } from "@linaria/core";
 import { PageMusic } from "./PageMusic";
 import { MusicOptions } from "./localMusic";
 
@@ -16,63 +21,187 @@ export const Component = defineComponent({
     const { helper, store, controls } = editor;
     const compRef = useCompRef(props.compId);
 
-  
+    // const getContextStyles = () => {
+    //   let contextStyle: any = null;
+    //   if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {
+    //     contextStyle = {
+    //       transform: `translate(0, ${
+    //         -store.shortPage.index * window.innerHeight + store.shortPage.offset
+    //       }px`,
+    //     };
+    //     if (!store.shortPage.isMoving) {
+    //       contextStyle.transition = "transform .4s ease-out";
+    //     }
+    //   }
+    //   return contextStyle;
+    // };
+
+    const getPageStyles = () => {
+      const comp = useCompData(props.compId);
+      const { layout, value } = comp;
+
+      const style = helper.createStyle(layout || { size: [750] }, comp);
+      if (!store.isDisplay) return style;
+
+      const isPcDesign = value.useFor == "pc";
+      const isShortDesign = comp.value.pageMode == "short";
+
+      // 翻页
+      if (isShortDesign) {
+        if (!isPcDesign) {
+          style.height = "100%";
+        } else {
+          style.height = "100vh";
+        }
+        if (isPcDesign) {
+          style.width = "100vw";
+        }
+      } else {
+        // 长页
+        style.height = "auto";
+        if (isPcDesign) {
+          // pc
+          style.margin = "0 auto";
+        }
+      }
+      return style;
+    };
+
+    const isShowSwiper = () => {
+      const { value } = useCompData(props.compId);
+      return (
+        value.pageMode == "short" &&
+        // value.useFor == "pc" &&
+        !editor.store.isEditMode
+      );
+    };
+
+    onMounted(() => {
+      if (isShowSwiper()) controls.previewCtrl.initSwiper(compRef.value);
+    });
+
+    onUnmounted(() => {
+      controls.previewCtrl.destroyEvent();
+    });
+
+    nextTick(() => {
+      const ele = compRef.value.querySelectorAll(
+        ".swiper-slide-active > div"
+      )[0];
+      controls.previewCtrl.initDom(ele);
+    });
 
     return () => {
       const comp = useCompData(props.compId);
-      const { children, layout, value } = comp;
+      const { children, value } = comp;
+      const isPcDesign = value.useFor == "pc";
+
       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" && store.isDisplay) {
-        style.height = "100vh";
-        style.width = "100vw";
-      } 
-
-      let contextStyle:any = null;
-      if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {
-        contextStyle = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
-        if (!store.shortPage.isMoving) {
-          contextStyle.transition = "transform .4s ease-out";
-        }
-      }
-      console.log("curr card=>", store.currStreamCardId, store.currStreamCard?.children.default?.length);
+
+      const showSwiper = isShowSwiper();
+      // const contextStyle = getContextStyles();
+      const pageStyles = getPageStyles();
 
       return (
         <div
           ref={compRef}
-          style={style}
-          class={[comp.value.pageMode != "short" && "!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
+          style={pageStyles}
+          class={cx(pageRootStyles, editor.store.isEditMode && pageEditStyle)}
         >
-          {
-             (store.isDisplay || (store.isEditMode && controls.screenCtrl.state.screen.pageMode != "short")) && <div class="relative z-1000" style={contextStyle}>
-             {slots.Container?.(
-               children.default.map((compId) => {
-                 const comp = helper.findComp(compId);
-                 if (!comp) return;
-                 return slots.CompItem?.(comp);
-               })
-             )}
-             {curValue?.value && !editor.store.isEditMode && <PageMusic />}
-           </div>
-
-          }
-          {
-            store.isEditMode && controls.screenCtrl.state.screen.pageMode == "short" && store.currStreamCard && <div class="relative z-1000" style={contextStyle}>
-              {
-                slots.Container?.( [slots.CompItem?.(store.currStreamCard)])
-              }
+          {(store.isDisplay ||
+            (store.isEditMode &&
+              controls.screenCtrl.state.screen.pageMode != "short")) && (
+            <div
+              class={cx("relative z-10", showSwiper && "swiper-wrapper")}
+              // style={contextStyle}
+            >
+              {slots.Container?.(
+                children.default.map((compId) => {
+                  const comp = helper.findComp(compId);
+                  if (!comp) return;
+                  return slots.CompItem?.(comp);
+                })
+              )}
             </div>
-          }
+          )}
 
+          {store.isEditMode &&
+            controls.screenCtrl.state.screen.pageMode == "short" &&
+            store.currStreamCard && (
+              // <div
+              //   class="relative z-1000"
+              //   // style={contextStyle}
+              // >
+              // </div>
+              <>{slots.Container?.([slots.CompItem?.(store.currStreamCard)])}</>
+            )}
+
+          {/* 轮播组件 */}
+          {showSwiper && (
+            <>
+              <div class="swiper-pagination"></div>
+              {!isPcDesign && (
+                <div class="mobile_director flex items-center justify-center">
+                  <IconArrowUp
+                    class={cx(iconStyles, "!text-light-50 text-16px")}
+                  />
+                </div>
+              )}
+              {isPcDesign && (
+                <>
+                  <div class="swiper-button-prev"></div>
+                  <div class="swiper-button-next"></div>
+                </>
+              )}
+            </>
+          )}
+          {/* music */}
+          {curValue?.value && !editor.store.isEditMode && <PageMusic />}
         </div>
       );
     };
   },
 });
 
+const iconStyles = css`
+  animation: arrow 2.5s ease-in-out infinite;
+`;
+
+const pageRootStyles = css`
+  .swiper-button-prev,
+  .swiper-button-next {
+    transform: translateY(-100%);
+    top: 100%;
+  }
+  .swiper-button-prev {
+    position: absolute;
+    right: 60px;
+    left: auto;
+  }
+  .vertical_mobile_progress {
+    text-align: right;
+    padding-right: 20px;
+    z-index: 12;
+    color: #fff;
+  }
+  .mobile_director {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 45px;
+    background: linear-gradient(
+      180deg,
+      rgba(51, 51, 51, 0) 0%,
+      rgba(51, 51, 51, 0.6) 100%
+    );
+    z-index: 11;
+  }
+`;
+
 const pageEditStyle = css`
   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
 `;

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

@@ -1,55 +1,90 @@
-import { useEditor } from "@/modules/editor"
-import { Select } from "ant-design-vue"
-import { defineComponent } from "vue"
+import { useEditor } from "@/modules/editor";
+import { Select } from "ant-design-vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup(props, ctx) {
-        const editor = useEditor();
-        const ctrl = editor.controls.screenCtrl;
+  setup(props, ctx) {
+    const editor = useEditor();
+    const ctrl = editor.controls.screenCtrl;
 
-        return ()=>{
-            return (
-                <div class="px-16px">
-                    <div class="flex items-center">
-                        <span class="w-70px">屏幕类型</span>
-                        <Select value={ctrl.state.screen.useFor} onChange={(v)=>{
-                            const s = {useFor: v, pageMode: ctrl.state.screen.pageMode, pageSizeType: ctrl.state.screen.pageSizeType}
-                            ctrl.saveScreenPage();
-                            ctrl.state.setScreen(s as any);
-                            setTimeout(() => {
-                                editor.controls.editorCtrl.autoInScreen();
-                            }, 0);
-
-                        }} class = "flex-1 overflow-hidden" options={[{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }]}  />
-                    </div>
-                    <div  class="flex items-center mt-5px">
-                        <span class="w-70px">页面模式</span>
-                        <Select onChange={(v)=>{
-                            ctrl.saveScreenPage();
-                            const s = {useFor: ctrl.state.screen.useFor, pageMode:v, pageSizeType: ctrl.state.screen.pageSizeType} 
-                            if( v == "long") {
-                                s.pageSizeType = "normal";
-                            }
-                            ctrl.state.setScreen(s as any);
-                            setTimeout(() => {
-                                editor.controls.editorCtrl.autoInScreen();
-                            }, 0);
-
-                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "H5长页", value: "long" }, { label: "翻页", value: "short" }]}  />
-                    </div>
-                    {
-                        ctrl.state.screen.pageMode == "short" && <div  class="flex items-center mt-5px">
-                           <span class="w-70px">屏幕长度</span>
-                           <Select onChange={(v)=>{
-                               ctrl.saveScreenPage();
-                               const s = {useFor: ctrl.state.screen.useFor, pageMode:ctrl.state.screen.pageMode, pageSizeType: v}
-                               ctrl.state.setScreen(s as any);
-                           }} value={ctrl.state.screen.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
-                       </div>
-                    }
-                 
-                </div>
-            )
-        }
-    },
-})
+    return () => {
+      return (
+        <div class="px-16px">
+          <div class="flex items-center">
+            <span class="w-70px">屏幕类型</span>
+            <Select
+              value={ctrl.state.screen.useFor}
+              onChange={(v) => {
+                const s = {
+                  useFor: v,
+                  pageMode: ctrl.state.screen.pageMode,
+                  pageSizeType: ctrl.state.screen.pageSizeType,
+                };
+                ctrl.saveScreenPage();
+                ctrl.state.setScreen(s as any);
+                setTimeout(() => {
+                  editor.controls.editorCtrl.autoInScreen();
+                }, 0);
+              }}
+              class="flex-1 overflow-hidden"
+              options={[
+                { label: "手机", value: "mobile" },
+                { label: "PC", value: "pc" },
+              ]}
+            />
+          </div>
+          <div class="flex items-center mt-5px">
+            <span class="w-70px">页面模式</span>
+            <Select
+              onChange={(v) => {
+                ctrl.saveScreenPage();
+                const s = {
+                  useFor: ctrl.state.screen.useFor,
+                  pageMode: v,
+                  pageSizeType: ctrl.state.screen.pageSizeType,
+                };
+                if (v == "long") {
+                  s.pageSizeType = "normal";
+                }
+                ctrl.state.setScreen(s as any);
+                setTimeout(() => {
+                  editor.controls.editorCtrl.autoInScreen();
+                }, 0);
+              }}
+              value={ctrl.state.screen.pageMode}
+              class="flex-1 overflow-hidden"
+              options={[
+                { label: "H5长页", value: "long" },
+                { label: "翻页", value: "short" },
+              ]}
+            />
+          </div>
+          {ctrl.state.screen.pageMode == "short" &&
+            ctrl.state.screen.useFor == "mobile" && (
+              <div class="flex items-center mt-5px">
+                <span class="w-70px">屏幕长度</span>
+                <Select
+                  onChange={(v) => {
+                    ctrl.saveScreenPage();
+                    const s = {
+                      useFor: ctrl.state.screen.useFor,
+                      pageMode: ctrl.state.screen.pageMode,
+                      pageSizeType: v,
+                    };
+                    ctrl.state.setScreen(s as any);
+                  }}
+                  value={ctrl.state.screen.pageSizeType}
+                  class="flex-1 overflow-hidden"
+                  options={[
+                    { label: "短屏幕", value: "short" },
+                    { label: "普通屏幕", value: "normal" },
+                    // { label: "长屏幕", value: "long" },
+                  ]}
+                />
+              </div>
+            )}
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,6 +1,5 @@
 import { IconAdd, IconMove } from "@/assets/icons";
 import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
-import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
@@ -54,7 +53,7 @@ export const View = defineComponent({
       const isGroupComp = helper.isGroupComp(props.compId);
       const isStreamChild = helper.isStreamCardChild(props.compId);
       const cardId = helper.getCompTrees(props.compId)[1]?.id;
-      const cardIndex = store.streamCardIds.indexOf(cardId)
+      const cardIndex = store.streamCardIds.indexOf(cardId);
       const obj = new CompObject(store.compMap[props.compId]);
       const m = obj.worldTransform.clone();
       m.invert();
@@ -75,7 +74,7 @@ export const View = defineComponent({
       let aniStyles = "";
       if (
         comp.layout.anim &&
-        state.showAnimation&&
+        state.showAnimation &&
         ((!props.showMask && store.isEditMode) || !store.isEditMode)
       ) {
         aniStyles = `animate__animated animate__${comp.layout.anim} animate__delay-0.1s`;
@@ -200,24 +199,26 @@ export const View = defineComponent({
               {RenderAfter()}
             </>
           )}
-          {props.showMask && !isLongPage && (
-            <div
-              class={cx(
-                safeAreaStyles,
-                "absolute left-0 top-1/2 w-1/1 translate -translate-y-1/2 transform pointer-events-none"
-              )}
-              style={{
-                height: `${controls.screenCtrl.state.safeFactor * 100}%`,
-              }}
-            >
-              <div class={[divideStyle, "top"]}>
-                <span class="tip"> 安全线</span>
+          {props.showMask &&
+            !isLongPage &&
+            controls.screenCtrl.state.screen.useFor == "mobile" && (
+              <div
+                class={cx(
+                  safeAreaStyles,
+                  "absolute left-0 top-1/2 w-1/1 translate -translate-y-1/2 transform pointer-events-none"
+                )}
+                style={{
+                  height: `${controls.screenCtrl.state.safeFactor * 100}%`,
+                }}
+              >
+                <div class={[divideStyle, "top"]}>
+                  <span class="tip"> 安全线</span>
+                </div>
+                <div class={[divideStyle, "bottom"]}>
+                  <span class="tip"> 安全线</span>
+                </div>
               </div>
-              <div class={[divideStyle, "bottom"]}>
-                <span class="tip"> 安全线</span>
-              </div>
-            </div>
-          )}
+            )}
         </div>
       );
     };
@@ -301,18 +302,57 @@ const editCompStyle = css`
   }
 `;
 
-const AnchorCompStyle = css`
-  outline: 2px dashed @inf-primary-color;
-`;
-
 const CurrCompStyle = css`
   position: relative;
-  outline: 1px solid @inf-primary-color;
   z-index: 998;
   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
+  &:before {
+    content: "";
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: -1px;
+    bottom: -1px;
+    z-index: 999;
+    pointer-events: none;
+    background-image: repeating-linear-gradient(
+        to right,
+        @inf-primary-color 0%,
+        @inf-primary-color 50%,
+        transparent 50%,
+        transparent 100%
+      ),
+      repeating-linear-gradient(
+        to right,
+        @inf-primary-color 0%,
+        @inf-primary-color 50%,
+        transparent 50%,
+        transparent 100%
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        @inf-primary-color 0%,
+        @inf-primary-color 50%,
+        transparent 50%,
+        transparent 100%
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        @inf-primary-color 0%,
+        @inf-primary-color 50%,
+        transparent 50%,
+        transparent 100%
+      );
+    background-position: left top, left bottom, left top, right top;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
+  }
+`;
+const AnchorCompStyle = css`
+  &:before {
+    background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
+  }
 `;
-
-//box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
 
 const groupCompCls = css`
   outline: 2px solid @inf-primary-color !important;
@@ -355,10 +395,8 @@ const maskStyleUp = css`
 
 const divideStyle = css`
   position: absolute;
-  left: -10%;
-  width: 120%;
-  /* border: 1px dashed #EB684E;
-  border-dasharray: 5px 10px; */
+  left: -5%;
+  width: 110%;
   height: 1px;
   background-image: linear-gradient(
     to right,
@@ -377,7 +415,7 @@ const divideStyle = css`
     bottom: 0;
   }
   .tip {
-    margin-left: 10px;
+    margin-left: 15px;
     font-size: 12px;
     position: absolute;
     left: 100%;

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

@@ -24,51 +24,51 @@ export function useCompRef(compId: string) {
     }
 
     if (comp?.compKey == "Page" && !store.isEditMode && store.rootPage.value.pageMode == "short") {
-      let downY = 0;
-      compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
-          //  e.preventDefault();
-          //  e.stopPropagation();
+      // let downY = 0;
+      // compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
+      //     //  e.preventDefault();
+      //     //  e.stopPropagation();
 
-           console.log("touch start");
-           store.shortPage.offset = 0;
+      //      console.log("touch start");
+      //      store.shortPage.offset = 0;
 
-           downY = e.targetTouches[0].clientY;
-           store.shortPage.isMoving = false;
-      })
+      //      downY = e.targetTouches[0].clientY;
+      //      store.shortPage.isMoving = false;
+      // })
 
-      compRef.value.addEventListener("touchmove", (e:TouchEvent)=>{
-        e.preventDefault();
-        e.stopPropagation();
+      // 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;
-      })
+      //   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;
-      });
+      // 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/components/CompUI/defines/createAttrsForm.tsx

@@ -266,17 +266,13 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
         actions.submitUpdate();
       }
 
-
-
       return () => {
         const { component } = props;
 
-        if (store.selected.length > 1) return (<AlignMulti />);
+        if (store.selected.length > 1) return <AlignMulti />;
 
         return (
           <div class={formStyle}>
-           
-
             {valueColumns.length ? (
               <>
                 <div>
@@ -328,6 +324,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
             ) : null}
             {["Container"].includes(component.compKey) ? null : (
               <>
+                <Divider />
                 <div>
                   <span class="text-white">动效</span>
                 </div>
@@ -336,7 +333,6 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   columns={animateColumns}
                   onChange={changeVal}
                 />
-                <Divider />
               </>
             )}
           </div>

src/modules/editor/components/Viewport/Content/index.tsx

@@ -1,15 +1,14 @@
+import { IconDelete } from "@/assets/icons";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { onUnmounted, reactive, ref , nextTick} from "vue";
+import { nextTick, onUnmounted, reactive, ref } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import { CompUI } from "../../CompUI";
-
 import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
 import { TipIcons } from "../../TipIcons";
-import { IconDelete } from "@/assets/icons";
 
 export default defineUI({
   setup() {
@@ -57,6 +56,7 @@ export default defineUI({
           <div class={["scrollbar", cardList]}>
             <div>
               <Container
+                class="space-y-15px mt-15px"
                 onDrop={(e: any) => {
                   if (e.payload) {
                     actions.addCompToDesign(e.payload, e.addedIndex);
@@ -77,24 +77,21 @@ export default defineUI({
                   if (h < 40) h = 40;
 
                   const style: any = { height: h + "px" };
-                  if (store.currStreamCardId == item) {
-                    style.border = "3px solid #EA9E40";
-                  }
                   return (
                     <Draggable>
                       <div
                         key={item + controls.screenCtrl.currScreenId}
-                        class={[
+                        class={cx(
                           "card-item relative transition-opacity hover:opacity-80",
-                        ]}
+                          store.currStreamCardId == item && "active"
+                        )}
                         style={style}
                         onClick={() => {
                           actions.selectObjs([]);
                           actions.pickComp(item, false);
-
-                          nextTick(()=>{
+                          nextTick(() => {
                             controls.editorCtrl.autoInScreen();
-                          })
+                          });
                         }}
                       >
                         {store.streamCardIds.length > 1 && (
@@ -341,7 +338,6 @@ const cardList = css`
 
   .card-item {
     flex-shrink: 0;
-    margin-top: 15px;
     width: 80px;
     height: 80px;
     background: #1f1f1f;
@@ -349,6 +345,22 @@ const cardList = css`
     cursor: pointer;
     overflow: hidden;
     color: white;
+    &:before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border-radius: 4px;
+      z-index: 1;
+      transition: box-shadow 0.2s ease-in-out;
+    }
+    &.active {
+      &:before {
+        box-shadow: #ea9e40 0px 0px 0px 1px inset, #000 0px 0px 0px 3px inset;
+      }
+    }
     .deleteitem {
       z-index: 1000;
       opacity: 0;

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

@@ -1,65 +1,63 @@
-import { Effect, ModuleControl } from "queenjs";
-import { EditorModule } from "../../module";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "../SelectCtrl/matrix";
-
-
-export class AnimCtrl extends ModuleControl<EditorModule> {
-
-  initEvent() {
-     Effect.value(()=>this.store.shortPage).item((v)=>v.offset, (shortState)=>{
-        console.log("xx")
-        let next = shortState.index;
-        if (shortState.offset < 0 ) {
-            next = shortState.index + 1;
-        }
-        if (shortState.offset > 0 ) {
-            next = shortState.index - 1;
-        }
-        this.startAnim(next);
-     }).run();
-  }
-  
-  startAnim(index:number) {
-    this.store.shortPage.next = index;
-    // const childrens = this.helper.findCardAllChildren(index);
-
-    // console.log("start anim=>", index, childrens.length);
-    // childrens.forEach((c)=>{
-    //     const comp = this.helper.findComp(c) as DesignComp;
-    //     if (!comp.anim) return;
-    //     comp.anim.transition = false;
-    //     comp.layout.transformMatrix = comp.anim.startMatrix;
-    //     comp.layout.opacity = 0;
-
-    //     setTimeout(() => {
-    //         if (comp.anim) {
-    //             comp.anim.transition = true;
-    //             comp.layout.transformMatrix = comp.anim.endMatrix;
-    //             comp.layout.opacity = 1;
-    //         }
-    //     }, 100);
-    // })
-  }
-
-  
-  inited = false;
-  initAnim() {
-    if (this.inited) return;
-    this.inited = true;
-
-    let n = this.store.streamCardIds.length;
-    for( let i=0; i<n; i++) {
-        const childrens = this.helper.findCardAllChildren(i);
-        childrens.forEach((c)=>{
-            const comp = this.helper.findComp(c) as DesignComp;
-            const end = comp.layout.transformMatrix || "matrix(1,0,0,1,0,0)";
-            const m = Matrix.createFromMatrixStr(end);
-            m.ty = m.ty - comp.getH();
-            m.tx = m.tx - comp.getW();
-
-            comp.anim = {transition:false, startMatrix: m.getMatrixStr(), endMatrix: end}
-        })
-    }
-  }
-}
+// import { Effect, ModuleControl } from "queenjs";
+// import { EditorModule } from "../../module";
+// import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+// import { Matrix } from "../SelectCtrl/matrix";
+
+// export class AnimCtrl extends ModuleControl<EditorModule> {
+
+//   initEvent() {
+//      Effect.value(()=>this.store.shortPage).item((v)=>v.offset, (shortState)=>{
+//         console.log("xx")
+//         let next = shortState.index;
+//         if (shortState.offset < 0 ) {
+//             next = shortState.index + 1;
+//         }
+//         if (shortState.offset > 0 ) {
+//             next = shortState.index - 1;
+//         }
+//         this.startAnim(next);
+//      }).run();
+//   }
+
+//   startAnim(index:number) {
+//     this.store.shortPage.next = index;
+//     const childrens = this.helper.findCardAllChildren(index);
+
+//     console.log("start anim=>", index, childrens.length);
+//     childrens.forEach((c)=>{
+//         const comp = this.helper.findComp(c) as DesignComp;
+//         if (!comp.anim) return;
+//         comp.anim.transition = false;
+//         comp.layout.transformMatrix = comp.anim.startMatrix;
+//         comp.layout.opacity = 0;
+
+//         setTimeout(() => {
+//             if (comp.anim) {
+//                 comp.anim.transition = true;
+//                 comp.layout.transformMatrix = comp.anim.endMatrix;
+//                 comp.layout.opacity = 1;
+//             }
+//         }, 100);
+//     })
+//   }
+
+//   inited = false;
+//   initAnim() {
+//     if (this.inited) return;
+//     this.inited = true;
+
+//     let n = this.store.streamCardIds.length;
+//     for( let i=0; i<n; i++) {
+//         const childrens = this.helper.findCardAllChildren(i);
+//         childrens.forEach((c)=>{
+//             const comp = this.helper.findComp(c) as DesignComp;
+//             const end = comp.layout.transformMatrix || "matrix(1,0,0,1,0,0)";
+//             const m = Matrix.createFromMatrixStr(end);
+//             m.ty = m.ty - comp.getH();
+//             m.tx = m.tx - comp.getW();
+
+//             comp.anim = {transition:false, startMatrix: m.getMatrixStr(), endMatrix: end}
+//         })
+//     }
+//   }
+// }

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

@@ -229,7 +229,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     const parentb = parent.getBoundingClientRect();
 
     const designW =
-      this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 200;
+      this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 40;
     if (parentb.width < designW) {
       scale = parentb.width / designW;
     }

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

@@ -0,0 +1,112 @@
+import Swiper from "swiper";
+import { Navigation, Pagination } from "swiper/modules";
+import { SwiperOptions } from "swiper/types/swiper-options";
+
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import { RxValue } from "../ReactCtrl/rxValue";
+
+export class PreviewCtrl extends ModuleControl<EditorModule> {
+  swiper: any = "";
+  state = RxValue.create({
+    scale: 1,
+  });
+  container: HTMLElement | undefined;
+
+  initDom(element: HTMLElement) {
+    this.container = element;
+    const { value } = this.store.rootPage;
+    const isPcDesign = value.useFor == "pc";
+    if (isPcDesign) this.getContainerScale();
+  }
+
+  initEvent() {
+    // 重置缩放比例
+    window.addEventListener("resize", () => this.resizeWindow());
+
+    // 监听上下左右键翻页
+    document.addEventListener("keydown", (event) => this.keyEvent(event));
+  }
+
+  destroyEvent() {
+    document.removeEventListener("keydown", this.keyEvent);
+    document.removeEventListener("resize", this.resizeWindow);
+  }
+
+  resizeWindow() {
+    this.getContainerScale();
+  }
+
+  keyEvent(event: KeyboardEvent) {
+    switch (event.keyCode) {
+      case 37:
+      case 38:
+        this.swiper.slidePrev();
+        break;
+      case 39:
+      case 40:
+        this.swiper.slideNext();
+        break;
+    }
+  }
+
+  initSwiper(el: HTMLElement) {
+    const { value } = this.store.rootPage;
+    const isPcDesign = value.useFor == "pc";
+
+    let options: SwiperOptions = {
+      loop: true,
+      direction: "vertical",
+      pagination: {
+        el: ".swiper-pagination",
+        type: isPcDesign ? "progressbar" : "fraction",
+        verticalClass: "vertical_mobile_progress",
+      },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+    };
+
+    if (isPcDesign) {
+      options = {
+        ...options,
+        watchSlidesProgress: true,
+        pagination: {
+          el: ".swiper-pagination",
+          type: "progressbar",
+        },
+      };
+    }
+
+    this.swiper = new Swiper(el, {
+      modules: [Navigation, Pagination],
+      ...options,
+    });
+    if (isPcDesign) this.initEvent();
+  }
+
+  getContainerScale() {
+    if (!this.container) {
+      this.state.setScale(1);
+      return;
+    }
+    const layout = {
+      height: this.container.clientHeight,
+      width: this.container.clientWidth,
+    };
+
+    const pageRatio = layout.width / layout.height;
+    const windowRatio = document.body.clientWidth / document.body.clientHeight;
+
+    let scale = 1;
+    if (pageRatio > windowRatio) {
+      // calc width
+      scale = document.body.clientWidth / layout.width;
+    } else {
+      // calc height
+      scale = document.body.clientHeight / layout.height;
+    }
+    this.state.setScale(scale);
+  }
+}

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

@@ -1,18 +1,21 @@
-import { Effect, ModuleControl } from "queenjs";
+import { isPc } from "@queenjs/utils";
+import { ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
-import { reactive } from "vue";
+import { CardState } from "../../objects/DesignTemp";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { RxValue } from "../ReactCtrl/rxValue";
-import { CardState } from "../../objects/DesignTemp";
-import { isPc } from "@queenjs/utils";
 
+// 1366×768
 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]]
+   // minRate: 0.42,
+   // maxRate: 0.8,
+   width: 2732,
+   height: 1536,
+   // width: 1366,
+   // height: 768,
+   // factor: 0.8067,
+   // widths: [1900, 2356, 2920],
+   // ranges: [[0.64537, 0.8], [0.52063, 0.64537], [0.42, 0.52063]]
 }
 
 const MobileConst = {
@@ -20,19 +23,19 @@ const MobileConst = {
    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]]
+   heights: [1000, 1476],
+   ranges: [[0.63234, 0.75], [0.5079365079365079, 0.632340125298328]]
 }
+const AllSize = ["short", "normal"];
 
-const AllSize = ["short","normal", "long"];
+// export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
 
-export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
 export class ScreenCtrl extends ModuleControl<EditorModule> {
    state = RxValue.create({
       screen: {
             useFor: "mobile" as "mobile" | "pc", // pc 还是 手机
             pageMode: "long" as "long" | "short", //长页面还是短页面(一屏高度)
-            pageSizeType: "normal" as "normal" | "long" | "short", //适配类型 长屏 正常 短屏幕
+            pageSizeType: "normal" as "normal" | "short", //适配类型 正常 短屏幕
       },
       docWidth: window.innerWidth,   //实际屏幕宽度
       docHeight: window.innerHeight,  //实际屏幕高度
@@ -46,16 +49,18 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    get isLongPage() {
       return this.state.screen.pageMode == "long";
    }
+
+   get isMobileDesign(){
+      return this.state.screen.useFor == "mobile";
+   }
+
    get currScreenId() {
       return this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
    }
    
    initEvent() {
-
       window.addEventListener("resize", ()=>{
-          if ( !this.store.isDisplay ) return;
-
-          console.log("apply screen");
+          if (!this.store.isDisplay || this.state.screen.useFor =='pc') return;
           this.applyScreen();
       })
 
@@ -63,9 +68,9 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       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("range=>", ranges, factor, sizes);
 
-      console.log( this.getRightScreenId() );
+      // console.log( this.getRightScreenId() );
    }
 
    createSteps(base: number, min:number, max:number, size = 3) {
@@ -91,11 +96,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       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.isScreenExit(option.sreenId) ) {
@@ -130,25 +131,33 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
          }
       }
    }
-
+  
    getRightScreenId() {
-      const currScreen = isPc() ? "pc" : "mobile";
-      const rate = isPc() ? window.innerHeight / window.innerWidth : window.innerWidth / window.innerHeight;
+      // const currScreen = isPc() ? "pc" : "mobile";
+      const currScreen = this.store.rootPage?.value.useFor;
+      if(currScreen == 'pc')   {
+         const sreenId = currScreen + this.state.screen.pageMode + "normal";
+          return {
+            device: currScreen,
+            pageMode: this.state.screen.pageMode,
+            sreenId: sreenId,
+         };
+      }
+     
 
-      const sizes = currScreen == "pc" ? PCConst.ranges : MobileConst.ranges;
-      let n = 3;
+      const rate = isPc() ? window.innerHeight / window.innerWidth : window.innerWidth / window.innerHeight;
+      const sizes = MobileConst.ranges;
+     
       let index = 1;
-      while(n--) {
-        const m = sizes[n]
-        if (rate >= m[0]) {
-             index = n;
-        }
+      if (rate > sizes[1][1]) {
+         index = 0;
       }
+   
       if (this.state.screen.pageMode == "long") index = 1;
 
       console.log("rate=>", rate);
 
-      const sreenId = currScreen + this.state.screen.pageMode + ["short", "normal", "long"][index];
+      const sreenId = currScreen + this.state.screen.pageMode + AllSize[index];
       return {sreenId, index, device: currScreen, pageMode: this.state.screen.pageMode};
 
    }
@@ -173,15 +182,24 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       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;
+      this.state.safeFactor = this.state.screen.useFor == "pc" ? 1 : MobileConst.factor;
 
       this.state.currScreenId = this.currScreenId;
    }
-   isScreenExit(screenId:string) {
-      return !!this.store.designData.compScreenMap[screenId] && 
-            this.store.designData.compScreenMap[screenId].length > 0 &&
-            this.store.designData.compScreenMap[screenId][1].children.length > 0;
-   }
+
+   isScreenExit(screenId: string) {
+      let res = false;
+      const curr = this.store.designData.compScreenMap[screenId];
+      if (!curr) return false;
+      for (let index = 0; index < curr.length; index++) {
+        const element = curr[index];
+        if (element?.children.length > 0) {
+          res = true;
+          return res;
+        }
+      }
+      return res;
+    }
 
    restorScreenPage(screenId = "") {
       if (!this.store.rootPage) return;
@@ -243,8 +261,13 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       return screenCards;
    }
 
+   getAdapterIndex() {
+      if(this.state.screen.pageMode == "long") return 1;
+      return ["short", "normal", "long"].indexOf(this.state.screen.pageSizeType)
+   }
+
    getCurrScreenHeight() {
-      const pageValue = this.state
+      const pageValue = this.state;
       if ( pageValue.screen.useFor == "pc") {
          return PCConst.height;
       }
@@ -253,10 +276,9 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
 
    getCurrScreenWidth() {
-      const currScreenIndex = this.getAdapterIndex();
-      const pageValue = this.state
+      const pageValue = this.state;
       if ( pageValue.screen.useFor == "pc" ) {
-         return PCConst.widths[currScreenIndex];
+         return PCConst.width;
       }
       return MobileConst.width;
    }

src/modules/editor/controllers/SelectCtrl/assistRulerCtrl.ts

@@ -214,6 +214,7 @@ export class AssistRulerCtrl {
     const pageEL = this.ctrl.pageEl as HTMLElement;
 
     const box = viewPort.getBoundingClientRect();
+    if(!pageEL) return
     const pageELBox = pageEL.getBoundingClientRect();
 
     while (n--) {

src/modules/editor/module/index.ts

@@ -22,12 +22,12 @@ import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
 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";
 import { EditorCtrl } from "../controllers/EditorCtrl";
 import { CtxMenuCtrl } from "../controllers/CtxMenuCtrl";
 import { CategoryCtrl } from "../controllers/CategoryCtrl";
+import { PreviewCtrl } from "../controllers/PreviewCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -69,18 +69,17 @@ export class EditorModule extends ModuleRoot {
     cropCtrl: new ImageCropperCtrl(this),
     mediaCtrl: new MediaCtrl(this),
     textEditorCtrl: new TextEditorCtrl(this),
-    animCtrl: new AnimCtrl(this),
     screenCtrl: new ScreenCtrl(this),
     editorCtrl: new EditorCtrl(this),
     menuCtrl: new CtxMenuCtrl(this),
     categoryCtrl: new CategoryCtrl(this),
+    previewCtrl: new PreviewCtrl(this),
   };
 
   compObjsMap = new Map<string, CompObject>();
 
   onReady() {
     this.actions.init();
-    // this.controls.animCtrl.initEvent();
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
     this.controls.categoryCtrl.init();

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

@@ -26,12 +26,12 @@ export const store = EditorModule.store({
     compEditReslut: 0, // -1 取消， 1 确定
     lastSelected: "", //最后上传
 
-    shortPage: {
-      index: 0,
-      offset: 0,
-      isMoving: false,
-      next: -2,
-    },
+    // shortPage: {
+    //   index: 0,
+    //   offset: 0,
+    //   isMoving: false,
+    //   next: -2,
+    // },
   }),
   getters: {
     rootPage(state) {

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

@@ -1,6 +1,7 @@
 import { DesignComp } from "./DesignComp";
 import { dataTransform } from "./versions/1.0.0";
 import { dataTransform as V101Upgrade } from "./versions/1.0.1";
+import { dataTransform as V102Upgrade } from "./versions/1.0.2";
 
 export type CardState = {
   id: string;
@@ -21,7 +22,9 @@ export class DesignTemp {
 
   constructor(data?: Partial<DesignTemp>) {
     if (!data) return;
-    Object.assign(this, V101Upgrade(dataTransform(data)));
+
+    const res = V101Upgrade(dataTransform(data))
+    Object.assign(this, V102Upgrade(res));
     // 初始化DesignComp
     Object.entries(this.compMap).forEach(([key, value]) => {
       this.compMap[key] = new DesignComp(value);

src/modules/editor/objects/DesignTemp/versions/1.0.2.ts

@@ -0,0 +1,35 @@
+export function dataTransform(data: any) {
+  if (data.version == "1.0.2") {
+    return data;
+  }
+  data.version = "1.0.2";
+
+  const pageValue = data.compMap.root.value;
+  if (
+    pageValue.pageSizeType == "long" &&
+    pageValue.pageMode == "short" &&
+    pageValue.useFor == "mobile"
+  ) {
+    if (hasContent(data.compScreenMap["mobileshortnormal"])) {
+      return data;
+    }
+    // 普通屏幕没有数据，迁移长屏幕数据过来
+    data.compScreenMap["mobileshortnormal"] =
+      data.compScreenMap["mobileshortlong"];
+    pageValue.pageSizeType = "normal";
+  }
+  return data;
+}
+
+function hasContent(curr: any) {
+  let res = false;
+  if (!curr) return false;
+  for (let index = 0; index < curr.length; index++) {
+    const element = curr[index];
+    if (element?.children.length > 0) {
+      res = true;
+      return res;
+    }
+  }
+  return res;
+}

src/pages/h5/share/Promotion.tsx

@@ -1,3 +1,4 @@
+import Empty from "@/components/Empty";
 import { initEditor } from "@/modules/editor";
 import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { cx } from "@linaria/core";
@@ -33,9 +34,8 @@ export default defineComponent(() => {
       };
       editor.controls.wxCtrl.setShareData(shareData);
       editor.controls.wxCtrl.setShare(shareData);
-      
-      editor.controls.screenCtrl.applyScreen();
 
+      editor.controls.screenCtrl.applyScreen();
     });
   }
   // fetch("https://restapi.amap.com/v3/ip?key=6f53b2e09f72ad63423b2da6e08b25d7").then(response=>{
@@ -44,23 +44,34 @@ export default defineComponent(() => {
   //   console.log(data);
   // })
 
-  return () => (
-    <div
-      class={cx(
-        isPc() && "h-100vh",
-        "flex items-center justify-center bg-gray-100"
-      )}
-    >
-      <div
-        class={isPc() ? `scrollbar !overflow-x-hidden` : `overflow-x-hidden`}
-        style={{
-          height: editor.helper.designToNaturalSize(Design_Page_Size[1], {
-            adaptiveH: true,
-          }),
-        }}
-      >
-        <editor.components.Preview />
-      </div>
-    </div>
-  );
+  function getPageH() {
+    const rootPage = editor.store.rootPage;
+    const pageH = rootPage?.layout?.size[1] || Design_Page_Size[1];
+    return editor.helper.designToNaturalSize(pageH, {
+      adaptiveH: true,
+    });
+  }
+
+  return () => {
+    const rootPage = editor.store.rootPage;
+    const isPcDesign = rootPage?.value.useFor == "pc";
+
+    // pc in mobile
+    if (isPcDesign && !isPc()) return <Empty />;
+
+    // mobile in pc
+    if (!isPcDesign && isPc()) {
+      const pegeH = getPageH();
+      return (
+        <div class="h-100vh flex items-center justify-center bg-gray-100">
+          <div class="scrollbar !overflow-x-hidden" style={{ height: pegeH }}>
+            <editor.components.Preview />
+          </div>
+        </div>
+      );
+    }
+
+    // mobile in mobile
+    return <editor.components.Preview />;
+  };
 });

src/pages/h5/share/style.less

@@ -1,5 +1,26 @@
 #app {
-  min-height: 100vh;
-  min-width: 100vw;
+  // min-height: 100vh;
+  // min-width: 100vw; //会出现滚动条
+  height: 100%;
+  min-width: 0;
+  min-height: 100%;
   background-color: #fff;
 }
+
+@keyframes arrow {
+  0%,
+  30% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}

yarn.lock

@@ -8266,6 +8266,11 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^10.1.0:
+  version "10.1.0"
+  resolved "http://124.70.149.18:4873/swiper/-/swiper-10.1.0.tgz#02536bcf34ba0c37cf837c5193005a8e87aa43c8"
+  integrity sha512-E+wh+hcSbwlRfXuwBTclcOOikOjNdSF0a2Sdg3J4cIWtHO64A7SaLRfezfrJ67CW3GEc15AduYU2YKlElsjqsQ==
+
 swiper@^8.4.4:
   version "8.4.7"
   resolved "http://124.70.149.18:4873/swiper/-/swiper-8.4.7.tgz"