kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { AuthCaptchaChallenge } from '../../services/authService';
|
|
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
|
|
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
|
import { PlatformTextField } from '../common/PlatformTextField';
|
|
|
|
type CaptchaChallengeFieldProps = {
|
|
challenge: AuthCaptchaChallenge | null;
|
|
answer: string;
|
|
onAnswerChange: (value: string) => void;
|
|
};
|
|
|
|
export function CaptchaChallengeField({
|
|
challenge,
|
|
answer,
|
|
onAnswerChange,
|
|
}: CaptchaChallengeFieldProps) {
|
|
if (!challenge) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<PlatformStatusMessage
|
|
tone="info"
|
|
surface="profile"
|
|
className="grid gap-3 rounded-2xl"
|
|
>
|
|
<div className="text-sm leading-6">{challenge.promptText}</div>
|
|
<PlatformMediaFrame
|
|
src={challenge.imageDataUrl}
|
|
alt="图形验证码"
|
|
fallbackLabel="图形验证码"
|
|
aspect="auto"
|
|
surface="soft"
|
|
className="h-14 w-40"
|
|
/>
|
|
<PlatformTextField
|
|
value={answer}
|
|
aria-label="图形验证码答案"
|
|
placeholder="输入图形验证码"
|
|
density="compact"
|
|
className="h-11"
|
|
onChange={(event) => onAnswerChange(event.target.value)}
|
|
/>
|
|
</PlatformStatusMessage>
|
|
);
|
|
}
|