diff --git a/front/src/TorrentDetailPage.js b/front/src/TorrentDetailPage.js
index a23dce7..8d3ee43 100644
--- a/front/src/TorrentDetailPage.js
+++ b/front/src/TorrentDetailPage.js
@@ -4,14 +4,81 @@
 
 export default function TorrentDetailPage() {
   const { torrentId } = useParams();
+  const [detail, setDetail] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  // 假设你从某个地方获取了 userId（例如登录状态、localStorage 等）
+  const [userId] = React.useState('user1550e8400-e29b-41d4-a716-44665544000023'); // 替换为实际的用户 ID
+
+  const handleClick = () => {
+    // 构造下载 URL，包含 userId 和 torrentId 参数
+    console.log(torrentId)
+    const downloadUrl = `http://192.168.5.9:8080/api/get-torrent?userId=${encodeURIComponent(userId)}&torrentId=${encodeURIComponent(torrentId)}`;
+    
+    // 发起 GET 请求下载文件
+    fetch(downloadUrl)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('下载失败');
+        }
+        return response.blob();
+      })
+      .then(blob => {
+        // 创建下载链接并触发下载
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `torrent-${torrentId}.torrent`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      })
+      .catch(error => {
+        console.error('下载错误:', error);
+        alert('下载失败: ' + error.message);
+      });
+  };
+
+  React.useEffect(() => {
+    setLoading(true);
+    setError(null);
+    fetch(`http://192.168.5.9:8080/api/torrent-detail?id=${encodeURIComponent(torrentId)}`)
+      .then(res => {
+        if (!res.ok) throw new Error('网络错误');
+        return res.json();
+      })
+      .then(data => {
+        setDetail(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [torrentId]);
+
+  if (loading) return <div className="container"><h1>加载中...</h1></div>;
+  if (error) return <div className="container"><h1>加载失败: {error}</h1></div>;
+  if (!detail) return <div className="container"><h1>未找到详情</h1></div>;
 
   return (
     <div className="container">
       <h1>种子详情页</h1>
-      <h2 style={{ fontSize: 'inherit', fontWeight: 'normal', textAlign: 'left' }}>标题: 种子{torrentId}</h2>
-      <p style={{ fontSize: 'inherit', textAlign: 'left' }}>简介: 这是种子{torrentId}的详细信息。</p>
+      <h2 style={{ fontSize: 'inherit', fontWeight: 'normal', textAlign: 'left' }}>标题: {detail.title || `种子${torrentId}`}</h2>
+      <p style={{ fontSize: 'inherit', textAlign: 'left' }}>简介: {detail.description || `这是种子${torrentId}的详细信息。`}</p>
       <div style={{ textAlign: 'center', marginTop: '20px' }}>
-        <button style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer', backgroundColor: '#d3f0ff', border: 'none', borderRadius: '4px' }}>
+        <button 
+          style={{ 
+            padding: '10px 20px', 
+            fontSize: '16px', 
+            cursor: 'pointer', 
+            backgroundColor: '#d3f0ff', 
+            border: 'none', 
+            borderRadius: '4px' 
+          }} 
+          onClick={handleClick}
+        >
           下载
         </button>
       </div>