xinyin025/one-api
1
0
Fork 0
mirror of https://github.com/songquanpeng/one-api.git synced 2025-11-13 03:43:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update default theme style

Browse Source
This commit is contained in:
JustSong
2025-01-31 23:24:11 +08:00
parent 9cdd48ac22
commit 45d10aa3df
2 changed files with 281 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
web/default/src/components/RegisterForm.js
View File

@@ -1,5 +1,15 @@
import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react';
import {
Button,
Form,
Grid,
Header,
Image,
Message,
Segment,
Card,
Divider,
} from 'semantic-ui-react';
import { Link, useNavigate } from 'react-router-dom';
import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile';
@@ -10,7 +20,7 @@ const RegisterForm = () => {
password: '',
password2: '',
email: '',
verification_code: ''
verification_code: '',
});
const { username, password, password2 } = inputs;
const [showEmailVerification, setShowEmailVerification] = useState(false);
@@ -100,92 +110,131 @@ const RegisterForm = () => {
return (
<Grid textAlign='center' style={{ marginTop: '48px' }}>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='' textAlign='center'>
<Image src={logo} /> 新用户注册
</Header>
<Form size='large'>
<Segment>
<Form.Input
fluid
icon='user'
iconPosition='left'
placeholder='输入用户名，最长 12 位'
onChange={handleChange}
name='username'
/>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='输入密码，最短 8 位，最长 20 位'
onChange={handleChange}
name='password'
type='password'
/>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='输入密码，最短 8 位，最长 20 位'
onChange={handleChange}
name='password2'
type='password'
/>
{showEmailVerification ? (
<>
<Form.Input
fluid
icon='mail'
iconPosition='left'
placeholder='输入邮箱地址'
onChange={handleChange}
name='email'
type='email'
action={
<Button onClick={sendVerificationCode} disabled={loading}>
获取验证码
</Button>
}
/>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='输入验证码'
onChange={handleChange}
name='verification_code'
/>
</>
) : (
<></>
)}
{turnstileEnabled ? (
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
<Card
fluid
className='chart-card'
style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
>
<Card.Content>
<Card.Header>
<Header
as='h2'
textAlign='center'
style={{ marginBottom: '1.5em' }}
>
<Image src={logo} style={{ marginBottom: '10px' }} />
<Header.Content>新用户注册</Header.Content>
</Header>
</Card.Header>
<Form size='large'>
<Form.Input
fluid
icon='user'
iconPosition='left'
placeholder='输入用户名，最长 12 位'
onChange={handleChange}
name='username'
style={{ marginBottom: '1em' }}
/>
) : (
<></>
)}
<Button
color='green'
fluid
size='large'
onClick={handleSubmit}
loading={loading}
>
注册
</Button>
</Segment>
</Form>
<Message>
已有账户？
<Link to='/login' className='btn btn-link'>
点击登录
</Link>
</Message>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='输入密码，最短 8 位，最长 20 位'
onChange={handleChange}
name='password'
type='password'
style={{ marginBottom: '1em' }}
/>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='再次输入密码'
onChange={handleChange}
name='password2'
type='password'
style={{ marginBottom: '1em' }}
/>
{showEmailVerification && (
<>
<Form.Input
fluid
icon='mail'
iconPosition='left'
placeholder='输入邮箱地址'
onChange={handleChange}
name='email'
type='email'
action={
<Button
onClick={sendVerificationCode}
disabled={loading}
style={{ backgroundColor: '#2185d0', color: 'white' }}
>
获取验证码
</Button>
}
style={{ marginBottom: '1em' }}
/>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='输入验证码'
onChange={handleChange}
name='verification_code'
style={{ marginBottom: '1em' }}
/>
</>
)}
{turnstileEnabled && (
<div
style={{
marginBottom: '1em',
display: 'flex',
justifyContent: 'center',
}}
>
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/>
</div>
)}
<Button
color='blue'
fluid
size='large'
onClick={handleSubmit}
loading={loading}
>
注册
</Button>
</Form>
<Divider />
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
<div
style={{
textAlign: 'center',
fontSize: '0.9em',
color: '#666',
}}
>
已有账户？
<Link to='/login' style={{ color: '#2185d0' }}>
点击登录
</Link>
</div>
</Message>
</Card.Content>
</Card>
</Grid.Column>
</Grid>
);