polish(frontend): 侧栏与徽章可读性,智能悬停提示

降权全站字重;优化右栏公告/数据块;类型状态徽章用固定浅色区分;TipHost 仅在文案不一致、非文字或省略时显示。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-16 03:54:14 +08:00
parent b9ba8cb8c9
commit 5507552ca5
28 changed files with 482 additions and 268 deletions

View File

@@ -2,14 +2,14 @@ import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import type { PostListItem } from "@/lib/api";
import { formatRelative } from "@/lib/format";
import { normalizePostType, postTypeLabel, contentAccessLabel, typeStatusLabel } from "@/lib/postMeta";
import { normalizePostType, postTypeLabel, contentAccessLabel, typeStatusLabel, typeStatusClass } from "@/lib/postMeta";
import LikeButton from "./LikeButton";
import Avatar from "./Avatar";
import { IconComment, IconEye } from "./Icons";
/**
* 帖子列表行(参考社区信息流样式):
* 大头像 + 加粗标题(徽章内联)+ 第二行「板块 · 作者 · 发布时间 ← 最后回复」+
* 大头像 + 标题(徽章内联)+ 第二行「板块 · 作者 · 发布时间 ← 最后回复」+
* 右侧评论数等统计垂直居中。用于首页/板块页/搜索结果。
*/
export default function PostRow({
@@ -31,6 +31,7 @@ export default function PostRow({
const replied = lastReply && new Date(lastReply.created_at).getTime() > new Date(post.created_at).getTime() + 60_000;
const pt = normalizePostType(post.post_type);
const statusBadge = pt !== "discussion" ? typeStatusLabel(pt, post.type_status) : "";
const statusClass = statusBadge ? typeStatusClass(pt, post.type_status) : "";
return (
<div
@@ -65,9 +66,7 @@ export default function PostRow({
aria-label={post.title}
>
<h3
className={`font-bold leading-snug truncate transition-colors group-hover:text-[var(--accent)] ${
compact ? "text-[15px]" : "text-[16px] sm:text-[17px]"
}`}
className="text-[15px] font-normal leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
style={{ color: "var(--ink)" }}
>
{post.title}
@@ -78,8 +77,8 @@ export default function PostRow({
{pt !== "discussion" && pt !== "question" && (
<span className="badge-type shrink-0">{postTypeLabel(post.post_type)}</span>
)}
{statusBadge && (
<span className="badge-access shrink-0">{statusBadge}</span>
{statusBadge && statusClass && (
<span className={`${statusClass} shrink-0`}>{statusBadge}</span>
)}
{post.content_access && post.content_access !== "public" && (
<span className="badge-access shrink-0">{contentAccessLabel(post.content_access)}</span>
@@ -98,7 +97,7 @@ export default function PostRow({
)}
<Link
href={`/u/${post.user.id}`}
className="font-semibold hover:text-[var(--accent)] transition-colors"
className="hover:text-[var(--accent)] transition-colors"
style={{ color: "var(--ink-2)" }}
>
{post.user.nickname}