refactor(frontend): 完善SSR鉴权与点赞组件样式优化

1. 修正类型文件导入路径到.dev目录
2. 为API请求添加cookie传递支持,实现SSR用户登录态识别
3. 重构LikeButton组件,新增compact变体适配列表页展示
4. 调整首页和板块页的帖子列表布局,添加点赞按钮
5. 拆分帖子列表点击区域,优化交互体验
This commit is contained in:
2026-09-12 01:35:37 +08:00
parent 0c2b0d2d6a
commit a8f6ce4e4f
6 changed files with 76 additions and 40 deletions

View File

@@ -1,7 +1,9 @@
import Link from "next/link";
import { Metadata } from "next";
import { cookies } from "next/headers";
import { fetchPosts, fetchBoards } from "@/lib/api";
import Pagination from "@/components/Pagination";
import LikeButton from "@/components/LikeButton";
interface PageProps {
params: Promise<{ id: string }>;
@@ -22,8 +24,9 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
const { id } = await params;
const { page: pageStr } = await searchParams;
const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
const cookie = (await cookies()).toString();
const [postsData, boardsData] = await Promise.all([
fetchPosts(page, 20, Number(id)),
fetchPosts(page, 20, Number(id), "latest", "", cookie),
fetchBoards(),
]);
const board = boardsData.boards.find((b) => b.id === Number(id));
@@ -41,10 +44,9 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
<div className="space-y-3">
{postsData.posts.map((post) => (
<Link
<div
key={post.id}
href={`/post/${post.id}`}
className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
className="p-4 rounded-lg border hover:shadow-md transition-shadow"
style={{ borderColor: "var(--border)", background: "var(--bg)" }}
>
<div className="flex items-center gap-2 mb-1">
@@ -55,16 +57,21 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
<span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
)}
</div>
<h2 className="font-semibold mb-1 hover:underline">{post.title}</h2>
<div className="flex items-center gap-4 text-sm" 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).toLocaleDateString("zh-CN")}</span>
<span>💬 {post.comment_count}</span>
<span>👁 {post.view_count}</span>
<Link href={`/post/${post.id}`}>
<h2 className="font-semibold mb-1 hover:underline">{post.title}</h2>
</Link>
<div className="flex items-center justify-between gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
<div className="flex items-center gap-4">
<Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
{post.user.nickname}
</Link>
<span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
<span>💬 {post.comment_count}</span>
<span>👁 {post.view_count}</span>
</div>
<LikeButton postId={String(post.id)} liked={post.liked} likeCount={post.like_count} variant="compact" />
</div>
</Link>
</div>
))}
{postsData.posts.length === 0 && (
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>