Update on frontend pages May 27th
Change-Id: I452e5a0ae089114f5b68920e507e56db897856f8
diff --git a/frontend/my-app/package-lock.json b/frontend/my-app/package-lock.json
index 28b0090..21a1a55 100644
--- a/frontend/my-app/package-lock.json
+++ b/frontend/my-app/package-lock.json
@@ -12,6 +12,7 @@
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2",
+ "axios": "^1.9.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.5.1"
@@ -3158,6 +3159,12 @@
"node": ">= 0.4"
}
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+ "license": "MIT"
+ },
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3174,6 +3181,17 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/axios": {
+ "version": "1.9.0",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+ "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+ "license": "MIT",
+ "dependencies": {
+ "follow-redirects": "^1.15.6",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"node_modules/babel-jest": {
"version": "29.7.0",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -3445,7 +3463,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -3652,6 +3669,18 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "license": "MIT",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3889,6 +3918,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -3954,7 +3992,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
- "dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
@@ -4071,7 +4108,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -4081,7 +4117,6 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -4119,7 +4154,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
@@ -4132,7 +4166,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -4940,6 +4973,26 @@
"dev": true,
"license": "ISC"
},
+ "node_modules/follow-redirects": {
+ "version": "1.15.9",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+ "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/RubenVerborgh"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">=4.0"
+ },
+ "peerDependenciesMeta": {
+ "debug": {
+ "optional": true
+ }
+ }
+ },
"node_modules/for-each": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -4956,6 +5009,21 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/form-data": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+ "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+ "license": "MIT",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "es-set-tostringtag": "^2.1.0",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5042,7 +5110,6 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
@@ -5077,7 +5144,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
- "dev": true,
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
@@ -5200,7 +5266,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -5289,7 +5354,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -5302,7 +5366,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"has-symbols": "^1.0.3"
@@ -7204,7 +7267,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -7231,6 +7293,27 @@
"node": ">=8.6"
}
},
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -7958,6 +8041,12 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+ "license": "MIT"
+ },
"node_modules/psl": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
diff --git a/frontend/my-app/package.json b/frontend/my-app/package.json
index cff4a25..07b11c9 100644
--- a/frontend/my-app/package.json
+++ b/frontend/my-app/package.json
@@ -17,6 +17,7 @@
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2",
+ "axios": "^1.9.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.5.1"
@@ -45,12 +46,12 @@
"whatwg-fetch": "^3.6.20"
},
"jest": {
- "testEnvironment": "jsdom",
- "setupFilesAfterEnv": [
- "<rootDir>/src/setupTests.js"
- ],
- "moduleNameMapper": {
- "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+ "testEnvironment": "jsdom",
+ "setupFilesAfterEnv": [
+ "<rootDir>/src/setupTests.js"
+ ],
+ "moduleNameMapper": {
+ "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+ }
}
}
-}
diff --git a/frontend/my-app/src/App.jsx b/frontend/my-app/src/App.jsx
index a8de6c0..214e127 100644
--- a/frontend/my-app/src/App.jsx
+++ b/frontend/my-app/src/App.jsx
@@ -7,7 +7,7 @@
import Home from './pages/Home';
import UserProfile from './pages/UserProfile';
import UserContextProvider from './contexts/UserContext';
-
+import TorrentUploadPage from './pages/UploadTorrent';
function App() {
return (
<UserContextProvider>
@@ -17,6 +17,7 @@
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user/:id" element={<UserProfile />} />
+ <Route path="/Upload" element={<TorrentUploadPage />} />
</Routes>
</div>
</ThemeProvider>
diff --git a/frontend/my-app/src/pages/Home.jsx b/frontend/my-app/src/pages/Home.jsx
index 1764f5c..6bca4b8 100644
--- a/frontend/my-app/src/pages/Home.jsx
+++ b/frontend/my-app/src/pages/Home.jsx
@@ -1,190 +1,205 @@
-// src/pages/Home.jsx
import React, { useState, useEffect } from 'react';
import {
- Table, TableHead, TableRow, TableCell, TableBody,
- Typography, Box, Container, Paper, Tooltip, IconButton, Chip
+ Box, Container, Typography, Paper,
+ List, ListItem, ListItemText, Chip, Stack, CircularProgress, Alert
} from '@mui/material';
-import DownloadIcon from '@mui/icons-material/Download';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { Link } from 'react-router-dom'; // 假设你已经配置了 React Router
+
+// import '../styles/base/base.css'; // ✅ 引入统一样式 - 我们将尝试用 sx prop 替代
+
+// 模拟从API获取数据
+const fetchTorrents = () => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve([
+ {
+ id: 1,
+ title: 'Ubuntu ISO 镜像',
+ tags: ['Linux', '操作系统', 'ISO'],
+ size: '2.1 GB',
+ uploader: 'admin',
+ description: '最新的 Ubuntu Desktop 长期支持版。适用于开发者和普通用户。'
+ },
+ {
+ id: 2,
+ title: '开源电影素材包 - Blender "Sintel"',
+ tags: ['视频', '素材', '开源', 'Blender'],
+ size: '800 MB',
+ uploader: 'user001',
+ description: '来自 Blender Foundation 的开源电影 "Sintel" 的原始素材，可用于学习和创作。'
+ },
+ {
+ id: 3,
+ title: 'React 学习资料大全',
+ tags: ['React', 'JavaScript', '前端开发', '教程'],
+ size: '150 MB',
+ uploader: 'dev_guru',
+ description: '包含 React 官方文档、优秀教程链接和项目示例。'
+ }
+ ]);
+ }, 1500); // 模拟网络延迟
+ });
+};
+
function Home() {
const [torrents, setTorrents] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
useEffect(() => {
- setTorrents([
- { title: 'Ubuntu 22.04 LTS', size: '3.2 GB', seeders: 1200, leechers: 300, date: '2025-04-01', tags: ['Linux', 'ISO'] },
- { title: 'LibreOffice 7.5.2', size: '320 MB', seeders: 450, leechers: 50, date: '2025-03-28', tags: ['办公'] },
- { title: 'Movie.Title.1080p.BluRay', size: '2.5 GB', seeders: 900, leechers: 200, date: '2025-04-05', tags: ['电影', '高清'] },
- ]);
+ setLoading(true);
+ fetchTorrents()
+ .then(data => {
+ setTorrents(data);
+ setLoading(false);
+ })
+ .catch(err => {
+ console.error("Failed to fetch torrents:", err);
+ setError("加载资源失败，请稍后再试。");
+ setLoading(false);
+ });
}, []);
return (
- <Box sx={styles.mainContainer}>
- <Container maxWidth="lg">
- <Typography variant="h4" sx={styles.title}>
- 🎬 资源列表 · Mini-Tracker
+ <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}>
+ <Container maxWidth="md" sx={{ position: 'relative', zIndex: 10 }}> {/* Changed to md for wider content */}
+ <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}>
+ 🌐 首页 · Mini-Tracker
</Typography>
- <Paper sx={styles.paper}>
- <Table size="small">
- <TableHead>
- <TableRow>
- <TableCell sx={styles.header}>名称</TableCell>
- <TableCell sx={styles.header}>标签</TableCell>
- <TableCell sx={styles.header}>大小</TableCell>
- <TableCell sx={styles.header}>做种者</TableCell>
- <TableCell sx={styles.header}>下载者</TableCell>
- <TableCell sx={styles.header}>上传时间</TableCell>
- <TableCell sx={styles.header}>操作</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {torrents.map((t, i) => (
- <TableRow key={i} sx={styles.row}>
- <TableCell sx={styles.cell}>{t.title}</TableCell>
- <TableCell sx={styles.cell}>
- {t.tags.map(tag => (
- <Chip key={tag} label={tag} size="small" sx={styles.chip} />
+ <Paper sx={{ position: 'relative', zIndex: 20, padding: '2rem', backgroundColor: 'rgba(30, 30, 30, 0.9)', borderRadius: '12px' }}>
+ <Typography variant="h6" gutterBottom sx={{ mb: 2, color: '#eee' }}>
+ 最新种子资源
+ </Typography>
+
+ {loading && (
+ <Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
+ <CircularProgress color="inherit" />
+ </Box>
+ )}
+
+ {error && (
+ <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>
+ )}
+
+ {!loading && !error && (
+ <List sx={{ '& .MuiListItem-root:hover': { backgroundColor: 'rgba(255, 255, 255, 0.05)' }}}>
+ {torrents.map(torrent => (
+ <ListItem
+ key={torrent.id}
+ component={Link} // react-router-dom Link
+ to={`/detail/${torrent.id}`} // 假设的详情页路由
+ sx={{
+ color: 'white',
+ textDecoration: 'none',
+ mb: 1.5, // 增加列表项间距
+ p: 1.5, // 增加列表项内边距
+ borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+ '&:last-child': {
+ borderBottom: 'none' // 移除最后一个元素的边框
+ },
+ display: 'flex', // 确保内部元素正确对齐
+ flexDirection: { xs: 'column', sm: 'row' }, // 响应式布局
+ alignItems: { xs: 'flex-start', sm: 'center' }
+ }}
+ divider={false} // 使用自定义边框代替
+ >
+ <ListItemText
+ primary={torrent.title}
+ secondary={`大小: ${torrent.size} · 上传者: ${torrent.uploader}`}
+ primaryTypographyProps={{ variant: 'h6', component: 'div', sx: { mb: 0.5, color: '#f5f5f5', fontWeight: 500 } }}
+ secondaryTypographyProps={{ sx: { color: '#bbb', fontSize: '0.85rem' } }}
+ sx={{ flexGrow: 1, mb: { xs: 1, sm: 0 }, mr: { sm: 2 } }} // 响应式边距
+ />
+ <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 0.5 }}> {/* 允许标签换行 */}
+ {torrent.tags.map(tag => (
+ <Chip
+ key={tag}
+ label={tag}
+ size="small"
+ sx={{
+ backgroundColor: 'rgba(255, 255, 255, 0.2)', // upload-chip 样式
+ color: 'white',
+ cursor: 'pointer',
+ '&:hover': {
+ backgroundColor: 'rgba(255, 255, 255, 0.3)',
+ }
+ }}
+ />
))}
- </TableCell>
- <TableCell sx={styles.cell}>{t.size}</TableCell>
- <TableCell sx={styles.cell}>{t.seeders}</TableCell>
- <TableCell sx={styles.cell}>{t.leechers}</TableCell>
- <TableCell sx={styles.cell}>{t.date}</TableCell>
- <TableCell sx={styles.cell}>
- <Tooltip title="下载种子">
- <IconButton color="success" size="small">
- <DownloadIcon fontSize="small" />
- </IconButton>
- </Tooltip>
- <Tooltip title="收藏">
- <IconButton color="warning" size="small">
- <StarBorderIcon fontSize="small" />
- </IconButton>
- </Tooltip>
- </TableCell>
- </TableRow>
+ </Stack>
+ </ListItem>
))}
- </TableBody>
- </Table>
+ </List>
+ )}
</Paper>
</Container>
- {/* 柔和深蓝渐变背景 */}
- <div style={styles.background}></div>
-
- {/* 舒缓漂浮的柔和粒子 */}
- <div style={styles.bubbles}>
+ {/* 背景泡泡动画复用 - 这些类名 (.bubbles, .bubble) 和 @keyframes rise 应该在全局CSS或者下面的 <style> 标签中定义 */}
+ <Box className="bubbles" sx={{
+ pointerEvents: 'none',
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ overflow: 'hidden',
+ zIndex: 1,
+ }}>
{[...Array(40)].map((_, i) => (
- <div key={i} style={{ ...styles.bubble, ...bubbleAnimation(i) }} />
+ <Box
+ key={i}
+ className="bubble"
+ sx={{
+ position: 'absolute',
+ bottom: '-150px', // 确保从屏幕外开始
+ background: `hsla(${Math.random() * 360}, 70%, 80%, 0.15)`, // 增加颜色多样性
+ borderRadius: '50%',
+ animation: 'rise 20s infinite ease-in',
+ width: `${Math.random() * 25 + 10}px`, // 调整大小范围
+ height: `${Math.random() * 25 + 10}px`,
+ left: `${Math.random() * 100}%`,
+ animationDuration: `${15 + Math.random() * 20}s`, // 调整动画时长
+ animationDelay: `${Math.random() * 10}s`, // 调整动画延迟
+ opacity: 0, // 初始透明
+ }}
+ />
))}
- </div>
+ </Box>
+ {/* 定义动画和其他全局可能需要的样式 */}
+ <style>
+ {`
+ body { /* 基本重置 */
+ margin: 0;
+ font-family: 'Roboto', sans-serif; /* 确保字体一致 */
+ }
- {/* 动画 Keyframes */}
- <style>{animationCSS}</style>
+ @keyframes rise {
+ 0% {
+ transform: translateY(0) scale(0.8);
+ opacity: 0; /* 从透明开始 */
+ }
+ 10% {
+ opacity: 1; /* 渐显 */
+ }
+ 90% {
+ opacity: 1; /* 保持可见 */
+ }
+ 100% {
+ transform: translateY(-130vh) scale(0.3); /* 飘得更高更小 */
+ opacity: 0; /* 渐隐 */
+ }
+ }
+
+ /* 如果 .bubbles 和 .bubble 样式没有在 sx 中完全覆盖，可以在这里补充 */
+ /* .bubbles { ... } */
+ /* .bubble { ... } */
+ `}
+ </style>
</Box>
);
}
export default Home;
-// 样式对象
-const styles = {
- mainContainer: {
- minHeight: '100vh',
- bgcolor: '#0d1b2a',
- color: '#e0e0e0',
- py: 5,
- position: 'relative',
- overflow: 'hidden',
- },
- title: {
- mb: 3,
- fontFamily: '"Fira Code", monospace',
- color: '#a3cef1',
- textAlign: 'center',
- fontSize: '2rem',
- fontWeight: 'bold',
- },
- paper: {
- bgcolor: '#1b263b',
- p: 2,
- borderRadius: 3,
- boxShadow: 3,
- backdropFilter: 'blur(6px)',
- border: '1px solid rgba(255, 255, 255, 0.08)',
- },
- header: {
- fontWeight: 'bold',
- color: '#b0ccee',
- fontFamily: '"Fira Code", monospace',
- borderBottom: '1px solid #3a4a6b',
- },
- cell: {
- fontFamily: '"Fira Code", monospace',
- color: '#e0e0e0',
- fontSize: '0.85rem',
- padding: '8px 12px',
- },
- chip: {
- mr: 0.5,
- backgroundColor: '#2e3b53',
- color: '#81c784',
- fontSize: '0.75rem',
- },
- row: {
- '&:nth-of-type(odd)': { bgcolor: '#19263e' },
- '&:hover': { bgcolor: '#26354f' },
- },
- background: {
- position: 'absolute',
- top: 0, left: 0,
- width: '100%', height: '100%',
- background: 'linear-gradient(45deg, #0d1b2a, #122b44, rgb(28, 102, 158))',
- backgroundSize: '400% 400%',
- animation: 'bgShift 30s ease infinite',
- zIndex: -1,
- },
- bubbles: {
- position: 'absolute',
- top: 0, left: 0,
- width: '100%', height: '100%',
- zIndex: 0,
- overflow: 'hidden',
- },
- bubble: {
- position: 'absolute',
- width: '6px',
- height: '6px',
- borderRadius: '50%',
- backgroundColor: 'rgba(163, 206, 241, 0.4)',
- animation: 'bubbleFloat 8s ease-in-out infinite',
- },
-};
-
-const animationCSS = `
-@keyframes bgShift {
- 0% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- 100% { background-position: 0% 50%; }
-}
-@keyframes bubbleFloat {
- 0% { transform: translateY(100%); opacity: 0; }
- 50% { opacity: 0.5; }
- 100% { transform: translateY(-100%); opacity: 0; }
-}
-`;
-
-function bubbleAnimation(i) {
- const delay = Math.random() * 6;
- const left = Math.random() * 100;
- const size = 4 + Math.random() * 8;
- const top = Math.random() * 100;
- return {
- left: `${left}%`,
- top: `${top}%`,
- width: `${size}px`,
- height: `${size}px`,
- animationDelay: `${delay}s`,
- };
-}
diff --git a/frontend/my-app/src/pages/UploadTorrent.jsx b/frontend/my-app/src/pages/UploadTorrent.jsx
new file mode 100644
index 0000000..493cdce
--- /dev/null
+++ b/frontend/my-app/src/pages/UploadTorrent.jsx
@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import {
+ Box, Container, Typography, Paper,
+ TextField, Button, Stack
+} from '@mui/material';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+// Assuming your base.css is in a relative path like src/styles/base/base.css
+// If your component is in src/components/Upload.js, this path would be ../styles/base/base.css
+// Adjust if your project structure is different.
+// For this example, I'll assume it's correctly linked.
+// import '../styles/base/base.css';
+
+function Upload() {
+ const [title, setTitle] = useState('');
+ const [file, setFile] = useState(null);
+
+ const handleUpload = () => {
+ const formData = new FormData();
+ if (file) {
+ formData.append('file', file);
+ }
+ formData.append('title', title);
+
+ // Replace with your actual API endpoint and error handling
+ fetch('/api/torrents/upload', {
+ method: 'POST',
+ body: formData
+ })
+ .then(response => {
+ if (response.ok) {
+ // Use a more modern way to show messages, e.g., a Snackbar
+ console.log('上传成功');
+ alert('上传成功 (建议使用Snackbar等UI组件替代alert)');
+ } else {
+ console.error('上传失败');
+ alert('上传失败 (建议使用Snackbar等UI组件替代alert)');
+ }
+ })
+ .catch(error => {
+ console.error('上传出错:', error);
+ alert('上传出错 (建议使用Snackbar等UI组件替代alert)');
+ });
+ };
+
+ return (
+ <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}> {/* Moved body styles here for self-containment */}
+ <Container maxWidth="sm" sx={{ position: 'relative', zIndex: 10 }}>
+ <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}> {/* Replaced className with sx */}
+ ⬆️ 上传种子 · Mini-Tracker
+ </Typography>
+
+ <Paper sx={{ position: 'relative', zIndex: 20, padding: '2rem', backgroundColor: 'rgba(30, 30, 30, 0.9)' }}> {/* Replaced className with sx */}
+ <Stack spacing={3}> {/* Increased spacing a bit */}
+ <TextField
+ label="资源名称"
+ variant="outlined"
+ fullWidth
+ value={title}
+ onChange={e => setTitle(e.target.value)}
+ placeholder="请输入资源名称"
+ InputLabelProps={{
+ sx: {
+ color: '#ccc',
+ '&.Mui-focused': { // Ensure label color remains consistent when focused
+ color: '#ccc',
+ }
+ }
+ }}
+ sx={{
+ // Root element of the TextField
+ backgroundColor: 'transparent',
+
+ // Styles for the HTML input element itself
+ '& .MuiInputBase-input': {
+ color: 'white', // Text color
+ backgroundColor: 'transparent', // **** THIS IS THE FIX **** Ensure input background is transparent
+ caretColor: 'white', // Cursor color
+ '&::placeholder': {
+ color: '#bbb',
+ opacity: 1,
+ },
+ },
+ // Styles for the outlined border
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: '#888', // Default border color
+ },
+ '&:hover fieldset': {
+ borderColor: '#aaa', // Border color on hover
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: '#fff', // Border color when focused
+ },
+ },
+ }}
+ />
+
+ <Button
+ variant="contained"
+ component="label" // Allows the button to act as a label for a hidden input
+ startIcon={<CloudUploadIcon />}
+ sx={{ backgroundColor: '#00bcd4', color: 'white', '&:hover': { backgroundColor: '#0097a7' } }} // Replaced className with sx
+ >
+ 选择种子文件
+ <input
+ hidden
+ type="file"
+ accept=".torrent"
+ onChange={e => {
+ if (e.target.files && e.target.files[0]) {
+ setFile(e.target.files[0]);
+ }
+ }}
+ />
+ </Button>
+
+ {file && (
+ <Typography variant="body2" sx={{ color: '#eee', textAlign: 'center' }}>
+ 已选择文件: {file.name}
+ </Typography>
+ )}
+
+ <Button
+ variant="outlined"
+ onClick={handleUpload}
+ disabled={!file || !title}
+ sx={{ borderColor: 'white', color: 'white', '&:hover': { borderColor: '#ddd', backgroundColor: 'rgba(255,255,255,0.1)'}, '&.Mui-disabled': { borderColor: '#777', color: '#777' } }} // Replaced className with sx
+ >
+ 提交上传
+ </Button>
+ </Stack>
+ </Paper>
+ </Container>
+
+ {/* Background bubbles animation - assuming CSS for .bubbles and .bubble is globally available or defined in an imported CSS file */}
+ {/* For self-containment, these styles would ideally be JSS or defined in a <style> tag if not using styled-components or similar */}
+ <Box className="bubbles" sx={{
+ pointerEvents: 'none',
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ overflow: 'hidden',
+ zIndex: 1, // Ensure it's behind the content paper but above the main background
+ }}>
+ {[...Array(40)].map((_, i) => (
+ <Box
+ key={i}
+ className="bubble" // Assuming .bubble and @keyframes rise are defined in your CSS
+ sx={{
+ position: 'absolute',
+ bottom: '-100px',
+ background: 'rgba(255, 255, 255, 0.15)',
+ borderRadius: '50%',
+ animation: 'rise 20s infinite ease-in', // Make sure @keyframes rise is defined
+ width: `${Math.random() * 20 + 10}px`,
+ height: `${Math.random() * 20 + 10}px`,
+ left: `${Math.random() * 100}%`,
+ animationDuration: `${10 + Math.random() * 20}s`,
+ animationDelay: `${Math.random() * 5}s`
+ }}
+ />
+ ))}
+ </Box>
+ {/* Define keyframes if not in external CSS */}
+ <style>
+ {`
+ @keyframes rise {
+ 0% {
+ transform: translateY(0) scale(1);
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-120vh) scale(0.5);
+ opacity: 0;
+ }
+ }
+ body { /* Basic reset if base.css is not loaded */
+ margin: 0;
+ font-family: 'Roboto', sans-serif;
+ }
+ `}
+ </style>
+ </Box>
+ );
+}
+
+export default Upload;
diff --git a/frontend/my-app/src/services/torrentService.js b/frontend/my-app/src/services/torrentService.js
new file mode 100644
index 0000000..a50f8ac
--- /dev/null
+++ b/frontend/my-app/src/services/torrentService.js
@@ -0,0 +1,28 @@
+// ./services/torrentService.js
+import axios from 'axios';
+
+// IMPORTANT: Replace with your actual backend API URL
+const API_BASE_URL = 'http://localhost:5000/api';
+
+export const uploadTorrent = async (formData) => {
+ try {
+ const response = await axios.post(`${API_BASE_URL}/torrents/upload`, formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data', // Essential for file uploads
+ // Add any authentication tokens here if your backend requires them
+ // 'Authorization': `Bearer ${localStorage.getItem('authToken')}`
+ },
+ onUploadProgress: (progressEvent) => {
+ // You can use this to show upload progress to the user
+ const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+ console.log(`Upload progress: ${percentCompleted}%`);
+ // You could pass this percentage back to the component via a callback
+ },
+ });
+ return response.data; // Your backend should return the parsed torrent info here
+ } catch (error) {
+ console.error('Error in uploadTorrent service:', error.response ? error.response.data : error.message);
+ // Throw a more specific error message based on backend response if available
+ throw new Error(error.response?.data?.message || '文件上传失败，请稍后再试。');
+ }
+};
\ No newline at end of file
diff --git a/frontend/my-app/src/styles/base/base.css b/frontend/my-app/src/styles/base/base.css
new file mode 100644
index 0000000..54501ed
--- /dev/null
+++ b/frontend/my-app/src/styles/base/base.css
@@ -0,0 +1,79 @@
+/* base.css */
+
+/* 背景渐变和字体 */
+body {
+ margin: 0;
+ font-family: 'Roboto', sans-serif;
+ background: linear-gradient(135deg, #2c3e50, #4ca1af);
+ color: white;
+ min-height: 100vh;
+ overflow-x: hidden;
+}
+
+/* 卡片样式 */
+.upload-paper {
+ position: relative;
+ z-index: 20; /* 高于泡泡背景 */
+ padding: 2rem;
+ background-color: rgba(30, 30, 30, 0.9); /* 半透明深色背景 */
+}
+
+/* 标签样式 */
+.upload-chip {
+ background-color: #ffffff33;
+ color: white;
+}
+
+/* 上传按钮 */
+.upload-button {
+ background-color: #00bcd4;
+ color: white;
+}
+
+.upload-button:hover {
+ background-color: #0097a7;
+}
+
+/* 提交按钮 */
+.submit-button {
+ border-color: white;
+ color: white;
+}
+
+/* 标题样式 */
+.upload-title {
+ text-align: center;
+ margin-bottom: 24px;
+ font-weight: bold;
+}
+
+/* 动画背景容器 */
+.bubbles {
+ pointer-events: none;
+ position: fixed; /* 确保浮在所有内容之下 */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: -1; /* 保证不覆盖前景内容 */
+}
+
+
+.bubble {
+ position: absolute;
+ bottom: -100px;
+ background: rgba(255, 255, 255, 0.15);
+ border-radius: 50%;
+ animation: rise 20s infinite ease-in;
+}
+
+@keyframes rise {
+ 0% {
+ transform: translateY(0) scale(1);
+ }
+ 100% {
+ transform: translateY(-120vh) scale(0.5);
+ }
+}
+