freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 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

50
frontend/app/admin/users/UsersAdmin.tsx
View File

@@ -90,13 +90,13 @@ function MiniStat({
{icon}
</span>
<div className="min-w-0 leading-tight">
<p className="text-[11.5px] font-semibold truncate" style={{ color: "var(--ink-3)" }}>
<p className="text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
{label}
</p>
<p className="text-[19px] font-extrabold tabular-nums" style={{ color: "var(--ink)" }}>
{value}
{sub && (
<span className="ml-1.5 text-[11px] font-semibold" style={{ color: "var(--ink-3)" }}>
<span className="ml-1.5 text-[11px]" style={{ color: "var(--ink-3)" }}>
{sub}
</span>
)}
@@ -279,7 +279,7 @@ export default function UsersAdmin({
if (u.banned) {
return (
<span
className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
className="inline-flex items-center gap-1.5 text-[12.5px]"
style={{ color: "var(--danger)" }}
data-tip="账号已封禁"
>
@@ -291,7 +291,7 @@ export default function UsersAdmin({
if (u.online) {
return (
<span
className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
className="inline-flex items-center gap-1.5 text-[12.5px]"
style={{ color: "var(--ok)" }}
data-tip={u.last_seen_at ? `最近活跃 ${formatRelative(u.last_seen_at)}` : "在线"}
>
@@ -302,7 +302,7 @@ export default function UsersAdmin({
}
return (
<span
className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
className="inline-flex items-center gap-1.5 text-[12.5px]"
style={{ color: "var(--ink-3)" }}
data-tip={u.last_seen_at ? `最近活跃 ${formatRelative(u.last_seen_at)}` : "从未活跃"}
>
@@ -325,7 +325,7 @@ export default function UsersAdmin({
aria-label={`查看 ${u.username} 的登录历史`}
>
<span
className="block text-[12px] font-semibold tabular-nums truncate group-hover:text-[var(--accent)]"
className="block text-[12px] tabular-nums truncate group-hover:text-[var(--accent)]"
style={{ color: u.last_login_ip ? "var(--ink-2)" : "var(--ink-3)" }}
>
{u.last_login_ip || "暂无记录"}
@@ -371,7 +371,7 @@ export default function UsersAdmin({
<div className="flex items-center gap-1 justify-end">
{auditBtn}
<span
className="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold whitespace-nowrap"
className="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] whitespace-nowrap"
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
>
当前账号
@@ -540,7 +540,7 @@ export default function UsersAdmin({
type="button"
aria-pressed={active}
onClick={() => changeFilter(t.key)}
className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13px] font-semibold transition-colors"
className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13px] transition-colors"
style={
active
? { background: "var(--nav-active-bg)", color: "var(--nav-active-ink)" }
@@ -570,7 +570,7 @@ export default function UsersAdmin({
className="px-4 sm:px-5 py-3.5 flex items-center justify-between gap-2 flex-wrap"
style={{ borderBottom: "1px solid var(--line)" }}
>
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
<span className="font-medium text-[15px]" style={{ color: "var(--ink)" }}>
{appliedQ ? (
<>
搜索“<span style={{ color: "var(--accent)" }}>{appliedQ}</span>”
@@ -591,7 +591,7 @@ export default function UsersAdmin({
{/* 桌面表头 */}
{users.length > 0 && (
<div
className={`${rowGrid} text-[11.5px] font-semibold uppercase tracking-wide`}
className={`${rowGrid} text-[11.5px] uppercase tracking-wide`}
style={{ color: "var(--ink-3)", borderBottom: "1px solid var(--line)", background: "var(--panel-2)" }}
>
<span>成员</span>
@@ -618,7 +618,7 @@ export default function UsersAdmin({
>
<UsersIcon size={22} />
</span>
<p className="font-bold text-[14.5px]" style={{ color: "var(--ink)" }}>
<p className="text-[14.5px]" style={{ color: "var(--ink)" }}>
{hasFilter ? "没有匹配的成员" : "暂无成员"}
</p>
<p className="meta mt-1.5 text-[12.5px]">
@@ -635,7 +635,7 @@ export default function UsersAdmin({
<div className="flex items-center gap-2.5 min-w-0">
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={34} />
<div className="min-w-0 leading-tight">
<p className="text-[13.5px] font-bold truncate" style={{ color: "var(--ink)" }}>
<p className="text-[13.5px] truncate" style={{ color: "var(--ink)" }}>
{u.nickname}
</p>
<p className="text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
@@ -651,7 +651,7 @@ export default function UsersAdmin({
<div className="min-w-0">{renderLastLogin(u)}</div>
<div className="hidden xl:block">
<p
className="text-[12.5px] font-semibold tabular-nums"
className="text-[12.5px] tabular-nums"
style={{ color: "var(--ink-2)" }}
data-tip="仅统计已发布内容；驳回/删除见内容档案"
>
@@ -670,7 +670,7 @@ export default function UsersAdmin({
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={38} />
<div className="min-w-0 flex-1 leading-tight">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-[14px] font-bold truncate" style={{ color: "var(--ink)" }}>
<span className="text-[14px] truncate" style={{ color: "var(--ink)" }}>
{u.nickname}
</span>
{u.role !== ROLES.USER && (
@@ -678,7 +678,7 @@ export default function UsersAdmin({
)}
{isSelf && (
<span
className="inline-flex items-center rounded-full px-2 py-px text-[10.5px] font-bold leading-[1.55]"
className="inline-flex items-center rounded-full px-2 py-px text-[10.5px] leading-[1.55]"
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
>
当前账号
@@ -931,7 +931,7 @@ function RoleAssignDialog({
</>
}
>
<p className="mb-2 text-[12.5px] font-bold" style={{ color: "var(--ink)" }}>
<p className="mb-2 text-[12.5px]" style={{ color: "var(--ink)" }}>
管理角色
</p>
<div className="flex flex-col gap-2" role="radiogroup" aria-label="管理角色">
@@ -964,7 +964,7 @@ function RoleAssignDialog({
{o.value === ROLES.USER ? <UsersIcon size={18} /> : <ShieldCheck size={18} />}
</span>
<span className="min-w-0 flex-1">
<span className="block text-[13.5px] font-bold" style={{ color: "var(--ink)" }}>
<span className="block text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
{o.title}
</span>
<span className="block mt-1 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
@@ -985,7 +985,7 @@ function RoleAssignDialog({
{role === ROLES.BOARD_ADMIN && (
<div className="mt-4">
<p className="text-[12.5px] font-bold mb-2" style={{ color: "var(--ink)" }}>
<p className="text-[12.5px] mb-2" style={{ color: "var(--ink)" }}>
授权板块 <span style={{ color: "var(--danger)" }}>*</span>
</p>
{boards.length === 0 ? (
@@ -1001,7 +1001,7 @@ function RoleAssignDialog({
role="checkbox"
aria-checked={checked}
onClick={() => toggleBoard(b.id)}
className="flex items-center gap-2 rounded-lg px-3 py-2 text-[12.5px] font-semibold transition-colors"
className="flex items-center gap-2 rounded-lg px-3 py-2 text-[12.5px] transition-colors"
style={{
border: `1.5px solid ${checked ? "var(--accent)" : "var(--line)"}`,
background: checked ? "var(--accent-soft)" : "var(--panel-2)",
@@ -1026,7 +1026,7 @@ function RoleAssignDialog({
</div>
)}
{err && (
<p className="mt-2 text-[12px] font-semibold" style={{ color: "var(--danger)" }}>
<p className="mt-2 text-[12px]" style={{ color: "var(--danger)" }}>
{err}
</p>
)}
@@ -1034,7 +1034,7 @@ function RoleAssignDialog({
)}
<div className="mt-5 pt-4" style={{ borderTop: "1px solid var(--line)" }}>
<p className="text-[12.5px] font-bold mb-2" style={{ color: "var(--ink)" }}>
<p className="text-[12.5px] mb-2" style={{ color: "var(--ink)" }}>
账号状态
</p>
<div className="grid grid-cols-2 gap-2" role="radiogroup" aria-label="账号状态">
@@ -1050,7 +1050,7 @@ function RoleAssignDialog({
}}
>
<span
className="flex items-center gap-1.5 text-[13px] font-bold"
className="flex items-center gap-1.5 text-[13px] font-medium"
style={{ color: !banned ? "var(--ok)" : "var(--ink)" }}
>
<RotateCcw size={14} /> 正常
@@ -1071,7 +1071,7 @@ function RoleAssignDialog({
}}
>
<span
className="flex items-center gap-1.5 text-[13px] font-bold"
className="flex items-center gap-1.5 text-[13px] font-medium"
style={{ color: banned ? "var(--danger)" : "var(--ink)" }}
>
<Ban size={14} /> 封禁
@@ -1199,10 +1199,10 @@ function LoginLogsDialog({ target, onClose }: { target: AdminUser | null; onClos
aria-hidden
/>
<div className="min-w-0 flex-1">
<p className="text-[12.5px] font-semibold tabular-nums truncate" style={{ color: "var(--ink)" }}>
<p className="text-[12.5px] tabular-nums truncate" style={{ color: "var(--ink)" }}>
{log.ip || "未知 IP"}
<span
className="ml-2 inline-flex items-center rounded-full px-1.5 py-px text-[10.5px] font-bold"
className="ml-2 inline-flex items-center rounded-full px-1.5 py-px text-[10.5px]"
style={
log.success
? { background: "var(--ok-soft)", color: "var(--ok)" }

16
frontend/app/admin/users/[id]/UserAuditClient.tsx
View File

@@ -60,7 +60,7 @@ function StatusChip({
{chips.map((c) => (
<span
key={c.label}
className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-bold"
className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px]"
style={{ background: c.soft, color: c.color }}
>
{c.label}
@@ -175,7 +175,7 @@ export default function UserAuditClient({
<div>
<Link
href="/admin/users"
className="inline-flex items-center gap-1.5 text-[13px] font-semibold mb-4 hover:opacity-80"
className="inline-flex items-center gap-1.5 text-[13px] mb-4 hover:opacity-80"
style={{ color: "var(--accent)" }}
>
<ArrowLeft size={14} />
@@ -196,7 +196,7 @@ export default function UserAuditClient({
<RoleBadge role={u.role} />
{u.banned && (
<span
className="text-[11px] font-bold px-2 py-0.5 rounded-full"
className="text-[11px] px-2 py-0.5 rounded-full"
style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
>
已封禁
@@ -251,7 +251,7 @@ export default function UserAuditClient({
key={t.key}
type="button"
onClick={() => switchTab(t.key)}
className="inline-flex items-center gap-1.5 px-3 py-2.5 text-[13px] font-bold whitespace-nowrap -mb-px"
className="inline-flex items-center gap-1.5 px-3 py-2.5 text-[13px] whitespace-nowrap -mb-px"
style={{
color: active ? "var(--accent)" : "var(--ink-3)",
borderBottom: active ? "2px solid var(--accent)" : "2px solid transparent",
@@ -259,7 +259,7 @@ export default function UserAuditClient({
>
{t.icon}
{t.label}
<span className="tabular-nums font-semibold opacity-70">
<span className="tabular-nums opacity-70">
{tabCount(t.key).toLocaleString("zh-CN")}
</span>
</button>
@@ -298,13 +298,13 @@ export default function UserAuditClient({
)}
</div>
{p.deleted ? (
<p className="text-[14px] font-bold" style={{ color: "var(--ink-3)" }}>
<p className="text-[14px] font-medium" style={{ color: "var(--ink-3)" }}>
{p.title || "（无标题）"}
</p>
) : (
<Link
href={`/post/${p.id}`}
className="text-[14px] font-bold hover:underline"
className="text-[14px] font-medium hover:underline"
style={{ color: "var(--ink)" }}
>
{p.title || "（无标题）"}
@@ -339,7 +339,7 @@ export default function UserAuditClient({
) : (
<Link
href={`/post/${c.post_id}`}
className="text-[11.5px] font-semibold hover:underline"
className="text-[11.5px] hover:underline"
style={{ color: "var(--accent)" }}
>
帖子 #{c.post_id}