论坛帖子列表
Change-Id: I69535db13798ec52939f047604357c5fe363e8cd
论坛帖子列表
Change-Id: Ie02a0bfee862cb46667f2c6cd069dab21e84eb6b
论坛帖子列表
Change-Id: I69535db13798ec52939f047604357c5fe363e8cd
diff --git a/src/pages/Forum/PostDetailPage.jsx b/src/pages/Forum/PostDetailPage.jsx
new file mode 100644
index 0000000..6cdabd6
--- /dev/null
+++ b/src/pages/Forum/PostDetailPage.jsx
@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { useRoute } from 'wouter';
+import axios from 'axios';
+import './PostDetailPage.css';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const PostDetailPage = () => {
+ const [post, setPost] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [errorMsg, setErrorMsg] = useState('');
+
+ // 使用 wouter 的 useRoute 获取 postId 参数
+ const { params } = useRoute('/forum/post/:postId');
+ const postId = params?.postId;
+
+ useEffect(() => {
+ const fetchPostDetail = async () => {
+ setLoading(true);
+ setErrorMsg('');
+ try {
+ const response = await axios.get(`${API_BASE}/echo/forum/posts/${postId}`);
+ setPost(response.data);
+ } catch (error) {
+ console.error('获取帖子详情失败:', error);
+ setErrorMsg('加载失败，请稍后重试');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (postId) {
+ fetchPostDetail();
+ }
+ }, [postId]);
+
+ if (loading) return <p>加载中...</p>;
+ if (errorMsg) return <p className="error-text">{errorMsg}</p>;
+ if (!post) return <p>没有找到该帖子。</p>;
+
+ return (
+ <div className="post-detail-page">
+ <h2>{post.title}</h2>
+ <div className="post-meta">
+ <span>作者：{post.userProfile.nickname}</span>
+ <span>发布时间：{new Date(post.created_at).toLocaleString()}</span>
+ </div>
+ <div className="post-content">
+ <p>{post.content}</p>
+ </div>
+ {post.cover_image_url && (
+ <div className="post-image">
+ <img src={post.cover_image_url} alt="封面" />
+ </div>
+ )}
+ </div>
+ );
+};
+
+export default PostDetailPage;