xinyin025/one-api
1
0
Fork 0
mirror of https://github.com/songquanpeng/one-api.git synced 2025-09-17 01:06:37 +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:31:41 +08:00
parent be089a072b
commit 678d613179
1 changed files with 123 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
web/default/src/pages/TopUp/index.js
View File

@ -1,5 +1,13 @@
import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Card, Statistic } from 'semantic-ui-react';
import {
Button,
Form,
Grid,
Header,
Card,
Statistic,
Divider,
} from 'semantic-ui-react';
import { API, showError, showInfo, showSuccess } from '../../helpers';
import { renderQuota } from '../../helpers/render';
@ -78,33 +86,124 @@ const TopUp = () => {
<div className='dashboard-container'>
<Card fluid className='chart-card'>
<Card.Content>
<Card.Header className='header'>充值额度</Card.Header>
<Card.Header>
<Header as='h2' style={{ marginBottom: '1.5em' }}>
<i
className='money bill alternate outline icon'
style={{ color: '#2185d0' }}
></i>
充值中心
</Header>
</Card.Header>
<Grid columns={2} stackable>
<Grid.Column>
<Form>
<Form.Input
placeholder='兑换码'
name='redemptionCode'
value={redemptionCode}
onChange={(e) => {
setRedemptionCode(e.target.value);
}}
/>
<Button color='green' onClick={openTopUpLink}>
充值
</Button>
<Button color='yellow' onClick={topUp} disabled={isSubmitting}>
{isSubmitting ? '兑换中...' : '兑换'}
</Button>
</Form>
<Card
fluid
style={{
height: '100%',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
}}
>
<Card.Content>
<Card.Header>
<Header
as='h3'
style={{ color: '#2185d0', marginBottom: '1em' }}
>
<i className='shopping cart icon'></i>
在线充值
</Header>
</Card.Header>
<Card.Description>
<div style={{ textAlign: 'center', padding: '1em 0' }}>
<Statistic>
<Statistic.Value style={{ color: '#2185d0' }}>
{renderQuota(userQuota)}
</Statistic.Value>
<Statistic.Label>当前可用额度</Statistic.Label>
</Statistic>
<Button
primary
size='large'
onClick={openTopUpLink}
style={{ marginTop: '2em', width: '80%' }}
>
<i className='credit card icon'></i>
立即充值
</Button>
</div>
</Card.Description>
</Card.Content>
</Card>
</Grid.Column>
<Grid.Column>
<Statistic.Group widths='one'>
<Statistic>
<Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
<Statistic.Label>剩余额度</Statistic.Label>
</Statistic>
</Statistic.Group>
<Card
fluid
style={{
height: '100%',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
}}
>
<Card.Content>
<Card.Header>
<Header
as='h3'
style={{ color: '#21ba45', marginBottom: '1em' }}
>
<i className='ticket alternate icon'></i>
兑换码充值
</Header>
</Card.Header>
<Card.Description>
<Form size='large'>
<Form.Input
fluid
icon='key'
iconPosition='left'
placeholder='请输入兑换码'
value={redemptionCode}
onChange={(e) => {
setRedemptionCode(e.target.value);
}}
onPaste={(e) => {
e.preventDefault();
const pastedText = e.clipboardData.getData('text');
setRedemptionCode(pastedText.trim());
}}
action={
<Button
icon='paste'
content='粘贴'
onClick={async () => {
try {
const text =
await navigator.clipboard.readText();
setRedemptionCode(text.trim());
} catch (err) {
showError('无法访问剪贴板，请手动粘贴');
}
}}
/>
}
style={{ marginBottom: '1em' }}
/>
<Button
color='green'
fluid
size='large'
onClick={topUp}
loading={isSubmitting}
disabled={isSubmitting}
>
{isSubmitting ? '兑换中...' : '立即兑换'}
</Button>
</Form>
</Card.Description>
</Card.Content>
</Card>
</Grid.Column>
</Grid>
</Card.Content>