fix: fix about page

Dockerfile

@@ -4,21 +4,20 @@ WORKDIR /web
 COPY ./VERSION .
 COPY ./web .
 
-WORKDIR /web/default
-RUN npm install
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+RUN npm install --prefix /web/default & \
+    npm install --prefix /web/berry & \
+    npm install --prefix /web/air & \
+    wait
 
-WORKDIR /web/berry
-RUN npm install
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
-
-WORKDIR /web/air
-RUN npm install
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/default/VERSION) npm run build --prefix /web/default & \
+    DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/berry/VERSION) npm run build --prefix /web/berry & \
+    DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/air/VERSION) npm run build --prefix /web/air & \
+    wait
 
 FROM golang:alpine AS builder2
 
 RUN apk add --no-cache g++
+RUN apk add --no-cache gcc musl-dev libc-dev sqlite-dev
 
 ENV GO111MODULE=on \
     CGO_ENABLED=1 \

model/user.go

@@ -95,7 +95,7 @@ func GetUserById(id int, selectAll bool) (*User, error) {
 	if selectAll {
 		err = DB.First(&user, "id = ?", id).Error
 	} else {
-		err = DB.Omit("password").First(&user, "id = ?", id).Error
+		err = DB.Omit("password", "access_token").First(&user, "id = ?", id).Error
 	}
 	return &user, err
 }

web/air/src/components/LogsTable.js

@@ -28,6 +28,8 @@ function renderType(type) {
       return <Tag color="orange" size="large"> 管理 </Tag>;
     case 4:
       return <Tag color="purple" size="large"> 系统 </Tag>;
+    case 5:
+      return <Tag color="violet" size="large"> 测试 </Tag>;
     default:
       return <Tag color="black" size="large"> 未知 </Tag>;
   }

web/berry/src/views/Log/type/LogType.js

@@ -3,7 +3,8 @@ const LOG_TYPE = {
   1: { value: '1', text: '充值', color: 'primary' },
   2: { value: '2', text: '消费', color: 'orange' },
   3: { value: '3', text: '管理', color: 'default' },
-  4: { value: '4', text: '系统', color: 'secondary' }
+  4: { value: '4', text: '系统', color: 'secondary' },
+  5: { value: '5', text: '测试', color: 'secondary' },
 };
 
 export default LOG_TYPE;

web/default/package.json

@@ -13,6 +13,7 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",
     "react-turnstile": "^1.0.5",
+    "recharts": "^2.15.1",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.3"
   },

web/default/src/App.js

@@ -25,6 +25,7 @@ import TopUp from './pages/TopUp';
 import Log from './pages/Log';
 import Chat from './pages/Chat';
 import LarkOAuth from './components/LarkOAuth';
+import Dashboard from './pages/Dashboard';
 
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
@@ -261,11 +262,11 @@ function App() {
       <Route
         path='/topup'
         element={
-        <PrivateRoute>
-          <Suspense fallback={<Loading></Loading>}>
-            <TopUp />
-          </Suspense>
-        </PrivateRoute>
+          <PrivateRoute>
+            <Suspense fallback={<Loading></Loading>}>
+              <TopUp />
+            </Suspense>
+          </PrivateRoute>
         }
       />
       <Route
@@ -292,9 +293,15 @@ function App() {
           </Suspense>
         }
       />
-      <Route path='*' element={
-          <NotFound />
-      } />
+      <Route
+        path='/dashboard'
+        element={
+          <PrivateRoute>
+            <Dashboard />
+          </PrivateRoute>
+        }
+      />
+      <Route path='*' element={<NotFound />} />
     </Routes>
   );
 }

web/default/src/components/ChannelsTable.js

@@ -435,7 +435,7 @@ const ChannelsTable = () => {
           点击下方详情按钮可以显示余额以及设置额外的测试模型。
         </Message>
       )}
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell

web/default/src/components/Footer.js

