79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { Ban } from "lucide-react";
|
||
import { onForceLogout } from "@/lib/userEvents";
|
||
import Modal from "@/components/Modal";
|
||
|
||
/**
|
||
* 账号安全守卫：监听全局强制下线事件，被封禁时弹出不可误关的告知模态。
|
||
*
|
||
* 登录态清理（cookie/Header 游客化/router.refresh）由 Header 复用统一
|
||
* 登出链路完成；本组件只负责"告知"这一职责，故不处理任何凭据逻辑。
|
||
* 挂载于 root layout，覆盖任意页面（含后台）。
|
||
*/
|
||
export default function AccountGuard() {
|
||
const router = useRouter();
|
||
const [banned, setBanned] = useState(false);
|
||
|
||
useEffect(
|
||
() =>
|
||
onForceLogout((reason) => {
|
||
if (reason === "banned") setBanned(true);
|
||
}),
|
||
[]
|
||
);
|
||
|
||
return (
|
||
<Modal
|
||
open={banned}
|
||
title="账号已被封禁"
|
||
onClose={() => {}}
|
||
hideClose
|
||
closeOnEscape={false}
|
||
role="alertdialog"
|
||
ariaLabel="账号已被封禁"
|
||
maxWidthClass="max-w-[400px]"
|
||
footer={
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setBanned(false);
|
||
router.push("/");
|
||
}}
|
||
className="btn btn-primary w-full"
|
||
autoFocus
|
||
>
|
||
我知道了
|
||
</button>
|
||
}
|
||
header={
|
||
<div className="w-full text-center">
|
||
<span
|
||
className="mx-auto w-14 h-14 rounded-full flex items-center justify-center"
|
||
style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
|
||
>
|
||
<Ban size={26} />
|
||
</span>
|
||
<h2
|
||
id="banned-dialog-title"
|
||
className="mt-4 text-[18px] font-extrabold tracking-tight"
|
||
style={{ color: "var(--ink)" }}
|
||
>
|
||
账号已被封禁
|
||
</h2>
|
||
</div>
|
||
}
|
||
>
|
||
<p
|
||
id="banned-dialog-desc"
|
||
className="meta text-[13px] leading-relaxed text-center"
|
||
>
|
||
你的账号因违反社区规则已被管理员封禁，当前登录状态已失效，无法继续发布内容与互动。
|
||
如对处理结果有异议，请联系管理员核实。
|
||
</p>
|
||
</Modal>
|
||
);
|
||
}
|