add preview

src/modules/resource/controllers/MaterialController.ts

@@ -35,7 +35,7 @@ export class MaterialController  {
     onBtnClick(name:string) {
         console.log("onBtnClick", name)
     }
-    onItemClick(name: "delete" | "download", record:any) {
+    onItemClick(name: "delete" | "download" | "preview", record:any) {
         console.log("onItemClick", name, record)
     }
     async onShowDialog(listCtrl: PageListController<any, any>, type:string) {

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

@@ -42,6 +42,7 @@ export default defineUI({
                   use={ state.currTab == "task" ? "task" : "show"}
                   onDelete={() => props.Controller.onItemClick("delete", record)}
                   onDownload={() =>props.Controller.onItemClick("download", record)}
+                  onPreview={() =>props.Controller.onItemClick("preview", record)}
                 />
               )}
             />

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

@@ -17,7 +17,7 @@ export default defineUI({
     record: any(),
     use: string<"show" | "select" | "task">(),
   },
-  emits: ["delete", "select", "download", "use"],
+  emits: ["delete", "select", "download", "use", "preview"],
   setup(props, { emit }) {
     return () => {
       const { active, record, use } = props;
@@ -58,6 +58,12 @@ export default defineUI({
                     onClick={() => emit("delete")}
                   />
                 )}
+                <div
+                  class="rounded-1/2 text-center w-56px leading-56px cursor-pointer orange"
+                  onClick={() => emit("preview")}
+                >
+                  预览
+                </div>
                 {use == "show" && (
                   <div
                     class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
@@ -96,13 +102,18 @@ const itemStyles = css`
   &.active {
     border-color: @inf-primary-color;
   }
-
+  .orange {
+    background-color: rgba(232, 139, 0, 0.5);
+    &:hover {
+      background-color: rgba(232, 139, 0, 0.7);
+    }
+  }
   .btn_circle {
     background-color: rgba(0, 0, 0, 0.7);
     &:hover {
       background-color: rgba(0, 0, 0, 0.8);
     }
-    &:not(:first-child) {
+    &:not(:nth-of-type(1)) {
       margin-left: 10px;
     }
   }

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

@@ -0,0 +1,21 @@
+import { Image } from "@queenjs/ui";
+import { defineUI } from "queenjs";
+import { any } from "vue-types";
+
+export default defineUI({
+  props: {
+    data: any(),
+  },
+  setup(props) {
+    return () => {
+      const { data } = props;
+      return (
+        <div class="text-center min-h-200px">
+          {data.fileType == "image" && (
+            <Image size={720} src={data.file?.url} class="max-w-1/1" />
+          )}
+        </div>
+      );
+    };
+  },
+});

src/pages/website/Material2/controller.tsx

@@ -1,5 +1,6 @@
 import SelectListItemModal from "./components/SelectListItemModal";
 import { MaterialController } from "../../../modules/resource/controllers/MaterialController";
+import PreviewModal from "./components/PreviewModal";
 
 export default function createController(resource:any, isSelectModel:boolean, selectType :string) {
     const {controls, actions} = resource;
@@ -14,6 +15,13 @@ export default function createController(resource:any, isSelectModel:boolean, se
         resource.actions.selectMaterial(record);
     };
 
+    const  showPreviewModal = (data: any) => {
+      resource.showModal(<PreviewModal data={data}  />, {
+        title: "素材预览",
+        width: "800px",
+      }); 
+  };
+
     const ctrl = new MaterialController();
     ctrl.imageCtrl = controls.materialImageListCtrl;
     ctrl.vidoeCtrl = controls.materialVideoListCtrl;
@@ -29,6 +37,7 @@ 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);
       return actions.downloadMaterial(record);
     };