From d69bf6c96867d976265b547d3257bf8d6072e720 Mon Sep 17 00:00:00 2001
From: Snowykami <snowykami@outlook.com>
Date: Wed, 10 Sep 2025 21:20:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86=E5=92=8C=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E6=A0=87=E8=AE=B0=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/(main)/layout.tsx                 |  1 -
 .../components/common/captcha/turnstile.tsx   | 22 +++++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/src/app/(main)/layout.tsx b/web/src/app/(main)/layout.tsx
index 71ec3bf..72f995c 100644
--- a/web/src/app/(main)/layout.tsx
+++ b/web/src/app/(main)/layout.tsx
@@ -23,7 +23,6 @@ export default function RootLayout({
           <Navbar />
         </header>
       </motion.nav>
-
       <BackgroundProvider>
         <div className='container mx-auto pt-16 px-4 sm:px-6 lg:px-10 max-w-7xl'>{children}</div>
       </BackgroundProvider>
diff --git a/web/src/components/common/captcha/turnstile.tsx b/web/src/components/common/captcha/turnstile.tsx
index 72f2a71..aa6cd1e 100644
--- a/web/src/components/common/captcha/turnstile.tsx
+++ b/web/src/components/common/captcha/turnstile.tsx
@@ -25,6 +25,18 @@ function CheckMark() {
   );
 }
 
+// 错误的叉
+function ErrorMark() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 40 }}>
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </div>
+  );
+}
+
 export function OfficialTurnstileWidget(props: CaptchaProps) {
   return <div>
     <Turnstile className="w-full" options={{ size: "invisible" }} siteKey={props.siteKey} onSuccess={props.onSuccess} />
@@ -34,20 +46,26 @@ export function OfficialTurnstileWidget(props: CaptchaProps) {
 // 自定义包装组件
 export function TurnstileWidget(props: CaptchaProps) {
   const t = useTranslations("Captcha");
-  const [status, setStatus] = useState<'loading' | 'success'>('loading');
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
 
   // 只在验证通过时才显示勾
   const handleSuccess = (token: string) => {
     setStatus('success');
     props.onSuccess(token);
   };
+
+  const handleError = (error: string) => {
+    setStatus('error');
+    props.onError && props.onError(error);
+  };
+
   return (
     <div className="flex items-center justify-evenly w-full border border-gray-300 rounded-md px-4 py-2 relative">
       {status === 'loading' && <Spinner />}
       {status === 'success' && <CheckMark />}
       <div className="flex-1 text-center">{status === 'success' ? t("success") :t("doing")}</div>
       <div className="absolute inset-0 opacity-0 pointer-events-none">
-        <OfficialTurnstileWidget {...props} onSuccess={handleSuccess} />
+        <OfficialTurnstileWidget {...props} onSuccess={handleSuccess} onError={handleError} />
       </div>
     </div>
   );