refactor(frontend): remove featured post component and simplify home page logic
移除了不再使用的FeaturePost组件,同时调整首页帖子展示逻辑:不再单独拆分今日精选帖,将所有非置顶帖子统一纳入普通列表展示,更新了置顶区的注释说明。
This commit is contained in:
@@ -5,7 +5,6 @@ import { PenSquare, SearchX, MessagesSquare, Check, ArrowRight } from "lucide-re
|
|||||||
import { fetchPosts, fetchBoards } from "@/lib/api";
|
import { fetchPosts, fetchBoards } from "@/lib/api";
|
||||||
import Pagination from "@/components/Pagination";
|
import Pagination from "@/components/Pagination";
|
||||||
import PostRow from "@/components/PostRow";
|
import PostRow from "@/components/PostRow";
|
||||||
import FeaturePost from "@/components/FeaturePost";
|
|
||||||
import PinnedPosts from "@/components/PinnedPosts";
|
import PinnedPosts from "@/components/PinnedPosts";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
@@ -27,12 +26,10 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
|||||||
fetchBoards(),
|
fetchBoards(),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 第一页且非搜索时拆分为三段:管理员置顶 → 今日精选(首条非置顶)→ 普通列表
|
// 第一页且非搜索时:管理员置顶独立成区,其余进入普通列表
|
||||||
const split = page === 1 && !keyword;
|
const split = page === 1 && !keyword;
|
||||||
const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
|
const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
|
||||||
const normal = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
|
const rows = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
|
||||||
const feature = split && normal.length > 0 ? normal[0] : null;
|
|
||||||
const rows = feature ? normal.slice(1) : normal;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@@ -63,11 +60,6 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
|||||||
{/* 主列 */}
|
{/* 主列 */}
|
||||||
<div>
|
<div>
|
||||||
<PinnedPosts posts={pinned} />
|
<PinnedPosts posts={pinned} />
|
||||||
{feature && (
|
|
||||||
<div className="mb-6">
|
|
||||||
<FeaturePost post={feature} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="panel overflow-hidden">
|
<div className="panel overflow-hidden">
|
||||||
{rows.length > 0 ? (
|
{rows.length > 0 ? (
|
||||||
|
|||||||
@@ -1,95 +0,0 @@
|
|||||||
import Link from "next/link";
|
|
||||||
import type { PostListItem } from "@/lib/api";
|
|
||||||
import LikeButton from "./LikeButton";
|
|
||||||
import Avatar from "./Avatar";
|
|
||||||
import { IconComment, IconEye } from "./Icons";
|
|
||||||
|
|
||||||
function formatTime(dateStr: string) {
|
|
||||||
return new Date(dateStr).toLocaleDateString("zh-CN");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 首页精选主卡:取自非置顶帖中的最新一帖(置顶帖由 PinnedPosts 承载)
|
|
||||||
*/
|
|
||||||
export default function FeaturePost({ post }: { post: PostListItem }) {
|
|
||||||
return (
|
|
||||||
<article className="panel hover-lift group relative overflow-hidden">
|
|
||||||
{/* 柔和装饰块,非发光 */}
|
|
||||||
<span
|
|
||||||
aria-hidden
|
|
||||||
className="absolute -top-20 -right-16 w-56 h-56 rounded-full"
|
|
||||||
style={{ background: "var(--accent-soft)" }}
|
|
||||||
/>
|
|
||||||
<div className="relative p-6 sm:p-8">
|
|
||||||
<div className="flex items-center gap-2 mb-4 flex-wrap">
|
|
||||||
<span
|
|
||||||
className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
|
|
||||||
style={{ color: "var(--accent)" }}
|
|
||||||
>
|
|
||||||
<span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--accent)" }} />
|
|
||||||
今日精选
|
|
||||||
</span>
|
|
||||||
{post.recommended && <span className="badge-rec">推荐</span>}
|
|
||||||
<Link href={`/board/${post.board.id}`} className="chip">
|
|
||||||
{post.board.name}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Link href={`/post/${post.id}`}>
|
|
||||||
<h2
|
|
||||||
className="font-extrabold text-2xl sm:text-[28px] leading-tight tracking-tight transition-colors group-hover:text-[var(--accent)]"
|
|
||||||
style={{ color: "var(--ink)" }}
|
|
||||||
>
|
|
||||||
{post.title}
|
|
||||||
</h2>
|
|
||||||
</Link>
|
|
||||||
{post.tags && (
|
|
||||||
<div className="flex flex-wrap gap-2 mt-4">
|
|
||||||
{[
|
|
||||||
...new Set(
|
|
||||||
post.tags
|
|
||||||
.split(",")
|
|
||||||
.map((t) => t.trim())
|
|
||||||
.filter(Boolean)
|
|
||||||
),
|
|
||||||
]
|
|
||||||
.slice(0, 4)
|
|
||||||
.map((t, i) => (
|
|
||||||
<span key={`${t}-${i}`} className="chip">
|
|
||||||
# {t}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between gap-4 mt-6 pt-5" style={{ borderTop: "1px solid var(--line)" }}>
|
|
||||||
<div className="flex items-center gap-4 min-w-0">
|
|
||||||
<Link href={`/u/${post.user.id}`} className="flex items-center gap-2.5 min-w-0 group/au">
|
|
||||||
<Avatar name={post.user.nickname || post.user.username} size={38} />
|
|
||||||
<span className="min-w-0">
|
|
||||||
<span
|
|
||||||
className="block text-sm font-semibold truncate group-hover/au:text-[var(--accent)] transition-colors"
|
|
||||||
style={{ color: "var(--ink)" }}
|
|
||||||
>
|
|
||||||
{post.user.nickname}
|
|
||||||
</span>
|
|
||||||
<span className="meta block text-[11.5px]">{formatTime(post.created_at)}</span>
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
<span className="hidden sm:inline-flex items-center gap-1.5 meta">
|
|
||||||
<IconComment size={14} /> {post.comment_count}
|
|
||||||
</span>
|
|
||||||
<span className="hidden sm:inline-flex items-center gap-1.5 meta">
|
|
||||||
<IconEye size={14} /> {post.view_count}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<LikeButton
|
|
||||||
postId={String(post.id)}
|
|
||||||
liked={post.liked}
|
|
||||||
likeCount={post.like_count}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -12,7 +12,7 @@ function formatTime(dateStr: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 管理员置顶区:独立于"今日精选"和普通列表。
|
* 管理员置顶区:独立于普通帖子列表。
|
||||||
* 陶土色语义(与 badge-pin 一致),紧凑排列,一眼识别为公告性质内容。
|
* 陶土色语义(与 badge-pin 一致),紧凑排列,一眼识别为公告性质内容。
|
||||||
*/
|
*/
|
||||||
export default function PinnedPosts({
|
export default function PinnedPosts({
|
||||||
|
|||||||
Reference in New Issue
Block a user