feat: 🎸 支持gif格式、mp4

✅ Closes: #74

components/JustifyLayout/SearchModule/Ext.tsx

@@ -7,11 +7,12 @@ interface Props {
 }
 
 const options: DefaultOptionType[] = [
-  { value: "jpg", label: "jpg" },
-  { value: "jpeg", label: "jpeg" },
-  { value: "gif", label: "gif" },
-  { value: "webp", label: "webp" },
-  { value: "png", label: "png" },
+  { value: "jpg", label: "JPG" },
+  { value: "jpeg", label: "JPEG" },
+  { value: "gif", label: "GIF" },
+  { value: "webp", label: "WEBP" },
+  { value: "png", label: "PNG" },
+  { value: "mp4", label: "MP4" },
 ];
 
 const Ext = (props: Props) => {

components/JustifyLayout/index.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import justifyLayout from "justified-layout";
-import { Button, Card, Layout, Row, Col, theme, Empty } from "antd";
+import { Button, Card, Layout, Row, Col, theme, Empty, Badge } from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { handleImageAlt, handleImageUrl } from "@/hooks";
 import { useRecoilState } from "recoil";
@@ -56,7 +56,7 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
   const { token } = theme.useToken();
   const activeImage = useMemo(() => rightBasic.image, [rightBasic]);
   const { data, loadMore, loadingMore, noMore } = infiniteScroll;
-  const images = useMemo(() => data.list, [data]);
+  const images = useMemo(() => data.list as EagleUse.Image[], [data]);
   const size = useSize(() => document.body);
   const [open, setOpen] = useState(false);
 
@@ -104,17 +104,15 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
           {layoutPos.boxes.map((item, i: number) => {
             const image = images[i];
             if (!image) return null;
+
             const palettes: EagleUse.ImagePalette = image.processingPalette
               ? null
               : JSON.parse(image.palettes);
 
-            return (
+            const card = (
               <Card
                 hoverable
-                key={image.id}
                 style={{
-                  ...item,
-                  position: "absolute",
                   background: !_.isEmpty(palettes)
                     ? `rgb(${palettes[0].color}, .25)`
                     : token.colorBgBase,
@@ -145,6 +143,21 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
                 />
               </Card>
             );
+
+            return (
+              <div style={{ ...item, position: "absolute" }} key={image.id}>
+                {["gif", "mp4"].includes(image.ext.toLocaleLowerCase()) ? (
+                  <Badge.Ribbon
+                    placement="start"
+                    text={image.ext.toLocaleUpperCase()}
+                  >
+                    {card}
+                  </Badge.Ribbon>
+                ) : (
+                  card
+                )}
+              </div>
+            );
           })}
         </div>
 

package.json

@@ -40,9 +40,9 @@
     "@ant-design/icons": "^4.8.0",
     "@commitlint/cli": "^17.4.1",
     "@commitlint/config-conventional": "^17.4.0",
-    "@eagleuse/plugin-api": "^1.1.7",
+    "@eagleuse/plugin-api": "^1.2.0",
     "@eagleuse/plugin-nsfw": "^1.1.0",
-    "@eagleuse/transform-eagle": "^1.1.17",
+    "@eagleuse/transform-eagle": "^1.2.1",
     "@fastify/nextjs": "^9.2.0",
     "@prisma/client": "^4.10.1",
     "@types/justified-layout": "^4.1.0",
@@ -67,7 +67,7 @@
     "standard-version": "^9.5.0"
   },
   "devDependencies": {
-    "@eagleuse/prisma-client": "^1.0.2",
+    "@eagleuse/prisma-client": "^1.1.0",
     "@tensorflow/tfjs-node": "^4.2.0",
     "@types/fs-extra": "^9.0.13",
     "@types/lodash": "^4.14.191",