修改一部分

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.13.7",
         "@mui/material": "^5.13.7",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -3189,6 +3190,27 @@
       "resolved": "https://registry.npmmirror.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.7.tgz",
       "integrity": "sha512-/suIo4WoeL/OyO3KUsFVpdOmKiSAr6NpWXmQ4WLSxwKrTiha1FJxM6vwAki5W/5kR9WnVLw5E8JC4oHHsutT8w=="
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.13.7",
+      "resolved": "https://registry.npmmirror.com/@mui/icons-material/-/icons-material-5.13.7.tgz",
+      "integrity": "sha512-zoVtkb9jYVUGfI7CobOdDBEAlpg3XESiO6cWqSDGwEma69+CBDIAwGpnO5truvQDJHBGSAfzFj3nObwxjkyA7Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.13.7",
       "resolved": "https://registry.npmmirror.com/@mui/material/-/material-5.13.7.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.13.7",
     "@mui/material": "^5.13.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/Components.js

@@ -1,4 +1,3 @@
-// Main.js
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
@@ -9,6 +8,7 @@ import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 import { Link } from 'react-router-dom';
+import CircularProgress from '@mui/material/CircularProgress';
 
 const config = {
   Host: 'http://192.168.31.121:4444',
@@ -22,9 +22,12 @@ const Main = () => {
     length: 1,
   });
 
+  const [loading, setLoading] = useState(false);
+
   const limit = 8;
 
   const fetchMovies = async (page) => {
+    setLoading(true);
     try {
       const response = await axios.get(
         `${config.Host}/movie/?page=${page}&limit=${limit}`
@@ -42,6 +45,8 @@ const Main = () => {
       }
     } catch (error) {
       console.error('Error fetching movies:', error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -54,35 +59,66 @@ const Main = () => {
     fetchMovies(value);
   };
 
+  const truncateFilename = (filename, maxLength) => {
+    return filename.length > maxLength
+      ? filename.substring(0, maxLength - 3) + '...'
+      : filename;
+  };
+
   return (
     <Container>
       <div>
-        <Grid container spacing={2}>
+        {loading ? (
-          {pagination.movies.map((item) => (
+          <div
-            <Grid
+            style={{
-              item
+              display: 'flex',
-              xs={6}
+              justifyContent: 'center',
-              sm={4}
+              alignItems: 'center',
-              md={3}
+              height: '50vh',
-              lg={2}
+            }}
-              style={{ display: 'flex', justifyContent: 'space-between' }}
+          >
-              key={item.filename}
+            <CircularProgress />
-            >
+          </div>
-              <Link to={`/res/${item.filename}`}>
+        ) : (
-                <Card style={{ width: '100%', height: 200 }}>
+          <Grid container spacing={2}>
-                  <CardMedia
+            {pagination.movies.map((item) => (
-                    component="img"
+              <Grid
-                    height="120"
+                item
-                    image={`${config.Host}/res/${item.image}`}
+                xs={6}
-                  />
+                sm={4}
-                  <CardContent>
+                md={3}
-                    <Typography>{item.filename}</Typography>
+                lg={2}
-                  </CardContent>
+                style={{ display: 'flex', justifyContent: 'space-between' }}
-                </Card>
+                key={item.filename}
-              </Link>
+              >
-            </Grid>
+                <Link to={`/res/${item.filename}`} style={{ textDecoration: 'none' }}>
-          ))}
+                  <Card
-        </Grid>
+                    style={{
+                      width: '100%',
+                      height: 200,
+                      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+                      transition: 'box-shadow 0.3s ease-in-out',
+                      '&:hover': {
+                        boxShadow: '0 8px 12px rgba(0, 0, 0, 0.2)',
+                      },
+                    }}
+                  >
+                    <CardMedia
+                      component="img"
+                      height="120"
+                      image={`${config.Host}/res/${item.image}`}
+                    />
+                    <CardContent>
+                      <Typography>
+                        {truncateFilename(item.filename, 20)}
+                      </Typography>
+                    </CardContent>
+                  </Card>
+                </Link>
+              </Grid>
+            ))}
+          </Grid>
+        )}
       </div>
 
       <div style={{ textAlign: 'center', marginTop: 2 }}>
@@ -91,6 +127,8 @@ const Main = () => {
           page={pagination.page}
           onChange={handlePageChange}
           shape="rounded"
+          color="primary"
+          size="large"
         />
       </div>
     </Container>