1

2026-05-01 16:08:19 +08:00
parent dce84f677d
commit 14208ccb64
15 changed files with 752 additions and 175 deletions
--- a/src/components/auth/RegistrationInviteModal.tsx
+++ b/src/components/auth/RegistrationInviteModal.tsx
@@ -0,0 +1,115 @@
+import { X } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
+
+type RegistrationInviteModalProps = {
+  isOpen: boolean;
+  platformTheme: PlatformTheme;
+  initialInviteCode: string;
+  submitting: boolean;
+  error: string;
+  onClose: () => void;
+  onSubmit: (inviteCode: string) => Promise<void>;
+};
+
+export function RegistrationInviteModal({
+  isOpen,
+  platformTheme,
+  initialInviteCode,
+  submitting,
+  error,
+  onClose,
+  onSubmit,
+}: RegistrationInviteModalProps) {
+  const [inviteCode, setInviteCode] = useState(initialInviteCode);
+  const normalizedInviteCode = useMemo(
+    () =>
+      inviteCode
+        .trim()
+        .replace(/[^0-9a-z]/gi, '')
+        .toUpperCase(),
+    [inviteCode],
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    setInviteCode(initialInviteCode);
+  }, [initialInviteCode, isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[130] flex items-end justify-center px-3 py-4 text-[var(--platform-text-strong)] backdrop-blur-sm sm:items-center sm:p-4`}
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="registration-invite-dialog-title"
+        className="platform-auth-card w-full max-w-sm overflow-hidden rounded-[2rem]"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
+          <div
+            id="registration-invite-dialog-title"
+            className="text-lg font-semibold text-[var(--platform-text-strong)]"
+          >
+            请填写邀请码
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="platform-icon-button p-2"
+            aria-label="取消填写邀请码"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <form
+          className="flex flex-col gap-4 px-5 py-5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (!normalizedInviteCode) {
+              onClose();
+              return;
+            }
+
+            void onSubmit(normalizedInviteCode);
+          }}
+        >
+          <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
+            <span>邀请码</span>
+            <input
+              className="platform-input"
+              autoComplete="off"
+              value={inviteCode}
+              onChange={(event) => setInviteCode(event.target.value)}
+              placeholder="邀请码"
+            />
+          </label>
+
+          {error ? (
+            <div className="platform-banner platform-banner--danger text-sm">
+              {error}
+            </div>
+          ) : null}
+
+          <button
+            type="submit"
+            disabled={submitting}
+            className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {submitting ? '提交中' : normalizedInviteCode ? '提交' : '跳过'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}