@@ -29,7 +29,7 @@ const Footer = () => {
 
   return (
     <Segment vertical>
-      <Container textAlign='center'>
+      <Container textAlign='center' style={{ color: '#666666' }}>
         {footer ? (
           <div
             className='custom-footer'
@@ -37,10 +37,7 @@ const Footer = () => {
           ></div>
         ) : (
           <div className='custom-footer'>
-            <a
-              href='https://github.com/songquanpeng/one-api'
-              target='_blank'
-            >
+            <a href='https://github.com/songquanpeng/one-api' target='_blank'>
               {systemName} {process.env.REACT_APP_VERSION}{' '}
             </a>
             由{' '}

web/default/src/components/Header.js

@@ -2,8 +2,22 @@ import React, { useContext, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { UserContext } from '../context/User';
 
-import { Button, Container, Dropdown, Icon, Menu, Segment } from 'semantic-ui-react';
-import { API, getLogo, getSystemName, isAdmin, isMobile, showSuccess } from '../helpers';
+import {
+  Button,
+  Container,
+  Dropdown,
+  Icon,
+  Menu,
+  Segment,
+} from 'semantic-ui-react';
+import {
+  API,
+  getLogo,
+  getSystemName,
+  isAdmin,
+  isMobile,
+  showSuccess,
+} from '../helpers';
 import '../index.css';
 
 // Header Buttons
@@ -11,58 +25,63 @@ let headerButtons = [
   {
     name: '首页',
     to: '/',
-    icon: 'home'
+    icon: 'home',
   },
   {
     name: '渠道',
     to: '/channel',
     icon: 'sitemap',
-    admin: true
+    admin: true,
   },
   {
     name: '令牌',
     to: '/token',
-    icon: 'key'
+    icon: 'key',
   },
   {
     name: '兑换',
     to: '/redemption',
     icon: 'dollar sign',
-    admin: true
+    admin: true,
   },
   {
     name: '充值',
     to: '/topup',
-    icon: 'cart'
+    icon: 'cart',
   },
   {
     name: '用户',
     to: '/user',
     icon: 'user',
-    admin: true
+    admin: true,
+  },
+  {
+    name: '总览',
+    to: '/dashboard',
+    icon: 'chart bar',
   },
   {
     name: '日志',
     to: '/log',
-    icon: 'book'
+    icon: 'book',
   },
   {
     name: '设置',
     to: '/setting',
-    icon: 'setting'
+    icon: 'setting',
   },
   {
     name: '关于',
     to: '/about',
-    icon: 'info circle'
-  }
+    icon: 'info circle',
+  },
 ];
 
 if (localStorage.getItem('chat_link')) {
   headerButtons.splice(1, 0, {
     name: '聊天',
     to: '/chat',
-    icon: 'comments'
+    icon: 'comments',
   });
 }
 
@@ -97,14 +116,24 @@ const Header = () => {
               navigate(button.to);
               setShowSidebar(false);
             }}
+            style={{ fontSize: '15px' }}
           >
             {button.name}
           </Menu.Item>
         );
       }
       return (
-        <Menu.Item key={button.name} as={Link} to={button.to}>
-          <Icon name={button.icon} />
+        <Menu.Item
+          key={button.name}
+          as={Link}
+          to={button.to}
+          style={{
+            fontSize: '15px',
+            fontWeight: '400',
+            color: '#666',
+          }}
+        >
+          <Icon name={button.icon} style={{ marginRight: '4px' }} />
           {button.name}
         </Menu.Item>
       );
@@ -120,21 +149,17 @@ const Header = () => {
           style={
             showSidebar
               ? {
-                borderBottom: 'none',
-                marginBottom: '0',
-                borderTop: 'none',
-                height: '51px'
-              }
+                  borderBottom: 'none',
+                  marginBottom: '0',
+                  borderTop: 'none',
+                  height: '51px',
+                }
               : { borderTop: 'none', height: '52px' }
           }
         >
           <Container>
             <Menu.Item as={Link} to='/'>
-              <img
-                src={logo}
-                alt='logo'
-                style={{ marginRight: '0.75em' }}
-              />
+              <img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
               <div style={{ fontSize: '20px' }}>
                 <b>{systemName}</b>
               </div>
@@ -152,7 +177,9 @@ const Header = () => {
               {renderButtons(true)}
               <Menu.Item>
                 {userState.user ? (
-                  <Button onClick={logout}>注销</Button>
+                  <Button onClick={logout} style={{ color: '#666666' }}>
+                    注销
+                  </Button>
                 ) : (
                   <>
                     <Button
@@ -185,12 +212,25 @@ const Header = () => {
 
   return (
     <>
-      <Menu borderless style={{ borderTop: 'none' }}>
+      <Menu
+        borderless
+        style={{
+          borderTop: 'none',
+          boxShadow: 'rgba(0, 0, 0, 0.04) 0px 2px 12px 0px',
+          border: 'none',
+        }}
+      >
         <Container>
           <Menu.Item as={Link} to='/' className={'hide-on-mobile'}>
             <img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
-            <div style={{ fontSize: '20px' }}>
-              <b>{systemName}</b>
+            <div
+              style={{
+                fontSize: '18px',
+                fontWeight: '500',
+                color: '#333',
+              }}
+            >
+              {systemName}
             </div>
           </Menu.Item>
           {renderButtons(false)}
@@ -200,9 +240,23 @@ const Header = () => {
                 text={userState.user.username}
                 pointing
                 className='link item'
+                style={{
+                  fontSize: '15px',
+                  fontWeight: '400',
+                  color: '#666',
+                }}
               >
                 <Dropdown.Menu>
-                  <Dropdown.Item onClick={logout}>注销</Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={logout}
+                    style={{
+                      fontSize: '15px',
+                      fontWeight: '400',
+                      color: '#666',
+                    }}
+                  >
+                    注销
+                  </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
             ) : (
@@ -211,6 +265,11 @@ const Header = () => {
                 as={Link}
                 to='/login'
                 className='btn btn-link'
+                style={{
+                  fontSize: '15px',
+                  fontWeight: '400',
+                  color: '#666',
+                }}
               />
             )}
           </Menu.Menu>

web/default/src/components/LoginForm.js

@@ -1,5 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Divider,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Message,
+  Modal,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
@@ -10,7 +21,7 @@ const LoginForm = () => {
   const [inputs, setInputs] = useState({
     username: '',
     password: '',
-    wechat_verification_code: ''
+    wechat_verification_code: '',
   });
   const [searchParams, setSearchParams] = useSearchParams();
   const [submitted, setSubmitted] = useState(false);
@@ -63,7 +74,7 @@ const LoginForm = () => {
     if (username && password) {
       const res = await API.post(`/api/user/login`, {
         username,
-        password
+        password,
       });
       const { success, message, data } = res.data;
       if (success) {
@@ -86,129 +97,149 @@ const LoginForm = () => {
   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='用户名 / 邮箱地址'
-              name='username'
-              value={username}
-              onChange={handleChange}
-            />
-            <Form.Input
-              fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='密码'
-              name='password'
-              type='password'
-              value={password}
-              onChange={handleChange}
-            />
-            <Button color='green' fluid size='large' onClick={handleSubmit}>
-              登录
-            </Button>
-          </Segment>
-        </Form>
-        <Message>
-          忘记密码？
-          <Link to='/reset' className='btn btn-link'>
-            点击重置
-          </Link>
-          ； 没有账户？
-          <Link to='/register' className='btn btn-link'>
-            点击注册
-          </Link>
-        </Message>
-        {status.github_oauth || status.wechat_login || status.lark_client_id ? (
-          <>
-            <Divider horizontal>Or</Divider>
-            <div style={{ display: "flex", justifyContent: "center" }}>
-              {status.github_oauth ? (
-                <Button
-                  circular
-                  color='black'
-                  icon='github'
-                  onClick={() => onGitHubOAuthClicked(status.github_client_id)}
-                />
-              ) : (
-                <></>
-              )}
-              {status.wechat_login ? (
-                <Button
-                  circular
-                  color='green'
-                  icon='wechat'
-                  onClick={onWeChatLoginClicked}
-                />
-              ) : (
-                <></>
-              )}
-              {status.lark_client_id ? (
-                <div style={{
-                  background: "radial-gradient(circle, #FFFFFF, #FFFFFF, #00D6B9, #2F73FF, #0a3A9C)",
-                  width: "36px",
-                  height: "36px",
-                  borderRadius: "10em",
-                  display: "flex",
-                  cursor: "pointer"
-                }}
-                  onClick={() => onLarkOAuthClicked(status.lark_client_id)}
-                >
-                  <Image
-                    src={larkIcon}
-                    avatar
-                    style={{ width: "16px", height: "16px", cursor: "pointer", margin: "auto" }}
-                    onClick={() => onLarkOAuthClicked(status.lark_client_id)}
-                  />
-                </div>
-              ) : (
-                <></>
-              )}
-            </div>
-          </>
-        ) : (
-          <></>
-        )}
-        <Modal
-          onClose={() => setShowWeChatLoginModal(false)}
-          onOpen={() => setShowWeChatLoginModal(true)}
-          open={showWeChatLoginModal}
-          size={'mini'}
+        <Card
+          fluid
+          className='chart-card'
+          style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
         >
-          <Modal.Content>
-            <Modal.Description>
-              <Image src={status.wechat_qrcode} fluid />
-              <div style={{ textAlign: 'center' }}>
-                <p>
-                  微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
-                </p>
+          <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='用户名 / 邮箱地址'
+                name='username'
+                value={username}
+                onChange={handleChange}
+                style={{ marginBottom: '1em' }}
+              />
+              <Form.Input
+                fluid
+                icon='lock'
+                iconPosition='left'
+                placeholder='密码'
+                name='password'
+                type='password'
+                value={password}
+                onChange={handleChange}
+                style={{ marginBottom: '1.5em' }}
+              />
+              <Button
+                fluid
+                size='large'
+                style={{
+                  background: '#2F73FF', // 使用更现代的蓝色
+                  color: 'white',
+                  marginBottom: '1.5em',
+                }}
+                onClick={handleSubmit}
+              >
+                登录
+              </Button>
+            </Form>
+
+            <Divider />
+            <Message style={{ background: 'transparent', boxShadow: 'none' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  fontSize: '0.9em',
+                  color: '#666',
+                }}
+              >
+                <div>
+                  忘记密码？
+                  <Link to='/reset' style={{ color: '#2185d0' }}>
+                    点击重置
+                  </Link>
+                </div>
+                <div>
+                  没有账户？
+                  <Link to='/register' style={{ color: '#2185d0' }}>
+                    点击注册
+                  </Link>
+                </div>
               </div>
-              <Form size='large'>
-                <Form.Input
-                  fluid
-                  placeholder='验证码'
-                  name='wechat_verification_code'
-                  value={inputs.wechat_verification_code}
-                  onChange={handleChange}
-                />
-                <Button
-                  color=''
-                  fluid
-                  size='large'
-                  onClick={onSubmitWeChatVerificationCode}
+            </Message>
+
+            {(status.github_oauth ||
+              status.wechat_login ||
+              status.lark_client_id) && (
+              <>
+                <Divider
+                  horizontal
+                  style={{ color: '#666', fontSize: '0.9em' }}
                 >
-                  登录
-                </Button>
-              </Form>
-            </Modal.Description>
-          </Modal.Content>
-        </Modal>
+                  使用其他方式登录
+                </Divider>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: '1em',
+                    marginTop: '1em',
+                  }}
+                >
+                  {status.github_oauth && (
+                    <Button
+                      circular
+                      color='black'
+                      icon='github'
+                      onClick={() =>
+                        onGitHubOAuthClicked(status.github_client_id)
+                      }
+                    />
+                  )}
+                  {status.wechat_login && (
+                    <Button
+                      circular
+                      color='green'
+                      icon='wechat'
+                      onClick={onWeChatLoginClicked}
+                    />
+                  )}
+                  {status.lark_client_id && (
+                    <div
+                      style={{
+                        background:
+                          'radial-gradient(circle, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF)',
+                        width: '36px',
+                        height: '36px',
+                        borderRadius: '10em',
+                        display: 'flex',
+                        cursor: 'pointer',
+                      }}
+                      onClick={() => onLarkOAuthClicked(status.lark_client_id)}
+                    >
+                      <Image
+                        src={larkIcon}
+                        avatar
+                        style={{
+                          width: '36px',
+                          height: '36px',
+                          cursor: 'pointer',
+                          margin: 'auto',
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </Card.Content>
+        </Card>
       </Grid.Column>
     </Grid>
   );

web/default/src/components/LogsTable.js

@@ -307,7 +307,7 @@ const LogsTable = () => {
 
   return (
     <>
-      <Segment>
+      <>
         <Header as='h3'>
           使用明细（总消耗额度：
           {showStat && renderQuota(stat.quota)}
@@ -388,7 +388,7 @@ const LogsTable = () => {
             </>
           )}
         </Form>
-        <Table basic compact size='small'>
+        <Table basic={'very'} compact size='small'>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell
@@ -596,7 +596,7 @@ const LogsTable = () => {
             </Table.Row>
           </Table.Footer>
         </Table>
-      </Segment>
+      </>
     </>
   );
 };

web/default/src/components/PasswordResetConfirm.js

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

web/default/src/components/PasswordResetForm.js

@@ -1,11 +1,19 @@
 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 Turnstile from 'react-turnstile';
 
 const PasswordResetForm = () => {
   const [inputs, setInputs] = useState({
-    email: ''
+    email: '',
   });
   const { email } = inputs;
 
@@ -42,7 +50,7 @@ const PasswordResetForm = () => {
 
   function handleChange(e) {
     const { name, value } = e.target;
-    setInputs(inputs => ({ ...inputs, [name]: value }));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   }
 
   async function handleSubmit(e) {
@@ -69,42 +77,72 @@ const PasswordResetForm = () => {
   return (
     <Grid textAlign='center' style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src='/logo.png' /> 密码重置
-        </Header>
-        <Form size='large'>
-          <Segment>
-            <Form.Input
-              fluid
-              icon='mail'
-              iconPosition='left'
-              placeholder='邮箱地址'
-              name='email'
-              value={email}
-              onChange={handleChange}
-            />
-            {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.png' style={{ marginBottom: '10px' }} />
+                <Header.Content>密码重置</Header.Content>
+              </Header>
+            </Card.Header>
+            <Form size='large'>
+              <Form.Input
+                fluid
+                icon='mail'
+                iconPosition='left'
+                placeholder='邮箱地址'
+                name='email'
+                value={email}
+                onChange={handleChange}
+                style={{ marginBottom: '1em' }}
               />
-            ) : (
-              <></>
-            )}
-            <Button
-              color='green'
-              fluid
-              size='large'
-              onClick={handleSubmit}
-              loading={loading}
-              disabled={disableButton}
-            >
-              {disableButton ? `重试 (${countdown})` : '提交'}
-            </Button>
-          </Segment>
-        </Form>
+              {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}
+                disabled={disableButton}
+                style={{
+                  background: '#2F73FF', // 使用更现代的蓝色
+                  color: 'white',
+                  marginBottom: '1.5em',
+                }}
+              >
+                {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>
   );

web/default/src/components/RedemptionsTable.js

@@ -1,29 +1,59 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Popup, Pagination, Table } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Popup,
+  Pagination,
+  Table,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-import { API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showInfo,
+  showSuccess,
+  showWarning,
+  timestamp2string,
+} from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
 
 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }
 
 function renderStatus(status) {
   switch (status) {
     case 1:
-      return <Label basic color='green'>未使用</Label>;
+      return (
+        <Label basic color='green'>
+          未使用
+        </Label>
+      );
     case 2:
-      return <Label basic color='red'> 已禁用 </Label>;
+      return (
+        <Label basic color='red'>
+          {' '}
+          已禁用{' '}
+        </Label>
+      );
     case 3:
-      return <Label basic color='grey'> 已使用 </Label>;
+      return (
+        <Label basic color='grey'>
+          {' '}
+          已使用{' '}
+        </Label>
+      );
     default:
-      return <Label basic color='black'> 未知状态 </Label>;
+      return (
+        <Label basic color='black'>
+          {' '}
+          未知状态{' '}
+        </Label>
+      );
   }
 }
 
@@ -110,7 +140,9 @@ const RedemptionsTable = () => {
       return;
     }
     setSearching(true);
-    const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
+    const res = await API.get(
+      `/api/redemption/search?keyword=${searchKeyword}`
+    );
     const { success, message, data } = res.data;
     if (success) {
       setRedemptions(data);
@@ -159,7 +191,7 @@ const RedemptionsTable = () => {
         />
       </Form>
 
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
@@ -225,11 +257,19 @@ const RedemptionsTable = () => {
               return (
                 <Table.Row key={redemption.id}>
                   <Table.Cell>{redemption.id}</Table.Cell>
-                  <Table.Cell>{redemption.name ? redemption.name : '无'}</Table.Cell>
+                  <Table.Cell>
+                    {redemption.name ? redemption.name : '无'}
+                  </Table.Cell>
                   <Table.Cell>{renderStatus(redemption.status)}</Table.Cell>
                   <Table.Cell>{renderQuota(redemption.quota)}</Table.Cell>
-                  <Table.Cell>{renderTimestamp(redemption.created_time)}</Table.Cell>
-                  <Table.Cell>{redemption.redeemed_time ? renderTimestamp(redemption.redeemed_time) : "尚未兑换"} </Table.Cell>
+                  <Table.Cell>
+                    {renderTimestamp(redemption.created_time)}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {redemption.redeemed_time
+                      ? renderTimestamp(redemption.redeemed_time)
+                      : '尚未兑换'}{' '}
+                  </Table.Cell>
                   <Table.Cell>
                     <div>
                       <Button
@@ -239,7 +279,9 @@ const RedemptionsTable = () => {
                           if (await copy(redemption.key)) {
                             showSuccess('已复制到剪贴板！');
                           } else {
-                            showWarning('无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。')
+                            showWarning(
+                              '无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。'
+                            );
                             setSearchKeyword(redemption.key);
                           }
                         }}
@@ -267,7 +309,7 @@ const RedemptionsTable = () => {
                       </Popup>
                       <Button
                         size={'small'}
-                        disabled={redemption.status === 3}  // used
+                        disabled={redemption.status === 3} // used
                         onClick={() => {
                           manageRedemption(
                             redemption.id,
@@ -295,7 +337,12 @@ const RedemptionsTable = () => {
         <Table.Footer>
           <Table.Row>
             <Table.HeaderCell colSpan='8'>
-              <Button size='small' as={Link} to='/redemption/add' loading={loading}>
+              <Button
+                size='small'
+                as={Link}
+                to='/redemption/add'
+                loading={loading}
+              >
                 添加新的兑换码
               </Button>
               <Pagination

web/default/src/components/RegisterForm.js

@@ -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,135 @@ 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
+                fluid
+                size='large'
+                onClick={handleSubmit}
+                style={{
+                  background: '#2F73FF', // 使用更现代的蓝色
+                  color: 'white',
+                  marginBottom: '1.5em',
+                }}
+                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>
   );

web/default/src/components/TokensTable.js

@@ -1,7 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dropdown, Form, Label, Pagination, Popup, Table } from 'semantic-ui-react';
+import {
+  Button,
+  Dropdown,
+  Form,
+  Label,
+  Pagination,
+  Popup,
+  Table,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-import { API, copy, showError, showSuccess, showWarning, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showSuccess,
+  showWarning,
+  timestamp2string,
+} from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
@@ -21,25 +36,45 @@ const OPEN_LINK_OPTIONS = [
 ];
 
 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }
 
 function renderStatus(status) {
   switch (status) {
     case 1:
-      return <Label basic color='green'>已启用</Label>;
+      return (
+        <Label basic color='green'>
+          已启用
+        </Label>
+      );
     case 2:
-      return <Label basic color='red'> 已禁用 </Label>;
+      return (
+        <Label basic color='red'>
+          {' '}
+          已禁用{' '}
+        </Label>
+      );
     case 3:
-      return <Label basic color='yellow'> 已过期 </Label>;
+      return (
+        <Label basic color='yellow'>
+          {' '}
+          已过期{' '}
+        </Label>
+      );
     case 4:
-      return <Label basic color='grey'> 已耗尽 </Label>;
+      return (
+        <Label basic color='grey'>
+          {' '}
+          已耗尽{' '}
+        </Label>
+      );
     default:
-      return <Label basic color='black'> 未知状态 </Label>;
+      return (
+        <Label basic color='black'>
+          {' '}
+          未知状态{' '}
+        </Label>
+      );
   }
 }
 
@@ -98,9 +133,10 @@ const TokensTable = () => {
     let encodedServerAddress = encodeURIComponent(serverAddress);
     const nextLink = localStorage.getItem('chat_link');
     let nextUrl;
-  
+
     if (nextLink) {
-      nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      nextUrl =
+        nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     } else {
       nextUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     }
@@ -117,7 +153,9 @@ const TokensTable = () => {
         url = nextUrl;
         break;
       case 'lobechat':
-        url = nextLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
+        url =
+          nextLink +
+          `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
         break;
       default:
         url = `sk-${key}`;
@@ -135,7 +173,7 @@ const TokensTable = () => {
     let serverAddress = '';
     if (status) {
       status = JSON.parse(status);
-      serverAddress = status.server_address; 
+      serverAddress = status.server_address;
     }
     if (serverAddress === '') {
       serverAddress = window.location.origin;
@@ -143,9 +181,10 @@ const TokensTable = () => {
     let encodedServerAddress = encodeURIComponent(serverAddress);
     const chatLink = localStorage.getItem('chat_link');
     let defaultUrl;
-  
+
     if (chatLink) {
-      defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      defaultUrl =
+        chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     } else {
       defaultUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     }
@@ -154,21 +193,23 @@ const TokensTable = () => {
       case 'ama':
         url = `ama://set-api-key?server=${encodedServerAddress}&key=sk-${key}`;
         break;
-  
+
       case 'opencat':
         url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
         break;
 
       case 'lobechat':
-        url = chatLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
+        url =
+          chatLink +
+          `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
         break;
 
       default:
         url = defaultUrl;
     }
-  
+
     window.open(url, '_blank');
-  }
+  };
 
   useEffect(() => {
     loadTokens(0, orderBy)
@@ -274,7 +315,7 @@ const TokensTable = () => {
         />
       </Form>
 
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
@@ -342,12 +383,20 @@ const TokensTable = () => {
                   <Table.Cell>{token.name ? token.name : '无'}</Table.Cell>
                   <Table.Cell>{renderStatus(token.status)}</Table.Cell>
                   <Table.Cell>{renderQuota(token.used_quota)}</Table.Cell>
-                  <Table.Cell>{token.unlimited_quota ? '无限制' : renderQuota(token.remain_quota, 2)}</Table.Cell>
+                  <Table.Cell>
+                    {token.unlimited_quota
+                      ? '无限制'
+                      : renderQuota(token.remain_quota, 2)}
+                  </Table.Cell>
                   <Table.Cell>{renderTimestamp(token.created_time)}</Table.Cell>
-                  <Table.Cell>{token.expired_time === -1 ? '永不过期' : renderTimestamp(token.expired_time)}</Table.Cell>
+                  <Table.Cell>
+                    {token.expired_time === -1
+                      ? '永不过期'
+                      : renderTimestamp(token.expired_time)}
+                  </Table.Cell>
                   <Table.Cell>
                     <div>
-                    <Button.Group color='green' size={'small'}>
+                      <Button.Group color='green' size={'small'}>
                         <Button
                           size={'small'}
                           positive
@@ -360,38 +409,37 @@ const TokensTable = () => {
                         <Dropdown
                           className='button icon'
                           floating
-                          options={COPY_OPTIONS.map(option => ({
+                          options={COPY_OPTIONS.map((option) => ({
                             ...option,
                             onClick: async () => {
                               await onCopy(option.value, token.key);
-                            }
+                            },
                           }))}
                           trigger={<></>}
                         />
-                      </Button.Group>
-                      {' '}
+                      </Button.Group>{' '}
                       <Button.Group color='blue' size={'small'}>
                         <Button
-                            size={'small'}
-                            positive
-                            onClick={() => {     
-                              onOpenLink('', token.key);       
-                            }}>
-                            聊天
-                          </Button>
-                          <Dropdown   
-                            className="button icon"       
-                            floating
-                            options={OPEN_LINK_OPTIONS.map(option => ({
-                              ...option,
-                              onClick: async () => {
-                                await onOpenLink(option.value, token.key);
-                              }
-                            }))}       
-                            trigger={<></>}   
-                          />
-                      </Button.Group>
-                      {' '}
+                          size={'small'}
+                          positive
+                          onClick={() => {
+                            onOpenLink('', token.key);
+                          }}
+                        >
+                          聊天
+                        </Button>
+                        <Dropdown
+                          className='button icon'
+                          floating
+                          options={OPEN_LINK_OPTIONS.map((option) => ({
+                            ...option,
+                            onClick: async () => {
+                              await onOpenLink(option.value, token.key);
+                            },
+                          }))}
+                          trigger={<></>}
+                        />
+                      </Button.Group>{' '}
                       <Popup
                         trigger={
                           <Button size='small' negative>
@@ -443,14 +491,24 @@ const TokensTable = () => {
               <Button size='small' as={Link} to='/token/add' loading={loading}>
                 添加新的令牌
               </Button>
-              <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+              <Button size='small' onClick={refresh} loading={loading}>
+                刷新
+              </Button>
               <Dropdown
                 placeholder='排序方式'
                 selection
                 options={[
                   { key: '', text: '默认排序', value: '' },
-                  { key: 'remain_quota', text: '按剩余额度排序', value: 'remain_quota' },
-                  { key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
+                  {
+                    key: 'remain_quota',
+                    text: '按剩余额度排序',
+                    value: 'remain_quota',
+                  },
+                  {
+                    key: 'used_quota',
+                    text: '按已用额度排序',
+                    value: 'used_quota',
+                  },
                 ]}
                 value={orderBy}
                 onChange={handleOrderByChange}

web/default/src/components/UsersTable.js

@@ -1,10 +1,23 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Pagination, Popup, Table, Dropdown } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Pagination,
+  Popup,
+  Table,
+  Dropdown,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';
+import {
+  renderGroup,
+  renderNumber,
+  renderQuota,
+  renderText,
+} from '../helpers/render';
 
 function renderRole(role) {
   switch (role) {
@@ -66,7 +79,7 @@ const UsersTable = () => {
     (async () => {
       const res = await API.post('/api/user/manage', {
         username,
-        action
+        action,
       });
       const { success, message } = res.data;
       if (success) {
@@ -169,7 +182,7 @@ const UsersTable = () => {
         />
       </Form>
 
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
@@ -239,7 +252,9 @@ const UsersTable = () => {
                     <Popup
                       content={user.email ? user.email : '未绑定邮箱地址'}
                       key={user.username}
-                      header={user.display_name ? user.display_name : user.username}
+                      header={
+                        user.display_name ? user.display_name : user.username
+                      }
                       trigger={<span>{renderText(user.username, 15)}</span>}
                       hoverable
                     />
@@ -249,9 +264,22 @@ const UsersTable = () => {
                   {/*  {user.email ? <Popup hoverable content={user.email} trigger={<span>{renderText(user.email, 24)}</span>} /> : '无'}*/}
                   {/*</Table.Cell>*/}
                   <Table.Cell>
-                    <Popup content='剩余额度' trigger={<Label basic>{renderQuota(user.quota)}</Label>} />
-                    <Popup content='已用额度' trigger={<Label basic>{renderQuota(user.used_quota)}</Label>} />
-                    <Popup content='请求次数' trigger={<Label basic>{renderNumber(user.request_count)}</Label>} />
+                    <Popup
+                      content='剩余额度'
+                      trigger={<Label basic>{renderQuota(user.quota)}</Label>}
+                    />
+                    <Popup
+                      content='已用额度'
+                      trigger={
+                        <Label basic>{renderQuota(user.used_quota)}</Label>
+                      }
+                    />
+                    <Popup
+                      content='请求次数'
+                      trigger={
+                        <Label basic>{renderNumber(user.request_count)}</Label>
+                      }
+                    />
                   </Table.Cell>
                   <Table.Cell>{renderRole(user.role)}</Table.Cell>
                   <Table.Cell>{renderStatus(user.status)}</Table.Cell>
@@ -279,7 +307,11 @@ const UsersTable = () => {
                       </Button>
                       <Popup
                         trigger={
-                          <Button size='small' negative disabled={user.role === 100}>
+                          <Button
+                            size='small'
+                            negative
+                            disabled={user.role === 100}
+                          >
                             删除
                           </Button>
                         }
@@ -335,8 +367,16 @@ const UsersTable = () => {
                 options={[
                   { key: '', text: '默认排序', value: '' },
                   { key: 'quota', text: '按剩余额度排序', value: 'quota' },
-                  { key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
-                  { key: 'request_count', text: '按请求次数排序', value: 'request_count' },
+                  {
+                    key: 'used_quota',
+                    text: '按已用额度排序',
+                    value: 'used_quota',
+                  },
+                  {
+                    key: 'request_count',
+                    text: '按请求次数排序',
+                    value: 'request_count',
+                  },
                 ]}
                 value={orderBy}
                 onChange={handleOrderByChange}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Header, Segment } from 'semantic-ui-react';
+import { Card, Header, Segment } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 
@@ -28,31 +28,38 @@ const About = () => {
   useEffect(() => {
     displayAbout().then();
   }, []);
-
   return (
     <>
-      {
-        aboutLoaded && about === '' ? <>
-          <Segment>
-            <Header as='h3'>关于</Header>
-            <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
-            项目仓库地址：
-            <a href='https://github.com/songquanpeng/one-api'>
-              https://github.com/songquanpeng/one-api
-            </a>
-          </Segment>
-        </> : <>
-          {
-            about.startsWith('https://') ? <iframe
+      {aboutLoaded && about === '' ? (
+        <div className='dashboard-container'>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header className='header'>关于系统</Card.Header>
+              <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
+              项目仓库地址：
+              <a href='https://github.com/songquanpeng/one-api'>
+                https://github.com/songquanpeng/one-api
+              </a>
+            </Card.Content>
+          </Card>
+        </div>
+      ) : (
+        <>
+          {about.startsWith('https://') ? (
+            <iframe
               src={about}
               style={{ width: '100%', height: '100vh', border: 'none' }}
-            /> : <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: about }}></div>
-          }
+            />
+          ) : (
+            <div
+              style={{ fontSize: 'larger' }}
+              dangerouslySetInnerHTML={{ __html: about }}
+            ></div>
+          )}
         </>
-      }
+      )}
     </>
   );
 };
 
-
 export default About;

web/default/src/pages/Channel/EditChannel.js

@@ -1,13 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Input, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Header,
+  Input,
+  Message,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { API, copy, getChannelModels, showError, showInfo, showSuccess, verifyJSON } from '../../helpers';
+import {
+  API,
+  copy,
+  getChannelModels,
+  showError,
+  showInfo,
+  showSuccess,
+  verifyJSON,
+} from '../../helpers';
 import { CHANNEL_OPTIONS } from '../../constants';
 
 const MODEL_MAPPING_EXAMPLE = {
   'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
   'gpt-4-0314': 'gpt-4',
-  'gpt-4-32k-0314': 'gpt-4-32k'
+  'gpt-4-32k-0314': 'gpt-4-32k',
 };
 
 function type2secretPrompt(type) {
@@ -45,7 +61,7 @@ const EditChannel = () => {
     model_mapping: '',
     system_prompt: '',
     models: [],
-    groups: ['default']
+    groups: ['default'],
   };
   const [batch, setBatch] = useState(false);
   const [inputs, setInputs] = useState(originInputs);
@@ -61,7 +77,7 @@ const EditChannel = () => {
     ak: '',
     user_id: '',
     vertex_ai_project_id: '',
-    vertex_ai_adc: ''
+    vertex_ai_adc: '',
   });
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -93,7 +109,11 @@ const EditChannel = () => {
         data.groups = data.group.split(',');
       }
       if (data.model_mapping !== '') {
-        data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
+        data.model_mapping = JSON.stringify(
+          JSON.parse(data.model_mapping),
+          null,
+          2
+        );
       }
       setInputs(data);
       if (data.config !== '') {
@@ -112,7 +132,7 @@ const EditChannel = () => {
       let localModelOptions = res.data.data.map((model) => ({
         key: model.id,
         text: model.id,
-        value: model.id
+        value: model.id,
       }));
       setOriginModelOptions(localModelOptions);
       setFullModels(res.data.data.map((model) => model.id));
@@ -124,11 +144,13 @@ const EditChannel = () => {
   const fetchGroups = async () => {
     try {
       let res = await API.get(`/api/group/`);
-      setGroupOptions(res.data.data.map((group) => ({
-        key: group,
-        text: group,
-        value: group
-      })));
+      setGroupOptions(
+        res.data.data.map((group) => ({
+          key: group,
+          text: group,
+          value: group,
+        }))
+      );
     } catch (error) {
       showError(error.message);
     }
@@ -141,7 +163,7 @@ const EditChannel = () => {
         localModelOptions.push({
           key: model,
           text: model,
-          value: model
+          value: model,
         });
       }
     });
@@ -163,7 +185,11 @@ const EditChannel = () => {
     if (inputs.key === '') {
       if (config.ak !== '' && config.sk !== '' && config.region !== '') {
         inputs.key = `${config.ak}|${config.sk}|${config.region}`;
-      } else if (config.region !== '' && config.vertex_ai_project_id !== '' && config.vertex_ai_adc !== '') {
+      } else if (
+        config.region !== '' &&
+        config.vertex_ai_project_id !== '' &&
+        config.vertex_ai_adc !== ''
+      ) {
         inputs.key = `${config.region}|${config.vertex_ai_project_id}|${config.vertex_ai_adc}`;
       }
     }
@@ -179,9 +205,12 @@ const EditChannel = () => {
       showInfo('模型映射必须是合法的 JSON 格式！');
       return;
     }
-    let localInputs = {...inputs};
+    let localInputs = { ...inputs };
     if (localInputs.base_url && localInputs.base_url.endsWith('/')) {
-      localInputs.base_url = localInputs.base_url.slice(0, localInputs.base_url.length - 1);
+      localInputs.base_url = localInputs.base_url.slice(
+        0,
+        localInputs.base_url.length - 1
+      );
     }
     if (localInputs.type === 3 && localInputs.other === '') {
       localInputs.other = '2024-03-01-preview';
@@ -191,7 +220,10 @@ const EditChannel = () => {
     localInputs.group = localInputs.groups.join(',');
     localInputs.config = JSON.stringify(config);
     if (isEdit) {
-      res = await API.put(`/api/channel/`, { ...localInputs, id: parseInt(channelId) });
+      res = await API.put(`/api/channel/`, {
+        ...localInputs,
+        id: parseInt(channelId),
+      });
     } else {
       res = await API.post(`/api/channel/`, localInputs);
     }
@@ -217,9 +249,9 @@ const EditChannel = () => {
     localModelOptions.push({
       key: customModel,
       text: customModel,
-      value: customModel
+      value: customModel,
     });
-    setModelOptions(modelOptions => {
+    setModelOptions((modelOptions) => {
       return [...modelOptions, ...localModelOptions];
     });
     setCustomModel('');
@@ -227,34 +259,45 @@ const EditChannel = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新渠道信息' : '创建新的渠道'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Select
-              label='类型'
-              name='type'
-              required
-              search
-              options={CHANNEL_OPTIONS}
-              value={inputs.type}
-              onChange={handleInputChange}
-            />
-          </Form.Field>
-          {
-            inputs.type === 3 && (
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新渠道信息' : '创建新的渠道'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Select
+                label='类型'
+                name='type'
+                required
+                search
+                options={CHANNEL_OPTIONS}
+                value={inputs.type}
+                onChange={handleInputChange}
+              />
+            </Form.Field>
+            {inputs.type === 3 && (
               <>
                 <Message>
-                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为 One API 会把请求体中的 model
-                  参数替换为你的部署名称（模型名称中的点会被剔除），<a target='_blank'
-                                                                    href='https://github.com/songquanpeng/one-api/issues/133?notification_referrer_id=NT_kwDOAmJSYrM2NjIwMzI3NDgyOjM5OTk4MDUw#issuecomment-1571602271'>图片演示</a>。
+                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>
+                  ，因为 One API 会把请求体中的 model
+                  参数替换为你的部署名称（模型名称中的点会被剔除），
+                  <a
+                    target='_blank'
+                    href='https://github.com/songquanpeng/one-api/issues/133?notification_referrer_id=NT_kwDOAmJSYrM2NjIwMzI3NDgyOjM5OTk4MDUw#issuecomment-1571602271'
+                  >
+                    图片演示
+                  </a>
+                  。
                 </Message>
                 <Form.Field>
                   <Form.Input
                     label='AZURE_OPENAI_ENDPOINT'
                     name='base_url'
-                    placeholder={'请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'}
+                    placeholder={
+                      '请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'
+                    }
                     onChange={handleInputChange}
                     value={inputs.base_url}
                     autoComplete='new-password'
@@ -264,73 +307,72 @@ const EditChannel = () => {
                   <Form.Input
                     label='默认 API 版本'
                     name='other'
-                    placeholder={'请输入默认 API 版本，例如：2024-03-01-preview，该配置可以被实际的请求查询参数所覆盖'}
+                    placeholder={
+                      '请输入默认 API 版本，例如：2024-03-01-preview，该配置可以被实际的请求查询参数所覆盖'
+                    }
                     onChange={handleInputChange}
                     value={inputs.other}
                     autoComplete='new-password'
                   />
                 </Form.Field>
               </>
-            )
-          }
-          {
-            inputs.type === 8 && (
+            )}
+            {inputs.type === 8 && (
               <Form.Field>
                 <Form.Input
                   label='Base URL'
                   name='base_url'
-                  placeholder={'请输入自定义渠道的 Base URL，例如：https://openai.justsong.cn'}
+                  placeholder={
+                    '请输入自定义渠道的 Base URL，例如：https://openai.justsong.cn'
+                  }
                   onChange={handleInputChange}
                   value={inputs.base_url}
                   autoComplete='new-password'
                 />
               </Form.Field>
-            )
-          }
-          <Form.Field>
-            <Form.Input
-              label='名称'
-              required
-              name='name'
-              placeholder={'请为渠道命名'}
-              onChange={handleInputChange}
-              value={inputs.name}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Dropdown
-              label='分组'
-              placeholder={'请选择可以使用该渠道的分组'}
-              name='groups'
-              required
-              fluid
-              multiple
-              selection
-              allowAdditions
-              additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-              onChange={handleInputChange}
-              value={inputs.groups}
-              autoComplete='new-password'
-              options={groupOptions}
-            />
-          </Form.Field>
-          {
-            inputs.type === 18 && (
+            )}
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={inputs.name}
+                required
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Dropdown
+                label='分组'
+                placeholder={'请选择可以使用该渠道的分组'}
+                name='groups'
+                required
+                fluid
+                multiple
+                selection
+                allowAdditions
+                additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                onChange={handleInputChange}
+                value={inputs.groups}
+                autoComplete='new-password'
+                options={groupOptions}
+              />
+            </Form.Field>
+            {inputs.type === 18 && (
               <Form.Field>
                 <Form.Input
                   label='模型版本'
                   name='other'
-                  placeholder={'请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'}
+                  placeholder={
+                    '请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'
+                  }
                   onChange={handleInputChange}
                   value={inputs.other}
                   autoComplete='new-password'
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type === 21 && (
+            )}
+            {inputs.type === 21 && (
               <Form.Field>
                 <Form.Input
                   label='知识库 ID'
@@ -341,38 +383,40 @@ const EditChannel = () => {
                   autoComplete='new-password'
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type === 17 && (
+            )}
+            {inputs.type === 17 && (
               <Form.Field>
                 <Form.Input
                   label='插件参数'
                   name='other'
-                  placeholder={'请输入插件参数，即 X-DashScope-Plugin 请求头的取值'}
+                  placeholder={
+                    '请输入插件参数，即 X-DashScope-Plugin 请求头的取值'
+                  }
                   onChange={handleInputChange}
                   value={inputs.other}
                   autoComplete='new-password'
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type === 34 && (
+            )}
+            {inputs.type === 34 && (
               <Message>
-                对于 Coze 而言，模型名称即 Bot ID，你可以添加一个前缀 `bot-`，例如：`bot-123456`。
+                对于 Coze 而言，模型名称即 Bot ID，你可以添加一个前缀
+                `bot-`，例如：`bot-123456`。
               </Message>
-            )
-          }
-          {
-            inputs.type === 40 && (
+            )}
+            {inputs.type === 40 && (
               <Message>
-                对于豆包而言，需要手动去 <a target="_blank" href="https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint">模型推理页面</a> 创建推理接入点，以接入点名称作为模型名称，例如：`ep-20240608051426-tkxvl`。
+                对于豆包而言，需要手动去{' '}
+                <a
+                  target='_blank'
+                  href='https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint'
+                >
+                  模型推理页面
+                </a>{' '}
+                创建推理接入点，以接入点名称作为模型名称，例如：`ep-20240608051426-tkxvl`。
               </Message>
-            )
-          }
-          {
-            inputs.type !== 43 && (
+            )}
+            {inputs.type !== 43 && (
               <Form.Field>
                 <Form.Dropdown
                   label='模型'
@@ -392,23 +436,44 @@ const EditChannel = () => {
                   options={modelOptions}
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type !== 43 && (
+            )}
+            {inputs.type !== 43 && (
               <div style={{ lineHeight: '40px', marginBottom: '12px' }}>
-                <Button type={'button'} onClick={() => {
-                  handleInputChange(null, { name: 'models', value: basicModels });
-                }}>填入相关模型</Button>
-                <Button type={'button'} onClick={() => {
-                  handleInputChange(null, { name: 'models', value: fullModels });
-                }}>填入所有模型</Button>
-                <Button type={'button'} onClick={() => {
-                  handleInputChange(null, { name: 'models', value: [] });
-                }}>清除所有模型</Button>
+                <Button
+                  type={'button'}
+                  onClick={() => {
+                    handleInputChange(null, {
+                      name: 'models',
+                      value: basicModels,
+                    });
+                  }}
+                >
+                  填入相关模型
+                </Button>
+                <Button
+                  type={'button'}
+                  onClick={() => {
+                    handleInputChange(null, {
+                      name: 'models',
+                      value: fullModels,
+                    });
+                  }}
+                >
+                  填入所有模型
+                </Button>
+                <Button
+                  type={'button'}
+                  onClick={() => {
+                    handleInputChange(null, { name: 'models', value: [] });
+                  }}
+                >
+                  清除所有模型
+                </Button>
                 <Input
                   action={
-                    <Button type={'button'} onClick={addCustomModel}>填入</Button>
+                    <Button type={'button'} onClick={addCustomModel}>
+                      填入
+                    </Button>
                   }
                   placeholder='输入自定义模型名称'
                   value={customModel}
@@ -423,37 +488,44 @@ const EditChannel = () => {
                   }}
                 />
               </div>
-            )
-          }
-          {
-          inputs.type !== 43 && (<>
-              <Form.Field>
-                <Form.TextArea
-                  label='模型重定向'
-                  placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`}
-                  name='model_mapping'
-                  onChange={handleInputChange}
-                  value={inputs.model_mapping}
-                  style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
-            <Form.Field>
-                <Form.TextArea
-                  label='系统提示词'
-                  placeholder={`此项可选，用于强制设置给定的系统提示词，请配合自定义模型 & 模型重定向使用，首先创建一个唯一的自定义模型名称并在上面填入，之后将该自定义模型重定向映射到该渠道一个原生支持的模型`}
-                  name='system_prompt'
-                  onChange={handleInputChange}
-                  value={inputs.system_prompt}
-                  style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
+            )}
+            {inputs.type !== 43 && (
+              <>
+                <Form.Field>
+                  <Form.TextArea
+                    label='模型重定向'
+                    placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(
+                      MODEL_MAPPING_EXAMPLE,
+                      null,
+                      2
+                    )}`}
+                    name='model_mapping'
+                    onChange={handleInputChange}
+                    value={inputs.model_mapping}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+                <Form.Field>
+                  <Form.TextArea
+                    label='系统提示词'
+                    placeholder={`此项可选，用于强制设置给定的系统提示词，请配合自定义模型 & 模型重定向使用，首先创建一个唯一的自定义模型名称并在上面填入，之后将该自定义模型重定向映射到该渠道一个原生支持的模型`}
+                    name='system_prompt'
+                    onChange={handleInputChange}
+                    value={inputs.system_prompt}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
               </>
-            )
-          }
-          {
-            inputs.type === 33 && (
+            )}
+            {inputs.type === 33 && (
               <Form.Field>
                 <Form.Input
                   label='Region'
@@ -483,10 +555,8 @@ const EditChannel = () => {
                   autoComplete=''
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type === 42 && (
+            )}
+            {inputs.type === 42 && (
               <Form.Field>
                 <Form.Input
                   label='Region'
@@ -510,16 +580,16 @@ const EditChannel = () => {
                   label='Google Cloud Application Default Credentials JSON'
                   name='vertex_ai_adc'
                   required
-                  placeholder={'Google Cloud Application Default Credentials JSON'}
+                  placeholder={
+                    'Google Cloud Application Default Credentials JSON'
+                  }
                   onChange={handleConfigChange}
                   value={config.vertex_ai_adc}
                   autoComplete=''
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type === 34 && (
+            )}
+            {inputs.type === 34 && (
               <Form.Input
                 label='User ID'
                 name='user_id'
@@ -528,90 +598,105 @@ const EditChannel = () => {
                 onChange={handleConfigChange}
                 value={config.user_id}
                 autoComplete=''
-              />)
-          }
-          {
-            inputs.type !== 33 && inputs.type !== 42 && (batch ? <Form.Field>
-              <Form.TextArea
-                label='密钥'
-                name='key'
-                required
-                placeholder={'请输入密钥，一行一个'}
-                onChange={handleInputChange}
-                value={inputs.key}
-                style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
-                autoComplete='new-password'
               />
-            </Form.Field> : <Form.Field>
-              <Form.Input
-                label='密钥'
-                name='key'
-                required
-                placeholder={type2secretPrompt(inputs.type)}
-                onChange={handleInputChange}
-                value={inputs.key}
-                autoComplete='new-password'
-              />
-            </Form.Field>)
-          }
-          {
-            inputs.type === 37 && (
+            )}
+            {inputs.type !== 33 &&
+              inputs.type !== 42 &&
+              (batch ? (
+                <Form.Field>
+                  <Form.TextArea
+                    label='密钥'
+                    name='key'
+                    required
+                    placeholder={'请输入密钥，一行一个'}
+                    onChange={handleInputChange}
+                    value={inputs.key}
+                    style={{
+                      minHeight: 150,
+                      fontFamily: 'JetBrains Mono, Consolas',
+                    }}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              ) : (
+                <Form.Field>
+                  <Form.Input
+                    label='密钥'
+                    name='key'
+                    required
+                    placeholder={type2secretPrompt(inputs.type)}
+                    onChange={handleInputChange}
+                    value={inputs.key}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              ))}
+            {inputs.type === 37 && (
               <Form.Field>
                 <Form.Input
                   label='Account ID'
                   name='user_id'
                   required
-                  placeholder={'请输入 Account ID，例如：d8d7c61dbc334c32d3ced580e4bf42b4'}
+                  placeholder={
+                    '请输入 Account ID，例如：d8d7c61dbc334c32d3ced580e4bf42b4'
+                  }
                   onChange={handleConfigChange}
                   value={config.user_id}
                   autoComplete=''
                 />
               </Form.Field>
-            )
-          }
-          {
-            inputs.type !== 33 && !isEdit && (
+            )}
+            {inputs.type !== 33 && !isEdit && (
               <Form.Checkbox
                 checked={batch}
                 label='批量创建'
                 name='batch'
                 onChange={() => setBatch(!batch)}
               />
-            )
-          }
-          {
-            inputs.type !== 3 && inputs.type !== 33 && inputs.type !== 8 && inputs.type !== 22 && (
-              <Form.Field>
-                <Form.Input
-                  label='代理'
-                  name='base_url'
-                  placeholder={'此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com'}
-                  onChange={handleInputChange}
-                  value={inputs.base_url}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
-            )
-          }
-          {
-            inputs.type === 22 && (
+            )}
+            {inputs.type !== 3 &&
+              inputs.type !== 33 &&
+              inputs.type !== 8 &&
+              inputs.type !== 22 && (
+                <Form.Field>
+                  <Form.Input
+                    label='代理'
+                    name='base_url'
+                    placeholder={
+                      '此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com'
+                    }
+                    onChange={handleInputChange}
+                    value={inputs.base_url}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              )}
+            {inputs.type === 22 && (
               <Form.Field>
                 <Form.Input
                   label='私有部署地址'
                   name='base_url'
-                  placeholder={'请输入私有部署地址，格式为：https://fastgpt.run/api/openapi'}
+                  placeholder={
+                    '请输入私有部署地址，格式为：https://fastgpt.run/api/openapi'
+                  }
                   onChange={handleInputChange}
                   value={inputs.base_url}
                   autoComplete='new-password'
                 />
               </Form.Field>
-            )
-          }
-          <Button onClick={handleCancel}>取消</Button>
-          <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>提交</Button>
-        </Form>
-      </Segment>
-    </>
+            )}
+            <Button onClick={handleCancel}>取消</Button>
+            <Button
+              type={isEdit ? 'button' : 'submit'}
+              positive
+              onClick={submit}
+            >
+              提交
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

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

@@ -1,14 +1,16 @@
 import React from 'react';
-import { Header, Segment } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import ChannelsTable from '../../components/ChannelsTable';
 
 const Channel = () => (
-  <>
-    <Segment>
-      <Header as='h3'>管理渠道</Header>
-      <ChannelsTable />
-    </Segment>
-  </>
+  <div className='dashboard-container'>
+    <Card fluid className='chart-card'>
+      <Card.Content>
+        <Card.Header className='header'>管理渠道</Card.Header>
+        <ChannelsTable />
+      </Card.Content>
+    </Card>
+  </div>
 );
 
 export default Channel;

web/default/src/pages/Dashboard/Dashboard.css

@@ -0,0 +1,109 @@
+.dashboard-container {
+    padding: 20px 24px 40px;
+    background-color: #ffffff;
+    margin-top: -15px; /* 减小与导航栏的间距 */
+    max-width: 1600px;        /* 设置最大宽度 */
+    margin-left: auto;        /* 水平居中 */
+    margin-right: auto;
+}
+
+.stat-card {
+    background: linear-gradient(135deg, #2185d0 0%, #1678c2 100%) !important;
+    color: white !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+    transition: transform 0.2s ease !important;
+    margin-bottom: 1rem !important;
+}
+
+.stat-card:hover {
+    transform: translateY(-5px);
+}
+
+.stat-card .statistic {
+    color: white !important;
+}
+
+.charts-grid {
+    margin-bottom: 1rem !important;
+}
+
+.charts-grid .column {
+    padding: 0.5rem !important;
+}
+
+.chart-card {
+    height: 100%;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+    border: none !important;
+    border-radius: 16px !important;
+    padding-top: 8px!important;
+}
+
+.chart-container {
+    margin-top: 2px;
+    padding: 16px;
+    background-color: white;
+    border-radius: 12px;
+}
+
+.ui.card > .content > .header {
+    color: #2B3674;
+    font-size: 1.2em;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    gap: 12px; /* 增加标题和数值之间的间距 */
+}
+
+.stat-value {
+    color: #4318FF;
+    font-weight: bold;
+    font-size: 1.1em;
+    background: rgba(67, 24, 255, 0.1);
+    padding: 4px 12px;
+    border-radius: 8px;
+    white-space: nowrap; /* 防止数值换行 */
+    margin-left: 16px;
+}
+
+/* 优化图表响应式布局 */
+@media (max-width: 768px) {
+    .dashboard-container {
+        padding: 10px 16px;   /* 移动端也相应减小内边距 */
+        max-width: 100%;      /* 移动端占满全宽 */
+    }
+    
+    .chart-container {
+        padding: 12px;
+    }
+    
+    .charts-grid .column {
+        padding: 0.25rem !important;
+    }
+}
+
+/* 设置页面的 Tab 样式 */
+.settings-tab {
+    margin-top: 1rem !important;
+    border-bottom: none !important;
+}
+
+.settings-tab .item {
+    color: #2B3674 !important;
+    font-weight: 500 !important;
+    padding: 0.8rem 1.2rem !important;
+}
+
+.settings-tab .active.item {
+    color: #4318FF !important;
+    font-weight: 600 !important;
+    border-color: #4318FF !important;
+}
+
+.ui.tab.segment {
+    border: none !important;
+    box-shadow: none !important;
+    padding: 1rem 0 !important;
+} 

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

@@ -0,0 +1,378 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Grid, Statistic } from 'semantic-ui-react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  Legend,
+} from 'recharts';
+import axios from 'axios';
+import './Dashboard.css';
+
+// 在 Dashboard 组件内添加自定义配置
+const chartConfig = {
+  lineChart: {
+    style: {
+      background: '#fff',
+      borderRadius: '8px',
+    },
+    line: {
+      strokeWidth: 2,
+      dot: false,
+      activeDot: { r: 4 },
+    },
+    grid: {
+      vertical: false,
+      horizontal: true,
+      opacity: 0.1,
+    },
+  },
+  colors: {
+    requests: '#4318FF',
+    quota: '#00B5D8',
+    tokens: '#6C63FF',
+  },
+  barColors: [
+    '#4318FF', // 深紫色
+    '#00B5D8', // 青色
+    '#6C63FF', // 紫色
+    '#05CD99', // 绿色
+    '#FFB547', // 橙色
+    '#FF5E7D', // 粉色
+    '#41B883', // 翠绿
+    '#7983FF', // 淡紫
+    '#FF8F6B', // 珊瑚色
+    '#49BEFF', // 天蓝
+  ],
+};
+
+const Dashboard = () => {
+  const [data, setData] = useState([]);
+  const [summaryData, setSummaryData] = useState({
+    todayRequests: 0,
+    todayQuota: 0,
+    todayTokens: 0,
+  });
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  const fetchDashboardData = async () => {
+    try {
+      const response = await axios.get('/api/user/dashboard');
+      if (response.data.success) {
+        const dashboardData = response.data.data;
+        setData(dashboardData);
+        calculateSummary(dashboardData);
+      }
+    } catch (error) {
+      console.error('Failed to fetch dashboard data:', error);
+    }
+  };
+
+  const calculateSummary = (dashboardData) => {
+    const today = new Date().toISOString().split('T')[0];
+    const todayData = dashboardData.filter((item) => item.Day === today);
+
+    const summary = {
+      todayRequests: todayData.reduce(
+        (sum, item) => sum + item.RequestCount,
+        0
+      ),
+      todayQuota:
+        todayData.reduce((sum, item) => sum + item.Quota, 0) / 1000000, // 转换为美元
+      todayTokens: todayData.reduce(
+        (sum, item) => sum + item.PromptTokens + item.CompletionTokens,
+        0
+      ),
+    };
+
+    setSummaryData(summary);
+  };
+
+  // 处理数据以供折线图使用，补充缺失的日期
+  const processTimeSeriesData = () => {
+    const dailyData = {};
+
+    // 获取日期范围
+    const dates = data.map((item) => item.Day);
+    const minDate = new Date(Math.min(...dates.map((d) => new Date(d))));
+    const maxDate = new Date(Math.max(...dates.map((d) => new Date(d))));
+
+    // 生成所有日期
+    for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) {
+      const dateStr = d.toISOString().split('T')[0];
+      dailyData[dateStr] = {
+        date: dateStr,
+        requests: 0,
+        quota: 0,
+        tokens: 0,
+      };
+    }
+
+    // 填充实际数据
+    data.forEach((item) => {
+      dailyData[item.Day].requests += item.RequestCount;
+      dailyData[item.Day].quota += item.Quota / 1000000;
+      dailyData[item.Day].tokens += item.PromptTokens + item.CompletionTokens;
+    });
+
+    return Object.values(dailyData).sort((a, b) =>
+      a.date.localeCompare(b.date)
+    );
+  };
+
+  // 处理数据以供堆叠柱状图使用
+  const processModelData = () => {
+    const timeData = {};
+
+    // 获取日期范围
+    const dates = data.map((item) => item.Day);
+    const minDate = new Date(Math.min(...dates.map((d) => new Date(d))));
+    const maxDate = new Date(Math.max(...dates.map((d) => new Date(d))));
+
+    // 生成所有日期
+    for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) {
+      const dateStr = d.toISOString().split('T')[0];
+      timeData[dateStr] = {
+        date: dateStr,
+      };
+
+      // 初始化所有模型的数据为0
+      const models = [...new Set(data.map((item) => item.ModelName))];
+      models.forEach((model) => {
+        timeData[dateStr][model] = 0;
+      });
+    }
+
+    // 填充实际数据
+    data.forEach((item) => {
+      timeData[item.Day][item.ModelName] =
+        item.PromptTokens + item.CompletionTokens;
+    });
+
+    return Object.values(timeData).sort((a, b) => a.date.localeCompare(b.date));
+  };
+
+  // 获取所有唯一的模型名称
+  const getUniqueModels = () => {
+    return [...new Set(data.map((item) => item.ModelName))];
+  };
+
+  const timeSeriesData = processTimeSeriesData();
+  const modelData = processModelData();
+  const models = getUniqueModels();
+
+  // 生成随机颜色
+  const getRandomColor = (index) => {
+    return chartConfig.barColors[index % chartConfig.barColors.length];
+  };
+
+  return (
+    <div className='dashboard-container'>
+      {/* 三个并排的折线图 */}
+      <Grid columns={3} stackable className='charts-grid'>
+        <Grid.Column>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header>
+                模型请求趋势
+                <span className='stat-value'>{summaryData.todayRequests}</span>
+              </Card.Header>
+              <div className='chart-container'>
+                <ResponsiveContainer width='100%' height={120}>
+                  <LineChart data={timeSeriesData}>
+                    <CartesianGrid
+                      strokeDasharray='3 3'
+                      vertical={chartConfig.lineChart.grid.vertical}
+                      horizontal={chartConfig.lineChart.grid.horizontal}
+                      opacity={chartConfig.lineChart.grid.opacity}
+                    />
+                    <XAxis
+                      dataKey='date'
+                      axisLine={false}
+                      tickLine={false}
+                      tick={{ fontSize: 12, fill: '#A3AED0' }}
+                    />
+                    <YAxis hide={true} />
+                    <Tooltip
+                      contentStyle={{
+                        background: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      }}
+                    />
+                    <Line
+                      type='monotone'
+                      dataKey='requests'
+                      stroke={chartConfig.colors.requests}
+                      strokeWidth={chartConfig.lineChart.line.strokeWidth}
+                      dot={chartConfig.lineChart.line.dot}
+                      activeDot={chartConfig.lineChart.line.activeDot}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </Card.Content>
+          </Card>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header>
+                额度消费趋势
+                <span className='stat-value'>
+                  ${summaryData.todayQuota.toFixed(3)}
+                </span>
+              </Card.Header>
+              <div className='chart-container'>
+                <ResponsiveContainer width='100%' height={120}>
+                  <LineChart data={timeSeriesData}>
+                    <CartesianGrid
+                      strokeDasharray='3 3'
+                      vertical={chartConfig.lineChart.grid.vertical}
+                      horizontal={chartConfig.lineChart.grid.horizontal}
+                      opacity={chartConfig.lineChart.grid.opacity}
+                    />
+                    <XAxis
+                      dataKey='date'
+                      axisLine={false}
+                      tickLine={false}
+                      tick={{ fontSize: 12, fill: '#A3AED0' }}
+                    />
+                    <YAxis hide={true} />
+                    <Tooltip
+                      contentStyle={{
+                        background: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      }}
+                    />
+                    <Line
+                      type='monotone'
+                      dataKey='quota'
+                      stroke={chartConfig.colors.quota}
+                      strokeWidth={chartConfig.lineChart.line.strokeWidth}
+                      dot={chartConfig.lineChart.line.dot}
+                      activeDot={chartConfig.lineChart.line.activeDot}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </Card.Content>
+          </Card>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header>
+                Token 消费趋势
+                <span className='stat-value'>{summaryData.todayTokens}</span>
+              </Card.Header>
+              <div className='chart-container'>
+                <ResponsiveContainer width='100%' height={120}>
+                  <LineChart data={timeSeriesData}>
+                    <CartesianGrid
+                      strokeDasharray='3 3'
+                      vertical={chartConfig.lineChart.grid.vertical}
+                      horizontal={chartConfig.lineChart.grid.horizontal}
+                      opacity={chartConfig.lineChart.grid.opacity}
+                    />
+                    <XAxis
+                      dataKey='date'
+                      axisLine={false}
+                      tickLine={false}
+                      tick={{ fontSize: 12, fill: '#A3AED0' }}
+                    />
+                    <YAxis hide={true} />
+                    <Tooltip
+                      contentStyle={{
+                        background: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      }}
+                    />
+                    <Line
+                      type='monotone'
+                      dataKey='tokens'
+                      stroke={chartConfig.colors.tokens}
+                      strokeWidth={chartConfig.lineChart.line.strokeWidth}
+                      dot={chartConfig.lineChart.line.dot}
+                      activeDot={chartConfig.lineChart.line.activeDot}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </Card.Content>
+          </Card>
+        </Grid.Column>
+      </Grid>
+
+      {/* 模型使用统计 */}
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header>统计</Card.Header>
+          <div className='chart-container'>
+            <ResponsiveContainer width='100%' height={300}>
+              <BarChart data={modelData}>
+                <CartesianGrid
+                  strokeDasharray='3 3'
+                  vertical={false}
+                  opacity={0.1}
+                />
+                <XAxis
+                  dataKey='date'
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 12, fill: '#A3AED0' }}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 12, fill: '#A3AED0' }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    background: '#fff',
+                    border: 'none',
+                    borderRadius: '4px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                  }}
+                />
+                <Legend
+                  wrapperStyle={{
+                    paddingTop: '20px',
+                  }}
+                />
+                {models.map((model, index) => (
+                  <Bar
+                    key={model}
+                    dataKey={model}
+                    stackId='a'
+                    fill={getRandomColor(index)}
+                    name={model}
+                    radius={[4, 4, 0, 0]}
+                  />
+                ))}
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </Card.Content>
+      </Card>
+    </div>
+  );
+};
+
+export default Dashboard;

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

@@ -3,22 +3,25 @@ import { Card, Grid, Header, Segment } from 'semantic-ui-react';
 import { API, showError, showNotice, timestamp2string } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
+import { UserContext } from '../../context/User';
+import { Link } from 'react-router-dom';
 
 const Home = () => {
   const [statusState, statusDispatch] = useContext(StatusContext);
   const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
   const [homePageContent, setHomePageContent] = useState('');
+  const [userState] = useContext(UserContext);
 
   const displayNotice = async () => {
     const res = await API.get('/api/notice');
     const { success, message, data } = res.data;
     if (success) {
       let oldNotice = localStorage.getItem('notice');
-        if (data !== oldNotice && data !== '') {
-            const htmlNotice = marked(data);
-            showNotice(htmlNotice, true);
-            localStorage.setItem('notice', data);
-        }
+      if (data !== oldNotice && data !== '') {
+        const htmlNotice = marked(data);
+        showNotice(htmlNotice, true);
+        localStorage.setItem('notice', data);
+      }
     } else {
       showError(message);
     }
@@ -51,81 +54,239 @@ const Home = () => {
     displayNotice().then();
     displayHomePageContent().then();
   }, []);
+
   return (
     <>
-      {
-        homePageContentLoaded && homePageContent === '' ? <>
-          <Segment>
-            <Header as='h3'>系统状况</Header>
-            <Grid columns={2} stackable>
-              <Grid.Column>
-                <Card fluid>
-                  <Card.Content>
-                    <Card.Header>系统信息</Card.Header>
-                    <Card.Meta>系统信息总览</Card.Meta>
-                    <Card.Description>
-                      <p>名称：{statusState?.status?.system_name}</p>
-                      <p>版本：{statusState?.status?.version ? statusState?.status?.version : "unknown"}</p>
-                      <p>
-                        源码：
-                        <a
-                          href='https://github.com/songquanpeng/one-api'
-                          target='_blank'
+      {homePageContentLoaded && homePageContent === '' ? (
+        <div className='dashboard-container'>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header className='header'>欢迎使用 One API</Card.Header>
+              <Card.Description style={{ lineHeight: '1.6' }}>
+                <p>
+                  One API 是一个 LLM API
+                  接口管理和分发系统，可以帮助您更好地管理和使用各大厂商的 LLM
+                  API。
+                </p>
+                {!userState.user && (
+                  <p>
+                    如需使用，请先<Link to='/login'>登录</Link>或
+                    <Link to='/register'>注册</Link>。
+                  </p>
+                )}
+              </Card.Description>
+            </Card.Content>
+          </Card>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header>
+                <Header as='h3'>系统状况</Header>
+              </Card.Header>
+              <Grid columns={2} stackable>
+                <Grid.Column>
+                  <Card
+                    fluid
+                    className='chart-card'
+                    style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
+                  >
+                    <Card.Content>
+                      <Card.Header>
+                        <Header as='h3' style={{ color: '#444' }}>
+                          系统信息
+                        </Header>
+                      </Card.Header>
+                      <Card.Description
+                        style={{ lineHeight: '2', marginTop: '1em' }}
+                      >
+                        <p
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5em',
+                          }}
                         >
-                          https://github.com/songquanpeng/one-api
-                        </a>
-                      </p>
-                      <p>启动时间：{getStartTimeString()}</p>
-                    </Card.Description>
-                  </Card.Content>
-                </Card>
-              </Grid.Column>
-              <Grid.Column>
-                <Card fluid>
-                  <Card.Content>
-                    <Card.Header>系统配置</Card.Header>
-                    <Card.Meta>系统配置总览</Card.Meta>
-                    <Card.Description>
-                      <p>
-                        邮箱验证：
-                        {statusState?.status?.email_verification === true
-                          ? '已启用'
-                          : '未启用'}
-                      </p>
-                      <p>
-                        GitHub 身份验证：
-                        {statusState?.status?.github_oauth === true
-                          ? '已启用'
-                          : '未启用'}
-                      </p>
-                      <p>
-                        微信身份验证：
-                        {statusState?.status?.wechat_login === true
-                          ? '已启用'
-                          : '未启用'}
-                      </p>
-                      <p>
-                        Turnstile 用户校验：
-                        {statusState?.status?.turnstile_check === true
-                          ? '已启用'
-                          : '未启用'}
-                      </p>
-                    </Card.Description>
-                  </Card.Content>
-                </Card>
-              </Grid.Column>
-            </Grid>
-          </Segment>
-        </> : <>
-          {
-            homePageContent.startsWith('https://') ? <iframe
+                          <i className='info circle icon'></i>
+                          <span style={{ fontWeight: 'bold' }}>名称：</span>
+                          <span>{statusState?.status?.system_name}</span>
+                        </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
+                            href='https://github.com/songquanpeng/one-api'
+                            target='_blank'
+                            style={{ color: '#2185d0' }}
+                          >
+                            GitHub 仓库
+                          </a>
+                        </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.Content>
+                  </Card>
+                </Grid.Column>
+
+                <Grid.Column>
+                  <Card
+                    fluid
+                    className='chart-card'
+                    style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
+                  >
+                    <Card.Content>
+                      <Card.Header>
+                        <Header as='h3' style={{ color: '#444' }}>
+                          系统配置
+                        </Header>
+                      </Card.Header>
+                      <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
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5em',
+                          }}
+                        >
+                          <i className='github icon'></i>
+                          <span style={{ fontWeight: 'bold' }}>
+                            GitHub 身份验证：
+                          </span>
+                          <span
+                            style={{
+                              color: statusState?.status?.github_oauth
+                                ? '#21ba45'
+                                : '#db2828',
+                              fontWeight: '500',
+                            }}
+                          >
+                            {statusState?.status?.github_oauth
+                              ? '已启用'
+                              : '未启用'}
+                          </span>
+                        </p>
+                        <p
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5em',
+                          }}
+                        >
+                          <i className='wechat icon'></i>
+                          <span style={{ fontWeight: 'bold' }}>
+                            微信身份验证：
+                          </span>
+                          <span
+                            style={{
+                              color: statusState?.status?.wechat_login
+                                ? '#21ba45'
+                                : '#db2828',
+                              fontWeight: '500',
+                            }}
+                          >
+                            {statusState?.status?.wechat_login
+                              ? '已启用'
+                              : '未启用'}
+                          </span>
+                        </p>
+                        <p
+                          style={{
+                            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>
+                      </Card.Description>
+                    </Card.Content>
+                  </Card>
+                </Grid.Column>
+              </Grid>
+            </Card.Content>
+          </Card>{' '}
+        </div>
+      ) : (
+        <>
+          {homePageContent.startsWith('https://') ? (
+            <iframe
               src={homePageContent}
               style={{ width: '100%', height: '100vh', border: 'none' }}
-            /> : <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: homePageContent }}></div>
-          }
+            />
+          ) : (
+            <div
+              style={{ fontSize: 'larger' }}
+              dangerouslySetInnerHTML={{ __html: homePageContent }}
+            ></div>
+          )}
         </>
-      }
-
+      )}
     </>
   );
 };

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

@@ -1,11 +1,16 @@
 import React from 'react';
-import { Header, Segment } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import LogsTable from '../../components/LogsTable';
 
-const Token = () => (
-  <>
-    <LogsTable />
-  </>
+const Log = () => (
+  <div className='dashboard-container'>
+    <Card fluid className='chart-card'>
+      <Card.Content>
+        {/*<Card.Header className='header'>操作日志</Card.Header>*/}
+        <LogsTable />
+      </Card.Content>
+    </Card>
+  </div>
 );
 
-export default Token;
+export default Log;

web/default/src/pages/Redemption/EditRedemption.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -13,7 +13,7 @@ const EditRedemption = () => {
   const originInputs = {
     name: '',
     quota: 100000,
-    count: 1
+    count: 1,
   };
   const [inputs, setInputs] = useState(originInputs);
   const { name, quota, count } = inputs;
@@ -21,7 +21,7 @@ const EditRedemption = () => {
   const handleCancel = () => {
     navigate('/redemption');
   };
-  
+
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -49,10 +49,13 @@ const EditRedemption = () => {
     localInputs.quota = parseInt(localInputs.quota);
     let res;
     if (isEdit) {
-      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+      res = await API.put(`/api/redemption/`, {
+        ...localInputs,
+        id: parseInt(redemptionId),
+      });
     } else {
       res = await API.post(`/api/redemption/`, {
-        ...localInputs
+        ...localInputs,
       });
     }
     const { success, message, data } = res.data;
@@ -67,61 +70,67 @@ const EditRedemption = () => {
       showError(message);
     }
     if (!isEdit && data) {
-      let text = "";
+      let text = '';
       for (let i = 0; i < data.length; i++) {
-        text += data[i] + "\n";
+        text += data[i] + '\n';
       }
       downloadTextAsFile(text, `${inputs.name}.txt`);
     }
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='名称'
-              name='name'
-              placeholder={'请输入名称'}
-              onChange={handleInputChange}
-              value={name}
-              autoComplete='new-password'
-              required={!isEdit}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label={`额度${renderQuotaWithPrompt(quota)}`}
-              name='quota'
-              placeholder={'请输入单个兑换码中包含的额度'}
-              onChange={handleInputChange}
-              value={quota}
-              autoComplete='new-password'
-              type='number'
-            />
-          </Form.Field>
-          {
-            !isEdit && <>
-              <Form.Field>
-                <Form.Input
-                  label='生成数量'
-                  name='count'
-                  placeholder={'请输入生成数量'}
-                  onChange={handleInputChange}
-                  value={count}
-                  autoComplete='new-password'
-                  type='number'
-                />
-              </Form.Field>
-            </>
-          }
-          <Button positive onClick={submit}>提交</Button>
-          <Button onClick={handleCancel}>取消</Button>
-        </Form>
-      </Segment>
-    </>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新兑换码信息' : '创建新的兑换码'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={name}
+                autoComplete='new-password'
+                required={!isEdit}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label={`额度${renderQuotaWithPrompt(quota)}`}
+                name='quota'
+                placeholder={'请输入单个兑换码中包含的额度'}
+                onChange={handleInputChange}
+                value={quota}
+                autoComplete='new-password'
+                type='number'
+              />
+            </Form.Field>
+            {!isEdit && (
+              <>
+                <Form.Field>
+                  <Form.Input
+                    label='生成数量'
+                    name='count'
+                    placeholder={'请输入生成数量'}
+                    onChange={handleInputChange}
+                    value={count}
+                    autoComplete='new-password'
+                    type='number'
+                  />
+                </Form.Field>
+              </>
+            )}
+            <Button positive onClick={submit}>
+              提交
+            </Button>
+            <Button onClick={handleCancel}>取消</Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

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

@@ -1,14 +1,16 @@
 import React from 'react';
-import { Segment, Header } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import RedemptionsTable from '../../components/RedemptionsTable';
 
 const Redemption = () => (
-  <>
-    <Segment>
-      <Header as='h3'>管理兑换码</Header>
-      <RedemptionsTable/>
-    </Segment>
-  </>
+  <div className='dashboard-container'>
+    <Card fluid className='chart-card'>
+      <Card.Content>
+        <Card.Header className='header'>兑换管理</Card.Header>
+        <RedemptionsTable />
+      </Card.Content>
+    </Card>
+  </div>
 );
 
 export default Redemption;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Segment, Tab } from 'semantic-ui-react';
+import { Card, Tab } from 'semantic-ui-react';
 import SystemSetting from '../../components/SystemSetting';
 import { isRoot } from '../../helpers';
 import OtherSetting from '../../components/OtherSetting';
@@ -14,8 +14,8 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <PersonalSetting />
         </Tab.Pane>
-      )
-    }
+      ),
+    },
   ];
 
   if (isRoot()) {
@@ -25,7 +25,7 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <OperationSetting />
         </Tab.Pane>
-      )
+      ),
     });
     panes.push({
       menuItem: '系统设置',
@@ -33,7 +33,7 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <SystemSetting />
         </Tab.Pane>
-      )
+      ),
     });
     panes.push({
       menuItem: '其他设置',
@@ -41,14 +41,26 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <OtherSetting />
         </Tab.Pane>
-      )
+      ),
     });
   }
 
   return (
-    <Segment>
-      <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
-    </Segment>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>系统设置</Card.Header>
+          <Tab
+            menu={{
+              secondary: true,
+              pointing: true,
+              className: 'settings-tab', // 添加自定义类名以便样式化
+            }}
+            panes={panes}
+          />
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

web/default/src/pages/Token/EditToken.js

@@ -1,7 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Header,
+  Message,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { API, copy, showError, showSuccess, timestamp2string } from '../../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showSuccess,
+  timestamp2string,
+} from '../../helpers';
 import { renderQuotaWithPrompt } from '../../helpers/render';
 
 const EditToken = () => {
@@ -16,7 +29,7 @@ const EditToken = () => {
     expired_time: -1,
     unlimited_quota: false,
     models: [],
-    subnet: "",
+    subnet: '',
   };
   const [inputs, setInputs] = useState(originInputs);
   const { name, remain_quota, expired_time, unlimited_quota } = inputs;
@@ -79,7 +92,7 @@ const EditToken = () => {
         return {
           key: model,
           text: model,
-          value: model
+          value: model,
         };
       });
       setModelOptions(options);
@@ -103,7 +116,10 @@ const EditToken = () => {
     localInputs.models = localInputs.models.join(',');
     let res;
     if (isEdit) {
-      res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(tokenId) });
+      res = await API.put(`/api/token/`, {
+        ...localInputs,
+        id: parseInt(tokenId),
+      });
     } else {
       res = await API.post(`/api/token/`, localInputs);
     }
@@ -121,98 +137,142 @@ const EditToken = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='名称'
-              name='name'
-              placeholder={'请输入名称'}
-              onChange={handleInputChange}
-              value={name}
-              autoComplete='new-password'
-              required={!isEdit}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Dropdown
-              label='模型范围'
-              placeholder={'请选择允许使用的模型，留空则不进行限制'}
-              name='models'
-              fluid
-              multiple
-              search
-              onLabelClick={(e, { value }) => {
-                copy(value).then();
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新令牌信息' : '创建新的令牌'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={name}
+                autoComplete='new-password'
+                required={!isEdit}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Dropdown
+                label='模型范围'
+                placeholder={'请选择允许使用的模型，留空则不进行限制'}
+                name='models'
+                fluid
+                multiple
+                search
+                onLabelClick={(e, { value }) => {
+                  copy(value).then();
+                }}
+                selection
+                onChange={handleInputChange}
+                value={inputs.models}
+                autoComplete='new-password'
+                options={modelOptions}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='IP 限制'
+                name='subnet'
+                placeholder={
+                  '请输入允许访问的网段，例如：192.168.0.0/24，请使用英文逗号分隔多个网段'
+                }
+                onChange={handleInputChange}
+                value={inputs.subnet}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='过期时间'
+                name='expired_time'
+                placeholder={
+                  '请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'
+                }
+                onChange={handleInputChange}
+                value={expired_time}
+                autoComplete='new-password'
+                type='datetime-local'
+              />
+            </Form.Field>
+            <div style={{ lineHeight: '40px' }}>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 0, 0, 0);
+                }}
+              >
+                永不过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(1, 0, 0, 0);
+                }}
+              >
+                一个月后过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 1, 0, 0);
+                }}
+              >
+                一天后过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 0, 1, 0);
+                }}
+              >
+                一小时后过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 0, 0, 1);
+                }}
+              >
+                一分钟后过期
+              </Button>
+            </div>
+            <Message>
+              注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。
+            </Message>
+            <Form.Field>
+              <Form.Input
+                label={`额度${renderQuotaWithPrompt(remain_quota)}`}
+                name='remain_quota'
+                placeholder={'请输入额度'}
+                onChange={handleInputChange}
+                value={remain_quota}
+                autoComplete='new-password'
+                type='number'
+                disabled={unlimited_quota}
+              />
+            </Form.Field>
+            <Button
+              type={'button'}
+              onClick={() => {
+                setUnlimitedQuota();
               }}
-              selection
-              onChange={handleInputChange}
-              value={inputs.models}
-              autoComplete='new-password'
-              options={modelOptions}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='IP 限制'
-              name='subnet'
-              placeholder={'请输入允许访问的网段，例如：192.168.0.0/24，请使用英文逗号分隔多个网段'}
-              onChange={handleInputChange}
-              value={inputs.subnet}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='过期时间'
-              name='expired_time'
-              placeholder={'请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'}
-              onChange={handleInputChange}
-              value={expired_time}
-              autoComplete='new-password'
-              type='datetime-local'
-            />
-          </Form.Field>
-          <div style={{ lineHeight: '40px' }}>
-            <Button type={'button'} onClick={() => {
-              setExpiredTime(0, 0, 0, 0);
-            }}>永不过期</Button>
-            <Button type={'button'} onClick={() => {
-              setExpiredTime(1, 0, 0, 0);
-            }}>一个月后过期</Button>
-            <Button type={'button'} onClick={() => {
-              setExpiredTime(0, 1, 0, 0);
-            }}>一天后过期</Button>
-            <Button type={'button'} onClick={() => {
-              setExpiredTime(0, 0, 1, 0);
-            }}>一小时后过期</Button>
-            <Button type={'button'} onClick={() => {
-              setExpiredTime(0, 0, 0, 1);
-            }}>一分钟后过期</Button>
-          </div>
-          <Message>注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。</Message>
-          <Form.Field>
-            <Form.Input
-              label={`额度${renderQuotaWithPrompt(remain_quota)}`}
-              name='remain_quota'
-              placeholder={'请输入额度'}
-              onChange={handleInputChange}
-              value={remain_quota}
-              autoComplete='new-password'
-              type='number'
-              disabled={unlimited_quota}
-            />
-          </Form.Field>
-          <Button type={'button'} onClick={() => {
-            setUnlimitedQuota();
-          }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
-          <Button floated='right' positive onClick={submit}>提交</Button>
-          <Button floated='right' onClick={handleCancel}>取消</Button>
-        </Form>
-      </Segment>
-    </>
+            >
+              {unlimited_quota ? '取消无限额度' : '设为无限额度'}
+            </Button>
+            <Button floated='right' positive onClick={submit}>
+              提交
+            </Button>
+            <Button floated='right' onClick={handleCancel}>
+              取消
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

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

@@ -1,14 +1,16 @@
 import React from 'react';
-import { Segment, Header } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import TokensTable from '../../components/TokensTable';
 
 const Token = () => (
-  <>
-    <Segment>
-      <Header as='h3'>我的令牌</Header>
-      <TokensTable/>
-    </Segment>
-  </>
+  <div className='dashboard-container'>
+    <Card fluid className='chart-card'>
+      <Card.Content>
+        <Card.Header className='header'>令牌管理</Card.Header>
+        <TokensTable />
+      </Card.Content>
+    </Card>
+  </div>
 );
 
 export default Token;

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

@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Segment, 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';
 
@@ -12,13 +20,13 @@ const TopUp = () => {
 
   const topUp = async () => {
     if (redemptionCode === '') {
-      showInfo('请输入充值码！')
+      showInfo('请输入兑换码！');
       return;
     }
     setIsSubmitting(true);
     try {
       const res = await API.post('/api/user/topup', {
-        key: redemptionCode
+        key: redemptionCode,
       });
       const { success, message, data } = res.data;
       if (success) {
@@ -33,7 +41,7 @@ const TopUp = () => {
     } catch (err) {
       showError('请求失败');
     } finally {
-      setIsSubmitting(false); 
+      setIsSubmitting(false);
     }
   };
 
@@ -45,23 +53,23 @@ const TopUp = () => {
     let url = new URL(topUpLink);
     let username = user.username;
     let user_id = user.id;
-    // add  username and user_id to the topup link
+    // add username and user_id to the topup link
     url.searchParams.append('username', username);
     url.searchParams.append('user_id', user_id);
     url.searchParams.append('transaction_id', crypto.randomUUID());
     window.open(url.toString(), '_blank');
   };
 
-  const getUserQuota = async ()=>{
-    let res  = await API.get(`/api/user/self`);
-    const {success, message, data} = res.data;
+  const getUserQuota = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
     if (success) {
       setUserQuota(data.quota);
       setUser(data);
     } else {
       showError(message);
     }
-  }
+  };
 
   useEffect(() => {
     let status = localStorage.getItem('status');
@@ -75,38 +83,166 @@ const TopUp = () => {
   }, []);
 
   return (
-    <Segment>
-      <Header as='h3'>充值额度</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>
-        </Grid.Column>
-        <Grid.Column>
-          <Statistic.Group widths='one'>
-            <Statistic>
-              <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
-              <Statistic.Label>剩余额度</Statistic.Label>
-            </Statistic>
-          </Statistic.Group>
-        </Grid.Column>
-      </Grid>
-    </Segment>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header>
+            <Header as='h2'>充值中心</Header>
+          </Card.Header>
+
+          <Grid columns={2} stackable>
+            <Grid.Column>
+              <Card
+                fluid
+                style={{
+                  height: '100%',
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                }}
+              >
+                <Card.Content
+                  style={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  <Card.Header>
+                    <Header as='h3' style={{ color: '#2185d0', margin: '1em' }}>
+                      <i className='credit card icon'></i>
+                      获取兑换码
+                    </Header>
+                  </Card.Header>
+                  <Card.Description
+                    style={{
+                      flex: 1,
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <div
+                      style={{
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      <div style={{ textAlign: 'center', paddingTop: '1em' }}>
+                        <Statistic>
+                          <Statistic.Value style={{ color: '#2185d0' }}>
+                            {renderQuota(userQuota)}
+                          </Statistic.Value>
+                          <Statistic.Label>当前可用额度</Statistic.Label>
+                        </Statistic>
+                      </div>
+
+                      <div
+                        style={{ textAlign: 'center', paddingBottom: '1em' }}
+                      >
+                        <Button
+                          primary
+                          size='large'
+                          onClick={openTopUpLink}
+                          style={{ width: '80%' }}
+                        >
+                          立即获取兑换码
+                        </Button>
+                      </div>
+                    </div>
+                  </Card.Description>
+                </Card.Content>
+              </Card>
+            </Grid.Column>
+
+            <Grid.Column>
+              <Card
+                fluid
+                style={{
+                  height: '100%',
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                }}
+              >
+                <Card.Content
+                  style={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  <Card.Header>
+                    <Header as='h3' style={{ color: '#21ba45', margin: '1em' }}>
+                      <i className='ticket alternate icon'></i>
+                      兑换码充值
+                    </Header>
+                  </Card.Header>
+                  <Card.Description
+                    style={{
+                      flex: 1,
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <div
+                      style={{
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      <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('无法访问剪贴板，请手动粘贴');
+                              }
+                            }}
+                          />
+                        }
+                      />
+
+                      <div style={{ paddingBottom: '1em' }}>
+                        <Button
+                          color='green'
+                          fluid
+                          size='large'
+                          onClick={topUp}
+                          loading={isSubmitting}
+                          disabled={isSubmitting}
+                        >
+                          {isSubmitting ? '兑换中...' : '立即兑换'}
+                        </Button>
+                      </div>
+                    </div>
+                  </Card.Description>
+                </Card.Content>
+              </Card>
+            </Grid.Column>
+          </Grid>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 
-export default TopUp;
+export default TopUp;

web/default/src/pages/User/EditUser.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -16,30 +16,40 @@ const EditUser = () => {
     wechat_id: '',
     email: '',
     quota: 0,
-    group: 'default'
+    group: 'default',
   });
   const [groupOptions, setGroupOptions] = useState([]);
-  const { username, display_name, password, github_id, wechat_id, email, quota, group } =
-    inputs;
+  const {
+    username,
+    display_name,
+    password,
+    github_id,
+    wechat_id,
+    email,
+    quota,
+    group,
+  } = inputs;
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   const fetchGroups = async () => {
     try {
       let res = await API.get(`/api/group/`);
-      setGroupOptions(res.data.data.map((group) => ({
-        key: group,
-        text: group,
-        value: group,
-      })));
+      setGroupOptions(
+        res.data.data.map((group) => ({
+          key: group,
+          text: group,
+          value: group,
+        }))
+      );
     } catch (error) {
       showError(error.message);
     }
   };
   const navigate = useNavigate();
   const handleCancel = () => {
-    navigate("/setting");
-  }
+    navigate('/setting');
+  };
   const loadUser = async () => {
     let res = undefined;
     if (userId) {
@@ -83,107 +93,113 @@ const EditUser = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>更新用户信息</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='用户名'
-              name='username'
-              placeholder={'请输入新的用户名'}
-              onChange={handleInputChange}
-              value={username}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='密码'
-              name='password'
-              type={'password'}
-              placeholder={'请输入新的密码，最短 8 位'}
-              onChange={handleInputChange}
-              value={password}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='显示名称'
-              name='display_name'
-              placeholder={'请输入新的显示名称'}
-              onChange={handleInputChange}
-              value={display_name}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          {
-            userId && <>
-              <Form.Field>
-                <Form.Dropdown
-                  label='分组'
-                  placeholder={'请选择分组'}
-                  name='group'
-                  fluid
-                  search
-                  selection
-                  allowAdditions
-                  additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-                  onChange={handleInputChange}
-                  value={inputs.group}
-                  autoComplete='new-password'
-                  options={groupOptions}
-                />
-              </Form.Field>
-              <Form.Field>
-                <Form.Input
-                  label={`剩余额度${renderQuotaWithPrompt(quota)}`}
-                  name='quota'
-                  placeholder={'请输入新的剩余额度'}
-                  onChange={handleInputChange}
-                  value={quota}
-                  type={'number'}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
-            </>
-          }
-          <Form.Field>
-            <Form.Input
-              label='已绑定的 GitHub 账户'
-              name='github_id'
-              value={github_id}
-              autoComplete='new-password'
-              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-              readOnly
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='已绑定的微信账户'
-              name='wechat_id'
-              value={wechat_id}
-              autoComplete='new-password'
-              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-              readOnly
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='已绑定的邮箱账户'
-              name='email'
-              value={email}
-              autoComplete='new-password'
-              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-              readOnly
-            />
-          </Form.Field>
-          <Button onClick={handleCancel}>取消</Button>
-          <Button positive onClick={submit}>提交</Button>
-        </Form>
-      </Segment>
-    </>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>更新用户信息</Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='用户名'
+                name='username'
+                placeholder={'请输入新的用户名'}
+                onChange={handleInputChange}
+                value={username}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='密码'
+                name='password'
+                type={'password'}
+                placeholder={'请输入新的密码，最短 8 位'}
+                onChange={handleInputChange}
+                value={password}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='显示名称'
+                name='display_name'
+                placeholder={'请输入新的显示名称'}
+                onChange={handleInputChange}
+                value={display_name}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            {userId && (
+              <>
+                <Form.Field>
+                  <Form.Dropdown
+                    label='分组'
+                    placeholder={'请选择分组'}
+                    name='group'
+                    fluid
+                    search
+                    selection
+                    allowAdditions
+                    additionLabel={
+                      '请在系统设置页面编辑分组倍率以添加新的分组：'
+                    }
+                    onChange={handleInputChange}
+                    value={inputs.group}
+                    autoComplete='new-password'
+                    options={groupOptions}
+                  />
+                </Form.Field>
+                <Form.Field>
+                  <Form.Input
+                    label={`剩余额度${renderQuotaWithPrompt(quota)}`}
+                    name='quota'
+                    placeholder={'请输入新的剩余额度'}
+                    onChange={handleInputChange}
+                    value={quota}
+                    type={'number'}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              </>
+            )}
+            <Form.Field>
+              <Form.Input
+                label='已绑定的 GitHub 账户'
+                name='github_id'
+                value={github_id}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='已绑定的微信账户'
+                name='wechat_id'
+                value={wechat_id}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='已绑定的邮箱账户'
+                name='email'
+                value={email}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
+              />
+            </Form.Field>
+            <Button onClick={handleCancel}>取消</Button>
+            <Button positive onClick={submit}>
+              提交
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

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

@@ -1,14 +1,16 @@
 import React from 'react';
-import { Segment, Header } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import UsersTable from '../../components/UsersTable';
 
 const User = () => (
-  <>
-    <Segment>
-      <Header as='h3'>管理用户</Header>
-      <UsersTable/>
-    </Segment>
-  </>
+  <div className='dashboard-container'>
+    <Card fluid className='chart-card'>
+      <Card.Content>
+        <Card.Header className='header'>用户管理</Card.Header>
+        <UsersTable />
+      </Card.Content>
+    </Card>
+  </div>
 );
 
 export default User;