refactor(frontend): 完善SSR鉴权与点赞组件样式优化
1. 修正类型文件导入路径到.dev目录 2. 为API请求添加cookie传递支持,实现SSR用户登录态识别 3. 重构LikeButton组件,新增compact变体适配列表页展示 4. 调整首页和板块页的帖子列表布局,添加点赞按钮 5. 拆分帖子列表点击区域,优化交互体验
This commit is contained in:
@@ -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)" }}>
|
||||
|
||||
Reference in New Issue
Block a user