| 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; |