diff --git a/src/pages/Forum/posts-detail/PostDetailPage.jsx b/src/pages/Forum/posts-detail/PostDetailPage.jsx
index c0f218f..5186339 100644
--- a/src/pages/Forum/posts-detail/PostDetailPage.jsx
+++ b/src/pages/Forum/posts-detail/PostDetailPage.jsx
@@ -1,310 +1,273 @@
-import React, { useState, useEffect } from 'react';
-import { useRoute } from 'wouter';
-import {
-    getPostDetail,
-    getPostComments,
-    likePost,
-    unlikePost,
-    addCommentToPost,
-    replyToComment,
-    likeComment,
-    unlikeComment,
-    getUserInfo
-} from './api';
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'wouter';
+import { GoodTwo, Star } from '@icon-park/react';
+import { getPostDetail, getPostComments, likePost, unlikePost, addCommentToPost, collectPost } from './api'; // 引入你的 API 函数
 import './PostDetailPage.css';
-import axios from 'axios';
-
-const API_BASE = process.env.REACT_APP_API_BASE;
-
-const PostHeader = ({ post }) => {
-    const anonymousAvatar = '/assets/img/anonymous.jpg';
-    return (
-        <div className="post-header">
-            <div className="author-info">
-                <img className="avatar" src={post.isAnonymous? anonymousAvatar : post.userProfile.avatar_url} alt="头像" />
-                <span className="author-name">{post.isAnonymous? '某同学' : post.userProfile.nickname}</span>
-            </div>
-            <h1 className="post-title">{post.title}</h1>
-        </div>
-    );
-};
-
-const PostContent = ({ content }) => {
-    return (
-        <div className="post-content" dangerouslySetInnerHTML={{ __html: content }} />
-    );
-};
-
-const PostActions = ({ post, onLike, onFavorite }) => {
-    return (
-        <div className="post-actions">
-            <div className="action-item" onClick={onLike}>
-                <i className={post.liked? 'liked' : 'unliked'} />
-                <span>{post.likeCount || 0}</span>
-            </div>
-            <div className="action-item" onClick={onFavorite}>
-                <i className={post.favorited? 'favorited' : 'unfavorited'} />
-                <span>{post.favorites || 0}</span>
-            </div>
-        </div>
-    );
-};
-
-const CommentInput = ({ onSubmitComment, isFlag }) => {
-    const [content, setContent] = useState('');
-
-    useEffect(() => {
-        if (isFlag) {
-            setContent('');
-        }
-    }, [isFlag]);
-
-    const handleSubmit = () => {
-        if (content) {
-            onSubmitComment(content);
-        }
-    };
-
-    return (
-        <div className="comment-input">
-            <textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="写下你的评论..."
-                className="comment-textarea"
-            />
-            <div className="button-container">
-                <button
-                    type="button"
-                    onClick={handleSubmit}
-                    disabled={!content}
-                    className="submit-button"
-                >
-                    发布评论
-                </button>
-            </div>
-        </div>
-    );
-};
-
-const CommentItem = ({ comment, onLikeComment, onReplyComment }) => {
-    const [showReplyInput, setShowReplyInput] = useState(false);
-    const [replyContent, setReplyContent] = useState('');
-
-    const queryUserInfo = async (id) => {
-        if (!id) {
-            return;
-        }
-        try {
-            const userData = await getUserInfo(id);
-            console.log(userData);
-            // 这里可以添加跳转逻辑等，比如根据用户ID跳转到对应个人信息页面
-        } catch (error) {
-            console.error('获取用户信息失败:', error);
-        }
-    };
-
-    const handleLike = () => {
-        onLikeComment(comment);
-    };
-
-    const handleReply = () => {
-        setShowReplyInput(!showReplyInput);
-    };
-
-    const handleSubmitReply = () => {
-        if (replyContent) {
-            onReplyComment(comment, replyContent);
-            setReplyContent('');
-            setShowReplyInput(false);
-        }
-    };
-
-    return (
-        <div className="comment-item">
-            <img className="avatar" src={comment.author.avatar_url} alt="头像" onClick={() => queryUserInfo(comment.author.userId)} />
-            <div className="comment-content">
-                <div className="comment-author">{comment.author.nickname}</div>
-                <div className="comment-text">{comment.content}</div>
-                <div className="comment-actions">
-                    <div className="action-item" onClick={handleLike}>
-                        <i className={comment.liked? 'liked' : 'unliked'} />
-                        <span>{comment.likeCount || 0}</span>
-                    </div>
-                    <button type="button" onClick={handleReply}>回复</button>
-                </div>
-                {showReplyInput && (
-                    <div className="reply-input">
-                        <textarea
-                            value={replyContent}
-                            onChange={(e) => setReplyContent(e.target.value)}
-                            placeholder="写下你的回复..."
-                            className="reply-textarea"
-                        />
-                        <button
-                            type="button"
-                            onClick={handleSubmitReply}
-                            disabled={!replyContent}
-                            className="submit-button"
-                        >
-                            发布回复
-                        </button>
-                    </div>
-                )}
-                {comment.replies && comment.replies.length > 0 && (
-                    <div className="reply-list">
-                        {comment.replies.map(reply => (
-                            <CommentItem
-                                key={reply.id}
-                                comment={reply}
-                                onLikeComment={onLikeComment}
-                                onReplyComment={onReplyComment}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-const CommentsList = ({ comments, onLikeComment, onReplyComment }) => {
-    return (
-        <div className="comments-list">
-            <h2>评论</h2>
-            {comments.map(comment => (
-                <CommentItem
-                    key={comment.id}
-                    comment={comment}
-                    onLikeComment={onLikeComment}
-                    onReplyComment={onReplyComment}
-                />
-            ))}
-        </div>
-    );
-};
+import { useUser } from '../../../context/UserContext'; // 注意路径
 
 const PostDetailPage = () => {
-    const [post, setPost] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [errorMsg, setErrorMsg] = useState('');
-    const [comments, setComments] = useState([]);
-    const [isFlag, setIsFlag] = useState(false);
+  const { postId } = useParams(); // 获取帖子ID
+  const [postDetail, setPostDetail] = useState(null);
+  const [comments, setComments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMsg, setErrorMsg] = useState('');
+  const [newComment, setNewComment] = useState(''); // 新评论内容
+  const [isAnonymous, setIsAnonymous] = useState(false); // 是否匿名
+  const [isLiked, setIsLiked] = useState(false); // 是否已点赞
+  const [isCollected, setIsCollected] = useState(false); // 是否已收藏
+  const [replyToCommentId, setReplyToCommentId] = useState(null); // 回复的评论ID
 
-    const { params } = useRoute('/forum/post/:postId');
-    const postId = params?.postId;
+  // 获取当前用户ID（假设从上下文中获取）
+  const { user } = useUser(); // 你需要从用户上下文获取用户 ID
 
-    useEffect(() => {
-        const fetchPostDetail = async () => {
-            setLoading(true);
-            setErrorMsg('');
-            try {
-                const postDetail = await getPostDetail(postId);
-                const postComments = await getPostComments(postId);
-                setPost(postDetail);
-                setComments(postComments);
-            } catch (error) {
-                console.error('获取帖子详情失败:', error);
-                setErrorMsg('加载失败，请稍后重试');
-            } finally {
-                setLoading(false);
-            }
-        };
+  useEffect(() => {
+    const fetchPostDetail = async () => {
+      setLoading(true);
+      setErrorMsg('');
+      try {
+        // 获取帖子详情
+        const postData = await getPostDetail(postId);
+        setPostDetail(postData);
 
-        if (postId) {
-            fetchPostDetail();
-        }
-    }, [postId]);
+        // 获取帖子评论
+        const commentsData = await getPostComments(postId);
+        setComments(commentsData);
 
-    const handleLike = async () => {
-        if (!post.liked) {
-            try {
-                await likePost(postId);
-                const newPost = { ...post, liked: true, likeCount: post.likeCount + 1 };
-                setPost(newPost);
-            } catch (err) {
-                console.error('点赞失败:', err);
-            }
+        // 设置是否已经点赞
+        if (postData.likedByUser) {
+          setIsLiked(true);
         } else {
-            try {
-                await unlikePost(postId);
-                const newPost = { ...post, liked: false, likeCount: post.likeCount - 1 };
-                setPost(newPost);
-            } catch (err) {
-                console.error('取消点赞失败:', err);
-            }
+          setIsLiked(false);
         }
-    };
 
-    const handleFavorite = () => {
-        const newPost = { ...post, favorited: !post.favorited, favorites: post.favorited? post.favorites - 1 : post.favorites + 1 };
-        setPost(newPost);
-        if (newPost.favorited) {
-            axios.post(`${API_BASE}/echo/forum/posts/${postId}/favorite`).catch(err => {
-                console.error('收藏失败:', err);
-            });
+        // 设置是否已经收藏
+        if (postData.collectedByUser) {
+          setIsCollected(true);
         } else {
-            axios.delete(`${API_BASE}/echo/forum/posts/${postId}/unfavorite`).catch(err => {
-                console.error('取消收藏失败:', err);
-            });
+          setIsCollected(false);
         }
+      } catch (err) {
+        console.error('加载失败:', err);
+        setErrorMsg('加载失败，请稍后重试');
+      } finally {
+        setLoading(false);
+      }
     };
 
-    const likeCommentAction = async (comment) => {
-        if (!comment.liked) {
-            try {
-                await likeComment(comment.id);
-                const newComment = { ...comment, liked: true, likeCount: comment.likeCount + 1 };
-                setComments(comments.map(c => c.id === comment.id? newComment : c));
-            } catch (err) {
-                console.error('点赞评论失败:', err);
-            }
-        } else {
-            try {
-                await unlikeComment(comment.id);
-                const newComment = { ...comment, liked: false, likeCount: comment.likeCount - 1 };
-                setComments(comments.map(c => c.id === comment.id? newComment : c));
-            } catch (err) {
-                console.error('取消点赞评论失败:', err);
-            }
-        }
-    };
+    fetchPostDetail();
+  }, [postId]);
 
-    const replyCommentAction = async (comment, replyContent) => {
-        try {
-            await replyToComment(comment.id, replyContent);
-            setIsFlag(true);
-            const commentResponse = await getPostComments(postId);
-            setComments(commentResponse.data);
-        } catch (error) {
-            console.error('回复评论失败:', error);
-        }
-    };
+  // 点赞功能
+  const toggleLike = async () => {
+    if (!user) {
+      alert('请先登录');
+      return;
+    }
 
-    const addCommentAction = async (content) => {
-        try {
-            await addCommentToPost(postId, content);
-            setIsFlag(true);
-            const commentResponse = await getPostComments(postId);
-            setComments(commentResponse.data);
-        } catch (error) {
-            console.error('添加评论失败:', error);
-        }
-    };
+    try {
+      if (isLiked) {
+        // 取消点赞
+        await unlikePost(postId, user.id);
+        setIsLiked(false);
+        setPostDetail((prev) => ({
+          ...prev,
+          postLikeNum: prev.postLikeNum - 1,
+        }));
+      } else {
+        // 点赞
+        await likePost(postId, user.id);
+        setIsLiked(true);
+        setPostDetail((prev) => ({
+          ...prev,
+          postLikeNum: prev.postLikeNum + 1,
+        }));
+      }
+    } catch (err) {
+      console.error('点赞失败:', err);
+      alert('点赞失败，请稍后再试');
+    }
+  };
 
-    if (loading) return <p>加载中...</p>;
-    if (errorMsg) return <p className="error-text">{errorMsg}</p>;
-    if (!post) return <p>没有找到该帖子。</p>;
+  // 收藏功能
+  const toggleCollect = async () => {
+    if (!user) {
+      alert('请先登录');
+      return;
+    }
 
-    return (
-        <div className="post-detail-page">
-            <PostHeader post={post} />
-            <PostContent content={post.content} />
-            <PostActions post={post} onLike={handleLike} onFavorite={handleFavorite} />
-            <CommentInput onSubmitComment={addCommentAction} isFlag={isFlag} />
-            <CommentsList comments={comments} onLikeComment={likeCommentAction} onReplyComment={replyCommentAction} />
+    try {
+      const action = isCollected ? 'cancel' : 'collect';
+      // 调用收藏 API
+      await collectPost(postId, user.id, action);
+      setIsCollected(!isCollected);
+      setPostDetail((prev) => ({
+        ...prev,
+        postCollectNum: isCollected ? prev.postCollectNum - 1 : prev.postCollectNum + 1,
+      }));
+    } catch (err) {
+      console.error('收藏失败:', err);
+      alert('收藏失败，请稍后再试');
+    }
+  };
+
+  // 添加评论
+  const handleAddComment = async () => {
+    if (!newComment.trim()) {
+      alert('评论内容不能为空');
+      return;
+    }
+
+    try {
+      // 调用 API 添加评论，若为回复评论则传递父评论ID（com_comment_id）
+      const commentData = await addCommentToPost(postId, user.id, newComment, isAnonymous, replyToCommentId);
+      // 更新评论列表
+      setComments((prev) => [
+        ...prev,
+        {
+          commentId: commentData.commentId,
+          post_id: postId,
+          userId: user.id,
+          content: newComment,
+          isAnonymous,
+          commentTime: new Date().toISOString(),
+          comCommentId: replyToCommentId, // 回复评论时传递父评论ID
+        },
+      ]);
+      // 清空评论框和回复状态
+      setNewComment('');
+      setReplyToCommentId(null);
+    } catch (err) {
+      console.error('评论添加失败:', err);
+      alert('评论失败，请稍后再试');
+    }
+  };
+
+  // 回复评论
+  const handleReply = (commentId) => {
+    setReplyToCommentId(commentId); // 设置父评论ID为当前评论的ID
+  };
+
+  return (
+    <div className="post-detail-page">
+      {loading ? (
+        <p>加载中...</p>
+      ) : errorMsg ? (
+        <p className="error-text">{errorMsg}</p>
+      ) : postDetail ? (
+        <div className="post-detail">
+          <h1>{postDetail.title}</h1>
+          <div className="post-meta">
+            <span className="post-time">
+              {new Date(postDetail.postTime).toLocaleString()}
+            </span>
+            <span className="post-user">用户 ID: {postDetail.user_id}</span>
+          </div>
+          <div className="post-content">
+            <p>{postDetail.postContent}</p>
+            {postDetail.imgUrl && (
+              <img
+                className="post-image"
+                src={postDetail.imgUrl}
+                alt="帖子图片"
+              />
+            )}
+          </div>
+
+          {/* 点赞和收藏 */}
+          <div className="post-actions">
+            <button
+              className="icon-btn"
+              onClick={toggleLike} // 点赞操作
+            >
+              <GoodTwo
+                theme="outline"
+                size="24"
+                fill={isLiked ? '#f00' : '#ccc'} // 如果已点赞，显示红色
+              />
+              <span>{postDetail.postLikeNum}</span>
+            </button>
+            <button
+              className="icon-btn"
+              onClick={toggleCollect} // 收藏操作
+            >
+              <Star
+                theme="outline"
+                size="24"
+                fill={isCollected ? '#ffd700' : '#ccc'} // 如果已收藏，显示金色
+              />
+              <span>{postDetail.postCollectNum}</span>
+            </button>
+          </div>
+
+          {/* 评论部分 */}
+          <div className="comments-section">
+            <h3>评论区</h3>
+            {comments.length ? (
+              comments.map((comment) => (
+                <div key={comment.commentId} className="comment">
+                  <p>{comment.content}</p>
+                  <div className="comment-meta">
+                    <span className="comment-time">
+                      {new Date(comment.commentTime).toLocaleString()}
+                    </span>
+                    <span className="comment-user">用户 ID: {comment.userId}</span>
+                  </div>
+                  {/* 回复按钮 */}
+                  <button onClick={() => handleReply(comment.commentId)}>回复</button>
+
+                  {/* 回复框，只有在当前评论是正在回复的评论时显示 */}
+                  {replyToCommentId === comment.commentId && (
+                    <div className="reply-form">
+                      <textarea
+                        placeholder="输入你的回复..."
+                        value={newComment}
+                        onChange={(e) => setNewComment(e.target.value)}
+                      />
+                      <div className="comment-options">
+                        <label>
+                          <input
+                            type="checkbox"
+                            checked={isAnonymous}
+                            onChange={() => setIsAnonymous(!isAnonymous)}
+                          />
+                          匿名评论
+                        </label>
+                        <button onClick={handleAddComment}>发布回复</button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))
+            ) : (
+              <p>暂无评论</p>
+            )}
+
+            {/* 添加评论表单 */}
+            <div className="add-comment-form">
+              <textarea
+                placeholder="输入你的评论..."
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+              />
+              <div className="comment-options">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={isAnonymous}
+                    onChange={() => setIsAnonymous(!isAnonymous)}
+                  />
+                  匿名评论
+                </label>
+                <button onClick={handleAddComment}>发布评论</button>
+              </div>
+            </div>
+          </div>
         </div>
-    );
+      ) : (
+        <p>帖子不存在</p>
+      )}
+    </div>
+  );
 };
 
-export default PostDetailPage;
\ No newline at end of file
+export default PostDetailPage;