1

2026-04-10 15:37:02 +08:00
parent 161cd32277
commit f19e482c8f
233 changed files with 43987 additions and 5127 deletions
--- a/src/components/auth/BindPhoneScreen.tsx
+++ b/src/components/auth/BindPhoneScreen.tsx
@@ -0,0 +1,179 @@
+import { useEffect, useState } from 'react';
+
+import type { AuthCaptchaChallenge, AuthUser } from '../../services/authService';
+import { CaptchaChallengeField } from './CaptchaChallengeField';
+
+type BindPhoneScreenProps = {
+  user: AuthUser;
+  sendingCode: boolean;
+  binding: boolean;
+  error: string;
+  captchaChallenge: AuthCaptchaChallenge | null;
+  onSendCode: (
+    phone: string,
+    captcha?: {
+      challengeId?: string;
+      answer?: string;
+    },
+  ) => Promise<{
+    cooldownSeconds: number;
+    expiresInSeconds: number;
+  }>;
+  onSubmit: (phone: string, code: string) => Promise<void>;
+  onLogout: () => Promise<void>;
+};
+
+export function BindPhoneScreen({
+  user,
+  sendingCode,
+  binding,
+  error,
+  captchaChallenge,
+  onSendCode,
+  onSubmit,
+  onLogout,
+}: BindPhoneScreenProps) {
+  const [phone, setPhone] = useState('');
+  const [code, setCode] = useState('');
+  const [captchaAnswer, setCaptchaAnswer] = useState('');
+  const [cooldownSeconds, setCooldownSeconds] = useState(0);
+  const [hint, setHint] = useState('');
+
+  useEffect(() => {
+    if (cooldownSeconds <= 0) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setCooldownSeconds((current) => Math.max(0, current - 1));
+    }, 1000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [cooldownSeconds]);
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(16,185,129,0.14),_transparent_42%),linear-gradient(180deg,_#13151c_0%,_#090b11_100%)] px-4 py-6 text-zinc-100 sm:py-8">
+      <div className="mx-auto flex min-h-[calc(100vh-3rem)] w-full max-w-5xl items-center justify-center sm:min-h-[calc(100vh-4rem)]">
+        <div className="grid w-full max-w-4xl overflow-hidden rounded-[28px] border border-emerald-200/15 bg-zinc-950/78 shadow-[0_24px_80px_rgba(0,0,0,0.45)] md:grid-cols-[1.05fr_0.95fr]">
+          <div className="border-b border-emerald-200/10 bg-[linear-gradient(135deg,_rgba(16,185,129,0.14),_rgba(59,130,246,0.08))] px-6 py-8 md:border-b-0 md:border-r md:px-10 md:py-12">
+            <div className="selection-hero-brand selection-hero-brand--left">
+              <div className="selection-hero-brand__title">叙世</div>
+              <div className="selection-hero-brand__subtitle">视觉叙事 RPG</div>
+            </div>
+            <p className="mt-8 text-[11px] font-semibold tracking-[0.32em] text-emerald-200/70">
+              账号激活
+            </p>
+            <h1 className="mt-3 text-3xl font-semibold tracking-tight text-zinc-50 md:text-4xl">
+              绑定手机号
+            </h1>
+            <p className="mt-4 max-w-md text-sm leading-7 text-zinc-300">
+              微信身份已建立，还差最后一步。绑定手机号后，你的账号才会正式激活，并同步到后端存档体系。
+            </p>
+            <div className="mt-8 rounded-2xl border border-white/8 bg-white/5 px-4 py-4 text-sm text-zinc-300">
+              当前登录身份：{user.displayName}
+            </div>
+          </div>
+
+          <form
+            className="flex flex-col justify-center gap-5 px-6 py-8 md:px-10 md:py-12"
+            onSubmit={(event) => {
+              event.preventDefault();
+              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-emerald-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-emerald-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-emerald-300/25 px-4 text-sm font-medium text-emerald-100 transition hover:border-emerald-300/55 hover:bg-emerald-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}
+            />
+
+            {error ? (
+              <div className="rounded-2xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
+                {error}
+              </div>
+            ) : null}
+
+            <button
+              type="submit"
+              disabled={binding || !phone.trim() || !code.trim()}
+              className="h-12 rounded-2xl bg-[linear-gradient(135deg,_#10b981,_#22c55e)] px-4 text-base font-medium text-zinc-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {binding ? '正在绑定...' : '绑定手机号并进入游戏'}
+            </button>
+
+            <button
+              type="button"
+              className="h-11 rounded-2xl border border-white/10 px-4 text-sm text-zinc-300 transition hover:border-white/25 hover:text-white"
+              onClick={() => {
+                void onLogout();
+              }}
+            >
+              返回其他登录方式
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}