CarrotSkin/carrotskin
7
1
Fork 1
Code Issues 3 Pull Requests Actions Packages Releases Wiki Activity

Compare commits

base: CarrotSkin:feature/slide-captcha
Branches Tags
CarrotSkin:main CarrotSkin:feature/slide-captcha uNagi:main
..
compare: uNagi:914ea7524bd77c54ba4bb1a75b569fa3933e85c5
Branches Tags
uNagi:main CarrotSkin:main CarrotSkin:feature/slide-captcha

2 Commits
feature/sl ... 914ea7524b

Author SHA1 Message Date
LostSalt
914ea7524b Merge pull request 'WIP：合并滑动验证码于注册' (#6) from feature/slide-captcha into main 
Reviewed-on: #6
 2026-01-22 21:23:49 +08:00
兰一民
4d3f34e1c8 Merge pull request '移除神必谷歌字体' (#5) from uNagi/carrotskin:main into main 
Reviewed-on: #5
 2026-01-19 21:23:40 +08:00
4 changed files with 43 additions and 71 deletions
Expand all files Collapse all files

8
next.config.ts
View File

@@ -2,14 +2,6 @@ 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;

2
src/app/auth/page.tsx
View File

@@ -768,4 +768,4 @@ export default function AuthPage() {
</div>
);
}
}

102
src/components/SliderCaptcha.tsx
View File

