接近完美版本

server/main.go

@@ -14,6 +14,10 @@ func main() {
 	eg.Use(Cors())
 	eg.Static("/res", "movie/")
 	eg.Static("/static", "../build/static")
+	eg.StaticFile("/manifest.json", "../build/manifest.json")
+	eg.StaticFile("/favicon.ico", "../build/favicon.ico")
+	eg.StaticFile("/logo512.png", "../build/logo512.png")
+	eg.StaticFile("/logo192.png", "../build/logo192.png")
 	eg.NoRoute(func(c *gin.Context) {
 		path := c.Request.URL.Path
 		if filepath.Ext(path) == "" {

src/Main.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback, useRef} from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -28,13 +28,13 @@ const Main = () => {
       return JSON.parse(storedParams);
     } else {
       return {
-        lastPage: {
-          0: 1,
-          1: 1,
-          2: 1,
-          3: 1,
-        },
         lastCategory: 0,
+        history: {
+          0: { lastPage: 1, scrollPos: 0 },
+          1: { lastPage: 1, scrollPos: 0 },
+          2: { lastPage: 1, scrollPos: 0 },
+          3: { lastPage: 1, scrollPos: 0 },
+        },
       };
     }
   };
@@ -43,15 +43,11 @@ const Main = () => {
 
   const [pagination, setPagination] = useState({
     movies: [],
-    page: params.lastPage[params.lastCategory],
+    page: params.history[params.lastCategory].lastPage,
     total: 1,
     length: 1,
   });
 
-
-  const paramsRef = useRef(params);
-  paramsRef.current = params;
-
   const fetchMovies = useCallback(async (category, page) => {
     setLoading(true);
     try {
@@ -71,7 +67,6 @@ const Main = () => {
             total: data.total,
             length: Math.ceil(data.total / limit),
           });
-          updateParams(category, page);
         }
       }
     } catch (error) {
@@ -82,41 +77,65 @@ const Main = () => {
   }, [config.Host, limit]);
 
   useEffect(() => {
-
-    fetchMovies(paramsRef.current.lastCategory, paramsRef.current.lastPage[paramsRef.current.lastCategory]);
-  }, [fetchMovies]);
-
-  const updateParams = (category, page) => {
-    setParams((prevParams) => {
-      const newParams = {
-        ...prevParams,
-        lastPage: {
-          ...prevParams.lastPage,
-          [category]: page,
-        },
-      };
-      localStorage.setItem('params', JSON.stringify(newParams));
-      return newParams;
-    });
-  };
-
-  const handlePageChange = useCallback((event, page) => {
-    fetchMovies(params.lastCategory, page);
-    updateParams(params.lastCategory, page);
+    const currentCategory = params.lastCategory;
+    const currentPage = params.history[currentCategory].lastPage;
+    fetchMovies(currentCategory, currentPage);
   }, [fetchMovies, params]);
 
-  const handleCategoryChange = useCallback((category) => {
+  const updateParams = useCallback((newParams) => {
     setParams((prevParams) => {
-      const newParams = {
-        ...prevParams,
-        lastCategory: category,
-      };
-      localStorage.setItem('params', JSON.stringify(newParams));
-      return newParams;
+      const updatedParams = { ...prevParams, ...newParams };
+      localStorage.setItem('params', JSON.stringify(updatedParams));
+      return updatedParams;
     });
-    // 从 paramsRef.current 获取当前 category 对应的页面
-    fetchMovies(category, paramsRef.current.lastPage[category]);
-  }, [fetchMovies]);
+  }, []);
+
+  const handlePageChange = useCallback(
+    (event, page) => {
+      const currentCategory = params.lastCategory;
+      updateParams({
+        history: {
+          ...params.history,
+          [currentCategory]: { ...params.history[currentCategory], lastPage: page },
+        },
+      });
+      fetchMovies(currentCategory, page);
+    },
+    [fetchMovies, params, updateParams]
+  );
+
+  // 导致递归刷新
+  const handleCategoryChange = useCallback(
+    (category) => {
+      const currentPage = params.history[category].lastPage;
+      fetchMovies(category, currentPage);
+
+      const currentCategory = params.lastCategory;
+      updateParams({
+        lastCategory: category,
+        history: {
+          ...params.history,
+          [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
+        },
+      });
+    },
+    [fetchMovies, params, updateParams]
+  );
+
+  const handleRenderComplete = useCallback(() => {
+    const { scrollPos } = params.history[params.lastCategory];
+    window.scrollTo(0, scrollPos);
+  }, [params]);
+
+  const handleMovieCardClick = () => {
+    const currentCategory = params.lastCategory;
+    updateParams({
+      history: {
+        ...params.history,
+        [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
+      },
+    });
+  };
 
   return (
     <Container style={{ marginTop: 20 }}>
@@ -131,7 +150,12 @@ const Main = () => {
       {loading ? (
         <Loading />
       ) : (
-        <MoviesGrid movies={pagination.movies} config={config} />
+        <MoviesGrid
+          movies={pagination.movies}
+          config={config}
+          onRenderComplete={handleRenderComplete}
+         onMovieCardClick={handleMovieCardClick}
+        />
       )}
 
       <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
@@ -140,27 +164,18 @@ const Main = () => {
 };
 
 const PaginationWrapper = ({ page, length, onPageChange }) => (
-  <div style={{ textAlign: 'center', marginBottom: 20 }}>
-    <Pagination
-      count={length}
-      page={page}
-      onChange={onPageChange}
-      shape="rounded"
-      color="primary"
-      size="large"
-    />
-  </div>
+  <Grid container justifyContent="center" style={{ marginTop: 20, marginBottom: 20 }}>
+    <Pagination count={length} page={page} onChange={onPageChange} />
+  </Grid>
 );
  
-const Loading = () => (
-  <div
-    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
-  >
-    <CircularProgress />
-  </div>
-);
 
-const MoviesGrid = ({ movies, config }) => (
+const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
+  useEffect(() => {
+    onRenderComplete();
+  }, [movies, onRenderComplete]);
+
+  return (
     <Grid container spacing={2} style={{ marginTop: 3 }}>
       {movies.map((item) => (
         <Grid item xs={6} sm={4} md={3} lg={2}
@@ -170,6 +185,7 @@ const MoviesGrid = ({ movies, config }) => (
           <Link
             to={`/res/${item.filename}`}
             style={{ textDecoration: 'none', paddingBottom: 10 }}
+            onClick={onMovieCardClick} // 修改这里
           >
             <MovieCard movie={item} config={config} />
           </Link>
@@ -177,5 +193,12 @@ const MoviesGrid = ({ movies, config }) => (
       ))}
     </Grid>
   );
+};
+
+const Loading = () => (
+  <Grid container justifyContent="center" style={{ marginTop: 20 }}>
+    <CircularProgress />
+  </Grid>
+);
 
 export default Main;

src/components/MovieCard.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import {useEffect} from 'react';
+ 
  
 import { Card, CardContent, CardMedia, Typography } from '@mui/material';
-import { styled, useTheme } from '@mui/system';
+import { styled } from '@mui/system';
 
 const MovieCard = ({ movie, config  }) => {
+ 
+
   const truncateFilename = (filename, maxLength) => {
     return filename.length > maxLength
       ? filename.substring(0, maxLength - 3) + '...'

src/hooks/useScrollMemory.jsx

@@ -0,0 +1,21 @@
+// hooks/useScrollMemory.js
+import { useEffect } from 'react';
+
+const useScrollMemory = (key) => {
+  useEffect(() => {
+    const storedScrollPos = localStorage.getItem(key) || 0;
+    window.scrollTo(0, storedScrollPos);
+    
+    const handleScroll = () => {
+      localStorage.setItem(key, window.scrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [key]);
+};
+
+export default useScrollMemory;