freefire
1eaf3903d4
- 新增事件总线式toast通知系统 - 新增头像、阅读进度、404/500错误页等基础组件 - 重构页脚、布局、分页、点赞按钮等现有组件 - 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能 - 优化登录注册页面样式与交互 - 修复路径类型文件引用，更新站点元信息与字体配置
92 lines
3.0 KiB
TypeScript
92 lines
3.0 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) {
|
|
const d = new Date(dateStr);
|
|
return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
|
|
d.getDate()
|
|
).padStart(2, "0")}`;
|
|
}
|
|
|
|
/**
|
|
* 帖子列表行：头像 + 标题 + 作者元信息 + 统计 + 点赞
|
|
* 用于首页/板块页，以细线串联，悬浮浅色反馈
|
|
*/
|
|
export default function PostRow({
|
|
post,
|
|
boardHref,
|
|
}: {
|
|
post: PostListItem;
|
|
index?: number;
|
|
boardHref?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-4 border-t transition-colors hover:bg-[var(--panel-2)]"
|
|
style={{ borderColor: "var(--line)" }}
|
|
>
|
|
<Link href={`/u/${post.user.id}`} className="shrink-0" aria-label={post.user.nickname}>
|
|
<Avatar name={post.user.nickname || post.user.username} size={42} />
|
|
</Link>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
{(post.pinned > 0 || post.recommended) && (
|
|
<div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
|
|
{post.pinned > 0 && <span className="badge-pin">置顶</span>}
|
|
{post.recommended && <span className="badge-rec">推荐</span>}
|
|
</div>
|
|
)}
|
|
<Link href={`/post/${post.id}`}>
|
|
<h3
|
|
className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
|
|
style={{ color: "var(--ink)" }}
|
|
>
|
|
{post.title}
|
|
</h3>
|
|
</Link>
|
|
<div className="meta flex items-center gap-2.5 mt-1.5 flex-wrap">
|
|
<Link
|
|
href={`/u/${post.user.id}`}
|
|
className="hover:text-[var(--accent)] transition-colors"
|
|
>
|
|
{post.user.nickname}
|
|
</Link>
|
|
{boardHref && (
|
|
<>
|
|
<span aria-hidden>·</span>
|
|
<Link
|
|
href={`/board/${post.board.id}`}
|
|
className="hover:text-[var(--accent)] transition-colors"
|
|
>
|
|
{post.board.name}
|
|
</Link>
|
|
</>
|
|
)}
|
|
<span aria-hidden>·</span>
|
|
<span>{formatTime(post.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2.5 sm:gap-3.5 shrink-0">
|
|
<span className="hidden sm:inline-flex items-center gap-1.5 meta" aria-label={`${post.comment_count} 条评论`}>
|
|
<IconComment size={15} />
|
|
{post.comment_count}
|
|
</span>
|
|
<span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
|
|
<IconEye size={15} />
|
|
{post.view_count}
|
|
</span>
|
|
<LikeButton
|
|
postId={String(post.id)}
|
|
liked={post.liked}
|
|
likeCount={post.like_count}
|
|
variant="compact"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|