diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..35410ca --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# 默认忽略的文件 +/shelf/ +/workspace.xml +# 基于编辑器的 HTTP 客户端请求 +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/carrotskin.iml b/.idea/carrotskin.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/carrotskin.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml b/.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml new file mode 100644 index 0000000..e7db204 --- /dev/null +++ b/.idea/libraries/MPLUSRounded1c_Regular_typeface_json.xml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..e9710cf --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..dfc049f --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e37697e..3fc7425 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@heroicons/react": "^2.2.0", "@prisma/client": "^7.1.0", "@types/three": "^0.181.0", + "axios": "^1.13.2", "framer-motion": "^12.23.25", "lucide-react": "^0.555.0", "next": "^16.1.1", @@ -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" } diff --git a/package.json b/package.json index e9c46f5..3d875b2 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@heroicons/react": "^2.2.0", "@prisma/client": "^7.1.0", "@types/three": "^0.181.0", + "axios": "^1.13.2", "framer-motion": "^12.23.25", "lucide-react": "^0.555.0", "next": "^16.1.1", diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index ca91280..72b6cdd 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -7,6 +7,7 @@ import { motion, AnimatePresence } from 'framer-motion'; import { EyeIcon, EyeSlashIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline'; import { useAuth } from '@/contexts/AuthContext'; import { errorManager } from '@/components/ErrorNotification'; +import SliderCaptcha from '@/components/SliderCaptcha'; export default function AuthPage() { const [isLoginMode, setIsLoginMode] = useState(true); @@ -27,6 +28,9 @@ export default function AuthPage() { const [authError, setAuthError] = useState(''); const [isSendingCode, setIsSendingCode] = useState(false); const [codeTimer, setCodeTimer] = useState(0); + const [showCaptcha, setShowCaptcha] = useState(false); + const [isCaptchaVerified, setIsCaptchaVerified] = useState(false); + const [captchaId, setCaptchaId] = useState(); 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() { + + {/* Slider Captcha Component */} + {showCaptcha && ( + setShowCaptcha(false)} + /> + )} + ); } diff --git a/src/components/SliderCaptcha.tsx b/src/components/SliderCaptcha.tsx new file mode 100644 index 0000000..51eb400 --- /dev/null +++ b/src/components/SliderCaptcha.tsx @@ -0,0 +1,467 @@ +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 = ({ 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(''); + // 拼图Base64字符串(从后端获取) + const [puzzleImage, setPuzzleImage] = useState(''); + // 验证码进程ID(从后端获取,用于验证时标识当前验证码) + const [processId, setProcessId] = useState(''); + // 验证结果:false-未验证/验证失败,true-验证成功,'error'-请求错误 + const [verifyResult, setVerifyResult] = useState(false); + // 提示信息:显示后端返回的提示或默认提示 + const [msg, setMsg] = useState('拖动滑块完成拼图'); + + + const sliderRef = useRef(null); + const trackRef = useRef(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, captcha_id, mBase64, tBase64, y } = response.data; + + // 后端返回成功状态(code=200) + if (code === 200) { + // 设置背景图 + setBackgroundImage(mBase64); + // 设置拼图图片 + setPuzzleImage(tBase64); + // 设置拼图y坐标(从后端获取,以背景图左上角为原点) + setPuzzleY(y); + // 设置进程ID(用于后续验证) + setProcessId(captcha_id); + // 随机生成拼图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 + const response = await axios.post(`${API_BASE_URL}/captcha/verify`, { + dx: sliderPosition, // 滑块位置(拼图左上角x坐标,以背景图左上角为原点) + captcha_id: processId // 验证码进程ID + },{ withCredentials: true }); + + const { code, msg: resMsg, data } = response.data; + // 保存后端返回的提示信息 + setMsg(resMsg); + + // 后端返回成功 (code=200) + if (code === 200) { + // 验证成功(data=true) + if (data === true) { + setIsVerified(true); + setVerifyResult(true); + // 延迟1.2秒后调用验证成功回调 + setTimeout(() => onVerify(true), 1200); + } + // 验证失败(data=false) + else { + setVerifyResult(false); + setShowError(true); + // 增加尝试次数 + setAttempts(prev => prev + 1); + // 1.5秒后重置滑块位置并隐藏错误提示 + setTimeout(() => { + setSliderPosition(0); + setShowError(false); + }, 1500); + } + } + // 后端返回参数错误(400)或系统错误(500) + else if (code === 400 || code === 500) { + setVerifyResult('error'); + setShowError(true); + // 增加尝试次数 + setAttempts(prev => prev + 1); + // 1.5秒后重置滑块位置并隐藏错误提示 + setTimeout(() => { + setSliderPosition(0); + setShowError(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
; + } + if (isVerified) { + // 验证成功显示对勾图标 + return ; + } + if (showError) { + // 验证失败显示叉号图标 + return ; + } + // 默认显示蓝色圆点 + return
; + }; + + + const getStatusText = () => { + if (verifyResult === 'error' || showError || isVerified) { + // 错误、验证失败或成功时显示后端返回的消息 + return msg; + } + // 默认显示拖拽提示 + return '拖动滑块完成拼图'; + }; + + + const getStatusColor = () => { + if (verifyResult === 'error') return 'text-orange-700'; + if (isVerified) return 'text-green-700'; + if (showError) return 'text-red-700'; + return 'text-gray-600'; + }; + + + const getProgressColor = () => { + if (verifyResult === 'error') return 'bg-gradient-to-r from-orange-400 to-orange-500'; + if (isVerified) return 'bg-gradient-to-r from-green-400 to-green-500'; + if (showError) return 'bg-gradient-to-r from-red-400 to-red-500'; + return 'bg-gradient-to-r from-blue-400 to-blue-500'; + }; + + return ( +
+
+ {/* 头部区域:显示标题和关闭按钮 */} +
+
+
+ +
+

安全验证

+
+ {/* 关闭按钮 */} + +
+ + {/* 显示验证码图片和滑块 */} +
+
+ {/* 背景图片容器:尺寸300x200px,与后端图片尺寸匹配 */} +
+ {backgroundImage && ( + 验证背景 + )} + {/* 可移动拼图块 */} + {puzzleImage && !isVerified && ( +
+ 拼图块 +
+ )} +
+ {/* 提示文本 */} +

{getStatusText()}

+
+ + {/* 滑动轨道 */} +
+ {/* 进度条 */} +
+ {/* 滑块按钮 */} +
+ {getSliderIcon()} +
+ {/* 轨道上的提示文字 */} +
+ 60 ? 'opacity-0 transform translate-x-4' : 'opacity-100 transform translate-x-0' + } ${getStatusColor()}`}> + {getStatusText()} + +
+
+
+ + + {/* 底部信息区域 */} +
+
+ 尝试次数: {attempts + 1}/5 + + + 安全验证 + +
+ + +
+
+
+ ); +}; + +export default SliderCaptcha; \ No newline at end of file diff --git a/src/lib/api.ts b/src/lib/api.ts index eb7b949..17d62b5 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1,4 +1,4 @@ -const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080/api/v1'; +export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080/api/v1'; export interface Texture { id: number;