fix: 修复ci缓存导致的错误

Add Docker configuration with standalone output mode for containerized
deployment. Implement texture deletion API with proper error handling
and user feedback. Fix skin viewer sizing issues by using explicit
dimensions and removing conflicting layout properties. Add captcha
ID parameter to registration flow. Improve profile page UX including
Yggdrasil password reset display and character card editing controls.

.dockerignore

@@ -0,0 +1,41 @@
+# 依赖
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js 构建产物
+.next
+out
+
+# 测试
+coverage
+.nyc_output
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# 操作系统
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile
+.dockerignore
+
+# 文档
+docs
+*.md
+
+# 其他
+.env
+.env.local
+.env.*.local

.gitea/workflows/docker-build.yml

@@ -0,0 +1,85 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - develop
+  pull_request:
+    branches:
+      - main
+      - master
+  workflow_dispatch:
+
+env:
+  REGISTRY: code.littlelan.cn
+  IMAGE_NAME: carrotskin/carrotskin
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            # main/master 分支标记为 latest
+            type=raw,value=latest,enable={{is_default_branch}}
+            # 所有分支的标签
+            type=ref,event=branch
+            # Git tag 时创建版本标签（如 1.0.0, 1.0）
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            # 每次构建的 SHA 标签
+            type=sha
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64
+          provenance: false
+          # 禁用 buildcache 以避免 413 错误
+          # cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache
+          # cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache,mode=max
+
+      - name: Show image tags
+        run: |
+          echo "Built and pushed image with tags:"
+          echo "${{ steps.meta.outputs.tags }}"
+          echo ""
+          echo "Image digest: ${{ steps.meta.outputs.digest }}"
+
+      - name: Summary
+        if: always()
+        run: |
+          echo "## Docker Image Build Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Image:** ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}" >> $GITHUB_STEP_SUMMARY
+          echo "**Tags:**" >> $GITHUB_STEP_SUMMARY
+          echo "${{ steps.meta.outputs.tags }}" >> $GITHUB_STEP_SUMMARY
+          echo "**Digest:** ${{ steps.meta.outputs.digest }}" >> $GITHUB_STEP_SUMMARY

.idea/.gitignore

@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.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>

.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>

.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>

.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>

.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>

Dockerfile

@@ -0,0 +1,49 @@
+# 构建阶段
+FROM node:alpine AS builder
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制 package 文件
+COPY package*.json ./
+
+# 安装所有依赖（包括 devDependencies）
+RUN npm ci
+
+# 复制源代码
+COPY . .
+
+# 构建应用
+RUN npm run build
+
+# 生产阶段
+FROM node:alpine AS runner
+
+# 设置工作目录
+WORKDIR /app
+
+# 创建非 root 用户
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# 复制构建产物（standalone 模式）
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+# 设置正确的权限
+RUN chown -R nextjs:nodejs /app
+
+# 切换到非 root 用户
+USER nextjs
+
+# 暴露端口
+EXPOSE 3000
+
+# 设置环境变量
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# 启动应用
+CMD ["node", "server.js"]

next.config.ts

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

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",
@@ -146,7 +147,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -408,8 +408,7 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmmirror.com/@electric-sql/pglite/-/pglite-0.3.2.tgz",
       "integrity": "sha512-zfWWa+V2ViDCY/cmUfRqeWY1yLto+EpxjXnZzenB1TyxsTiXaTWeZFIZw6mac52BsuQm0RjCnisjBtdBaXOI6w==",
-      "license": "Apache-2.0",
+      "license": "Apache-2.0"
-      "peer": true
     },
     "node_modules/@electric-sql/pglite-socket": {
       "version": "0.0.6",
@@ -1503,7 +1502,6 @@
       "resolved": "https://registry.npmmirror.com/@prisma/client/-/client-7.1.0.tgz",
       "integrity": "sha512-qf7GPYHmS/xybNiSOpzv9wBo+UwqfL2PeyX+08v+KVHDI0AlSCQIh5bBySkH3alu06NX9wy98JEnckhMHoMFfA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@prisma/client-runtime-utils": "7.1.0"
       },
@@ -2122,7 +2120,6 @@
       "resolved": "https://registry.npmmirror.com/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2210,7 +2207,6 @@
       "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.1",
         "@typescript-eslint/types": "8.48.1",
