chore: update default theme style

This commit is contained in:
JustSong
2025-01-31 23:20:57 +08:00
parent 3d29713268
commit 310e7120e5

View File

@@ -75,109 +75,191 @@ const Home = () => {
</Card.Content> </Card.Content>
</Card> </Card>
<Grid columns={3} stackable className='charts-grid'>
<Grid.Column>
<Card fluid className='chart-card'>
<Card.Content>
<Card.Header className='header'>使用说明</Card.Header>
<Card.Description style={{ lineHeight: '1.6' }}>
<p>1. 登录并获取令牌</p>
<p>2. 在您的应用中使用令牌</p>
<p>3. 监控使用情况和费用</p>
</Card.Description>
</Card.Content>
</Card>
</Grid.Column>
<Grid.Column>
<Card fluid className='chart-card'>
<Card.Content>
<Card.Header className='header'>功能特点</Card.Header>
<Card.Description style={{ lineHeight: '1.6' }}>
<p> 多渠道接口管理</p>
<p> 实时监控和统计</p>
<p> 灵活的配额控制</p>
</Card.Description>
</Card.Content>
</Card>
</Grid.Column>
<Grid.Column>
<Card fluid className='chart-card'>
<Card.Content>
<Card.Header className='header'>技术支持</Card.Header>
<Card.Description style={{ lineHeight: '1.6' }}>
<p> 完整的API文档</p>
<p> 详细的使用教程</p>
<p> 及时的问题解答</p>
</Card.Description>
</Card.Content>
</Card>
</Grid.Column>
</Grid>
{homePageContentLoaded && homePageContent === '' ? ( {homePageContentLoaded && homePageContent === '' ? (
<>
<Card fluid className='chart-card'> <Card fluid className='chart-card'>
<Card.Content> <Card.Content>
<Card.Header className='header'>系统状况</Card.Header> <Card.Header>
<Header as='h3'>系统状况</Header>
</Card.Header>
<Grid columns={2} stackable> <Grid columns={2} stackable>
<Grid.Column> <Grid.Column>
<Card fluid className='chart-card'> <Card
fluid
className='chart-card'
style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
>
<Card.Content> <Card.Content>
<Card.Header className='header'>系统信息</Card.Header> <Card.Header>
<Card.Meta>系统信息总览</Card.Meta> <Header as='h3' style={{ color: '#444' }}>
<Card.Description style={{ lineHeight: '1.6' }}> 系统信息
<p>名称{statusState?.status?.system_name}</p> </Header>
<p> </Card.Header>
版本 <Card.Description
{statusState?.status?.version style={{ lineHeight: '2', marginTop: '1em' }}
? statusState?.status?.version >
: 'unknown'} <p
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='info circle icon'></i>
<span style={{ fontWeight: 'bold' }}>名称</span>
<span>{statusState?.status?.system_name}</span>
</p> </p>
<p> <p
源码 style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='code branch icon'></i>
<span style={{ fontWeight: 'bold' }}>版本</span>
<span>{statusState?.status?.version || 'unknown'}</span>
</p>
<p
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='github icon'></i>
<span style={{ fontWeight: 'bold' }}>源码</span>
<a <a
href='https://github.com/songquanpeng/one-api' href='https://github.com/songquanpeng/one-api'
target='_blank' target='_blank'
style={{ color: '#2185d0' }}
> >
https://github.com/songquanpeng/one-api GitHub 仓库
</a> </a>
</p> </p>
<p>启动时间{getStartTimeString()}</p> <p
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='clock outline icon'></i>
<span style={{ fontWeight: 'bold' }}>启动时间</span>
<span>{getStartTimeString()}</span>
</p>
</Card.Description> </Card.Description>
</Card.Content> </Card.Content>
</Card> </Card>
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>
<Card fluid className='chart-card'> <Card
fluid
className='chart-card'
style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
>
<Card.Content> <Card.Content>
<Card.Header className='header'>系统配置</Card.Header> <Card.Header>
<Card.Meta>系统配置总览</Card.Meta> <Header as='h3' style={{ color: '#444' }}>
<Card.Description style={{ lineHeight: '1.6' }}> 系统配置
<p> </Header>
邮箱验证 </Card.Header>
{statusState?.status?.email_verification === true <Card.Description
style={{ lineHeight: '2', marginTop: '1em' }}
>
<p
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='envelope icon'></i>
<span style={{ fontWeight: 'bold' }}>邮箱验证</span>
<span
style={{
color: statusState?.status?.email_verification
? '#21ba45'
: '#db2828',
fontWeight: '500',
}}
>
{statusState?.status?.email_verification
? '已启用' ? '已启用'
: '未启用'} : '未启用'}
</span>
</p> </p>
<p> <p
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='github icon'></i>
<span style={{ fontWeight: 'bold' }}>
GitHub 身份验证 GitHub 身份验证
{statusState?.status?.github_oauth === true </span>
<span
style={{
color: statusState?.status?.github_oauth
? '#21ba45'
: '#db2828',
fontWeight: '500',
}}
>
{statusState?.status?.github_oauth
? '已启用' ? '已启用'
: '未启用'} : '未启用'}
</span>
</p> </p>
<p> <p
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='wechat icon'></i>
<span style={{ fontWeight: 'bold' }}>
微信身份验证 微信身份验证
{statusState?.status?.wechat_login === true </span>
<span
style={{
color: statusState?.status?.wechat_login
? '#21ba45'
: '#db2828',
fontWeight: '500',
}}
>
{statusState?.status?.wechat_login
? '已启用' ? '已启用'
: '未启用'} : '未启用'}
</span>
</p> </p>
<p> <p
Turnstile 用户校验 style={{
{statusState?.status?.turnstile_check === true display: 'flex',
alignItems: 'center',
gap: '0.5em',
}}
>
<i className='shield alternate icon'></i>
<span style={{ fontWeight: 'bold' }}>
Turnstile 校验
</span>
<span
style={{
color: statusState?.status?.turnstile_check
? '#21ba45'
: '#db2828',
fontWeight: '500',
}}
>
{statusState?.status?.turnstile_check
? '已启用' ? '已启用'
: '未启用'} : '未启用'}
</span>
</p> </p>
</Card.Description> </Card.Description>
</Card.Content> </Card.Content>
@@ -186,7 +268,6 @@ const Home = () => {
</Grid> </Grid>
</Card.Content> </Card.Content>
</Card> </Card>
</>
) : ( ) : (
<> <>
{homePageContent.startsWith('https://') ? ( {homePageContent.startsWith('https://') ? (