前端简单界面
Change-Id: I7df9774daf4df8d92b13e659effe426ab0b6180b
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