@@ -2716,7 +2712,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2961,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",
@@ -2996,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",
@@ -3066,7 +3078,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3132,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",
@@ -3279,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",
@@ -3474,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",
@@ -3528,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",
@@ -3659,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"
@@ -3669,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"
@@ -3707,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"
@@ -3720,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",
@@ -3792,7 +3818,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3978,7 +4003,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4371,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",
@@ -4403,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",
@@ -4434,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"
@@ -4504,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",
@@ -4535,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",
@@ -4640,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"
@@ -4724,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"
@@ -4737,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"
@@ -4753,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"
@@ -4784,7 +4837,6 @@
       "resolved": "https://registry.npmmirror.com/hono/-/hono-4.10.6.tgz",
       "integrity": "sha512-BIdolzGpDO9MQ4nu3AUuDwHZZ+KViNm+EZ75Ae55eMXMqLVhDFqEMXxtUe9Qh8hjL+pIna/frs2j6Y2yD5Ua/g==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -5826,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"
@@ -5862,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",
@@ -6526,7 +6598,6 @@
       "resolved": "https://registry.npmmirror.com/preact/-/preact-10.24.3.tgz",
       "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -6566,7 +6637,6 @@
       "integrity": "sha512-dy/3urE4JjhdiW5b09pGjVhGI7kPESK2VlCDrCqeYK5m5SslAtG5FCGnZWP7E8Sdg+Ow1wV2mhJH5RTFL5gEsw==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@prisma/config": "7.1.0",
         "@prisma/dev": "0.15.0",
@@ -6623,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",
@@ -6685,7 +6761,6 @@
       "resolved": "https://registry.npmmirror.com/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6695,7 +6770,6 @@
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7525,7 +7599,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7700,7 +7773,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8016,7 +8088,6 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

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",

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('');
+      if (!isCaptchaVerified) {
-      
+        setShowCaptcha(true);
-      try {
+        return;
-        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);
       }
+      
+      // 如果验证码已验证，直接进行注册
+      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>
   );
 }

src/app/profile/page.tsx

@@ -38,6 +38,7 @@ import {
   generateAvatarUploadUrl,
   updateAvatarUrl,
   resetYggdrasilPassword,
+  deleteTexture,
   type Texture,
   type Profile
 } from '@/lib/api';
