freefire
a8f6ce4e4f
1. 修正类型文件导入路径到.dev目录 2. 为API请求添加cookie传递支持，实现SSR用户登录态识别 3. 重构LikeButton组件，新增compact变体适配列表页展示 4. 调整首页和板块页的帖子列表布局，添加点赞按钮 5. 拆分帖子列表点击区域，优化交互体验
101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
import { 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 CommentSection from "@/components/CommentSection";
|
|
import PostActions from "@/components/PostActions";
|
|
import LikeButton from "@/components/LikeButton";
|
|
|
|
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 = (await cookies()).toString();
|
|
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">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
|
|
<nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
|
|
<Link href="/" className="hover:underline">首页</Link>
|
|
<span className="mx-2">/</span>
|
|
<Link href={`/board/${post.board.id}`} className="hover:underline">{post.board.name}</Link>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2 mb-3">
|
|
{post.pinned > 0 && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
|
|
)}
|
|
{post.recommended && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
|
|
)}
|
|
</div>
|
|
<h1 className="text-3xl font-bold mb-4">{post.title}</h1>
|
|
|
|
<div className="flex items-center justify-between gap-4 mb-6 pb-4 border-b" style={{ borderColor: "var(--border)" }}>
|
|
<div className="flex items-center gap-4" style={{ color: "var(--text-secondary)" }}>
|
|
<Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
|
|
{post.user.nickname}
|
|
</Link>
|
|
<span>{new Date(post.created_at).toLocaleString("zh-CN")}</span>
|
|
<span>👁 {post.view_count}</span>
|
|
<span>💬 {post.comment_count}</span>
|
|
<LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
|
|
</div>
|
|
<PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
|
|
</div>
|
|
|
|
<div className="prose-content mb-8" style={{ color: "var(--text)" }}>
|
|
<ReactMarkdown>{post.content}</ReactMarkdown>
|
|
</div>
|
|
|
|
<CommentSection postId={id} comments={comments} />
|
|
</article>
|
|
);
|
|
}
|