preview

src/pages/website/Material2/components/MaterialItem.tsx

@@ -1,9 +1,8 @@
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
-import { Checkbox } from "ant-design-vue";
 import { defineUI } from "queenjs";
-import { any, bool, string } from "vue-types";
+import { any, string } from "vue-types";
 
 const renderStatus = {
   succ: "",
@@ -13,18 +12,17 @@ const renderStatus = {
 
 export default defineUI({
   props: {
-    active: bool().def(false),
     record: any(),
     use: string<"show" | "select" | "task">(),
   },
-  emits: ["delete", "select", "download", "use", "preview"],
+  emits: ["delete", "download", "use", "preview"],
   setup(props, { emit }) {
     return () => {
-      const { active, record, use } = props;
+      const { record, use } = props;
       // console.error("record: ", record);
 
       return (
-        <div class={cx(itemStyles, "relative", active && "active")}>
+        <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden">
             {record.fileType == "video" ? (
               <video src={record.file?.url} class="h-1/1 w-1/1" />
@@ -36,22 +34,14 @@ export default defineUI({
                 }
               />
             )}
-            {active && (
-              <Checkbox
-                checked
-                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
-              />
-            )}
+
             {use == "task" && record.status !== "succ" && (
               <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white">
                 {(renderStatus as any)[record.status || "default"]}
               </div>
             )}
             {use !== "task" && (
-              <div
-                class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white"
-                onClick={() => emit("select")}
-              >
+              <div class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white">
                 {use == "show" && (
                   <IconDelete
                     class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
@@ -98,10 +88,6 @@ export default defineUI({
 });
 
 const itemStyles = css`
-  border: 1px solid transparent;
-  &.active {
-    border-color: @inf-primary-color;
-  }
   .orange {
     background-color: rgba(232, 139, 0, 0.5);
     &:hover {

src/pages/website/Material2/components/PreviewModal.tsx

@@ -1,10 +1,13 @@
 import { Image } from "@queenjs/ui";
 import { defineUI } from "queenjs";
-import { any } from "vue-types";
+import { object } from "vue-types";
 
 export default defineUI({
   props: {
-    data: any(),
+    data: object<{
+      url: string;
+      fileType: "image" | "video";
+    }>().isRequired,
   },
   setup(props) {
     return () => {
@@ -12,7 +15,10 @@ export default defineUI({
       return (
         <div class="text-center min-h-200px">
           {data.fileType == "image" && (
-            <Image size={720} src={data.file?.url} class="max-w-1/1" />
+            <Image size={720} src={data.url} class="max-w-1/1" />
+          )}
+          {data.fileType == "video" && (
+            <video controls src={data.url} class="max-w-1/1" />
           )}
         </div>
       );

src/pages/website/Material2/components/SelectListItemModal.tsx

@@ -6,13 +6,13 @@ import { PageListController } from "@queenjs/controllers";
 
 export default defineUI({
   slots: {
-     Item
+    Item,
   },
   props: {
     ListCtrl: any<PageListController<any, any>>().isRequired,
   },
-
-  setup(props, {slots}) {
+  emits: ["preview"],
+  setup(props, { emit, slots }) {
     const modal = useModal();
     return () => {
       return (
@@ -23,9 +23,10 @@ export default defineUI({
               <slots.Item
                 use="select"
                 record={record}
-                onUse={()=>{
-                  modal.submit(record  )
+                onUse={() => {
+                  modal.submit(record);
                 }}
+                onPreview={() => emit("preview", record)}
               />
             )}
           />

src/pages/website/Material2/controller.tsx

@@ -8,16 +8,24 @@ export default function createController(resource:any, isSelectModel:boolean, se
         const ctrl = resource.controls.matTempListCtrl;
         ctrl.state.query = type == "video" ? { hasVideo: true } : {}
         ctrl.loadPage(1);
-        const record  = await resource.showModal(<SelectListItemModal ListCtrl={ctrl}  />, {
+        const record  = await resource.showModal(<SelectListItemModal ListCtrl={ctrl} onPreview={(record) => {
+          showPreviewModal({
+            url:record.thumbnail,
+            fileType:type == "video" ? "video":'image'
+          })
+        }}  />, {
           title: `${type === "image" ? "图片" : "视频"}模板中心`,
           width: "1000px",
         });
         resource.actions.selectMaterial(record);
     };
 
-    const  showPreviewModal = (data: any) => {
+    const  showPreviewModal = (data: {
+      url: string;
+      fileType: "image" | "video";
+    }) => {
       resource.showModal(<PreviewModal data={data}  />, {
-        title: "素材预览",
+        title: "预览",
         width: "800px",
       }); 
   };
@@ -37,7 +45,10 @@ export default function createController(resource:any, isSelectModel:boolean, se
     };
     ctrl.onItemClick = function (name, record) {
       if (name == "delete") return actions.deleteMaterial(record);
-      else if (name == "preview") return showPreviewModal(record);
+      else if (name == "preview") return showPreviewModal({
+        url: record.file.url,
+        fileType: record.fileType,
+      });
       return actions.downloadMaterial(record);
     };