移除了滑动验证码的延迟渲染

添加了滑动验证码组件
2026-02-14 00:11:00 +08:00 · 2026-02-13 23:59:56 +08:00 · 2026-02-12 20:54:06 +08:00 · 2026-01-22 20:52:08 +08:00 · 2026-01-22 20:44:19 +08:00 · 2026-01-20 01:18:26 +08:00
21 changed files with 782 additions and 105 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

+# VS Code Workspace File
+*.code-workspace
+
 # dependencies
 /node_modules
 /.pnp
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
--- a/.idea/carrotskin.iml
+++ b/.idea/carrotskin.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml
+++ b/.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml
@@ -0,0 +1,9 @@
+<component name="libraryTable">
+  <library name="MPLUSRounded1c-Regular.typeface.json">
+    <CLASSES>
+      <root url="jar://$PROJECT_DIR$/node_modules/three/examples/fonts/MPLUSRounded1c/MPLUSRounded1c-Regular.typeface.json.zip!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="openjdk-24" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/carrotskin.iml" filepath="$PROJECT_DIR$/.idea/carrotskin.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/next.config.ts
+++ b/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;
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
        "@heroicons/react": "^2.2.0",
        "@prisma/client": "^7.1.0",
        "@types/three": "^0.181.0",
+        "axios": "^1.13.2",
        "framer-motion": "^12.23.25",
        "lucide-react": "^0.555.0",
        "next": "^16.1.1",
@@ -2955,6 +2956,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/available-typed-arrays": {
      "version": "1.0.7",
      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2990,6 +2997,17 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "4.1.0",
      "resolved": "https://registry.npmmirror.com/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -3125,7 +3143,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
@@ -3272,6 +3289,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -3467,6 +3496,15 @@
      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
      "license": "MIT"
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/denque": {
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/denque/-/denque-2.1.0.tgz",
@@ -3521,7 +3559,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind-apply-helpers": "^1.0.1",
@@ -3652,7 +3689,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -3662,7 +3698,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -3700,7 +3735,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0"
@@ -3713,7 +3747,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
@@ -4362,6 +4395,26 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.5",
      "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.5.tgz",
@@ -4394,6 +4447,22 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/framer-motion": {
      "version": "12.23.25",
      "resolved": "https://registry.npmmirror.com/framer-motion/-/framer-motion-12.23.25.tgz",
@@ -4425,7 +4494,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@@ -4495,7 +4563,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind-apply-helpers": "^1.0.2",
@@ -4526,7 +4593,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "dunder-proto": "^1.0.1",
@@ -4631,7 +4697,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4715,7 +4780,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4728,7 +4792,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "has-symbols": "^1.0.3"
@@ -4744,7 +4807,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "function-bind": "^1.1.2"
@@ -5816,7 +5878,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -5852,6 +5913,27 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
@@ -6611,6 +6693,12 @@
      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
      "license": "ISC"
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "@heroicons/react": "^2.2.0",
    "@prisma/client": "^7.1.0",
    "@types/three": "^0.181.0",
+    "axios": "^1.13.2",
    "framer-motion": "^12.23.25",
    "lucide-react": "^0.555.0",
    "next": "^16.1.1",
