diff --git a/server/main.go b/server/main.go index e622bde..1c7785f 100644 --- a/server/main.go +++ b/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) == "" { diff --git a/src/Main.jsx b/src/Main.jsx index f7919e9..fd1a5e1 100644 --- a/src/Main.jsx +++ b/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 ( @@ -131,7 +150,12 @@ const Main = () => { {loading ? ( ) : ( - + )} @@ -140,41 +164,40 @@ const Main = () => { }; const PaginationWrapper = ({ page, length, onPageChange }) => ( -
- -
+ + + ); + + +const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => { + useEffect(() => { + onRenderComplete(); + }, [movies, onRenderComplete]); + + return ( + + {movies.map((item) => ( + + + + + + ))} + + ); +}; const Loading = () => ( -
+ -
-); - -const MoviesGrid = ({ movies, config }) => ( - - {movies.map((item) => ( - - - - - - ))} ); diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx index c31242e..fd34d47 100644 --- a/src/components/MovieCard.jsx +++ b/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 MovieCard = ({ movie, config }) => { const truncateFilename = (filename, maxLength) => { return filename.length > maxLength ? filename.substring(0, maxLength - 3) + '...' diff --git a/src/hooks/useScrollMemory.jsx b/src/hooks/useScrollMemory.jsx new file mode 100644 index 0000000..8bc2d17 --- /dev/null +++ b/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; \ No newline at end of file