美化前端
Change-Id: I46437caf832dd8f18358354f024724f7e31524cb
diff --git a/src/pages/Torrent/torrentAuditList.tsx b/src/pages/Torrent/torrentAuditList.tsx
new file mode 100644
index 0000000..7c30eb8
--- /dev/null
+++ b/src/pages/Torrent/torrentAuditList.tsx
@@ -0,0 +1,333 @@
+import React, { useEffect, useState } from "react";
+import { styled } from "@mui/material/styles";
+
+import { getCategories, getTorrentList } from "../../services/bt/index";
+import {
+Box,
+Button,
+Card,
+CardContent,
+Chip,
+CircularProgress,
+Container,
+MenuItem,
+Pagination,
+Select,
+Typography,
+} from "@mui/material";
+
+// 星空背景
+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,
+"&: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 statusMap: Record<number, string> = {
+0: '审核中',
+1: '已发布',
+2: '审核不通过',
+3: '已上架修改重审中',
+10: '已下架',
+};
+
+const PAGE_SIZE = 20;
+
+const TorrentAuditListPage: 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) => {
+ 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) => {
+ 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 种子审核
+ </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-audit/${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,
+ }}
+ />
+ )}
+ {typeof torrent.status !== "undefined" && (
+ <Chip
+ size="small"
+ label={statusMap[torrent.status] || "未知状态"}
+ sx={{
+ background: "#64748b",
+ color: "#fff",
+ 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 TorrentAuditListPage;
\ No newline at end of file