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

import { IconExit, IconNext, IconPrev } from "@/assets/icons";
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";
import { ShareBox } from "./ShareBox";

const NotFoundComp = () => <div>无效的组件</div>;

export default defineComponent({
  props: {
    data: any(),
  },
  setup(props) {
    const editor = initEditor();
    const { helper, controls } = editor;
    const page = controls.pageCtrl;
    
    controls.pageCtrl.setDesignData(cloneDeep(props.data));

    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 pageRoot = page.rootPage;
      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 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={["page", 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] 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()}
            >
              <IconExit class="text-20px mr-5px" /> 退出预览
            </Button>
            {/* <span class="text-14px select-none">{data.title}</span> */}
            {/* <Dropdown
              overlay={<ShareBox />}
              trigger="click"
              placement="bottomRight"
            >
              <Button class="text-dark-500 hover:text-dark-500" type="primary">
                分享
              </Button>
            </Dropdown> */}
          </div>
          <div
            ref={pageRef}
            class="flex-1 h-0 pb-30px pt-30px flex items-center"
          >
            <Content />
          </div>
        </div>
      );
    };
  },
});