First frontend commit
Change-Id: Ieab79fc7bf553cdce5384dadcdc03695c357eace
diff --git a/frontend/my-app/src/pages/Home.jsx b/frontend/my-app/src/pages/Home.jsx
new file mode 100644
index 0000000..1764f5c
--- /dev/null
+++ b/frontend/my-app/src/pages/Home.jsx
@@ -0,0 +1,190 @@
+// src/pages/Home.jsx
+import React, { useState, useEffect } from 'react';
+import {
+ Table, TableHead, TableRow, TableCell, TableBody,
+ Typography, Box, Container, Paper, Tooltip, IconButton, Chip
+} from '@mui/material';
+import DownloadIcon from '@mui/icons-material/Download';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+
+function Home() {
+ const [torrents, setTorrents] = useState([]);
+
+ 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: ['电影', '高清'] },
+ ]);
+ }, []);
+
+ return (
+ <Box sx={styles.mainContainer}>
+ <Container maxWidth="lg">
+ <Typography variant="h4" sx={styles.title}>
+ 🎬 资源列表 · 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} />
+ ))}
+ </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>
+ ))}
+ </TableBody>
+ </Table>
+ </Paper>
+ </Container>
+
+ {/* 柔和深蓝渐变背景 */}
+ <div style={styles.background}></div>
+
+ {/* 舒缓漂浮的柔和粒子 */}
+ <div style={styles.bubbles}>
+ {[...Array(40)].map((_, i) => (
+ <div key={i} style={{ ...styles.bubble, ...bubbleAnimation(i) }} />
+ ))}
+ </div>
+
+ {/* 动画 Keyframes */}
+ <style>{animationCSS}</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/UserProfile.jsx b/frontend/my-app/src/pages/UserProfile.jsx
new file mode 100644
index 0000000..0465994
--- /dev/null
+++ b/frontend/my-app/src/pages/UserProfile.jsx
@@ -0,0 +1,42 @@
+// src/pages/UserProfile.js
+import React from 'react';
+
+const UserProfile = () => {
+ // 假设用户信息保存在 state 或 context 中
+ const user = {
+ avatar: 'path/to/avatar.jpg', // 用户头像
+ username: 'WaldenBlues', // 用户名
+ email: 'waldenblues@example.com', // 用户邮箱
+ bio: '这是用户的个人简介', // 个人简介
+ uploads: 12, // 上传的资源数量
+ downloads: 34, // 下载的资源数量
+ comments: 5 // 用户评论的数量
+ };
+
+ return (
+ <div className="user-profile">
+ <div className="user-info">
+ <img src={user.avatar} alt="User Avatar" className="avatar" />
+ <h2>{user.username}</h2>
+ <p>{user.bio}</p>
+ <p>Email: {user.email}</p>
+ </div>
+
+ <div className="user-stats">
+ <h3>统计信息</h3>
+ <ul>
+ <li>上传的资源: {user.uploads}</li>
+ <li>下载的资源: {user.downloads}</li>
+ <li>评论的资源: {user.comments}</li>
+ </ul>
+ </div>
+
+ <div className="user-actions">
+ <button>Edit Profile</button>
+ <button>Change Password</button>
+ </div>
+ </div>
+ );
+}
+
+export default UserProfile;