@@ -194,7 +195,18 @@ export default function ProfilePage() {
   const handleDeleteSkin = async (skinId: number) => {
     if (!confirm('确定要删除这个皮肤吗？')) return;
     
+    try {
+      const response = await deleteTexture(skinId);
+      if (response.code === 200) {
         setMySkins(prev => prev.filter(skin => skin.id !== skinId));
+        messageManager.success('皮肤删除成功', { duration: 3000 });
+      } else {
+        messageManager.error(response.message || '删除皮肤失败', { duration: 3000 });
+      }
+    } catch (error) {
+      console.error('删除皮肤失败:', error);
+      messageManager.error('删除皮肤失败', { duration: 3000 });
+    }
   };
 
   const handleToggleFavorite = async (skinId: number) => {
@@ -379,6 +391,8 @@ export default function ProfilePage() {
     try {
       const response = await resetYggdrasilPassword();
       if (response.code === 200) {
+        setYggdrasilPassword(response.data.password);
+        setShowYggdrasilPassword(true);
         messageManager.success('Yggdrasil密码重置成功！请妥善保管新密码。', { duration: 5000 });
       } else {
         throw new Error(response.message || '重置Yggdrasil密码失败');
@@ -955,14 +969,15 @@ export default function ProfilePage() {
                     }
                   }}
                 >
+                  <div className="w-full h-full flex items-center justify-center">
                     <SkinViewer
                       skinUrl={skin.url}
                       isSlim={skin.is_slim}
-                    width={200}
+                      width={180}
-                    height={200}
+                      height={180}
-                    className="w-full h-full"
                       autoRotate={false}
                     />
+                  </div>
                   <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2 text-center">
                     {skin.name}
                   </div>

src/components/PageTransition.tsx

@@ -2,14 +2,15 @@
 
 import { motion, AnimatePresence } from 'framer-motion';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
 
 interface PageTransitionProps {
   children: React.ReactNode;
 }
 
-export default function PageTransition({ children }: PageTransitionProps) {
+// 内部组件：使用 useSearchParams 的部分
+function PageTransitionContent({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -171,3 +172,20 @@ export default function PageTransition({ children }: PageTransitionProps) {
     </>
   );
 }
+
+// 加载状态组件
+function PageTransitionFallback() {
+  return (
+    <div className="min-h-screen">
+      {null}
+    </div>
+  );
+}
+
+export default function PageTransition({ children }: PageTransitionProps) {
+  return (
+    <Suspense fallback={<PageTransitionFallback />}>
+      <PageTransitionContent>{children}</PageTransitionContent>
+    </Suspense>
+  );
+}

src/components/SkinCard.tsx

@@ -171,15 +171,15 @@ export default function SkinCard({
         </AnimatePresence>
 
         {texture.type === 'SKIN' ? (
-          <div className="relative w-full h-full bg-white dark:bg-gray-800">
+          <div className="relative w-full h-full flex items-center justify-center bg-white dark:bg-gray-800">
             <SkinViewer
               skinUrl={texture.url}
               isSlim={texture.is_slim}
-              width={300}
+              width={280}
-              height={300}
+              height={280}
-              className={`w-full h-full transition-all duration-500 ${
+              className={`transition-opacity duration-500 ${
-                imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+                imageLoaded ? 'opacity-100' : 'opacity-0'
-              } ${isHovered ? 'scale-110' : ''}`}
+              }`}
               autoRotate={isHovered}
               walking={false}
               onImageLoaded={() => setImageLoaded(true)}

src/components/SkinDetailModal.tsx

@@ -296,7 +296,7 @@ export default function SkinDetailModal({ isOpen, onClose, texture, isExternalPr
                         isSlim={texture.is_slim}
                         width={600}
                         height={600}
-                        className="w-full h-full rounded-2xl shadow-2xl border-2 border-white/60 dark:border-gray-600/60 relative z-10"
+                        className="rounded-2xl shadow-2xl border-2 border-white/60 dark:border-gray-600/60 relative z-10"
                         autoRotate={autoRotate}
                         walking={currentAnimation === 'walking'}
                         running={currentAnimation === 'running'}

src/components/SkinViewer.tsx

@@ -83,28 +83,24 @@ export default function SkinViewer({
     try {
       console.log('初始化3D皮肤查看器:', { skinUrl, isSlim, width, height });
       
-      // 使用canvas的实际尺寸，参考blessingskin
+      // 使用传入的宽高参数初始化
       const canvas = canvasRef.current;
       const viewer = new SkinViewer3D({
         canvas: canvas,
-        width: canvas.clientWidth || width,
+        width: width,
-        height: canvas.clientHeight || height,
+        height: height,
         skin: skinUrl,
         cape: capeUrl,
         model: isSlim ? 'slim' : 'default',
-        zoom: 1.0, // 使用blessingskin的zoom方式
+        zoom: 1.0,
       });
 
       viewerRef.current = viewer;
 
-      // 设置背景和控制选项 - 参考blessingskin
+      // 设置背景和控制选项
       viewer.background = null; // 透明背景
       viewer.autoRotate = false; // 完全禁用自动旋转
       
-      // 调整光照设置，避免皮肤发黑
-      viewer.globalLight.intensity = 0.8; // 增加环境光强度
-      viewer.cameraLight.intensity = 0.4; // 降低相机光源强度，避免过强的阴影
-      
       // 外部预览时禁用所有动画和旋转
       if (isExternalPreview) {
         viewer.autoRotate = false;
@@ -268,11 +264,8 @@ export default function SkinViewer({
       ref={canvasRef}
       className={className}
       style={{ 
-        display: 'flex', 
+        width: width, 
-        justifyContent: 'center', 
+        height: height 
-        alignItems: 'center',
-        width: '100%', 
-        height: '100%' 
       }}
     />
   );

src/components/SliderCaptcha.tsx

@@ -0,0 +1,486 @@
+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={verifyResult === 'error' ? undefined : handleMouseDown}
+                            onTouchStart={verifyResult === 'error' ? undefined : handleTouchStart}
+                            ref={sliderRef}
+                        >
+                            {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;

src/components/profile/CharacterCard.tsx

@@ -42,19 +42,32 @@ export default function CharacterCard({
       transition={{ duration: 0.2 }}
     >
       <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2 flex-1">
           {isEditing ? (
             <input
               type="text"
               value={editName}
               onChange={(e) => onEditNameChange(e.target.value)}
-            className="text-lg font-semibold bg-transparent border-b border-orange-500 focus:outline-none text-gray-900 dark:text-white flex-1 mr-2"
+              className="text-lg font-semibold bg-transparent border-b border-orange-500 focus:outline-none text-gray-900 dark:text-white flex-1"
               onBlur={() => onSave(profile.uuid)}
               onKeyPress={(e) => e.key === 'Enter' && onSave(profile.uuid)}
               autoFocus
             />
           ) : (
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate flex-1">{profile.name}</h3>
+            <>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">{profile.name}</h3>
+              <motion.button
+                onClick={() => onEdit(profile.uuid, profile.name)}
+                className="text-gray-500 hover:text-orange-500 transition-colors"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                title="改名"
+              >
+                <PencilIcon className="w-4 h-4" />
+              </motion.button>
+            </>
           )}
+        </div>
         {profile.is_active && (
           <span className="px-2 py-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-xs rounded-full flex items-center space-x-1">
             <CheckIcon className="w-3 h-3" />
@@ -68,9 +81,8 @@ export default function CharacterCard({
           <SkinViewer
             skinUrl={skinUrl}
             isSlim={isSlim}
-            width={200}
+            width={180}
-            height={200}
+            height={180}
-            className="w-full h-full"
             autoRotate={false}
           />
         ) : (
@@ -82,32 +94,10 @@ export default function CharacterCard({
             <UserIcon className="w-10 h-10 text-white" />
           </motion.div>
         )}
-        
-        {/* 皮肤选择按钮 */}
-        <motion.button
-          onClick={() => onSelectSkin(profile.uuid)}
-          className="absolute bottom-2 right-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white p-2 rounded-full shadow-lg"
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-          title="选择皮肤"
-        >
-          <PencilIcon className="w-4 h-4" />
-        </motion.button>
       </div>
 
       {/* 操作按钮 */}
       <div className="flex gap-2">
-        {!profile.is_active && (
-          <motion.button
-            onClick={() => onSetActive(profile.uuid)}
-            className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-sm py-2 px-3 rounded-lg transition-all duration-200"
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            使用
-          </motion.button>
-        )}
-        
         {isEditing ? (
           <>
             <motion.button
@@ -130,13 +120,12 @@ export default function CharacterCard({
         ) : (
           <>
             <motion.button
-              onClick={() => onEdit(profile.uuid, profile.name)}
+              onClick={() => onSelectSkin(profile.uuid)}
-              className="flex-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm py-2 px-3 rounded-lg transition-all duration-200"
+              className="flex-1 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white text-sm py-2 px-3 rounded-lg transition-all duration-200"
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
             >
-              <PencilIcon className="w-4 h-4 inline mr-1" />
+              修改皮肤
-              编辑
             </motion.button>
             <motion.button
               onClick={() => onDelete(profile.uuid)}

src/components/profile/MySkinsTab.tsx

@@ -68,7 +68,6 @@ export default function MySkinsTab({
               key={skin.id}
               texture={skin}
               onViewDetails={handleViewDetails}
-              onToggleVisibility={onToggleVisibility}
               customActions={
                 <div className="flex gap-2">
                   <button

src/contexts/AuthContext.tsx

@@ -22,7 +22,7 @@ interface AuthContextType {
   isLoading: boolean;
   isAuthenticated: boolean;
   login: (username: string, password: string) => Promise<void>;
-  register: (username: string, email: string, password: string, verificationCode: string) => Promise<void>;
+  register: (username: string, email: string, password: string, verificationCode: string, captchaId?: string) => Promise<void>;
   logout: () => void;
   updateUser: (userData: Partial<User>) => void;
   refreshUser: () => Promise<void>;
@@ -106,7 +106,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const register = async (username: string, email: string, password: string, verificationCode: string) => {
+  const register = async (username: string, email: string, password: string, verificationCode: string, captchaId?: string) => {
     setIsLoading(true);
     try {
       const response = await fetch(`${API_BASE_URL}/auth/register`, {
@@ -119,6 +119,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           email,
           password,
           verification_code: verificationCode,
+          ...(captchaId && { captcha_id: captchaId }),
         }),
       });
 

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;
@@ -313,3 +313,13 @@ export async function resetYggdrasilPassword(): Promise<ApiResponse<{
   return response.json();
 }
 
+// 删除材质
+export async function deleteTexture(id: number): Promise<ApiResponse<null>> {
+  const response = await fetch(`${API_BASE_URL}/texture/${id}`, {
+    method: 'DELETE',
+    headers: getAuthHeaders(),
+  });
+
+  return response.json();
+}
+