src/pages/Torrent/torrentList.tsx

import React, { useEffect, useState } from "react";
import { styled } from "@mui/material/styles";
import axios from "axios";
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  Container,
  MenuItem,
  Pagination,
  Select,
  Typography,
} from "@mui/material";
import { getCategories, getTorrentList } from "../../services/bt/index";
// 优化后的星空背景
const StarBg = styled("div")({
  minHeight: "100vh",
  width: "auto",
  background: "radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)",
  overflow: "auto",
  position: "relative",
  top: 0,
  left: 0,


  
  // 使用CSS动画实现星空
  "&:before, &:after": {
    content: '""',
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    pointerEvents: "none",
  },
  "&:before": {
    background: `
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
      radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
      radial-gradient(1.5px 1.5px at 60% 20%, rgba(255,255,255,0.9), rgba(255,255,255,0)),
      radial-gradient(1.5px 1.5px at 80% 90%, rgba(255,255,255,0.9), rgba(255,255,255,0))
    `,
    backgroundRepeat: "repeat",
    backgroundSize: "200px 200px",
    animation: "twinkle 10s infinite ease-in-out",
  },
  "&:after": {
    background: `
      radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
      radial-gradient(1.2px 1.2px at 10% 80%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
      radial-gradient(1.5px 1.5px at 30% 60%, rgba(255,255,255,0.8), rgba(255,255,255,0))
    `,
    backgroundRepeat: "repeat",
    backgroundSize: "300px 300px",
    animation: "twinkle 15s infinite 5s ease-in-out",
  },
  
  "@keyframes twinkle": {
    "0%, 100%": { opacity: 0.3 },
    "50%": { opacity: 0.8 },
  }
});

// 分类标签栏
const CategoryBar = styled(Box)({
display: "flex",
gap: 12,
alignItems: "center",
marginBottom: 24,
flexWrap: "wrap",
});

// 种子卡片
const TorrentCard = styled(Card)({
background: "rgba(30, 41, 59, 0.85)",
color: "#fff",
borderRadius: 16,
boxShadow: "0 4px 24px 0 rgba(0,0,0,0.4)",
border: "1px solid #334155",
transition: "transform 0.2s",
"&:hover": {
    transform: "scale(1.025)",
    boxShadow: "0 8px 32px 0 #0ea5e9",
},
});

const sortOptions = [
{ label: "最新", value: { sortField: "createTime", sortDirection: "desc" } },
{ label: "下载量", value: { sortField: "completions", sortDirection: "desc" } },
{ label: "推荐", value: { sortField: "seeders", sortDirection: "desc" } },
];

const PAGE_SIZE = 20;

const TorrentListPage: React.FC = () => {
    const [categories, setCategories] = useState<
        { id: number; name: string; remark?: string | null; type?: number | null }[]
    >([]);
    const [selectedCat, setSelectedCat] = useState<number | null>(null);
    const [sort, setSort] = useState(sortOptions[0].value);
    const [torrents, setTorrents] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);

    // 获取分类
    useEffect(() => {
        getCategories().then((res) => {
            // 直接使用返回的data数组
            setCategories(res.data || []);
        });
    }, []);

    // 获取种子列表
    useEffect(() => {
        setLoading(true);
        getTorrentList({
            category: selectedCat !== null ? String(selectedCat) : undefined,
            sortField: sort.sortField,
            sortDirection: sort.sortDirection,
            pageNum: page,
            pageSize: PAGE_SIZE,
        })
            .then((res) => {
                // 直接使用返回的data数组和page对象
                setTorrents(res.data || []);
                setTotal(res.page?.total || 0);
            })
            .finally(() => setLoading(false));
    }, [selectedCat, sort, page]);

