feat: Integrate i18n support and enhance UI text localization
- Added internationalization (i18n) support across various components, enabling dynamic language switching and improved user experience. - Updated multiple components to utilize translation functions for labels, buttons, and messages, ensuring consistent language display. - Enhanced the user interface by refining text elements in the ChannelsTable, LogsTable, and various settings pages, improving clarity and accessibility. - Adjusted CSS styles for better responsiveness and layout consistency across different screen sizes.
This commit is contained in:
CalciumIon
@@ -7,8 +7,10 @@ import {
|
||||
showSuccess,
|
||||
showWarning,
|
||||
} from '../../../helpers';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function GeneralSettings(props) {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [inputs, setInputs] = useState({
|
||||
TopUpLink: '',
|
||||
@@ -22,13 +24,15 @@ export default function GeneralSettings(props) {
|
||||
});
|
||||
const refForm = useRef();
|
||||
const [inputsRow, setInputsRow] = useState(inputs);
|
||||
|
||||
function onChange(value, e) {
|
||||
const name = e.target.id;
|
||||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
const updateArray = compareObjects(inputs, inputsRow);
|
||||
if (!updateArray.length) return showWarning('你似乎并没有修改什么');
|
||||
if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
|
||||
const requestQueue = updateArray.map((item) => {
|
||||
let value = '';
|
||||
if (typeof inputs[item.key] === 'boolean') {
|
||||
@@ -47,13 +51,13 @@ export default function GeneralSettings(props) {
|
||||
if (requestQueue.length === 1) {
|
||||
if (res.includes(undefined)) return;
|
||||
} else if (requestQueue.length > 1) {
|
||||
if (res.includes(undefined)) return showError('部分保存失败，请重试');
|
||||
if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
|
||||
}
|
||||
showSuccess('保存成功');
|
||||
showSuccess(t('保存成功'));
|
||||
props.refresh();
|
||||
})
|
||||
.catch(() => {
|
||||
showError('保存失败，请重试');
|
||||
showError(t('保存失败，请重试'));
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
@@ -71,26 +75,27 @@ export default function GeneralSettings(props) {
|
||||
setInputsRow(structuredClone(currentInputs));
|
||||
refForm.current.setValues(currentInputs);
|
||||
}, [props.options]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Spin spinning={loading}>
|
||||
<Banner
|
||||
type='warning'
|
||||
description={'聊天链接功能已经弃用，请使用下方聊天设置功能'}
|
||||
description={t('聊天链接功能已经弃用，请使用下方聊天设置功能')}
|
||||
/>
|
||||
<Form
|
||||
values={inputs}
|
||||
getFormApi={(formAPI) => (refForm.current = formAPI)}
|
||||
style={{ marginBottom: 15 }}
|
||||
>
|
||||
<Form.Section text={'通用设置'}>
|
||||
<Form.Section text={t('通用设置')}>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field={'TopUpLink'}
|
||||
label={'充值链接'}
|
||||
label={t('充值链接')}
|
||||
initValue={''}
|
||||
placeholder={'例如发卡网站的购买链接'}
|
||||
placeholder={t('例如发卡网站的购买链接')}
|
||||
onChange={onChange}
|
||||
showClear
|
||||
/>
|
||||
@@ -98,9 +103,9 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field={'ChatLink'}
|
||||
label={'默认聊天页面链接'}
|
||||
label={t('默认聊天页面链接')}
|
||||
initValue={''}
|
||||
placeholder='例如 ChatGPT Next Web 的部署地址'
|
||||
placeholder={t('例如 ChatGPT Next Web 的部署地址')}
|
||||
onChange={onChange}
|
||||
showClear
|
||||
/>
|
||||
@@ -108,9 +113,9 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field={'ChatLink2'}
|
||||
label={'聊天页面 2 链接'}
|
||||
label={t('聊天页面 2 链接')}
|
||||
initValue={''}
|
||||
placeholder='例如 ChatGPT Next Web 的部署地址'
|
||||
placeholder={t('例如 ChatGPT Next Web 的部署地址')}
|
||||
onChange={onChange}
|
||||
showClear
|
||||
/>
|
||||
@@ -118,9 +123,9 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field={'QuotaPerUnit'}
|
||||
label={'单位美元额度'}
|
||||
label={t('单位美元额度')}
|
||||
initValue={''}
|
||||
placeholder='一单位货币能兑换的额度'
|
||||
placeholder={t('一单位货币能兑换的额度')}
|
||||
onChange={onChange}
|
||||
showClear
|
||||
/>
|
||||
@@ -128,9 +133,9 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field={'RetryTimes'}
|
||||
label={'失败重试次数'}
|
||||
label={t('失败重试次数')}
|
||||
initValue={''}
|
||||
placeholder='失败重试次数'
|
||||
placeholder={t('失败重试次数')}
|
||||
onChange={onChange}
|
||||
showClear
|
||||
/>
|
||||
@@ -140,7 +145,7 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Switch
|
||||
field={'DisplayInCurrencyEnabled'}
|
||||
label={'以货币形式显示额度'}
|
||||
label={t('以货币形式显示额度')}
|
||||
size='default'
|
||||
checkedText='｜'
|
||||
uncheckedText='〇'
|
||||
@@ -155,7 +160,7 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Switch
|
||||
field={'DisplayTokenStatEnabled'}
|
||||
label={'Billing 相关 API 显示令牌额度而非用户额度'}
|
||||
label={t('额度查询接口返回令牌额度而非用户额度')}
|
||||
size='default'
|
||||
checkedText='｜'
|
||||
uncheckedText='〇'
|
||||
@@ -170,7 +175,7 @@ export default function GeneralSettings(props) {
|
||||
<Col span={8}>
|
||||
<Form.Switch
|
||||
field={'DefaultCollapseSidebar'}
|
||||
label={'默认折叠侧边栏'}
|
||||
label={t('默认折叠侧边栏')}
|
||||
size='default'
|
||||
checkedText='｜'
|
||||
uncheckedText='〇'
|
||||
@@ -185,7 +190,7 @@ export default function GeneralSettings(props) {
|
||||
</Row>
|
||||
<Row>
|
||||
<Button size='default' onClick={onSubmit}>
|
||||
保存通用设置
|
||||
{t('保存通用设置')}
|
||||
</Button>
|
||||
</Row>
|
||||
</Form.Section>
|
||||
|
||||
Reference in New Issue
Block a user