polish(feed): 列表行整区进帖,板块胶囊不可点

修复 meta 抬层挡住 stretch,并统一作者与回复者 hover 变色。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-16 10:55:26 +08:00
parent 8024f54f8c
commit ad5e0f5d9a
3 changed files with 32 additions and 33 deletions

View File

@@ -11,10 +11,13 @@ import { IconComment, IconEye } from "./Icons";
* 帖子列表行(参考社区信息流样式):
* 大头像 + 标题(徽章内联)+ 第二行「板块 · 作者 · 发布时间 ← 最后回复」+
* 右侧评论数等统计垂直居中。用于首页/板块页/搜索结果。
*
* 点击:标题 stretch-link 铺满整行进帖;仅头像/作者/回复者/点赞等加 above-link 抬层。
* 板块胶囊仅展示,不可点,避免误进板块筛选。
*/
export default function PostRow({
post,
boardHref,
showBoard = false,
index = 0,
compact = false,
showViews = true,
@@ -22,7 +25,8 @@ export default function PostRow({
}: {
post: PostListItem;
index?: number;
boardHref?: boolean;
/** 是否展示板块胶囊(不可点击,仅标识) */
showBoard?: boolean;
compact?: boolean;
showViews?: boolean;
showLike?: boolean;
@@ -32,10 +36,11 @@ export default function PostRow({
const pt = normalizePostType(post.post_type);
const statusBadge = pt !== "discussion" ? typeStatusLabel(pt, post.type_status) : "";
const statusClass = statusBadge ? typeStatusClass(pt, post.type_status) : "";
const authorName = post.user.nickname || post.user.username;
return (
<div
className={`group relative flex items-center px-4 sm:px-5 border-t transition-colors hover:bg-[var(--accent-soft)] focus-within:bg-[var(--accent-soft)] j13-fade-up ${
className={`group relative flex items-center px-4 sm:px-5 border-t cursor-pointer transition-colors hover:bg-[var(--accent-soft)] focus-within:bg-[var(--accent-soft)] j13-fade-up ${
compact ? "gap-2.5 sm:gap-3" : "gap-3.5 sm:gap-4"
}`}
style={{
@@ -48,10 +53,10 @@ export default function PostRow({
<Link
href={`/u/${post.user.id}`}
className="shrink-0 above-link"
aria-label={post.user.nickname}
aria-label={authorName}
tabIndex={-1}
>
<Avatar name={post.user.nickname || post.user.username} src={post.user.avatar || undefined} size={compact ? 38 : 46} />
<Avatar name={authorName} src={post.user.avatar || undefined} size={compact ? 38 : 46} />
</Link>
<div className="flex-1 min-w-0">
@@ -65,10 +70,7 @@ export default function PostRow({
className="stretch-link min-w-0 shrink"
aria-label={post.title}
>
<h3
className="text-[15px] font-normal leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
style={{ color: "var(--ink)" }}
>
<h3 className="text-[15px] font-normal leading-snug truncate text-[var(--ink)] transition-colors group-hover:text-[var(--accent)]">
{post.title}
</h3>
</Link>
@@ -86,21 +88,18 @@ export default function PostRow({
</div>
</div>
<div
className={`meta relative z-[2] flex items-center gap-x-2 gap-y-1 flex-wrap ${
className={`meta flex items-center gap-x-2 gap-y-1 flex-wrap ${
compact ? "mt-1 text-[12.5px]" : "mt-1.5 text-[13px]"
}`}
>
{boardHref && (
<Link href={`/?board=${post.board.id}`} className="j13-board-tag">
{post.board.name}
</Link>
{showBoard && (
<span className="j13-board-tag">{post.board.name}</span>
)}
<Link
href={`/u/${post.user.id}`}
className="hover:text-[var(--accent)] transition-colors"
style={{ color: "var(--ink-2)" }}
className="above-link font-medium hover:text-[var(--accent)] transition-colors"
>
{post.user.nickname}
{authorName}
</Link>
<span aria-hidden>·</span>
<span className="tabular-nums">{formatRelative(post.created_at)}</span>
@@ -109,7 +108,7 @@ export default function PostRow({
<ArrowLeft size={13} className="shrink-0" aria-hidden />
<Link
href={`/u/${lastReply!.user.id}`}
className="font-medium hover:text-[var(--accent)] transition-colors truncate max-w-[8em]"
className="above-link font-medium hover:text-[var(--accent)] transition-colors truncate max-w-[8em]"
>
{lastReply!.user.nickname || lastReply!.user.username}
</Link>
@@ -124,12 +123,12 @@ export default function PostRow({
</div>
</div>
<div className="above-link flex items-center gap-3 sm:gap-4 shrink-0">
<div className="flex items-center gap-3 sm:gap-4 shrink-0">
<Link
href={`/post/${post.id}`}
tabIndex={-1}
aria-label={`${post.comment_count} 条评论`}
className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta tabular-nums text-[13.5px] hover:text-[var(--accent)] transition-colors`}
className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} above-link items-center gap-1.5 meta tabular-nums text-[13.5px] hover:text-[var(--accent)] transition-colors`}
>
<IconComment size={17} />
{post.comment_count}
@@ -144,12 +143,14 @@ export default function PostRow({
</span>
)}
{showLike && (
<LikeButton
postId={String(post.id)}
liked={post.liked}
likeCount={post.like_count}
variant="compact"
/>
<div className="above-link">
<LikeButton
postId={String(post.id)}
liked={post.liked}
likeCount={post.like_count}
variant="compact"
/>
</div>
)}
</div>
</div>