First frontend commit
Change-Id: Ieab79fc7bf553cdce5384dadcdc03695c357eace
diff --git a/frontend/my-app/src/App.jsx b/frontend/my-app/src/App.jsx
index f67355a..a8de6c0 100644
--- a/frontend/my-app/src/App.jsx
+++ b/frontend/my-app/src/App.jsx
@@ -1,35 +1,27 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+// App.jsx
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from './styles/theme/theme';
+import Home from './pages/Home';
+import UserProfile from './pages/UserProfile';
+import UserContextProvider from './contexts/UserContext';
function App() {
- const [count, setCount] = useState(0)
-
return (
- <>
- <div>
- <a href="https://vite.dev" target="_blank">
- <img src={viteLogo} className="logo" alt="Vite logo" />
- </a>
- <a href="https://react.dev" target="_blank">
- <img src={reactLogo} className="logo react" alt="React logo" />
- </a>
- </div>
- <h1>Vite + React</h1>
- <div className="card">
- <button onClick={() => setCount((count) => count + 1)}>
- count is {count}
- </button>
- <p>
- Edit <code>src/App.jsx</code> and save to test HMR
- </p>
- </div>
- <p className="read-the-docs">
- Click on the Vite and React logos to learn more
- </p>
- </>
- )
+ <UserContextProvider>
+ <ThemeProvider theme={theme}>
+ <CssBaseline />
+ <div>
+ <Routes>
+ <Route path="/" element={<Home />} />
+ <Route path="/user/:id" element={<UserProfile />} />
+ </Routes>
+ </div>
+ </ThemeProvider>
+ </UserContextProvider>
+ );
}
-export default App
+export default App;
\ No newline at end of file
diff --git a/frontend/my-app/src/contexts/UserContext.jsx b/frontend/my-app/src/contexts/UserContext.jsx
new file mode 100644
index 0000000..f1c5e2f
--- /dev/null
+++ b/frontend/my-app/src/contexts/UserContext.jsx
@@ -0,0 +1,24 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const UserContext = createContext();
+
+export const useUser = () => useContext(UserContext);
+
+export const UserContextProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+
+ const login = (userInfo) => {
+ setUser(userInfo);
+ };
+
+ const logout = () => {
+ setUser(null);
+ };
+
+ return (
+ <UserContext.Provider value={{ user, login, logout }}>
+ {children}
+ </UserContext.Provider>
+ );
+};
+export default UserContextProvider;
diff --git a/frontend/my-app/src/main.jsx b/frontend/my-app/src/main.jsx
index b9a1a6d..5da77e4 100644
--- a/frontend/my-app/src/main.jsx
+++ b/frontend/my-app/src/main.jsx
@@ -1,10 +1,20 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { ThemeProvider, CssBaseline } from '@mui/material'
+import theme from './styles/theme/theme'
+import { BrowserRouter } from 'react-router-dom'
+import UserContextProvider from './contexts/UserContext'
-createRoot(document.getElementById('root')).render(
- <StrictMode>
- <App />
- </StrictMode>,
+ReactDOM.createRoot(document.getElementById('root')).render(
+ <React.StrictMode>
+ <ThemeProvider theme={theme}>
+ <CssBaseline />
+ <UserContextProvider>
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ </UserContextProvider>
+ </ThemeProvider>
+ </React.StrictMode>
)
diff --git a/frontend/my-app/src/mocks/handlers.js b/frontend/my-app/src/mocks/handlers.js
new file mode 100644
index 0000000..72ba049
--- /dev/null
+++ b/frontend/my-app/src/mocks/handlers.js
@@ -0,0 +1,17 @@
+import { rest } from 'msw';
+
+export const handlers = [
+ rest.get('/api/resources', (req, res, ctx) => {
+ return res(ctx.json([
+ { id: 1, title: 'Ubuntu 22.04 ISO', description: 'Linux 镜像' }
+ ]));
+ }),
+
+ rest.get('/api/user/123', (req, res, ctx) => {
+ return res(ctx.json({
+ id: 123,
+ name: 'Test User',
+ avatar: 'https://example.com/avatar.jpg'
+ }));
+ }),
+];
diff --git a/frontend/my-app/src/mocks/server.js b/frontend/my-app/src/mocks/server.js
new file mode 100644
index 0000000..e52fee0
--- /dev/null
+++ b/frontend/my-app/src/mocks/server.js
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);
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;
diff --git a/frontend/my-app/src/setupTests.js b/frontend/my-app/src/setupTests.js
new file mode 100644
index 0000000..4af0820
--- /dev/null
+++ b/frontend/my-app/src/setupTests.js
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+import { server } from './mocks/server';
+
+// MSW 启动
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
diff --git a/frontend/my-app/src/styles/theme/theme.js b/frontend/my-app/src/styles/theme/theme.js
new file mode 100644
index 0000000..531aa04
--- /dev/null
+++ b/frontend/my-app/src/styles/theme/theme.js
@@ -0,0 +1,31 @@
+// /styles/theme/theme.js
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#1976d2', // 你可以更改为你需要的颜色
+ },
+ secondary: {
+ main: '#dc004e',
+ },
+ background: {
+ default: '#fafafa', // 背景颜色
+ },
+ },
+ typography: {
+ fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+ h1: {
+ fontWeight: 700,
+ },
+ h2: {
+ fontWeight: 600,
+ },
+ // 你可以根据需求自定义更多字体样式
+ },
+ shape: {
+ borderRadius: 8, // 控制组件的圆角
+ },
+});
+
+export default theme;