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", diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx index fd93a24..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(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 (
+ > + + ({ columnGap: "2px", pointerEvents: "none", fontSize: "14px", + borderTopRightRadius: "8px", + [theme.breakpoints.down("sm")]: { + borderTopRightRadius: "4px", + }, })); const DivJump = styled("div")(({ theme }) => ({ @@ -73,6 +101,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 ( + + ); +} diff --git a/src/routers/photo/masonry.tsx b/src/routers/photo/masonry.tsx index 7cf9eed..83ff061 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([]); const isLoading = useAppSelector(selectPhotoLoadingState), dispatch = useAppDispatch(), @@ -40,10 +41,10 @@ export default function Masonry(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, @@ -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 (
- {isLoading || ( - - )} + +
+ {!isLoading && ( + + )} +
+ + +
+ +
+
); }