前段
Change-Id: I718d4d07ea03c6d2b6bcbd4d426c5d1af2201bf4
diff --git a/src/components/RequestDetail.jsx b/src/components/RequestDetail.jsx
new file mode 100644
index 0000000..993fe8e
--- /dev/null
+++ b/src/components/RequestDetail.jsx
@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import { useParams, useNavigate,useLocation } from 'react-router-dom';
+import './RequestDetail.css';
+
+const RequestDetail = () => {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ // 模拟数据
+ const [post, setPost] = useState({
+ id: 1,
+ title: '求《药屋少女的呢喃》第二季全集',
+ content: '求1080P带中文字幕版本，最好是内嵌字幕不是外挂的。\n\n希望有热心大佬能分享，可以给积分奖励！',
+ author: '动漫爱好者',
+ authorAvatar: 'https://via.placeholder.com/40',
+ date: '2023-10-15',
+ likeCount: 24,
+ isLiked: false,
+ isFavorited: false
+ });
+
+ const [comments, setComments] = useState([
+ {
+ id: 1,
+ type: 'text',
+ author: '资源达人',
+ authorAvatar: 'https://via.placeholder.com/40',
+ content: '我有第1-5集，需要的话可以私聊',
+ date: '2023-10-15 14:30',
+ likeCount: 5
+ },
+ {
+ id: 2,
+ type: 'torrent',
+ title: '药屋少女的呢喃第二季第8集',
+ size: '1.2GB',
+ author: '种子分享者',
+ authorAvatar: 'https://via.placeholder.com/40',
+ date: '2023-10-16 09:15',
+ likeCount: 8
+ }
+ ]);
+
+ const [newComment, setNewComment] = useState('');
+
+ const handleLikePost = () => {
+ setPost(prev => ({
+ ...prev,
+ likeCount: prev.isLiked ? prev.likeCount - 1 : prev.likeCount + 1,
+ isLiked: !prev.isLiked
+ }));
+ };
+
+ const handleFavoritePost = () => {
+ setPost(prev => ({
+ ...prev,
+ isFavorited: !prev.isFavorited
+ }));
+ };
+
+ const handleCommentSubmit = (e) => {
+ e.preventDefault();
+ if (!newComment.trim()) return;
+
+ const newCommentObj = {
+ id: comments.length + 1,
+ type: 'text',
+ author: '当前用户',
+ authorAvatar: 'https://via.placeholder.com/40',
+ content: newComment,
+ date: new Date().toLocaleString(),
+ likeCount: 0
+ };
+
+ setComments([...comments, newCommentObj]);
+ setNewComment('');
+ };
+
+ const handleDownloadTorrent = (commentId) => {
+ console.log('下载种子', commentId);
+ // 实际下载逻辑
+ };
+
+ const handleBack = () => {
+ const fromTab = location.state?.fromTab; // 从跳转时传递的 state 中获取
+ if (fromTab) {
+ navigate(`/dashboard/${fromTab}`); // 明确返回对应标签页
+ } else {
+ navigate(-1); // 保底策略
+ }
+ }
+
+ return (
+ <div className="request-detail-container">
+ <button className="back-button" onClick={handleBack}>
+ ← 返回求种区
+ </button>
+
+ <div className="request-post">
+ <div className="post-header">
+ <img src={post.authorAvatar} alt={post.author} className="post-avatar" />
+ <div className="post-meta">
+ <div className="post-author">{post.author}</div>
+ <div className="post-date">{post.date}</div>
+ </div>
+ </div>
+
+ <h1 className="post-title">{post.title}</h1>
+
+ <div className="post-content">
+ {post.content.split('\n').map((para, i) => (
+ <p key={i}>{para}</p>
+ ))}
+ </div>
+
+ <div className="post-actions">
+ <button
+ className={`like-button ${post.isLiked ? 'liked' : ''}`}
+ onClick={handleLikePost}
+ >
+ 👍 点赞 ({post.likeCount})
+ </button>
+ <button
+ className={`favorite-button ${post.isFavorited ? 'favorited' : ''}`}
+ onClick={handleFavoritePost}
+ >
+ {post.isFavorited ? '★ 已收藏' : '☆ 收藏'}
+ </button>
+ </div>
+ </div>
+
+ <div className="comments-section">
+ <h2>回应 ({comments.length})</h2>
+
+ <form onSubmit={handleCommentSubmit} className="comment-form">
+ <textarea
+ value={newComment}
+ onChange={(e) => setNewComment(e.target.value)}
+ placeholder="写下你的回应..."
+ rows="3"
+ required
+ />
+ <div className="form-actions">
+ <button type="submit" className="submit-comment">发表文字回应</button>
+ <button
+ type="button"
+ className="submit-torrent"
+ onClick={() => console.log('打开种子上传对话框')}
+ >
+ 上传种子回应
+ </button>
+ </div>
+ </form>
+
+ <div className="comment-list">
+ {comments.map(comment => (
+ <div key={comment.id} className={`comment-item ${comment.type}`}>
+ <img
+ src={comment.authorAvatar}
+ alt={comment.author}
+ className="comment-avatar"
+ />
+
+ <div className="comment-content">
+ <div className="comment-header">
+ <span className="comment-author">{comment.author}</span>
+ <span className="comment-date">{comment.date}</span>
+ </div>
+
+ {comment.type === 'text' ? (
+ <p className="comment-text">{comment.content}</p>
+ ) : (
+ <div className="torrent-comment">
+ <span className="torrent-title">{comment.title}</span>
+ <span className="torrent-size">{comment.size}</span>
+ <button
+ className="download-torrent"
+ onClick={() => handleDownloadTorrent(comment.id)}
+ >
+ 立即下载
+ </button>
+ </div>
+ )}
+
+ <button className="comment-like">
+ 👍 ({comment.likeCount})
+ </button>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default RequestDetail;
\ No newline at end of file