165 lines
4.6 KiB
TypeScript
165 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { type ReactNode } from "react";
|
|
import { useWebSocket } from "@/hooks/use-websocket";
|
|
import { useToast } from "@/providers/toast-provider";
|
|
import { Badge } from "./ui";
|
|
import { t } from "@/lib/i18n";
|
|
import type { WsNotification } from "@/types/view-models";
|
|
|
|
const severityColor: Record<WsNotification["severity"], string> = {
|
|
info: "var(--color-accent)",
|
|
warning: "var(--color-warning)",
|
|
error: "var(--color-danger)",
|
|
};
|
|
|
|
const typeLabel: Record<WsNotification["type"], string> = {
|
|
audit_alert: t("admin.notification.auditAlert"),
|
|
abnormal_login: t("admin.notification.abnormalLogin"),
|
|
system_error: t("admin.notification.systemError"),
|
|
info: "系统通知",
|
|
};
|
|
|
|
export function NotificationPanel(): ReactNode {
|
|
const { notifications, connected, dismiss, clear } = useWebSocket(20);
|
|
const { show } = useToast();
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
top: 16,
|
|
right: 16,
|
|
width: 320,
|
|
maxHeight: "60vh",
|
|
overflowY: "auto",
|
|
background: "var(--bg-paper)",
|
|
border: "1px solid var(--color-rule)",
|
|
borderRadius: 8,
|
|
boxShadow: "0 4px 16px rgba(0,0,0,0.08)",
|
|
zIndex: 100,
|
|
}}
|
|
role="region"
|
|
aria-label="通知中心"
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
padding: "10px 16px",
|
|
borderBottom: "1px solid var(--color-rule)",
|
|
}}
|
|
>
|
|
<h3
|
|
style={{
|
|
fontFamily: "var(--font-serif)",
|
|
fontSize: 14,
|
|
color: "var(--color-ink)",
|
|
margin: 0,
|
|
}}
|
|
>
|
|
{t("admin.notification.title")}
|
|
</h3>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
<Badge status={connected ? "healthy" : "down"} />
|
|
{notifications.length > 0 && (
|
|
<button
|
|
onClick={clear}
|
|
style={{
|
|
background: "none",
|
|
border: "none",
|
|
color: "var(--color-ink-muted)",
|
|
fontSize: 11,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
清空
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
|
|
{notifications.length === 0 && (
|
|
<li
|
|
style={{
|
|
padding: "24px 16px",
|
|
textAlign: "center",
|
|
color: "var(--color-ink-muted)",
|
|
fontSize: 12,
|
|
}}
|
|
>
|
|
暂无通知
|
|
</li>
|
|
)}
|
|
{notifications.map((notif) => (
|
|
<li
|
|
key={notif.id}
|
|
style={{
|
|
padding: "10px 16px",
|
|
borderBottom: "1px solid var(--color-rule)",
|
|
borderLeft: `3px solid ${severityColor[notif.severity]}`,
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
style={{
|
|
background: "none",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
padding: 0,
|
|
width: "100%",
|
|
textAlign: "left",
|
|
}}
|
|
onClick={() => {
|
|
show(
|
|
notif.severity === "error"
|
|
? "error"
|
|
: notif.severity === "warning"
|
|
? "warning"
|
|
: "info",
|
|
notif.title,
|
|
notif.message,
|
|
);
|
|
dismiss(notif.id);
|
|
}}
|
|
aria-label={`${typeLabel[notif.type]}: ${notif.message}`}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "baseline",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: 13,
|
|
color: "var(--color-ink)",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{typeLabel[notif.type]}
|
|
</span>
|
|
<span style={{ fontSize: 10, color: "var(--color-ink-muted)" }}>
|
|
{new Date(notif.timestamp).toLocaleTimeString("zh-CN")}
|
|
</span>
|
|
</div>
|
|
<p
|
|
style={{
|
|
fontSize: 12,
|
|
color: "var(--color-ink-muted)",
|
|
margin: "4px 0 0 0",
|
|
}}
|
|
>
|
|
{notif.message}
|
|
</p>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|