Files
jiang13-bbs/frontend/components/ConfirmDialog.tsx
freefire 42c395a864 feat: 实时消息与管理端运营能力
新增群聊/私信与公共 WebSocket 总线,站长用户内容档案,并将通知与待审角标改为推送驱动;同步精简管理仪表盘并修复主题换肤 DOM 冲突。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-15 22:58:16 +08:00

85 lines
2.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { X } from "lucide-react";
/**
* 站点风格确认框:仅取消/关闭可关,避免点遮罩误关。
* danger 主按钮使用 btn-danger,其余用 btn-accent。
*/
export default function ConfirmDialog({
open,
title,
message,
confirmLabel = "确定",
cancelLabel = "取消",
danger = false,
busy = false,
onConfirm,
onCancel,
}: {
open: boolean;
title: string;
message: string;
confirmLabel?: string;
cancelLabel?: string;
danger?: boolean;
busy?: boolean;
onConfirm: () => void;
onCancel: () => void;
}) {
if (!open) return null;
return (
<div
className="fixed inset-0 z-[1100] flex items-center justify-center p-4"
style={{ background: "rgba(0,0,0,0.55)" }}
>
<div
className="w-full max-w-sm rounded-2xl p-5 j13-toast-in"
style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-start justify-between gap-3 mb-3">
<h2
className="text-[16px] font-extrabold leading-snug"
style={{ color: "var(--ink)" }}
>
{title}
</h2>
<button
type="button"
onClick={onCancel}
disabled={busy}
aria-label="关闭"
className="w-7 h-7 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
style={{ color: "var(--ink-3)" }}
>
<X size={15} />
</button>
</div>
<p className="text-[13.5px] leading-relaxed mb-5" style={{ color: "var(--ink-2)" }}>
{message}
</p>
<div className="flex justify-end gap-2">
<button
type="button"
onClick={onCancel}
disabled={busy}
className="btn btn-line btn-sm"
>
{cancelLabel}
</button>
<button
type="button"
onClick={onConfirm}
disabled={busy}
className={`btn btn-sm ${danger ? "btn-danger" : "btn-accent"}`}
>
{busy ? "处理中…" : confirmLabel}
</button>
</div>
</div>
</div>
);
}