polish(feed): 列表行整区进帖,板块胶囊不可点
修复 meta 抬层挡住 stretch,并统一作者与回复者 hover 变色。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user