Merge pull request '添加了滑动验证码组件' (#7) from feature/slide-captcha into main

Reviewed-on: CarrotSkin/carrotskin#7

next.config.ts

@@ -2,6 +2,14 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  rewrites: async () => {
+    return [
+      {
+        source: '/api/v1/:path*',
+        destination: 'http://localhost:8080/api/v1/:path*',
+      },
+    ];
+  },
 };
 
 export default nextConfig;

src/app/auth/page.tsx

@@ -662,6 +662,8 @@ export default function AuthPage() {
               )}
             </AnimatePresence>
 
+
+
             {/* Submit Button */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}

src/components/SliderCaptcha.tsx

@@ -76,18 +76,19 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
             const response = await axios.get(`${API_BASE_URL}/captcha/generate`, {
                 withCredentials: true // 关键：允许跨域携带凭证
             });
-            const { code, msg: resMsg, captcha_id, mBase64, tBase64, y } = response.data;
+            const { code, msg: resMsg, data } = response.data;
+            const { masterImage, tileImage, captchaId, y } = data;
 
             // 后端返回成功状态（code=200）
             if (code === 200) {
                 // 设置背景图
-                setBackgroundImage(mBase64);
+                setBackgroundImage(masterImage);
                 // 设置拼图图片
-                setPuzzleImage(tBase64);
+                setPuzzleImage(tileImage);
                 // 设置拼图y坐标（从后端获取，以背景图左上角为原点）
                 setPuzzleY(y);
                 // 设置进程ID（用于后续验证）
-                setProcessId(captcha_id);
+                setProcessId(captchaId);
                 // 随机生成拼图x坐标（确保拼图在背景图内）
                 // setPuzzlePosition(Math.random() * (CANVAS_WIDTH - 50 - 50) + 50);
                 // 保存后端返回的提示信息
@@ -163,47 +164,59 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
 
         try {
             // 向后端发送验证请求，参数为滑块位置（x坐标）和进程ID
+            // 使用sliderPosition作为dx值，这是拼图块左上角的位置
             const response = await axios.post(`${API_BASE_URL}/captcha/verify`, {
                 dx: sliderPosition, // 滑块位置（拼图左上角x坐标，以背景图左上角为原点）
-                captcha_id: processId // 验证码进程ID
+                captchaId: processId // 验证码进程ID
             },{ withCredentials: true });
 
             const { code, msg: resMsg, data } = response.data;
             // 保存后端返回的提示信息
             setMsg(resMsg);
 
-            // 后端返回成功 （code=200）
+            // 根据后端返回的code判断验证结果
+            // 验证成功：code=200
             if (code === 200) {
-                // 验证成功（data=true）
+                // 增加尝试次数
-                if (data === true) {
+                setAttempts(prev => prev + 1);
+                // 重置所有状态，确保验证成功状态的纯净性
+                setShowError(false);
+                setVerifyResult(false);
+                // 直接设置验证成功状态，不使用异步更新
                 setIsVerified(true);
-                    setVerifyResult(true);
                 // 延迟1.2秒后调用验证成功回调
                 setTimeout(() => onVerify(true), 1200);
             }
-                // 验证失败（data=false）
+            // 验证失败：code=400
-                else {
+            else if (code === 400) {
+                // 确保错误状态的正确性：验证失败显示红色
                 setVerifyResult(false);
                 setShowError(true);
+                setIsVerified(false);
                 // 增加尝试次数
                 setAttempts(prev => prev + 1);
-                    // 1.5秒后重置滑块位置并隐藏错误提示
+                // 1.5秒后重置滑块位置、隐藏错误提示并重置验证结果
                 setTimeout(() => {
                     setSliderPosition(0);
                     setShowError(false);
+                    setVerifyResult(false);
+                    setIsVerified(false);
                 }, 1500);
             }
-            }
+            // 后端返回系统错误（500）
-            // 后端返回参数错误（400）或系统错误（500）
+            else if (code === 500) {
-            else if (code === 400 || code === 500) {
+                // 系统错误显示橙色
                 setVerifyResult('error');
                 setShowError(true);
+                setIsVerified(false);
                 // 增加尝试次数
                 setAttempts(prev => prev + 1);
-                // 1.5秒后重置滑块位置并隐藏错误提示
+                // 1.5秒后重置滑块位置、隐藏错误提示并重置验证结果
                 setTimeout(() => {
                     setSliderPosition(0);
                     setShowError(false);
+                    setVerifyResult(false);
+                    setIsVerified(false);
                 }, 1500);
             }
 
@@ -318,12 +331,12 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
             // 加载中显示旋转动画
             return <div className="w-5 h-5 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" />;
         }
+        // 验证成功时，无论其他状态如何，都显示对勾图标
         if (isVerified) {
-            // 验证成功显示对勾图标
             return <Check className="w-5 h-5 text-green-600" />;
         }
-        if (showError) {
+        // 验证失败或错误时显示叉号图标
-            // 验证失败显示叉号图标
+        if (showError || verifyResult === 'error') {
             return <X className="w-5 h-5 text-red-600" />;
         }
         // 默认显示蓝色圆点
@@ -332,8 +345,12 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
 
 
     const getStatusText = () => {
-        if (verifyResult === 'error' || showError || isVerified) {
+        if (isVerified) {
-            // 错误、验证失败或成功时显示后端返回的消息
+            // 验证成功时优先显示成功消息
+            return msg;
+        }
+        if (verifyResult === 'error' || showError) {
+            // 错误或验证失败时显示后端返回的消息
             return msg;
         }
         // 默认显示拖拽提示
@@ -342,17 +359,21 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
 
 
     const getStatusColor = () => {
-        if (verifyResult === 'error') return 'text-orange-700';
         if (isVerified) return 'text-green-700';
+        if (verifyResult === 'error') return 'text-orange-700';
         if (showError) return 'text-red-700';
         return 'text-gray-600';
     };
 
 
     const getProgressColor = () => {
-        if (verifyResult === 'error') return 'bg-gradient-to-r from-orange-400 to-orange-500';
+        // 验证成功时，无论其他状态如何，都显示绿色渐变
         if (isVerified) return 'bg-gradient-to-r from-green-400 to-green-500';
-        if (showError) return 'bg-gradient-to-r from-red-400 to-red-500';
+        // 系统错误（后端返回400/500）显示橙色渐变
+        if (verifyResult === 'error') return 'bg-gradient-to-r from-orange-400 to-orange-500';
+        // 验证失败（后端返回200但data=false）显示红色渐变
+        if (showError && verifyResult !== 'error') return 'bg-gradient-to-r from-red-400 to-red-500';
+        // 默认显示蓝色渐变
         return 'bg-gradient-to-r from-blue-400 to-blue-500';
     };
 
@@ -386,7 +407,7 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
                                 />
                             )}
                             {/* 可移动拼图块 */}
-                            {puzzleImage && !isVerified && (
+                            {puzzleImage && (
                                 <div
                                     className="absolute transition-all duration-300"
                                     style={{
@@ -400,7 +421,6 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
                                         alt="拼图块"
                                         className={`${isVerified ? 'opacity-100' : 'opacity-90'}`}
                                         style={{
-
                                             filter: isVerified ? 'drop-shadow(0 0 10px rgba(34, 197, 94, 0.5))' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))'
                                         }}
                                     />
@@ -450,7 +470,7 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
                 {/* 底部信息区域 */}
                 <div className="px-6 pb-6">
                     <div className="flex items-center justify-between text-xs text-gray-500">
-                        <span>尝试次数: {attempts + 1}/5</span>
+                        <span>尝试次数: {attempts}</span>
                         <span className="flex items-center space-x-1">
               <Shield className="w-3 h-3" />
               <span>安全验证</span>

src/lib/api.ts

@@ -1,4 +1,4 @@
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080/api/v1';
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || '/api/v1';
 
 export interface Texture {
   id: number;