preview

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

@@ -114,6 +114,9 @@ export const View = defineComponent({
         style.overflow = "unset";
         style.position = "relative";
       }
+      if (store.isPreview) {
+        style.overflow = "hidden";
+      }
 
       const aniStyles = getAniStyles(comp);
 

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

@@ -6,7 +6,7 @@ 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 { any, string } from "vue-types";
 import { ShareBox } from "./ShareBox";
 
 const NotFoundComp = () => <div>无效的组件</div>;
@@ -14,8 +14,10 @@ const NotFoundComp = () => <div>无效的组件</div>;
 export default defineComponent({
   props: {
     data: any(),
+    previewType: string<"tpl" | "edit">().def("edit"),
   },
-  setup(props) {
+  emits: ["click"],
+  setup(props, { emit }) {
     const editor = initEditor();
     const { store, helper, controls } = editor;
     const page = controls.pageCtrl;
@@ -93,7 +95,9 @@ export default defineComponent({
       return (
         <>
           <div ref={compRef} style={pageStyles} class="overflow-hidden">
-            <div class={["page", isShort && "swiper-wrapper relative "]}>
+            <div
+              class={["page select-none", isShort && "swiper-wrapper relative"]}
+            >
               {controls.pageCtrl.streamCardIds.map((item) => {
                 const c = helper.findComp(item) as DesignComp;
                 const Comp =
@@ -124,7 +128,9 @@ export default defineComponent({
     };
 
     return () => {
-      const { data } = props;
+      const { data, previewType } = props;
+
+      const isTpl = previewType == "tpl";
 
       return (
         <div class="h-100vh flex flex-col bg-[#0B0B0B] overflow-hidden">
@@ -136,15 +142,28 @@ export default defineComponent({
               <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">
-                分享
+            {isTpl ? (
+              <Button
+                class="text-dark-500 hover:text-dark-500"
+                type="primary"
+                onClick={() => emit("click")}
+              >
+                使用模板
               </Button>
-            </Dropdown>
+            ) : (
+              <Dropdown
+                overlay={<ShareBox />}
+                trigger="click"
+                placement="bottomRight"
+              >
+                <Button
+                  class="text-dark-500 hover:text-dark-500"
+                  type="primary"
+                >
+                  分享
+                </Button>
+              </Dropdown>
+            )}
           </div>
           <div
             ref={pageRef}

src/modules/editor/components/Viewport/Slider/SliderLeft/Templates/index.tsx

@@ -1,13 +1,14 @@
 import { IconPreview } from "@/assets/icons";
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
+import { DesignTemp } from "@/modules/editor/objects/DesignTemp";
 import { useResource } from "@/modules/resource";
 import { Image, Loadmore } from "@queenjs/ui";
 import { defineUI, queenApi } from "queenjs";
 import Modal from "queenjs/adapter/vue/components/modal";
 import { Container, Draggable } from "vue-dndrop";
+import PreviewDesignModal from "../../../Header/PreviewDesignModal";
 import ListFilter from "../ListFilter";
-import PreviewTplModal from "./PreviewTplModal";
 
 export default defineUI({
   setup() {
@@ -17,19 +18,23 @@ export default defineUI({
     ctrl.hasLimit = true;
     ctrl.loadPage(1);
 
-    const preview = (record: any) => {
+    const preview = async (record: any) => {
+      const frameData = await editor.https.getDesignDetail(record._id, {
+        isSys: true,
+      });
+      const result = new DesignTemp(frameData.result);
       queenApi.dialog(
-        <PreviewTplModal
-          data={record}
+        <PreviewDesignModal
+          data={result}
+          previewType="tpl"
           onClick={async () => {
             await editor.actions.clickTplToDesign(record);
             Modal.clear();
           }}
-        ></PreviewTplModal>,
+        />,
         {
-          width: "1000px",
-          title: "模板预览",
-          destroyOnClose: true,
+          fullscreen: true,
+          closable: false,
         }
       );
     };
@@ -41,6 +46,7 @@ export default defineUI({
       };
       ctrl.loadPage(1);
     };
+
     return () => {
       const dataSource = ctrl.state.list;
       return (