新增论坛页面
Change-Id: I317789b03458b6e8109dd7aa3ac8c1eadcb38e62
diff --git a/front/src/PostDetailPage.js b/front/src/PostDetailPage.js
new file mode 100644
index 0000000..85b7707
--- /dev/null
+++ b/front/src/PostDetailPage.js
@@ -0,0 +1,114 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+// 示例数据
+const post = {
+ post_id: "1",
+ title: "欢迎来到G10论坛",
+ content: "这里是G10 PT站的官方论坛,欢迎大家发帖交流!",
+ author_id: "u1",
+ author_name: "Alice",
+ created_at: "2024-06-01 12:00",
+ reply_count: 3,
+ view_count: 120,
+};
+
+const replies = [
+ {
+ reply_id: "r1",
+ post_id: "1",
+ content: "支持一下！",
+ author_id: "u2",
+ author_name: "Bob",
+ created_at: "2024-06-01 13:00",
+ },
+ {
+ reply_id: "r2",
+ post_id: "1",
+ content: "论坛终于上线了！",
+ author_id: "u3",
+ author_name: "Carol",
+ created_at: "2024-06-01 14:20",
+ },
+];
+
+export default function PostDetailPage() {
+ const { postId } = useParams();
+ // 这里只展示post和replies的静态内容
+ return (
+ <div style={{ maxWidth: 700, margin: "40px auto" }}>
+ {/* 原帖 */}
+ <div style={{
+ background: "#fff",
+ borderRadius: 12,
+ boxShadow: "0 2px 8px #e0e7ff",
+ padding: 24,
+ marginBottom: 32,
+ }}>
+ <div style={{ fontSize: 15, color: "#1976d2", marginBottom: 6 }}>
+ {post.author_name} · {post.created_at}
+ </div>
+ <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8, color: "#222" }}>
+ {post.title}
+ </div>
+ <div style={{ fontSize: 16, color: "#444", marginBottom: 18 }}>
+ {post.content}
+ </div>
+ <div style={{ display: "flex", justifyContent: "flex-start", gap: 32, fontSize: 14, color: "#888" }}>
+ <span>回复数: {post.reply_count}</span>
+ <span>观看数: {post.view_count}</span>
+ </div>
+ </div>
+ {/* 评论区 */}
+ <div>
+ {replies.map(reply => (
+ <div key={reply.reply_id} style={{
+ display: "flex",
+ alignItems: "center",
+ background: "#f8faff",
+ borderRadius: 8,
+ padding: "12px 18px",
+ marginBottom: 16,
+ fontSize: 15,
+ }}>
+ <span style={{ color: "#1976d2", fontWeight: 500, minWidth: 80 }}>{reply.author_name}</span>
+ <span style={{ flex: 1, marginLeft: 18 }}>{reply.content}</span>
+ <span style={{ color: "#888", fontSize: 13, marginLeft: 18 }}>{reply.created_at}</span>
+ </div>
+ ))}
+ </div>
+ {/* 回复框 */}
+ <div style={{
+ marginTop: 32,
+ background: "#fff",
+ borderRadius: 8,
+ boxShadow: "0 2px 8px #e0e7ff",
+ padding: 18,
+ display: "flex",
+ gap: 12,
+ alignItems: "center"
+ }}>
+ <input
+ type="text"
+ placeholder="写下你的回复..."
+ style={{
+ flex: 1,
+ border: "1px solid #bfcfff",
+ borderRadius: 6,
+ padding: "8px 12px",
+ fontSize: 15,
+ }}
+ />
+ <button style={{
+ background: "#1976d2",
+ color: "#fff",
+ border: "none",
+ borderRadius: 6,
+ padding: "8px 24px",
+ fontSize: 15,
+ cursor: "pointer"
+ }}>回复</button>
+ </div>
+ </div>
+ );
+}
\ No newline at end of file