feat: 在验证码组件中添加错误状态显示,提升用户反馈体验

This commit is contained in:
2025-09-10 21:21:51 +08:00
parent d69bf6c968
commit c17100ed3c
2 changed files with 3 additions and 1 deletions

View File

@ -63,7 +63,8 @@ export function TurnstileWidget(props: CaptchaProps) {
<div className="flex items-center justify-evenly w-full border border-gray-300 rounded-md px-4 py-2 relative"> <div className="flex items-center justify-evenly w-full border border-gray-300 rounded-md px-4 py-2 relative">
{status === 'loading' && <Spinner />} {status === 'loading' && <Spinner />}
{status === 'success' && <CheckMark />} {status === 'success' && <CheckMark />}
<div className="flex-1 text-center">{status === 'success' ? t("success") :t("doing")}</div> {status === 'error' && <ErrorMark />}
<div className="flex-1 text-center">{status === 'success' ? t("success") : (status === 'error' ? t("error") : t("doing"))}</div>
<div className="absolute inset-0 opacity-0 pointer-events-none"> <div className="absolute inset-0 opacity-0 pointer-events-none">
<OfficialTurnstileWidget {...props} onSuccess={handleSuccess} onError={handleError} /> <OfficialTurnstileWidget {...props} onSuccess={handleSuccess} onError={handleError} />
</div> </div>

View File

@ -4,6 +4,7 @@
}, },
"Captcha": { "Captcha": {
"doing": "正在检测你是不是机器人...", "doing": "正在检测你是不是机器人...",
"error": "验证失败,请重试。",
"success": "恭喜,你是人类!" "success": "恭喜,你是人类!"
}, },
"Comment": { "Comment": {