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