oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): systemSetting component to enhance UI structure and add new configuration options

Browse Source 
- 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
2025-04-04 17:37:52 +08:00
parent 6b79b89dc0
commit 09adc6f201
2 changed files with 687 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
web/src/components/OtherSetting.js
View File

@@ -7,6 +7,7 @@ import {
Row, Row,
Modal, Modal,
Space, Space,
Card,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { API, showError, showSuccess, timestamp2string } from '../helpers'; import { API, showError, showSuccess, timestamp2string } from '../helpers';
import { marked } from 'marked'; import { marked } from 'marked';
@@ -244,134 +245,149 @@ const OtherSetting = () => {
return ( return (
<Row> <Row>
<Col span={24}> <Col
span={24}
style={{
marginTop: '10px',
display: 'flex',
flexDirection: 'column',
gap: '10px',
}}
>
{/* 版本信息 */} {/* 版本信息 */}
<Form style={{ marginBottom: 15 }}> <Form>
<Form.Section text={t('系统信息')}> <Card>
<Row> <Form.Section text={t('系统信息')}>
<Col span={16}> <Row>
<Space> <Col span={16}>
<Space>
<Text>
{t('当前版本')}：
{statusState?.status?.version || t('未知')}
</Text>
<Button
type='primary'
onClick={checkUpdate}
loading={loadingInput['CheckUpdate']}
>
{t('检查更新')}
</Button>
</Space>
</Col>
</Row>
<Row>
<Col span={16}>
<Text> <Text>
{t('当前版本')}：{statusState?.status?.version || t('未知')} {t('启动时间')}：{getStartTimeString()}
</Text> </Text>
<Button </Col>
type='primary' </Row>
onClick={checkUpdate} </Form.Section>
loading={loadingInput['CheckUpdate']} </Card>
>
{t('检查更新')}
</Button>
</Space>
</Col>
</Row>
<Row>
<Col span={16}>
<Text>
{t('启动时间')}：{getStartTimeString()}
</Text>
</Col>
</Row>
</Form.Section>
</Form> </Form>
{/* 通用设置 */} {/* 通用设置 */}
<Form <Form
values={inputs} values={inputs}
getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)} getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
style={{ marginBottom: 15 }}
> >
<Form.Section text={t('通用设置')}> <Card>
<Form.TextArea <Form.Section text={t('通用设置')}>
label={t('公告')} <Form.TextArea
placeholder={t('在此输入新的公告内容，支持 Markdown & HTML 代码')} label={t('公告')}
field={'Notice'} placeholder={t(
onChange={handleInputChange} '在此输入新的公告内容，支持 Markdown & HTML 代码',
style={{ fontFamily: 'JetBrains Mono, Consolas' }} )}
autosize={{ minRows: 6, maxRows: 12 }} field={'Notice'}
/> onChange={handleInputChange}
<Button onClick={submitNotice} loading={loadingInput['Notice']}> style={{ fontFamily: 'JetBrains Mono, Consolas' }}
{t('设置公告')} autosize={{ minRows: 6, maxRows: 12 }}
</Button> />
</Form.Section> <Button onClick={submitNotice} loading={loadingInput['Notice']}>
{t('设置公告')}
</Button>
</Form.Section>
</Card>
</Form> </Form>
{/* 个性化设置 */} {/* 个性化设置 */}
<Form <Form
values={inputs} values={inputs}
getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)} getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
style={{ marginBottom: 15 }}
> >
<Form.Section text={t('个性化设置')}> <Card>
<Form.Input <Form.Section text={t('个性化设置')}>
label={t('系统名称')} <Form.Input
placeholder={t('在此输入系统名称')} label={t('系统名称')}
field={'SystemName'} placeholder={t('在此输入系统名称')}
onChange={handleInputChange} field={'SystemName'}
/> onChange={handleInputChange}
<Button />
onClick={submitSystemName} <Button
loading={loadingInput['SystemName']} onClick={submitSystemName}
> loading={loadingInput['SystemName']}
{t('设置系统名称')} >
</Button> {t('设置系统名称')}
<Form.Input </Button>
label={t('Logo 图片地址')} <Form.Input
placeholder={t('在此输入 Logo 图片地址')} label={t('Logo 图片地址')}
field={'Logo'} placeholder={t('在此输入 Logo 图片地址')}
onChange={handleInputChange} field={'Logo'}
/> onChange={handleInputChange}
<Button onClick={submitLogo} loading={loadingInput['Logo']}> />
{t('设置 Logo')} <Button onClick={submitLogo} loading={loadingInput['Logo']}>
</Button> {t('设置 Logo')}
<Form.TextArea </Button>
label={t('首页内容')} <Form.TextArea
placeholder={t( label={t('首页内容')}
'在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页', placeholder={t(
)} '在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
field={'HomePageContent'} )}
onChange={handleInputChange} field={'HomePageContent'}
style={{ fontFamily: 'JetBrains Mono, Consolas' }} onChange={handleInputChange}
autosize={{ minRows: 6, maxRows: 12 }} style={{ fontFamily: 'JetBrains Mono, Consolas' }}
/> autosize={{ minRows: 6, maxRows: 12 }}
<Button />
onClick={() => submitOption('HomePageContent')} <Button
loading={loadingInput['HomePageContent']} onClick={() => submitOption('HomePageContent')}
> loading={loadingInput['HomePageContent']}
{t('设置首页内容')} >
</Button> {t('设置首页内容')}
<Form.TextArea </Button>
label={t('关于')} <Form.TextArea
placeholder={t( label={t('关于')}
'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面', placeholder={t(
)} '在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
field={'About'} )}
onChange={handleInputChange} field={'About'}
style={{ fontFamily: 'JetBrains Mono, Consolas' }} onChange={handleInputChange}
autosize={{ minRows: 6, maxRows: 12 }} style={{ fontFamily: 'JetBrains Mono, Consolas' }}
/> autosize={{ minRows: 6, maxRows: 12 }}
<Button onClick={submitAbout} loading={loadingInput['About']}> />
{t('设置关于')} <Button onClick={submitAbout} loading={loadingInput['About']}>
</Button> {t('设置关于')}
{/* */} </Button>
<Banner {/* */}
fullMode={false} <Banner
type='info' fullMode={false}
description={t( type='info'
'移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目', description={t(
)} '移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
closeIcon={null} )}
style={{ marginTop: 15 }} closeIcon={null}
/> style={{ marginTop: 15 }}
<Form.Input />
label={t('页脚')} <Form.Input
placeholder={t( label={t('页脚')}
'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码', placeholder={t(
)} '在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
field={'Footer'} )}
onChange={handleInputChange} field={'Footer'}
/> onChange={handleInputChange}
<Button onClick={submitFooter} loading={loadingInput['Footer']}> />
{t('设置页脚')} <Button onClick={submitFooter} loading={loadingInput['Footer']}>
</Button> {t('设置页脚')}
</Form.Section> </Button>
</Form.Section>
</Card>
</Form> </Form>
</Col> </Col>
<Modal <Modal

1074
web/src/components/SystemSetting.js
View File

File diff suppressed because it is too large Load Diff