freefire
1eaf3903d4
- 新增事件总线式toast通知系统 - 新增头像、阅读进度、404/500错误页等基础组件 - 重构页脚、布局、分页、点赞按钮等现有组件 - 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能 - 优化登录注册页面样式与交互 - 修复路径类型文件引用，更新站点元信息与字体配置
96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
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>
|
|
);
|
|
}
|