ChatGPT/one-api
1
0
Fork 0
mirror of https://github.com/songquanpeng/one-api.git synced 2025-10-19 01:54:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update default theme style

Browse Source
This commit is contained in:
JustSong
2025-01-31 23:25:32 +08:00
parent 45d10aa3df
commit be089a072b
2 changed files with 159 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
web/default/src/components/PasswordResetConfirm.js
View File

@@ -1,6 +1,21 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'; import {
import { API, copy, showError, showInfo, showNotice, showSuccess } from '../helpers'; Button,
Form,
Grid,
Header,
Image,
Card,
Message,
} from 'semantic-ui-react';
import {
API,
copy,
showError,
showInfo,
showNotice,
showSuccess,
} from '../helpers';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
const PasswordResetConfirm = () => { const PasswordResetConfirm = () => {
@@ -37,7 +52,7 @@ const PasswordResetConfirm = () => {
setDisableButton(false); setDisableButton(false);
setCountdown(30); setCountdown(30);
} }
return () => clearInterval(countdownInterval); return () => clearInterval(countdownInterval);
}, [disableButton, countdown]); }, [disableButton, countdown]);
async function handleSubmit(e) { async function handleSubmit(e) {
@@ -59,55 +74,82 @@ const PasswordResetConfirm = () => {
} }
setLoading(false); setLoading(false);
} }
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <Grid textAlign='center' style={{ marginTop: '48px' }}>
<Grid.Column style={{ maxWidth: 450 }}> <Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='' textAlign='center'> <Card
<Image src='/logo.png' /> 密码重置确认 fluid
</Header> className='chart-card'
<Form size='large'> style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
<Segment> >
<Form.Input <Card.Content>
fluid <Card.Header>
icon='mail' <Header
iconPosition='left' as='h2'
placeholder='邮箱地址' textAlign='center'
name='email' style={{ marginBottom: '1.5em' }}
value={email} >
readOnly <Image src='/logo.png' style={{ marginBottom: '10px' }} />
/> <Header.Content>密码重置确认</Header.Content>
{newPassword && ( </Header>
</Card.Header>
<Form size='large'>
<Form.Input <Form.Input
fluid fluid
icon='lock' icon='mail'
iconPosition='left' iconPosition='left'
placeholder='新密码' placeholder='邮箱地址'
name='newPassword' name='email'
value={newPassword} value={email}
readOnly readOnly
onClick={(e) => { style={{ marginBottom: '1em' }}
e.target.select(); />
navigator.clipboard.writeText(newPassword); {newPassword && (
showNotice(`密码已复制到剪贴板：${newPassword}`); <Form.Input
}} fluid
/> icon='lock'
iconPosition='left'
placeholder='新密码'
name='newPassword'
value={newPassword}
readOnly
style={{
marginBottom: '1em',
cursor: 'pointer',
backgroundColor: '#f8f9fa',
}}
onClick={(e) => {
e.target.select();
navigator.clipboard.writeText(newPassword);
showNotice(`密码已复制到剪贴板：${newPassword}`);
}}
/>
)}
<Button
color='blue'
fluid
size='large'
onClick={handleSubmit}
loading={loading}
disabled={disableButton}
style={{ marginBottom: '1em' }}
>
{disableButton ? '密码重置完成' : '提交'}
</Button>
</Form>
{newPassword && (
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
<p style={{ fontSize: '0.9em', color: '#666' }}>
新密码已生成，请点击密码框或上方按钮复制。请及时登录并修改密码！
</p>
</Message>
)} )}
<Button </Card.Content>
color='green' </Card>
fluid
size='large'
onClick={handleSubmit}
loading={loading}
disabled={disableButton}
>
{disableButton ? `密码重置完成` : '提交'}
</Button>
</Segment>
</Form>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
); );
}; };
export default PasswordResetConfirm; export default PasswordResetConfirm;

110
web/default/src/components/PasswordResetForm.js
View File

@@ -1,11 +1,19 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'; import {
Button,
Form,
Grid,
Header,
Image,
Card,
Message,
} from 'semantic-ui-react';
import { API, showError, showInfo, showSuccess } from '../helpers'; import { API, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile'; import Turnstile from 'react-turnstile';
const PasswordResetForm = () => { const PasswordResetForm = () => {
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
email: '' email: '',
}); });
const { email } = inputs; const { email } = inputs;
@@ -42,7 +50,7 @@ const PasswordResetForm = () => {
function handleChange(e) { function handleChange(e) {
const { name, value } = e.target; const { name, value } = e.target;
setInputs(inputs => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
} }
async function handleSubmit(e) { async function handleSubmit(e) {
@@ -69,42 +77,68 @@ const PasswordResetForm = () => {
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <Grid textAlign='center' style={{ marginTop: '48px' }}>
<Grid.Column style={{ maxWidth: 450 }}> <Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='' textAlign='center'> <Card
<Image src='/logo.png' /> 密码重置 fluid
</Header> className='chart-card'
<Form size='large'> style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
<Segment> >
<Form.Input <Card.Content>
fluid <Card.Header>
icon='mail' <Header
iconPosition='left' as='h2'
placeholder='邮箱地址' textAlign='center'
name='email' style={{ marginBottom: '1.5em' }}
value={email} >
onChange={handleChange} <Image src='/logo.png' style={{ marginBottom: '10px' }} />
/> <Header.Content>密码重置</Header.Content>
{turnstileEnabled ? ( </Header>
<Turnstile </Card.Header>
sitekey={turnstileSiteKey} <Form size='large'>
onVerify={(token) => { <Form.Input
setTurnstileToken(token); fluid
}} icon='mail'
iconPosition='left'
placeholder='邮箱地址'
name='email'
value={email}
onChange={handleChange}
style={{ marginBottom: '1em' }}
/> />
) : ( {turnstileEnabled && (
<></> <div
)} style={{
<Button marginBottom: '1em',
color='green' display: 'flex',
fluid justifyContent: 'center',
size='large' }}
onClick={handleSubmit} >
loading={loading} <Turnstile
disabled={disableButton} sitekey={turnstileSiteKey}
> onVerify={(token) => {
{disableButton ? `重试 (${countdown})` : '提交'} setTurnstileToken(token);
</Button> }}
</Segment> />
</Form> </div>
)}
<Button
color='blue'
fluid
size='large'
onClick={handleSubmit}
loading={loading}
disabled={disableButton}
style={{ marginBottom: '1em' }}
>
{disableButton ? `重试 (${countdown})` : '提交'}
</Button>
</Form>
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
<p style={{ fontSize: '0.9em', color: '#666' }}>
系统将向您的邮箱发送一封包含重置链接的邮件，请注意查收。
</p>
</Message>
</Card.Content>
</Card>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
); );