refactor(web): systemSetting component to enhance UI structure and add new configuration options
- Wrapped form sections in Card components for better visual separation - Added new configuration options for payment settings, email domain whitelist, SMTP, OIDC, GitHub OAuth, Linux DO OAuth, WeChat, and Telegram - Improved layout with responsive design using Row and Col components - Updated button actions for saving settings in new sections
This commit is contained in:
QuentinHsu
@@ -7,6 +7,7 @@ import {
|
||||
Row,
|
||||
Modal,
|
||||
Space,
|
||||
Card,
|
||||
} from '@douyinfe/semi-ui';
|
||||
import { API, showError, showSuccess, timestamp2string } from '../helpers';
|
||||
import { marked } from 'marked';
|
||||
@@ -244,15 +245,25 @@ const OtherSetting = () => {
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Col
|
||||
span={24}
|
||||
style={{
|
||||
marginTop: '10px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
{/* 版本信息 */}
|
||||
<Form style={{ marginBottom: 15 }}>
|
||||
<Form>
|
||||
<Card>
|
||||
<Form.Section text={t('系统信息')}>
|
||||
<Row>
|
||||
<Col span={16}>
|
||||
<Space>
|
||||
<Text>
|
||||
{t('当前版本')}：{statusState?.status?.version || t('未知')}
|
||||
{t('当前版本')}：
|
||||
{statusState?.status?.version || t('未知')}
|
||||
</Text>
|
||||
<Button
|
||||
type='primary'
|
||||
@@ -272,17 +283,20 @@ const OtherSetting = () => {
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
</Form>
|
||||
{/* 通用设置 */}
|
||||
<Form
|
||||
values={inputs}
|
||||
getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
|
||||
style={{ marginBottom: 15 }}
|
||||
>
|
||||
<Card>
|
||||
<Form.Section text={t('通用设置')}>
|
||||
<Form.TextArea
|
||||
label={t('公告')}
|
||||
placeholder={t('在此输入新的公告内容，支持 Markdown & HTML 代码')}
|
||||
placeholder={t(
|
||||
'在此输入新的公告内容，支持 Markdown & HTML 代码',
|
||||
)}
|
||||
field={'Notice'}
|
||||
onChange={handleInputChange}
|
||||
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
|
||||
@@ -292,13 +306,14 @@ const OtherSetting = () => {
|
||||
{t('设置公告')}
|
||||
</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
</Form>
|
||||
{/* 个性化设置 */}
|
||||
<Form
|
||||
values={inputs}
|
||||
getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
|
||||
style={{ marginBottom: 15 }}
|
||||
>
|
||||
<Card>
|
||||
<Form.Section text={t('个性化设置')}>
|
||||
<Form.Input
|
||||
label={t('系统名称')}
|
||||
@@ -372,6 +387,7 @@ const OtherSetting = () => {
|
||||
{t('设置页脚')}
|
||||
</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
</Form>
|
||||
</Col>
|
||||
<Modal
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Banner,
|
||||
TagInput,
|
||||
Spin,
|
||||
Card,
|
||||
} from '@douyinfe/semi-ui';
|
||||
const { Text } = Typography;
|
||||
import {
|
||||
@@ -489,7 +490,7 @@ const SystemSetting = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px' }}>
|
||||
<div>
|
||||
{isLoaded ? (
|
||||
<Form
|
||||
initValues={inputs}
|
||||
@@ -497,7 +498,15 @@ const SystemSetting = () => {
|
||||
getFormApi={(api) => (formApiRef.current = api)}
|
||||
>
|
||||
{({ formState, values, formApi }) => (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
marginTop: '10px',
|
||||
}}
|
||||
>
|
||||
<Card>
|
||||
<Form.Section text='通用设置'>
|
||||
<Form.Input
|
||||
field='ServerAddress'
|
||||
@@ -507,7 +516,8 @@ const SystemSetting = () => {
|
||||
/>
|
||||
<Button onClick={submitServerAddress}>更新服务器地址</Button>
|
||||
</Form.Section>
|
||||
|
||||
</Card>
|
||||
<Card>
|
||||
<Form.Section text='代理设置'>
|
||||
<Text>
|
||||
（支持{' '}
|
||||
@@ -541,7 +551,9 @@ const SystemSetting = () => {
|
||||
</Row>
|
||||
<Button onClick={submitWorker}>更新Worker设置</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='支付设置'>
|
||||
<Text>
|
||||
（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
|
||||
@@ -607,7 +619,9 @@ const SystemSetting = () => {
|
||||
/>
|
||||
<Button onClick={submitPayAddress}>更新支付设置</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='配置登录注册'>
|
||||
<Row
|
||||
gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
|
||||
@@ -699,14 +713,18 @@ const SystemSetting = () => {
|
||||
<Form.Checkbox
|
||||
field='oidc.enabled'
|
||||
noLabel
|
||||
onChange={(e) => handleCheckboxChange('oidc.enabled', e)}
|
||||
onChange={(e) =>
|
||||
handleCheckboxChange('oidc.enabled', e)
|
||||
}
|
||||
>
|
||||
允许通过 OIDC 进行登录
|
||||
</Form.Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='配置邮箱域名白名单'>
|
||||
<Text>用以防止恶意用户利用临时邮箱批量注册</Text>
|
||||
<Row
|
||||
@@ -717,7 +735,10 @@ const SystemSetting = () => {
|
||||
field='EmailDomainRestrictionEnabled'
|
||||
noLabel
|
||||
onChange={(e) =>
|
||||
handleCheckboxChange('EmailDomainRestrictionEnabled', e)
|
||||
handleCheckboxChange(
|
||||
'EmailDomainRestrictionEnabled',
|
||||
e,
|
||||
)
|
||||
}
|
||||
>
|
||||
启用邮箱域名白名单
|
||||
@@ -728,7 +749,10 @@ const SystemSetting = () => {
|
||||
field='EmailAliasRestrictionEnabled'
|
||||
noLabel
|
||||
onChange={(e) =>
|
||||
handleCheckboxChange('EmailAliasRestrictionEnabled', e)
|
||||
handleCheckboxChange(
|
||||
'EmailAliasRestrictionEnabled',
|
||||
e,
|
||||
)
|
||||
}
|
||||
>
|
||||
启用邮箱别名限制
|
||||
@@ -748,7 +772,8 @@ const SystemSetting = () => {
|
||||
保存邮箱域名白名单设置
|
||||
</Button>
|
||||
</Form.Section>
|
||||
|
||||
</Card>
|
||||
<Card>
|
||||
<Form.Section text='配置 SMTP'>
|
||||
<Text>用以支持系统的邮件发送</Text>
|
||||
<Row
|
||||
@@ -793,7 +818,8 @@ const SystemSetting = () => {
|
||||
</Row>
|
||||
<Button onClick={submitSMTP}>保存 SMTP 设置</Button>
|
||||
</Form.Section>
|
||||
|
||||
</Card>
|
||||
<Card>
|
||||
<Form.Section text='配置 OIDC'>
|
||||
<Text>
|
||||
用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的
|
||||
@@ -865,7 +891,9 @@ const SystemSetting = () => {
|
||||
</Row>
|
||||
<Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='配置 GitHub OAuth App'>
|
||||
<Text>用以支持通过 GitHub 进行登录注册</Text>
|
||||
<Banner
|
||||
@@ -895,6 +923,8 @@ const SystemSetting = () => {
|
||||
保存 GitHub OAuth 设置
|
||||
</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
<Card>
|
||||
<Form.Section text='配置 Linux DO OAuth'>
|
||||
<Text>
|
||||
用以支持通过 Linux DO 进行登录注册
|
||||
@@ -940,6 +970,9 @@ const SystemSetting = () => {
|
||||
保存 Linux DO OAuth 设置
|
||||
</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='配置 WeChat Server'>
|
||||
<Text>用以支持通过微信进行登录注册</Text>
|
||||
<Row
|
||||
@@ -966,8 +999,13 @@ const SystemSetting = () => {
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button onClick={submitWeChat}>保存 WeChat Server 设置</Button>
|
||||
<Button onClick={submitWeChat}>
|
||||
保存 WeChat Server 设置
|
||||
</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='配置 Telegram 登录'>
|
||||
<Text>用以支持通过 Telegram 进行登录注册</Text>
|
||||
<Row
|
||||
@@ -992,6 +1030,9 @@ const SystemSetting = () => {
|
||||
保存 Telegram 登录设置
|
||||
</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Form.Section text='配置 Turnstile'>
|
||||
<Text>用以支持用户校验</Text>
|
||||
<Row
|
||||
@@ -1014,6 +1055,7 @@ const SystemSetting = () => {
|
||||
</Row>
|
||||
<Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
|
||||
</Form.Section>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title='确认取消密码登录'
|
||||
@@ -1028,7 +1070,7 @@ const SystemSetting = () => {
|
||||
>
|
||||
<p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user