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

@@ -75,7 +75,7 @@ function QuestionPanel({ postId, state }: { postId: number; state: QuestionState
<section className="j13-interact-card">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<h2 className="font-extrabold text-[15px]" style={{ color: "var(--ink)" }}>
<h2 className="font-semibold text-[15px]" style={{ color: "var(--ink)" }}>
问答 · {state.solved ? "已解决" : "未解决"}
</h2>
<p className="meta text-[12.5px] mt-1">
@@ -173,7 +173,7 @@ function PollPanel({
return (
<section className="j13-interact-card">
<div className="flex items-center justify-between gap-3 mb-3">
<h2 className="font-extrabold text-[15px]" style={{ color: "var(--ink)" }}>
<h2 className="font-semibold text-[15px]" style={{ color: "var(--ink)" }}>
投票{state.multi ? "(多选)" : "(单选)"}
{state.anonymous ? " · 匿名" : " · 实名"}
</h2>
@@ -209,7 +209,7 @@ function PollPanel({
/>
)}
<span className="relative flex items-center justify-between gap-3">
<span className="font-semibold text-[14px]" style={{ color: "var(--ink)" }}>
<span className="text-[14px]" style={{ color: "var(--ink)" }}>
{state.can_vote ? (checked ? "✓ " : "") : ""}
{o.text}
</span>
@@ -226,7 +226,7 @@ function PollPanel({
<li key={v.id}>
<Link
href={`/u/${v.id}`}
className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[12px] font-semibold"
className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[12px]"
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
>
<Avatar name={v.nickname || v.username} src={v.avatar || undefined} size={16} />
@@ -304,7 +304,7 @@ function BountyPanel({ postId, state }: { postId: number; state: BountyState })
<section className="j13-interact-card">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<h2 className="font-extrabold text-[15px]" style={{ color: "var(--ink)" }}>
<h2 className="font-semibold text-[15px]" style={{ color: "var(--ink)" }}>
悬赏 {state.points} 积分
</h2>
<p className="meta text-[12.5px] mt-1">
@@ -357,7 +357,7 @@ function LotteryPanel({
<section className="j13-interact-card">
<div className="flex flex-wrap items-center justify-between gap-3 mb-3">
<div>
<h2 className="font-extrabold text-[15px]" style={{ color: "var(--ink)" }}>
<h2 className="font-semibold text-[15px]" style={{ color: "var(--ink)" }}>
抽奖 · {state.slots} 个名额
</h2>
<p className="meta text-[12.5px] mt-1">
@@ -395,7 +395,7 @@ function LotteryPanel({
</div>
{state.drawn && (
<div>
<p className="font-bold text-[13px] mb-2" style={{ color: "var(--ink)" }}>
<p className="font-semibold text-[13px] mb-2" style={{ color: "var(--ink)" }}>
{state.winners.length > 0 ? "中奖名单" : "无人回帖,开奖结果为空"}
</p>
{state.winners.length > 0 && (
@@ -408,7 +408,7 @@ function LotteryPanel({
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
>
<Avatar name={w.nickname || w.username} src={w.avatar || undefined} size={22} />
<span className="text-[13px] font-bold">{w.nickname || w.username}</span>
<span className="text-[13px]">{w.nickname || w.username}</span>
</Link>
</li>
))}