@@ -76,19 +76,18 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
const response = await axios.get(`${API_BASE_URL}/captcha/generate`, {
withCredentials: true // 关键：允许跨域携带凭证
});
const { code, msg: resMsg, data } = response.data;
const { masterImage, tileImage, captchaId, y } = data;
const { code, msg: resMsg, captcha_id, mBase64, tBase64, y } = response.data;
// 后端返回成功状态（code=200）
if (code === 200) {
// 设置背景图
setBackgroundImage(masterImage);
setBackgroundImage(mBase64);
// 设置拼图图片
setPuzzleImage(tileImage);
setPuzzleImage(tBase64);
// 设置拼图y坐标（从后端获取，以背景图左上角为原点）
setPuzzleY(y);
// 设置进程ID（用于后续验证）
setProcessId(captchaId);
setProcessId(captcha_id);
// 随机生成拼图x坐标（确保拼图在背景图内）
// setPuzzlePosition(Math.random() * (CANVAS_WIDTH - 50 - 50) + 50);
// 保存后端返回的提示信息
@@ -164,59 +163,47 @@ 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坐标，以背景图左上角为原点）
captchaId: processId // 验证码进程ID
captcha_id: processId // 验证码进程ID
},{ withCredentials: true });
const { code, msg: resMsg, data } = response.data;
// 保存后端返回的提示信息
setMsg(resMsg);
// 根据后端返回的code判断验证结果
// 验证成功：code=200
// 后端返回成功 （code=200）
if (code === 200) {
// 增加尝试次数
setAttempts(prev => prev + 1);
// 重置所有状态，确保验证成功状态的纯净性
setShowError(false);
setVerifyResult(false);
// 直接设置验证成功状态，不使用异步更新
setIsVerified(true);
// 延迟1.2秒后调用验证成功回调
setTimeout(() => onVerify(true), 1200);
}
// 验证失败：code=400
else if (code === 400) {
// 确保错误状态的正确性：验证失败显示红色
setVerifyResult(false);
setShowError(true);
setIsVerified(false);
// 增加尝试次数
setAttempts(prev => prev + 1);
// 1.5秒后重置滑块位置、隐藏错误提示并重置验证结果
setTimeout(() => {
setSliderPosition(0);
setShowError(false);
// 验证成功（data=true）
if (data === true) {
setIsVerified(true);
setVerifyResult(true);
// 延迟1.2秒后调用验证成功回调
setTimeout(() => onVerify(true), 1200);
}
// 验证失败（data=false）
else {
setVerifyResult(false);
setIsVerified(false);
}, 1500);
setShowError(true);
// 增加尝试次数
setAttempts(prev => prev + 1);
// 1.5秒后重置滑块位置并隐藏错误提示
setTimeout(() => {
setSliderPosition(0);
setShowError(false);
}, 1500);
}
}
// 后端返回系统错误（500）
else if (code === 500) {
// 系统错误显示橙色
// 后端返回参数错误（400）或系统错误（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);
}
@@ -331,12 +318,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 || verifyResult === 'error') {
if (showError) {
// 验证失败显示叉号图标
return <X className="w-5 h-5 text-red-600" />;
}
// 默认显示蓝色圆点
@@ -345,12 +332,8 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
const getStatusText = () => {
if (isVerified) {
// 验证成功时优先显示成功消息
return msg;
}
if (verifyResult === 'error' || showError) {
// 错误或验证失败时显示后端返回的消息
if (verifyResult === 'error' || showError || isVerified) {
// 错误、验证失败或成功时显示后端返回的消息
return msg;
}
// 默认显示拖拽提示
@@ -359,21 +342,17 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
const getStatusColor = () => {
if (isVerified) return 'text-green-700';
if (verifyResult === 'error') return 'text-orange-700';
if (isVerified) return 'text-green-700';
if (showError) return 'text-red-700';
return 'text-gray-600';
};
const getProgressColor = () => {
// 验证成功时，无论其他状态如何，都显示绿色渐变
if (isVerified) return 'bg-gradient-to-r from-green-400 to-green-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';
// 默认显示蓝色渐变
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';
return 'bg-gradient-to-r from-blue-400 to-blue-500';
};
@@ -407,9 +386,9 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
/>
)}
{/* 可移动拼图块 */}
{puzzleImage && (
{puzzleImage && !isVerified && (
<div
className={`absolute ${isDragging ? '' : 'transition-all duration-300'}`}
className="absolute transition-all duration-300"
style={{
left: `${sliderPosition}px`, // 滑块x位置（拼图左上角x坐标）
top: `${puzzleY}px`, // 拼图y位置（从后端获取，拼图左上角y坐标）
@@ -421,6 +400,7 @@ 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))'
}}
/>
@@ -435,7 +415,7 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
<div className="relative bg-gray-100 rounded-full h-12 overflow-hidden select-none" ref={trackRef} style={{ width: `${TRACK_WIDTH}px`, margin: '0 auto' }}>
{/* 进度条 */}
<div
className={`absolute left-0 top-0 h-full ${isDragging ? '' : 'transition-all duration-200 ease-out'} ${getProgressColor()}`}
className={`absolute left-0 top-0 h-full transition-all duration-200 ease-out ${getProgressColor()}`}
style={{
width: `${sliderPosition + SLIDER_WIDTH}px`,
transform: isDragging ? 'scaleY(1.05)' : 'scaleY(1)',
@@ -444,7 +424,7 @@ export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose
/>
{/* 滑块按钮 */}
<div
className={`absolute top-1 w-10 h-10 bg-white rounded-full shadow-lg cursor-pointer flex items-center justify-center ${isDragging ? '' : 'transition-all duration-200 ease-out'} select-none ${
className={`absolute top-1 w-10 h-10 bg-white rounded-full shadow-lg cursor-pointer flex items-center justify-center transition-all duration-200 ease-out select-none ${
isDragging ? 'scale-110 shadow-xl' : 'scale-100'
} ${isVerified || verifyResult === 'error' ? 'cursor-default' : 'cursor-grab active:cursor-grabbing'}`}
style={{ left: `${sliderPosition + 2}px`, zIndex: 10 }}
@@ -470,7 +450,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}</span>
<span>尝试次数: {attempts + 1}/5</span>
<span className="flex items-center space-x-1">
<Shield className="w-3 h-3" />
<span>安全验证</span>

2
src/lib/api.ts
View File

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