修复nav栏

index.html

@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="referrer" content="no-referrer" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="renderer" content="webkit" />
+  <link rel="dns-prefetch" href="https://s1.hdslb.com">
   <title>eoefans-web</title>
 </head>
 

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "localdev":"vite --host 192.168.2.250"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.7",

src/components/image/index.tsx

@@ -4,6 +4,7 @@ import { useImageShouldResize } from "@components/proview/imageSize";
 import { Once } from "@utils/index";
 import { ImageProps } from "./imagetype";
 import styles from "./image.module.less";
+import { useScreenSize } from "../proview/screenSize";
 import {
   getImageSize,
   getResizeHeight,
@@ -82,18 +83,18 @@ export function ImageBasic({
 }: Omit<ImageProps, "width" | "height"> & {
   children?: ReactElement;
 }) {
-  const // res = useLoading(url),
-    //   { isLoaded, success } = res,
-    real_fallback_url = fallbackUrl || DefaultFallbackUrl;
+  const real_fallback_url = fallbackUrl || DefaultFallbackUrl;
   const once_callback = useCallback(Once(callback!!), []);
+  const { md } = useScreenSize();
   return (
     <InView>
       {({ inView, ref, entry }) => (
         <div ref={ref} className={styles.imgWrapper}>
           <img
             src={
-              `${url}@672w_378h_1c_!web-search-common-cover` ||
-              real_fallback_url
+              `${url}${
+                !md ? `@480w_270h_1c` : `@672w_378h_1c_!web-search-common-cover`
+              }` || real_fallback_url
             }
             style={{
               opacity: 1.0 || 0.09,

src/components/proview/screenSize.tsx

@@ -0,0 +1,45 @@
+import { Breakpoint } from "@mui/material";
+import { useScreenMatchSize } from "@utils/hooks/match";
+import {
+  useContext,
+  useState,
+  createContext,
+  useEffect,
+  ReactElement,
+} from "react";
+const size_list: Breakpoint[] = ["lg", "md", "sm", "xs"];
+
+const ScreenContext = createContext<ScreenContextType>(
+  size_list.reduce((pre, size: Breakpoint) => {
+    //@ts-ignore
+    pre[size] = false;
+    return pre;
+  }, {} as ScreenContextType)
+);
+type ScreenContextType = {
+  lg: boolean;
+  md: boolean;
+  sm: boolean;
+  xs: boolean;
+};
+type ProviewProps = {
+  children: ReactElement;
+};
+
+const ScreenProview = ({ children }: ProviewProps) => {
+  const ScreenSize: ScreenContextType = size_list.reduce((preObj, size) => {
+    //@ts-ignore
+    preObj[size] = useScreenMatchSize(size);
+    return preObj;
+  }, {} as ScreenContextType);
+  return (
+    <ScreenContext.Provider value={ScreenSize}>
+      {children}
+    </ScreenContext.Provider>
+  );
+};
+export const useScreenSize = () => {
+  return useContext(ScreenContext);
+};
+
+export default ScreenProview;

src/main.tsx

@@ -5,10 +5,15 @@ import VideoPage from "./routers/video";
 import "./index.less";
 import "intersection-observer";
 import "./normalize.css";
-const ReadPage = lazy(() => import("./routers/read")),
-  Layout = lazy(() => import("./routers/layout")),
-  PhotoPage = lazy(() => import("./routers/photo")),
-  ErrorPage = lazy(() => import("./routers/error"));
+import ReadPage from "./routers/read";
+import Layout from "./routers/layout";
+import PhotoPage from "./routers/photo";
+import ErrorPage from "./routers/error";
+import ScreenProview from "@components/proview/screenSize";
+// const ReadPage = lazy(() => import("./routers/read")),
+//   Layout = lazy(() => import("./routers/layout")),
+//   PhotoPage = lazy(() => import("./routers/photo")),
+//   ErrorPage = lazy(() => import("./routers/error"));
 const router = createBrowserRouter([
   {
     path: "/",
@@ -50,9 +55,11 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   // <React.StrictMode>
-  <Suspense>
+  // <Suspense>
+  <ScreenProview>
     <RouterProvider router={router} />
-  </Suspense>
+  </ScreenProview>
+  // </Suspense>
 
   // </React.StrictMode>
 );

src/routers/layout/layout.module.less

@@ -96,8 +96,7 @@
         @itemMarginHalfWidth: 8px;
         @itemMarginHalfHeight: 4px;
         // grid布局
-        grid-template-columns: repeat(auto-fill, @itemWidth+2*@itemMarginHalfWidth);
-        transition: display 2s;
+        grid-template-columns: repeat(auto-fit, minmax(@itemWidth+2*@itemMarginHalfWidth, 1fr));
 
         &>* {
             margin: @itemMarginHalfHeight @itemMarginHalfWidth;

src/routers/video/masonry.tsx

@@ -8,6 +8,7 @@ import ImageShouldResizeProview from "@components/proview/imageSize";
 import { VideoRouterImageCard } from "./masonryItem";
 import { Skeleton } from "@mui/material";
 import { nanoid } from "nanoid";
+import { useScreenSize } from "../../components/proview/screenSize";
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */
@@ -24,16 +25,17 @@ export default function VideoMasonry(props: any) {
           page,
           ...resProps,
         }),
-        data = res.data.result,
-        url_pic = data.map(
-          (item) => `${item.pic}@672w_378h_1c_!web-search-common-cover`
-        ),
-        url_face = data.map((item) => item.face);
-      const imageSizelists = await concurrencyRequest(
-        [...url_pic, ...url_face],
-        getImageSize,
-        10
-      );
+        data = res.data.result;
+      // ,
+      // url_pic = data.map(
+      //   (item) => `${item.pic}@672w_378h_1c_!web-search-common-cover`
+      // ),
+      // url_face = data.map((item) => item.face);
+      // const imageSizelists = await concurrencyRequest(
+      //   [...url_pic, ...url_face],
+      //   getImageSize,
+      //   10
+      // );
       setLists((lists) => [
         ...lists,
         ...data.map((item, index) => {
@@ -62,7 +64,7 @@ export default function VideoMasonry(props: any) {
               id: nanoid(4),
               observer: true,
               callback: (inView: boolean) => {
-                fetchHandler(page + 1, ...resProps);
+                // fetchHandler(page + 1, ...resProps);
               },
             };
           }
@@ -77,7 +79,12 @@ export default function VideoMasonry(props: any) {
       <ImageShouldResizeProview>
         <Grid
           container
-          spacing={2}
+          spacing={{
+            lg: 2,
+            md: 1,
+            sm: 1,
+            xs: 1,
+          }}
           columns={{
             lg: 10,
             md: 8,

src/routers/video/masonryItem.tsx

@@ -5,13 +5,13 @@ import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
 import ThumbUpSharpIcon from "@mui/icons-material/ThumbUpSharp";
 import FavoriteSharpIcon from "@mui/icons-material/FavoriteSharp";
 import { Link, Avatar } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material";
 import { VideoRouterImageCardType } from "./videotype";
 import getrealtiveTime, { getVideoTime } from "@utils/time";
 import styles from "./video.module.less";
 import { Omit, Pick } from "@utils/index";
 import getFixedNumber from "../../utils/number/index";
+import { useScreenMatchSize } from "@utils/hooks/match";
+import { useScreenSize } from "@components/proview/screenSize";
 
 export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
   data,
@@ -67,17 +67,20 @@ const VideoData: FC<
   Pick<VideoRouterImageCardType, "view" | "danmaku" | "duration">
 > = (props) => {
   const { view, danmaku, duration } = props;
+  const { sm } = useScreenSize();
   return (
     <div className={styles["video-data"]}>
       <div className={styles["video-data-left"]}>
         <span title='播放量'>
           <SlowMotionVideoSharpIcon fontSize='small' />
           {getFixedNumber(view)}
         </span>
-        <span title='弹幕数'>
-          <SubjectSharpIcon fontSize='small' />
-          {getFixedNumber(danmaku)}
-        </span>
+        {sm && (
+          <span title='弹幕数'>
+            <SubjectSharpIcon fontSize='small' />
+            {getFixedNumber(danmaku)}
+          </span>
+        )}
       </div>
       <span title='视频时长'>{getVideoTime(duration)}</span>
     </div>
@@ -97,8 +100,7 @@ const VideoInfo: FC<
   >
 > = (props) => {
   const { title, name, bvid, updated_at, coin, like, favorite, face } = props;
-  const theme = useTheme();
-  const matchesPhone = useMediaQuery(theme.breakpoints.up("sm"));
+  const matchsmSize = useScreenMatchSize("sm");
   return (
     <div className={styles["video-info"]}>
       <p title={title}>
@@ -112,13 +114,13 @@ const VideoInfo: FC<
         </Link>
       </p>
       <div className={styles["video-up"]}>
-        {matchesPhone && <Avatar alt={name} src={face} />}
+        {matchsmSize && <Avatar alt={name} src={`${face}@96w_96h_1s.webp`} />}
         <div className={styles["video-up-desc"]}>
           <Link underline='none' color='inherit'>
             <span title={name}>{name}</span>
-            {matchesPhone && <span>{getrealtiveTime(updated_at * 1000)}</span>}
+            {matchsmSize && <span>{getrealtiveTime(updated_at * 1000)}</span>}
           </Link>
-          {matchesPhone && (
+          {matchsmSize && (
             <div className={styles["video-up-desc-data"]}>
               <span title='点赞数'>
                 <ThumbUpSharpIcon fontSize='small' htmlColor='#707070' />{" "}

src/utils/fetch/index.ts

@@ -11,11 +11,11 @@ import { IFetchVideoParams, RFetchVideoRes } from "./fetchtype";
 export function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
-  // return new Promise((resolve) => {
-  //   setTimeout(() => {
-  //     resolve(videoJson);
-  //   }, 1000);
-  // });
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(videoJson);
+    }, 1000);
+  });
   return fetch(
     `/v1/video-interface/advanced-search?order=${params.order}&page=${
       params.page

src/utils/hooks/match.ts

@@ -0,0 +1,18 @@
+import { Breakpoint, useMediaQuery, useTheme } from "@mui/material";
+
+/**
+ * @description 获知当前屏幕处于哪种大小
+ */
+export const useScreenMatchSize = (size: Breakpoint) => {
+  const theme = useTheme();
+  const matchSize = useMediaQuery(theme.breakpoints.up(size));
+  return matchSize;
+};
+//个人主页头像大小
+`@240w_240h_1c_1s.webp`;
+//移动平台首页图片大小
+`@480w_270h_1c`;
+//电脑平台首页图片大小
+`@672w_378h_1c_!web-search-common-cover`;
+//首页up头像大小
+`@96w_96h_1s.webp`;

vite.config.ts

@@ -12,21 +12,34 @@ export default defineConfig({
       "@utils": path.resolve(__dirname, "src/utils"),
       "@components": path.resolve(__dirname, "src/components"),
       "@store": path.resolve(__dirname, "src/store"),
+      "@routers": path.resolve(__dirname, "src/routers"),
     },
   },
   plugins: [react(), visualizer(), viteCompression()],
   build: {
     target: "es2015",
     minify: "esbuild",
-    // rollupOptions: {
-    //   output: {
-    //     manualChunks(id) {
-    //       if (id.includes("node_modules")) {
-    //         return "vendor";
-    //       }
-    //     },
-    //   },
-    // },
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          react: ["react", "react-dom"],
+          "react-router": ["react-router-dom"],
+          lib: [
+            "@mui/icons-material",
+            "@mui/lab",
+            "@mui/material",
+            "@emotion/react",
+            "@emotion/styled",
+          ],
+          "dnd-tool": [
+            "@dnd-kit/core",
+            "@dnd-kit/modifiers",
+            "@dnd-kit/sortable",
+            "@dnd-kit/utilities",
+          ],
+        },
+      },
+    },
   },
   server: {
     proxy: {