preview

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

@@ -0,0 +1,44 @@
+import { Button } from "ant-design-vue";
+import dayjs from "dayjs";
+import { defineUI } from "queenjs";
+import { object } from "vue-types";
+
+export default defineUI({
+  props: {
+    data: object<any>(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      const { data } = props;
+      return (
+        <div class="flex">
+          <div class="w-660px h-660px bg-[#1F1F1F] scrollbar overflow-y-auto"></div>
+          <div class="flex-1 ml-40px">
+            <div class="mt-35px text-22px text-light-50 leading-snug">
+              {data.title}
+            </div>
+            <div class="mt-18px text-20px text-light-50 opacity-70 leading-tight">
+              {data.desc}
+            </div>
+            <div class="mt-40px">
+              <Button
+                class=""
+                block
+                type="primary"
+                size="large"
+                onClick={() => emit("click")}
+              >
+                使用模板
+              </Button>
+            </div>
+            <div class="mt-80px flex items-center justify-between">
+              <span>上架时间：</span>
+              <span>{dayjs(data.updateTime).format("YYYY.MM.DD")}</span>
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,9 +1,13 @@
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
+import { IconEyeOn } from "@queenjs/icons";
 import { Image, Loadmore } from "@queenjs/ui";
-import { defineUI } from "queenjs";
+import { defineUI, queenApi } from "queenjs";
+import Modal from "queenjs/adapter/vue/components/modal";
 import { Container, Draggable } from "vue-dndrop";
+import PreviewTplModal from "./PreviewTplModal";
+import { IconPreview } from "@/assets/icons";
 
 export default defineUI({
   setup() {
@@ -12,6 +16,23 @@ export default defineUI({
     const ctrl = source.controls.sysTplListCtrl;
     ctrl.loadPage(1);
 
+    const preview = (record: any) => {
+      queenApi.dialog(
+        <PreviewTplModal
+          data={record}
+          onClick={async () => {
+            await editor.actions.clickTplToDesign(record);
+            Modal.clear();
+          }}
+        ></PreviewTplModal>,
+        {
+          width: "1000px",
+          title: "模板预览",
+          destroyOnClose: true,
+        }
+      );
+    };
+
     return () => {
       const dataSource = ctrl.state.list;
 
@@ -33,7 +54,7 @@ export default defineUI({
               return (
                 <Draggable key={item._id}>
                   <div
-                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                    class="draggable-item relative"
                     key={item._id}
                     title={item.title}
                     style={{ aspectRatio: 1 }}
@@ -44,6 +65,15 @@ export default defineUI({
                       src={item.thumbnail}
                       size={240}
                     />
+                    <div class="absolute w-1/1 h-1/1 top-0 left-0 bg-dark-500 bg-opacity-20 transition opacity-0 hover:(opacity-100) text-dark-500">
+                      <IconPreview
+                        class="absolute right-6px top-6px text-22px bg-light-50 rounded-2px cursor-pointer hover:opacity-80 text-dark-500 transition"
+                        onClick={(e: any) => {
+                          e.stopPropagation();
+                          preview(item);
+                        }}
+                      />
+                    </div>
                   </div>
                 </Draggable>
               );