frontend/my-app/src/pages/Home.jsx

// 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`,
  };
}