修改一部分

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}>
-          {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}`}>
-                <Card style={{ width: '100%', height: 200 }}>
-                  <CardMedia
-                    component="img"
-                    height="120"
-                    image={`${config.Host}/res/${item.image}`}
-                  />
-                  <CardContent>
-                    <Typography>{item.filename}</Typography>
-                  </CardContent>
-                </Card>
-              </Link>
-            </Grid>
-          ))}
-        </Grid>
+        {loading ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: '50vh',
+            }}
+          >
+            <CircularProgress />
+          </div>
+        ) : (
+          <Grid container spacing={2}>
+            {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' }}>
+                  <Card
+                    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>