preview

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

@@ -1,11 +1,11 @@
 import { css, cx } from "@linaria/core";
 import "swiper/css";
-import "swiper/css/navigation";
+// 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 { IconArrowUp, IconNext, IconPrev } from "@/assets/icons";
 import { useResource } from "@/modules/resource";
 import { CompPageObj } from ".";
 import { useEditor } from "../../../..";
@@ -126,7 +126,6 @@ export const Component = defineComponent({
       const showSwiper = isShowSwiper();
       // const contextStyle = getContextStyles();
       const pageStyles = getPageStyles();
-
       return (
         <div
           key={controls.pageCtrl.state.designId}
@@ -178,10 +177,13 @@ export const Component = defineComponent({
                 </div>
               )}
               {isPcDesign && (
-                <>
-                  <div class="swiper-button-prev"></div>
-                  <div class="swiper-button-next"></div>
-                </>
+                <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}
+                  </span>
+                  <IconNext class="swiper-button-next rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+                </div>
               )}
             </>
           )}
@@ -200,14 +202,13 @@ const iconStyles = css`
 const pageRootStyles = css`
   .swiper-button-prev,
   .swiper-button-next {
-    transform: translateY(-100%);
-    top: 100%;
-  }
-  .swiper-button-prev {
-    position: absolute;
-    right: 60px;
-    left: auto;
+    transform: translateY(0);
+    top: auto;
+    right: auto;
+    position: relative;
+    margin-top: 0;
   }
+
   .vertical_mobile_progress {
     text-align: right;
     padding-right: 20px;

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

@@ -4,6 +4,7 @@ import Modal from "queenjs/adapter/vue/components/modal";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { ShareBox } from "./ShareBox";
+import { useAuth } from "@queenjs-modules/auth";
 
 export default defineComponent({
   props: {
@@ -12,6 +13,10 @@ export default defineComponent({
   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}`;
 
     return () => {
       const { data } = props;
@@ -36,10 +41,13 @@ export default defineComponent({
             </Dropdown>
           </div>
           <div class="flex-1">
-            <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">
-              <IconPrev class="rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
-              <span class="select-none">1/2</span>
-              <IconNext class="rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+            <div class="w-full h-full overflow-hidden">
+              {/* <iframe
+                class="w-full h-full"
+                src={shareLink}
+                frameborder="0"
+                scrolling="no"
+              ></iframe> */}
             </div>
           </div>
         </div>

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

@@ -10,6 +10,7 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
   swiper: any = "";
   state = RxValue.create({
     scale: 1,
+    activeIndex: 1,
   });
   container: HTMLElement | undefined;
 
@@ -52,7 +53,7 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
   }
 
   initSwiper(el: HTMLElement) {
-    
+    const _this = this;
     const page = this.controls.pageCtrl;
     const { value } = page.rootPage;
     const isPcDesign = value.useFor == "pc";
@@ -69,6 +70,11 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
       },
+      on: {
+        slideChangeTransitionStart(swiper: any) {
+          _this.state.setActiveIndex(swiper.realIndex + 1);
+        },
+      },
     };
 
     if (isPcDesign) {