添加了滑动验证码组件

src/app/auth/page.tsx

@@ -7,6 +7,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { EyeIcon, EyeSlashIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
 import { useAuth } from '@/contexts/AuthContext';
 import { errorManager } from '@/components/ErrorNotification';
+import SliderCaptcha from '@/components/SliderCaptcha';
 
 export default function AuthPage() {
   const [isLoginMode, setIsLoginMode] = useState(true);
@@ -27,6 +28,9 @@ export default function AuthPage() {
   const [authError, setAuthError] = useState('');
   const [isSendingCode, setIsSendingCode] = useState(false);
   const [codeTimer, setCodeTimer] = useState(0);
+  const [showCaptcha, setShowCaptcha] = useState(false);
+  const [isCaptchaVerified, setIsCaptchaVerified] = useState(false);
+  const [captchaId, setCaptchaId] = useState<string | undefined>();
   
   const { login, register } = useAuth();
   const router = useRouter();
@@ -161,6 +165,39 @@ export default function AuthPage() {
     }
   };
 
+  const handleCaptchaVerify = (success: boolean) => {
+    if (success) {
+      setIsCaptchaVerified(true);
+      setShowCaptcha(false);
+      // 验证码验证成功后，继续注册流程
+      handleRegisterAfterCaptcha();
+    } else {
+      setIsCaptchaVerified(false);
+      setShowCaptcha(false);
+      errorManager.showError('验证码验证失败，请重试');
+    }
+  };
+
+  const handleRegisterAfterCaptcha = async () => {
+    setIsLoading(true);
+    setAuthError('');
+    
+    try {
+      await register(formData.username, formData.email, formData.password, formData.verificationCode, captchaId);
+      errorManager.showSuccess('注册成功！欢迎加入CarrotSkin！');
+      router.push('/');
+      
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '注册失败，请稍后重试';
+      setAuthError(errorMessage);
+      errorManager.showError(errorMessage);
+      // 注册失败时重置验证码状态
+      setIsCaptchaVerified(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     
@@ -192,21 +229,14 @@ export default function AuthPage() {
     } else {
       if (!validateRegisterForm()) return;
       
-      setIsLoading(true);
-      setAuthError('');
-      
-      try {
-        await register(formData.username, formData.email, formData.password, formData.verificationCode);
-        errorManager.showSuccess('注册成功！欢迎加入CarrotSkin！');
-        router.push('/');
-        
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : '注册失败，请稍后重试';
-        setAuthError(errorMessage);
-        errorManager.showError(errorMessage);
-      } finally {
-        setIsLoading(false);
+      // 如果验证码还未验证，显示滑动验证码
+      if (!isCaptchaVerified) {
+        setShowCaptcha(true);
+        return;
       }
+      
+      // 如果验证码已验证，直接进行注册
+      handleRegisterAfterCaptcha();
     }
   };
 
@@ -727,6 +757,15 @@ export default function AuthPage() {
           </motion.div>
         </motion.div>
       </div>
+
+      {/* Slider Captcha Component */}
+      {showCaptcha && (
+        <SliderCaptcha
+          onVerify={handleCaptchaVerify}
+          onClose={() => setShowCaptcha(false)}
+        />
+      )}
+
     </div>
   );
 }