front/src/TorrentDetailPage.js

import React from 'react';
import { useParams } from 'react-router-dom';
import './App.css';

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' }}>标题: {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' 
          }} 
          onClick={handleClick}
        >
          下载
        </button>
      </div>
    </div>
  );
}