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

1. 修正类型文件导入路径到.dev目录 2. 为API请求添加cookie传递支持，实现SSR用户登录态识别 3. 重构LikeButton组件，新增compact变体适配列表页展示 4. 调整首页和板块页的帖子列表布局，添加点赞按钮 5. 拆分帖子列表点击区域，优化交互体验
2026-09-12 01:35:37 +08:00
parent 0c2b0d2d6a
commit a8f6ce4e4f
6 changed files with 76 additions and 40 deletions
--- a/frontend/app/board/[id]/page.tsx
+++ b/frontend/app/board/[id]/page.tsx
@@ -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)" }}>
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -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";

 export const metadata: Metadata = {
  title: "姜十三论坛 - 技术分享与讨论社区",
@@ -21,8 +23,9 @@ export default async function HomePage({ searchParams }: HomePageProps) {
  const { q, page: pageStr } = await searchParams;
  const keyword = q?.trim() || "";
  const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
+  const cookie = (await cookies()).toString();
  const [postsData, boardsData] = await Promise.all([
-    fetchPosts(page, 20, undefined, "latest", keyword),
+    fetchPosts(page, 20, undefined, "latest", keyword, cookie),
    fetchBoards(),
  ]);

@@ -35,10 +38,9 @@ export default async function HomePage({ searchParams }: HomePageProps) {
        </h1>
        <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-2">
@@ -55,18 +57,23 @@ export default async function HomePage({ searchParams }: HomePageProps) {
                  <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" style={{ color: "var(--text)" }}>
-                {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" style={{ color: "var(--text)" }}>
+                  {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)" }}>
--- a/frontend/app/post/[id]/page.tsx
+++ b/frontend/app/post/[id]/page.tsx
@@ -1,5 +1,6 @@
 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";
@@ -30,7 +31,8 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>

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

  const jsonLd = {