1

2026-04-11 15:43:32 +08:00
parent f19e482c8f
commit 0981d6ee1b
78 changed files with 1102 additions and 8510 deletions
--- a/src/components/auth/AuthGate.tsx
+++ b/src/components/auth/AuthGate.tsx
@@ -7,6 +7,7 @@ import {
 import {
  type AuthAuditLogEntry,
  type AuthCaptchaChallenge,
+  type AuthLoginMethod,
  type AuthRiskBlockSummary,
  type AuthSessionSummary,
  type AuthUser,
@@ -15,6 +16,7 @@ import {
  consumeAuthCallbackResult,
  ensureAutoAuthUser,
  getAuthAuditLogs,
+  getAuthLoginOptions,
  getAuthRiskBlocks,
  getAuthSessions,
  getCaptchaChallengeFromError,
@@ -50,6 +52,9 @@ const allowDevGuestAutoAuth =
 export function AuthGate({ children }: AuthGateProps) {
  const [status, setStatus] = useState<AuthStatus>('checking');
  const [user, setUser] = useState<AuthUser | null>(null);
+  const [availableLoginMethods, setAvailableLoginMethods] = useState<
+    AuthLoginMethod[]
+  >([]);
  const [error, setError] = useState('');
  const [sendingCode, setSendingCode] = useState(false);
  const [loggingIn, setLoggingIn] = useState(false);
@@ -104,6 +109,16 @@ export function AuthGate({ children }: AuthGateProps) {
    };

    const hydrate = async () => {
+      const loadLoginOptions = async () => {
+        const options = await getAuthLoginOptions();
+        if (!isActive) {
+          return null;
+        }
+
+        setAvailableLoginMethods(options.availableLoginMethods);
+        return options;
+      };
+
      const callbackResult = consumeAuthCallbackResult();
      if (callbackResult?.error && isActive) {
        setError(callbackResult.error);
@@ -121,6 +136,20 @@ export function AuthGate({ children }: AuthGateProps) {
        }

        setUser(null);
+        try {
+          await loadLoginOptions();
+        } catch (optionsError) {
+          if (!isActive) {
+            return;
+          }
+
+          setAvailableLoginMethods([]);
+          setError(
+            optionsError instanceof Error
+              ? optionsError.message
+              : '读取登录方式失败，请稍后再试。',
+          );
+        }
        setStatus('unauthenticated');
        return;
      }
@@ -133,11 +162,13 @@ export function AuthGate({ children }: AuthGateProps) {

        if (!nextSession.user) {
          setUser(null);
+          setAvailableLoginMethods(nextSession.availableLoginMethods);
          setStatus('unauthenticated');
          return;
        }

        setUser(nextSession.user);
+        setAvailableLoginMethods(nextSession.availableLoginMethods);
        setStatus(
          nextSession.user.bindingStatus === 'pending_bind_phone'
            ? 'pending_bind_phone'
@@ -155,6 +186,20 @@ export function AuthGate({ children }: AuthGateProps) {
        }

        setUser(null);
+        try {
+          await loadLoginOptions();
+        } catch (optionsError) {
+          if (!isActive) {
+            return;
+          }
+
+          setAvailableLoginMethods([]);
+          setError(
+            optionsError instanceof Error
+              ? optionsError.message
+              : '读取登录方式失败，请稍后再试。',
+          );
+        }
        setStatus('unauthenticated');
      }
    };
@@ -278,6 +323,7 @@ export function AuthGate({ children }: AuthGateProps) {
  if (status === 'unauthenticated') {
    return (
      <LoginScreen
+        availableLoginMethods={availableLoginMethods}
        sendingCode={sendingCode}
        loggingIn={loggingIn}
        wechatLoading={wechatLoading}
--- a/src/components/auth/LoginScreen.tsx
+++ b/src/components/auth/LoginScreen.tsx
@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react';

-import type { AuthCaptchaChallenge } from '../../services/authService';
+import type {
+  AuthCaptchaChallenge,
+  AuthLoginMethod,
+} from '../../services/authService';
 import { CaptchaChallengeField } from './CaptchaChallengeField';

 type LoginScreenProps = {
+  availableLoginMethods: AuthLoginMethod[];
  sendingCode: boolean;
  loggingIn: boolean;
  wechatLoading: boolean;
@@ -24,6 +28,7 @@ type LoginScreenProps = {
 };

 export function LoginScreen({
+  availableLoginMethods,
  sendingCode,
  loggingIn,
  wechatLoading,
@@ -38,6 +43,8 @@ export function LoginScreen({
  const [captchaAnswer, setCaptchaAnswer] = useState('');
  const [cooldownSeconds, setCooldownSeconds] = useState(0);
  const [hint, setHint] = useState('');
+  const phoneLoginEnabled = availableLoginMethods.includes('phone');
+  const wechatLoginEnabled = availableLoginMethods.includes('wechat');

  useEffect(() => {
    if (cooldownSeconds <= 0) {
@@ -69,7 +76,7 @@ export function LoginScreen({
              账号登录
            </h1>
            <p className="mt-4 max-w-md text-sm leading-7 text-zinc-300">
-              先登录账号，再同步你的冒险进度。本轮先开放手机号验证码登录，微信登录将在下一阶段接入。
+              先登录账号，再同步你的冒险进度。
            </p>
            <div className="mt-8 grid gap-3 text-sm text-zinc-300">
              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
@@ -85,77 +92,90 @@ export function LoginScreen({
            className="flex flex-col justify-center gap-5 px-6 py-8 md:px-10 md:py-12"
            onSubmit={(event) => {
              event.preventDefault();
+              if (!phoneLoginEnabled) {
+                return;
+              }
              void onSubmit(phone, code);
            }}
          >
-            <label className="grid gap-2 text-sm text-zinc-300">
-              <span>手机号</span>
-              <input
-                className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
-                autoComplete="tel"
-                inputMode="numeric"
-                value={phone}
-                onChange={(event) => setPhone(event.target.value)}
-                placeholder="13800000000"
-              />
-            </label>
+            {phoneLoginEnabled ? (
+              <>
+                <label className="grid gap-2 text-sm text-zinc-300">
+                  <span>手机号</span>
+                  <input
+                    className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
+                    autoComplete="tel"
+                    inputMode="numeric"
+                    value={phone}
+                    onChange={(event) => setPhone(event.target.value)}
+                    placeholder="13800000000"
+                  />
+                </label>

-            <label className="grid gap-2 text-sm text-zinc-300">
-              <span>验证码</span>
-              <div className="flex gap-3">
-                <input
-                  className="h-12 min-w-0 flex-1 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
-                  inputMode="numeric"
-                  value={code}
-                  onChange={(event) => setCode(event.target.value)}
-                  placeholder="输入验证码"
+                <label className="grid gap-2 text-sm text-zinc-300">
+                  <span>验证码</span>
+                  <div className="flex gap-3">
+                    <input
+                      className="h-12 min-w-0 flex-1 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
+                      inputMode="numeric"
+                      value={code}
+                      onChange={(event) => setCode(event.target.value)}
+                      placeholder="输入验证码"
+                    />
+                    <button
+                      type="button"
+                      disabled={sendingCode || cooldownSeconds > 0 || !phone.trim()}
+                      className="h-12 shrink-0 rounded-2xl border border-amber-300/25 px-4 text-sm font-medium text-amber-100 transition hover:border-amber-300/55 hover:bg-amber-300/10 disabled:cursor-not-allowed disabled:opacity-55"
+                      onClick={() => {
+                        void (async () => {
+                          try {
+                            const result = await onSendCode(phone, {
+                              challengeId: captchaChallenge?.challengeId,
+                              answer: captchaAnswer,
+                            });
+                            setCooldownSeconds(result.cooldownSeconds);
+                            setHint(
+                              `验证码已发送，有效期约 ${Math.max(1, Math.round(result.expiresInSeconds / 60))} 分钟。`,
+                            );
+                            setCaptchaAnswer('');
+                          } catch {
+                            setHint('');
+                          }
+                        })();
+                      }}
+                    >
+                      {sendingCode
+                        ? '发送中...'
+                        : cooldownSeconds > 0
+                          ? `${cooldownSeconds}s`
+                          : '获取验证码'}
+                    </button>
+                  </div>
+                </label>
+
+                {hint ? (
+                  <div className="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100">
+                    {hint}
+                  </div>
+                ) : null}
+
+                <CaptchaChallengeField
+                  challenge={captchaChallenge}
+                  answer={captchaAnswer}
+                  onAnswerChange={setCaptchaAnswer}
                />
-                <button
-                  type="button"
-                  disabled={sendingCode || cooldownSeconds > 0 || !phone.trim()}
-                  className="h-12 shrink-0 rounded-2xl border border-amber-300/25 px-4 text-sm font-medium text-amber-100 transition hover:border-amber-300/55 hover:bg-amber-300/10 disabled:cursor-not-allowed disabled:opacity-55"
-                  onClick={() => {
-                    void (async () => {
-                      try {
-                        const result = await onSendCode(phone, {
-                          challengeId: captchaChallenge?.challengeId,
-                          answer: captchaAnswer,
-                        });
-                        setCooldownSeconds(result.cooldownSeconds);
-                        setHint(
-                          `验证码已发送，有效期约 ${Math.max(1, Math.round(result.expiresInSeconds / 60))} 分钟。`,
-                        );
-                        setCaptchaAnswer('');
-                      } catch {
-                        setHint('');
-                      }
-                    })();
-                  }}
-                >
-                  {sendingCode
-                    ? '发送中...'
-                    : cooldownSeconds > 0
-                      ? `${cooldownSeconds}s`
-                      : '获取验证码'}
-                </button>
-              </div>
-            </label>
-
-            {hint ? (
-              <div className="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100">
-                {hint}
-              </div>
+              </>
            ) : null}

-            <CaptchaChallengeField
-              challenge={captchaChallenge}
-              answer={captchaAnswer}
-              onAnswerChange={setCaptchaAnswer}
-            />
-
-            <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3 text-sm text-zinc-300">
-              手机验证码适合直接登录；如果你更习惯微信，也可以先走微信登录再绑定手机号。
-            </div>
+            {phoneLoginEnabled || wechatLoginEnabled ? (
+              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3 text-sm text-zinc-300">
+                {phoneLoginEnabled && wechatLoginEnabled
+                  ? '手机号可直接登录，也可以先用微信。'
+                  : phoneLoginEnabled
+                    ? '当前开放手机号登录。'
+                    : '当前开放微信登录。'}
+              </div>
+            ) : null}

            {error ? (
              <div className="rounded-2xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
@@ -163,24 +183,34 @@ export function LoginScreen({
              </div>
            ) : null}

-            <button
-              type="submit"
-              disabled={loggingIn || !phone.trim() || !code.trim()}
-              className="mt-2 h-12 rounded-2xl bg-[linear-gradient(135deg,_#f59e0b,_#f97316)] px-4 text-base font-medium text-zinc-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {loggingIn ? '正在进入...' : '登录并进入游戏'}
-            </button>
+            {phoneLoginEnabled ? (
+              <button
+                type="submit"
+                disabled={loggingIn || !phone.trim() || !code.trim()}
+                className="mt-2 h-12 rounded-2xl bg-[linear-gradient(135deg,_#f59e0b,_#f97316)] px-4 text-base font-medium text-zinc-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {loggingIn ? '正在进入...' : '登录并进入游戏'}
+              </button>
+            ) : null}

-            <button
-              type="button"
-              disabled={wechatLoading || sendingCode || loggingIn}
-              className="h-12 rounded-2xl border border-white/12 bg-white/5 px-4 text-base font-medium text-zinc-100 transition hover:border-emerald-300/35 hover:bg-emerald-400/10 disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={() => {
-                void onStartWechatLogin();
-              }}
-            >
-              {wechatLoading ? '正在跳转微信...' : '微信登录'}
-            </button>
+            {wechatLoginEnabled ? (
+              <button
+                type="button"
+                disabled={wechatLoading || sendingCode || loggingIn}
+                className="h-12 rounded-2xl border border-white/12 bg-white/5 px-4 text-base font-medium text-zinc-100 transition hover:border-emerald-300/35 hover:bg-emerald-400/10 disabled:cursor-not-allowed disabled:opacity-60"
+                onClick={() => {
+                  void onStartWechatLogin();
+                }}
+              >
+                {wechatLoading ? '正在跳转微信...' : '微信登录'}
+              </button>
+            ) : null}
+
+            {!phoneLoginEnabled && !wechatLoginEnabled ? (
+              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-4 text-sm text-zinc-300">
+                当前登录入口暂不可用，请稍后再试。
+              </div>
+            ) : null}
          </form>
        </div>
      </div>