return (
    <StarBg>
        <Container maxWidth="lg" sx={{ pt: 6, pb: 6, position: "relative" }}>
            {/* 原有内容 */}
            <Typography
                variant="h3"
                sx={{
                    color: "#fff",
                    fontWeight: 700,
                    mb: 3,
                    letterSpacing: 2,
                    textShadow: "0 2px 16px #0ea5e9",
                }}
            >
                ThunderHub 星空PT种子广场
            </Typography>
            <CategoryBar>
                <Chip
                    label="全部"
                    color={selectedCat === null ? "primary" : "default"}
                    onClick={() => {
                        setSelectedCat(null);
                        setPage(1);
                    }}
                    sx={{
                        fontWeight: 600,
                        fontSize: 16,
                        color: selectedCat === null ? undefined : "#fff",
                    }}
                />
                {categories.map((cat) => (
                    <Chip
                        key={cat.id}
                        label={cat.name}
                        color={selectedCat === cat.id ? "primary" : "default"}
                        onClick={() => {
                            setSelectedCat(cat.id);
                            setPage(1);
                        }}
                        sx={{
                            fontWeight: 600,
                            fontSize: 16,
                            color: selectedCat === cat.id ? undefined : "#fff",
                        }}
                    />
                ))}
                <Box sx={{ flex: 1 }} />
                <Select
                    size="small"
                    value={JSON.stringify(sort)}
                    onChange={(e) => {
                        setSort(JSON.parse(e.target.value));
                        setPage(1);
                    }}
                    sx={{
                        color: "#fff",
                        background: "#1e293b",
                        borderRadius: 2,
                        ".MuiOutlinedInput-notchedOutline": { border: 0 },
                        minWidth: 120,
                    }}
                >
                    {sortOptions.map((opt) => (
                        <MenuItem key={opt.label} value={JSON.stringify(opt.value)}>
                            {opt.label}
                        </MenuItem>
                    ))}
                </Select>
            </CategoryBar>
            {loading ? (
                <Box sx={{ display: "flex", justifyContent: "center", mt: 8 }}>
                    <CircularProgress color="info" />
                </Box>
            ) : (
                <>
                    <Box
                        sx={{
                            display: "flex",
                            flexWrap: "wrap",
                            gap: 3,
                            justifyContent: { xs: "center", md: "flex-start" },
                        }}
                    >
                        {torrents.map((torrent) => (
                            <Box
                                key={torrent.id}
                                sx={{
                                    flex: "1 1 320px",
                                    maxWidth: { xs: "100%", sm: "48%", md: "32%" },
                                    minWidth: 300,
                                    mb: 3,
                                    display: "flex",
                                    cursor: "pointer",
                                }}
                                onClick={() => window.open(`/torrent-detail/${torrent.id}`, "_self")}
                            >
                                <TorrentCard sx={{ width: "100%" }}>
                                    <CardContent>
                                        <Typography
                                            variant="h6"
                                            sx={{
                                                color: "#38bdf8",
                                                fontWeight: 700,
                                                mb: 1,
                                                textOverflow: "ellipsis",
                                                overflow: "hidden",
                                                whiteSpace: "nowrap",
                                            }}
                                            title={torrent.title}
                                        >
                                            {torrent.title}
                                        </Typography>
                                        <Box
                                            sx={{
                                                display: "flex",
                                                gap: 1,
                                                alignItems: "center",
                                                mb: 1,
                                                flexWrap: "wrap",
                                            }}
                                        >
                                            <Chip
                                                size="small"
                                                label={
                                                    categories.find((c) => c.id === torrent.category)?.name ||
                                                    "未知"
                                                }
                                                sx={{
                                                    background: "#0ea5e9",
                                                    color: "#fff",
                                                    fontWeight: 600,
                                                }}
                                            />
                                            {torrent.free === "1" && (
                                                <Chip
                                                    size="small"
                                                    label="促销"
                                                    sx={{
                                                        background: "#fbbf24",
                                                        color: "#1e293b",
                                                        fontWeight: 600,
                                                    }}
                                                />
                                            )}
                                        </Box>
                                        <Typography variant="body2" sx={{ color: "#cbd5e1", mb: 1 }}>
                                            上传时间：{torrent.createTime}
                                        </Typography>
                                        <Box sx={{ display: "flex", gap: 2, mt: 1 }}>
                                            <Typography variant="body2" sx={{ color: "#38bdf8" }}>
                                                做种：{torrent.seeders}
                                            </Typography>
                                            <Typography variant="body2" sx={{ color: "#f472b6" }}>
                                                下载量：{torrent.completions}
                                            </Typography>
                                            <Typography variant="body2" sx={{ color: "#fbbf24" }}>
                                                下载中：{torrent.leechers}
                                            </Typography>
                                        </Box>
                                    </CardContent>
                                </TorrentCard>
                            </Box>
                        ))}
                    </Box>
                    <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
                        <Pagination
                            count={Math.ceil(total / PAGE_SIZE)}
                            page={page}
                            onChange={(_, v) => setPage(v)}
                            color="primary"
                            sx={{
                                ".MuiPaginationItem-root": {
                                    color: "#fff",
                                    background: "#1e293b",
                                    border: "1px solid #334155",
                                },
                                ".Mui-selected": {
                                    background: "#0ea5e9 !important",
                                },
                            }}
                        />
                    </Box>
                </>
            )}
        </Container>
    </StarBg>
);
};

export default TorrentListPage;