Compare commits
17 Commits
d830b73770
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fdd1d0c17b | ||
|
|
42c2fb4ce3 | ||
|
|
2e85be4657 | ||
|
|
dad28881ed | ||
|
|
0c6c0ae1ac | ||
|
|
2124790c8d | ||
| f5455afaf2 | |||
| eed6920d4a | |||
| 00984b6d67 | |||
| 344cae80af | |||
| 321b32e312 | |||
| 914ea7524b | |||
| 33342d1a85 | |||
| acf04cad9b | |||
|
|
87a8042b77 | ||
|
|
f3dc7cda21 | ||
| 4d3f34e1c8 |
41
.dockerignore
Normal file
41
.dockerignore
Normal file
@@ -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
|
||||
85
.gitea/workflows/docker-build.yml
Normal file
85
.gitea/workflows/docker-build.yml
Normal file
@@ -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
|
||||
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
9
.idea/carrotskin.iml
generated
Normal file
9
.idea/carrotskin.iml
generated
Normal file
@@ -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>
|
||||
9
.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml
generated
Normal file
9
.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml
generated
Normal file
@@ -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>
|
||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@@ -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>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -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>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
49
Dockerfile
Normal file
49
Dockerfile
Normal file
@@ -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"]
|
||||
@@ -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;
|
||||
|
||||
135
package-lock.json
generated
135
package-lock.json
generated
@@ -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",
|
||||
"peer": true
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
height={200}
|
||||
className="w-full h-full"
|
||||
width={180}
|
||||
height={180}
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
height={300}
|
||||
className={`w-full h-full transition-all duration-500 ${
|
||||
imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
|
||||
} ${isHovered ? 'scale-110' : ''}`}
|
||||
width={280}
|
||||
height={280}
|
||||
className={`transition-opacity duration-500 ${
|
||||
imageLoaded ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
autoRotate={isHovered}
|
||||
walking={false}
|
||||
onImageLoaded={() => setImageLoaded(true)}
|
||||
|
||||
@@ -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'}
|
||||
|
||||
@@ -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,
|
||||
height: canvas.clientHeight || height,
|
||||
width: width,
|
||||
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',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
width: width,
|
||||
height: height
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
486
src/components/SliderCaptcha.tsx
Normal file
486
src/components/SliderCaptcha.tsx
Normal file
@@ -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;
|
||||
@@ -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}
|
||||
height={200}
|
||||
className="w-full h-full"
|
||||
width={180}
|
||||
height={180}
|
||||
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)}
|
||||
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"
|
||||
onClick={() => onSelectSkin(profile.uuid)}
|
||||
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)}
|
||||
|
||||
@@ -68,7 +68,6 @@ export default function MySkinsTab({
|
||||
key={skin.id}
|
||||
texture={skin}
|
||||
onViewDetails={handleViewDetails}
|
||||
onToggleVisibility={onToggleVisibility}
|
||||
customActions={
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
|
||||
@@ -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 }),
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user