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