修改前端页面
Change-Id: I344849fc3dfca5725e0ef2a107e2c89a14fce8da
diff --git a/front/src/InfoPage.js b/front/src/InfoPage.js
index 0ed6ade..cec0b4d 100644
--- a/front/src/InfoPage.js
+++ b/front/src/InfoPage.js
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import HomeIcon from "@mui/icons-material/Home";
import MovieIcon from "@mui/icons-material/Movie";
import EmailIcon from "@mui/icons-material/Email";
import MusicNoteIcon from "@mui/icons-material/MusicNote";
@@ -7,11 +8,14 @@
import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
import PersonIcon from "@mui/icons-material/Person";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import ForumIcon from "@mui/icons-material/Forum";
+import HelpIcon from "@mui/icons-material/Help";
import "./App.css";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";
const navItems = [
+ { label: "首页", icon: <HomeIcon />, path: "/home" },
{ label: "电影", icon: <MovieIcon />, path: "/movie" },
{ label: "剧集", icon: <EmailIcon />, path: "/tv" },
{ label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
@@ -19,29 +23,44 @@
{ label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
{ label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
{ label: "资料", icon: <PersonIcon />, path: "/info" },
- { label: "发布", icon: <AccountCircleIcon />, path: "/publish" }, // Added Publish option
+ { label: "论坛", icon: <ForumIcon />, path: "/forum" },
+ { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
+ { label: "求种", icon: <HelpIcon />, path: "/begseed" },
];
-const infoTypes = [""];
-
const areaTabs = [
{ label: "出版物", icon: <MovieIcon fontSize="small" /> },
{ label: "学习教程", icon: <EmailIcon fontSize="small" /> },
{ label: "素材模板", icon: <PersonIcon fontSize="small" /> },
{ label: "演讲交流", icon: <EmojiPeopleIcon fontSize="small" /> },
- { label: "日常娱乐", icon: <PersonIcon fontSize="small" />, active: true },
-];
-
-const exampleTorrents = [
- { type: "Documentary", title: "实例1", id: 1 },
- { type: "Biography", title: "实例2", id: 2 },
- { type: "History", title: "实例3", id: 3 },
+ { label: "日常娱乐", icon: <PersonIcon fontSize="small" /> },
];
export default function InfoPage() {
const navigate = useNavigate();
- const [activeTab, setActiveTab] = React.useState(0);
- const [infoList, setInfoList] = React.useState(0);
+ const [searchText, setSearchText] = useState('');
+ const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
+ const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
+ const [activeTab, setActiveTab] = useState(0);
+ const [infoList, setInfoList] = useState([]);
+
+ useEffect(() => {
+ const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+ const userId = match ? match[2] : null;
+ if (!userId) return;
+ fetch(`${API_BASE_URL}/api/get-userpt?userid=${encodeURIComponent(userId)}`)
+ .then(res => res.json())
+ .then(data => {
+ setUserInfo({ avatar_url: data.user.avatar_url, username: data.user.username });
+ setUserPT({
+ magic: data.magic_value || data.magic || 0,
+ ratio: data.share_ratio || data.share || 0,
+ upload: data.upload_amount || data.upload || 0,
+ download: data.download_amount || data.download || 0,
+ });
+ })
+ .catch(err => console.error('Fetching user profile failed', err));
+ }, []);
// 每个tab对应的资料类型
const infoTypesList = [
@@ -50,83 +69,52 @@
["模板A", "模板B"], // 素材模板
["演讲A", "演讲B"], // 演讲交流
["娱乐A", "娱乐B"], // 日常娱乐
+ ["其他类型1", "其他类型2"] // 其他
];
const infoTypes = infoTypesList[activeTab] || [];
- React.useEffect(() => {
- // 这里假设后端接口为 /api/get-seed-list-by-tag?tag=大陆
+ useEffect(() => {
const area = areaTabs[activeTab].label;
fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
.then(res => res.json())
.then(data => {
- console.log('资料区返回数据:', data);
setInfoList(data);
})
.catch(() => setInfoList([]));
}, [activeTab]);
+ // 搜索按钮处理
+ const handleSearch = () => {
+ const area = areaTabs[activeTab].label;
+ fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
+ .then(res => res.json())
+ .then(data => {
+ setInfoList(data);
+ })
+ .catch(() => setInfoList([]));
+ };
+
return (
<div className="container">
- {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
+ {/* 顶部空白与资料界面一致，用户栏绝对定位在页面右上角 */}
<div style={{ height: 80 }} />
- <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,
- }}
- >
- <div
- style={{ cursor: "pointer", marginRight: 16 }}
- onClick={() => navigate("/user")}
- >
- <AccountCircleIcon
- style={{
- fontSize: 38,
- color: "#1a237e",
- background: "#e0f3ff",
- borderRadius: "50%",
- }}
- />
+ <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 }}>
+ <div style={{ cursor: 'pointer', marginRight: 16 }} onClick={() => navigate('/user')}>
+ {userInfo.avatar_url ? (
+ <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
+ ) : (
+ <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
+ )}
</div>
- <div style={{ color: "#222", fontWeight: 500, marginRight: 24 }}>
- 用户栏
- </div>
- <div
- style={{
- display: "flex",
- gap: 28,
- flex: 1,
- justifyContent: "flex-end",
- alignItems: "center",
- }}
- >
- <span style={{ color: "#1976d2", fontWeight: 500 }}>
- 魔力值: <b>12345</b>
- </span>
- <span style={{ color: "#1976d2", fontWeight: 500 }}>
- 分享率: <b>2.56</b>
- </span>
- <span style={{ color: "#1976d2", fontWeight: 500 }}>
- 上传量: <b>100GB</b>
- </span>
- <span style={{ color: "#1976d2", fontWeight: 500 }}>
- 下载量: <b>50GB</b>
- </span>
+ <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
+ <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
+ <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
+ <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
+ <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
+ <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
</div>
</div>
- {/* 下方内容整体下移，留出与音乐界面一致的间距 */}
+ {/* 下方内容整体下移，留出与资料界面一致的间距 */}
<div style={{ height: 32 }} />
<nav className="nav-bar card">
{navItems.map((item) => (
@@ -141,22 +129,17 @@
))}
</nav>
<div className="search-section card">
- <input className="search-input" placeholder="输入搜索关键词" />
- <button className="search-btn">
- <span role="img" aria-label="search">
- 🔍
- </span>
+ <input
+ className="search-input"
+ placeholder="输入搜索关键词"
+ value={searchText}
+ onChange={e => setSearchText(e.target.value)}
+ />
+ <button className="search-btn" onClick={handleSearch}>
+ <span role="img" aria-label="search">🔍</span>
</button>
</div>
- <div
- className="area-tabs"
- style={{
- display: "flex",
- justifyContent: "center",
- gap: 24,
- margin: "18px 0",
- }}
- >
+ <div className="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
{areaTabs.map((tab, idx) => (
<div
key={tab.label}
@@ -174,6 +157,9 @@
<th>资料类型</th>
<th>标题</th>
<th>发布者</th>
+ <th>大小</th>
+ <th>热度</th>
+ <th>折扣倍率</th>
</tr>
</thead>
<tbody>
@@ -190,11 +176,14 @@
{item.title}
</a>
</td>
- <td>{item.user.username}</td>
+ <td>{item.username}</td>
+ <td>{item.seedsize}</td>
+ <td>{item.downloadtimes}</td>
+ <td>{item.discount == null ? 1 : item.discount}</td>
</tr>
))
) : (
- infoTypesList.map((type, index) => (
+ infoTypes.map((type, index) => (
<tr key={type}>
<td>
<a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
@@ -207,6 +196,9 @@
</a>
</td>
<td>发布者{index + 1}</td>
+ <td>--</td>
+ <td>--</td>
+ <td>1</td>
</tr>
))
)}
@@ -224,24 +216,10 @@
const total = 5;
return (
<div className="pagination">
- <button
- onClick={() => setPage((p) => Math.max(1, p - 1))}
- disabled={page === 1}
- >
- 上一页
- </button>
- <span className="page-num">
- {page}/{total}
- </span>
- <button
- onClick={() => setPage((p) => Math.min(total, p + 1))}
- disabled={page === total}
- >
- 下一页
- </button>
- <span className="page-info">
- 第 <b>{page}</b> 页
- </span>
+ <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>上一页</button>
+ <span className="page-num">{page}/{total}</span>
+ <button onClick={() => setPage(p => Math.min(total, p + 1))} disabled={page === total}>下一页</button>
+ <span className="page-info">第 <b>{page}</b> 页</span>
</div>
);
-}
+}
\ No newline at end of file