jiang13-bbs/frontend/app/post/[id]/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { cookies } from "next/headers";
import ReactMarkdown from "react-markdown";
import { fetchPostDetail, fetchComments } from "@/lib/api";
import { authCookieHeader } from "@/lib/cookies";
import CommentSection from "@/components/CommentSection";
import PostActions from "@/components/PostActions";
import LikeButton from "@/components/LikeButton";
import ReadingProgress from "@/components/ReadingProgress";
import Avatar from "@/components/Avatar";
import { IconComment, IconEye } from "@/components/Icons";
import { ChevronRight } from "lucide-react";

interface PageProps {
  params: Promise<{ id: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { id } = await params;
  try {
    const { post } = await fetchPostDetail(id);
    return {
      title: post.title,
      description: post.content.slice(0, 160),
      openGraph: {
        title: post.title,
        description: post.content.slice(0, 160),
        type: "article",
      },
    };
  } catch {
    return { title: "帖子不存在" };
  }
}

export default async function PostDetailPage({ params }: PageProps) {
  const { id } = await params;
  const cookie = authCookieHeader(await cookies());
  const { post } = await fetchPostDetail(id, cookie);
  const { comments } = await fetchComments(id);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "DiscussionForumPosting",
    headline: post.title,
    articleBody: post.content,
    datePublished: post.created_at,
    dateModified: post.updated_at,
    author: { "@type": "Person", name: post.user.nickname },
    commentCount: post.comment_count,
    interactionStatistic: {
      "@type": "InteractionCounter",
      interactionType: { "@type": "ReadAction" },
      userInteractionCount: post.view_count,
    },
  };

  return (
    <article className="max-w-3xl mx-auto">
      <ReadingProgress />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

      <nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
        <ChevronRight size={13} />
        <Link href={`/board/${post.board.id}`} className="hover:text-[var(--accent)] transition-colors">
          {post.board.name}
        </Link>
      </nav>

      <div className="panel p-6 sm:p-9">
        <header className="mb-7">
          <div className="flex items-center gap-2 mb-4 flex-wrap">
            {post.pinned > 0 && <span className="badge-pin">置顶</span>}
            {post.recommended && <span className="badge-rec">推荐</span>}
            <Link href={`/board/${post.board.id}`} className="chip">
              {post.board.name}
            </Link>
          </div>
          <h1 className="text-[26px] sm:text-[34px] font-extrabold leading-tight tracking-tight mb-6" style={{ color: "var(--ink)" }}>
            {post.title}
          </h1>

          <div
            className="flex items-center justify-between gap-4 flex-wrap pb-5"
            style={{ borderBottom: "1px solid var(--line)" }}
          >
            <div className="flex items-center gap-4 flex-wrap">
              <Link
                href={`/u/${post.user.id}`}
                className="flex items-center gap-2.5 group"
              >
                <Avatar name={post.user.nickname || post.user.username} size={40} />
                <span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors" style={{ color: "var(--ink)" }}>
                  {post.user.nickname}
                </span>
              </Link>
              <span className="meta">{new Date(post.created_at).toLocaleString("zh-CN")}</span>
              <span className="inline-flex items-center gap-1.5 meta">
                <IconEye size={14} /> {post.view_count}
              </span>
              <span className="inline-flex items-center gap-1.5 meta">
                <IconComment size={14} /> {post.comment_count}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
              <PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
            </div>
          </div>
        </header>

        {post.tags && (
          <div className="flex flex-wrap gap-2 mb-7">
            {[
              ...new Set(
                post.tags
                  .split(",")
                  .map((t) => t.trim())
                  .filter(Boolean)
              ),
            ].map((t, i) => (
              <span key={`${t}-${i}`} className="chip">
                # {t}
              </span>
            ))}
          </div>
        )}

        <div className="prose-content">
          <ReactMarkdown>{post.content}</ReactMarkdown>
        </div>
      </div>

      <CommentSection postId={id} comments={comments} />
    </article>
  );
}