freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

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

Browse Source 
降权全站字重；优化右栏公告/数据块；类型状态徽章用固定浅色区分；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
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/components/CommentSection.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
@@ -280,7 +280,7 @@ export default function CommentSection({
<button
onClick={() => openReply(c)}
className={`cmt-reply-btn transition-colors ${
replyTarget?.id === c.id ? "!text-[var(--accent)] font-semibold" : ""
replyTarget?.id === c.id ? "!text-[var(--accent)]" : ""
}`}
aria-label={`回复 ${c.user.nickname || c.user.username}`}
data-tip="回复"
@@ -294,7 +294,7 @@ export default function CommentSection({
{canAccept(c) && (
<button
type="button"
className="cmt-reply-btn !text-[var(--accent)] font-semibold"
className="cmt-reply-btn !text-[var(--accent)]"
disabled={acceptingId === c.id}
onClick={() => void handleAccept(c.id, c.user.id)}
data-tip={acceptMode === "question" ? "采纳为最佳答案" : "采纳并发放悬赏积分"}
@@ -308,7 +308,7 @@ export default function CommentSection({
onClick={() => handleDelete(c.id)}
disabled={deletingId === c.id}
className={`meta transition-colors disabled:opacity-50 p-1 ${
confirmingId === c.id ? "!text-[var(--danger)] font-semibold" : "hover:text-[var(--danger)]"
confirmingId === c.id ? "!text-[var(--danger)]" : "hover:text-[var(--danger)]"
}`}
aria-label={confirmingId === c.id ? "再次点击确认删除" : "删除评论"}
data-tip={confirmingId === c.id ? "再点一次确认删除" : "删除"}
@@ -350,7 +350,7 @@ export default function CommentSection({
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2.5 mb-1.5">
<Link href={`/u/${c.user.id}`} className="group">
<span className="font-semibold truncate group-hover:text-[var(--accent)] transition-colors text-sm" style={{ color: "var(--ink)" }}>
<span className="truncate group-hover:text-[var(--accent)] transition-colors text-sm" style={{ color: "var(--ink)" }}>
{c.user.nickname || c.user.username}
</span>
</Link>
@@ -372,7 +372,7 @@ export default function CommentSection({
<button
onClick={() => openReply(c)}
className={`cmt-reply-btn transition-colors ${
replyTarget?.id === c.id ? "!text-[var(--accent)] font-semibold" : ""
replyTarget?.id === c.id ? "!text-[var(--accent)]" : ""
}`}
aria-label={`回复 ${c.user.nickname || c.user.username}`}
data-tip="回复"
@@ -386,7 +386,7 @@ export default function CommentSection({
{canAccept(c) && (
<button
type="button"
className="cmt-reply-btn !text-[var(--accent)] font-semibold"
className="cmt-reply-btn !text-[var(--accent)]"
disabled={acceptingId === c.id}
onClick={() => void handleAccept(c.id, c.user.id)}
data-tip={acceptMode === "question" ? "采纳为最佳答案" : "采纳并发放悬赏积分"}
@@ -400,7 +400,7 @@ export default function CommentSection({
onClick={() => handleDelete(c.id)}
disabled={deletingId === c.id}
className={`meta transition-colors disabled:opacity-50 p-1 ${
confirmingId === c.id ? "!text-[var(--danger)] font-semibold" : "hover:text-[var(--danger)]"
confirmingId === c.id ? "!text-[var(--danger)]" : "hover:text-[var(--danger)]"
}`}
aria-label={confirmingId === c.id ? "再次点击确认删除" : "删除评论"}
data-tip={confirmingId === c.id ? "再点一次确认删除" : "删除"}
@@ -447,11 +447,11 @@ export default function CommentSection({
return (
<section className="panel p-6 sm:p-8 mt-6" aria-label="评论区">
<div className="flex items-center gap-2.5 mb-6">
<h2 className="text-lg font-extrabold" style={{ color: "var(--ink)" }}>
<h2 className="text-lg font-semibold" style={{ color: "var(--ink)" }}>
评论
</h2>
<span
className="text-[12px] font-bold px-2 py-0.5 rounded-full tabular-nums"
className="text-[12px] font-medium px-2 py-0.5 rounded-full tabular-nums"
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
>
{totalComments}
@@ -503,7 +503,7 @@ export default function CommentSection({
{comments.length === 0 && (
<div className="text-center py-14">
<MessagesSquare size={28} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
<p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>
<p className="text-sm" style={{ color: "var(--ink-2)" }}>
暂无评论
</p>
<p className="meta text-[12.5px] mt-1">来说两句，抢占沙发</p>