preview

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

@@ -125,6 +125,7 @@ export const Component = defineComponent({
           ref={compRef}
           style={pageStyles}
           class={cx(
+            "page",
             "relative",
             pageRootStyles,
             editor.store.isEditMode && pageEditStyle

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

@@ -1,8 +1,9 @@
 import { IconExit, IconNext, IconPrev } from "@/assets/icons";
-import { useEditor } from "@/modules/editor";
+import { initEditor } 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 { cloneDeep } from "lodash";
 import Modal from "queenjs/adapter/vue/components/modal";
 import { defineComponent, nextTick, provide, ref } from "vue";
 import { any } from "vue-types";
@@ -15,8 +16,11 @@ export default defineComponent({
     data: any(),
   },
   setup(props) {
-    const { helper, controls } = useEditor();
-    const pageRoot = helper.findRootComp();
+    const editor = initEditor();
+    const { helper, controls } = editor;
+    const page = controls.pageCtrl;
+    
+    controls.pageCtrl.setDesignData(cloneDeep(props.data));
 
     const pageRef = ref();
     const compRef = ref();
@@ -32,6 +36,7 @@ export default defineComponent({
     }
 
     function getPageStyles() {
+      const pageRoot = page.rootPage;
       const isPcDesign = pageRoot?.value.useFor == "pc";
       const isLongPage = pageRoot?.value.pageMode == "long";
       if (!isPcDesign) {
@@ -66,25 +71,28 @@ export default defineComponent({
           ...s,
           width: "100%",
           overflowY: "auto",
-          height: 'calc(100% + 40px)'
+          height: "calc(100% + 40px)",
         };
       }
       return s;
     }
 
     nextTick(() => {
+      const pageRoot = page.rootPage;
       const isShort = pageRoot?.value.pageMode == "short";
       if (isShort) controls.previewCtrl.initSwiper(compRef.value);
     });
 
     const Content = () => {
+      const pageRoot = page.rootPage;
       const isShort = pageRoot?.value.pageMode == "short";
+
       const pageStyles = getPageStyles();
 
       return (
         <>
           <div ref={compRef} style={pageStyles} class="overflow-hidden">
-            <div class={isShort && "swiper-wrapper relative "}>
+            <div class={["page", isShort && "swiper-wrapper relative "]}>
               {controls.pageCtrl.streamCardIds.map((item) => {
                 const c = helper.findComp(item) as DesignComp;
                 const Comp =

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

@@ -8,11 +8,11 @@ import PreviewDesignModal from "./PreviewDesignModal";
 
 export default defineUI({
   setup() {
-    const editor =  useEditor();
+    const editor = useEditor();
     const { store, actions, controls, jumpIndexHtml } = editor;
 
     function showPreviewModal() {
-      editor.showModal(
+      queenApi.dialog(
         <PreviewDesignModal data={controls.pageCtrl.designData} />,
         {
           fullscreen: true,

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

@@ -126,7 +126,6 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
       // calc height
       scale = layout.height / designLayout.height;
     }
-    console.log("scale: ", scale);
     this.state.setScale(scale);
   }
 }