front/src/PostDetailPage.js

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>
    );
}