From b768bb1410e0d60130debcdf75e835b8aafd6960 Mon Sep 17 00:00:00 2001 From: WittF Date: Fri, 27 Jun 2025 23:49:35 +0800 Subject: [PATCH] feat(captcha): Add captcha_cap_asset_server configuration option to support static asset server settings (#2584) --- public/locales/en-US/dashboard.json | 4 ++ public/locales/ja-JP/dashboard.json | 4 ++ public/locales/zh-CN/dashboard.json | 6 ++- public/locales/zh-TW/dashboard.json | 4 ++ src/api/site.ts | 1 + .../Admin/Settings/Captcha/CapCaptcha.tsx | 49 ++++++++++++++++++- src/component/Admin/Settings/Settings.tsx | 1 + src/component/Common/Captcha/CapCaptcha.tsx | 26 ++++++++-- 8 files changed, 89 insertions(+), 6 deletions(-) diff --git a/public/locales/en-US/dashboard.json b/public/locales/en-US/dashboard.json index 3142650..079e005 100644 --- a/public/locales/en-US/dashboard.json +++ b/public/locales/en-US/dashboard.json @@ -437,6 +437,10 @@ "capSiteKeyDes": "The site key from your Cap server dashboard.", "capSecretKey": "Secret Key", "capSecretKeyDes": "The secret key from your Cap server dashboard.", + "capAssetServer": "Asset Server Source", + "capAssetServerDes": "Choose the source for loading Cap captcha static assets. Using self-deployed server requires setting ENABLE_ASSETS_SERVER=true environment variable to <0>enable asset server.", + "capAssetServerCdn": "Default public CDN", + "capAssetServerInstance": "Self-deployed server", "captchaProvider": "Captcha provider", "captchaWidth": "Width", "captchaHeight": "Height", diff --git a/public/locales/ja-JP/dashboard.json b/public/locales/ja-JP/dashboard.json index 617679c..4b6ae0f 100644 --- a/public/locales/ja-JP/dashboard.json +++ b/public/locales/ja-JP/dashboard.json @@ -435,6 +435,10 @@ "capSiteKeyDes": "Cap サーバーダッシュボードから取得したサイトキー。", "capSecretKey": "シークレットキー", "capSecretKeyDes": "Cap サーバーダッシュボードから取得したシークレットキー。", + "capAssetServer": "静的リソースソース", + "capAssetServerDes": "Cap認証コードの静的リソースの読み込みソースを選択します。自己デプロイサーバーを使用するにはサーバー側で環境変数 ENABLE_ASSETS_SERVER=true を設定して<0>静的リソースサービスを有効にする必要があります。", + "capAssetServerCdn": "デフォルト公共CDN", + "capAssetServerInstance": "自己デプロイサーバー", "captchaProvider": "認証コードタイプ", "captchaWidth": "幅", "captchaHeight": "高さ", diff --git a/public/locales/zh-CN/dashboard.json b/public/locales/zh-CN/dashboard.json index 37f3255..333bcea 100644 --- a/public/locales/zh-CN/dashboard.json +++ b/public/locales/zh-CN/dashboard.json @@ -430,11 +430,15 @@ "turnstileSiteKSecret": "密钥", "cap": "Cap", "capInstanceURL": "实例 URL", - "capInstanceURLDes": "自部署 Cap 服务器的 URL 地址。详细信息请参考 <0>独立模式文档。", + "capInstanceURLDes": "自部署 Cap 服务器的 URL 地址。详细信息请参考 <0>自部署模式文档。", "capSiteKey": "站点密钥", "capSiteKeyDes": "从 Cap 服务器控制面板获取的站点密钥。", "capSecretKey": "私密密钥", "capSecretKeyDes": "从 Cap 服务器控制面板获取的私密密钥。", + "capAssetServer": "静态资源服务源", + "capAssetServerDes": "选择 Cap 验证码静态资源的加载源。使用自部署服务器需要在服务器端设置环境变量 ENABLE_ASSETS_SERVER=true <0>开启静态资源服务。", + "capAssetServerCdn": "默认境外 CDN", + "capAssetServerInstance": "自部署服务器", "captchaProvider": "验证码类型", "captchaWidth": "宽度", "captchaHeight": "高度", diff --git a/public/locales/zh-TW/dashboard.json b/public/locales/zh-TW/dashboard.json index 3805696..874644c 100644 --- a/public/locales/zh-TW/dashboard.json +++ b/public/locales/zh-TW/dashboard.json @@ -432,6 +432,10 @@ "capSiteKeyDes": "從 Cap 伺服器控制面板獲取的站點金鑰。", "capSecretKey": "私密金鑰", "capSecretKeyDes": "從 Cap 伺服器控制面板獲取的私密金鑰。", + "capAssetServer": "靜態資源服務源", + "capAssetServerDes": "選擇 Cap 驗證碼靜態資源的載入源。使用自部署伺服器需要在伺服器端設定環境變數 ENABLE_ASSETS_SERVER=true <0>開啟靜態資源服務。", + "capAssetServerCdn": "預設公共 CDN", + "capAssetServerInstance": "自部署伺服器", "captchaProvider": "驗證碼型別", "captchaWidth": "寬度", "captchaHeight": "高度", diff --git a/src/api/site.ts b/src/api/site.ts index dbd8ba4..52cf4db 100644 --- a/src/api/site.ts +++ b/src/api/site.ts @@ -26,6 +26,7 @@ export interface SiteConfig { captcha_cap_instance_url?: string; captcha_cap_site_key?: string; captcha_cap_secret_key?: string; + captcha_cap_asset_server?: string; register_enabled?: boolean; logo?: string; logo_light?: string; diff --git a/src/component/Admin/Settings/Captcha/CapCaptcha.tsx b/src/component/Admin/Settings/Captcha/CapCaptcha.tsx index 907e15b..f6c239a 100644 --- a/src/component/Admin/Settings/Captcha/CapCaptcha.tsx +++ b/src/component/Admin/Settings/Captcha/CapCaptcha.tsx @@ -1,7 +1,8 @@ import { Trans, useTranslation } from "react-i18next"; -import { FormControl, Link, Stack } from "@mui/material"; +import { FormControl, Link, Stack, ListItemText } from "@mui/material"; import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; -import { DenseFilledTextField } from "../../../Common/StyledComponents.tsx"; +import { DenseFilledTextField, DenseSelect } from "../../../Common/StyledComponents.tsx"; +import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx"; import * as React from "react"; import { NoMarginHelperText } from "../Settings.tsx"; @@ -78,6 +79,50 @@ const CapCaptcha = ({ values, setSettings }: CapCaptchaProps) => { + + + + setSettings({ + captcha_cap_asset_server: e.target.value, + }) + } + > + + + {t("settings.capAssetServerCdn")} + + + + + {t("settings.capAssetServerInstance")} + + + + + , + ]} + /> + + + ); }; diff --git a/src/component/Admin/Settings/Settings.tsx b/src/component/Admin/Settings/Settings.tsx index f054862..4b2be9e 100644 --- a/src/component/Admin/Settings/Settings.tsx +++ b/src/component/Admin/Settings/Settings.tsx @@ -224,6 +224,7 @@ const Settings = () => { "captcha_cap_instance_url", "captcha_cap_site_key", "captcha_cap_secret_key", + "captcha_cap_asset_server", ]} > diff --git a/src/component/Common/Captcha/CapCaptcha.tsx b/src/component/Common/Captcha/CapCaptcha.tsx index 6787d8e..72d33cd 100644 --- a/src/component/Common/Captcha/CapCaptcha.tsx +++ b/src/component/Common/Captcha/CapCaptcha.tsx @@ -22,6 +22,7 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps const capInstanceURL = useAppSelector((state) => state.siteConfig.basic.config.captcha_cap_instance_url); const capSiteKey = useAppSelector((state) => state.siteConfig.basic.config.captcha_cap_site_key); + const capAssetServer = useAppSelector((state) => state.siteConfig.basic.config.captcha_cap_asset_server); // Keep callback reference up to date useEffect(() => { @@ -132,6 +133,14 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps const initWidget = () => { scriptLoadedRef.current = true; + + // 根据配置设置WASM URL，保持资源加载的一致性 + if (capAssetServer === "instance") { + (window as any).CAP_CUSTOM_WASM_URL = `${capInstanceURL.replace(/\/$/, "")}/assets/cap_wasm_bg.wasm`; + } else { + (window as any).CAP_CUSTOM_WASM_URL = "https://cdn.jsdelivr.net/npm/@captcha/widget/dist/cap_wasm_bg.wasm"; + } + // Add a small delay to ensure DOM is ready setTimeout(() => { createWidget(); @@ -141,11 +150,22 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps if (!script) { script = document.createElement("script"); script.id = scriptId; - script.src = `${capInstanceURL.replace(/\/$/, "")}/assets/widget.js`; + + // 根据配置选择静态资源源 + const assetSource = + capAssetServer === "instance" + ? `${capInstanceURL.replace(/\/$/, "")}/assets/widget.js` + : "https://cdn.jsdelivr.net/npm/@captcha/widget/dist/widget.js"; + + script.src = assetSource; script.async = true; script.onload = initWidget; script.onerror = () => { - console.error("Failed to load Cap widget script"); + if (capAssetServer === "instance") { + console.error("Failed to load Cap widget script from instance server"); + } else { + console.error("Failed to load Cap widget script from jsDelivr CDN"); + } }; document.head.appendChild(script); } else if (scriptLoadedRef.current || (window as any).Cap) { @@ -166,7 +186,7 @@ const CapCaptcha = ({ onStateChange, generation, fullWidth, ...rest }: CapProps captchaRef.current.innerHTML = ""; } }; - }, [capInstanceURL, capSiteKey, t]); + }, [capInstanceURL, capSiteKey, capAssetServer, t]); if (!capInstanceURL || !capSiteKey) { return null;