b54b590db4
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.
75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
|
import {
|
|
Button,
|
|
Form,
|
|
Spin,
|
|
} from '@douyinfe/semi-ui';
|
|
import {
|
|
API,
|
|
removeTrailingSlash,
|
|
showError,
|
|
showSuccess,
|
|
} from '../../../helpers';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export default function SettingsGeneralPayment(props) {
|
|
const { t } = useTranslation();
|
|
const [loading, setLoading] = useState(false);
|
|
const [inputs, setInputs] = useState({
|
|
ServerAddress: '',
|
|
});
|
|
const formApiRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (props.options && formApiRef.current) {
|
|
const currentInputs = { ServerAddress: props.options.ServerAddress || '' };
|
|
setInputs(currentInputs);
|
|
formApiRef.current.setValues(currentInputs);
|
|
}
|
|
}, [props.options]);
|
|
|
|
const handleFormChange = (values) => {
|
|
setInputs(values);
|
|
};
|
|
|
|
const submitServerAddress = async () => {
|
|
setLoading(true);
|
|
try {
|
|
let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
|
|
const res = await API.put('/api/option/', {
|
|
key: 'ServerAddress',
|
|
value: ServerAddress,
|
|
});
|
|
if (res.data.success) {
|
|
showSuccess(t('更新成功'));
|
|
props.refresh && props.refresh();
|
|
} else {
|
|
showError(res.data.message);
|
|
}
|
|
} catch (error) {
|
|
showError(t('更新失败'));
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<Spin spinning={loading}>
|
|
<Form
|
|
initValues={inputs}
|
|
onValueChange={handleFormChange}
|
|
getFormApi={(api) => (formApiRef.current = api)}
|
|
>
|
|
<Form.Section text={t('通用设置')}>
|
|
<Form.Input
|
|
field='ServerAddress'
|
|
label={t('服务器地址')}
|
|
placeholder={'https://yourdomain.com'}
|
|
style={{ width: '100%' }}
|
|
extraText={t('该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置')}
|
|
/>
|
|
<Button onClick={submitServerAddress}>{t('更新服务器地址')}</Button>
|
|
</Form.Section>
|
|
</Form>
|
|
</Spin>
|
|
);
|
|
}
|