blob: 7dc452d8860261a9874eba7b5055f34f5f9f1cb2 [file] [log] [blame]
223011339e292152025-06-08 00:34:37 +08001import React, { useState, useEffect } from "react";
956303669a32fc2c2025-06-02 19:45:53 +08002import MovieIcon from "@mui/icons-material/Movie";
3import EmailIcon from "@mui/icons-material/Email";
4import MusicNoteIcon from "@mui/icons-material/MusicNote";
5import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
6import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
7import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
8import PersonIcon from "@mui/icons-material/Person";
9import AccountCircleIcon from "@mui/icons-material/AccountCircle";
10import "./App.css";
11import { useNavigate } from "react-router-dom";
223011330f9623f2025-06-06 00:22:05 +080012import { API_BASE_URL } from "./config";
2230113338fd3882025-06-06 23:33:57 +080013import ForumIcon from "@mui/icons-material/Forum";
956303669a32fc2c2025-06-02 19:45:53 +080014
15const navItems = [
16 { label: "电影", icon: <MovieIcon />, path: "/movie" },
17 { label: "剧集", icon: <EmailIcon />, path: "/tv" },
18 { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
19 { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
20 { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
21 { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
22 { label: "资料", icon: <PersonIcon />, path: "/info" },
2230113338fd3882025-06-06 23:33:57 +080023 { label: "论坛", icon: <ForumIcon />, path: "/forum" },
9563036699e95ae32025-06-02 21:42:11 +080024 { label: "发布", icon: <AccountCircleIcon />, path: "/publish" }, // Added Publish option
956303669a32fc2c2025-06-02 19:45:53 +080025];
26
27const sportTypes = [""];
28
29const areaTabs = [
30 { label: "篮球", icon: <MovieIcon fontSize="small" /> },
31 { label: "足球", icon: <EmailIcon fontSize="small" /> },
32 { label: "羽毛球", icon: <EmojiPeopleIcon fontSize="small" /> },
33 { label: "排球", icon: <PersonIcon fontSize="small" /> },
34 { label: "电竞", icon: <PersonIcon fontSize="small" />, active: true },
35];
36
9563036699e95ae32025-06-02 21:42:11 +080037const exampleTorrents = [
38 { type: "Soccer", title: "实例1", id: 1 },
39 { type: "Basketball", title: "实例2", id: 2 },
40 { type: "Tennis", title: "实例3", id: 3 },
41];
42
956303669a32fc2c2025-06-02 19:45:53 +080043export default function SportPage() {
44 const navigate = useNavigate();
223011339e292152025-06-08 00:34:37 +080045 const [searchText, setSearchText] = React.useState('');
46 const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
47 const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
956303669a32fc2c2025-06-02 19:45:53 +080048 const [activeTab, setActiveTab] = React.useState(0);
rhjc6a4ee02025-06-06 00:45:18 +080049 const [sportList, setSportList] = React.useState([]);
956303669a32fc2c2025-06-02 19:45:53 +080050
223011339e292152025-06-08 00:34:37 +080051 useEffect(() => {
52 const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
53 const userId = match ? match[2] : null;
54 console.log("User ID from cookie:", userId);
55 if (!userId) return;
56 fetch(`${API_BASE_URL}/api/get-userpt?userid=${encodeURIComponent(userId)}`)
57 .then(res => res.json())
58 .then(data => {
59 console.log('用户PT信息:', data);
60 setUserInfo({ avatar_url: data.user.avatar_url, username: data.user.username });
61 setUserPT({
62 magic: data.magic_value || data.magic || 0,
63 ratio: data.share_ratio || data.share || 0,
64 upload: data.upload_amount || data.upload || 0,
65 download: data.download_amount || data.download || 0,
66 });
67 })
68 .catch(err => console.error('Fetching user profile failed', err));
69 }, []);
70
956303669a32fc2c2025-06-02 19:45:53 +080071 // 每个tab对应的运动类型
72 const sportTypesList = [
73 ["篮球赛事", "篮球技巧", "篮球明星"], // 篮球
74 ["足球赛事", "足球技巧", "足球明星"], // 足球
75 ["羽毛球赛事", "羽毛球技巧"], // 羽毛球
76 ["排球赛事", "排球技巧"], // 排球
77 ["电竞赛事", "电竞技巧"], // 电竞
78 ];
79 const sportTypes = sportTypesList[activeTab] || [];
80
rhjc6a4ee02025-06-06 00:45:18 +080081 React.useEffect(() => {
82 // 假设后端接口为 /api/sports?area=篮球
83 const area = areaTabs[activeTab].label;
223011330f9623f2025-06-06 00:22:05 +080084 fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
rhjc6a4ee02025-06-06 00:45:18 +080085 .then(res => res.json())
86 .then(data => setSportList(data))
87 .catch(() => setSportList([]));
88 }, [activeTab]);
89
223011339e292152025-06-08 00:34:37 +080090 // 搜索按钮处理
91 const handleSearch = () => {
92 const area = areaTabs[activeTab].label;
93 fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
94 .then(res => res.json())
95 .then(data => {
96 console.log('搜索返回数据:', data);
97 setSportList(data);
98 })
99 .catch(() => setSportList([]));
100 };
101
956303669a32fc2c2025-06-02 19:45:53 +0800102 return (
103 <div className="container">
104 {/* 顶部空白与音乐界面一致,用户栏绝对定位在页面右上角 */}
105 <div style={{ height: 80 }} />
223011339e292152025-06-08 00:34:37 +0800106 <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
107 <div style={{ cursor: 'pointer', marginRight: 16 }} onClick={() => navigate('/user')}>
108 {userInfo.avatar_url ? (
109 <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
110 ) : (
111 <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
112 )}
956303669a32fc2c2025-06-02 19:45:53 +0800113 </div>
223011339e292152025-06-08 00:34:37 +0800114 <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
115 <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
116 <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
117 <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
118 <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
119 <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
956303669a32fc2c2025-06-02 19:45:53 +0800120 </div>
121 </div>
122 {/* 下方内容整体下移,留出与音乐界面一致的间距 */}
123 <div style={{ height: 32 }} />
124 <nav className="nav-bar card">
125 {navItems.map((item) => (
126 <div
127 key={item.label}
128 className={item.label === "体育" ? "nav-item active" : "nav-item"}
129 onClick={() => navigate(item.path)}
130 >
131 {item.icon}
132 <span>{item.label}</span>
133 </div>
134 ))}
135 </nav>
136 <div className="search-section card">
223011339e292152025-06-08 00:34:37 +0800137 <input
138 className="search-input"
139 placeholder="输入搜索关键词"
140 value={searchText}
141 onChange={e => setSearchText(e.target.value)}
142 />
143 <button className="search-btn" onClick={handleSearch}>
144 <span role="img" aria-label="search">🔍</span>
956303669a32fc2c2025-06-02 19:45:53 +0800145 </button>
146 </div>
147 <div
148 className="area-tabs"
149 style={{
150 display: "flex",
151 justifyContent: "center",
152 gap: 24,
153 margin: "18px 0",
154 }}
155 >
156 {areaTabs.map((tab, idx) => (
157 <div
158 key={tab.label}
159 className={activeTab === idx ? "area-tab active" : "area-tab"}
160 onClick={() => setActiveTab(idx)}
161 >
162 {tab.icon} <span>{tab.label}</span>
163 </div>
164 ))}
165 </div>
166 <div className="table-section">
9563036699e95ae32025-06-02 21:42:11 +0800167 <table className="sport-table">
956303669a32fc2c2025-06-02 19:45:53 +0800168 <thead>
169 <tr>
9563036699e95ae32025-06-02 21:42:11 +0800170 <th>体育类型</th>
956303669a32fc2c2025-06-02 19:45:53 +0800171 <th>标题</th>
172 <th>发布者</th>
173 </tr>
174 </thead>
175 <tbody>
rhjc6a4ee02025-06-06 00:45:18 +0800176 {sportList.length > 0 ? (
177 sportList.map((item, index) => (
178 <tr key={item.id || index}>
179 <td>
180 <a href={`/torrent/${item.seedid}`} style={{ color: "#1a237e", textDecoration: "none" }}>
181 {item.seedtag}
182 </a>
183 </td>
184 <td>
185 <a href={`/torrent/${item.seedid}`} style={{ color: "#1a237e", textDecoration: "none" }}>
186 {item.title}
187 </a>
188 </td>
189 <td>{item.user.username}</td>
190 </tr>
191 ))
192 ) : (
193 sportTypes.map((type, index) => (
194 <tr key={type}>
195 <td>
196 <a href={`/torrent/${type}`} style={{ color: "#1a237e", textDecoration: "none" }}>
197 {type}
198 </a>
199 </td>
200 <td>
201 <a href={`/torrent/${type}`} style={{ color: "#1a237e", textDecoration: "none" }}>
202 种子{index + 1}
203 </a>
204 </td>
205 <td>发布者{index + 1}</td>
206 </tr>
207 ))
208 )}
956303669a32fc2c2025-06-02 19:45:53 +0800209 </tbody>
210 </table>
211 </div>
212 <div style={{ height: 32 }} />
213 <Pagination />
214 </div>
215 );
216}
217
218function Pagination() {
219 const [page, setPage] = React.useState(3);
220 const total = 5;
221 return (
222 <div className="pagination">
223 <button
224 onClick={() => setPage((p) => Math.max(1, p - 1))}
225 disabled={page === 1}
226 >
227 上一页
228 </button>
229 <span className="page-num">
230 {page}/{total}
231 </span>
232 <button
233 onClick={() => setPage((p) => Math.min(total, p + 1))}
234 disabled={page === total}
235 >
236 下一页
237 </button>
238 <span className="page-info">
239 <b>{page}</b>
240 </span>
241 </div>
242 );
243}