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

30
frontend/app/chat/ChatShell.tsx
View File

@@ -381,7 +381,7 @@ export default function ChatShell({
{query.trim() && (
<div className="px-2 pb-2">
<p
className="px-2 py-1.5 text-[11px] font-bold uppercase tracking-wider"
className="px-2 py-1.5 text-[11px] uppercase tracking-wider"
style={{ color: "var(--ink-3)" }}
>
用户 {searching ? "…" : ""}
@@ -397,7 +397,7 @@ export default function ChatShell({
>
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={36} />
<div className="min-w-0">
<p className="text-[13px] font-semibold truncate" style={{ color: "var(--ink)" }}>
<p className="text-[13px] truncate" style={{ color: "var(--ink)" }}>
{u.nickname || u.username}
</p>
<p className="text-[11px] meta truncate">@{u.username}</p>
@@ -406,7 +406,7 @@ export default function ChatShell({
))
)}
<p
className="px-2 py-1.5 mt-1 text-[11px] font-bold uppercase tracking-wider"
className="px-2 py-1.5 mt-1 text-[11px] uppercase tracking-wider"
style={{ color: "var(--ink-3)" }}
>
会话
@@ -468,14 +468,14 @@ export default function ChatShell({
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5">
<span
className="font-semibold text-[13.5px] truncate"
className="text-[13.5px] truncate"
style={{ color: "var(--ink)" }}
>
{roomTitle(room)}
</span>
{pinned && (
<span
className="inline-flex items-center gap-0.5 text-[10px] font-bold shrink-0 px-1.5 py-0.5 rounded"
className="inline-flex items-center gap-0.5 text-[10px] shrink-0 px-1.5 py-0.5 rounded"
style={{
background: "var(--accent-soft)",
color: "var(--accent)",
@@ -486,12 +486,12 @@ export default function ChatShell({
</span>
)}
{room.is_default && (
<span className="text-[10px] font-bold shrink-0" style={{ color: "var(--gold)" }}>
<span className="text-[10px] shrink-0" style={{ color: "var(--gold)" }}>
大厅
</span>
)}
{room.is_private && room.room_type === "group" && (
<span className="text-[10px] font-bold shrink-0 meta">私密</span>
<span className="text-[10px] shrink-0 meta">私密</span>
)}
<span className="ml-auto meta text-[10.5px] shrink-0">
{formatTime(room.last_message?.created_at || room.updated_at)}
@@ -501,7 +501,7 @@ export default function ChatShell({
<p className="text-[12px] truncate meta flex-1">{roomPreview(room)}</p>
{room.unread_count > 0 && (
<span
className="shrink-0 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center"
className="shrink-0 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-medium flex items-center justify-center"
style={{ background: "var(--clay)", color: "#fff" }}
>
{room.unread_count > 99 ? "99+" : room.unread_count}
@@ -530,7 +530,7 @@ export default function ChatShell({
>
<MessageSquare size={28} />
</span>
<p className="font-bold text-[16px]" style={{ color: "var(--ink)" }}>
<p className="text-[16px]" style={{ color: "var(--ink)" }}>
选择一个会话开始聊天
</p>
<p className="meta mt-1.5 text-[13px] max-w-xs">
@@ -637,7 +637,7 @@ function CreateGroupModal({
>
<div className="space-y-4">
<div>
<label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
<label className="block text-[12px] mb-1.5" style={{ color: "var(--ink-2)" }}>
群名称 <span style={{ color: "var(--danger)" }}>*</span>
</label>
<input
@@ -652,7 +652,7 @@ function CreateGroupModal({
/>
</div>
<div>
<label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
<label className="block text-[12px] mb-1.5" style={{ color: "var(--ink-2)" }}>
群简介（选填）
</label>
<textarea
@@ -665,14 +665,14 @@ function CreateGroupModal({
/>
</div>
<div>
<label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
<label className="block text-[12px] mb-2" style={{ color: "var(--ink-2)" }}>
可见性
</label>
<div className="flex gap-2">
<button
type="button"
onClick={() => setIsPrivate(false)}
className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
className="flex-1 h-9 rounded-lg text-[13px]"
style={{
background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
@@ -684,7 +684,7 @@ function CreateGroupModal({
<button
type="button"
onClick={() => setIsPrivate(true)}
className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
className="flex-1 h-9 rounded-lg text-[13px]"
style={{
background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
color: isPrivate ? "var(--accent)" : "var(--ink-2)",
@@ -697,7 +697,7 @@ function CreateGroupModal({
</div>
{isPrivate && (
<div>
<label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
<label className="block text-[12px] mb-1.5" style={{ color: "var(--ink-2)" }}>
初始成员（选填）
</label>
<input

32
frontend/app/chat/[id]/ChatRoomClient.tsx
View File

@@ -130,14 +130,14 @@ function RecallNotice({
uid > 0 ? (
<Link
href={`/u/${uid}`}
className="font-semibold transition-opacity hover:opacity-80"
className="transition-opacity hover:opacity-80"
style={nameStyle}
data-tip={`查看 ${name} 的主页`}
>
{name}
</Link>
) : (
<span className="font-semibold" style={nameStyle}>
<span style={nameStyle}>
{name}
</span>
);
@@ -966,7 +966,7 @@ export default function ChatRoomClient({
</h1>
{isDefault && (
<span
className="text-[10.5px] font-bold px-2 py-0.5 rounded-full"
className="text-[10.5px] px-2 py-0.5 rounded-full"
style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
>
大厅
@@ -974,7 +974,7 @@ export default function ChatRoomClient({
)}
{isPrivate && !isDirect && (
<span
className="text-[10.5px] font-bold px-2 py-0.5 rounded-full"
className="text-[10.5px] px-2 py-0.5 rounded-full"
style={{ background: "var(--panel-2)", color: "var(--ink-2)" }}
>
私密
@@ -1056,7 +1056,7 @@ export default function ChatRoomClient({
>
{!canView ? (
<div className="text-center py-12 px-4">
<p className="font-semibold" style={{ color: "var(--ink)" }}>
<p style={{ color: "var(--ink)" }}>
{isPrivate ? "此群为私密群" : "预览群信息"}
</p>
<p className="meta mt-1.5">
@@ -1123,7 +1123,7 @@ export default function ChatRoomClient({
<button
type="button"
onClick={() => handleReEdit(m.id)}
className="font-semibold transition-opacity hover:opacity-80"
className="transition-opacity hover:opacity-80"
style={{
color:
"color-mix(in srgb, var(--accent) 72%, var(--ink))",
@@ -1166,7 +1166,7 @@ export default function ChatRoomClient({
<Crown size={11} style={{ color: "var(--gold)" }} />
)}
<span
className="text-[12px] font-semibold truncate"
className="text-[12px] truncate"
style={{ color: "var(--ink-2)" }}
>
{m.sender.nickname}
@@ -1188,7 +1188,7 @@ export default function ChatRoomClient({
}}
>
<div
className="inline-flex items-center gap-1 mb-1.5 text-[11px] font-semibold"
className="inline-flex items-center gap-1 mb-1.5 text-[11px]"
style={{ color: "var(--ink-3)" }}
>
<Undo2 size={11} strokeWidth={2.4} />
@@ -1232,7 +1232,7 @@ export default function ChatRoomClient({
<Crown size={11} style={{ color: "var(--gold)" }} />
)}
<span
className="text-[12px] font-semibold truncate"
className="text-[12px] truncate"
style={{ color: "var(--ink-2)" }}
>
{m.sender.nickname}
@@ -1319,7 +1319,7 @@ export default function ChatRoomClient({
style={{ background: "var(--accent)" }}
/>
<div className="flex-1 min-w-0">
<p className="text-[11px] font-bold" style={{ color: "var(--accent)" }}>
<p className="text-[11px]" style={{ color: "var(--accent)" }}>
回复 {replyTo.sender.nickname || replyTo.sender.username}
</p>
<p className="text-[12px] truncate meta mt-0.5">
@@ -1365,7 +1365,7 @@ export default function ChatRoomClient({
size={28}
/>
<div className="min-w-0">
<p className="text-[13px] font-semibold truncate" style={{ color: "var(--ink)" }}>
<p className="text-[13px] truncate" style={{ color: "var(--ink)" }}>
{m.user.nickname || m.user.username}
</p>
<p className="text-[11px] meta truncate">@{m.user.username}</p>
@@ -1486,7 +1486,7 @@ export default function ChatRoomClient({
className="flex items-center justify-between px-4 py-3 shrink-0"
style={{ borderBottom: "1px solid var(--line)" }}
>
<p className="text-[13px] font-bold" style={{ color: "var(--ink)" }}>
<p className="text-[13px] font-medium" style={{ color: "var(--ink)" }}>
{rightPanel === "members"
? `成员 · ${memberCount}`
: rightPanel === "invite"
@@ -1630,7 +1630,7 @@ function MembersPanel({
{showTitle && (
<div className="flex items-center justify-between mb-3">
<p
className="text-[12px] font-bold tracking-[0.08em] uppercase"
className="text-[12px] tracking-[0.08em] uppercase"
style={{ color: "var(--ink-3)" }}
>
成员 · {members.length}
@@ -1666,7 +1666,7 @@ function MembersPanel({
/>
<Link
href={`/u/${m.user.id}`}
className="flex-1 min-w-0 truncate text-[13px] font-semibold hover:text-[var(--accent)] transition-colors"
className="flex-1 min-w-0 truncate text-[13px] hover:text-[var(--accent)] transition-colors"
style={{ color: "var(--ink)" }}
>
{m.user.nickname}
@@ -1795,7 +1795,7 @@ function SettingsPanel({
<div className="space-y-4">
<div>
<label
className="block text-[12px] font-bold mb-1.5"
className="block text-[12px] mb-1.5"
style={{ color: "var(--ink-2)" }}
>
群名称
@@ -1815,7 +1815,7 @@ function SettingsPanel({
</div>
<div>
<label
className="block text-[12px] font-bold mb-1.5"
className="block text-[12px] mb-1.5"
style={{ color: "var(--ink-2)" }}
>
群简介