添加photo样式，还需要修改路由标签样式等操作

package.json

@@ -36,7 +36,8 @@
     "react-photo-view": "^1.2.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.1",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "swiper": "^8.4.6"
   },
   "devDependencies": {
     "@babel/core": ">=7.0.0 <8.0.0",

src/components/image/index.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, useState, memo, ReactElement } from "react";
 import { InView } from "react-intersection-observer";
-import { useImageShouldResize } from "@components/proview/imageSize";
 import { Once } from "@utils/index";
 import { ImageProps } from "./imagetype";
 import styles from "./image.module.less";
@@ -53,14 +52,13 @@ export default memo(function Image({
     real_height = height || getResizeHeight(res, real_width),
     real_fallback_url = fallbackUrl || DefaultFallbackUrl;
   const once_callback = useCallback(Once(callback!!), []);
-  const { isShouldchangeSize } = useImageShouldResize();
   return (
     <InView>
       {({ inView, ref, entry }) => (
         <div ref={ref} className={styles.imgWrapper}>
           <img
-            width={isShouldchangeSize ? "100%" : real_width}
-            height={isShouldchangeSize ? "100%" : real_height}
+            width={real_width}
+            height={real_height}
             src={isLoaded && success ? url : real_fallback_url}
             style={{
               opacity: isLoaded ? 1.0 : 0.09,

src/components/masonry/index.tsx

@@ -2,7 +2,7 @@ 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 { fetchVideos } from "@utils/fetch";
+import { fetchPhotos, fetchVideos } from "@utils/fetch";
 import { nanoid } from "nanoid";
 import { getImageSize } from "../image/tool";
 export default function Masonry() {
@@ -12,38 +12,12 @@ export default function Masonry() {
     stopIndex: number,
     currentItems: any[]
   ) => {
-    const res = await fetchVideos({
-        order: "view",
-        page: 1,
+    const res = await fetchPhotos({
+        type: "recommend",
+        page: 0,
+        topic_id: 0,
       }),
-      data = res.data.result,
-      urls = data.map((item) => item.face);
-    const fetchimagres = await concurrencyRequest(urls, getImageSize, 6);
-    setLists((lists) => {
-      return [
-        ...lists,
-        ...data.map((item, index) => {
-          // if (index !== data.length - 6) {
-          return {
-            image: item.face,
-            name: item.name,
-            id: nanoid(10),
-          };
-          // }
-          return {
-            image: item.face,
-            name: item.name,
-            id: nanoid(10),
-            observer: true,
-            callback: (inView: boolean) => {
-              //@ts-ignore
-              fetchMoreItems();
-              console.log("fetching!");
-            },
-          };
-        }),
-      ];
-    });
+      data = res.data.result;
   };
   const fetchMoreItemsHandler = useCallback(SingleRun(fetchMoreItems), [
     setLists,

src/components/modal/index.tsx

@@ -0,0 +1,74 @@
+import { memo, useState, ReactElement } from "react";
+import styles from "./modal.module.less";
+import { createPortal } from "react-dom";
+import { useEffect } from "react";
+import { enableScroll, disableScroll } from "./scrollFn";
+
+type __Click_modal__Type = {
+  children: ReactElement;
+  visible: boolean;
+  closeModal: (event: any) => void;
+  resProps: Object;
+};
+
+export const __Click_Modal__ = (props: __Click_modal__Type) => {
+  const { children, visible, closeModal, ...resProps } = props;
+  function handleClick(event: {
+    stopPropagation: () => void;
+    target: any;
+    currentTarget: any;
+  }) {
+    //点击蒙层本身时关闭模态框，点击模态框内容时不关闭
+    event.stopPropagation();
+    // event.nativeEvent.stopImmediatePropagation();
+    if (event.target === event.currentTarget) {
+      closeModal(event);
+    }
+  }
+  let modal;
+  typeof document !== "undefined" &&
+    (modal = createPortal(
+      <div {...resProps} className={styles.modal} onClick={handleClick}>
+        {children}
+      </div>,
+      document.body
+    ));
+  return <>{visible && modal}</>;
+};
+
+type ModalType = {
+  isNoScroll: boolean;
+  children: ReactElement;
+  visible: boolean;
+  closeModal: (event: any) => void;
+};
+export default memo(function Modal(props: ModalType) {
+  const { isNoScroll = false, children, ...resProps } = props;
+  useEffect(() => {
+    if (isNoScroll) {
+      disableScroll();
+      return enableScroll;
+    }
+  }, [isNoScroll]);
+  //@ts-ignore
+  return <__Click_Modal__ {...resProps}>{children}</__Click_Modal__>;
+});
+
+type useModalConfigOutputType = {
+  visible: boolean;
+  isNoScroll: boolean;
+  closeModal: () => void;
+};
+
+export const useModalConfig = (
+  _isvisible: boolean,
+  _isNoScroll: boolean
+): useModalConfigOutputType => {
+  const [isvisible, setVisible] = useState(_isvisible || false);
+  const [isNoScroll, setScroll] = useState(_isNoScroll || false);
+  const clickFunc = () => {
+    setScroll(!isNoScroll);
+    setVisible(!isvisible);
+  };
+  return { visible: isvisible, isNoScroll, closeModal: clickFunc };
+};

src/components/modal/modal.module.less

@@ -0,0 +1,11 @@
+/* modal.less */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    min-height: 100vh;
+    background-color: rgba(0, 0, 0, 0.7);
+}

src/components/modal/scrollFn.ts

@@ -0,0 +1,22 @@
+//@ts-nocheck
+//阻止默认行为
+export function preventDefault(e) {
+  // console.log({ e });
+  e.preventDefault();
+}
+
+export function enableScroll() {
+  const wheelEvent =
+    "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
+  window.removeEventListener("DOMMouseScroll", preventDefault, false);
+  window.removeEventListener(wheelEvent, preventDefault, { passive: false });
+  window.removeEventListener("touchmove", preventDefault, { passive: false });
+}
+
+export function disableScroll() {
+  const wheelEvent =
+    "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
+  window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
+  window.addEventListener(wheelEvent, preventDefault, { passive: false }); // modern desktop
+  window.addEventListener("touchmove", preventDefault, { passive: false }); // mobile
+}

src/main.tsx

@@ -16,7 +16,7 @@ import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
 import "./index.less";
-
+import "swiper/css/bundle";
 const router = createBrowserRouter([
   {
     path: "/",

src/routers/layout/header.tsx

@@ -1,19 +1,29 @@
-import { useSearchFocus } from "@components/proview/searchFocus";
-import { Flipped } from "react-flip-toolkit";
 import styles from "./layout.module.less";
 import LOGO from "./logo";
-import RightSide from "./rightSide";
-import Search from "./search";
+import { useAppDispatch } from "@store/hooks";
+import { Link, useLocation } from "react-router-dom";
+import { useEffect, useMemo } from "react";
+import { changeLoadingCauseByUrl } from "@store/loading";
 export default function Header() {
-  // const { focused } = useSearchFocus();
-  return (
-    // <Flipped flipId={"list"} spring={"veryGentle"}>
-    <header className={styles["header"]}>
-      {/* {!focused && <LOGO />}
-        <Search />
-        {!focused && <RightSide />} */}
-      <LOGO />
-    </header>
-    // </Flipped>
+  const dispatch = useAppDispatch(),
+    location = useLocation();
+  useEffect(() => {
+    dispatch(
+      changeLoadingCauseByUrl({
+        stateName:
+          location.pathname == "/photo" ? "photoIsloading" : "videoIsLoading",
+      })
+    );
+  }, [location.pathname]);
+  const JSXRes = useMemo(
+    () => (
+      <header className={styles["header"]}>
+        <LOGO />
+        <Link to='/video'>video</Link>
+        <Link to='/photo'>photo</Link>
+      </header>
+    ),
+    []
   );
+  return <>{JSXRes}</>;
 }

src/routers/layout/index.tsx

@@ -4,16 +4,13 @@ import Header from "./header";
 import Header_Nav from "./nav";
 import { useAppSelector } from "@store/hooks";
 import { selectNavMoreShowed } from "@store/device/index";
-import { useSearchFocus } from "@components/proview/searchFocus";
 import styles from "./layout.module.less";
 export default function Layout() {
-  const showed = useAppSelector(selectNavMoreShowed),
-    { focused } = useSearchFocus();
-
+  const showed = useAppSelector(selectNavMoreShowed);
   return (
     <>
       <Flipper
-        flipKey={`${showed}-${focused}`}
+        flipKey={`${showed}`}
         decisionData={showed}
         spring={"veryGentle"}
         className={styles["container"]}
@@ -31,12 +28,8 @@ export default function Layout() {
           </nav>
         </Flipped>
         <Flipped flipId={"container"} spring={"veryGentle"}>
-          <main>
-            <section
-            // className=
-            >
-              <Outlet />
-            </section>
+          <main className='feedContainer'>
+            <Outlet />
           </main>
         </Flipped>
       </Flipper>

src/routers/photo/index.tsx

@@ -0,0 +1,9 @@
+import Masonry from "./masonry";
+
+export default function PhotoPage() {
+  return (
+    <>
+      <Masonry />
+    </>
+  );
+}