最新

src/App.js

@@ -10,14 +10,13 @@ import VuetifyName from './logo.svg';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Main from './Components';
 import VideoPlayer from './VideoPlayer'; // 导入我们将创建的VideoPlayer组件
-
-
+import ConfigContext, { config } from './Config';
 
 const App = () => {
   return (
  
 
-
+    <ConfigContext.Provider value={config}>
       <BrowserRouter>
       <div>
       <AppBar position="static">
@@ -25,8 +24,8 @@ const App = () => {
           <IconButton edge="start" color="inherit" aria-label="menu">
             <img src={VuetifyLogo} alt="Vuetify Logo" width="40" />
           </IconButton>
-          <Typography variant="h6" style={{ flexGrow: 1 }}>
-            <img src={VuetifyName} alt="Vuetify Name" width="100" />
+          <Typography variant="h3" style={{ flexGrow: 1 }}>
+            <img src={VuetifyName} alt="Vuetify Name" width="40" />
           </Typography>
         </Toolbar>
       </AppBar>
@@ -38,7 +37,7 @@ const App = () => {
       </div>
     </BrowserRouter>
 
-      
+      </ConfigContext.Provider>
  
   );
 };

src/Components.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -9,12 +9,13 @@ import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 import { Link } from 'react-router-dom';
 import CircularProgress from '@mui/material/CircularProgress';
+import ConfigContext from './Config';
 
-const config = {
-  Host: 'http://192.168.31.121:4444',
-};
+ 
 
 const Main = () => {
+  const config = useContext(ConfigContext);
+
   const [pagination, setPagination] = useState({
     movies: [],
     page: 1,
@@ -24,7 +25,7 @@ const Main = () => {
 
   const [loading, setLoading] = useState(false);
 
-  const limit = 8;
+  const limit = 12;
 
   const fetchMovies = async (page) => {
     setLoading(true);
@@ -66,7 +67,18 @@ const Main = () => {
   };
 
   return (
-    <Container>
+    <Container style={{ marginTop: 20 }}>
+      <div style={{ textAlign: 'center', marginBottom: 20 }}>
+        <Pagination
+          count={pagination.length}
+          page={pagination.page}
+          onChange={handlePageChange}
+          shape="rounded"
+          color="primary"
+          size="large"
+        />
+      </div>
+
       <div>
         {loading ? (
           <div
@@ -80,7 +92,7 @@ const Main = () => {
             <CircularProgress />
           </div>
         ) : (
-          <Grid container spacing={2}>
+          <Grid container spacing={2} style={{ marginTop: 3 }}>
             {pagination.movies.map((item) => (
               <Grid
                 item
@@ -91,7 +103,10 @@ const Main = () => {
                 style={{ display: 'flex', justifyContent: 'space-between' }}
                 key={item.filename}
               >
-                <Link to={`/res/${item.filename}`} style={{ textDecoration: 'none' }}>
+                <Link
+                  to={`/res/${item.filename}`}
+                  style={{ textDecoration: 'none', paddingBottom: 10 }}
+                >
                   <Card
                     style={{
                       width: '100%',
@@ -110,7 +125,7 @@ const Main = () => {
                     />
                     <CardContent>
                       <Typography>
-                        {truncateFilename(item.filename, 20)}
+                        {truncateFilename(item.filename, 15)}
                       </Typography>
                     </CardContent>
                   </Card>
@@ -121,7 +136,7 @@ const Main = () => {
         )}
       </div>
 
-      <div style={{ textAlign: 'center', marginTop: 2 }}>
+      <div style={{ textAlign: 'center', marginTop: 20 }}>
         <Pagination
           count={pagination.length}
           page={pagination.page}

src/Config.js

@@ -0,0 +1,10 @@
+// config.js
+import { createContext } from 'react';
+
+const ConfigContext = createContext();
+
+export const config = {
+  Host: 'http://192.168.31.121:4444',
+};
+
+export default ConfigContext;

src/VideoPlayer.js

@@ -1,13 +1,13 @@
-import React from 'react';
+import {React, useContext} from 'react';
 import { useParams } from 'react-router-dom';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
+import ConfigContext from './Config';
+
 
-const config = {
-  Host: 'http://192.168.31.121:4444',
-};
 
 const VideoPlayer = () => {
+  const config = useContext(ConfigContext);
   const { filename } = useParams();
 
   return (