前端简单界面
Change-Id: I7df9774daf4df8d92b13e659effe426ab0b6180b
diff --git a/pt--frontend/src/pages/Home.jsx b/pt--frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..2e3aa80
--- /dev/null
+++ b/pt--frontend/src/pages/Home.jsx
@@ -0,0 +1,146 @@
+// // src/pages/Home.jsx
+// import React from 'react';
+// import TorrentList from '../components/torrentlist';
+// import { Link } from 'react-router-dom';
+
+// const Home = () => {
+// return (
+// <div className="min-h-screen bg-gray-100 p-4">
+// <div className="flex justify-between items-center mb-4">
+// <h1 className="text-2xl font-bold">种子列表</h1>
+// <Link to="/upload" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+// 上传种子
+// </Link>
+// </div>
+// <TorrentList />
+// </div>
+// );
+// };
+
+// export default Home;
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import TorrentList from '../components/torrentlist';
+import Post from '../components/Post';
+import FriendManager from '../components/FriendManager';
+import ChatBox from '../components/ChatBox';
+import RequestBoard from '../components/RequestBoard';
+import { getActivityPreviews, getFullActivities } from '../api/activity';
+
+const Home = () => {
+ const currentUser = {
+ id: 1,
+ username: '测试用户',
+ };
+
+ const [selectedRelation, setSelectedRelation] = useState(null);
+ const [activityPreviews, setActivityPreviews] = useState([]);
+ const [fullActivities, setFullActivities] = useState([]);
+ const [selectedActivityId, setSelectedActivityId] = useState(null);
+
+ useEffect(() => {
+ getActivityPreviews().then(res => setActivityPreviews(res.data));
+ getFullActivities().then(res => setFullActivities(res.data));
+ }, []);
+
+ const selectedActivity = fullActivities.find(
+ activity => activity.activityid === selectedActivityId
+ );
+
+ return (
+ <div className="min-h-screen bg-gray-100 p-6">
+ <div className="flex justify-between items-center mb-6">
+ <h1 className="text-3xl font-bold">Pt站</h1>
+ <Link to="/upload" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+ 上传种子
+ </Link>
+ </div>
+
+ {/* 种子列表区域 */}
+ <div className="bg-white p-4 rounded shadow mb-8">
+ <h2 className="text-xl font-semibold mb-4">种子列表</h2>
+ <TorrentList />
+ </div>
+
+ {/* 活动区域 */}
+ <div className="bg-white p-4 rounded shadow mb-8">
+ <h2 className="text-xl font-semibold mb-4">活动预览</h2>
+ {!selectedActivity ? (
+ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+ {activityPreviews.map(activity => (
+ <div key={activity.activityid} className="border p-3 rounded shadow">
+ <h3 className="text-lg font-medium mb-2">{activity.title}</h3>
+ <img
+ src={activity.photo}
+ alt={activity.title}
+ className="w-full h-40 object-cover mb-2 rounded"
+ />
+ <button
+ className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
+ onClick={() => setSelectedActivityId(activity.activityid)}
+ >
+ 查看详情
+ </button>
+ </div>
+ ))}
+ </div>
+ ) : (
+ <div className="p-4 border rounded shadow">
+ <button
+ className="mb-4 text-blue-600 underline"
+ onClick={() => setSelectedActivityId(null)}
+ >
+ ← 返回列表
+ </button>
+ <h3 className="text-2xl font-bold mb-2">{selectedActivity.title}</h3>
+ <img
+ src={selectedActivity.photo}
+ alt={selectedActivity.title}
+ className="w-full h-60 object-cover rounded mb-4"
+ />
+ <p className="mb-2"><strong>内容：</strong>{selectedActivity.content}</p>
+ <p className="mb-2"><strong>时间：</strong>{selectedActivity.time}</p>
+ <p className="mb-2"><strong>奖励：</strong>{selectedActivity.award}</p>
+ </div>
+ )}
+ </div>
+
+ {/* 主内容区 */}
+ <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+ {/* 帖子区域 */}
+ <div className="bg-white p-4 rounded shadow xl:col-span-1">
+ <h2 className="text-xl font-semibold mb-4">最新帖子</h2>
+ <Post />
+ </div>
+
+ {/* 好友管理区 */}
+ <div className="bg-white p-4 rounded shadow xl:col-span-1">
+ <h2 className="text-xl font-semibold mb-4">好友管理</h2>
+ <FriendManager
+ currentUser={currentUser}
+ onSelectRelation={setSelectedRelation}
+ />
+ </div>
+
+ {/* 聊天窗口 */}
+ {selectedRelation && (
+ <div className="bg-white p-4 rounded shadow xl:col-span-1">
+ <h2 className="text-xl font-semibold mb-4">聊天窗口</h2>
+ <ChatBox
+ senderId={currentUser.id}
+ receiverId={selectedRelation.friendId}
+ />
+ </div>
+ )}
+ </div>
+
+ {/* 求助帖区域 */}
+ <div className="bg-white p-4 mt-8 rounded shadow">
+ <h2 className="text-xl font-semibold mb-4">求助帖管理</h2>
+ <RequestBoard currentUserId={currentUser.id} />
+ </div>
+ </div>
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/pt--frontend/src/pages/Torrentdetail.jsx b/pt--frontend/src/pages/Torrentdetail.jsx
new file mode 100644
index 0000000..9aa9ba0
--- /dev/null
+++ b/pt--frontend/src/pages/Torrentdetail.jsx
@@ -0,0 +1,234 @@
+// // src/pages/TorrentDetail.jsx
+// import React, { useEffect, useState } from 'react';
+// import { useParams } from 'react-router-dom';
+// import axios from 'axios';
+
+// const TorrentDetail = () => {
+// const { id } = useParams(); // 获取 URL 中的 torrentid
+// const [torrent, setTorrent] = useState(null);
+// const [seeders, setSeeders] = useState([]);
+// const [loading, setLoading] = useState(true);
+// useEffect(() => {
+// console.log("Received Torrent:", torrent);
+// }, [torrent]);
+// useEffect(() => {
+// axios.get(`http://localhost:8080/torrent/${id}`)
+// .then(res => setTorrent(res.data))
+// setTorrent(res.data);
+// return axios.get(`http://localhost:8080/torrent/${res.data.infoHash}/seeders`);
+// }).then(res =>
+// setSeeders(res.data))
+// .catch(err => {
+// console.error("Error fetching torrent details:", err)
+// .finally(() => setLoading(false));
+// },[id]);
+
+// if (!torrent) return <div className="p-4">加载中...</div>;
+
+// // 格式化文件大小
+// const formatSize = (bytes) => {
+// if (bytes === 0) return '0 B';
+// const k = 1024;
+// const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+// const i = Math.floor(Math.log(bytes) / Math.log(k));
+// return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+// };
+
+// // 格式化速度
+// const formatSpeed = (bytesPerSec) => {
+// if (bytesPerSec < 1024) return bytesPerSec.toFixed(2) + ' B/s';
+// if (bytesPerSec < 1024 * 1024) return (bytesPerSec / 1024).toFixed(2) + ' KB/s';
+// return (bytesPerSec / (1024 * 1024)).toFixed(2) + ' MB/s';
+// };
+// return (
+// <div className="max-w-2xl mx-auto p-6 bg-white shadow rounded mt-6">
+// <h1 className="text-2xl font-bold mb-4">{torrent.torrentTitle}</h1>
+
+// <div className="space-y-2 text-gray-700">
+// <p><strong>简介：</strong>{torrent.description}</p>
+// {/* 修复上传人显示 */}
+// <p><strong>上传人：</strong>{torrent.uploader_id !== undefined ? torrent.uploader_id : '未知用户'}</p>
+// <p><strong>上传时间：</strong>{new Date(torrent.uploadTime).toLocaleString()}</p>
+// <p><strong>下载数：</strong>{torrent.downloadCount}</p>
+// <p><strong>文件大小：</strong>{torrent.torrentSize} B</p>
+// <p><strong>文件分辨率：</strong>{torrent.dpi}</p>
+// <p><strong>文件字幕：</strong>{torrent.caption}</p>
+// <p><strong>最后做种时间：</strong>{new Date(torrent.lastseed).toLocaleString()}</p>
+// </div>
+// {/* 做种者列表 */}
+// <div className="mt-6">
+// <h2 className="text-xl font-semibold mb-3">做种用户 ({seeders.length})</h2>
+// {seeders.length > 0 ? (
+// <div className="overflow-x-auto">
+// <table className="min-w-full bg-white border border-gray-200">
+// <thead className="bg-gray-100">
+// <tr>
+// <th className="py-2 px-4 border-b">用户名</th>
+// <th className="py-2 px-4 border-b">已上传</th>
+// <th className="py-2 px-4 border-b">上传速度</th>
+// <th className="py-2 px-4 border-b">已下载</th>
+// <th className="py-2 px-4 border-b">下载速度</th>
+// <th className="py-2 px-4 border-b">客户端</th>
+// <th className="py-2 px-4 border-b">最后活动</th>
+// </tr>
+// </thead>
+// <tbody>
+// {seeders.map((seeder, index) => (
+// <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
+// <td className="py-2 px-4 border-b text-center">{seeder.username}</td>
+// <td className="py-2 px-4 border-b text-center">{formatSize(seeder.uploaded)}</td>
+// <td className="py-2 px-4 border-b text-center text-green-600">
+// {formatSpeed(seeder.uploadSpeed)}
+// </td>
+// <td className="py-2 px-4 border-b text-center">{formatSize(seeder.downloaded)}</td>
+// <td className="py-2 px-4 border-b text-center">
+// {seeder.downloadSpeed > 0 ? formatSpeed(seeder.downloadSpeed) : '-'}
+// </td>
+// <td className="py-2 px-4 border-b text-center">{seeder.client}</td>
+// <td className="py-2 px-4 border-b text-center">
+// {new Date(seeder.lastActive).toLocaleTimeString()}
+// </td>
+// </tr>
+// ))}
+// </tbody>
+// </table>
+// </div>
+// ) : (
+// <div className="p-4 text-center text-gray-500 bg-gray-50 rounded">
+// 当前没有用户在做种
+// </div>
+// )}
+// </div>
+// </div>
+// );
+// };
+
+// export default TorrentDetail;
+// src/pages/TorrentDetail.jsx
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+
+const TorrentDetail = () => {
+ const { id } = useParams();
+ const [torrent, setTorrent] = useState(null);
+ const [seeders, setSeeders] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ // 获取种子基本信息
+ axios.get(`http://localhost:8080/torrent/${id}`)
+ .then(res => {
+ setTorrent(res.data);
+ // 获取做种者信息
+ return axios.get(`http://localhost:8080/torrent/${res.data.infoHash}/seeders`);
+ })
+ .then(res => setSeeders(res.data))
+ .catch(err => console.error('获取数据失败', err))
+ .finally(() => setLoading(false));
+ }, [id]);
+
+ if (loading) return <div className="p-4">加载中...</div>;
+ if (!torrent) return <div className="p-4">种子不存在</div>;
+ console.log('Received Torrent:', torrent);
+ console.log('Received Seeders:', seeders);
+
+ // 格式化文件大小
+ const formatSize = (bytes) => {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+ };
+
+ // 格式化速度
+ const formatSpeed = (bytesPerSec) => {
+ if (bytesPerSec < 1024) return bytesPerSec.toFixed(2) + ' B/s';
+ if (bytesPerSec < 1024 * 1024) return (bytesPerSec / 1024).toFixed(2) + ' KB/s';
+ return (bytesPerSec / (1024 * 1024)).toFixed(2) + ' MB/s';
+ };
+
+ return (
+ <div className="max-w-4xl mx-auto p-6 bg-white shadow rounded mt-6">
+ <h1 className="text-2xl font-bold mb-4">{torrent.torrentTitle}</h1>
+
+ {/* 种子基本信息 */}
+ <div className="mb-8 p-4 bg-gray-50 rounded">
+ <h2 className="text-xl font-semibold mb-3">基本信息</h2>
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-700">
+ <div>
+ <p><strong>简介：</strong>{torrent.description || '暂无简介'}</p>
+ <p><strong>上传人：</strong>{torrent.uploader_id || '未知用户'}</p>
+ <p><strong>上传时间：</strong>{new Date(torrent.uploadTime).toLocaleString()}</p>
+ <p><strong>文件大小：</strong>{formatSize(torrent.torrentSize)}</p>
+ </div>
+ <div>
+ <p><strong>下载数：</strong>{torrent.downloadCount || 0}</p>
+ <p><strong>做种数：</strong>{seeders.length}</p>
+ <p><strong>文件分辨率：</strong>{torrent.dpi || '未知'}</p>
+ <p><strong>文件字幕：</strong>{torrent.caption || '无'}</p>
+ <p><strong>最后做种时间：</strong>{torrent.lastseed ? new Date(torrent.lastseed).toLocaleString() : '暂无'}</p>
+ </div>
+ </div>
+ </div>
+
+ {/* 做种者列表 */}
+ <div className="mt-6">
+ <h2 className="text-xl font-semibold mb-3">做种用户 ({seeders.length})</h2>
+ {seeders.length > 0 ? (
+ <div className="overflow-x-auto">
+ <table className="min-w-full bg-white border border-gray-200">
+ <thead className="bg-gray-100">
+ <tr>
+ <th className="py-2 px-4 border-b">用户名</th>
+ <th className="py-2 px-4 border-b">已上传</th>
+ <th className="py-2 px-4 border-b">上传时间</th>
+ <th className="py-2 px-4 border-b">完成时间</th>
+ <th className="py-2 px-4 border-b">上传速度</th>
+ <th className="py-2 px-4 border-b">已下载</th>
+ <th className="py-2 px-4 border-b">下载速度</th>
+ <th className="py-2 px-4 border-b">客户端</th>
+ <th className="py-2 px-4 border-b">端口</th>
+ <th className="py-2 px-4 border-b">最后活动</th>
+ </tr>
+ </thead>
+ <tbody>
+ {seeders.map((seeder, index) => (
+ <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
+ <td className="py-2 px-4 border-b text-center">{seeder.username}</td>
+ <td className="py-2 px-4 border-b text-center">{formatSize(seeder.uploaded)}</td>
+ <td className="py-2 px-4 border-b text-center text-green-600">
+ {new Date(seeder.createdAt).toLocaleString()}
+ </td>
+ <td className="py-2 px-4 border-b text-center text-green-600">
+ {new Date(seeder.completed_time).toLocaleString()}
+ </td>
+ <td className="py-2 px-4 border-b text-center text-green-600">
+ {formatSpeed(seeder.uploadSpeed)}
+ </td>
+ <td className="py-2 px-4 border-b text-center">{formatSize(seeder.downloaded)}</td>
+ <td className="py-2 px-4 border-b text-center">
+ {seeder.downloadSpeed > 0 ? formatSpeed(seeder.downloadSpeed) : '-'}
+ </td>
+ <td className="py-2 px-4 border-b text-center">{seeder.client}</td>
+ <td className="py-2 px-4 border-b text-center">{seeder.port}</td>
+ <td className="py-2 px-4 border-b text-center">
+ {seeder.lastEvent}
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ ) : (
+ <div className="p-4 text-center text-gray-500 bg-gray-50 rounded">
+ 当前没有用户在做种
+ </div>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default TorrentDetail;
\ No newline at end of file
diff --git a/pt--frontend/src/pages/UploadPage.jsx b/pt--frontend/src/pages/UploadPage.jsx
new file mode 100644
index 0000000..d0ea71b
--- /dev/null
+++ b/pt--frontend/src/pages/UploadPage.jsx
@@ -0,0 +1,14 @@
+// src/pages/UploadPage.jsx
+import React from 'react';
+import UploadTorrent from '../components/upload';
+
+const UploadPage = () => {
+ return (
+ <div className="min-h-screen bg-gray-100 p-4">
+ <h1 className="text-2xl font-bold mb-4">上传种子</h1>
+ <UploadTorrent />
+ </div>
+ );
+};
+
+export default UploadPage;