完成改造

src/Main.jsx

@@ -10,17 +10,10 @@ import CircularProgress from '@mui/material/CircularProgress';
 import ConfigContext from './Config';
 import MovieCard from './components/MovieCard';
 import CategoryNav from './components/CategoryNav';
- 
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
 
 const Main = () => {
   const config = useContext(ConfigContext);
-
-  const [currentCategory, setCurrentCategory] = useState(0);
-
+  const [loading, setLoading] = useState(false);
   const categories = [
     { label: '15min', idx: 0 },
     { label: '30min', idx: 1 },
@@ -28,6 +21,12 @@ const Main = () => {
     { label: '大于60min', idx: 3 },
   ];
 
+
+  const limit = 20;
+ 
+  const [currentCategory, setCurrentCategory] = useState(parseInt(localStorage.getItem('lastCategory'), 10) || 0);
+
+
   const [pagination, setPagination] = useState({
     movies: [],
     page: 1,
@@ -35,26 +34,18 @@ const Main = () => {
     length: 1,
   });
 
-  const [loading, setLoading] = useState(false);
-
-  const limit = 20;
-
-  const handleCategoryChange = (category) => {
-    setCurrentCategory(category);
-    fetchMovies(category, 1);
-  };
-
  
   const fetchMovies = useCallback(async (category, page) => {
+
     setLoading(true);
     try {
       const response = await axios.get(
         `${config.Host}/movie/?page=${page}&limit=${limit}&category=${category}`
       );
-  
+
       if (response.status === 200) {
         const data = response.data.data;
-  
+
         if (data.items.length === 0 && page > 1) {
           // 如果返回的数据为空且请求的页码大于1，则尝试获取上一页的数据
           fetchMovies(category, page - 1);
@@ -76,24 +67,33 @@ const Main = () => {
   }, [config.Host, limit]);
 
   useEffect(() => {
-    const lastPage = localStorage.getItem('lastPage') || 1;
-    fetchMovies(currentCategory, lastPage);
-  }, [ currentCategory, fetchMovies]);
+    const lastPage = parseInt(localStorage.getItem('lastPage'), 10) || 1;
+    const lastCategory = localStorage.getItem('lastCategory') || 0;
+    fetchMovies(lastCategory, lastPage);
+  }, [fetchMovies]);
+
+  const handlePageChange = useCallback(async (event, page) => {
+    // console.log("handlePageChange");
+    fetchMovies(currentCategory, page);
+  }, [fetchMovies, currentCategory]);
+
+  const handleCategoryChange = useCallback(async (category) => {
+    // console.log("handleCategoryChange");
+    setCurrentCategory(category);
+    localStorage.setItem('lastCategory', category);
+    fetchMovies(category, 1);
+  }, [fetchMovies]);
 
-  const handlePageChange = (event, value) => {
-    fetchMovies(currentCategory, value);
-  };
- 
- 
   return (
     <Container style={{ marginTop: 20 }}>
-        <CategoryNav
-          categories={categories}
-          currentCategory={currentCategory}
-          onCategoryChange={handleCategoryChange}
-        />
- 
+      <CategoryNav
+        categories={categories}
+        currentCategory={currentCategory}
+        onCategoryChange={handleCategoryChange}
+      />
+
       <div style={{ textAlign: 'center', marginBottom: 20 }}>
+
         <Pagination
           count={pagination.length}
           page={pagination.page}
@@ -102,37 +102,40 @@ const Main = () => {
           color="primary"
           size="large"
         />
+
       </div>
- 
+
       <div>
         {loading ? (
           <div
-            style={{display: 'flex',justifyContent: 'center',alignItems: 'center',height: '50vh'}}
+            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
           >
             <CircularProgress />
           </div>
         ) : (
- 
+
           <Grid container spacing={2} style={{ marginTop: 3 }}>
-          {pagination.movies.map((item) => (
-            <Grid item xs={6} sm={4} md={3} lg={2}
-              style={{ display: 'flex', justifyContent: 'space-between' }}
-              key={item.filename}
-            >
-              <Link
-                to={`/res/${item.filename}`}
-                style={{ textDecoration: 'none', paddingBottom: 10 }}
+            {pagination.movies.map((item) => (
+              <Grid item xs={6} sm={4} md={3} lg={2}
+                style={{ display: 'flex', justifyContent: 'space-between' }}
+                key={item.filename}
               >
-                <MovieCard movie={item} config={config} />
-              </Link>
-            </Grid>
-          ))}
-        </Grid>
+                <Link
+                  to={`/res/${item.filename}`}
+                  style={{ textDecoration: 'none', paddingBottom: 10 }}
+                >
+                  <MovieCard movie={item} config={config} />
+                </Link>
+              </Grid>
+            ))}
+          </Grid>
         )}
       </div>
- 
-      <div style={{ textAlign: 'center', marginTop: 20 }}>
+
+      <div style={{ textAlign: 'center', marginBottom: 20 }}>
+
         <Pagination
+
           count={pagination.length}
           page={pagination.page}
           onChange={handlePageChange}
@@ -140,6 +143,7 @@ const Main = () => {
           color="primary"
           size="large"
         />
+
       </div>
     </Container>
   );

src/components/MovieCard.jsx

@@ -9,11 +9,7 @@ const MovieCard = ({ movie, config }) => {
       ? filename.substring(0, maxLength - 3) + '...'
       : filename;
   };
-
-  const theme = useTheme();
-  console.log(theme.shadows)
-  
-
+ 
   const StyledCard = styled(Card)({
     '&:hover': {
       transform: 'scale(1.05)',