From a7f8152b7b77fd3129d25984949e21a63235978a Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Thu, 16 Mar 2023 11:52:02 +0800
Subject: [PATCH 1/3] =?UTF-8?q?:zap:=20feat(custom):=20=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=A1=B5=E6=B7=BB=E5=8A=A0=E8=BF=87=E6=B8=A1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #50
---
 src/routers/photo/item/index.tsx       |  1 +
 src/routers/photo/item/loadingItem.tsx | 18 +++++++
 src/routers/photo/masonry.tsx          | 68 +++++++++++++++++++-------
 3 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 src/routers/photo/item/loadingItem.tsx

diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx
index fd93a24..e7ce952 100644
--- a/src/routers/photo/item/index.tsx
+++ b/src/routers/photo/item/index.tsx
@@ -73,6 +73,7 @@ const DivJump = styled("div")(({ theme }) => ({
   position: "absolute",
   bottom: "0px",
   width: "100%",
+
   backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(90, 90,90, 0.8) 100%)`,
   "&:hover": {
     backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0,0, 0.8) 100%)`,
diff --git a/src/routers/photo/item/loadingItem.tsx b/src/routers/photo/item/loadingItem.tsx
new file mode 100644
index 0000000..70741c4
--- /dev/null
+++ b/src/routers/photo/item/loadingItem.tsx
@@ -0,0 +1,18 @@
+import Skeleton from "@mui/material/Skeleton";
+import React from "react";
+import { PhotoMasonryLoadingItemType } from "../masonry";
+type CardType = {
+  data: PhotoMasonryLoadingItemType;
+};
+export default function PhotoLoadingItem(props: CardType) {
+  return (
+    <Skeleton
+      variant='rounded'
+      animation='wave'
+      {...props.data}
+      sx={{
+        width: "100% !important",
+      }}
+    />
+  );
+}
diff --git a/src/routers/photo/masonry.tsx b/src/routers/photo/masonry.tsx
index 7cf9eed..2bafe37 100644
--- a/src/routers/photo/masonry.tsx
+++ b/src/routers/photo/masonry.tsx
@@ -1,8 +1,8 @@
 import { selectPhotoLoadingState } from "@store/loading";
 import { Masonry as Masonic_masonry } from "masonic";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useAppSelector, useAppDispatch } from "@store/hooks";
-
+import Fade from "@mui/material/Fade";
 import { changeLoading } from "@store/loading/index";
 import { fetchPhotoHandler } from "./tools";
 import { PhotoRouterImageCardType, PhotoRouterMasonryType } from "./phototype";
@@ -10,8 +10,9 @@ import PhotoCard from "./item";
 import { useScreenSize } from "@components/proview/screenSize";
 import message from "@components/message";
 import styles from "./photo.module.less";
-//todo props type change
-export default function Masonry(props: PhotoRouterMasonryType) {
+import PhotoLoadingItem from "./item/loadingItem";
+
+const usePhotoMasonryData = (props: PhotoRouterMasonryType) => {
   const [lists, setList] = useState<PhotoRouterImageCardType[]>([]);
   const isLoading = useAppSelector(selectPhotoLoadingState),
     dispatch = useAppDispatch(),
@@ -61,23 +62,56 @@ export default function Masonry(props: PhotoRouterMasonryType) {
     handerChangeLoading(true);
     fetchHandler(1).then(() => handerChangeLoading(false));
   }, [props]);
+  return { lists, isLoading };
+};
+export type PhotoMasonryLoadingItemType = Record<"width" | "height", number>;
+export default function Masonry(props: PhotoRouterMasonryType) {
+  const { lists, isLoading } = usePhotoMasonryData(props);
   const { sm, md } = useScreenSize(),
     minCount = sm ? { columnCount: 2 } : {};
+  const loadingLists = useMemo(
+    () =>
+      Array.from({ length: 20 }, () => ({
+        width: 250,
+        height: Math.round(Math.random() * 300 + 100),
+      })),
+    [props]
+  );
+
   return (
     <div className={styles["container"]}>
-      {isLoading || (
-        <Masonic_masonry
-          items={lists}
-          maxColumnCount={5}
-          {...minCount}
-          columnGutter={md ? 5 : 10}
-          rowGutter={md ? 5 : 10}
-          columnWidth={200}
-          render={PhotoCard}
-          overscanBy={Infinity}
-          className={styles["container"]}
-        />
-      )}
+      <Fade in={!isLoading} className={`${!isLoading ? "" : "hidden"}`}>
+        <div>
+          {!isLoading && (
+            <Masonic_masonry
+              items={lists}
+              maxColumnCount={5}
+              {...minCount}
+              columnGutter={md ? 5 : 10}
+              rowGutter={md ? 5 : 10}
+              columnWidth={200}
+              render={PhotoCard}
+              overscanBy={Infinity}
+              className={styles["container"]}
+            />
+          )}
+        </div>
+      </Fade>
+      <Fade in={isLoading} className={`${isLoading ? "" : "hidden"}`}>
+        <div>
+          <Masonic_masonry
+            items={loadingLists}
+            maxColumnCount={5}
+            {...minCount}
+            columnGutter={md ? 5 : 10}
+            rowGutter={md ? 5 : 10}
+            columnWidth={200}
+            render={PhotoLoadingItem}
+            overscanBy={Infinity}
+            className={styles["container"]}
+          />
+        </div>
+      </Fade>
     </div>
   );
 }

From 13f1f49638d11cb6e1088d10d430bcc517e100f8 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Thu, 16 Mar 2023 13:15:16 +0800
Subject: [PATCH 2/3] =?UTF-8?q?:bug:=20fix(custom):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=BD=91=E9=80=9F=E8=BF=87=E5=BF=AB=E5=AF=BC=E8=87=B4=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=BF=AB=E9=80=9F=E5=88=87=E6=8D=A2=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routers/photo/item/index.tsx | 38 +++++++++++++++++++++++++++-----
 src/routers/photo/masonry.tsx    |  4 ++--
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx
index e7ce952..32fca6c 100644
--- a/src/routers/photo/item/index.tsx
+++ b/src/routers/photo/item/index.tsx
@@ -1,5 +1,5 @@
 import { PhotoRouterImageCardType } from "../phototype";
-import { useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import ImgModals from "./modal";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { Link, styled } from "@mui/material";
@@ -7,25 +7,49 @@ import style from "./photo.module.less";
 import { ImageBasic } from "@components/image";
 import { Omit } from "@utils/index";
 import CollectionsIcon from "@mui/icons-material/Collections";
+import { getImageSize } from "@components/image/tool";
+
 type CardType = {
   data: PhotoRouterImageCardType;
 };
-
+const useLoading = (url: string) => {
+  const [isLoading, set] = useState<boolean>(true);
+  useMemo(async () => {
+    await getImageSize(url);
+    set(() => false);
+  }, [url]);
+  return isLoading;
+};
 export default function PhotoCard(props: CardType) {
   const { images, dynamic_id, ...resPorps } = props.data;
   const [open, set] = useState(false),
     handlerChangeOpen = () => set((open) => !open);
-  const modalPorps = { open, images, onClose: handlerChangeOpen, dynamic_id };
+  const modalPorps = { open, images, onClose: handlerChangeOpen, dynamic_id },
+    url = `${images[0].src}@${250}w.webp`;
+  const isLoading = useLoading(url);
   return (
     <div className={style["card"]}>
       <ImageBasic
-        url={`${images[0].src}@${250}w.webp`}
+        url={url}
         {...Omit(images[0], "src")}
         {...resPorps}
         title={"图片栏"}
         className={style["show-img"]}
         onClick={handlerChangeOpen}
-      />
+      >
+        <span
+          className={`absolute left-0 top-0 right-0 bottom-0 transition-all ${
+            isLoading ? "pointer-events-auto" : "pointer-events-none"
+          }`}
+          style={{
+            zIndex: 1,
+            transitionDuration: "400ms",
+            background: isLoading ? "hsla(0,0%,91.4%,.5)" : "transparent",
+            backdropFilter: !isLoading ? "blur(0)" : "blur(42.5px)",
+            WebkitBackdropFilter: !isLoading ? "blur(0)" : "blur(42.5px)",
+          }}
+        />
+      </ImageBasic>
       <ImgModals {...modalPorps} />
       <DivJump>
         <Link
@@ -65,6 +89,10 @@ const DivImgNum = styled("div")(({ theme }) => ({
   columnGap: "2px",
   pointerEvents: "none",
   fontSize: "14px",
+  borderTopRightRadius: "8px",
+  [theme.breakpoints.down("sm")]: {
+    borderTopRightRadius: "4px",
+  },
 }));
 
 const DivJump = styled("div")(({ theme }) => ({
diff --git a/src/routers/photo/masonry.tsx b/src/routers/photo/masonry.tsx
index 2bafe37..83ff061 100644
--- a/src/routers/photo/masonry.tsx
+++ b/src/routers/photo/masonry.tsx
@@ -41,10 +41,10 @@ const usePhotoMasonryData = (props: PhotoRouterMasonryType) => {
                 width: img.img_width,
               })),
             };
-            if (data.length < 3) {
+            if (data.length < 9) {
               message.info("没有更多图片了,尝试使用其他tag吧!");
             }
-            if (index === data.length - 3) {
+            if (index === data.length - 9) {
               return {
                 ...itemRes,
                 observer: true,

From aa3c065f28819d3c6e0e5b9ec273311569ce8ac0 Mon Sep 17 00:00:00 2001
From: master1lan <master1lan@vtb.link>
Date: Thu, 16 Mar 2023 05:23:13 +0000
Subject: [PATCH 3/3] chore(release): 1.2.4

---
 CHANGELOG.md | 9 +++++++++
 package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ead08c6..9ed4cde 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 1.2.4 (2023-03-16)
+
+
+### 🐛 Bug Fixes
+
+* **custom**: 修复网速过快导致图片快速切换的bug ([13f1f49](https://vlink.dev/EOEFANS/eoefans-web/commits/13f1f49))
+
+
+
 ## 1.2.3 (2023-03-07)
 
 
diff --git a/package.json b/package.json
index 5ce1067..2ac299a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eoefans-web",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "scripts": {
     "dev": "vite --config ./config/vite.dev.config.ts",