From c820fda26de5a5ef9847a354351bf39ed3c28507 Mon Sep 17 00:00:00 2001 From: t0ng7u Date: Fri, 11 Jul 2025 02:53:53 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20feat(system-settings):=20add=20S?= =?UTF-8?q?erverAddress=20option=20&=20full=20i18n=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit brings System Settings in line with Payment Settings and prepares the whole component for multi-language deployments. Key points ---------- • Introduced a “General Settings” card in `SystemSetting.js` - Adds a `ServerAddress` field (copied from Payment Settings). - Explains that this URL is used for payment callback & default homepage. - Implements `submitServerAddress` to persist the option. • Internationalisation - Imported `useTranslation` and wrapped **all** Chinese UI strings in `t()`. - Localised section titles, labels, placeholders, banners, buttons, modal texts and toast messages. - Dynamic banner/tool-tip descriptions now combine `t()` fragments with template literals for runtime URLs. • UX improvements - Added contextual `extraText` under the ServerAddress input. - Ensured placeholders like “sensitive info…” are translatable. With these changes, administrators can configure the server URL from the System Settings tab, and the entire page is ready for seamless language switching via the existing i18n framework. --- web/src/components/settings/SystemSetting.js | 223 ++++++++++-------- web/src/i18n/locales/en.json | 3 +- .../Setting/Payment/SettingsGeneralPayment.js | 1 + 3 files changed, 126 insertions(+), 101 deletions(-) diff --git a/web/src/components/settings/SystemSetting.js b/web/src/components/settings/SystemSetting.js index b5829f31..0699e6cc 100644 --- a/web/src/components/settings/SystemSetting.js +++ b/web/src/components/settings/SystemSetting.js @@ -19,8 +19,10 @@ import { showSuccess, } from '../../helpers'; import axios from 'axios'; +import { useTranslation } from 'react-i18next'; const SystemSetting = () => { + const { t } = useTranslation(); let [inputs, setInputs] = useState({ PasswordLoginEnabled: '', PasswordRegisterEnabled: '', @@ -57,13 +59,13 @@ const SystemSetting = () => { EmailAliasRestrictionEnabled: '', SMTPSSLEnabled: '', EmailDomainWhitelist: [], - // telegram login TelegramOAuthEnabled: '', TelegramBotToken: '', TelegramBotName: '', LinuxDOOAuthEnabled: '', LinuxDOClientId: '', LinuxDOClientSecret: '', + ServerAddress: '', }); const [originInputs, setOriginInputs] = useState({}); @@ -173,7 +175,7 @@ const SystemSetting = () => { }); } - showSuccess('更新成功'); + showSuccess(t('更新成功')); // 更新本地状态 const newInputs = { ...inputs }; options.forEach((opt) => { @@ -181,7 +183,7 @@ const SystemSetting = () => { }); setInputs(newInputs); } catch (error) { - showError('更新失败'); + showError(t('更新失败')); } setLoading(false); }; @@ -205,6 +207,11 @@ const SystemSetting = () => { await updateOptions(options); }; + const submitServerAddress = async () => { + let ServerAddress = removeTrailingSlash(inputs.ServerAddress); + await updateOptions([{ key: 'ServerAddress', value: ServerAddress }]); + }; + const submitSMTP = async () => { const options = []; @@ -244,7 +251,7 @@ const SystemSetting = () => { }, ]); } else { - showError('邮箱域名白名单格式不正确'); + showError(t('邮箱域名白名单格式不正确')); } }; @@ -256,19 +263,19 @@ const SystemSetting = () => { const domainRegex = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/; if (!domainRegex.test(domain)) { - showError('邮箱域名格式不正确，请输入有效的域名，如 gmail.com'); + showError(t('邮箱域名格式不正确，请输入有效的域名，如 gmail.com')); return; } // 检查是否已存在 if (emailDomainWhitelist.includes(domain)) { - showError('该域名已存在于白名单中'); + showError(t('该域名已存在于白名单中')); return; } setEmailDomainWhitelist([...emailDomainWhitelist, domain]); setEmailToAdd(''); - showSuccess('已添加到白名单'); + showSuccess(t('已添加到白名单')); } }; @@ -332,7 +339,7 @@ const SystemSetting = () => { !inputs['oidc.well_known'].startsWith('http://') && !inputs['oidc.well_known'].startsWith('https://') ) { - showError('Well-Known URL 必须以 http:// 或 https:// 开头'); + showError(t('Well-Known URL 必须以 http:// 或 https:// 开头')); return; } try { @@ -341,11 +348,11 @@ const SystemSetting = () => { res.data['authorization_endpoint']; inputs['oidc.token_endpoint'] = res.data['token_endpoint']; inputs['oidc.user_info_endpoint'] = res.data['userinfo_endpoint']; - showSuccess('获取 OIDC 配置成功！'); + showSuccess(t('获取 OIDC 配置成功！')); } catch (err) { console.error(err); showError( - '获取 OIDC 配置失败，请检查网络状况和 Well-Known URL 是否正确', + t('获取 OIDC 配置失败，请检查网络状况和 Well-Known URL 是否正确'), ); return; } @@ -487,7 +494,25 @@ const SystemSetting = () => { }} > - + + + + + + + + + + + + （支持{' '} { @@ -522,14 +547,14 @@ const SystemSetting = () => { field='WorkerAllowHttpImageRequestEnabled' noLabel > - 允许 HTTP 协议图片请求（适用于自部署代理） + {t('允许 HTTP 协议图片请求（适用于自部署代理）')} - + - + @@ -541,7 +566,7 @@ const SystemSetting = () => { handleCheckboxChange('PasswordLoginEnabled', e) } > - 允许通过密码进行登录 + {t('允许通过密码进行登录')} { handleCheckboxChange('PasswordRegisterEnabled', e) } > - 允许通过密码进行注册 + {t('允许通过密码进行注册')} { handleCheckboxChange('EmailVerificationEnabled', e) } > - 通过密码注册时需要进行邮箱验证 + {t('通过密码注册时需要进行邮箱验证')} { handleCheckboxChange('RegisterEnabled', e) } > - 允许新用户注册 + {t('允许新用户注册')} { handleCheckboxChange('TurnstileCheckEnabled', e) } > - 启用 Turnstile 用户校验 + {t('允许 Turnstile 用户校验')} @@ -588,7 +613,7 @@ const SystemSetting = () => { handleCheckboxChange('GitHubOAuthEnabled', e) } > - 允许通过 GitHub 账户登录 & 注册 + {t('允许通过 GitHub 账户登录 & 注册')} { handleCheckboxChange('LinuxDOOAuthEnabled', e) } > - 允许通过 Linux DO 账户登录 & 注册 + {t('允许通过 Linux DO 账户登录 & 注册')} { handleCheckboxChange('WeChatAuthEnabled', e) } > - 允许通过微信登录 & 注册 + {t('允许通过微信登录 & 注册')} { handleCheckboxChange('TelegramOAuthEnabled', e) } > - 允许通过 Telegram 进行登录 + {t('允许通过 Telegram 进行登录')} { handleCheckboxChange('oidc.enabled', e) } > - 允许通过 OIDC 进行登录 + {t('允许通过 OIDC 进行登录')} @@ -632,8 +657,8 @@ const SystemSetting = () => { - - 用以防止恶意用户利用临时邮箱批量注册 + + {t('用以防止恶意用户利用临时邮箱批量注册')} @@ -669,11 +694,11 @@ const SystemSetting = () => { setEmailToAdd(value)} style={{ marginTop: 16 }} @@ -683,7 +708,7 @@ const SystemSetting = () => { type='primary' onClick={handleAddEmail} > - 添加 + {t('添加')} } onEnterPress={handleAddEmail} @@ -692,24 +717,24 @@ const SystemSetting = () => { onClick={submitEmailDomainWhitelist} style={{ marginTop: 10 }} > - 保存邮箱域名白名单设置 + {t('保存邮箱域名白名单设置')} - - 用以支持系统的邮件发送 + + {t('用以支持系统的邮件发送')} - + - + - + { style={{ marginTop: 16 }} > - + @@ -735,27 +760,25 @@ const SystemSetting = () => { handleCheckboxChange('SMTPSSLEnabled', e) } > - 启用SMTP SSL + {t('启用SMTP SSL')} - + - + - 用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 - IdP + {t('用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP')} - 若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 - OIDC Well-Known URL，系统会自动获取 OIDC 配置 + {t('若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置')} { @@ -781,16 +804,16 @@ const SystemSetting = () => { @@ -800,28 +823,28 @@ const SystemSetting = () => { - + - - 用以支持通过 GitHub 进行登录注册 + + {t('用以支持通过 GitHub 进行登录注册')} { - + - 用以支持通过 Linux DO 进行登录注册 + {t('用以支持通过 Linux DO 进行登录注册')} { marginRight: 4, }} > - 点击此处 + {t('点击此处')} - 管理你的 LinuxDO OAuth App + {t('管理你的 LinuxDO OAuth App')} { - - 用以支持通过微信进行登录注册 + + {t('用以支持通过微信进行登录注册')} - - 用以支持通过 Telegram 进行登录注册 + + {t('用以支持通过 Telegram 进行登录注册')} - - 用以支持用户校验 + + {t('用以支持用户校验')} - + { setShowPasswordLoginConfirmModal(false); formApiRef.current.setValue('PasswordLoginEnabled', true); }} - okText='确认' - cancelText='取消' + okText={t('确认')} + cancelText={t('取消')} > -

您确定要取消密码登录功能吗？这可能会影响用户的登录方式。

+

{t('您确定要取消密码登录功能吗？这可能会影响用户的登录方式。')}

 )} diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index 80f7f3cd..5c9e2fcc 100644 --- a/web/src/i18n/locales/en.json +++ b/web/src/i18n/locales/en.json @@ -1756,5 +1756,6 @@ "生成数量必须大于0": "Generation quantity must be greater than 0", "创建后可在编辑渠道时获取上游模型列表": "After creation, you can get the upstream model list when editing the channel", "可用端点类型": "Supported endpoint types", - "未登录，使用默认分组倍率：": "Not logged in, using default group ratio: " + "未登录，使用默认分组倍率：": "Not logged in, using default group ratio: ", + "该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置": "This server address will affect the payment callback address and the address displayed on the default homepage, please ensure correct configuration" } \ No newline at end of file diff --git a/web/src/pages/Setting/Payment/SettingsGeneralPayment.js b/web/src/pages/Setting/Payment/SettingsGeneralPayment.js index dda9d5ea..c5b6511c 100644 --- a/web/src/pages/Setting/Payment/SettingsGeneralPayment.js +++ b/web/src/pages/Setting/Payment/SettingsGeneralPayment.js @@ -65,6 +65,7 @@ export default function SettingsGeneralPayment(props) { label={t('服务器地址')} placeholder={'https://yourdomain.com'} style={{ width: '100%' }} + extraText={t('该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置')} />