styles

src/components/Thumbnail.tsx

@@ -1,19 +1,29 @@
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { defineComponent } from "vue";
-import { number, string } from "vue-types";
+import { bool, number, string } from "vue-types";
 
 const ThumbnailImage = defineComponent({
   props: {
     src: string().isRequired,
     size: number(),
+    objectContain: bool().def(false),
   },
   emits: ["click"],
   setup(props, { emit }) {
     return () => {
+      const { objectContain } = props;
+
       return (
         <div class={cardStyles} onClick={() => emit("click")}>
-          <Image class="w-full h-full !object-contain" {...props} />
+          <Image
+            class={cx(
+              objectContain
+                ? "max-w-full max-h-full !object-contain"
+                : "w-full h-full"
+            )}
+            {...props}
+          />
         </div>
       );
     };
@@ -23,9 +33,12 @@ const ThumbnailImage = defineComponent({
 export default ThumbnailImage;
 
 const cardStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 2px;
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkAgMAAAADIrmmAAAADFBMVEU7OzsAAABAQEA8PDx2WAOfAAAABHRSTlMZAAQKGjtSlQAAAX5JREFUeNrt2bFNQ0EMgOELiIIiJSMwAn1GoOAEBQUjZARGYwn24SRWyLPs81dEzlVf935ZHvM6TnPO1zHG05pjHPZ8H1HSZ5h0DZMuYdJPmDRIJNItpbs1v9Z8XvPA5/p9rP+Pa36Pcdjz//22xsOal+OeJBKJ1FSK+ZYH9WnjupNIJFIOya5Ro+4kEonUStq0uSQSidRNsmsUaC6JRCKlkdw1atSdRCKRckh2jRp1J5FIpFbSps0lkUikbpJdo0BzSSQSKY3krlGj7iQSiZRDsmvUqDuJRCK1kjZtLolEInWT7BoFmksikUhpJHeNGnUnkUikHJJdo0bdSSQSqZW0aXNJJBKpm2TXKNBcEolESiO5a9SoO4lEIuWQ7Bo16k4ikUitpE2bSyKRSN0ku0aB5pJIJFIayV2jRt1JJBIph2TXqFF3EolEaiVt2lwSiUTqJtk1CjSXRCKR0kjuGjXqTiKRSDkku0aNupNIW0v3YdIpTDqHSS9h0m+UdJ5/j+fbnwfuGT4AAAAASUVORK5CYII=");
-  background-size: contain;
+  /* background-size: cover; */
   background-color: rgba(255, 255, 255, 0.8);
   /* background-color: rgb(74, 74, 74); */
   overflow: hidden;

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

@@ -75,6 +75,7 @@ export const Sources = defineComponent({
                   class="draggable-item"
                   style={{ aspectRatio: 1 }}
                   onClick={() => clickToDesign(item.file.url)}
+                  objectContain={item.fileType == "image" ? true : false}
                   src={
                     item.fileType == "video" ? item.thumbnail : item.file.url
                   }

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

@@ -27,11 +27,11 @@ const tabs = [
       },
     ],
   },
-  {
-    title: "形状",
-    icon: IconShape,
-    component: Shapes,
-  },
+  // {
+  //   title: "形状",
+  //   icon: IconShape,
+  //   component: Shapes,
+  // },
   {
     title: "视频",
     icon: IconVideo,

src/modules/editor/module/actions/image.tsx

@@ -1,6 +1,6 @@
 import { isWeixinBrowser } from "@/controllers/wxController";
 import { EditorModule } from "..";
-import PreviewModal from "../../components/PreviewModal";
+import PreviewImagesModal from "../../components/PreviewImagesModal";
 
 export const ImgCompActions = EditorModule.action({
   handleImageHotKey(key: string) {
@@ -39,9 +39,12 @@ export const ImgCompActions = EditorModule.action({
     if (isWeixinBrowser()) {
       this.controls.wxCtrl.setPreviewData(url, previewImageList);
     } else {
-      this.showModal(<PreviewModal data={previewImageList} current={url} />, {
-        fullscreen: true,
-      });
+      this.showModal(
+        <PreviewImagesModal data={previewImageList} current={url} />,
+        {
+          fullscreen: true,
+        }
+      );
     }
   },
 });

src/pages/website/CreateMat/components/OutputTemplateItem.tsx

@@ -4,7 +4,7 @@ import { Checkbox, Radio, RadioChangeEvent, Tag } from "ant-design-vue";
 import { defineUI, queenApi } from "queenjs";
 import { reactive } from "vue";
 import { any, bool, string } from "vue-types";
-import PreviewModal from "../../components/PreviewModal";
+import PreviewMaterialModal from "../../components/PreviewMaterialModal";
 
 const options = [
   { label: "1倍", value: 1 },
@@ -33,7 +33,7 @@ export default defineUI({
       const isVideo = type == "video";
 
       queenApi.dialog(
-        <PreviewModal
+        <PreviewMaterialModal
           data={{
             url: isVideo ? record.videoUrl : record?.thumbnailUrl,
             fileType: type,

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

@@ -1,6 +1,7 @@
+import Thumbnail from "@/components/Thumbnail";
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
-import { Image, View } from "@queenjs/ui";
+import { View } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { any, string } from "vue-types";
 
@@ -19,21 +20,18 @@ export default defineUI({
   setup(props, { emit }) {
     return () => {
       const { record, use } = props;
-     
-      const src = record?.thumbnail || record?.thumbnailUrl || record.file?.url;
-      // console.error("record: ", src);
+
+      const thumbnailUrl =
+        record?.thumbnail || record?.thumbnailUrl || record.file?.url;
+
       return (
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden card rounded-2px">
-            {record.fileType == "video" ? (
-              <video src={record.file?.url} class="h-1/1 w-1/1" />
-            ) : (
-              <Image
-                class="h-1/1 w-1/1"
-                src={src}
-              />
-            )}
-
+            <Thumbnail
+              src={thumbnailUrl}
+              class="h-1/1 w-1/1"
+              objectContain={record.fileType == "image" ? true : false}
+            />
             {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"]}

src/pages/website/Material2/controller.tsx

@@ -1,6 +1,6 @@
 import SelectListItemModal from "./components/SelectListItemModal";
 import { MaterialController } from "../../../modules/resource/controllers/MaterialController";
-import PreviewModal from "../components/PreviewModal";
+import PreviewMaterialModal from "../components/PreviewMaterialModal";
 import { queenApi } from "queenjs";
 import { ResourceModule } from "@/modules/resource";
 
@@ -37,7 +37,7 @@ export default function createController(
     url: string;
     fileType: "image" | "video";
   }) => {
-    resource.showModal(<PreviewModal data={data} />, {
+    resource.showModal(<PreviewMaterialModal data={data} />, {
       title: "预览",
       width: "1000px",
       centered: true,

src/pages/website/components/PreviewModal.tsx → src/pages/website/components/PreviewMaterialModal.tsx

@@ -13,22 +13,15 @@ export default defineUI({
     return () => {
       const { data } = props;
       return (
-        <div class="min-h-400px text-center">
+        <div class="min-h-400px max-h-80vh overflow-y-auto scrollbar text-center">
           {data.fileType == "image" && (
-            <Image
-              size={1000}
-              src={data.url}
-              class="max-w-1/1 max-h-800px"
-              // style={{
-              // backgroundColor: "#e1e5e8",
-              // }}
-            />
+            <Image size={600} src={data.url} class="max-w-1/1" />
           )}
           {data.fileType == "video" && (
             <video
               controls
               src={data.url}
-              class="max-w-1/1 max-h-800px min-h-200px"
+              class="max-w-1/1 max-h-80vh min-h-200px"
             />
           )}
         </div>