diff --git a/src/components/TorrentDetail.jsx b/src/components/TorrentDetail.jsx
new file mode 100644
index 0000000..e743506
--- /dev/null
+++ b/src/components/TorrentDetail.jsx
@@ -0,0 +1,348 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { 
+  getTorrentDetail, 
+  likeTorrent, 
+  addTorrentComment 
+} from '../api/torrent';
+import { 
+  likeTorrentComment, 
+  addCommentReply 
+} from '../api/torrentComment';
+import './TorrentDetail.css';
+
+
+const TorrentDetail = ({ onLogout }) => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [torrent, setTorrent] = useState(null);
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState('');
+  const [setReplyingTo] = useState(null);
+  const [replyContent, setReplyContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [activeReplyId, setActiveReplyId] = useState(null);
+  const [replyModal, setReplyModal] = useState({
+    visible: false,
+    replyingTo: null,
+    replyingToUsername: '',
+    isReply: false
+  });
+
+  // 确保openReplyModal接收username参数
+const openReplyModal = (commentId, username) => {
+  setReplyModal({
+    visible: true,
+    replyingTo: commentId,
+    replyingToUsername: username,  // 确保这里接收username
+    isReply: false
+  });
+};
+
+  // 关闭回复弹窗
+  const closeReplyModal = () => {
+    setReplyModal({
+      visible: false,
+      replyingTo: null,
+      replyingToUsername: '',
+      isReply: false
+    });
+    setReplyContent('');
+  };
+
+  const Comment = ({ comment, onLike, onReply, isReply = false }) => {
+    return (
+      <div className={`comment-container ${isReply ? "is-reply" : ""}`}>
+        <div className="comment-item">
+          <div className="comment-avatar">
+            {(comment.authorId || "?").charAt(0)} {/* 修复点 */}
+          </div>
+          <div className="comment-content">
+            <div className="comment-header">
+              <span className="comment-user">{comment.authorId || "匿名用户"}</span>
+              {comment.replyTo && (
+                <span className="reply-to">回复 @{comment.replyTo}</span>
+              )}
+              <span className="comment-time">
+                {new Date(comment.createTime).toLocaleString()}
+              </span>
+            </div>
+            <p className="comment-text">{comment.content}</p>
+            <div className="comment-actions">
+              <button onClick={() => onLike(comment.id)}>
+                👍 ({comment.likeCount || 0})
+              </button>
+              <button onClick={() => onReply(comment.id, comment.authorId)}>
+                回复
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+    // 递归渲染评论组件
+  const renderComment = (comment, depth = 0) => {
+    return (
+      <div key={comment.id} style={{ marginLeft: `${depth * 30}px` }}>
+        <Comment
+          comment={comment}
+          onLike={handleLikeComment}
+          onReply={openReplyModal}
+          isReply={depth > 0}
+        />
+        
+        {/* 递归渲染所有回复 */}
+        {comment.replies && comment.replies.map(reply => 
+          renderComment(reply, depth + 1)
+        )}
+      </div>
+    );
+  };
+    
+
+
+  const fetchTorrentDetail = async () => {
+    try {
+      setLoading(true);
+      const response = await getTorrentDetail(id);
+      console.log('API Response:', JSON.parse(JSON.stringify(response.data.data.comments))); // 深度拷贝避免Proxy影响
+      setTorrent(response.data.data.torrent);
+      setComments(response.data.data.comments);
+    } catch (err) {
+      setError(err.response?.data?.message || '获取种子详情失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTorrentDetail();
+  }, [id]);
+
+  // 点赞种子
+  const handleLikeTorrent = async () => {
+    try {
+      await likeTorrent(id);
+      setTorrent(prev => ({
+        ...prev,
+        likeCount: prev.likeCount + 1
+      }));
+    } catch (err) {
+      setError('点赞失败: ' + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const handleCommentSubmit = async (e) => {
+    e.preventDefault();
+    if (!newComment.trim()) return;
+    
+    try {
+      const username = localStorage.getItem('username');
+      const response = await addTorrentComment(id, {
+        content: newComment,
+        authorId: username
+      });
+  
+      // 修改这里的响应处理逻辑
+      if (response.data && response.data.code === 200) {
+        await fetchTorrentDetail();
+        
+        setNewComment('');
+      } else {
+        setError(response.data.message || '评论失败');
+      }
+    } catch (err) {
+      setError('评论失败: ' + (err.response?.data?.message || err.message));
+    }
+  };
+  
+  
+  const handleLikeComment = async (commentId) => {
+    try {
+      await likeTorrentComment(commentId);
+      
+      // 递归更新评论点赞数
+      const updateComments = (comments) => {
+        return comments.map(comment => {
+          // 当前评论匹配
+          if (comment.id === commentId) {
+            return { ...comment, likeCount: comment.likeCount + 1 };
+          }
+          
+          // 递归处理回复
+          if (comment.replies && comment.replies.length > 0) {
+            return {
+              ...comment,
+              replies: updateComments(comment.replies)
+            };
+          }
+          
+          return comment;
+        });
+      };
+  
+      setComments(prev => updateComments(prev));
+    } catch (err) {
+      setError('点赞失败: ' + (err.response?.data?.message || err.message));
+    }
+  };
+  // 修改startReply函数
+  const startReply = (commentId) => {
+    if (activeReplyId === commentId) {
+      // 如果点击的是已经激活的回复按钮，则关闭
+      setActiveReplyId(null);
+      setReplyingTo(null);
+    } else {
+      // 否则打开新的回复框
+      setActiveReplyId(commentId);
+      setReplyingTo(commentId);
+    }
+  };
+
+  const handleReplySubmit = async (e) => {
+    e.preventDefault();
+    if (!replyContent.trim()) return;
+  
+    try {
+      const username = localStorage.getItem('username');
+      const response = await addCommentReply(replyModal.replyingTo, {
+        content: replyContent,
+        authorId: username
+      });
+  
+      console.log('回复响应:', response.data); // 调试
+      
+      if (response.data && response.data.code === 200) {
+        await fetchTorrentDetail();
+  
+        closeReplyModal();
+      }
+    } catch (err) {
+      console.error('回复错误:', err);
+      setError('回复失败: ' + (err.response?.data?.message || err.message));
+    }
+  };
+
+
+  // 返回按钮
+  const handleBack = () => {
+    const fromTab = location.state?.fromTab || 'share';
+    navigate(`/dashboard/${fromTab}`);
+  };
+
+  if (loading) return <div className="loading">加载中...</div>;
+  if (error) return <div className="error">{error}</div>;
+  if (!torrent) return <div className="error">种子不存在</div>;
+
+  return (
+    <div className="torrent-detail-container">
+      <button className="back-button" onClick={handleBack}>
+        &larr; 返回资源区
+      </button>
+      
+      <div className="torrent-main">
+        <div className="torrent-cover">
+          <div className="cover-placeholder">
+            {torrent.torrentName.charAt(0)}
+          </div>
+        </div>
+        
+        <div className="torrent-info">
+          <h1 className="torrent-title">{torrent.torrentName}</h1>
+          
+          <div className="uploader-info">
+            <div className="uploader-avatar">
+              {torrent.username.charAt(0)}
+            </div>
+            <div className="uploader-details">
+              <span className="uploader-name">{torrent.username}</span>
+              <span className="upload-time">
+                {new Date(torrent.createTime).toLocaleString()}
+              </span>
+            </div>
+          </div>
+          
+          <div className="torrent-meta">
+            <p><strong>类型:</strong> {torrent.category}</p>
+            <p><strong>地区:</strong> {torrent.region}</p>
+            <p><strong>分辨率:</strong> {torrent.resolution}</p>
+            <p><strong>字幕:</strong> {torrent.subtitle}</p>
+            {torrent.size && <p><strong>大小:</strong> {torrent.size}</p>}
+          </div>
+          
+          <div className="torrent-description">
+            <h3>资源描述</h3>
+            <p>{torrent.description}</p>
+          </div>
+          
+          <div className="interaction-buttons">
+            <button 
+              className="like-button"
+              onClick={handleLikeTorrent}
+            >
+              <span>👍 点赞 ({torrent.likeCount})</span>
+            </button>
+            <button className="download-button">
+              <span>⬇️ 立即下载</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <div className="comments-section">
+        <h2>评论 ({torrent.replyCount})</h2>
+        
+        <form onSubmit={handleCommentSubmit} className="comment-form">
+          <textarea
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            placeholder="写下你的评论..."
+            rows="3"
+            required
+          />
+          <button type="submit">发表评论</button>
+        </form>
+        
+        <div className="comment-list">
+          {comments.map(comment => renderComment(comment))}
+        </div>
+
+        {replyModal.visible && (
+          <div className="reply-modal-overlay">
+            <div className="reply-modal">
+              <div className="modal-header">
+                <h3>回复 @{replyModal.replyingToUsername}</h3>
+                <button onClick={closeReplyModal} className="close-modal">&times;</button>
+              </div>
+              <form onSubmit={handleReplySubmit}>
+                <textarea
+                  value={replyContent}
+                  onChange={(e) => setReplyContent(e.target.value)}
+                  placeholder={`回复 @${replyModal.replyingToUsername}...`}
+                  rows="5"
+                  autoFocus
+                  required
+                />
+                <div className="modal-actions">
+                  <button type="button" onClick={closeReplyModal} className="cancel-btn">
+                    取消
+                  </button>
+                  <button type="submit" className="submit-btn">
+                    发送回复
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default TorrentDetail;
\ No newline at end of file