feat(frontend): 统一全站 Modal 壳并修复角色保存按钮样式
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -38,6 +38,7 @@ import { toast } from "@/lib/toast";
|
||||
import { realtime } from "@/lib/realtime";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import RoleBadge from "@/components/RoleBadge";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export type UserFilter = "all" | "staff" | "banned";
|
||||
|
||||
@@ -848,15 +849,6 @@ function RoleAssignDialog({
|
||||
}
|
||||
}, [target]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!target) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape" && !acting) onClose();
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [target, acting, onClose]);
|
||||
|
||||
if (!target) return null;
|
||||
|
||||
const toggleBoard = (id: number) => {
|
||||
@@ -904,217 +896,198 @@ function RoleAssignDialog({
|
||||
const saveLabel = willBan ? "保存并封禁" : willUnban ? "保存并解封" : "保存";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
|
||||
style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
|
||||
onClick={() => !acting && onClose()}
|
||||
>
|
||||
<div
|
||||
className="j13-toast-in panel w-full max-w-[500px] rounded-2xl p-6 max-h-[88vh] overflow-y-auto"
|
||||
style={{ boxShadow: "var(--shadow-lg)" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="角色与账号"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-[16px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
角色与账号
|
||||
</h3>
|
||||
<p className="meta mt-1 text-[12.5px] truncate">
|
||||
@{target.username}（{target.nickname}）
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={acting}
|
||||
aria-label="关闭"
|
||||
className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
|
||||
角色决定后台入口与前台管理能力；封禁立即强制下线。登录历史、站长内容档案仍走列表其他入口。
|
||||
</p>
|
||||
|
||||
<p className="mt-4 mb-2 text-[12.5px] font-bold" style={{ color: "var(--ink)" }}>
|
||||
管理角色
|
||||
</p>
|
||||
<div className="flex flex-col gap-2" role="radiogroup" aria-label="管理角色">
|
||||
{options.map((o) => {
|
||||
const active = role === o.value;
|
||||
return (
|
||||
<button
|
||||
key={o.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
onClick={() => {
|
||||
setRole(o.value);
|
||||
setErr("");
|
||||
}}
|
||||
className="text-left rounded-xl p-3.5 flex items-start gap-3 transition-colors"
|
||||
style={{
|
||||
border: `1.5px solid ${active ? "var(--accent)" : "var(--line)"}`,
|
||||
background: active ? "var(--accent-soft)" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 mt-0.5"
|
||||
style={{
|
||||
background: active ? "var(--accent)" : "var(--panel)",
|
||||
color: active ? "var(--accent-on)" : `var(${o.token})`,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{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)" }}>
|
||||
{o.title}
|
||||
</span>
|
||||
<span className="block mt-1 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
|
||||
{o.desc}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="mt-1 w-4 h-4 rounded-full shrink-0 flex items-center justify-center"
|
||||
style={{ border: `2px solid ${active ? "var(--accent)" : "var(--line-2)"}` }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{active && <span className="w-2 h-2 rounded-full" style={{ background: "var(--accent)" }} />}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{role === ROLES.BOARD_ADMIN && (
|
||||
<div className="mt-4">
|
||||
<p className="text-[12.5px] font-bold mb-2" style={{ color: "var(--ink)" }}>
|
||||
授权板块 <span style={{ color: "var(--danger)" }}>*</span>
|
||||
</p>
|
||||
{boards.length === 0 ? (
|
||||
<p className="meta text-[12px]">板块加载中…</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{boards.map((b) => {
|
||||
const checked = boardIds.includes(b.id);
|
||||
return (
|
||||
<button
|
||||
key={b.id}
|
||||
type="button"
|
||||
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"
|
||||
style={{
|
||||
border: `1.5px solid ${checked ? "var(--accent)" : "var(--line)"}`,
|
||||
background: checked ? "var(--accent-soft)" : "var(--panel-2)",
|
||||
color: checked ? "var(--accent)" : "var(--ink-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-4 h-4 rounded shrink-0 flex items-center justify-center"
|
||||
style={{ border: `2px solid ${checked ? "var(--accent)" : "var(--line-2)"}` }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{checked && (
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className="truncate">{b.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{err && (
|
||||
<p className="mt-2 text-[12px] font-semibold" style={{ color: "var(--danger)" }}>
|
||||
{err}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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>
|
||||
<div className="grid grid-cols-2 gap-2" role="radiogroup" aria-label="账号状态">
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={!banned}
|
||||
onClick={() => setBanned(false)}
|
||||
className="rounded-xl px-3 py-2.5 text-left transition-colors"
|
||||
style={{
|
||||
border: `1.5px solid ${!banned ? "var(--ok)" : "var(--line)"}`,
|
||||
background: !banned ? "var(--ok-soft)" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="flex items-center gap-1.5 text-[13px] font-bold"
|
||||
style={{ color: !banned ? "var(--ok)" : "var(--ink)" }}
|
||||
>
|
||||
<RotateCcw size={14} /> 正常
|
||||
</span>
|
||||
<span className="block mt-1 text-[11.5px] leading-snug" style={{ color: "var(--ink-3)" }}>
|
||||
可登录与互动
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={banned}
|
||||
onClick={() => setBanned(true)}
|
||||
className="rounded-xl px-3 py-2.5 text-left transition-colors"
|
||||
style={{
|
||||
border: `1.5px solid ${banned ? "var(--danger)" : "var(--line)"}`,
|
||||
background: banned ? "var(--danger-soft)" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="flex items-center gap-1.5 text-[13px] font-bold"
|
||||
style={{ color: banned ? "var(--danger)" : "var(--ink)" }}
|
||||
>
|
||||
<Ban size={14} /> 封禁
|
||||
</span>
|
||||
<span className="block mt-1 text-[11.5px] leading-snug" style={{ color: "var(--ink-3)" }}>
|
||||
强制下线，禁止登录
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{willBan && (
|
||||
<p className="mt-2 text-[12px] leading-relaxed" style={{ color: "var(--danger)" }}>
|
||||
封禁后立即强制下线，无法登录、发帖与回复；已发布内容保留。角色变更与封禁将一并保存。
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-2 mt-5">
|
||||
<Modal
|
||||
open
|
||||
title="角色与账号"
|
||||
description={
|
||||
<>
|
||||
<span className="truncate block">
|
||||
@{target.username}（{target.nickname}）
|
||||
</span>
|
||||
<span className="block mt-1">
|
||||
角色决定后台入口与前台管理能力；封禁立即强制下线。登录历史、站长内容档案仍走列表其他入口。
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
onClose={onClose}
|
||||
busy={acting}
|
||||
maxWidthClass="max-w-[500px]"
|
||||
panelClassName="p-6 max-h-[88vh] overflow-y-auto"
|
||||
ariaLabel="角色与账号"
|
||||
footer={
|
||||
<>
|
||||
<button type="button" className="btn btn-line" onClick={onClose} disabled={acting}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={willBan ? "btn btn-danger" : "btn"}
|
||||
className={willBan ? "btn btn-danger" : "btn btn-primary"}
|
||||
onClick={submit}
|
||||
disabled={acting}
|
||||
>
|
||||
{acting && <Loader2 size={15} className="animate-spin" />}
|
||||
{saveLabel}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p className="mb-2 text-[12.5px] font-bold" style={{ color: "var(--ink)" }}>
|
||||
管理角色
|
||||
</p>
|
||||
<div className="flex flex-col gap-2" role="radiogroup" aria-label="管理角色">
|
||||
{options.map((o) => {
|
||||
const active = role === o.value;
|
||||
return (
|
||||
<button
|
||||
key={o.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
onClick={() => {
|
||||
setRole(o.value);
|
||||
setErr("");
|
||||
}}
|
||||
className="text-left rounded-xl p-3.5 flex items-start gap-3 transition-colors"
|
||||
style={{
|
||||
border: `1.5px solid ${active ? "var(--accent)" : "var(--line)"}`,
|
||||
background: active ? "var(--accent-soft)" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 mt-0.5"
|
||||
style={{
|
||||
background: active ? "var(--accent)" : "var(--panel)",
|
||||
color: active ? "var(--accent-on)" : `var(${o.token})`,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{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)" }}>
|
||||
{o.title}
|
||||
</span>
|
||||
<span className="block mt-1 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
|
||||
{o.desc}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="mt-1 w-4 h-4 rounded-full shrink-0 flex items-center justify-center"
|
||||
style={{ border: `2px solid ${active ? "var(--accent)" : "var(--line-2)"}` }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{active && <span className="w-2 h-2 rounded-full" style={{ background: "var(--accent)" }} />}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{role === ROLES.BOARD_ADMIN && (
|
||||
<div className="mt-4">
|
||||
<p className="text-[12.5px] font-bold mb-2" style={{ color: "var(--ink)" }}>
|
||||
授权板块 <span style={{ color: "var(--danger)" }}>*</span>
|
||||
</p>
|
||||
{boards.length === 0 ? (
|
||||
<p className="meta text-[12px]">板块加载中…</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{boards.map((b) => {
|
||||
const checked = boardIds.includes(b.id);
|
||||
return (
|
||||
<button
|
||||
key={b.id}
|
||||
type="button"
|
||||
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"
|
||||
style={{
|
||||
border: `1.5px solid ${checked ? "var(--accent)" : "var(--line)"}`,
|
||||
background: checked ? "var(--accent-soft)" : "var(--panel-2)",
|
||||
color: checked ? "var(--accent)" : "var(--ink-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-4 h-4 rounded shrink-0 flex items-center justify-center"
|
||||
style={{ border: `2px solid ${checked ? "var(--accent)" : "var(--line-2)"}` }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{checked && (
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className="truncate">{b.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{err && (
|
||||
<p className="mt-2 text-[12px] font-semibold" style={{ color: "var(--danger)" }}>
|
||||
{err}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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>
|
||||
<div className="grid grid-cols-2 gap-2" role="radiogroup" aria-label="账号状态">
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={!banned}
|
||||
onClick={() => setBanned(false)}
|
||||
className="rounded-xl px-3 py-2.5 text-left transition-colors"
|
||||
style={{
|
||||
border: `1.5px solid ${!banned ? "var(--ok)" : "var(--line)"}`,
|
||||
background: !banned ? "var(--ok-soft)" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="flex items-center gap-1.5 text-[13px] font-bold"
|
||||
style={{ color: !banned ? "var(--ok)" : "var(--ink)" }}
|
||||
>
|
||||
<RotateCcw size={14} /> 正常
|
||||
</span>
|
||||
<span className="block mt-1 text-[11.5px] leading-snug" style={{ color: "var(--ink-3)" }}>
|
||||
可登录与互动
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={banned}
|
||||
onClick={() => setBanned(true)}
|
||||
className="rounded-xl px-3 py-2.5 text-left transition-colors"
|
||||
style={{
|
||||
border: `1.5px solid ${banned ? "var(--danger)" : "var(--line)"}`,
|
||||
background: banned ? "var(--danger-soft)" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="flex items-center gap-1.5 text-[13px] font-bold"
|
||||
style={{ color: banned ? "var(--danger)" : "var(--ink)" }}
|
||||
>
|
||||
<Ban size={14} /> 封禁
|
||||
</span>
|
||||
<span className="block mt-1 text-[11.5px] leading-snug" style={{ color: "var(--ink-3)" }}>
|
||||
强制下线，禁止登录
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{willBan && (
|
||||
<p className="mt-2 text-[12px] leading-relaxed" style={{ color: "var(--danger)" }}>
|
||||
封禁后立即强制下线，无法登录、发帖与回复；已发布内容保留。角色变更与封禁将一并保存。
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1154,133 +1127,107 @@ function LoginLogsDialog({ target, onClose }: { target: AdminUser | null; onClos
|
||||
if (target) setPage(1);
|
||||
}, [target]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!target) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [target, onClose]);
|
||||
|
||||
if (!target) return null;
|
||||
const pageSize = 15;
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
|
||||
style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="j13-toast-in panel w-full max-w-[520px] rounded-2xl p-6 max-h-[88vh] flex flex-col"
|
||||
style={{ boxShadow: "var(--shadow-lg)" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="登录历史"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-[16px] font-extrabold tracking-tight flex items-center gap-2" style={{ color: "var(--ink)" }}>
|
||||
<History size={17} style={{ color: "var(--accent)" }} />
|
||||
登录历史
|
||||
</h3>
|
||||
<p className="meta mt-1 text-[12.5px] truncate">
|
||||
@{target.username} · 共 {total} 条记录（含失败尝试）
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="关闭"
|
||||
className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 -mx-1.5 px-1.5 overflow-y-auto flex-1">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
|
||||
<Loader2 size={16} className="animate-spin" /> 加载中…
|
||||
</div>
|
||||
) : err ? (
|
||||
<p className="alert-error my-4">{err}</p>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="meta text-[12.5px]">暂无登录记录</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="flex flex-col">
|
||||
{logs.map((log) => (
|
||||
<li
|
||||
key={log.id}
|
||||
className="flex items-start gap-3 py-2.5"
|
||||
style={{ borderTop: "1px solid var(--line)" }}
|
||||
>
|
||||
<span
|
||||
className="mt-1 w-2 h-2 rounded-full shrink-0"
|
||||
style={{ background: log.success ? "var(--ok)" : "var(--danger)" }}
|
||||
title={log.success ? "成功" : "失败"}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[12.5px] font-semibold 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"
|
||||
style={
|
||||
log.success
|
||||
? { background: "var(--ok-soft)", color: "var(--ok)" }
|
||||
: { background: "var(--danger-soft)", color: "var(--danger)" }
|
||||
}
|
||||
>
|
||||
{log.success ? "成功" : "失败"}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-[11px] mt-0.5 truncate" style={{ color: "var(--ink-3)" }} title={log.user_agent}>
|
||||
{log.user_agent || "未知设备"}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-[11px] tabular-nums shrink-0 pt-0.5" style={{ color: "var(--ink-3)" }}>
|
||||
{formatDate(log.created_at)} {new Date(log.created_at).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{total > pageSize && (
|
||||
<div className="flex items-center justify-between pt-3 mt-2" style={{ borderTop: "1px solid var(--line)" }}>
|
||||
<span className="meta text-[11.5px] tabular-nums" style={{ color: "var(--ink-3)" }}>
|
||||
<Modal
|
||||
open
|
||||
title={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<History size={17} style={{ color: "var(--accent)" }} />
|
||||
登录历史
|
||||
</span>
|
||||
}
|
||||
description={`@${target.username} · 共 ${total} 条记录（含失败尝试）`}
|
||||
onClose={onClose}
|
||||
dismissOnOverlay
|
||||
maxWidthClass="max-w-[520px]"
|
||||
panelClassName="p-6 max-h-[88vh] flex flex-col"
|
||||
ariaLabel="登录历史"
|
||||
footer={
|
||||
total > pageSize ? (
|
||||
<>
|
||||
<span className="meta text-[11.5px] tabular-nums mr-auto" style={{ color: "var(--ink-3)" }}>
|
||||
第 {page} / {totalPages} 页
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft size={14} /> 上一页
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
disabled={page >= totalPages || loading}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
下一页 <ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft size={14} /> 上一页
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
disabled={page >= totalPages || loading}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
下一页 <ChevronRight size={14} />
|
||||
</button>
|
||||
</>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<div className="-mx-1.5 px-1.5 overflow-y-auto flex-1 min-h-0" style={{ maxHeight: "min(52vh, 420px)" }}>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
|
||||
<Loader2 size={16} className="animate-spin" /> 加载中…
|
||||
</div>
|
||||
) : err ? (
|
||||
<p className="alert-error my-4">{err}</p>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="meta text-[12.5px]">暂无登录记录</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="flex flex-col">
|
||||
{logs.map((log) => (
|
||||
<li
|
||||
key={log.id}
|
||||
className="flex items-start gap-3 py-2.5"
|
||||
style={{ borderTop: "1px solid var(--line)" }}
|
||||
>
|
||||
<span
|
||||
className="mt-1 w-2 h-2 rounded-full shrink-0"
|
||||
style={{ background: log.success ? "var(--ok)" : "var(--danger)" }}
|
||||
title={log.success ? "成功" : "失败"}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[12.5px] font-semibold 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"
|
||||
style={
|
||||
log.success
|
||||
? { background: "var(--ok-soft)", color: "var(--ok)" }
|
||||
: { background: "var(--danger-soft)", color: "var(--danger)" }
|
||||
}
|
||||
>
|
||||
{log.success ? "成功" : "失败"}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-[11px] mt-0.5 truncate" style={{ color: "var(--ink-3)" }} title={log.user_agent}>
|
||||
{log.user_agent || "未知设备"}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-[11px] tabular-nums shrink-0 pt-0.5" style={{ color: "var(--ink-3)" }}>
|
||||
{formatDate(log.created_at)}{" "}
|
||||
{new Date(log.created_at).toLocaleTimeString("zh-CN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user