component(form): 调整form

Author: dodolalorc

README.md

@@ -6,6 +6,7 @@
 ## TODO 列表：
 
 - [x] 列表页增加布局切换（每行 1/2/4 列，可记忆用户选择）
+- [x] 收集报名表单组件调整。
 - [ ] 优化文章封面展示（统一比例、兜底图、列表/详情图策略一致）
 - [ ] 优化文章代码块主题（语法高亮 + 深浅色方案）
 - [ ] 全站文案与间距节奏优化（标题、副标题、按钮、空态）

src/components/common/Modal.astro

@@ -0,0 +1,136 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalDialogProps {
+  open: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  showCloseButton?: boolean;
+  closeOnEsc?: boolean;
+  closeOnOverlay?: boolean;
+  maxWidthClassName?: string;
+  overlayClassName?: string;
+  panelClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+}
+
+export default function ModalDialog({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  showCloseButton = true,
+  closeOnEsc = true,
+  closeOnOverlay = true,
+  maxWidthClassName = "max-w-md",
+  overlayClassName = "bg-black/50",
+  panelClassName = "bg-white rounded-2xl shadow-2xl",
+  headerClassName = "border-b border-brand-100 px-4 py-3",
+  bodyClassName = "p-4",
+  footerClassName = "border-t border-brand-100 px-4 py-3",
+}: ModalDialogProps) {
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    null,
+  );
+
+  useEffect(() => {
+    setPortalContainer(document.body);
+  }, []);
+
+  useEffect(() => {
+    if (!open || !closeOnEsc) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [closeOnEsc, onClose, open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const lockCount = Number(document.body.dataset.modalLockCount ?? "0") + 1;
+    document.body.dataset.modalLockCount = String(lockCount);
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      const nextLockCount = Math.max(
+        0,
+        Number(document.body.dataset.modalLockCount ?? "1") - 1,
+      );
+
+      if (nextLockCount === 0) {
+        delete document.body.dataset.modalLockCount;
+        document.body.style.overflow = originalOverflow;
+      } else {
+        document.body.dataset.modalLockCount = String(nextLockCount);
+      }
+    };
+  }, [open]);
+
+  if (!open || !portalContainer) return null;
+
+  const modalNode = (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center p-4 ${overlayClassName}`}
+      onClick={closeOnOverlay ? onClose : undefined}
+      role="presentation"
+    >
+      <div
+        className={`relative w-full overflow-hidden ${maxWidthClassName} ${panelClassName}`}
+        onClick={(event) => event.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={typeof title === "string" ? title : undefined}
+      >
+        {(title || showCloseButton) && (
+          <div
+            className={`flex items-center justify-between ${headerClassName}`}
+          >
+            <div className="text-sm font-semibold text-ink-900">{title}</div>
+            {showCloseButton && (
+              <button
+                className="rounded-lg p-1.5 text-ink-500 transition hover:bg-brand-50 hover:text-ink-900"
+                aria-label="关闭"
+                type="button"
+                onClick={onClose}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        )}
+
+        <div className={bodyClassName}>{children}</div>
+
+        {footer && <div className={footerClassName}>{footer}</div>}
+      </div>
+    </div>
+  );
+
+  return createPortal(modalNode, portalContainer);
+}

src/components/common/ModalDialog.tsx

@@ -6,4 +6,4 @@ export { default as Button } from './Button.astro';
 export { default as Label } from './Label.astro';
 export { default as FileUpload } from './FileUpload.astro';
 export { default as Link } from './Link.astro';
-export { default as Modal } from './Modal.astro';
+export { default as ModalDialog } from './ModalDialog';