chore: update default theme style

web/default/src/pages/TopUp/index.js

@@ -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>
+              <Card
-                <Form.Input
+                fluid
-                  placeholder='兑换码'
+                style={{
-                  name='redemptionCode'
+                  height: '100%',
-                  value={redemptionCode}
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                  onChange={(e) => {
+                }}
-                    setRedemptionCode(e.target.value);
+              >
-                  }}
+                <Card.Content>
-                />
+                  <Card.Header>
-                <Button color='green' onClick={openTopUpLink}>
+                    <Header
-                  充值
+                      as='h3'
-                </Button>
+                      style={{ color: '#2185d0', marginBottom: '1em' }}
-                <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
+                    >
-                  {isSubmitting ? '兑换中...' : '兑换'}
+                      <i className='shopping cart icon'></i>
-                </Button>
+                      在线充值
-              </Form>
+                    </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'>
+              <Card
-                <Statistic>
+                fluid
-                  <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
+                style={{
-                  <Statistic.Label>剩余额度</Statistic.Label>
+                  height: '100%',
-                </Statistic>
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-              </Statistic.Group>
+                }}
+              >
+                <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>