fix(frontend): update turnstile implementation for login page

This commit is contained in:
sagit
2026-02-08 06:50:46 +00:00
parent 33f347d1db
commit 6e4bde4053
2 changed files with 10 additions and 10 deletions
+1 -1
View File
@@ -56,7 +56,7 @@
"react-hot-toast": "^2.5.2", "react-hot-toast": "^2.5.2",
"react-is": "^19.2.4", "react-is": "^19.2.4",
"react-router-dom": "6.30.3", "react-router-dom": "6.30.3",
"react-turnstile": "^1.1.5", "@marsidev/react-turnstile": "^1.1.0",
"recharts": "^3.1.1", "recharts": "^3.1.1",
"sonner": "^2.0.6", "sonner": "^2.0.6",
"tailwind-variants": "1.0.0", "tailwind-variants": "1.0.0",
+9 -9
View File
@@ -4,7 +4,7 @@ import { Card, CardBody, CardHeader } from "@heroui/card";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import Turnstile from "react-turnstile"; import { Turnstile } from "@marsidev/react-turnstile";
import { isWebViewFunc } from "@/utils/panel"; import { isWebViewFunc } from "@/utils/panel";
import { siteConfig } from "@/config/site"; import { siteConfig } from "@/config/site";
@@ -243,8 +243,6 @@ export default function IndexPage() {
{/* 背景遮罩层 - 模糊效果,暗黑模式下更深 */} {/* 背景遮罩层 - 模糊效果,暗黑模式下更深 */}
<div <div
className="absolute inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm captcha-backdrop-enter" className="absolute inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm captcha-backdrop-enter"
role="button"
tabIndex={0}
onClick={() => { onClick={() => {
setShowCaptcha(false); setShowCaptcha(false);
setLoading(false); setLoading(false);
@@ -255,14 +253,16 @@ export default function IndexPage() {
setLoading(false); setLoading(false);
} }
}} }}
role="button"
tabIndex={0}
/> />
{/* 验证码容器 */} {/* 验证码容器 */}
<div className="mb-4 relative z-50 bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-xl"> <div className="mb-4 relative z-50 bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-xl">
<div className="mb-4 text-center text-sm font-medium text-gray-700 dark:text-gray-200">请完成安全验证</div> <div className="mb-4 text-center text-sm font-medium text-gray-700 dark:text-gray-200">请完成安全验证</div>
<div className="flex justify-center"> <div className="flex justify-center">
<Turnstile <Turnstile
sitekey={siteKey} siteKey={siteKey}
onVerify={(token) => { onSuccess={(token) => {
setForm((prev) => ({ ...prev, captchaId: token })); setForm((prev) => ({ ...prev, captchaId: token }));
void performLogin(token); void performLogin(token);
}} }}
@@ -273,13 +273,13 @@ export default function IndexPage() {
onExpire={() => { onExpire={() => {
setForm((prev) => ({ ...prev, captchaId: "" })); setForm((prev) => ({ ...prev, captchaId: "" }));
}} }}
theme={ options={{
document.documentElement.classList.contains("dark") || theme: (document.documentElement.classList.contains("dark") ||
document.documentElement.getAttribute("data-theme") === "dark" || document.documentElement.getAttribute("data-theme") === "dark" ||
window.matchMedia("(prefers-color-scheme: dark)").matches window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" ? "dark"
: "light" : "light") as "light" | "dark" | "auto"
} }}
/> />
</div> </div>
</div> </div>