--- a/src/app/auth/page.tsx
+++ b/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>
  );
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,13 +1,13 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";
-@tailwind base;
+/* @tailwind base;
@tailwind components;
-@tailwind utilities;
+@tailwind utilities; */

 :root {
  --background: #ffffff;
  --foreground: #171717;
-  --navbar-height: 64px; /* 与pt-16对应 */
+  --navbar-height: 64px;
+  /* 与pt-16对应 */
  --primary-orange: #f97316;
  --primary-orange-dark: #ea580c;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -25,7 +25,7 @@
 body {
  color: var(--foreground);
  background: var(--background);
-  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;
 }

@@ -159,6 +159,7 @@ body {

 /* 现代布局解决方案 */
@layer utilities {
+
  /* 全屏减去navbar高度 */
  .h-screen-nav {
    height: calc(100vh - var(--navbar-height));
@@ -259,18 +260,23 @@ body {
  0% {
    background-position: 0% 50%;
  }
+
  50% {
    background-position: 100% 50%;
  }
+
  100% {
    background-position: 0% 50%;
  }
 }

@keyframes float {
-  0%, 100% {
+
+  0%,
+  100% {
    transform: translateY(0px);
  }
+
  50% {
    transform: translateY(-10px);
  }
@@ -280,6 +286,7 @@ body {
  0% {
    background-position: -200% 0;
  }
+
  100% {
    background-position: 200% 0;
  }
@@ -290,6 +297,7 @@ body {
    transform: translateY(30px);
    opacity: 0;
  }
+
  to {
    transform: translateY(0);
    opacity: 1;
@@ -301,6 +309,7 @@ body {
    transform: translateY(-30px);
    opacity: 0;
  }
+
  to {
    transform: translateY(0);
    opacity: 1;
@@ -312,6 +321,7 @@ body {
    transform: translateX(-30px);
    opacity: 0;
  }
+
  to {
    transform: translateX(0);
    opacity: 1;
@@ -323,6 +333,7 @@ body {
    transform: translateX(30px);
    opacity: 0;
  }
+
  to {
    transform: translateX(0);
    opacity: 1;
@@ -334,6 +345,7 @@ body {
    transform: scale(0.9);
    opacity: 0;
  }
+
  to {
    transform: scale(1);
    opacity: 1;
@@ -345,6 +357,7 @@ body {
    transform: scale(1);
    opacity: 1;
  }
+
  to {
    transform: scale(0.9);
    opacity: 0;
@@ -378,23 +391,19 @@ body {

 /* 加载状态样式 */
 .loading-shimmer {
-  background: linear-gradient(
-    90deg,
-    #f0f0f0 0%,
-    #e0e0e0 50%,
-    #f0f0f0 100%
-  );
+  background: linear-gradient(90deg,
+      #f0f0f0 0%,
+      #e0e0e0 50%,
+      #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
 }

 .dark .loading-shimmer {
-  background: linear-gradient(
-    90deg,
-    #374151 0%,
-    #4b5563 50%,
-    #374151 100%
-  );
+  background: linear-gradient(90deg,
+      #374151 0%,
+      #4b5563 50%,
+      #374151 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
 }
@@ -426,7 +435,10 @@ body {

 /* 响应式动效 */
@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+
+  *,
+  *::before,
+  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
@@ -435,6 +447,7 @@ body {

 /* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
+
  .btn-carrot:hover,
  .btn-carrot-outline:hover,
  .card-minecraft:hover {
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import { AuthProvider } from "@/contexts/AuthContext";
@@ -9,12 +8,6 @@ import { ErrorNotificationContainer } from "@/components/ErrorNotification";
 import ScrollToTop from "@/components/ScrollToTop";
 import PageTransition from "@/components/PageTransition";

-const inter = Inter({ 
-  subsets: ["latin"],
-  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-  display: 'swap',
-});
-
 export const metadata: Metadata = {
  title: "CarrotSkin - 现代化Minecraft Yggdrasil皮肤站",
  description: "新一代Minecraft Yggdrasil皮肤站，为创作者打造的现代化皮肤管理平台",
@@ -34,7 +27,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="zh-CN">
-      <body className={inter.className}>
+      <body>
        <AuthProvider>
          <Navbar />
          <PageTransition>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,22 +23,15 @@ export default function Home() {
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
-    let timeoutId: number | undefined;
    
    const handleMouseMove = (e: MouseEvent) => {
-      clearTimeout(timeoutId);
-      timeoutId = window.setTimeout(() => {
-        setMousePosition({ x: e.clientX, y: e.clientY });
-      }, 16);
+      setMousePosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener('mousemove', handleMouseMove);
    
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
    };
  }, []);

--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -464,7 +464,7 @@ export default function Navbar() {
      </motion.nav>

      {/* 返回顶部按钮 */}
-      <AnimatePresence>
+      {/* <AnimatePresence>
        {showScrollTop && (
          <motion.button
            initial={{ opacity: 0, scale: 0.8, y: 20 }}
@@ -485,7 +485,7 @@ export default function Navbar() {
            </motion.div>
          </motion.button>
        )}
-      </AnimatePresence>
+      </AnimatePresence> */}
    </>
  );
 }
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -41,7 +41,7 @@ export default function ScrollToTop() {
          exit={{ opacity: 0, scale: 0.8, y: 20 }}
          transition={{ duration: 0.2, ease: 'easeOut' }}
          onClick={scrollToTop}
-          className="fixed bottom-6 right-6 w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center z-40 group"
+          className="fixed bottom-6 right-6 w-12 h-12 bg-gradient-to-br from-orange-400/70 to-amber-300/70 hover:from-orange-600/70 hover:to-orange-700/70 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center z-40 group"
          whileHover={{ scale: 1.1, y: -2 }}
          whileTap={{ scale: 0.9 }}
        >
--- a/src/components/SkinCard.tsx
+++ b/src/components/SkinCard.tsx
@@ -146,7 +146,7 @@ export default function SkinCard({
      }}
    >
      {/* 3D预览区域 */}
-      <div className="relative aspect-square bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 overflow-hidden">
+      <div className="relative aspect-square bg-gradient-to-br from-orange-100 to-amber-100 dark:from-gray-600 dark:to-gray-500 overflow-hidden">
        {/* 加载状态 */}
        <AnimatePresence>
          {!imageLoaded && (
@@ -171,18 +171,20 @@ export default function SkinCard({
        </AnimatePresence>

        {texture.type === 'SKIN' ? (
-          <SkinViewer
-            skinUrl={texture.url}
-            isSlim={texture.is_slim}
-            width={300}
-            height={300}
-            className={`w-full h-full transition-all duration-500 ${
-              imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-            } ${isHovered ? 'scale-110' : ''}`}
-            autoRotate={isHovered}
-            walking={false}
-            onImageLoaded={() => setImageLoaded(true)}
-          />
+          <div className="relative w-full h-full bg-white dark:bg-gray-800">
+            <SkinViewer
+              skinUrl={texture.url}
+              isSlim={texture.is_slim}
+              width={300}
+              height={300}
+              className={`w-full h-full transition-all duration-500 ${
+                imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+              } ${isHovered ? 'scale-110' : ''}`}
+              autoRotate={isHovered}
+              walking={false}
+              onImageLoaded={() => setImageLoaded(true)}
+            />
+          </div>
        ) : (
          <div className="absolute inset-0 flex items-center justify-center">
            <motion.div 
@@ -208,7 +210,7 @@ export default function SkinCard({
            initial={{ opacity: 0 }}
            animate={{ opacity: isHovered ? 1 : 0 }}
            transition={{ duration: 0.3 }}
-            className="absolute inset-0 bg-gradient-to-br from-black/40 via-black/30 to-transparent flex items-center justify-center"
+            className="absolute inset-0 bg-gradient-to-br from-black/10 via-black/5 to-transparent flex items-center justify-center"
          >
            <div className="flex gap-3">
              <motion.button
--- a/src/components/SkinViewer.tsx
+++ b/src/components/SkinViewer.tsx
@@ -101,6 +101,10 @@ export default function SkinViewer({
      viewer.background = null; // 透明背景
      viewer.autoRotate = false; // 完全禁用自动旋转
      
+      // 调整光照设置，避免皮肤发黑
+      viewer.globalLight.intensity = 0.8; // 增加环境光强度
+      viewer.cameraLight.intensity = 0.4; // 降低相机光源强度，避免过强的阴影
+      
      // 外部预览时禁用所有动画和旋转
      if (isExternalPreview) {
        viewer.autoRotate = false;
--- a/src/components/SliderCaptcha.tsx
+++ b/src/components/SliderCaptcha.tsx
@@ -0,0 +1,487 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Shield, X, Check } from 'lucide-react';
+import axios from 'axios';
+import { API_BASE_URL } from '@/lib/api';
+
+/**
+ * 滑块验证码组件属性接口定义
+ * @interface SliderCaptchaProps
+ * @property {function} onVerify - 验证结果回调函数，参数为验证是否成功
+ * @property {function} onClose - 关闭验证码组件的回调函数
+ */
+interface SliderCaptchaProps {
+    onVerify: (success: boolean) => void;
+    onClose: () => void;
+}
+
+// 轨道宽度（与背景图宽度一致）
+const TRACK_WIDTH = 300;
+// 滑块按钮宽度
+const SLIDER_WIDTH = 50;
+// 背景图宽度（与后端返回的背景图尺寸匹配）
+// const CANVAS_WIDTH = 300;
+
+/**
+ * 滑块验证码组件
+ * 功能：通过拖拽滑块完成拼图验证，与后端交互获取验证码资源和验证结果
+ * 特点：
+ * - 支持鼠标和触摸事件，适配PC和移动端
+ * - 与后端接口交互，获取背景图、拼图和验证结果
+ * - 包含验证状态反馈和错误处理
+ * @param {SliderCaptchaProps} props - 组件属性
+ * @returns {JSX.Element} 滑块验证码组件JSX元素
+ */
+export const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify, onClose }) => {
+    // 拖拽状态：是否正在拖拽滑块
+    const [isDragging, setIsDragging] = useState(false);
+    // 滑块当前位置（x坐标）
+    const [sliderPosition, setSliderPosition] = useState(0);
+    // 拼图y坐标（从后端获取）
+    const [puzzleY, setPuzzleY] = useState(0);
+    // 验证状态：是否验证成功
+    const [isVerified, setIsVerified] = useState(false);
+    // 加载状态：是否正在加载资源或验证中
+    const [isLoading, setIsLoading] = useState(false);
+    // 尝试次数：记录验证失败的次数
+    const [attempts, setAttempts] = useState(0);
+    // 错误显示状态：是否显示验证错误提示
+    const [showError, setShowError] = useState(false);
+    // 拖拽偏移量：鼠标/触摸点与滑块中心的偏移，用于精准计算滑块位置
+    const [dragOffset, setDragOffset] = useState(0);
+    // 背景图Base64字符串（从后端获取）
+    const [backgroundImage, setBackgroundImage] = useState<string>('');
+    // 拼图Base64字符串（从后端获取）
+    const [puzzleImage, setPuzzleImage] = useState<string>('');
+    // 验证码进程ID（从后端获取，用于验证时标识当前验证码）
+    const [processId, setProcessId] = useState<string>('');
+    // 验证结果：false-未验证/验证失败，true-验证成功，'error'-请求错误
+    const [verifyResult, setVerifyResult] = useState<boolean | string>(false);
+    // 提示信息：显示后端返回的提示或默认提示
+    const [msg, setMsg] = useState<string>('拖动滑块完成拼图');
+
+
+    const sliderRef = useRef<HTMLDivElement | null>(null);
+    const trackRef = useRef<HTMLDivElement | null>(null);
+
+    /**
+     * 获取验证码资源（背景图、拼图、位置信息等）
+     * 从后端接口请求验证码所需的资源数据，包括背景图、拼图的Base64编码，
+     * 拼图的y坐标和进程ID，并初始化拼图的x坐标
+     */
+    const fetchCaptchaResources = useCallback(async () => {
+        try {
+            // 开始加载，设置加载状态
+            setIsLoading(true);
+            // 请求验证码资源接口
+            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;
+
+            // 后端返回成功状态（code=200）
+            if (code === 200) {
+                // 设置背景图
+                setBackgroundImage(masterImage);
+                // 设置拼图图片
+                setPuzzleImage(tileImage);
+                // 设置拼图y坐标（从后端获取，以背景图左上角为原点）
+                setPuzzleY(y);
+                // 设置进程ID（用于后续验证）
+                setProcessId(captchaId);
+                // 随机生成拼图x坐标（确保拼图在背景图内）
+                // setPuzzlePosition(Math.random() * (CANVAS_WIDTH - 50 - 50) + 50);
+                // 保存后端返回的提示信息
+                setMsg(resMsg);
+                // 结束加载状态
+                setIsLoading(false);
+                return;
+            }
+
+            // 后端返回失败状态（非200）
+            setMsg(resMsg || '生成验证码失败');
+            setVerifyResult('error');
+            setIsLoading(false);
+
+        } catch (error) {
+            // 捕获请求异常
+            const errMsg = '获取验证码资源失败: ' + (error as Error).message;
+            console.error(errMsg);
+            setMsg(errMsg);
+            setVerifyResult('error');
+            setIsLoading(false);
+        }
+    }, []);
+
+    /**
+     * 组件挂载时自动获取验证码资源
+     * 依赖fetchCaptchaResources函数，确保函数变化时重新执行
+     */
+    useEffect(() => {
+        fetchCaptchaResources();
+    }, [fetchCaptchaResources]);
+
+    /**
+     * 开始拖拽处理函数
+     * 记录初始拖拽位置和偏移量，设置拖拽状态
+     * @param {number} clientX - 鼠标/触摸点的x坐标
+     */
+    const handleStart = useCallback((clientX: number) => {
+        if (isVerified || isLoading || verifyResult === 'error') return;
+        setIsDragging(true);
+        setShowError(false);
+        const slider = sliderRef.current;
+        if (slider) {
+            const rect = slider.getBoundingClientRect();
+            setDragOffset(clientX - rect.left - SLIDER_WIDTH / 2);
+        }
+    }, [isVerified, isLoading, verifyResult]);
+
+    /**
+     * 拖拽移动处理函数
+     * 根据鼠标/触摸点的移动更新滑块位置，限制滑块在轨道范围内
+     * @param {number} clientX - 鼠标/触摸点的x坐标
+     */
+    const handleMove = useCallback((clientX: number) => {
+        if (!isDragging || isVerified || isLoading || verifyResult === 'error') return;
+        const track = trackRef.current;
+        if (!track) return;
+        const rect = track.getBoundingClientRect();
+        const x = clientX - rect.left - dragOffset;
+        const maxPosition = TRACK_WIDTH - SLIDER_WIDTH;
+        const newPosition = Math.max(0, Math.min(x, maxPosition));
+        setSliderPosition(newPosition);
+    }, [isDragging, isVerified, isLoading, dragOffset, verifyResult]);
+
+    /**
+     * 结束拖拽处理函数
+     * 拖拽结束后向后端发送验证请求，处理验证结果
+     */
+    const handleEnd = useCallback(async () => {
+        if (!isDragging || isVerified || isLoading || verifyResult === 'error') return;
+        setIsDragging(false);
+        setIsLoading(true);
+
+        try {
+            // 向后端发送验证请求，参数为滑块位置（x坐标）和进程ID
+            // 使用sliderPosition作为dx值，这是拼图块左上角的位置
+            const response = await axios.post(`${API_BASE_URL}/captcha/verify`, {
+                dx: sliderPosition, // 滑块位置（拼图左上角x坐标，以背景图左上角为原点）
+                captchaId: processId // 验证码进程ID
+            },{ withCredentials: true });
+
+            const { code, msg: resMsg, data } = response.data;
+            // 保存后端返回的提示信息
+            setMsg(resMsg);
+
+            // 根据后端返回的code判断验证结果
+            // 验证成功：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);
+                    setVerifyResult(false);
+                    setIsVerified(false);
+                }, 1500);
+            }
+            // 后端返回系统错误（500）
+            else if (code === 500) {
+                // 系统错误显示橙色
+                setVerifyResult('error');
+                setShowError(true);
+                setIsVerified(false);
+                // 增加尝试次数
+                setAttempts(prev => prev + 1);
+                // 1.5秒后重置滑块位置、隐藏错误提示并重置验证结果
+                setTimeout(() => {
+                    setSliderPosition(0);
+                    setShowError(false);
+                    setVerifyResult(false);
+                    setIsVerified(false);
+                }, 1500);
+            }
+
+        } catch (error) {
+            // 捕获验证请求异常
+            const errMsg = '验证请求失败: ' + (error as Error).message;
+            console.error(errMsg);
+            setMsg(errMsg);
+            setVerifyResult('error');
+            setShowError(true);
+            // 1.5秒后重置滑块位置并隐藏错误提示
+            setTimeout(() => {
+                setSliderPosition(0);
+                setShowError(false);
+            }, 1500);
+        } finally {
+            // 无论成功失败，都结束加载状态
+            setIsLoading(false);
+        }
+    }, [isDragging, isVerified, isLoading, sliderPosition, processId, onVerify, verifyResult]);
+
+    /**
+     * 鼠标按下事件处理
+     * 阻止默认行为，调用开始拖拽函数
+     * @param {React.MouseEvent} e - 鼠标事件对象
+     */
+    const handleMouseDown = (e: React.MouseEvent) => {
+        e.preventDefault();
+        handleStart(e.clientX);
+    };
+
+    /**
+     * 鼠标移动事件处理
+     * 阻止默认行为，调用拖拽移动函数
+     * @param {MouseEvent} e - 鼠标事件对象
+     */
+    const handleMouseMove = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        handleMove(e.clientX);
+    }, [handleMove]);
+
+    /**
+     * 鼠标释放事件处理
+     * 阻止默认行为，调用结束拖拽函数
+     * @param {MouseEvent} e - 鼠标事件对象
+     */
+    const handleMouseUp = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        handleEnd();
+    }, [handleEnd]);
+
+    /**
+     * 触摸开始事件处理
+     * 阻止默认行为，调用开始拖拽函数（适配移动端）
+     * @param {React.TouchEvent} e - 触摸事件对象
+     */
+    const handleTouchStart = (e: React.TouchEvent) => {
+        e.preventDefault();
+        handleStart(e.touches[0].clientX);
+    };
+
+    /**
+     * 触摸移动事件处理
+     * 阻止默认行为，调用拖拽移动函数（适配移动端）
+     * @param {TouchEvent} e - 触摸事件对象
+     */
+    const handleTouchMove = useCallback((e: TouchEvent) => {
+        e.preventDefault();
+        handleMove(e.touches[0].clientX);
+    }, [handleMove]);
+
+    /**
+     * 触摸结束事件处理
+     * 阻止默认行为，调用结束拖拽函数（适配移动端）
+     * @param {TouchEvent} e - 触摸事件对象
+     */
+    const handleTouchEnd = useCallback((e: TouchEvent) => {
+        e.preventDefault();
+        handleEnd();
+    }, [handleEnd]);
+
+    /**
+     * 拖拽状态变化时绑定/解绑全局事件
+     * 当开始拖拽时，为document绑定鼠标和触摸移动/结束事件；
+     * 当结束拖拽时，移除这些事件监听
+     */
+    useEffect(() => {
+        if (isDragging) {
+            // 绑定鼠标事件
+            document.addEventListener('mousemove', handleMouseMove, { passive: false });
+            document.addEventListener('mouseup', handleMouseUp, { passive: false });
+            // 绑定触摸事件
+            document.addEventListener('touchmove', handleTouchMove, { passive: false });
+            document.addEventListener('touchend', handleTouchEnd, { passive: false });
+            // 组件卸载或拖拽状态结束时，移除事件监听
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
+            };
+        }
+    }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+
+    /**
+     * 获取滑块显示的图标
+     * 根据不同状态（加载中、已验证、错误、默认）返回不同图标
+     * @returns {JSX.Element} 滑块图标
+     */
+    const getSliderIcon = () => {
+        if (isLoading) {
+            // 加载中显示旋转动画
+            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') {
+            return <X className="w-5 h-5 text-red-600" />;
+        }
+        // 默认显示蓝色圆点
+        return <div className="w-3 h-3 bg-blue-500 rounded-full" />;
+    };
+
+
+    const getStatusText = () => {
+        if (isVerified) {
+            // 验证成功时优先显示成功消息
+            return msg;
+        }
+        if (verifyResult === 'error' || showError) {
+            // 错误或验证失败时显示后端返回的消息
+            return msg;
+        }
+        // 默认显示拖拽提示
+        return '拖动滑块完成拼图';
+    };
+
+
+    const getStatusColor = () => {
+        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 (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';
+        // 默认显示蓝色渐变
+        return 'bg-gradient-to-r from-blue-400 to-blue-500';
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-auto transform transition-all duration-300 scale-100">
+                {/* 头部区域：显示标题和关闭按钮 */}
+                <div className="flex items-center justify-between p-6 border-b border-gray-100">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+                            <Shield className="w-4 h-4 text-white" />
+                        </div>
+                        <h3 className="text-lg font-semibold text-gray-900">安全验证</h3>
+                    </div>
+                    {/* 关闭按钮 */}
+                    <button onClick={onClose} className="p-2 rounded-lg hover:bg-gray-100 transition-colors" title="关闭">
+                        <X className="w-4 h-4 text-gray-500" />
+                    </button>
+                </div>
+
+                {/* 显示验证码图片和滑块 */}
+                <div className="p-6">
+                    <div className="relative">
+                        {/* 背景图片容器：尺寸300x200px，与后端图片尺寸匹配 */}
+                        <div className="relative bg-gray-200 rounded-lg w-[300px] h-[200px] mb-4 overflow-hidden mx-auto">
+                            {backgroundImage && (
+                                <img
+                                    src={backgroundImage}
+                                    alt="验证背景"
+                                    className="h-full w-full object-cover" // 图片填满容器
+                                />
+                            )}
+                            {/* 可移动拼图块 */}
+                            {puzzleImage && (
+                                <div
+                                    className={`absolute ${isDragging ? '' : 'transition-all duration-300'}`}
+                                    style={{
+                                        left: `${sliderPosition}px`, // 滑块x位置（拼图左上角x坐标）
+                                        top: `${puzzleY}px`, // 拼图y位置（从后端获取，拼图左上角y坐标）
+                                        zIndex: 10,
+                                    }}
+                                >
+                                    <img
+                                        src={puzzleImage}
+                                        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))'
+                                        }}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                        {/* 提示文本 */}
+                        <p className="text-sm text-gray-600 mb-4 text-center">{getStatusText()}</p>
+                    </div>
+
+                    {/* 滑动轨道 */}
+                    <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()}`}
+                            style={{
+                                width: `${sliderPosition + SLIDER_WIDTH}px`,
+                                transform: isDragging ? 'scaleY(1.05)' : 'scaleY(1)',
+                                transformOrigin: 'bottom'
+                            }}
+                        />
+                        {/* 滑块按钮 */}
+                        <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 ${
+                                isDragging ? 'scale-110 shadow-xl' : 'scale-100'
+                            } ${isVerified || verifyResult === 'error' ? 'cursor-default' : 'cursor-grab active:cursor-grabbing'}`}
+                            style={{ left: `${sliderPosition + 2}px`, zIndex: 10 }}
+                            onMouseDown={handleMouseDown}
+                            onTouchStart={handleTouchStart}
+                            ref={sliderRef}
+                            disabled={verifyResult === 'error'}
+                        >
+                            {getSliderIcon()}
+                        </div>
+                        {/* 轨道上的提示文字 */}
+                        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+              <span className={`text-sm font-medium transition-all duration-300 ${
+                  sliderPosition > 60 ? 'opacity-0 transform translate-x-4' : 'opacity-100 transform translate-x-0'
+              } ${getStatusColor()}`}>
+                {getStatusText()}
+              </span>
+                        </div>
+                    </div>
+                </div>
+
+
+                {/* 底部信息区域 */}
+                <div className="px-6 pb-6">
+                    <div className="flex items-center justify-between text-xs text-gray-500">
+                        <span>尝试次数: {attempts}</span>
+                        <span className="flex items-center space-x-1">
+              <Shield className="w-3 h-3" />
+              <span>安全验证</span>
+            </span>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SliderCaptcha;
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,4 +1,4 @@
-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;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -32,7 +32,7 @@ const config: Config = {
      },
      fontFamily: {
        'minecraft': ['Minecraft', 'monospace'],
-        'sans': ['Inter', 'system-ui', 'sans-serif'],
+        'sans': ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
      },
      animation: {
        'float': 'float 3s ease-in-out infinite',
Author	SHA1	Message	Date
LostSalt	eed6920d4a	移除了滑动验证码的延迟渲染	2026-02-14 00:11:00 +08:00
LostSalt	00984b6d67	移除了滑动验证码的延迟渲染	2026-02-13 23:59:56 +08:00
LostSalt	321b32e312	添加了滑动验证码组件	2026-02-12 20:54:06 +08:00
LostSalt	33342d1a85	集成了滑动验证码组件于注册界面	2026-01-22 20:52:08 +08:00
LostSalt	acf04cad9b	添加了滑动验证码组件	2026-01-22 20:44:19 +08:00
LostSalt	87a8042b77	添加了滑动验证码组件	2026-01-20 01:18:26 +08:00
LostSalt	f3dc7cda21	添加了滑动验证码组件	2026-01-20 01:13:56 +08:00
Mikuisnotavailable	d830b73770	移除神必谷歌字体	2026-01-19 20:08:54 +08:00
WHiTEMax	6b7a057cb4	修复：主界面下拉出现两个重复的回到页面顶部按钮。注释了NavBar.tsx中的按钮，保留并修改了scrollToTop.tsx中的按钮样式。	2026-01-13 20:32:13 +08:00
WHiTEMax	f1e8437d31	更新了package-lock.json（npm自动更新）	2026-01-13 17:49:22 +08:00
WHiTEMax	0c7a54fb1f	修改了css文件头的过时导包语法，在gitignore中添加排除vscode工作区文件	2026-01-13 17:23:04 +08:00
兰一民	fba619d884	Merge pull request 'main' (#4 ) from uNagi/carrotskin:main into main Reviewed-on: CarrotSkin/carrotskin#4	2026-01-11 18:54:00 +08:00
兰一民	d7e627a8db	Merge branch 'main' into main	2026-01-11 18:53:11 +08:00
Mikuisnotavailable	70c541d57c	修复：移除鼠标跟随元素的防抖处理,因为我发现抖动是因为我这边性能不行（	2026-01-10 16:40:37 +08:00
lafay	fe3f324b22	refactor: enhance SkinCard and SkinViewer components for improved visuals - Updated background gradient colors in SkinCard for better contrast. - Wrapped SkinViewer in a div for consistent styling and layout. - Adjusted overlay gradient opacity in SkinCard for a subtler effect. - Increased global light intensity and adjusted camera light in SkinViewer to enhance skin visibility and reduce harsh shadows.	2026-01-10 02:55:43 +08:00