From fb8595da182dd22948af2122b3f8a92a78109466 Mon Sep 17 00:00:00 2001 From: CalciumIon <1808837298@qq.com> Date: Tue, 24 Dec 2024 18:40:18 +0800 Subject: [PATCH] feat: Update localization and enhance token editing functionality - Added new translation keys for English localization in `en.json`, including "Token group, default is the your's group" and "IP whitelist (do not overly trust this function)". - Refactored `EditToken.js` to utilize the `useTranslation` hook for improved internationalization, ensuring all user-facing strings are translatable. - Updated error and success messages to use translation functions, enhancing user experience for non-English speakers. - Improved UI elements to support localization, including labels, placeholders, and button texts, ensuring consistency across the token editing interface. --- web/src/i18n/locales/en.json | 8 ++- web/src/pages/Token/EditToken.js | 97 ++++++++++++++++---------------- 2 files changed, 52 insertions(+), 53 deletions(-) diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index 4d7b2ead..e5bec09e 100644 --- a/web/src/i18n/locales/en.json +++ b/web/src/i18n/locales/en.json @@ -430,6 +430,8 @@ "一小时后过期": "Expires after one hour", "一分钟后过期": "Expires after one minute", "创建新的令牌": "Create New Token", + "令牌分组，默认为用户的分组": "Token group, default is the your's group", + "IP白名单（请勿过度信任此功能）": "IP whitelist (do not overly trust this function)", "注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。": "Note that the quota of the token is only used to limit the maximum quota usage of the token itself, and the actual usage is limited by the remaining quota of the account.", "设为无限额度": "Set to unlimited quota", "更新令牌信息": "Update Token Information", @@ -866,8 +868,8 @@ "请选择模式": "Please select mode", "图片代理方式": "Picture agency method", "用于替换 https://cdn.discordapp.com 的域名": "The domain name used to replace https://cdn.discordapp.com", - "一个月": "a month", - "一天": "one day", + "一个月": "A month", + "一天": "One day", "令牌渠道分组选择": "Token channel grouping selection", "只可使用对应分组包含的模型。": "Only models contained in the corresponding group can be used.", "渠道分组": "Channel grouping", @@ -876,7 +878,7 @@ "启用模型限制（非必要，不建议启用）": "Enable model restrictions (not necessary, not recommended)", "秒": "Second", "更新令牌后需等待几分钟生效": "It will take a few minutes to take effect after updating the token.", - "一小时": "one hour", + "一小时": "One hour", "新建数量": "New quantity", "加载失败，请稍后重试": "Loading failed, please try again later", "未设置": "Not set", diff --git a/web/src/pages/Token/EditToken.js b/web/src/pages/Token/EditToken.js index b9ef956d..aa88d852 100644 --- a/web/src/pages/Token/EditToken.js +++ b/web/src/pages/Token/EditToken.js @@ -23,6 +23,7 @@ import { } from '@douyinfe/semi-ui'; import Title from '@douyinfe/semi-ui/lib/es/typography/title'; import { Divider } from 'semantic-ui-react'; +import { useTranslation } from 'react-i18next'; const EditToken = (props) => { const [isEdit, setIsEdit] = useState(false); @@ -52,6 +53,7 @@ const EditToken = (props) => { const [models, setModels] = useState([]); const [groups, setGroups] = useState([]); const navigate = useNavigate(); + const { t } = useTranslation(); const handleInputChange = (name, value) => { setInputs((inputs) => ({ ...inputs, [name]: value })); }; @@ -87,7 +89,7 @@ const EditToken = (props) => { })); setModels(localModelOptions); } else { - showError(message); + showError(t(message)); } }; @@ -95,15 +97,13 @@ const EditToken = (props) => { let res = await API.get(`/api/user/self/groups`); const { success, message, data } = res.data; if (success) { - // return data is a map, key is group name, value is group description - // label is group description, value is group name - let localGroupOptions = Object.keys(data).map((group) => ({ - label: data[group], - value: group, - })); - setGroups(localGroupOptions); + let localGroupOptions = Object.keys(data).map((group) => ({ + label: data[group], + value: group, + })); + setGroups(localGroupOptions); } else { - showError(message); + showError(t(message)); } }; @@ -176,7 +176,7 @@ const EditToken = (props) => { if (localInputs.expired_time !== -1) { let time = Date.parse(localInputs.expired_time); if (isNaN(time)) { - showError('过期时间格式错误！'); + showError(t('过期时间格式错误！')); setLoading(false); return; } @@ -189,11 +189,11 @@ const EditToken = (props) => { }); const { success, message } = res.data; if (success) { - showSuccess('令牌更新成功！'); + showSuccess(t('令牌更新成功！')); props.refresh(); props.handleClose(); } else { - showError(message); + showError(t(message)); } } else { // 处理新增多个令牌的情况 @@ -209,7 +209,7 @@ const EditToken = (props) => { if (localInputs.expired_time !== -1) { let time = Date.parse(localInputs.expired_time); if (isNaN(time)) { - showError('过期时间格式错误！'); + showError(t('过期时间格式错误！')); setLoading(false); break; } @@ -222,14 +222,14 @@ const EditToken = (props) => { if (success) { successCount++; } else { - showError(message); + showError(t(message)); break; // 如果创建失败，终止循环 } } if (successCount > 0) { showSuccess( - `${successCount}个令牌创建成功，请在列表页面点击复制获取令牌！`, + t('令牌创建成功，请在列表页面点击复制获取令牌！') ); props.refresh(); props.handleClose(); @@ -245,7 +245,7 @@ const EditToken = (props) => { {isEdit ? '更新令牌信息' : '创建新的令牌'} + {isEdit ? t('更新令牌信息') : t('创建新的令牌')} } headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} @@ -254,7 +254,7 @@ const EditToken = (props) => {
@@ -274,9 +274,9 @@ const EditToken = (props) => { handleInputChange('name', value)} value={name} autoComplete='new-password' @@ -284,9 +284,9 @@ const EditToken = (props) => { /> handleInputChange('expired_time', value)} value={expired_time} autoComplete='new-password' @@ -300,7 +300,7 @@ const EditToken = (props) => { setExpiredTime(0, 0, 0, 0); }} > - 永不过期 + {t('永不过期')} @@ -332,17 +332,15 @@ const EditToken = (props) => {
- {`额度${renderQuotaWithPrompt(remain_quota)}`} + {`${t('额度')}${renderQuotaWithPrompt(remain_quota)}`}
handleInputChange('remain_quota', value)} value={remain_quota} autoComplete='new-password' @@ -362,22 +360,22 @@ const EditToken = (props) => { {!isEdit && ( <>
- 新建数量 + {t('新建数量')}
handleTokenCountChange(value)} onSelect={(value) => handleTokenCountChange(value)} value={tokenCount.toString()} autoComplete='off' type='number' data={[ - { value: 10, label: '10个' }, - { value: 20, label: '20个' }, - { value: 30, label: '30个' }, - { value: 100, label: '100个' }, + { value: 10, label: t('10个') }, + { value: 20, label: t('20个') }, + { value: 30, label: t('30个') }, + { value: 100, label: t('100个') }, ]} disabled={unlimited_quota} /> @@ -392,17 +390,17 @@ const EditToken = (props) => { setUnlimitedQuota(); }} > - {unlimited_quota ? '取消无限额度' : '设为无限额度'} + {unlimited_quota ? t('取消���限额度') : t('设为无限额度')}
- IP白名单（请勿过度信任此功能） + {t('IP白名单（请勿过度信任此功能）')}