feat(frontend): 统一全站 Modal 壳并修复角色保存按钮样式

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-16 00:39:54 +08:00
parent 11548eec97
commit a138f428e1
7 changed files with 584 additions and 594 deletions
--- a/frontend/components/Modal.tsx
+++ b/frontend/components/Modal.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { X } from "lucide-react";
+
+export type ModalProps = {
+  open: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  /** 底部操作区（取消/主按钮等） */
+  footer?: ReactNode;
+  /** 标题旁辅助说明 */
+  description?: ReactNode;
+  /** 面板最大宽度 class，默认 max-w-md */
+  maxWidthClass?: string;
+  /** 面板额外 class（如 max-h / flex） */
+  panelClassName?: string;
+  /** 点遮罩关闭；表单/确认默认 false 防误关 */
+  dismissOnOverlay?: boolean;
+  /** busy 时禁用关闭与 ESC */
+  busy?: boolean;
+  /** 叠层高度，确认框用 1100，普通 1000 */
+  zIndexClass?: string;
+  /** 无障碍：dialog | alertdialog */
+  role?: "dialog" | "alertdialog";
+  ariaLabel?: string;
+  /** 自定义标题区（如带图标）；提供时覆盖默认 title 行，仍渲染关闭钮除非 hideClose */
+  header?: ReactNode;
+  hideClose?: boolean;
+  /** 是否响应 ESC；封禁告知等不可关场景设 false */
+  closeOnEscape?: boolean;
+  /** 内容区额外 class */
+  bodyClassName?: string;
+};
+
+/**
+ * 全站弹层壳：统一遮罩、面板、标题关闭钮与 ESC。
+ * 主 CTA 请用 btn-primary；危险操作用 btn-danger；取消用 btn-line。
+ */
+export default function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  description,
+  maxWidthClass = "max-w-md",
+  panelClassName = "",
+  dismissOnOverlay = false,
+  busy = false,
+  zIndexClass = "z-[1000]",
+  role = "dialog",
+  ariaLabel,
+  header,
+  hideClose = false,
+  closeOnEscape = true,
+  bodyClassName = "",
+}: ModalProps) {
+  useEffect(() => {
+    if (!open || !closeOnEscape) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, busy, onClose, closeOnEscape]);
+
+  if (!open) return null;
+
+  const label =
+    ariaLabel || (typeof title === "string" ? title : undefined);
+
+  return (
+    <div
+      className={`fixed inset-0 ${zIndexClass} flex items-center justify-center p-4`}
+      style={{ background: "rgba(0,0,0,0.55)" }}
+      onClick={() => {
+        if (dismissOnOverlay && !busy) onClose();
+      }}
+      role={role}
+      aria-modal="true"
+      aria-label={label}
+    >
+      <div
+        className={`w-full ${maxWidthClass} rounded-2xl j13-toast-in ${panelClassName || "p-6"}`}
+        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {header ? (
+          <div className="flex items-start justify-between gap-3 mb-4">
+            <div className="min-w-0 flex-1">{header}</div>
+            {!hideClose && (
+              <CloseButton onClick={onClose} disabled={busy} />
+            )}
+          </div>
+        ) : (
+          <div className="flex items-start justify-between gap-3 mb-4">
+            <div className="min-w-0 flex-1">
+              <h2
+                className="text-[16px] sm:text-[18px] font-extrabold tracking-tight leading-snug"
+                style={{ color: "var(--ink)" }}
+              >
+                {title}
+              </h2>
+              {description ? (
+                <div className="mt-1 text-[12.5px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
+                  {description}
+                </div>
+              ) : null}
+            </div>
+            {!hideClose && <CloseButton onClick={onClose} disabled={busy} />}
+          </div>
+        )}
+
+        <div className={bodyClassName}>{children}</div>
+
+        {footer ? (
+          <div className="flex items-center justify-end gap-2 mt-5">{footer}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function CloseButton({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label="关闭"
+      className="w-7 h-7 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors disabled:opacity-50"
+      style={{ color: "var(--ink-3)" }}
+    >
+      <X size={15} />
+    </button>
+  );
+}