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

@@ -1986,6 +1986,7 @@ a.j13-mention-token:hover {
gap: 8px;
margin-top: 6px;
}
/* 板块胶囊:仅标识,不可点(列表行点击由 stretch-link 进帖) */
.j13-board-tag {
display: inline-flex;
align-items: center;
@@ -1997,11 +1998,8 @@ a.j13-mention-token:hover {
background: var(--tint);
color: var(--ink-2);
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.j13-board-tag:hover {
background: var(--accent-soft);
color: var(--accent);
pointer-events: none;
user-select: none;
}
/* 站点公告标签:预设色板(浅/暗成对,文字与底色均满足 AA 对比度) */

View File

@@ -124,7 +124,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
<div className="panel overflow-hidden">
{postsData.posts.length > 0 ? (
postsData.posts.map((post, i) => (
<PostRow key={post.id} post={post} boardHref index={i} showViews={false} showLike={false} />
<PostRow key={post.id} post={post} showBoard index={i} showViews={false} showLike={false} />
))
) : (
<EmptyState keyword={keyword} />
@@ -185,7 +185,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
<PostRow
key={post.id}
post={post}
boardHref={!activeBoard}
showBoard={!activeBoard}
compact
index={i}
showViews={false}

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>