1

src/components/auth/CaptchaChallengeField.tsx

@@ -0,0 +1,34 @@
+import type { AuthCaptchaChallenge } from '../../services/authService';
+
+type CaptchaChallengeFieldProps = {
+  challenge: AuthCaptchaChallenge | null;
+  answer: string;
+  onAnswerChange: (value: string) => void;
+};
+
+export function CaptchaChallengeField({
+  challenge,
+  answer,
+  onAnswerChange,
+}: CaptchaChallengeFieldProps) {
+  if (!challenge) {
+    return null;
+  }
+
+  return (
+    <div className="grid gap-3 rounded-2xl border border-sky-300/20 bg-sky-500/10 px-4 py-4">
+      <div className="text-sm leading-6 text-sky-100">{challenge.promptText}</div>
+      <img
+        src={challenge.imageDataUrl}
+        alt="图形验证码"
+        className="h-14 w-40 rounded-2xl border border-white/10 bg-black/20 object-cover"
+      />
+      <input
+        className="h-11 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-sky-300/45 focus:bg-black/40"
+        value={answer}
+        placeholder="输入图形验证码"
+        onChange={(event) => onAnswerChange(event.target.value)}
+      />
+    </div>
+  );
+}