freefire
a8f6ce4e4f
1. 修正类型文件导入路径到.dev目录 2. 为API请求添加cookie传递支持，实现SSR用户登录态识别 3. 重构LikeButton组件，新增compact变体适配列表页展示 4. 调整首页和板块页的帖子列表布局，添加点赞按钮 5. 拆分帖子列表点击区域，优化交互体验
113 lines
4.5 KiB
TypeScript
113 lines
4.5 KiB
TypeScript
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: "姜十三论坛 - 技术分享与讨论社区",
|
|
description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
|
|
openGraph: {
|
|
title: "姜十三论坛 - 技术分享与讨论社区",
|
|
description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
|
|
type: "website",
|
|
},
|
|
};
|
|
|
|
interface HomePageProps {
|
|
searchParams: Promise<{ q?: string; page?: string }>;
|
|
}
|
|
|
|
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, cookie),
|
|
fetchBoards(),
|
|
]);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
{/* 主内容：帖子列表 */}
|
|
<div className="md:col-span-3">
|
|
<h1 className="text-2xl font-bold mb-4">
|
|
{keyword ? `搜索结果："${keyword}"` : "最新帖子"}
|
|
</h1>
|
|
<div className="space-y-3">
|
|
{postsData.posts.map((post) => (
|
|
<div
|
|
key={post.id}
|
|
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">
|
|
<span
|
|
className="text-xs px-2 py-0.5 rounded"
|
|
style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
|
|
>
|
|
{post.board.name}
|
|
</span>
|
|
{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>
|
|
<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>
|
|
</div>
|
|
))}
|
|
{postsData.posts.length === 0 && (
|
|
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
|
|
{keyword ? "没有找到相关帖子" : "暂无帖子，来发第一篇吧！"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Pagination
|
|
total={postsData.total}
|
|
page={page}
|
|
size={20}
|
|
basePath="/"
|
|
query={keyword ? { q: keyword } : {}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 侧边栏：板块列表 */}
|
|
<aside className="md:col-span-1">
|
|
<h2 className="text-lg font-bold mb-3">板块</h2>
|
|
<div className="space-y-2">
|
|
{boardsData.boards.map((board) => (
|
|
<Link
|
|
key={board.id}
|
|
href={`/board/${board.id}`}
|
|
className="block p-3 rounded-lg border hover:shadow-sm transition-shadow"
|
|
style={{ borderColor: "var(--border)", background: "var(--bg-secondary)" }}
|
|
>
|
|
<div className="font-medium" style={{ color: "var(--text)" }}>{board.name}</div>
|
|
<div className="text-xs mt-1" style={{ color: "var(--text-secondary)" }}>{board.description}</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|