From f201cd1e6483f809f0aff4575ffef935beb9d88a Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Thu, 30 Mar 2023 18:15:09 +0800 Subject: [PATCH] =?UTF-8?q?:bug:=20fix(custom):=20=E4=BF=AE=E5=A4=8Deu?= =?UTF-8?q?=E9=83=BD=E5=9C=A8=E6=BA=9C=E4=BB=80=E4=B9=88=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=97=B6=E9=97=B4=E8=BF=87=E9=95=BF=E7=9A=84?= =?UTF-8?q?bug=EF=BC=8C=E5=90=8C=E6=97=B6=E7=BB=9F=E4=B8=80=E6=89=80?= =?UTF-8?q?=E6=9C=89=E5=9B=BE=E7=89=87=E7=9A=84=E5=8A=A0=E8=BD=BD=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/image/index.tsx | 130 +++++++++++------------ src/components/masonry/index.tsx | 72 ------------- src/normalize.css | 5 + src/routers/layout/index.tsx | 10 +- src/routers/layout/rightMore/euLink.tsx | 13 ++- src/routers/online/content.tsx | 74 +++++++++++-- src/routers/online/index.tsx | 4 + src/routers/online/item/index.tsx | 41 +++---- src/routers/online/item/item.module.less | 22 +++- src/routers/online/item/onlineInfo.tsx | 45 ++++---- src/routers/video/item/index.tsx | 6 +- src/routers/video/masonry.tsx | 6 +- src/store/euWhatLook/index.tsx | 18 +--- src/utils/fetch/index.ts | 39 +++---- 14 files changed, 240 insertions(+), 245 deletions(-) delete mode 100644 src/components/masonry/index.tsx diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx index 844ee10..3738dac 100644 --- a/src/components/image/index.tsx +++ b/src/components/image/index.tsx @@ -1,77 +1,68 @@ -import { useCallback, useMemo, useState, memo, ReactElement } from "react"; -import { InView } from "react-intersection-observer"; +import { useCallback, ReactElement, useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; import { Once } from "@utils/index"; import { ImageProps } from "./imagetype"; import styles from "./image.module.less"; -import { - getImageSize, - getResizeHeight, - fallbackUrl as DefaultFallbackUrl, - ImageSize, -} from "./tool"; -import { styled } from "@mui/material"; - -/** - * @description 图片预加载hook - */ - -function useLoading(url: string) { - const [obj, setObj] = useState({ - width: 0, - height: 0, - again: false, - isLoaded: false, - success: true, - }); - useMemo(async () => { - const res = await getImageSize(url); - setObj(() => ({ ...res, isLoaded: true })); - }, [url]); - return obj; -} - -/** - *@description 图片组件库，默认支持图片加载fallback。 - */ -export default memo(function Image({ +import { styled } from "@mui/material"; +import { fallbackUrl, getImageSize } from "./tool"; +export function InviewImage({ url, - width = 200, - height, - fallbackUrl = DefaultFallbackUrl, observer, callback, children, + title, + ...resProps }: ImageProps & { + title: string; children?: ReactElement; + [k: string]: any; }) { - const res = useLoading(url), - { isLoaded, success } = res, - real_width = width, - real_height = height || getResizeHeight(res, real_width), - real_fallback_url = fallbackUrl || DefaultFallbackUrl; + const [isImgLoading, setImgLoading] = useState(true); const once_callback = useCallback(Once(callback!!), []); + const { ref, inView, entry } = useInView(); + const [onceInView, setOnceInView] = useState(inView); + useEffect(() => { + if (inView) { + setOnceInView(() => true); + } + }, [inView]); + useEffect(() => { + if (observer && inView) { + once_callback(inView); + } + }, [inView, observer]); + useEffect(() => { + const handler = async () => { + await getImageSize(url); + setImgLoading(() => false); + }; + onceInView && handler(); + }, [onceInView]); return ( - - {({ inView, ref, entry }) => ( - - - <>{observer && inView && once_callback(inView)} - {children} - - )} - + + {title} + + {children} + ); -}); +} export function ImageBasic({ url, @@ -86,16 +77,17 @@ export function ImageBasic({ [k: string]: any; }) { const once_callback = useCallback(Once(callback!!), []); + const { ref, inView, entry } = useInView(); + useEffect(() => { + if (observer && inView) { + once_callback(inView); + } + }, [inView, observer]); return ( - - {({ inView, ref, entry }) => ( - - {title} - <>{observer && inView && once_callback(inView)} - {children} - - )} - + + {title} + {children} + ); } diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx deleted file mode 100644 index 3bbf9ea..0000000 --- a/src/components/masonry/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { FC, useState, useEffect, useCallback } from "react"; -import { Masonry as Masonic_masonry } from "masonic"; -import Image from "@components/image"; -import { SingleRun, concurrencyRequest } from "@utils/index"; -import { fetchPhotos } from "@utils/fetch"; -import { nanoid } from "nanoid"; -import { getImageSize } from "../image/tool"; -export default function Masonry() { - const [lists, setLists] = useState([]); - const fetchMoreItems = async ( - startIndex: number, - stopIndex: number, - currentItems: any[] - ) => { - const res = await fetchPhotos({ - type: "recommend", - page: 0, - topic_id: 0, - }), - data = res.data.result; - }; - const fetchMoreItemsHandler = useCallback(SingleRun(fetchMoreItems), [ - setLists, - ]); - useEffect(() => { - fetchMoreItemsHandler(0, 20, []); - }, [fetchMoreItemsHandler]); - return ( -
-
- -
-
- ); -} - -type MasonryImageType = { - id: string; - image: string; - name: string; - observer?: boolean; - callback?: (inView: boolean) => void; -}; - -type CardType = { - data: MasonryImageType; -}; - -const FakerCard: FC = ({ data: { id, image, name, ...res } }) => { - return ( -
- -
-

- {name} -

-
-
- ); -}; diff --git a/src/normalize.css b/src/normalize.css index 780ad9c..d9992dd 100644 --- a/src/normalize.css +++ b/src/normalize.css @@ -26,6 +26,11 @@ body { margin: 0; } +html, +body { + scroll-behavior: smooth; +} + /** * Render the `main` element consistently in IE. */ diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx index 97df7a3..ff6a29c 100644 --- a/src/routers/layout/index.tsx +++ b/src/routers/layout/index.tsx @@ -1,14 +1,18 @@ import { Flipped, Flipper } from "react-flip-toolkit"; -import { Outlet, useMatch } from "react-router-dom"; +import { Outlet, useLocation, useMatch } from "react-router-dom"; import Header from "./header"; import { useAppSelector } from "@store/hooks"; import { selectNavMoreShowed } from "@store/device/index"; -import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; -import { Link } from "@mui/material"; + import styles from "./layout.module.less"; import Header_Nav from "./nav"; +import { useEffect } from "react"; export default function Layout() { const showed = useAppSelector(selectNavMoreShowed); + const location = useLocation(); + useEffect(() => { + window.scrollTo({ top: 0 }); + }, [location.pathname, location.search]); return ( <> { const curParmas = useGetEuFetchParmas(); const filterItem = OrderItemLists.filter((item) => item.param !== curParmas); const curItem = OrderItemLists.filter((item) => item.param === curParmas); + const isLoading = useGetEuIsloading(); const updateParamer = useSetEuFetchParamas(), handleUpdateParmas = () => updateParamer(filterItem[0].param); return (
{curItem.map((item) => (