preview

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

@@ -1,13 +1,12 @@
 import { css, cx } from "@linaria/core";
-import { defineComponent } from "vue";
+import { defineComponent, inject } from "vue";
 import { bool, string } from "vue-types";
+import { CompCardObj } 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 { useCompData } from "../../defines/hook";
-import { CompCardObj } from ".";
+import { View } from "../View";
 
 export const Component = defineComponent({
   props: {
@@ -15,20 +14,15 @@ export const Component = defineComponent({
     showMask: bool().def(false),
   },
   setup(props) {
-    const { helper, controls , store} = useEditor();
+    const { helper, controls, store } = useEditor();
     const comp = useCompData<CompCardObj>(props.compId);
     const isStreamCard = helper.isStreamCard(props.compId);
-    
+    const isPreview = inject("isPreview", false);
     const isShowSwiper = () => {
       const { value } = controls.pageCtrl.rootPage;
-      return (
-        value.pageMode == "short" &&
-        // && value.useFor == "pc"
-        !store.isEditMode
-      );
+      return value.pageMode == "short" && isPreview;
     };
 
-  
     const getContainerStyles = () => {
       const rootPage = controls.pageCtrl.rootPage;
       const isPcDesign = rootPage.value.useFor == "pc";
@@ -44,14 +38,6 @@ export const Component = defineComponent({
           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";
@@ -72,13 +58,14 @@ export const Component = defineComponent({
       const showSwiper = isShowSwiper();
       const containerStyles = getContainerStyles();
       const containerScale = createScale();
-      
+
       return (
         <div
           class={cx(rootStyles, showSwiper && "swiper-slide")}
           style={containerStyles}
         >
           <View
+            class="JS_viewRoot"
             compId={props.compId}
             style={containerScale}
             showMask={props.showMask}
@@ -99,11 +86,6 @@ export const Component = defineComponent({
 });
 
 const rootStyles = css`
-  &.swiper-slide {
-    > div {
-      background: none !important;
-    }
-  }
   &.swiper-slide-active {
     z-index: 10;
   }

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

@@ -106,13 +106,6 @@ export const Component = defineComponent({
       controls.previewCtrl.destroyEvent();
     });
 
-    nextTick(() => {
-      const ele = compRef.value.querySelectorAll(
-        ".swiper-slide-active > div"
-      )[0];
-      controls.previewCtrl.initDom(ele);
-    });
-
     return () => {
       const comp = useCompData<CompPageObj>(props.compId);
       const { children, value } = comp;
@@ -180,7 +173,8 @@ export const Component = defineComponent({
                 <div class="absolute bottom-30px left-1/2 w-130px h-44px px-4px flex items-center justify-between bg-[#262626] rounded-4px transform -translate-x-1/2 z-1">
                   <IconPrev class="swiper-button-prev rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
                   <span class="select-none">
-                    {controls.previewCtrl.state.activeIndex}/{children.default.length}
+                    {controls.previewCtrl.state.activeIndex}/
+                    {children.default.length}
                   </span>
                   <IconNext class="swiper-button-next rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
                 </div>

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

@@ -3,7 +3,14 @@ import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import "animate.css";
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+  defineComponent,
+  inject,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+} from "vue";
 import { bool, string } from "vue-types";
 import { useEditor } from "../../..";
 import { useCompEditLayerRef, useCompRef } from "./hooks";
@@ -16,7 +23,7 @@ export const View = defineComponent({
     showMask: bool().def(false),
   },
   emits: ["dblclick", "click"],
-  setup(props, { slots, emit }) {
+  setup(props, { slots, emit, attrs }) {
     const { store, actions, helper, controls } = useEditor();
     const compRef = useCompRef(props.compId);
     const editorLayerRef = props.editlayer
@@ -24,11 +31,23 @@ export const View = defineComponent({
       : ref();
 
     const isLongPage = controls.screenCtrl.isLongPage;
+    const isPreview = inject("isPreview", false);
 
     const state = reactive({
       showAnimation: false,
     });
 
+    function createBgStyles() {
+      let bgS = {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      };
+      return bgS;
+    }
+
     onUnmounted(() => {
       intersectionObserver.disconnect();
     });
@@ -54,12 +73,25 @@ export const View = defineComponent({
       const gizmo = controls.selectCtrl.gizmo;
       const page = controls.pageCtrl;
 
+      const showBgDiv = comp.compKey == "Container" && isPreview && !isLongPage;
+
       let isFocus =
         store.isEditMode &&
         gizmo.state.transform.selected.length > 1 &&
         gizmo.state.lastId == props.compId;
 
       const style = helper.createStyle(comp.layout, comp);
+      if (comp.compKey == "Container") {
+        delete style.transform;
+        style["transform-origin"] = "center center";
+      }
+
+      let bgStyles: any = {};
+      if (showBgDiv) {
+        bgStyles = createBgStyles();
+        bgStyles.background = style.background;
+        delete style.background;
+      }
 
       if (isStreamCard) {
         style.overflow = "unset";
@@ -145,80 +177,86 @@ export const View = defineComponent({
       }
 
       return (
-        <div
-          ref={compRef}
-          class={[
-            comp.compKey,
-            viewStyle,
-            page.state.currStreamCardId == props.compId &&
-              store.isEditMode &&
-              CurrCompStyle,
-            isFocus && AnchorCompStyle,
-            isFocus && groupCompCls,
-          ]}
-          style={style}
-          onClick={(e) => {
-            if (!store.isEditMode) {
-              e.stopPropagation();
-              emit("click");
-            }
-          }}
-          onDblclick={() => emit("dblclick")}
-        >
+        <>
+          {showBgDiv && <div style={bgStyles}></div>}
+
           <div
-            class={cx(
-              comp.layout.anim ? (aniStyles ? aniStyles : "opacity-0") : ""
-            )}
-            onMousemove={(e) => {
-              if (
-                !store.isEditMode ||
-                !controls.dragAddCtrl.dragingCompKey ||
-                !helper.isStreamCard(props.compId)
-              )
-                return;
-              controls.editorCtrl.clickPickComp(props.compId);
+            {...attrs}
+            ref={compRef}
+            class={[
+              comp.compKey,
+              viewStyle,
+              page.state.currStreamCardId == props.compId &&
+                store.isEditMode &&
+                !isPreview &&
+                CurrCompStyle,
+              isFocus && AnchorCompStyle,
+              isFocus && groupCompCls,
+            ]}
+            style={style}
+            onClick={(e) => {
+              if (!store.isEditMode) {
+                e.stopPropagation();
+                emit("click");
+              }
             }}
+            onDblclick={() => emit("dblclick")}
           >
-            {slots.default?.()}
-          </div>
+            <div
+              class={cx(
+                comp.layout.anim ? (aniStyles ? aniStyles : "opacity-0") : ""
+              )}
+              onMousemove={(e) => {
+                if (
+                  !store.isEditMode ||
+                  !controls.dragAddCtrl.dragingCompKey ||
+                  !helper.isStreamCard(props.compId)
+                )
+                  return;
+                controls.editorCtrl.clickPickComp(props.compId);
+              }}
+            >
+              {slots.default?.()}
+            </div>
 
-          {/* {store.isEditMode &&
+            {/* {store.isEditMode &&
             isStreamCard &&
             store.currStreamCardId == props.compId && (
               <Hudop compId={props.compId} />
             )} */}
 
-          {store.isEditMode && props.editlayer && (
-            <div ref={editorLayerRef} class={editAreaStyle}></div>
-          )}
-
-          {props.showMask && isLongPage && (
-            <>
-              {RenderPre()}
-              {RenderAfter()}
-            </>
-          )}
-          {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>
+            {store.isEditMode && props.editlayer && (
+              <div ref={editorLayerRef} class={editAreaStyle}></div>
+            )}
+
+            {props.showMask && isLongPage && (
+              <>
+                {RenderPre()}
+                {RenderAfter()}
+              </>
             )}
-        </div>
+            {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>
+        </>
       );
     };
   },

src/modules/editor/components/Viewport/Header/PreviewDesignModal.tsx

@@ -1,28 +1,125 @@
 import { IconExit, IconNext, IconPrev } from "@/assets/icons";
+import { useEditor } from "@/modules/editor";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { Button, Dropdown } from "ant-design-vue";
 import Modal from "queenjs/adapter/vue/components/modal";
-import { defineComponent } from "vue";
+import { defineComponent, nextTick, provide, ref } from "vue";
 import { any } from "vue-types";
 import { ShareBox } from "./ShareBox";
-import { useAuth } from "@queenjs-modules/auth";
+
+const NotFoundComp = () => <div>无效的组件</div>;
 
 export default defineComponent({
   props: {
     data: any(),
   },
   setup(props) {
-    // const editor = useEditor();
-    // const resource = useResource();
-    const auth = useAuth();
-    const userInfo: any = auth.store.userInfo;
-    const isSys = userInfo.roles?.includes("system") ? true : false;
-    const shareLink = `${location.origin}/share.html?id=${props.data._id}&isSys=${isSys}`;
+    const { helper, controls } = useEditor();
+    const pageRoot = helper.findRootComp();
+
+    const pageRef = ref();
+    const compRef = ref();
+
+    provide("isPreview", true);
+
+    function getPageH() {
+      const rootPage = controls.pageCtrl.rootPage;
+      const pageH = rootPage?.layout?.size[1] || Design_Page_Size[1];
+      return helper.designToNaturalSize(pageH, {
+        adaptiveH: true,
+      });
+    }
+
+    function getPageStyles() {
+      const isPcDesign = pageRoot?.value.useFor == "pc";
+      const isLongPage = pageRoot?.value.pageMode == "long";
+      if (!isPcDesign) {
+        let mobileStle: any = {
+          height: getPageH(),
+          width: "375px",
+          margin: "0 auto",
+        };
+        if (isLongPage) {
+          mobileStle.overflowY = "auto";
+        } else {
+          mobileStle.marginBottom = "70px";
+        }
+        return mobileStle;
+      }
+      // pc
+      let s: any = { height: "100%", margin: "0 auto" };
+      if (!isLongPage) {
+        const pageLayout = {
+          height: pageRef.value?.clientHeight,
+          width: pageRef.value?.clientWidth,
+        };
+        const ph = pageLayout.height - 170;
+        const width = (ph * 16) / 9;
+        s = {
+          ...s,
+          width: width + "px",
+          padding: "40px 0 70px",
+        };
+      } else {
+        s = {
+          ...s,
+          width: "100%",
+          overflowY: "auto",
+          height: 'calc(100% + 40px)'
+        };
+      }
+      return s;
+    }
+
+    nextTick(() => {
+      const isShort = pageRoot?.value.pageMode == "short";
+      if (isShort) controls.previewCtrl.initSwiper(compRef.value);
+    });
+
+    const Content = () => {
+      const isShort = pageRoot?.value.pageMode == "short";
+      const pageStyles = getPageStyles();
+
+      return (
+        <>
+          <div ref={compRef} style={pageStyles} class="overflow-hidden">
+            <div class={isShort && "swiper-wrapper relative "}>
+              {controls.pageCtrl.streamCardIds.map((item) => {
+                const c = helper.findComp(item) as DesignComp;
+                const Comp =
+                  controls.compUICtrl.state.components.get(c.compKey)
+                    ?.Component || NotFoundComp;
+                return (
+                  <Comp
+                    compId={c.id}
+                    class="swiper-slide relative !flex items-center justify-center"
+                  />
+                );
+              })}
+            </div>
+          </div>
+          {/* buttons */}
+          {isShort && (
+            <div class="absolute bottom-30px left-1/2 w-130px h-44px px-4px flex items-center justify-between bg-[#262626] rounded-4px transform -translate-x-1/2 z-1">
+              <IconPrev class="swiper-button-prev rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+              <span class="select-none">
+                {controls.previewCtrl.state.activeIndex}/
+                {pageRoot.children.default.length}
+              </span>
+              <IconNext class="swiper-button-next rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+            </div>
+          )}
+        </>
+      );
+    };
 
     return () => {
       const { data } = props;
+
       return (
-        <div class="h-100vh flex flex-col bg-[#0B0B0B]">
-          <div class="h-64px flex items-center justify-between px-20px bg-[#262626]">
+        <div class="h-100vh flex flex-col bg-[#0B0B0B] overflow-hidden">
+          <div class="h-64px flex items-center justify-between px-20px bg-[#262626] flex-shrink-0">
             <Button
               class="flex items-center text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
               onClick={() => Modal.clear()}
@@ -40,15 +137,11 @@ export default defineComponent({
               </Button>
             </Dropdown>
           </div>
-          <div class="flex-1">
-            <div class="w-full h-full overflow-hidden">
-              {/* <iframe
-                class="w-full h-full"
-                src={shareLink}
-                frameborder="0"
-                scrolling="no"
-              ></iframe> */}
-            </div>
+          <div
+            ref={pageRef}
+            class="flex-1 h-0 pb-30px pt-30px flex items-center"
+          >
+            <Content />
           </div>
         </div>
       );

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

@@ -128,11 +128,11 @@ export class PageCtrl extends ModuleControl<EditorModule> {
         this.controls.screenCtrl.state.screen.useFor= root.value.useFor as any || "mobile"
         this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode as any || "long"  
         this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType as any || "normal"
-    
+        
         if (this.store.isEditMode) {
           this.controls.screenCtrl.updateAdapterState();
         }
-
+        
         setTimeout(() => {
               history.clear();
               history.enable = true;
@@ -181,10 +181,13 @@ export class PageCtrl extends ModuleControl<EditorModule> {
         if (deleteOK) {
           delete this.compPids[compId];
         }
-    }
+    }  
 
     insertDesignCard(index?: number) {
         const card = createObj({compKey: "Container"}, false);
+        if(this.controls.screenCtrl.state.screen.useFor == 'pc'){
+          card.layout.size = [2732, 1536]
+        }
         this.setCompPid(card.id, this.rootPage.id);
         this.compMap[card.id] = card;
         const childIds = [...this.rootPage.children.default];

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

@@ -14,17 +14,15 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
   });
   container: HTMLElement | undefined;
 
-  initDom(element: HTMLElement) {
-    this.container = element;
+  initEvent() {
     const page = this.controls.pageCtrl;
     const { value } = page.rootPage;
     const isPcDesign = value.useFor == "pc";
-    if (isPcDesign) this.getContainerScale();
-  }
-
-  initEvent() {
-    // 重置缩放比例
-    window.addEventListener("resize", () => this.resizeWindow());
+    if (isPcDesign) {
+      this.getContainerScale();
+      // 重置缩放比例
+      window.addEventListener("resize", () => this.resizeWindow());
+    }
 
     // 监听上下左右键翻页
     document.addEventListener("keydown", (event) => this.keyEvent(event));
@@ -53,6 +51,7 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
   }
 
   initSwiper(el: HTMLElement) {
+    this.container = el;
     const _this = this;
     const page = this.controls.pageCtrl;
     const { value } = page.rootPage;
@@ -101,22 +100,33 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
       this.state.setScale(1);
       return;
     }
+    const subEle = this.container.querySelectorAll(
+      ".swiper-slide-active > .JS_viewRoot"
+    )[0];
+    if (!subEle) return;
+
     const layout = {
       height: this.container.clientHeight,
       width: this.container.clientWidth,
     };
 
+    const designLayout = {
+      height: subEle.clientHeight,
+      width: subEle.clientWidth,
+    };
+
     const pageRatio = layout.width / layout.height;
-    const windowRatio = document.body.clientWidth / document.body.clientHeight;
+    const designRatio = designLayout.width / designLayout.height;
 
     let scale = 1;
-    if (pageRatio > windowRatio) {
+    if (pageRatio < designRatio) {
       // calc width
-      scale = document.body.clientWidth / layout.width;
+      scale = layout.width / designLayout.width;
     } else {
       // calc height
-      scale = document.body.clientHeight / layout.height;
+      scale = layout.height / designLayout.height;
     }
+    console.log("scale: ", scale);
     this.state.setScale(scale);
   }
 }

src/pages/h5/share/Promotion.tsx

@@ -4,7 +4,7 @@ import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { initResource } from "@/modules/resource";
 import { cx } from "@linaria/core";
 import { isPc } from "@queenjs/utils";
-import { defineComponent } from "vue";
+import { defineComponent, provide } from "vue";
 
 export default defineComponent(() => {
   const editor = initEditor();
@@ -14,6 +14,8 @@ export default defineComponent(() => {
   const isSys = params.get("isSys");
   const isWk = params.get("isWk");
 
+  provide("isPreview", true);
+
   editor.actions.switchMode("display");
 
   if (id) {