chore: reformat code

common/model-ratio.go

@@ -13,7 +13,7 @@ import (
 // TODO: when a new api is enabled, check the pricing here
 // TODO: when a new api is enabled, check the pricing here
 // 1 === $0.002 / 1K tokens
 // 1 === $0.002 / 1K tokens
 // 1 === ￥0.014 / 1k tokens
 // 1 === ￥0.014 / 1k tokens
-var ModelRatio = map[string]float64{
+var DefaultModelRatio = map[string]float64{
 	//"midjourney":                50,
 	//"midjourney":                50,
 	"gpt-4-gizmo-*":             15,
 	"gpt-4-gizmo-*":             15,
 	"gpt-4":                     15,
 	"gpt-4":                     15,
@@ -115,6 +115,7 @@ var DefaultModelPrice = map[string]float64{
 }
 }
 
 
 var ModelPrice = map[string]float64{}
 var ModelPrice = map[string]float64{}
+var ModelRatio = map[string]float64{}
 
 
 func ModelPrice2JSONString() string {
 func ModelPrice2JSONString() string {
 	if len(ModelPrice) == 0 {
 	if len(ModelPrice) == 0 {
@@ -150,6 +151,9 @@ func GetModelPrice(name string, printErr bool) float64 {
 }
 }
 
 
 func ModelRatio2JSONString() string {
 func ModelRatio2JSONString() string {
+	if len(ModelRatio) == 0 {
+		ModelRatio = DefaultModelRatio
+	}
 	jsonBytes, err := json.Marshal(ModelRatio)
 	jsonBytes, err := json.Marshal(ModelRatio)
 	if err != nil {
 	if err != nil {
 		SysError("error marshalling model ratio: " + err.Error())
 		SysError("error marshalling model ratio: " + err.Error())
@@ -163,6 +167,9 @@ func UpdateModelRatioByJSONString(jsonStr string) error {
 }
 }
 
 
 func GetModelRatio(name string) float64 {
 func GetModelRatio(name string) float64 {
+	if len(ModelRatio) == 0 {
+		ModelRatio = DefaultModelRatio
+	}
 	if strings.HasPrefix(name, "gpt-4-gizmo") {
 	if strings.HasPrefix(name, "gpt-4-gizmo") {
 		name = "gpt-4-gizmo-*"
 		name = "gpt-4-gizmo-*"
 	}
 	}

web/package.json

@@ -49,7 +49,7 @@
     ]
     ]
   },
   },
   "devDependencies": {
   "devDependencies": {
-    "prettier": "^2.7.1",
+    "prettier": "2.8.8",
     "typescript": "4.4.2"
     "typescript": "4.4.2"
   },
   },
   "prettier": {
   "prettier": {

web/src/App.js

@@ -8,12 +8,11 @@ import LoginForm from './components/LoginForm';
 import NotFound from './pages/NotFound';
 import NotFound from './pages/NotFound';
 import Setting from './pages/Setting';
 import Setting from './pages/Setting';
 import EditUser from './pages/User/EditUser';
 import EditUser from './pages/User/EditUser';
-import { API, getLogo, getSystemName, showError, showNotice } from './helpers';
+import { getLogo, getSystemName } from './helpers';
 import PasswordResetForm from './components/PasswordResetForm';
 import PasswordResetForm from './components/PasswordResetForm';
 import GitHubOAuth from './components/GitHubOAuth';
 import GitHubOAuth from './components/GitHubOAuth';
 import PasswordResetConfirm from './components/PasswordResetConfirm';
 import PasswordResetConfirm from './components/PasswordResetConfirm';
 import { UserContext } from './context/User';
 import { UserContext } from './context/User';
-import { StatusContext } from './context/Status';
 import Channel from './pages/Channel';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
 import Token from './pages/Token';
 import EditChannel from './pages/Channel/EditChannel';
 import EditChannel from './pages/Channel/EditChannel';
@@ -21,12 +20,13 @@ import Redemption from './pages/Redemption';
 import TopUp from './pages/TopUp';
 import TopUp from './pages/TopUp';
 import Log from './pages/Log';
 import Log from './pages/Log';
 import Chat from './pages/Chat';
 import Chat from './pages/Chat';
-import {Layout} from "@douyinfe/semi-ui";
-import Midjourney from "./pages/Midjourney";
-import Detail from "./pages/Detail";
+import { Layout } from '@douyinfe/semi-ui';
+import Midjourney from './pages/Midjourney';
+import Detail from './pages/Detail';
 
 
 const Home = lazy(() => import('./pages/Home'));
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
 const About = lazy(() => import('./pages/About'));
+
 function App() {
 function App() {
   const [userState, userDispatch] = useContext(UserContext);
   const [userState, userDispatch] = useContext(UserContext);
   // const [statusState, statusDispatch] = useContext(StatusContext);
   // const [statusState, statusDispatch] = useContext(StatusContext);
@@ -47,7 +47,7 @@ function App() {
     }
     }
     let logo = getLogo();
     let logo = getLogo();
     if (logo) {
     if (logo) {
-      let linkElement = document.querySelector("link[rel~='icon']");
+      let linkElement = document.querySelector('link[rel~=\'icon\']');
       if (linkElement) {
       if (linkElement) {
         linkElement.href = logo;
         linkElement.href = logo;
       }
       }
@@ -59,7 +59,7 @@ function App() {
       <Layout.Content>
       <Layout.Content>
         <Routes>
         <Routes>
           <Route
           <Route
-                    path='/'
+            path="/"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <Home />
                 <Home />
@@ -67,7 +67,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/channel'
+            path="/channel"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Channel />
                 <Channel />
@@ -75,7 +75,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/channel/edit/:id'
+            path="/channel/edit/:id"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <EditChannel />
                 <EditChannel />
@@ -83,7 +83,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/channel/add'
+            path="/channel/add"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <EditChannel />
                 <EditChannel />
@@ -91,7 +91,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/token'
+            path="/token"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Token />
                 <Token />
@@ -99,7 +99,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/redemption'
+            path="/redemption"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Redemption />
                 <Redemption />
@@ -107,7 +107,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/user'
+            path="/user"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <User />
                 <User />
@@ -115,7 +115,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/user/edit/:id'
+            path="/user/edit/:id"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <EditUser />
                 <EditUser />
@@ -123,7 +123,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/user/edit'
+            path="/user/edit"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <EditUser />
                 <EditUser />
@@ -131,7 +131,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/user/reset'
+            path="/user/reset"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <PasswordResetConfirm />
                 <PasswordResetConfirm />
@@ -139,7 +139,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/login'
+            path="/login"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <LoginForm />
                 <LoginForm />
@@ -147,7 +147,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/register'
+            path="/register"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <RegisterForm />
                 <RegisterForm />
@@ -155,7 +155,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/reset'
+            path="/reset"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <PasswordResetForm />
                 <PasswordResetForm />
@@ -163,7 +163,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/oauth/github'
+            path="/oauth/github"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <GitHubOAuth />
                 <GitHubOAuth />
@@ -171,7 +171,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/setting'
+            path="/setting"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Suspense fallback={<Loading></Loading>}>
                 <Suspense fallback={<Loading></Loading>}>
@@ -181,7 +181,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/topup'
+            path="/topup"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Suspense fallback={<Loading></Loading>}>
                 <Suspense fallback={<Loading></Loading>}>
@@ -191,7 +191,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/log'
+            path="/log"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Log />
                 <Log />
@@ -199,7 +199,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/detail'
+            path="/detail"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Detail />
                 <Detail />
@@ -207,7 +207,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/midjourney'
+            path="/midjourney"
             element={
             element={
               <PrivateRoute>
               <PrivateRoute>
                 <Midjourney />
                 <Midjourney />
@@ -215,7 +215,7 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/about'
+            path="/about"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <About />
                 <About />
@@ -223,14 +223,14 @@ function App() {
             }
             }
           />
           />
           <Route
           <Route
-                    path='/chat'
+            path="/chat"
             element={
             element={
               <Suspense fallback={<Loading></Loading>}>
               <Suspense fallback={<Loading></Loading>}>
                 <Chat />
                 <Chat />
               </Suspense>
               </Suspense>
             }
             }
           />
           />
-                <Route path='*' element={
+          <Route path="*" element={
             <NotFound />
             <NotFound />
           } />
           } />
         </Routes>
         </Routes>

web/src/components/ChannelsTable.js

-import React, {useEffect, useState} from 'react';
-import {
-    API,
-    isMobile,
-    shouldShowPrompt,
-    showError,
-    showInfo,
-    showSuccess,
-    timestamp2string
-} from '../helpers';
-
-import {CHANNEL_OPTIONS, ITEMS_PER_PAGE} from '../constants';
-import {renderGroup, renderNumber, renderNumberWithPoint, renderQuota, renderQuotaWithPrompt} from '../helpers/render';
+import React, { useEffect, useState } from 'react';
+import { API, isMobile, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string } from '../helpers';
+
+import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
+import { renderGroup, renderNumberWithPoint, renderQuota } from '../helpers/render';
 import {
 import {
-    Avatar,
-    Tag,
-    Table,
     Button,
     Button,
-    Popover,
+    Dropdown,
     Form,
     Form,
-    Modal,
+    InputNumber,
     Popconfirm,
     Popconfirm,
     Space,
     Space,
-    Tooltip,
+    SplitButtonGroup,
     Switch,
     Switch,
-    Typography, InputNumber, Dropdown, SplitButtonGroup
-} from "@douyinfe/semi-ui";
-import EditChannel from "../pages/Channel/EditChannel";
-import {IconTreeTriangleDown} from "@douyinfe/semi-icons";
+    Table,
+    Tag,
+    Tooltip,
+    Typography
+} from '@douyinfe/semi-ui';
+import EditChannel from '../pages/Channel/EditChannel';
+import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
 
 
 function renderTimestamp(timestamp) {
 function renderTimestamp(timestamp) {
   return (
   return (
@@ -40,13 +32,13 @@ let type2label = undefined;
 
 
 function renderType(type) {
 function renderType(type) {
   if (!type2label) {
   if (!type2label) {
-        type2label = new Map;
+    type2label = new Map();
     for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
     for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
       type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
       type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
     }
     }
-        type2label[0] = {value: 0, text: '未知类型', color: 'grey'};
+    type2label[0] = { value: 0, text: '未知类型', color: 'grey' };
   }
   }
-    return <Tag size='large' color={type2label[type]?.color}>{type2label[type]?.text}</Tag>;
+  return <Tag size="large" color={type2label[type]?.color}>{type2label[type]?.text}</Tag>;
 }
 }
 
 
 const ChannelsTable = () => {
 const ChannelsTable = () => {
@@ -58,11 +50,11 @@ const ChannelsTable = () => {
     // },
     // },
     {
     {
       title: 'ID',
       title: 'ID',
-            dataIndex: 'id',
+      dataIndex: 'id'
     },
     },
     {
     {
       title: '名称',
       title: '名称',
-            dataIndex: 'name',
+      dataIndex: 'name'
     },
     },
     {
     {
       title: '分组',
       title: '分组',
@@ -73,13 +65,13 @@ const ChannelsTable = () => {
             <Space spacing={2}>
             <Space spacing={2}>
               {
               {
                 text.split(',').map((item, index) => {
                 text.split(',').map((item, index) => {
-                                    return (renderGroup(item))
+                  return (renderGroup(item));
                 })
                 })
               }
               }
             </Space>
             </Space>
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '类型',
       title: '类型',
@@ -90,7 +82,7 @@ const ChannelsTable = () => {
             {renderType(text)}
             {renderType(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '状态',
       title: '状态',
@@ -101,7 +93,7 @@ const ChannelsTable = () => {
             {renderStatus(text)}
             {renderStatus(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '响应时间',
       title: '响应时间',
@@ -112,7 +104,7 @@ const ChannelsTable = () => {
             {renderResponseTime(text)}
             {renderResponseTime(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '已用/剩余',
       title: '已用/剩余',
@@ -122,15 +114,17 @@ const ChannelsTable = () => {
           <div>
           <div>
             <Space spacing={1}>
             <Space spacing={1}>
               <Tooltip content={'已用额度'}>
               <Tooltip content={'已用额度'}>
-                                <Tag color='white' type='ghost' size='large'>{renderQuota(record.used_quota)}</Tag>
+                <Tag color="white" type="ghost" size="large">{renderQuota(record.used_quota)}</Tag>
               </Tooltip>
               </Tooltip>
               <Tooltip content={'剩余额度' + record.balance + '，点击更新'}>
               <Tooltip content={'剩余额度' + record.balance + '，点击更新'}>
-                                <Tag color='white' type='ghost' size='large' onClick={() => {updateChannelBalance(record)}}>${renderNumberWithPoint(record.balance)}</Tag>
+                <Tag color="white" type="ghost" size="large" onClick={() => {
+                  updateChannelBalance(record);
+                }}>${renderNumberWithPoint(record.balance)}</Tag>
               </Tooltip>
               </Tooltip>
             </Space>
             </Space>
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '优先级',
       title: '优先级',
@@ -139,8 +133,8 @@ const ChannelsTable = () => {
         return (
         return (
           <div>
           <div>
             <InputNumber
             <InputNumber
-                            style={{width: 70}}
-                            name='priority'
+              style={{ width: 70 }}
+              name="priority"
               onBlur={e => {
               onBlur={e => {
                 manageChannel(record.id, 'priority', record, e.target.value);
                 manageChannel(record.id, 'priority', record, e.target.value);
               }}
               }}
@@ -151,7 +145,7 @@ const ChannelsTable = () => {
             />
             />
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '权重',
       title: '权重',
@@ -160,8 +154,8 @@ const ChannelsTable = () => {
         return (
         return (
           <div>
           <div>
             <InputNumber
             <InputNumber
-                            style={{width: 70}}
-                            name='weight'
+              style={{ width: 70 }}
+              name="weight"
               onBlur={e => {
               onBlur={e => {
                 manageChannel(record.id, 'weight', record, e.target.value);
                 manageChannel(record.id, 'weight', record, e.target.value);
               }}
               }}
@@ -172,18 +166,20 @@ const ChannelsTable = () => {
             />
             />
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '',
       title: '',
       dataIndex: 'operate',
       dataIndex: 'operate',
       render: (text, record, index) => (
       render: (text, record, index) => (
         <div>
         <div>
-                    <SplitButtonGroup style={{marginRight: 1}} aria-label="测试操作项目组">
-                        <Button theme="light" onClick={()=>{testChannel(record, '')}}>测试</Button>
+          <SplitButtonGroup style={{ marginRight: 1 }} aria-label="测试操作项目组">
+            <Button theme="light" onClick={() => {
+              testChannel(record, '');
+            }}>测试</Button>
             <Dropdown trigger="click" position="bottomRight" menu={record.test_models}
             <Dropdown trigger="click" position="bottomRight" menu={record.test_models}
             >
             >
-                            <Button style={ { padding: '8px 4px'}} type="primary" icon={<IconTreeTriangleDown />}></Button>
+              <Button style={{ padding: '8px 4px' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
             </Dropdown>
             </Dropdown>
           </SplitButtonGroup>
           </SplitButtonGroup>
           {/*<Button theme='light' type='primary' style={{marginRight: 1}} onClick={()=>testChannel(record)}>测试</Button>*/}
           {/*<Button theme='light' type='primary' style={{marginRight: 1}} onClick={()=>testChannel(record)}>测试</Button>*/}
@@ -197,23 +193,23 @@ const ChannelsTable = () => {
                 () => {
                 () => {
                   removeRecord(record.id);
                   removeRecord(record.id);
                 }
                 }
-                            )
+              );
             }}
             }}
           >
           >
-                        <Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
+            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
           </Popconfirm>
           </Popconfirm>
           {
           {
             record.status === 1 ?
             record.status === 1 ?
-                            <Button theme='light' type='warning' style={{marginRight: 1}} onClick={
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
                 async () => {
                 async () => {
                   manageChannel(
                   manageChannel(
                     record.id,
                     record.id,
                     'disable',
                     'disable',
                     record
                     record
-                                    )
+                  );
                 }
                 }
               }>禁用</Button> :
               }>禁用</Button> :
-                            <Button theme='light' type='secondary' style={{marginRight: 1}} onClick={
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
                 async () => {
                 async () => {
                   manageChannel(
                   manageChannel(
                     record.id,
                     record.id,
@@ -223,15 +219,15 @@ const ChannelsTable = () => {
                 }
                 }
               }>启用</Button>
               }>启用</Button>
           }
           }
-                    <Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
+          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
             () => {
             () => {
               setEditingChannel(record);
               setEditingChannel(record);
               setShowEdit(true);
               setShowEdit(true);
             }
             }
           }>编辑</Button>
           }>编辑</Button>
         </div>
         </div>
-            ),
-        },
+      )
+    }
   ];
   ];
 
 
   const [channels, setChannels] = useState([]);
   const [channels, setChannels] = useState([]);
@@ -244,13 +240,13 @@ const ChannelsTable = () => {
   const [searching, setSearching] = useState(false);
   const [searching, setSearching] = useState(false);
   const [updatingBalance, setUpdatingBalance] = useState(false);
   const [updatingBalance, setUpdatingBalance] = useState(false);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
-    const [showPrompt, setShowPrompt] = useState(shouldShowPrompt("channel-test"));
+  const [showPrompt, setShowPrompt] = useState(shouldShowPrompt('channel-test'));
   const [channelCount, setChannelCount] = useState(pageSize);
   const [channelCount, setChannelCount] = useState(pageSize);
   const [groupOptions, setGroupOptions] = useState([]);
   const [groupOptions, setGroupOptions] = useState([]);
   const [showEdit, setShowEdit] = useState(false);
   const [showEdit, setShowEdit] = useState(false);
   const [enableBatchDelete, setEnableBatchDelete] = useState(false);
   const [enableBatchDelete, setEnableBatchDelete] = useState(false);
   const [editingChannel, setEditingChannel] = useState({
   const [editingChannel, setEditingChannel] = useState({
-        id: undefined,
+    id: undefined
   });
   });
   const [selectedChannels, setSelectedChannels] = useState([]);
   const [selectedChannels, setSelectedChannels] = useState([]);
 
 
@@ -269,17 +265,17 @@ const ChannelsTable = () => {
   const setChannelFormat = (channels) => {
   const setChannelFormat = (channels) => {
     for (let i = 0; i < channels.length; i++) {
     for (let i = 0; i < channels.length; i++) {
       channels[i].key = '' + channels[i].id;
       channels[i].key = '' + channels[i].id;
-            let test_models = []
+      let test_models = [];
       channels[i].models.split(',').forEach((item, index) => {
       channels[i].models.split(',').forEach((item, index) => {
         test_models.push({
         test_models.push({
           node: 'item',
           node: 'item',
           name: item,
           name: item,
           onClick: () => {
           onClick: () => {
-                        testChannel(channels[i], item)
+            testChannel(channels[i], item);
           }
           }
-                })
-            })
-            channels[i].test_models = test_models
+        });
+      });
+      channels[i].test_models = test_models;
     }
     }
     // data.key = '' + data.id
     // data.key = '' + data.id
     setChannels(channels);
     setChannels(channels);
@@ -288,12 +284,12 @@ const ChannelsTable = () => {
     } else {
     } else {
       setChannelCount(channels.length);
       setChannelCount(channels.length);
     }
     }
-    }
+  };
 
 
   const loadChannels = async (startIdx, pageSize, idSort) => {
   const loadChannels = async (startIdx, pageSize, idSort) => {
     setLoading(true);
     setLoading(true);
     const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}&id_sort=${idSort}`);
     const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}&id_sort=${idSort}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (startIdx === 0) {
       if (startIdx === 0) {
         setChannelFormat(data);
         setChannelFormat(data);
@@ -316,8 +312,8 @@ const ChannelsTable = () => {
     // console.log('default effect')
     // console.log('default effect')
     const localIdSort = localStorage.getItem('id-sort') === 'true';
     const localIdSort = localStorage.getItem('id-sort') === 'true';
     const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
     const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
-        setIdSort(localIdSort)
-        setPageSize(localPageSize)
+    setIdSort(localIdSort);
+    setPageSize(localPageSize);
     loadChannels(0, localPageSize, localIdSort)
     loadChannels(0, localPageSize, localIdSort)
       .then()
       .then()
       .catch((reason) => {
       .catch((reason) => {
@@ -327,7 +323,7 @@ const ChannelsTable = () => {
   }, []);
   }, []);
 
 
   const manageChannel = async (id, action, record, value) => {
   const manageChannel = async (id, action, record, value) => {
-        let data = {id};
+    let data = { id };
     let res;
     let res;
     switch (action) {
     switch (action) {
       case 'delete':
       case 'delete':
@@ -359,7 +355,7 @@ const ChannelsTable = () => {
         res = await API.put('/api/channel/', data);
         res = await API.put('/api/channel/', data);
         break;
         break;
     }
     }
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('操作成功完成！');
       showSuccess('操作成功完成！');
       let channel = res.data.data;
       let channel = res.data.data;
@@ -378,22 +374,22 @@ const ChannelsTable = () => {
   const renderStatus = (status) => {
   const renderStatus = (status) => {
     switch (status) {
     switch (status) {
       case 1:
       case 1:
-                return <Tag size='large' color='green'>已启用</Tag>;
+        return <Tag size="large" color="green">已启用</Tag>;
       case 2:
       case 2:
         return (
         return (
-                    <Tag size='large' color='yellow'>
+          <Tag size="large" color="yellow">
             已禁用
             已禁用
           </Tag>
           </Tag>
         );
         );
       case 3:
       case 3:
         return (
         return (
-                    <Tag size='large' color='yellow'>
+          <Tag size="large" color="yellow">
             自动禁用
             自动禁用
           </Tag>
           </Tag>
         );
         );
       default:
       default:
         return (
         return (
-                    <Tag size='large' color='grey'>
+          <Tag size="large" color="grey">
             未知状态
             未知状态
           </Tag>
           </Tag>
         );
         );
@@ -404,15 +400,15 @@ const ChannelsTable = () => {
     let time = responseTime / 1000;
     let time = responseTime / 1000;
     time = time.toFixed(2) + ' 秒';
     time = time.toFixed(2) + ' 秒';
     if (responseTime === 0) {
     if (responseTime === 0) {
-            return <Tag size='large' color='grey'>未测试</Tag>;
+      return <Tag size="large" color="grey">未测试</Tag>;
     } else if (responseTime <= 1000) {
     } else if (responseTime <= 1000) {
-            return <Tag size='large' color='green'>{time}</Tag>;
+      return <Tag size="large" color="green">{time}</Tag>;
     } else if (responseTime <= 3000) {
     } else if (responseTime <= 3000) {
-            return <Tag size='large' color='lime'>{time}</Tag>;
+      return <Tag size="large" color="lime">{time}</Tag>;
     } else if (responseTime <= 5000) {
     } else if (responseTime <= 5000) {
-            return <Tag size='large' color='yellow'>{time}</Tag>;
+      return <Tag size="large" color="yellow">{time}</Tag>;
     } else {
     } else {
-            return <Tag size='large' color='red'>{time}</Tag>;
+      return <Tag size="large" color="red">{time}</Tag>;
     }
     }
   };
   };
 
 
@@ -425,7 +421,7 @@ const ChannelsTable = () => {
     }
     }
     setSearching(true);
     setSearching(true);
     const res = await API.get(`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}`);
     const res = await API.get(`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setChannels(data);
       setChannels(data);
       setActivePage(1);
       setActivePage(1);
@@ -437,7 +433,7 @@ const ChannelsTable = () => {
 
 
   const testChannel = async (record, model) => {
   const testChannel = async (record, model) => {
     const res = await API.get(`/api/channel/test/${record.id}?model=${model}`);
     const res = await API.get(`/api/channel/test/${record.id}?model=${model}`);
-        const {success, message, time} = res.data;
+    const { success, message, time } = res.data;
     if (success) {
     if (success) {
       record.response_time = time * 1000;
       record.response_time = time * 1000;
       record.test_time = Date.now() / 1000;
       record.test_time = Date.now() / 1000;
@@ -449,7 +445,7 @@ const ChannelsTable = () => {
 
 
   const testAllChannels = async () => {
   const testAllChannels = async () => {
     const res = await API.get(`/api/channel/test`);
     const res = await API.get(`/api/channel/test`);
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showInfo('已成功开始测试所有通道，请刷新页面查看结果。');
       showInfo('已成功开始测试所有通道，请刷新页面查看结果。');
     } else {
     } else {
@@ -459,7 +455,7 @@ const ChannelsTable = () => {
 
 
   const deleteAllDisabledChannels = async () => {
   const deleteAllDisabledChannels = async () => {
     const res = await API.delete(`/api/channel/disabled`);
     const res = await API.delete(`/api/channel/disabled`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       showSuccess(`已删除所有禁用渠道，共计 ${data} 个`);
       showSuccess(`已删除所有禁用渠道，共计 ${data} 个`);
       await refresh();
       await refresh();
@@ -470,7 +466,7 @@ const ChannelsTable = () => {
 
 
   const updateChannelBalance = async (record) => {
   const updateChannelBalance = async (record) => {
     const res = await API.get(`/api/channel/update_balance/${record.id}/`);
     const res = await API.get(`/api/channel/update_balance/${record.id}/`);
-        const {success, message, balance} = res.data;
+    const { success, message, balance } = res.data;
     if (success) {
     if (success) {
       record.balance = balance;
       record.balance = balance;
       record.balance_updated_time = Date.now() / 1000;
       record.balance_updated_time = Date.now() / 1000;
@@ -483,7 +479,7 @@ const ChannelsTable = () => {
   const updateAllChannelsBalance = async () => {
   const updateAllChannelsBalance = async () => {
     setUpdatingBalance(true);
     setUpdatingBalance(true);
     const res = await API.get(`/api/channel/update_balance`);
     const res = await API.get(`/api/channel/update_balance`);
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showInfo('已更新完毕所有已启用通道余额！');
       showInfo('已更新完毕所有已启用通道余额！');
     } else {
     } else {
@@ -502,8 +498,8 @@ const ChannelsTable = () => {
     selectedChannels.forEach((channel) => {
     selectedChannels.forEach((channel) => {
       ids.push(channel.id);
       ids.push(channel.id);
     });
     });
-        const res = await API.post(`/api/channel/batch`, {ids: ids});
-        const {success, message, data} = res.data;
+    const res = await API.post(`/api/channel/batch`, { ids: ids });
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       showSuccess(`已删除 ${data} 个通道！`);
       showSuccess(`已删除 ${data} 个通道！`);
       await refresh();
       await refresh();
@@ -511,18 +507,18 @@ const ChannelsTable = () => {
       showError(message);
       showError(message);
     }
     }
     setLoading(false);
     setLoading(false);
-    }
+  };
 
 
   const fixChannelsAbilities = async () => {
   const fixChannelsAbilities = async () => {
     const res = await API.post(`/api/channel/fix`);
     const res = await API.post(`/api/channel/fix`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       showSuccess(`已修复 ${data} 个通道！`);
       showSuccess(`已修复 ${data} 个通道！`);
       await refresh();
       await refresh();
     } else {
     } else {
       showError(message);
       showError(message);
     }
     }
-    }
+  };
 
 
   let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize);
   let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize);
 
 
@@ -535,15 +531,15 @@ const ChannelsTable = () => {
     }
     }
   };
   };
 
 
-    const handlePageSizeChange = async(size) => {
-        localStorage.setItem('page-size', size + '')
-        setPageSize(size)
-        setActivePage(1)
+  const handlePageSizeChange = async (size) => {
+    localStorage.setItem('page-size', size + '');
+    setPageSize(size);
+    setActivePage(1);
     loadChannels(0, size, idSort)
     loadChannels(0, size, idSort)
       .then()
       .then()
       .catch((reason) => {
       .catch((reason) => {
         showError(reason);
         showError(reason);
-            })
+      });
   };
   };
 
 
   const fetchGroups = async () => {
   const fetchGroups = async () => {
@@ -553,7 +549,7 @@ const ChannelsTable = () => {
       // res.data.data.unshift('all');
       // res.data.data.unshift('all');
       setGroupOptions(res.data.data.map((group) => ({
       setGroupOptions(res.data.data.map((group) => ({
         label: group,
         label: group,
-                value: group,
+        value: group
       })));
       })));
     } catch (error) {
     } catch (error) {
       showError(error.message);
       showError(error.message);
@@ -562,14 +558,14 @@ const ChannelsTable = () => {
 
 
   const closeEdit = () => {
   const closeEdit = () => {
     setShowEdit(false);
     setShowEdit(false);
-    }
+  };
 
 
   const handleRow = (record, index) => {
   const handleRow = (record, index) => {
     if (record.status !== 1) {
     if (record.status !== 1) {
       return {
       return {
         style: {
         style: {
-                    background: 'var(--semi-color-disabled-border)',
-                },
+          background: 'var(--semi-color-disabled-border)'
+        }
       };
       };
     } else {
     } else {
       return {};
       return {};
@@ -579,100 +575,108 @@ const ChannelsTable = () => {
 
 
   return (
   return (
     <>
     <>
-            <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel}/>
-            <Form onSubmit={() => {searchChannels(searchKeyword, searchGroup, searchModel)}} labelPosition='left'>
-                <div style={{display: 'flex'}}>
+      <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} />
+      <Form onSubmit={() => {
+        searchChannels(searchKeyword, searchGroup, searchModel);
+      }} labelPosition="left">
+        <div style={{ display: 'flex' }}>
           <Space>
           <Space>
             <Form.Input
             <Form.Input
-                            field='search_keyword'
-                            label='搜索渠道关键词'
-                            placeholder='ID，名称和密钥 ...'
+              field="search_keyword"
+              label="搜索渠道关键词"
+              placeholder="ID，名称和密钥 ..."
               value={searchKeyword}
               value={searchKeyword}
               loading={searching}
               loading={searching}
-                            onChange={(v)=>{
-                                setSearchKeyword(v.trim())
+              onChange={(v) => {
+                setSearchKeyword(v.trim());
               }}
               }}
             />
             />
             <Form.Input
             <Form.Input
-                          field='search_model'
-                          label='模型'
-                          placeholder='模型关键字'
+              field="search_model"
+              label="模型"
+              placeholder="模型关键字"
               value={searchModel}
               value={searchModel}
               loading={searching}
               loading={searching}
-                          onChange={(v)=>{
-                              setSearchModel(v.trim())
+              onChange={(v) => {
+                setSearchModel(v.trim());
               }}
               }}
             />
             />
-                        <Form.Select field="group" label='分组' optionList={groupOptions} onChange={(v) => {
-                            setSearchGroup(v)
-                            searchChannels(searchKeyword, v, searchModel)
-                        }}/>
-                        <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
-                                style={{marginRight: 8}}>查询</Button>
+            <Form.Select field="group" label="分组" optionList={groupOptions} onChange={(v) => {
+              setSearchGroup(v);
+              searchChannels(searchKeyword, v, searchModel);
+            }} />
+            <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
+                    style={{ marginRight: 8 }}>查询</Button>
           </Space>
           </Space>
         </div>
         </div>
       </Form>
       </Form>
-            <div style={{marginTop: 10, display: 'flex'}}>
+      <div style={{ marginTop: 10, display: 'flex' }}>
         <Space>
         <Space>
           <Space>
           <Space>
             <Typography.Text strong>使用ID排序</Typography.Text>
             <Typography.Text strong>使用ID排序</Typography.Text>
-                        <Switch checked={idSort} label='使用ID排序' uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
-                            localStorage.setItem('id-sort', v + '')
-                            setIdSort(v)
+            <Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
+              localStorage.setItem('id-sort', v + '');
+              setIdSort(v);
               loadChannels(0, pageSize, v)
               loadChannels(0, pageSize, v)
                 .then()
                 .then()
                 .catch((reason) => {
                 .catch((reason) => {
                   showError(reason);
                   showError(reason);
-                                })
+                });
             }}></Switch>
             }}></Switch>
           </Space>
           </Space>
         </Space>
         </Space>
       </div>
       </div>
 
 
-            <Table className={'channel-table'} style={{marginTop: 15}} columns={columns} dataSource={pageData} pagination={{
+      <Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
         currentPage: activePage,
         currentPage: activePage,
         pageSize: pageSize,
         pageSize: pageSize,
         total: channelCount,
         total: channelCount,
         pageSizeOpts: [10, 20, 50, 100],
         pageSizeOpts: [10, 20, 50, 100],
         showSizeChanger: true,
         showSizeChanger: true,
-                formatPageText:(page) => '',
+        formatPageText: (page) => '',
         onPageSizeChange: (size) => {
         onPageSizeChange: (size) => {
-                    handlePageSizeChange(size).then()
+          handlePageSizeChange(size).then();
         },
         },
-                onPageChange: handlePageChange,
+        onPageChange: handlePageChange
       }} loading={loading} onRow={handleRow} rowSelection={
       }} loading={loading} onRow={handleRow} rowSelection={
         enableBatchDelete ?
         enableBatchDelete ?
           {
           {
             onChange: (selectedRowKeys, selectedRows) => {
             onChange: (selectedRowKeys, selectedRows) => {
               // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
               // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
               setSelectedChannels(selectedRows);
               setSelectedChannels(selectedRows);
-                    },
+            }
           } : null
           } : null
-            }/>
-            <div style={{display: isMobile()?'':'flex', marginTop: isMobile()?0:-45, zIndex: 999, position: 'relative', pointerEvents: 'none'}}>
-                <Space style={{pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45}}>
-                    <Button theme='light' type='primary' style={{marginRight: 8}} onClick={
+      } />
+      <div style={{
+        display: isMobile() ? '' : 'flex',
+        marginTop: isMobile() ? 0 : -45,
+        zIndex: 999,
+        position: 'relative',
+        pointerEvents: 'none'
+      }}>
+        <Space style={{ pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45 }}>
+          <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
             () => {
             () => {
               setEditingChannel({
               setEditingChannel({
-                                id: undefined,
+                id: undefined
               });
               });
-                            setShowEdit(true)
+              setShowEdit(true);
             }
             }
           }>添加渠道</Button>
           }>添加渠道</Button>
           <Popconfirm
           <Popconfirm
             title="确定？"
             title="确定？"
             okType={'warning'}
             okType={'warning'}
             onConfirm={testAllChannels}
             onConfirm={testAllChannels}
-                        position={isMobile()?'top':'top'}
+            position={isMobile() ? 'top' : 'top'}
           >
           >
-                        <Button theme='light' type='warning' style={{marginRight: 8}}>测试所有通道</Button>
+            <Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
           </Popconfirm>
           </Popconfirm>
           <Popconfirm
           <Popconfirm
             title="确定？"
             title="确定？"
             okType={'secondary'}
             okType={'secondary'}
             onConfirm={updateAllChannelsBalance}
             onConfirm={updateAllChannelsBalance}
           >
           >
-                        <Button theme='light' type='secondary' style={{marginRight: 8}}>更新所有已启用通道余额</Button>
+            <Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
           </Popconfirm>
           </Popconfirm>
           <Popconfirm
           <Popconfirm
             title="确定是否要删除禁用通道？"
             title="确定是否要删除禁用通道？"
@@ -680,20 +684,20 @@ const ChannelsTable = () => {
             okType={'danger'}
             okType={'danger'}
             onConfirm={deleteAllDisabledChannels}
             onConfirm={deleteAllDisabledChannels}
           >
           >
-                        <Button theme='light' type='danger' style={{marginRight: 8}}>删除禁用通道</Button>
+            <Button theme="light" type="danger" style={{ marginRight: 8 }}>删除禁用通道</Button>
           </Popconfirm>
           </Popconfirm>
 
 
-                    <Button theme='light' type='primary' style={{marginRight: 8}} onClick={refresh}>刷新</Button>
+          <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={refresh}>刷新</Button>
         </Space>
         </Space>
         {/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
         {/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
 
 
         {/*</div>*/}
         {/*</div>*/}
       </div>
       </div>
-            <div style={{marginTop: 20}}>
+      <div style={{ marginTop: 20 }}>
         <Space>
         <Space>
           <Typography.Text strong>开启批量删除</Typography.Text>
           <Typography.Text strong>开启批量删除</Typography.Text>
-                    <Switch label='开启批量删除' uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
-                        setEnableBatchDelete(v)
+          <Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
+            setEnableBatchDelete(v);
           }}></Switch>
           }}></Switch>
           <Popconfirm
           <Popconfirm
             title="确定是否要删除所选通道？"
             title="确定是否要删除所选通道？"
@@ -703,7 +707,8 @@ const ChannelsTable = () => {
             disabled={!enableBatchDelete}
             disabled={!enableBatchDelete}
             position={'top'}
             position={'top'}
           >
           >
-                        <Button disabled={!enableBatchDelete} theme='light' type='danger' style={{marginRight: 8}}>删除所选通道</Button>
+            <Button disabled={!enableBatchDelete} theme="light" type="danger"
+                    style={{ marginRight: 8 }}>删除所选通道</Button>
           </Popconfirm>
           </Popconfirm>
           <Popconfirm
           <Popconfirm
             title="确定是否要修复数据库一致性？"
             title="确定是否要修复数据库一致性？"
@@ -712,7 +717,7 @@ const ChannelsTable = () => {
             onConfirm={fixChannelsAbilities}
             onConfirm={fixChannelsAbilities}
             position={'top'}
             position={'top'}
           >
           >
-                        <Button theme='light' type='secondary' style={{marginRight: 8}}>修复数据库一致性</Button>
+            <Button theme="light" type="secondary" style={{ marginRight: 8 }}>修复数据库一致性</Button>
           </Popconfirm>
           </Popconfirm>
         </Space>
         </Space>
       </div>
       </div>

web/src/components/Footer.js

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
 
 
 import { getFooterHTML, getSystemName } from '../helpers';
 import { getFooterHTML, getSystemName } from '../helpers';
-import {Layout} from "@douyinfe/semi-ui";
+import { Layout } from '@douyinfe/semi-ui';
 
 
 const Footer = () => {
 const Footer = () => {
   const systemName = getSystemName();
   const systemName = getSystemName();
@@ -29,30 +29,30 @@ const Footer = () => {
 
 
   return (
   return (
     <Layout>
     <Layout>
-      <Layout.Content style={{textAlign: 'center'}}>
+      <Layout.Content style={{ textAlign: 'center' }}>
         {footer ? (
         {footer ? (
           <div
           <div
-            className='custom-footer'
+            className="custom-footer"
             dangerouslySetInnerHTML={{ __html: footer }}
             dangerouslySetInnerHTML={{ __html: footer }}
           ></div>
           ></div>
         ) : (
         ) : (
-          <div className='custom-footer'>
+          <div className="custom-footer">
             <a
             <a
-              href='https://github.com/Calcium-Ion/new-api'
-              target='_blank'
+              href="https://github.com/Calcium-Ion/new-api"
+              target="_blank" rel="noreferrer"
             >
             >
               New API {process.env.REACT_APP_VERSION}{' '}
               New API {process.env.REACT_APP_VERSION}{' '}
             </a>
             </a>
             由{' '}
             由{' '}
-            <a href='https://github.com/Calcium-Ion' target='_blank'>
+            <a href="https://github.com/Calcium-Ion" target="_blank" rel="noreferrer">
               Calcium-Ion
               Calcium-Ion
             </a>{' '}
             </a>{' '}
             开发，基于{' '}
             开发，基于{' '}
-            <a href='https://github.com/songquanpeng/one-api' target='_blank'>
+            <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noreferrer">
               One API v0.5.4
               One API v0.5.4
             </a>{' '}
             </a>{' '}
             ，本项目根据{' '}
             ，本项目根据{' '}
-            <a href='https://opensource.org/licenses/mit-license.php'>
+            <a href="https://opensource.org/licenses/mit-license.php">
               MIT 许可证
               MIT 许可证
             </a>{' '}
             </a>{' '}
             授权
             授权

web/src/components/GitHubOAuth.js

@@ -49,7 +49,7 @@ const GitHubOAuth = () => {
   return (
   return (
     <Segment style={{ minHeight: '300px' }}>
     <Segment style={{ minHeight: '300px' }}>
       <Dimmer active inverted>
       <Dimmer active inverted>
-        <Loader size='large'>{prompt}</Loader>
+        <Loader size="large">{prompt}</Loader>
       </Dimmer>
       </Dimmer>
     </Segment>
     </Segment>
   );
   );

web/src/components/HeaderBar.js

-import React, {useContext, useEffect, useRef, useState} from 'react';
-import {Link, useNavigate} from 'react-router-dom';
-import {UserContext} from '../context/User';
+import React, { useContext, useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/User';
 
 
-import {API, getLogo, getSystemName, isAdmin, isMobile, showSuccess} from '../helpers';
+import { API, getLogo, getSystemName, showSuccess } from '../helpers';
 import '../index.css';
 import '../index.css';
 
 
 import fireworks from 'react-fireworks';
 import fireworks from 'react-fireworks';
 
 
-import {
-    IconKey,
-    IconUser,
-    IconHelpCircle
-} from '@douyinfe/semi-icons';
-import {Nav, Avatar, Dropdown, Layout, Switch} from '@douyinfe/semi-ui';
-import {stringToColor} from "../helpers/render";
+import { IconHelpCircle, IconKey, IconUser } from '@douyinfe/semi-icons';
+import { Avatar, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui';
+import { stringToColor } from '../helpers/render';
 
 
 // HeaderBar Buttons
 // HeaderBar Buttons
 let headerButtons = [
 let headerButtons = [
@@ -21,8 +17,8 @@ let headerButtons = [
     text: '关于',
     text: '关于',
     itemKey: 'about',
     itemKey: 'about',
     to: '/about',
     to: '/about',
-        icon: <IconHelpCircle/>
-    },
+    icon: <IconHelpCircle />
+  }
 ];
 ];
 
 
 if (localStorage.getItem('chat_link')) {
 if (localStorage.getItem('chat_link')) {
@@ -50,13 +46,13 @@ const HeaderBar = () => {
     setShowSidebar(false);
     setShowSidebar(false);
     await API.get('/api/user/logout');
     await API.get('/api/user/logout');
     showSuccess('注销成功!');
     showSuccess('注销成功!');
-        userDispatch({type: 'logout'});
+    userDispatch({ type: 'logout' });
     localStorage.removeItem('user');
     localStorage.removeItem('user');
     navigate('/login');
     navigate('/login');
   }
   }
 
 
   const handleNewYearClick = () => {
   const handleNewYearClick = () => {
-        fireworks.init("root",{});
+    fireworks.init('root', {});
     fireworks.start();
     fireworks.start();
     setTimeout(() => {
     setTimeout(() => {
       fireworks.stop();
       fireworks.stop();
@@ -89,19 +85,19 @@ const HeaderBar = () => {
   return (
   return (
     <>
     <>
       <Layout>
       <Layout>
-                <div style={{width: '100%'}}>
+        <div style={{ width: '100%' }}>
           <Nav
           <Nav
             mode={'horizontal'}
             mode={'horizontal'}
             // bodyStyle={{ height: 100 }}
             // bodyStyle={{ height: 100 }}
-                        renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => {
+            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
               const routerMap = {
               const routerMap = {
-                                about: "/about",
-                                login: "/login",
-                                register: "/register",
+                about: '/about',
+                login: '/login',
+                register: '/register'
               };
               };
               return (
               return (
                 <Link
                 <Link
-                                    style={{textDecoration: "none"}}
+                  style={{ textDecoration: 'none' }}
                   to={routerMap[props.itemKey]}
                   to={routerMap[props.itemKey]}
                 >
                 >
                   {itemElement}
                   {itemElement}
@@ -125,7 +121,7 @@ const HeaderBar = () => {
                       </Dropdown.Menu>
                       </Dropdown.Menu>
                     }
                     }
                   >
                   >
-                                        <Nav.Item itemKey={'new-year'} text={'🏮'}/>
+                    <Nav.Item itemKey={'new-year'} text={'🏮'} />
                   </Dropdown>
                   </Dropdown>
                 }
                 }
                 <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
                 <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />

web/src/components/Loading.js

 import React from 'react';
 import React from 'react';
-import { Segment, Dimmer, Loader } from 'semantic-ui-react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
 
 
 const Loading = ({ prompt: name = 'page' }) => {
 const Loading = ({ prompt: name = 'page' }) => {
   return (
   return (

web/src/components/LoginForm.js

 import React, { useContext, useEffect, useState } from 'react';
 import React, { useContext, useEffect, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { UserContext } from '../context/User';
-import { API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning } from '../helpers';
+import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
 import { onGitHubOAuthClicked } from './utils';
 import { onGitHubOAuthClicked } from './utils';
-import Turnstile from "react-turnstile";
-import { Layout, Card, Image, Form, Button, Divider, Modal, Icon } from '@douyinfe/semi-ui';
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import Text from "@douyinfe/semi-ui/lib/es/typography/text";
+import Turnstile from 'react-turnstile';
+import { Button, Card, Divider, Form, Icon, Layout, Modal } from '@douyinfe/semi-ui';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import TelegramLoginButton from 'react-telegram-login';
 import TelegramLoginButton from 'react-telegram-login';
 
 
 import { IconGithubLogo } from '@douyinfe/semi-icons';
 import { IconGithubLogo } from '@douyinfe/semi-icons';
@@ -104,7 +104,7 @@ const LoginForm = () => {
 
 
   // 添加Telegram登录处理函数
   // 添加Telegram登录处理函数
   const onTelegramLoginClicked = async (response) => {
   const onTelegramLoginClicked = async (response) => {
-        const fields = ["id", "first_name", "last_name", "username", "photo_url", "auth_date", "hash", "lang"];
+    const fields = ['id', 'first_name', 'last_name', 'username', 'photo_url', 'auth_date', 'hash', 'lang'];
     const params = {};
     const params = {};
     fields.forEach((field) => {
     fields.forEach((field) => {
       if (response[field]) {
       if (response[field]) {
@@ -129,7 +129,7 @@ const LoginForm = () => {
         <Layout.Header>
         <Layout.Header>
         </Layout.Header>
         </Layout.Header>
         <Layout.Content>
         <Layout.Content>
-                    <div style={{ justifyContent: 'center', display: "flex", marginTop: 120 }}>
+          <div style={{ justifyContent: 'center', display: 'flex', marginTop: 120 }}>
             <div style={{ width: 500 }}>
             <div style={{ width: 500 }}>
               <Card>
               <Card>
                 <Title heading={2} style={{ textAlign: 'center' }}>
                 <Title heading={2} style={{ textAlign: 'center' }}>
@@ -139,41 +139,41 @@ const LoginForm = () => {
                   <Form.Input
                   <Form.Input
                     field={'username'}
                     field={'username'}
                     label={'用户名'}
                     label={'用户名'}
-                                        placeholder='用户名'
-                                        name='username'
+                    placeholder="用户名"
+                    name="username"
                     onChange={(value) => handleChange('username', value)}
                     onChange={(value) => handleChange('username', value)}
                   />
                   />
                   <Form.Input
                   <Form.Input
                     field={'password'}
                     field={'password'}
                     label={'密码'}
                     label={'密码'}
-                                        placeholder='密码'
-                                        name='password'
-                                        type='password'
+                    placeholder="密码"
+                    name="password"
+                    type="password"
                     onChange={(value) => handleChange('password', value)}
                     onChange={(value) => handleChange('password', value)}
                   />
                   />
 
 
-                                    <Button theme='solid' style={{ width: '100%' }} type={'primary'} size='large'
+                  <Button theme="solid" style={{ width: '100%' }} type={'primary'} size="large"
                           htmlType={'submit'} onClick={handleSubmit}>
                           htmlType={'submit'} onClick={handleSubmit}>
                     登录
                     登录
                   </Button>
                   </Button>
                 </Form>
                 </Form>
                 <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
                   <Text>
                   <Text>
-                                        没有账号请先 <Link to='/register'>注册账号</Link>
+                    没有账号请先 <Link to="/register">注册账号</Link>
                   </Text>
                   </Text>
                   <Text>
                   <Text>
-                                        忘记密码 <Link to='/reset'>点击重置</Link>
+                    忘记密码 <Link to="/reset">点击重置</Link>
                   </Text>
                   </Text>
                 </div>
                 </div>
                 {status.github_oauth || status.wechat_login || status.telegram_oauth ? (
                 {status.github_oauth || status.wechat_login || status.telegram_oauth ? (
                   <>
                   <>
-                                        <Divider margin='12px' align='center'>
+                    <Divider margin="12px" align="center">
                       第三方登录
                       第三方登录
                     </Divider>
                     </Divider>
                     <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
                     <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
                       {status.github_oauth ? (
                       {status.github_oauth ? (
                         <Button
                         <Button
-                                                    type='primary'
+                          type="primary"
                           icon={<IconGithubLogo />}
                           icon={<IconGithubLogo />}
                           onClick={() => onGitHubOAuthClicked(status.github_client_id)}
                           onClick={() => onGitHubOAuthClicked(status.github_client_id)}
                         />
                         />
@@ -182,8 +182,8 @@ const LoginForm = () => {
                       )}
                       )}
                       {status.wechat_login ? (
                       {status.wechat_login ? (
                         <Button
                         <Button
-                                                    type='primary'
-                                                    style={{color: 'rgba(var(--semi-green-5), 1)'}}
+                          type="primary"
+                          style={{ color: 'rgba(var(--semi-green-5), 1)' }}
                           icon={<Icon svg={<WeChatIcon />} />}
                           icon={<Icon svg={<WeChatIcon />} />}
                           onClick={onWeChatLoginClicked}
                           onClick={onWeChatLoginClicked}
                         />
                         />
@@ -212,17 +212,17 @@ const LoginForm = () => {
                   centered={true}
                   centered={true}
                 >
                 >
                   <div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>
                   <div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>
-                                        <img src={status.wechat_qrcode}/>
+                    <img src={status.wechat_qrcode} />
                   </div>
                   </div>
-                                    <div style={{textAlign: 'center'}}>
+                  <div style={{ textAlign: 'center' }}>
                     <p>
                     <p>
                       微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                       微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                     </p>
                     </p>
                   </div>
                   </div>
-                                    <Form size='large'>
+                  <Form size="large">
                     <Form.Input
                     <Form.Input
                       field={'wechat_verification_code'}
                       field={'wechat_verification_code'}
-                                          placeholder='验证码'
+                      placeholder="验证码"
                       label={'验证码'}
                       label={'验证码'}
                       value={inputs.wechat_verification_code}
                       value={inputs.wechat_verification_code}
                       onChange={(value) => handleChange('wechat_verification_code', value)}
                       onChange={(value) => handleChange('wechat_verification_code', value)}

web/src/components/LogsTable.js

-import React, {useEffect, useState} from 'react';
-import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers';
+import React, { useEffect, useState } from 'react';
+import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
 
 
-import {Table, Avatar, Tag, Form, Button, Layout, Select, Popover, Modal, Spin, Space} from '@douyinfe/semi-ui';
-import {ITEMS_PER_PAGE} from '../constants';
-import {renderNumber, renderQuota, stringToColor} from '../helpers/render';
-import Paragraph from "@douyinfe/semi-ui/lib/es/typography/paragraph";
+import { Avatar, Button, Form, Layout, Modal, Select, Space, Spin, Table, Tag } from '@douyinfe/semi-ui';
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderNumber, renderQuota, stringToColor } from '../helpers/render';
+import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 
 
-const {Header} = Layout;
+const { Header } = Layout;
 
 
 function renderTimestamp(timestamp) {
 function renderTimestamp(timestamp) {
-    return (
-        <>
+  return (<>
     {timestamp2string(timestamp)}
     {timestamp2string(timestamp)}
-        </>
-    );
+  </>);
 }
 }
 
 
-const MODE_OPTIONS = [
-    {key: 'all', text: '全部用户', value: 'all'},
-    {key: 'self', text: '当前用户', value: 'self'}
-];
+const MODE_OPTIONS = [{ key: 'all', text: '全部用户', value: 'all' }, { key: 'self', text: '当前用户', value: 'self' }];
 
 
-const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
-    'light-blue', 'lime', 'orange', 'pink',
-    'purple', 'red', 'teal', 'violet', 'yellow'
-]
+const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'violet', 'yellow'];
 
 
 function renderType(type) {
 function renderType(type) {
   switch (type) {
   switch (type) {
     case 1:
     case 1:
-            return <Tag color='cyan' size='large'> 充值 </Tag>;
+      return <Tag color="cyan" size="large"> 充值 </Tag>;
     case 2:
     case 2:
-            return <Tag color='lime' size='large'> 消费 </Tag>;
+      return <Tag color="lime" size="large"> 消费 </Tag>;
     case 3:
     case 3:
-            return <Tag color='orange' size='large'> 管理 </Tag>;
+      return <Tag color="orange" size="large"> 管理 </Tag>;
     case 4:
     case 4:
-            return <Tag color='purple' size='large'> 系统 </Tag>;
+      return <Tag color="purple" size="large"> 系统 </Tag>;
     default:
     default:
-            return <Tag color='black' size='large'> 未知 </Tag>;
+      return <Tag color="black" size="large"> 未知 </Tag>;
   }
   }
 }
 }
 
 
 function renderIsStream(bool) {
 function renderIsStream(bool) {
   if (bool) {
   if (bool) {
-        return <Tag color='blue' size='large'>流</Tag>;
+    return <Tag color="blue" size="large">流</Tag>;
   } else {
   } else {
-        return <Tag color='purple' size='large'>非流</Tag>;
+    return <Tag color="purple" size="large">非流</Tag>;
   }
   }
 }
 }
 
 
 function renderUseTime(type) {
 function renderUseTime(type) {
   const time = parseInt(type);
   const time = parseInt(type);
   if (time < 101) {
   if (time < 101) {
-        return <Tag color='green' size='large'> {time} s </Tag>;
+    return <Tag color="green" size="large"> {time} s </Tag>;
   } else if (time < 300) {
   } else if (time < 300) {
-        return <Tag color='orange' size='large'> {time} s </Tag>;
+    return <Tag color="orange" size="large"> {time} s </Tag>;
   } else {
   } else {
-        return <Tag color='red' size='large'> {time} s </Tag>;
+    return <Tag color="red" size="large"> {time} s </Tag>;
   }
   }
 }
 }
 
 
 const LogsTable = () => {
 const LogsTable = () => {
-    const columns = [
-        {
-            title: '时间',
-            dataIndex: 'timestamp2string',
-        },
-        {
+  const columns = [{
+    title: '时间', dataIndex: 'timestamp2string'
+  }, {
     title: '渠道',
     title: '渠道',
     dataIndex: 'channel',
     dataIndex: 'channel',
     className: isAdmin() ? 'tableShow' : 'tableHiddle',
     className: isAdmin() ? 'tableShow' : 'tableHiddle',
     render: (text, record, index) => {
     render: (text, record, index) => {
-                return (
-                    isAdminUser ?
-                        record.type === 0 || record.type === 2 ?
-                            <div>
-                                {<Tag color={colors[parseInt(text) % colors.length]} size='large'> {text} </Tag>}
-                            </div>
-                            :
-                            <></>
-                        :
-                        <></>
-                );
-            },
-        },
-        {
+      return (isAdminUser ? record.type === 0 || record.type === 2 ? <div>
+        {<Tag color={colors[parseInt(text) % colors.length]} size="large"> {text} </Tag>}
+      </div> : <></> : <></>);
+    }
+  }, {
     title: '用户',
     title: '用户',
     dataIndex: 'username',
     dataIndex: 'username',
     className: isAdmin() ? 'tableShow' : 'tableHiddle',
     className: isAdmin() ? 'tableShow' : 'tableHiddle',
     render: (text, record, index) => {
     render: (text, record, index) => {
-                return (
-                    isAdminUser ?
-                        <div>
-                            <Avatar size="small" color={stringToColor(text)} style={{marginRight: 4}}
+      return (isAdminUser ? <div>
+        <Avatar size="small" color={stringToColor(text)} style={{ marginRight: 4 }}
                 onClick={() => showUserInfo(record.user_id)}>
                 onClick={() => showUserInfo(record.user_id)}>
           {typeof text === 'string' && text.slice(0, 1)}
           {typeof text === 'string' && text.slice(0, 1)}
         </Avatar>
         </Avatar>
         {text}
         {text}
-                        </div>
-                        :
-                        <></>
-                );
-            },
-        },
-        {
-            title: '令牌',
-            dataIndex: 'token_name',
-            render: (text, record, index) => {
-                return (
-                    record.type === 0 || record.type === 2 ?
-                        <div>
-                            <Tag color='grey' size='large' onClick={() => {
-                                copyText(text)
+      </div> : <></>);
+    }
+  }, {
+    title: '令牌', dataIndex: 'token_name', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        <Tag color="grey" size="large" onClick={() => {
+          copyText(text);
         }}> {text} </Tag>
         }}> {text} </Tag>
-                        </div>
-                        :
-                        <></>
-                );
-            },
-        },
-        {
-            title: '类型',
-            dataIndex: 'type',
-            render: (text, record, index) => {
-                return (
-                    <div>
+      </div> : <></>);
+    }
+  }, {
+    title: '类型', dataIndex: 'type', render: (text, record, index) => {
+      return (<div>
         {renderType(text)}
         {renderType(text)}
-                    </div>
-                );
-            },
-        },
-        {
-            title: '模型',
-            dataIndex: 'model_name',
-            render: (text, record, index) => {
-                return (
-                    record.type === 0 || record.type === 2 ?
-                        <div>
-                            <Tag color={stringToColor(text)} size='large' onClick={() => {
-                                copyText(text)
+      </div>);
+    }
+  }, {
+    title: '模型', dataIndex: 'model_name', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        <Tag color={stringToColor(text)} size="large" onClick={() => {
+          copyText(text);
         }}> {text} </Tag>
         }}> {text} </Tag>
-                        </div>
-                        :
-                        <></>
-                );
-            },
-        },
-        {
-            title: '用时',
-            dataIndex: 'use_time',
-            render: (text, record, index) => {
-                return (
-                    <div>
+      </div> : <></>);
+    }
+  }, {
+    title: '用时', dataIndex: 'use_time', render: (text, record, index) => {
+      return (<div>
         <Space>
         <Space>
           {renderUseTime(text)}
           {renderUseTime(text)}
           {renderIsStream(record.is_stream)}
           {renderIsStream(record.is_stream)}
         </Space>
         </Space>
-                    </div>
-                );
-            },
-        },
-        {
-            title: '提示',
-            dataIndex: 'prompt_tokens',
-            render: (text, record, index) => {
-                return (
-                    record.type === 0 || record.type === 2 ?
-                        <div>
+      </div>);
+    }
+  }, {
+    title: '提示', dataIndex: 'prompt_tokens', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
         {<span> {text} </span>}
         {<span> {text} </span>}
-                        </div>
-                        :
-                        <></>
-                );
-            },
-        },
-        {
-            title: '补全',
-            dataIndex: 'completion_tokens',
-            render: (text, record, index) => {
-                return (
-                    parseInt(text) > 0 && (record.type === 0 || record.type === 2) ?
-                        <div>
+      </div> : <></>);
+    }
+  }, {
+    title: '补全', dataIndex: 'completion_tokens', render: (text, record, index) => {
+      return (parseInt(text) > 0 && (record.type === 0 || record.type === 2) ? <div>
         {<span> {text} </span>}
         {<span> {text} </span>}
-                        </div>
-                        :
-                        <></>
-                );
-            },
-        },
-        {
-            title: '花费',
-            dataIndex: 'quota',
-            render: (text, record, index) => {
-                return (
-                    record.type === 0 || record.type === 2 ?
-                        <div>
-                            {
-                                renderQuota(text, 6)
+      </div> : <></>);
     }
     }
-                        </div>
-                        :
-                        <></>
-                );
+  }, {
+    title: '花费', dataIndex: 'quota', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        {renderQuota(text, 6)}
+      </div> : <></>);
     }
     }
-        },
-        {
-            title: '详情',
-            dataIndex: 'content',
-            render: (text, record, index) => {
-                return <Paragraph ellipsis={{rows: 2, showTooltip: {type: 'popover', opts: {style: {width: 240}}}}}
-                                  style={{maxWidth: 240}}>
+  }, {
+    title: '详情', dataIndex: 'content', render: (text, record, index) => {
+      return <Paragraph ellipsis={{ rows: 2, showTooltip: { type: 'popover', opts: { style: { width: 240 } } } }}
+                        style={{ maxWidth: 240 }}>
         {text}
         {text}
-                </Paragraph>
+      </Paragraph>;
     }
     }
-        }
-    ];
+  }];
 
 
   const [logs, setLogs] = useState([]);
   const [logs, setLogs] = useState([]);
   const [showStat, setShowStat] = useState(false);
   const [showStat, setShowStat] = useState(false);
@@ -237,22 +156,21 @@ const LogsTable = () => {
     end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
     end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
     channel: ''
     channel: ''
   });
   });
-    const {username, token_name, model_name, start_timestamp, end_timestamp, channel} = inputs;
+  const { username, token_name, model_name, start_timestamp, end_timestamp, channel } = inputs;
 
 
   const [stat, setStat] = useState({
   const [stat, setStat] = useState({
-        quota: 0,
-        token: 0
+    quota: 0, token: 0
   });
   });
 
 
   const handleInputChange = (value, name) => {
   const handleInputChange = (value, name) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   };
 
 
   const getLogSelfStat = async () => {
   const getLogSelfStat = async () => {
     let localStartTimestamp = Date.parse(start_timestamp) / 1000;
     let localStartTimestamp = Date.parse(start_timestamp) / 1000;
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let res = await API.get(`/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`);
     let res = await API.get(`/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setStat(data);
       setStat(data);
     } else {
     } else {
@@ -264,7 +182,7 @@ const LogsTable = () => {
     let localStartTimestamp = Date.parse(start_timestamp) / 1000;
     let localStartTimestamp = Date.parse(start_timestamp) / 1000;
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let res = await API.get(`/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`);
     let res = await API.get(`/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setStat(data);
       setStat(data);
     } else {
     } else {
@@ -288,18 +206,16 @@ const LogsTable = () => {
       return;
       return;
     }
     }
     const res = await API.get(`/api/user/${userId}`);
     const res = await API.get(`/api/user/${userId}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       Modal.info({
       Modal.info({
-                title: '用户信息',
-                content: <div style={{padding: 12}}>
+        title: '用户信息', content: <div style={{ padding: 12 }}>
           <p>用户名: {data.username}</p>
           <p>用户名: {data.username}</p>
           <p>余额: {renderQuota(data.quota)}</p>
           <p>余额: {renderQuota(data.quota)}</p>
           <p>已用额度：{renderQuota(data.used_quota)}</p>
           <p>已用额度：{renderQuota(data.used_quota)}</p>
           <p>请求次数：{renderNumber(data.request_count)}</p>
           <p>请求次数：{renderNumber(data.request_count)}</p>
-                </div>,
-                centered: true,
-            })
+        </div>, centered: true
+      });
     } else {
     } else {
       showError(message);
       showError(message);
     }
     }
@@ -314,9 +230,9 @@ const LogsTable = () => {
     setLogs(logs);
     setLogs(logs);
     setLogCount(logs.length + ITEMS_PER_PAGE);
     setLogCount(logs.length + ITEMS_PER_PAGE);
     // console.log(logCount);
     // console.log(logCount);
-    }
+  };
 
 
-    const loadLogs = async (startIdx, pageSize) => {
+  const loadLogs = async (startIdx, pageSize, logType = 0) => {
     setLoading(true);
     setLoading(true);
 
 
     let url = '';
     let url = '';
@@ -328,7 +244,7 @@ const LogsTable = () => {
       url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
       url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     }
     }
     const res = await API.get(url);
     const res = await API.get(url);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (startIdx === 0) {
       if (startIdx === 0) {
         setLogsFormat(data);
         setLogsFormat(data);
@@ -355,20 +271,20 @@ const LogsTable = () => {
   };
   };
 
 
   const handlePageSizeChange = async (size) => {
   const handlePageSizeChange = async (size) => {
-        localStorage.setItem('page-size', size + '')
-        setPageSize(size)
-        setActivePage(1)
+    localStorage.setItem('page-size', size + '');
+    setPageSize(size);
+    setActivePage(1);
     loadLogs(0, size)
     loadLogs(0, size)
       .then()
       .then()
       .catch((reason) => {
       .catch((reason) => {
         showError(reason);
         showError(reason);
-            })
+      });
   };
   };
 
 
-    const refresh = async () => {
+  const refresh = async (localLogType) => {
     // setLoading(true);
     // setLoading(true);
     setActivePage(1);
     setActivePage(1);
-        await loadLogs(0, pageSize);
+    await loadLogs(0, pageSize, localLogType);
   };
   };
 
 
   const copyText = async (text) => {
   const copyText = async (text) => {
@@ -376,18 +292,14 @@ const LogsTable = () => {
       showSuccess('已复制：' + text);
       showSuccess('已复制：' + text);
     } else {
     } else {
       // setSearchKeyword(text);
       // setSearchKeyword(text);
-            Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
-        }
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
     }
-
-    // useEffect(() => {
-    //     refresh().then();
-    // }, [logType]);
+  };
 
 
   useEffect(() => {
   useEffect(() => {
     // console.log('default effect')
     // console.log('default effect')
     const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
     const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
-        setPageSize(localPageSize)
+    setPageSize(localPageSize);
     loadLogs(0, localPageSize)
     loadLogs(0, localPageSize)
       .then()
       .then()
       .catch((reason) => {
       .catch((reason) => {
@@ -404,7 +316,7 @@ const LogsTable = () => {
     }
     }
     setSearching(true);
     setSearching(true);
     const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
     const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setLogs(data);
       setLogs(data);
       setActivePage(1);
       setActivePage(1);
@@ -414,71 +326,66 @@ const LogsTable = () => {
     setSearching(false);
     setSearching(false);
   };
   };
 
 
-    return (
-        <>
+  return (<>
     <Layout>
     <Layout>
       <Header>
       <Header>
         <Spin spinning={loadingStat}>
         <Spin spinning={loadingStat}>
           <h3>使用明细（总消耗额度：
           <h3>使用明细（总消耗额度：
             <span onClick={handleEyeClick} style={{
             <span onClick={handleEyeClick} style={{
-                                cursor: 'pointer',
-                                color: 'gray'
-                            }}>{showStat ? renderQuota(stat.quota) : "点击查看"}</span>
+              cursor: 'pointer', color: 'gray'
+            }}>{showStat ? renderQuota(stat.quota) : '点击查看'}</span>
             ）
             ）
           </h3>
           </h3>
         </Spin>
         </Spin>
       </Header>
       </Header>
-                <Form layout='horizontal' style={{marginTop: 10}}>
+      <Form layout="horizontal" style={{ marginTop: 10 }}>
         <>
         <>
-                        <Form.Input field="token_name" label='令牌名称' style={{width: 176}} value={token_name}
-                                    placeholder={'可选值'} name='token_name'
-                                    onChange={value => handleInputChange(value, 'token_name')}/>
-                        <Form.Input field="model_name" label='模型名称' style={{width: 176}} value={model_name}
-                                    placeholder='可选值'
-                                    name='model_name'
-                                    onChange={value => handleInputChange(value, 'model_name')}/>
-                        <Form.DatePicker field="start_timestamp" label='起始时间' style={{width: 272}}
+          <Form.Input field="token_name" label="令牌名称" style={{ width: 176 }} value={token_name}
+                      placeholder={'可选值'} name="token_name"
+                      onChange={value => handleInputChange(value, 'token_name')} />
+          <Form.Input field="model_name" label="模型名称" style={{ width: 176 }} value={model_name}
+                      placeholder="可选值"
+                      name="model_name"
+                      onChange={value => handleInputChange(value, 'model_name')} />
+          <Form.DatePicker field="start_timestamp" label="起始时间" style={{ width: 272 }}
                            initValue={start_timestamp}
                            initValue={start_timestamp}
-                                         value={start_timestamp} type='dateTime'
-                                         name='start_timestamp'
-                                         onChange={value => handleInputChange(value, 'start_timestamp')}/>
-                        <Form.DatePicker field="end_timestamp" fluid label='结束时间' style={{width: 272}}
+                           value={start_timestamp} type="dateTime"
+                           name="start_timestamp"
+                           onChange={value => handleInputChange(value, 'start_timestamp')} />
+          <Form.DatePicker field="end_timestamp" fluid label="结束时间" style={{ width: 272 }}
                            initValue={end_timestamp}
                            initValue={end_timestamp}
-                                         value={end_timestamp} type='dateTime'
-                                         name='end_timestamp'
-                                         onChange={value => handleInputChange(value, 'end_timestamp')}/>
-                        {
-                            isAdminUser && <>
-                                <Form.Input field="channel" label='渠道 ID' style={{width: 176}} value={channel}
-                                            placeholder='可选值' name='channel'
-                                            onChange={value => handleInputChange(value, 'channel')}/>
-                                <Form.Input field="username" label='用户名称' style={{width: 176}} value={username}
-                                            placeholder={'可选值'} name='username'
-                                            onChange={value => handleInputChange(value, 'username')}/>
-                            </>
-                        }
+                           value={end_timestamp} type="dateTime"
+                           name="end_timestamp"
+                           onChange={value => handleInputChange(value, 'end_timestamp')} />
+          {isAdminUser && <>
+            <Form.Input field="channel" label="渠道 ID" style={{ width: 176 }} value={channel}
+                        placeholder="可选值" name="channel"
+                        onChange={value => handleInputChange(value, 'channel')} />
+            <Form.Input field="username" label="用户名称" style={{ width: 176 }} value={username}
+                        placeholder={'可选值'} name="username"
+                        onChange={value => handleInputChange(value, 'username')} />
+          </>}
           <Form.Section>
           <Form.Section>
-                            <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
+            <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
                     onClick={refresh} loading={loading}>查询</Button>
                     onClick={refresh} loading={loading}>查询</Button>
           </Form.Section>
           </Form.Section>
         </>
         </>
       </Form>
       </Form>
-                <Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{
+      <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
         currentPage: activePage,
         currentPage: activePage,
         pageSize: pageSize,
         pageSize: pageSize,
         total: logCount,
         total: logCount,
         pageSizeOpts: [10, 20, 50, 100],
         pageSizeOpts: [10, 20, 50, 100],
         showSizeChanger: true,
         showSizeChanger: true,
         onPageSizeChange: (size) => {
         onPageSizeChange: (size) => {
-                        handlePageSizeChange(size).then()
+          handlePageSizeChange(size).then();
         },
         },
-                    onPageChange: handlePageChange,
-                }}/>
-                <Select defaultValue="0" style={{width: 120}} onChange={
-                    (value) => {
+        onPageChange: handlePageChange
+      }} />
+      <Select defaultValue="0" style={{ width: 120 }} onChange={(value) => {
         setLogType(parseInt(value));
         setLogType(parseInt(value));
-                    }
-                }>
+        refresh(parseInt(value)).then();
+      }}>
         <Select.Option value="0">全部</Select.Option>
         <Select.Option value="0">全部</Select.Option>
         <Select.Option value="1">充值</Select.Option>
         <Select.Option value="1">充值</Select.Option>
         <Select.Option value="2">消费</Select.Option>
         <Select.Option value="2">消费</Select.Option>
@@ -486,8 +393,7 @@ const LogsTable = () => {
         <Select.Option value="4">系统</Select.Option>
         <Select.Option value="4">系统</Select.Option>
       </Select>
       </Select>
     </Layout>
     </Layout>
-        </>
-    );
+  </>);
 };
 };
 
 
 export default LogsTable;
 export default LogsTable;

web/src/components/MjLogsTable.js

-import React, {useEffect, useState} from 'react';
-import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers';
-
-import {
-    Table,
-    Avatar,
-    Tag,
-    Form,
-    Button,
-    Layout,
-    Select,
-    Popover,
-    Modal,
-    ImagePreview,
-    Typography, Progress
-} from '@douyinfe/semi-ui';
-import {ITEMS_PER_PAGE} from '../constants';
-import {renderNumber, renderQuota, stringToColor} from '../helpers/render';
+import React, { useEffect, useState } from 'react';
+import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
+
+import { Button, Form, ImagePreview, Layout, Modal, Progress, Table, Tag, Typography } from '@douyinfe/semi-ui';
+import { ITEMS_PER_PAGE } from '../constants';
 
 
 
 
 const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
 const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
   'light-blue', 'lime', 'orange', 'pink',
   'light-blue', 'lime', 'orange', 'pink',
   'purple', 'red', 'teal', 'violet', 'yellow'
   'purple', 'red', 'teal', 'violet', 'yellow'
-]
+];
 
 
 function renderType(type) {
 function renderType(type) {
   switch (type) {
   switch (type) {
     case 'IMAGINE':
     case 'IMAGINE':
-            return <Tag color="blue" size='large'>绘图</Tag>;
+      return <Tag color="blue" size="large">绘图</Tag>;
     case 'UPSCALE':
     case 'UPSCALE':
-            return <Tag color="orange" size='large'>放大</Tag>;
+      return <Tag color="orange" size="large">放大</Tag>;
     case 'VARIATION':
     case 'VARIATION':
-            return <Tag color="purple" size='large'>变换</Tag>;
+      return <Tag color="purple" size="large">变换</Tag>;
     case 'HIGH_VARIATION':
     case 'HIGH_VARIATION':
-            return <Tag color="purple" size='large'>强变换</Tag>;
+      return <Tag color="purple" size="large">强变换</Tag>;
     case 'LOW_VARIATION':
     case 'LOW_VARIATION':
-            return <Tag color="purple" size='large'>弱变换</Tag>;
+      return <Tag color="purple" size="large">弱变换</Tag>;
     case 'PAN':
     case 'PAN':
-            return <Tag color="cyan" size='large'>平移</Tag>;
+      return <Tag color="cyan" size="large">平移</Tag>;
     case 'DESCRIBE':
     case 'DESCRIBE':
-            return <Tag color="yellow" size='large'>图生文</Tag>;
+      return <Tag color="yellow" size="large">图生文</Tag>;
     case 'BLEND':
     case 'BLEND':
-            return <Tag color="lime" size='large'>图混合</Tag>;
+      return <Tag color="lime" size="large">图混合</Tag>;
     case 'SHORTEN':
     case 'SHORTEN':
-            return <Tag color="pink" size='large'>缩词</Tag>;
+      return <Tag color="pink" size="large">缩词</Tag>;
     case 'REROLL':
     case 'REROLL':
-            return <Tag color="indigo" size='large'>重绘</Tag>;
+      return <Tag color="indigo" size="large">重绘</Tag>;
     case 'INPAINT':
     case 'INPAINT':
-            return <Tag color="violet" size='large'>局部重绘-提交</Tag>;
+      return <Tag color="violet" size="large">局部重绘-提交</Tag>;
     case 'ZOOM':
     case 'ZOOM':
-            return <Tag color="teal" size='large'>变焦</Tag>;
+      return <Tag color="teal" size="large">变焦</Tag>;
     case 'CUSTOM_ZOOM':
     case 'CUSTOM_ZOOM':
-            return <Tag color="teal" size='large'>自定义变焦-提交</Tag>;
+      return <Tag color="teal" size="large">自定义变焦-提交</Tag>;
     case 'MODAL':
     case 'MODAL':
-            return <Tag color="green" size='large'>窗口处理</Tag>;
+      return <Tag color="green" size="large">窗口处理</Tag>;
     case 'SWAP_FACE':
     case 'SWAP_FACE':
-            return <Tag color="light-green" size='large'>换脸</Tag>;
+      return <Tag color="light-green" size="large">换脸</Tag>;
     default:
     default:
-            return <Tag color="white" size='large'>未知</Tag>;
+      return <Tag color="white" size="large">未知</Tag>;
   }
   }
 }
 }
 
 
@@ -64,15 +51,15 @@ function renderType(type) {
 function renderCode(code) {
 function renderCode(code) {
   switch (code) {
   switch (code) {
     case 1:
     case 1:
-            return <Tag color="green" size='large'>已提交</Tag>;
+      return <Tag color="green" size="large">已提交</Tag>;
     case 21:
     case 21:
-            return <Tag color="lime" size='large'>等待中</Tag>;
+      return <Tag color="lime" size="large">等待中</Tag>;
     case 22:
     case 22:
-            return <Tag color="orange" size='large'>重复提交</Tag>;
+      return <Tag color="orange" size="large">重复提交</Tag>;
     case 0:
     case 0:
-            return <Tag color="yellow" size='large'>未提交</Tag>;
+      return <Tag color="yellow" size="large">未提交</Tag>;
     default:
     default:
-            return <Tag color="white" size='large'>未知</Tag>;
+      return <Tag color="white" size="large">未知</Tag>;
   }
   }
 }
 }
 
 
@@ -81,19 +68,19 @@ function renderStatus(type) {
   // Ensure all cases are string literals by adding quotes.
   // Ensure all cases are string literals by adding quotes.
   switch (type) {
   switch (type) {
     case 'SUCCESS':
     case 'SUCCESS':
-            return <Tag color="green" size='large'>成功</Tag>;
+      return <Tag color="green" size="large">成功</Tag>;
     case 'NOT_START':
     case 'NOT_START':
-            return <Tag color="grey" size='large'>未启动</Tag>;
+      return <Tag color="grey" size="large">未启动</Tag>;
     case 'SUBMITTED':
     case 'SUBMITTED':
-            return <Tag color="yellow" size='large'>队列中</Tag>;
+      return <Tag color="yellow" size="large">队列中</Tag>;
     case 'IN_PROGRESS':
     case 'IN_PROGRESS':
-            return <Tag color="blue" size='large'>执行中</Tag>;
+      return <Tag color="blue" size="large">执行中</Tag>;
     case 'FAILURE':
     case 'FAILURE':
-            return <Tag color="red" size='large'>失败</Tag>;
+      return <Tag color="red" size="large">失败</Tag>;
     case 'MODAL':
     case 'MODAL':
-            return <Tag color="yellow" size='large'>窗口等待</Tag>;
+      return <Tag color="yellow" size="large">窗口等待</Tag>;
     default:
     default:
-            return <Tag color="white" size='large'>未知</Tag>;
+      return <Tag color="white" size="large">未知</Tag>;
   }
   }
 }
 }
 
 
@@ -124,7 +111,7 @@ const LogsTable = () => {
             {renderTimestamp(text / 1000)}
             {renderTimestamp(text / 1000)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '渠道',
       title: '渠道',
@@ -134,13 +121,13 @@ const LogsTable = () => {
         return (
         return (
 
 
           <div>
           <div>
-                        <Tag color={colors[parseInt(text) % colors.length]} size='large' onClick={() => {
+            <Tag color={colors[parseInt(text) % colors.length]} size="large" onClick={() => {
               copyText(text); // 假设copyText是用于文本复制的函数
               copyText(text); // 假设copyText是用于文本复制的函数
             }}> {text} </Tag>
             }}> {text} </Tag>
           </div>
           </div>
 
 
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '类型',
       title: '类型',
@@ -151,7 +138,7 @@ const LogsTable = () => {
             {renderType(text)}
             {renderType(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '任务ID',
       title: '任务ID',
@@ -162,7 +149,7 @@ const LogsTable = () => {
             {text}
             {text}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '提交结果',
       title: '提交结果',
@@ -174,7 +161,7 @@ const LogsTable = () => {
             {renderCode(text)}
             {renderCode(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '任务状态',
       title: '任务状态',
@@ -186,7 +173,7 @@ const LogsTable = () => {
             {renderStatus(text)}
             {renderStatus(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '进度',
       title: '进度',
@@ -196,12 +183,13 @@ const LogsTable = () => {
           <div>
           <div>
             {
             {
               // 转换例如100%为数字100，如果text未定义，返回0
               // 转换例如100%为数字100，如果text未定义，返回0
-                            <Progress stroke={record.status === "FAILURE"?"var(--semi-color-warning)":null} percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true}
-                                      aria-label="drawing progress"/>
+              <Progress stroke={record.status === 'FAILURE' ? 'var(--semi-color-warning)' : null}
+                        percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true}
+                        aria-label="drawing progress" />
             }
             }
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '结果图片',
       title: '结果图片',
@@ -233,8 +221,8 @@ const LogsTable = () => {
 
 
         return (
         return (
           <Typography.Text
           <Typography.Text
-                        ellipsis={{showTooltip: true}}
-                        style={{width: 100}}
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
             onClick={() => {
             onClick={() => {
               setModalContent(text);
               setModalContent(text);
               setIsModalOpen(true);
               setIsModalOpen(true);
@@ -256,8 +244,8 @@ const LogsTable = () => {
 
 
         return (
         return (
           <Typography.Text
           <Typography.Text
-                        ellipsis={{showTooltip: true}}
-                        style={{width: 100}}
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
             onClick={() => {
             onClick={() => {
               setModalContent(text);
               setModalContent(text);
               setIsModalOpen(true);
               setIsModalOpen(true);
@@ -279,8 +267,8 @@ const LogsTable = () => {
 
 
         return (
         return (
           <Typography.Text
           <Typography.Text
-                        ellipsis={{showTooltip: true}}
-                        style={{width: 100}}
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
             onClick={() => {
             onClick={() => {
               setModalContent(text);
               setModalContent(text);
               setIsModalOpen(true);
               setIsModalOpen(true);
@@ -310,9 +298,9 @@ const LogsTable = () => {
     channel_id: '',
     channel_id: '',
     mj_id: '',
     mj_id: '',
     start_timestamp: timestamp2string(now.getTime() / 1000 - 2592000),
     start_timestamp: timestamp2string(now.getTime() / 1000 - 2592000),
-        end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
+    end_timestamp: timestamp2string(now.getTime() / 1000 + 3600)
   });
   });
-    const {channel_id, mj_id, start_timestamp, end_timestamp} = inputs;
+  const { channel_id, mj_id, start_timestamp, end_timestamp } = inputs;
 
 
   const [stat, setStat] = useState({
   const [stat, setStat] = useState({
     quota: 0,
     quota: 0,
@@ -320,7 +308,7 @@ const LogsTable = () => {
   });
   });
 
 
   const handleInputChange = (value, name) => {
   const handleInputChange = (value, name) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   };
 
 
 
 
@@ -333,7 +321,7 @@ const LogsTable = () => {
     setLogs(logs);
     setLogs(logs);
     setLogCount(logs.length + ITEMS_PER_PAGE);
     setLogCount(logs.length + ITEMS_PER_PAGE);
     // console.log(logCount);
     // console.log(logCount);
-    }
+  };
 
 
   const loadLogs = async (startIdx) => {
   const loadLogs = async (startIdx) => {
     setLoading(true);
     setLoading(true);
@@ -347,7 +335,7 @@ const LogsTable = () => {
       url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
       url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     }
     }
     const res = await API.get(url);
     const res = await API.get(url);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (startIdx === 0) {
       if (startIdx === 0) {
         setLogsFormat(data);
         setLogsFormat(data);
@@ -384,9 +372,9 @@ const LogsTable = () => {
       showSuccess('已复制：' + text);
       showSuccess('已复制：' + text);
     } else {
     } else {
       // setSearchKeyword(text);
       // setSearchKeyword(text);
-            Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
-        }
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
     }
+  };
 
 
   useEffect(() => {
   useEffect(() => {
     refresh().then();
     refresh().then();
@@ -397,48 +385,48 @@ const LogsTable = () => {
     <>
     <>
 
 
       <Layout>
       <Layout>
-                <Form layout='horizontal' style={{marginTop: 10}}>
+        <Form layout="horizontal" style={{ marginTop: 10 }}>
           <>
           <>
-                        <Form.Input field="channel_id" label='渠道 ID' style={{width: 176}} value={channel_id}
-                                    placeholder={'可选值'} name='channel_id'
-                                    onChange={value => handleInputChange(value, 'channel_id')}/>
-                        <Form.Input field="mj_id" label='任务 ID' style={{width: 176}} value={mj_id}
-                                    placeholder='可选值'
-                                    name='mj_id'
-                                    onChange={value => handleInputChange(value, 'mj_id')}/>
-                        <Form.DatePicker field="start_timestamp" label='起始时间' style={{width: 272}}
+            <Form.Input field="channel_id" label="渠道 ID" style={{ width: 176 }} value={channel_id}
+                        placeholder={'可选值'} name="channel_id"
+                        onChange={value => handleInputChange(value, 'channel_id')} />
+            <Form.Input field="mj_id" label="任务 ID" style={{ width: 176 }} value={mj_id}
+                        placeholder="可选值"
+                        name="mj_id"
+                        onChange={value => handleInputChange(value, 'mj_id')} />
+            <Form.DatePicker field="start_timestamp" label="起始时间" style={{ width: 272 }}
                              initValue={start_timestamp}
                              initValue={start_timestamp}
-                                         value={start_timestamp} type='dateTime'
-                                         name='start_timestamp'
-                                         onChange={value => handleInputChange(value, 'start_timestamp')}/>
-                        <Form.DatePicker field="end_timestamp" fluid label='结束时间' style={{width: 272}}
+                             value={start_timestamp} type="dateTime"
+                             name="start_timestamp"
+                             onChange={value => handleInputChange(value, 'start_timestamp')} />
+            <Form.DatePicker field="end_timestamp" fluid label="结束时间" style={{ width: 272 }}
                              initValue={end_timestamp}
                              initValue={end_timestamp}
-                                         value={end_timestamp} type='dateTime'
-                                         name='end_timestamp'
-                                         onChange={value => handleInputChange(value, 'end_timestamp')}/>
+                             value={end_timestamp} type="dateTime"
+                             name="end_timestamp"
+                             onChange={value => handleInputChange(value, 'end_timestamp')} />
 
 
             <Form.Section>
             <Form.Section>
-                            <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
+              <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
                       onClick={refresh}>查询</Button>
                       onClick={refresh}>查询</Button>
             </Form.Section>
             </Form.Section>
           </>
           </>
         </Form>
         </Form>
-                <Table style={{marginTop: 5}} columns={columns} dataSource={pageData} pagination={{
+        <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
           currentPage: activePage,
           currentPage: activePage,
           pageSize: ITEMS_PER_PAGE,
           pageSize: ITEMS_PER_PAGE,
           total: logCount,
           total: logCount,
           pageSizeOpts: [10, 20, 50, 100],
           pageSizeOpts: [10, 20, 50, 100],
-                    onPageChange: handlePageChange,
-                }} loading={loading}/>
+          onPageChange: handlePageChange
+        }} loading={loading} />
         <Modal
         <Modal
           visible={isModalOpen}
           visible={isModalOpen}
           onOk={() => setIsModalOpen(false)}
           onOk={() => setIsModalOpen(false)}
           onCancel={() => setIsModalOpen(false)}
           onCancel={() => setIsModalOpen(false)}
           closable={null}
           closable={null}
-                    bodyStyle={{height: '400px', overflow: 'auto'}} // 设置模态框内容区域样式
+          bodyStyle={{ height: '400px', overflow: 'auto' }} // 设置模态框内容区域样式
           width={800} // 设置模态框宽度
           width={800} // 设置模态框宽度
         >
         >
-                    <p style={{whiteSpace: 'pre-line'}}>{modalContent}</p>
+          <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
         </Modal>
         </Modal>
         <ImagePreview
         <ImagePreview
           src={modalImageUrl}
           src={modalImageUrl}

web/src/components/OperationSetting.js

-import React, {useEffect, useState} from 'react';
-import {Divider, Form, Grid, Header} from 'semantic-ui-react';
-import {API, showError, showSuccess, timestamp2string, verifyJSON} from '../helpers';
+import React, { useEffect, useState } from 'react';
+import { Divider, Form, Grid, Header } from 'semantic-ui-react';
+import { API, showError, showSuccess, timestamp2string, verifyJSON } from '../helpers';
 
 
 const OperationSetting = () => {
 const OperationSetting = () => {
   let now = new Date();
   let now = new Date();
@@ -36,13 +36,13 @@ const OperationSetting = () => {
   let [historyTimestamp, setHistoryTimestamp] = useState(timestamp2string(now.getTime() / 1000 - 30 * 24 * 3600)); // a month ago
   let [historyTimestamp, setHistoryTimestamp] = useState(timestamp2string(now.getTime() / 1000 - 30 * 24 * 3600)); // a month ago
   // 精确时间选项（小时，天，周）
   // 精确时间选项（小时，天，周）
   const timeOptions = [
   const timeOptions = [
-        {key: 'hour', text: '小时', value: 'hour'},
-        {key: 'day', text: '天', value: 'day'},
-        {key: 'week', text: '周', value: 'week'}
+    { key: 'hour', text: '小时', value: 'hour' },
+    { key: 'day', text: '天', value: 'day' },
+    { key: 'week', text: '周', value: 'week' }
   ];
   ];
   const getOptions = async () => {
   const getOptions = async () => {
     const res = await API.get('/api/option/');
     const res = await API.get('/api/option/');
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       let newInputs = {};
       let newInputs = {};
       data.forEach((item) => {
       data.forEach((item) => {
@@ -70,28 +70,28 @@ const OperationSetting = () => {
     if (key === 'DefaultCollapseSidebar') {
     if (key === 'DefaultCollapseSidebar') {
       value = inputs[key] === 'true' ? 'false' : 'true';
       value = inputs[key] === 'true' ? 'false' : 'true';
     }
     }
-        console.log(key, value)
+    console.log(key, value);
     const res = await API.put('/api/option/', {
     const res = await API.put('/api/option/', {
       key,
       key,
       value
       value
     });
     });
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
-            setInputs((inputs) => ({...inputs, [key]: value}));
+      setInputs((inputs) => ({ ...inputs, [key]: value }));
     } else {
     } else {
       showError(message);
       showError(message);
     }
     }
     setLoading(false);
     setLoading(false);
   };
   };
 
 
-    const handleInputChange = async (e, {name, value}) => {
+  const handleInputChange = async (e, { name, value }) => {
     if (name.endsWith('Enabled') || name === 'DataExportInterval' || name === 'DataExportDefaultTime' || name === 'DefaultCollapseSidebar') {
     if (name.endsWith('Enabled') || name === 'DataExportInterval' || name === 'DataExportDefaultTime' || name === 'DefaultCollapseSidebar') {
       if (name === 'DataExportDefaultTime') {
       if (name === 'DataExportDefaultTime') {
         localStorage.setItem('data_export_default_time', value);
         localStorage.setItem('data_export_default_time', value);
       }
       }
       await updateOption(name, value);
       await updateOption(name, value);
     } else {
     } else {
-            setInputs((inputs) => ({...inputs, [name]: value}));
+      setInputs((inputs) => ({ ...inputs, [name]: value }));
     }
     }
   };
   };
 
 
@@ -165,7 +165,7 @@ const OperationSetting = () => {
   const deleteHistoryLogs = async () => {
   const deleteHistoryLogs = async () => {
     console.log(inputs);
     console.log(inputs);
     const res = await API.delete(`/api/log/?target_timestamp=${Date.parse(historyTimestamp) / 1000}`);
     const res = await API.delete(`/api/log/?target_timestamp=${Date.parse(historyTimestamp) / 1000}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       showSuccess(`${data} 条日志已清理！`);
       showSuccess(`${data} 条日志已清理！`);
       return;
       return;
@@ -176,281 +176,281 @@ const OperationSetting = () => {
     <Grid columns={1}>
     <Grid columns={1}>
       <Grid.Column>
       <Grid.Column>
         <Form loading={loading}>
         <Form loading={loading}>
-                    <Header as='h3'>
+          <Header as="h3">
             通用设置
             通用设置
           </Header>
           </Header>
           <Form.Group widths={4}>
           <Form.Group widths={4}>
             <Form.Input
             <Form.Input
-                            label='充值链接'
-                            name='TopUpLink'
+              label="充值链接"
+              name="TopUpLink"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.TopUpLink}
               value={inputs.TopUpLink}
-                            type='link'
-                            placeholder='例如发卡网站的购买链接'
+              type="link"
+              placeholder="例如发卡网站的购买链接"
             />
             />
             <Form.Input
             <Form.Input
-                            label='默认聊天页面链接'
-                            name='ChatLink'
+              label="默认聊天页面链接"
+              name="ChatLink"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.ChatLink}
               value={inputs.ChatLink}
-                            type='link'
-                            placeholder='例如 ChatGPT Next Web 的部署地址'
+              type="link"
+              placeholder="例如 ChatGPT Next Web 的部署地址"
             />
             />
             <Form.Input
             <Form.Input
-                            label='聊天页面2链接'
-                            name='ChatLink2'
+              label="聊天页面2链接"
+              name="ChatLink2"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.ChatLink2}
               value={inputs.ChatLink2}
-                            type='link'
-                            placeholder='例如 ChatGPT Web & Midjourney 的部署地址'
+              type="link"
+              placeholder="例如 ChatGPT Web & Midjourney 的部署地址"
             />
             />
             <Form.Input
             <Form.Input
-                            label='单位美元额度'
-                            name='QuotaPerUnit'
+              label="单位美元额度"
+              name="QuotaPerUnit"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.QuotaPerUnit}
               value={inputs.QuotaPerUnit}
-                            type='number'
-                            step='0.01'
-                            placeholder='一单位货币能兑换的额度'
+              type="number"
+              step="0.01"
+              placeholder="一单位货币能兑换的额度"
             />
             />
             <Form.Input
             <Form.Input
-                            label='失败重试次数'
-                            name='RetryTimes'
+              label="失败重试次数"
+              name="RetryTimes"
               type={'number'}
               type={'number'}
-                            step='1'
-                            min='0'
+              step="1"
+              min="0"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.RetryTimes}
               value={inputs.RetryTimes}
-                            placeholder='失败重试次数'
+              placeholder="失败重试次数"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.DisplayInCurrencyEnabled === 'true'}
               checked={inputs.DisplayInCurrencyEnabled === 'true'}
-                            label='以货币形式显示额度'
-                            name='DisplayInCurrencyEnabled'
+              label="以货币形式显示额度"
+              name="DisplayInCurrencyEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.DisplayTokenStatEnabled === 'true'}
               checked={inputs.DisplayTokenStatEnabled === 'true'}
-                            label='Billing 相关 API 显示令牌额度而非用户额度'
-                            name='DisplayTokenStatEnabled'
+              label="Billing 相关 API 显示令牌额度而非用户额度"
+              name="DisplayTokenStatEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.DefaultCollapseSidebar === 'true'}
               checked={inputs.DefaultCollapseSidebar === 'true'}
-                          label='默认折叠侧边栏'
-                          name='DefaultCollapseSidebar'
+              label="默认折叠侧边栏"
+              name="DefaultCollapseSidebar"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={() => {
           <Form.Button onClick={() => {
             submitConfig('general').then();
             submitConfig('general').then();
           }}>保存通用设置</Form.Button>
           }}>保存通用设置</Form.Button>
-                    <Divider/>
-                    <Header as='h3'>
+          <Divider />
+          <Header as="h3">
             绘图设置
             绘图设置
           </Header>
           </Header>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.DrawingEnabled === 'true'}
               checked={inputs.DrawingEnabled === 'true'}
-                            label='启用绘图功能'
-                            name='DrawingEnabled'
+              label="启用绘图功能"
+              name="DrawingEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.MjNotifyEnabled === 'true'}
               checked={inputs.MjNotifyEnabled === 'true'}
-                            label='允许回调（会泄露服务器ip地址）'
-                            name='MjNotifyEnabled'
+              label="允许回调（会泄露服务器ip地址）"
+              name="MjNotifyEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
-                    <Divider/>
-                    <Header as='h3'>
+          <Divider />
+          <Header as="h3">
             日志设置
             日志设置
           </Header>
           </Header>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.LogConsumeEnabled === 'true'}
               checked={inputs.LogConsumeEnabled === 'true'}
-                            label='启用额度消费日志记录'
-                            name='LogConsumeEnabled'
+              label="启用额度消费日志记录"
+              name="LogConsumeEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Group widths={4}>
           <Form.Group widths={4}>
-                        <Form.Input label='目标时间' value={historyTimestamp} type='datetime-local'
-                                    name='history_timestamp'
-                                    onChange={(e, {name, value}) => {
+            <Form.Input label="目标时间" value={historyTimestamp} type="datetime-local"
+                        name="history_timestamp"
+                        onChange={(e, { name, value }) => {
                           setHistoryTimestamp(value);
                           setHistoryTimestamp(value);
-                                    }}/>
+                        }} />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={() => {
           <Form.Button onClick={() => {
             deleteHistoryLogs().then();
             deleteHistoryLogs().then();
           }}>清理历史日志</Form.Button>
           }}>清理历史日志</Form.Button>
-                    <Divider/>
-                    <Header as='h3'>
+          <Divider />
+          <Header as="h3">
             数据看板
             数据看板
           </Header>
           </Header>
           <Form.Checkbox
           <Form.Checkbox
             checked={inputs.DataExportEnabled === 'true'}
             checked={inputs.DataExportEnabled === 'true'}
-                        label='启用数据看板（实验性）'
-                        name='DataExportEnabled'
+            label="启用数据看板（实验性）"
+            name="DataExportEnabled"
             onChange={handleInputChange}
             onChange={handleInputChange}
           />
           />
           <Form.Group>
           <Form.Group>
             <Form.Input
             <Form.Input
-                            label='数据看板更新间隔（分钟，设置过短会影响数据库性能）'
-                            name='DataExportInterval'
+              label="数据看板更新间隔（分钟，设置过短会影响数据库性能）"
+              name="DataExportInterval"
               type={'number'}
               type={'number'}
-                            step='1'
-                            min='1'
+              step="1"
+              min="1"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.DataExportInterval}
               value={inputs.DataExportInterval}
-                            placeholder='数据看板更新间隔（分钟，设置过短会影响数据库性能）'
+              placeholder="数据看板更新间隔（分钟，设置过短会影响数据库性能）"
             />
             />
             <Form.Select
             <Form.Select
-                            label='数据看板默认时间粒度（仅修改展示粒度，统计精确到小时）'
+              label="数据看板默认时间粒度（仅修改展示粒度，统计精确到小时）"
               options={timeOptions}
               options={timeOptions}
-                            name='DataExportDefaultTime'
+              name="DataExportDefaultTime"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.DataExportDefaultTime}
               value={inputs.DataExportDefaultTime}
-                            placeholder='数据看板默认时间粒度'
+              placeholder="数据看板默认时间粒度"
             />
             />
           </Form.Group>
           </Form.Group>
-                    <Divider/>
-                    <Header as='h3'>
+          <Divider />
+          <Header as="h3">
             监控设置
             监控设置
           </Header>
           </Header>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Input
             <Form.Input
-                            label='最长响应时间'
-                            name='ChannelDisableThreshold'
+              label="最长响应时间"
+              name="ChannelDisableThreshold"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.ChannelDisableThreshold}
               value={inputs.ChannelDisableThreshold}
-                            type='number'
-                            min='0'
-                            placeholder='单位秒，当运行通道全部测试时，超过此时间将自动禁用通道'
+              type="number"
+              min="0"
+              placeholder="单位秒，当运行通道全部测试时，超过此时间将自动禁用通道"
             />
             />
             <Form.Input
             <Form.Input
-                            label='额度提醒阈值'
-                            name='QuotaRemindThreshold'
+              label="额度提醒阈值"
+              name="QuotaRemindThreshold"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.QuotaRemindThreshold}
               value={inputs.QuotaRemindThreshold}
-                            type='number'
-                            min='0'
-                            placeholder='低于此额度时将发送邮件提醒用户'
+              type="number"
+              min="0"
+              placeholder="低于此额度时将发送邮件提醒用户"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.AutomaticDisableChannelEnabled === 'true'}
               checked={inputs.AutomaticDisableChannelEnabled === 'true'}
-                            label='失败时自动禁用通道'
-                            name='AutomaticDisableChannelEnabled'
+              label="失败时自动禁用通道"
+              name="AutomaticDisableChannelEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.AutomaticEnableChannelEnabled === 'true'}
               checked={inputs.AutomaticEnableChannelEnabled === 'true'}
-                            label='成功时自动启用通道'
-                            name='AutomaticEnableChannelEnabled'
+              label="成功时自动启用通道"
+              name="AutomaticEnableChannelEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={() => {
           <Form.Button onClick={() => {
             submitConfig('monitor').then();
             submitConfig('monitor').then();
           }}>保存监控设置</Form.Button>
           }}>保存监控设置</Form.Button>
-                    <Divider/>
-                    <Header as='h3'>
+          <Divider />
+          <Header as="h3">
             额度设置
             额度设置
           </Header>
           </Header>
           <Form.Group widths={4}>
           <Form.Group widths={4}>
             <Form.Input
             <Form.Input
-                            label='新用户初始额度'
-                            name='QuotaForNewUser'
+              label="新用户初始额度"
+              name="QuotaForNewUser"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.QuotaForNewUser}
               value={inputs.QuotaForNewUser}
-                            type='number'
-                            min='0'
-                            placeholder='例如：100'
+              type="number"
+              min="0"
+              placeholder="例如：100"
             />
             />
             <Form.Input
             <Form.Input
-                            label='请求预扣费额度'
-                            name='PreConsumedQuota'
+              label="请求预扣费额度"
+              name="PreConsumedQuota"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.PreConsumedQuota}
               value={inputs.PreConsumedQuota}
-                            type='number'
-                            min='0'
-                            placeholder='请求结束后多退少补'
+              type="number"
+              min="0"
+              placeholder="请求结束后多退少补"
             />
             />
             <Form.Input
             <Form.Input
-                            label='邀请新用户奖励额度'
-                            name='QuotaForInviter'
+              label="邀请新用户奖励额度"
+              name="QuotaForInviter"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.QuotaForInviter}
               value={inputs.QuotaForInviter}
-                            type='number'
-                            min='0'
-                            placeholder='例如：2000'
+              type="number"
+              min="0"
+              placeholder="例如：2000"
             />
             />
             <Form.Input
             <Form.Input
-                            label='新用户使用邀请码奖励额度'
-                            name='QuotaForInvitee'
+              label="新用户使用邀请码奖励额度"
+              name="QuotaForInvitee"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.QuotaForInvitee}
               value={inputs.QuotaForInvitee}
-                            type='number'
-                            min='0'
-                            placeholder='例如：1000'
+              type="number"
+              min="0"
+              placeholder="例如：1000"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={() => {
           <Form.Button onClick={() => {
             submitConfig('quota').then();
             submitConfig('quota').then();
           }}>保存额度设置</Form.Button>
           }}>保存额度设置</Form.Button>
-                    <Divider/>
-                    <Header as='h3'>
+          <Divider />
+          <Header as="h3">
             倍率设置
             倍率设置
           </Header>
           </Header>
-                    <Form.Group widths='equal'>
+          <Form.Group widths="equal">
             <Form.TextArea
             <Form.TextArea
-                            label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）'
-                            name='ModelPrice'
+              label="模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）"
+              name="ModelPrice"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}}
-                            autoComplete='new-password'
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete="new-password"
               value={inputs.ModelPrice}
               value={inputs.ModelPrice}
               placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
               placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
             />
             />
           </Form.Group>
           </Form.Group>
-                    <Form.Group widths='equal'>
+          <Form.Group widths="equal">
             <Form.TextArea
             <Form.TextArea
-                            label='模型倍率'
-                            name='ModelRatio'
+              label="模型倍率"
+              name="ModelRatio"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}}
-                            autoComplete='new-password'
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete="new-password"
               value={inputs.ModelRatio}
               value={inputs.ModelRatio}
-                            placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
+              placeholder="为一个 JSON 文本，键为模型名称，值为倍率"
             />
             />
           </Form.Group>
           </Form.Group>
-                    <Form.Group widths='equal'>
+          <Form.Group widths="equal">
             <Form.TextArea
             <Form.TextArea
-                            label='分组倍率'
-                            name='GroupRatio'
+              label="分组倍率"
+              name="GroupRatio"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}}
-                            autoComplete='new-password'
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete="new-password"
               value={inputs.GroupRatio}
               value={inputs.GroupRatio}
-                            placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
+              placeholder="为一个 JSON 文本，键为分组名称，值为倍率"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={() => {
           <Form.Button onClick={() => {

web/src/components/OtherSetting.js

 import React, { useEffect, useRef, useState } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { Col, Row , Form, Button, Banner } from '@douyinfe/semi-ui';
+import { Banner, Button, Col, Form, Row } from '@douyinfe/semi-ui';
 import { API, showError, showSuccess } from '../helpers';
 import { API, showError, showSuccess } from '../helpers';
 import { marked } from 'marked';
 import { marked } from 'marked';
 
 
@@ -57,8 +57,8 @@ const OtherSetting = () => {
       await updateOption('Notice', inputs.Notice);
       await updateOption('Notice', inputs.Notice);
       showSuccess('公告已更新');
       showSuccess('公告已更新');
     } catch (error) {
     } catch (error) {
-      console.error("公告更新失败", error);
-      showError("公告更新失败")
+      console.error('公告更新失败', error);
+      showError('公告更新失败');
     } finally {
     } finally {
       setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
       setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
     }
     }
@@ -72,8 +72,8 @@ const OtherSetting = () => {
       await updateOption('SystemName', inputs.SystemName);
       await updateOption('SystemName', inputs.SystemName);
       showSuccess('系统名称已更新');
       showSuccess('系统名称已更新');
     } catch (error) {
     } catch (error) {
-      console.error("系统名称更新失败", error);
-      showError("系统名称更新失败")
+      console.error('系统名称更新失败', error);
+      showError('系统名称更新失败');
     } finally {
     } finally {
       setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: false }));
       setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: false }));
     }
     }
@@ -86,8 +86,8 @@ const OtherSetting = () => {
       await updateOption('Logo', inputs.Logo);
       await updateOption('Logo', inputs.Logo);
       showSuccess('Logo 已更新');
       showSuccess('Logo 已更新');
     } catch (error) {
     } catch (error) {
-      console.error("Logo 更新失败", error);
-      showError("Logo 更新失败")
+      console.error('Logo 更新失败', error);
+      showError('Logo 更新失败');
     } finally {
     } finally {
       setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false }));
       setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false }));
     }
     }
@@ -99,8 +99,8 @@ const OtherSetting = () => {
       await updateOption(key, inputs[key]);
       await updateOption(key, inputs[key]);
       showSuccess('首页内容已更新');
       showSuccess('首页内容已更新');
     } catch (error) {
     } catch (error) {
-      console.error("首页内容更新失败", error);
-      showError("首页内容更新失败")
+      console.error('首页内容更新失败', error);
+      showError('首页内容更新失败');
     } finally {
     } finally {
       setLoadingInput((loadingInput) => ({ ...loadingInput, HomePageContent: false }));
       setLoadingInput((loadingInput) => ({ ...loadingInput, HomePageContent: false }));
     }
     }
@@ -112,8 +112,8 @@ const OtherSetting = () => {
       await updateOption('About', inputs.About);
       await updateOption('About', inputs.About);
       showSuccess('关于内容已更新');
       showSuccess('关于内容已更新');
     } catch (error) {
     } catch (error) {
-      console.error("关于内容更新失败", error);
-      showError("关于内容更新失败");
+      console.error('关于内容更新失败', error);
+      showError('关于内容更新失败');
     } finally {
     } finally {
       setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
       setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
     }
     }
@@ -125,16 +125,14 @@ const OtherSetting = () => {
       await updateOption('Footer', inputs.Footer);
       await updateOption('Footer', inputs.Footer);
       showSuccess('页脚内容已更新');
       showSuccess('页脚内容已更新');
     } catch (error) {
     } catch (error) {
-      console.error("页脚内容更新失败", error);
-      showError("页脚内容更新失败");
+      console.error('页脚内容更新失败', error);
+      showError('页脚内容更新失败');
     } finally {
     } finally {
       setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false }));
       setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false }));
     }
     }
   };
   };
 
 
 
 
-
-
   const openGitHubRelease = () => {
   const openGitHubRelease = () => {
     window.location =
     window.location =
       'https://github.com/songquanpeng/one-api/releases/latest';
       'https://github.com/songquanpeng/one-api/releases/latest';
@@ -173,16 +171,17 @@ const OtherSetting = () => {
     }
     }
   };
   };
 
 
-  useEffect( () => {
+  useEffect(() => {
     getOptions();
     getOptions();
   }, []);
   }, []);
 
 
 
 
   return (
   return (
-    <Row >
+    <Row>
       <Col span={24}>
       <Col span={24}>
         {/* 通用设置 */}
         {/* 通用设置 */}
-        <Form values={inputs} getFormApi={formAPI => formAPISettingGeneral.current = formAPI} style={{marginBottom: 15}}>
+        <Form values={inputs} getFormApi={formAPI => formAPISettingGeneral.current = formAPI}
+              style={{ marginBottom: 15 }}>
           <Form.Section text={'通用设置'}>
           <Form.Section text={'通用设置'}>
             <Form.TextArea
             <Form.TextArea
               label={'公告'}
               label={'公告'}
@@ -196,7 +195,8 @@ const OtherSetting = () => {
           </Form.Section>
           </Form.Section>
         </Form>
         </Form>
         {/* 个性化设置 */}
         {/* 个性化设置 */}
-        <Form values={inputs} getFormApi={formAPI => formAPIPersonalization.current = formAPI} style={{marginBottom: 15}}>
+        <Form values={inputs} getFormApi={formAPI => formAPIPersonalization.current = formAPI}
+              style={{ marginBottom: 15 }}>
           <Form.Section text={'个性化设置'}>
           <Form.Section text={'个性化设置'}>
             <Form.Input
             <Form.Input
               label={'系统名称'}
               label={'系统名称'}
@@ -220,7 +220,8 @@ const OtherSetting = () => {
               style={{ fontFamily: 'JetBrains Mono, Consolas' }}
               style={{ fontFamily: 'JetBrains Mono, Consolas' }}
               autosize={{ minRows: 6, maxRows: 12 }}
               autosize={{ minRows: 6, maxRows: 12 }}
             />
             />
-            <Button onClick={() => submitOption('HomePageContent')} loading={loadingInput['HomePageContent']}>设置首页内容</Button>
+            <Button onClick={() => submitOption('HomePageContent')}
+                    loading={loadingInput['HomePageContent']}>设置首页内容</Button>
             <Form.TextArea
             <Form.TextArea
               label={'关于'}
               label={'关于'}
               placeholder={'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'}
               placeholder={'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'}

web/src/components/PasswordResetConfirm.js

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
 import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
-import { API, copy, showError, showInfo, showNotice, showSuccess } from '../helpers';
+import { API, copy, showError, showNotice } from '../helpers';
 import { useSearchParams } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom';
 
 
 const PasswordResetConfirm = () => {
 const PasswordResetConfirm = () => {
   const [inputs, setInputs] = useState({
   const [inputs, setInputs] = useState({
     email: '',
     email: '',
-    token: '',
+    token: ''
   });
   });
   const { email, token } = inputs;
   const { email, token } = inputs;
 
 
@@ -23,7 +23,7 @@ const PasswordResetConfirm = () => {
     let email = searchParams.get('email');
     let email = searchParams.get('email');
     setInputs({
     setInputs({
       token,
       token,
-      email,
+      email
     });
     });
   }, []);
   }, []);
 
 
@@ -46,7 +46,7 @@ const PasswordResetConfirm = () => {
     setLoading(true);
     setLoading(true);
     const res = await API.post(`/api/user/reset`, {
     const res = await API.post(`/api/user/reset`, {
       email,
       email,
-      token,
+      token
     });
     });
     const { success, message } = res.data;
     const { success, message } = res.data;
     if (success) {
     if (success) {
@@ -61,29 +61,29 @@ const PasswordResetConfirm = () => {
   }
   }
 
 
   return (
   return (
-    <Grid textAlign='center' style={{ marginTop: '48px' }}>
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src='/logo.png' /> 密码重置确认
+        <Header as="h2" color="" textAlign="center">
+          <Image src="/logo.png" /> 密码重置确认
         </Header>
         </Header>
-        <Form size='large'>
+        <Form size="large">
           <Segment>
           <Segment>
             <Form.Input
             <Form.Input
               fluid
               fluid
-              icon='mail'
-              iconPosition='left'
-              placeholder='邮箱地址'
-              name='email'
+              icon="mail"
+              iconPosition="left"
+              placeholder="邮箱地址"
+              name="email"
               value={email}
               value={email}
               readOnly
               readOnly
             />
             />
             {newPassword && (
             {newPassword && (
               <Form.Input
               <Form.Input
                 fluid
                 fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='新密码'
-              name='newPassword'
+                icon="lock"
+                iconPosition="left"
+                placeholder="新密码"
+                name="newPassword"
                 value={newPassword}
                 value={newPassword}
                 readOnly
                 readOnly
                 onClick={(e) => {
                 onClick={(e) => {
@@ -94,9 +94,9 @@ const PasswordResetConfirm = () => {
               />
               />
             )}
             )}
             <Button
             <Button
-              color='green'
+              color="green"
               fluid
               fluid
-              size='large'
+              size="large"
               onClick={handleSubmit}
               onClick={handleSubmit}
               loading={loading}
               loading={loading}
               disabled={disableButton}
               disabled={disableButton}

web/src/components/PasswordResetForm.js

@@ -56,19 +56,19 @@ const PasswordResetForm = () => {
   }
   }
 
 
   return (
   return (
-    <Grid textAlign='center' style={{ marginTop: '48px' }}>
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src='/logo.png' /> 密码重置
+        <Header as="h2" color="" textAlign="center">
+          <Image src="/logo.png" /> 密码重置
         </Header>
         </Header>
-        <Form size='large'>
+        <Form size="large">
           <Segment>
           <Segment>
             <Form.Input
             <Form.Input
               fluid
               fluid
-              icon='mail'
-              iconPosition='left'
-              placeholder='邮箱地址'
-              name='email'
+              icon="mail"
+              iconPosition="left"
+              placeholder="邮箱地址"
+              name="email"
               value={email}
               value={email}
               onChange={handleChange}
               onChange={handleChange}
             />
             />
@@ -83,9 +83,9 @@ const PasswordResetForm = () => {
               <></>
               <></>
             )}
             )}
             <Button
             <Button
-              color='green'
+              color="green"
               fluid
               fluid
-              size='large'
+              size="large"
               onClick={handleSubmit}
               onClick={handleSubmit}
               loading={loading}
               loading={loading}
               disabled={disableButton}
               disabled={disableButton}

web/src/components/PersonalSetting.js

-import React, {useContext, useEffect, useState} from 'react';
-import {Link, useNavigate} from 'react-router-dom';
-import {API, copy, isRoot, showError, showInfo, showNotice, showSuccess} from '../helpers';
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { API, copy, isRoot, showError, showInfo, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
 import Turnstile from 'react-turnstile';
-import {UserContext} from '../context/User';
-import {onGitHubOAuthClicked} from './utils';
+import { UserContext } from '../context/User';
+import { onGitHubOAuthClicked } from './utils';
 import {
 import {
-    Avatar, Banner,
+  Avatar,
+  Banner,
   Button,
   Button,
   Card,
   Card,
   Descriptions,
   Descriptions,
-    Divider, Image,
-    Input, InputNumber,
+  Image,
+  Input,
+  InputNumber,
   Layout,
   Layout,
   Modal,
   Modal,
   Space,
   Space,
   Tag,
   Tag,
   Typography
   Typography
-} from "@douyinfe/semi-ui";
-import {getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor} from "../helpers/render";
-import EditToken from "../pages/Token/EditToken";
-import EditUser from "../pages/User/EditUser";
-import passwordResetConfirm from "./PasswordResetConfirm";
+} from '@douyinfe/semi-ui';
+import { getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor } from '../helpers/render';
 import TelegramLoginButton from 'react-telegram-login';
 import TelegramLoginButton from 'react-telegram-login';
 
 
 const PersonalSetting = () => {
 const PersonalSetting = () => {
@@ -33,7 +32,7 @@ const PersonalSetting = () => {
     email: '',
     email: '',
     self_account_deletion_confirmation: '',
     self_account_deletion_confirmation: '',
     set_new_password: '',
     set_new_password: '',
-        set_new_password_confirmation: '',
+    set_new_password_confirmation: ''
   });
   });
   const [status, setStatus] = useState({});
   const [status, setStatus] = useState({});
   const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
   const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
@@ -46,8 +45,8 @@ const PersonalSetting = () => {
   const [loading, setLoading] = useState(false);
   const [loading, setLoading] = useState(false);
   const [disableButton, setDisableButton] = useState(false);
   const [disableButton, setDisableButton] = useState(false);
   const [countdown, setCountdown] = useState(30);
   const [countdown, setCountdown] = useState(30);
-    const [affLink, setAffLink] = useState("");
-    const [systemToken, setSystemToken] = useState("");
+  const [affLink, setAffLink] = useState('');
+  const [systemToken, setSystemToken] = useState('');
   const [models, setModels] = useState([]);
   const [models, setModels] = useState([]);
   const [openTransfer, setOpenTransfer] = useState(false);
   const [openTransfer, setOpenTransfer] = useState(false);
   const [transferAmount, setTransferAmount] = useState(0);
   const [transferAmount, setTransferAmount] = useState(0);
@@ -70,12 +69,12 @@ const PersonalSetting = () => {
     }
     }
     getUserData().then(
     getUserData().then(
       (res) => {
       (res) => {
-                console.log(userState)
+        console.log(userState);
       }
       }
     );
     );
     loadModels().then();
     loadModels().then();
     getAffLink().then();
     getAffLink().then();
-        setTransferAmount(getQuotaPerUnit())
+    setTransferAmount(getQuotaPerUnit());
   }, []);
   }, []);
 
 
   useEffect(() => {
   useEffect(() => {
@@ -92,12 +91,12 @@ const PersonalSetting = () => {
   }, [disableButton, countdown]);
   }, [disableButton, countdown]);
 
 
   const handleInputChange = (name, value) => {
   const handleInputChange = (name, value) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   };
 
 
   const generateAccessToken = async () => {
   const generateAccessToken = async () => {
     const res = await API.get('/api/user/token');
     const res = await API.get('/api/user/token');
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setSystemToken(data);
       setSystemToken(data);
       await copy(data);
       await copy(data);
@@ -109,7 +108,7 @@ const PersonalSetting = () => {
 
 
   const getAffLink = async () => {
   const getAffLink = async () => {
     const res = await API.get('/api/user/aff');
     const res = await API.get('/api/user/aff');
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       let link = `${window.location.origin}/register?aff=${data}`;
       let link = `${window.location.origin}/register?aff=${data}`;
       setAffLink(link);
       setAffLink(link);
@@ -120,24 +119,24 @@ const PersonalSetting = () => {
 
 
   const getUserData = async () => {
   const getUserData = async () => {
     let res = await API.get(`/api/user/self`);
     let res = await API.get(`/api/user/self`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
-            userDispatch({type: 'login', payload: data});
+      userDispatch({ type: 'login', payload: data });
     } else {
     } else {
       showError(message);
       showError(message);
     }
     }
-    }
+  };
 
 
   const loadModels = async () => {
   const loadModels = async () => {
     let res = await API.get(`/api/user/models`);
     let res = await API.get(`/api/user/models`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setModels(data);
       setModels(data);
-            console.log(data)
+      console.log(data);
     } else {
     } else {
       showError(message);
       showError(message);
     }
     }
-    }
+  };
 
 
   const handleAffLinkClick = async (e) => {
   const handleAffLinkClick = async (e) => {
     e.target.select();
     e.target.select();
@@ -158,12 +157,12 @@ const PersonalSetting = () => {
     }
     }
 
 
     const res = await API.delete('/api/user/self');
     const res = await API.delete('/api/user/self');
-        const {success, message} = res.data;
+    const { success, message } = res.data;
 
 
     if (success) {
     if (success) {
       showSuccess('账户已删除！');
       showSuccess('账户已删除！');
       await API.get('/api/user/logout');
       await API.get('/api/user/logout');
-            userDispatch({type: 'logout'});
+      userDispatch({ type: 'logout' });
       localStorage.removeItem('user');
       localStorage.removeItem('user');
       navigate('/login');
       navigate('/login');
     } else {
     } else {
@@ -176,7 +175,7 @@ const PersonalSetting = () => {
     const res = await API.get(
     const res = await API.get(
       `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
       `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
     );
     );
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('微信账户绑定成功！');
       showSuccess('微信账户绑定成功！');
       setShowWeChatBindModal(false);
       setShowWeChatBindModal(false);
@@ -196,7 +195,7 @@ const PersonalSetting = () => {
         password: inputs.set_new_password
         password: inputs.set_new_password
       }
       }
     );
     );
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('密码修改成功！');
       showSuccess('密码修改成功！');
       setShowWeChatBindModal(false);
       setShowWeChatBindModal(false);
@@ -217,7 +216,7 @@ const PersonalSetting = () => {
         quota: transferAmount
         quota: transferAmount
       }
       }
     );
     );
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess(message);
       showSuccess(message);
       setOpenTransfer(false);
       setOpenTransfer(false);
@@ -241,7 +240,7 @@ const PersonalSetting = () => {
     const res = await API.get(
     const res = await API.get(
       `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
       `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
     );
     );
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('验证码发送成功，请检查邮箱！');
       showSuccess('验证码发送成功，请检查邮箱！');
     } else {
     } else {
@@ -259,7 +258,7 @@ const PersonalSetting = () => {
     const res = await API.get(
     const res = await API.get(
       `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`
       `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`
     );
     );
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('邮箱账户绑定成功！');
       showSuccess('邮箱账户绑定成功！');
       setShowEmailBindModal(false);
       setShowEmailBindModal(false);
@@ -276,20 +275,20 @@ const PersonalSetting = () => {
     } else {
     } else {
       return 'null';
       return 'null';
     }
     }
-    }
+  };
 
 
   const handleCancel = () => {
   const handleCancel = () => {
     setOpenTransfer(false);
     setOpenTransfer(false);
-    }
+  };
 
 
   const copyText = async (text) => {
   const copyText = async (text) => {
     if (await copy(text)) {
     if (await copy(text)) {
       showSuccess('已复制：' + text);
       showSuccess('已复制：' + text);
     } else {
     } else {
       // setSearchKeyword(text);
       // setSearchKeyword(text);
-            Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
-        }
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
     }
+  };
 
 
   return (
   return (
     <div>
     <div>
@@ -304,27 +303,28 @@ const PersonalSetting = () => {
             size={'small'}
             size={'small'}
             centered={true}
             centered={true}
           >
           >
-                        <div style={{marginTop: 20}}>
+            <div style={{ marginTop: 20 }}>
               <Typography.Text>{`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`}</Typography.Text>
               <Typography.Text>{`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`}</Typography.Text>
-                            <Input style={{marginTop: 5}} value={userState?.user?.aff_quota} disabled={true}></Input>
+              <Input style={{ marginTop: 5 }} value={userState?.user?.aff_quota} disabled={true}></Input>
             </div>
             </div>
-                        <div style={{marginTop: 20}}>
+            <div style={{ marginTop: 20 }}>
               <Typography.Text>{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + renderQuota(getQuotaPerUnit())}</Typography.Text>
               <Typography.Text>{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + renderQuota(getQuotaPerUnit())}</Typography.Text>
               <div>
               <div>
-                                <InputNumber min={0} style={{marginTop: 5}} value={transferAmount} onChange={(value)=>setTransferAmount(value)} disabled={false}></InputNumber>
+                <InputNumber min={0} style={{ marginTop: 5 }} value={transferAmount}
+                             onChange={(value) => setTransferAmount(value)} disabled={false}></InputNumber>
               </div>
               </div>
             </div>
             </div>
           </Modal>
           </Modal>
-                    <div style={{marginTop: 20}}>
+          <div style={{ marginTop: 20 }}>
             <Card
             <Card
               title={
               title={
                 <Card.Meta
                 <Card.Meta
                   avatar={<Avatar size="default" color={stringToColor(getUsername())}
                   avatar={<Avatar size="default" color={stringToColor(getUsername())}
-                                                    style={{marginRight: 4}}>
+                                  style={{ marginRight: 4 }}>
                     {typeof getUsername() === 'string' && getUsername().slice(0, 1)}
                     {typeof getUsername() === 'string' && getUsername().slice(0, 1)}
                   </Avatar>}
                   </Avatar>}
                   title={<Typography.Text>{getUsername()}</Typography.Text>}
                   title={<Typography.Text>{getUsername()}</Typography.Text>}
-                                    description={isRoot()?<Tag color="red">管理员</Tag>:<Tag color="blue">普通用户</Tag>}
+                  description={isRoot() ? <Tag color="red">管理员</Tag> : <Tag color="blue">普通用户</Tag>}
                 ></Card.Meta>
                 ></Card.Meta>
               }
               }
               headerExtraContent={
               headerExtraContent={
@@ -344,11 +344,11 @@ const PersonalSetting = () => {
               }
               }
             >
             >
               <Typography.Title heading={6}>可用模型</Typography.Title>
               <Typography.Title heading={6}>可用模型</Typography.Title>
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Space wrap>
                 <Space wrap>
                   {models.map((model) => (
                   {models.map((model) => (
                     <Tag key={model} color="cyan" onClick={() => {
                     <Tag key={model} color="cyan" onClick={() => {
-                                            copyText(model)
+                      copyText(model);
                     }}>
                     }}>
                       {model}
                       {model}
                     </Tag>
                     </Tag>
@@ -362,7 +362,7 @@ const PersonalSetting = () => {
                 <div>
                 <div>
                   <Typography.Text>邀请链接</Typography.Text>
                   <Typography.Text>邀请链接</Typography.Text>
                   <Input
                   <Input
-                                        style={{marginTop: 10}}
+                    style={{ marginTop: 10 }}
                     value={affLink}
                     value={affLink}
                     onClick={handleAffLinkClick}
                     onClick={handleAffLinkClick}
                     readOnly
                     readOnly
@@ -371,99 +371,106 @@ const PersonalSetting = () => {
               }
               }
             >
             >
               <Typography.Title heading={6}>邀请信息</Typography.Title>
               <Typography.Title heading={6}>邀请信息</Typography.Title>
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Descriptions row>
                 <Descriptions row>
                   <Descriptions.Item itemKey="待使用收益">
                   <Descriptions.Item itemKey="待使用收益">
-                                        <span style={{color: 'rgba(var(--semi-red-5), 1)'}}>
+                                        <span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
                                             {
                                             {
                                               renderQuota(userState?.user?.aff_quota)
                                               renderQuota(userState?.user?.aff_quota)
                                             }
                                             }
                                         </span>
                                         </span>
-                                        <Button type={'secondary'} onClick={()=>setOpenTransfer(true)} size={'small'} style={{marginLeft: 10}}>划转</Button>
+                    <Button type={'secondary'} onClick={() => setOpenTransfer(true)} size={'small'}
+                            style={{ marginLeft: 10 }}>划转</Button>
                   </Descriptions.Item>
                   </Descriptions.Item>
-                                    <Descriptions.Item itemKey="总收益">{renderQuota(userState?.user?.aff_history_quota)}</Descriptions.Item>
+                  <Descriptions.Item
+                    itemKey="总收益">{renderQuota(userState?.user?.aff_history_quota)}</Descriptions.Item>
                   <Descriptions.Item itemKey="邀请人数">{userState?.user?.aff_count}</Descriptions.Item>
                   <Descriptions.Item itemKey="邀请人数">{userState?.user?.aff_count}</Descriptions.Item>
                 </Descriptions>
                 </Descriptions>
               </div>
               </div>
             </Card>
             </Card>
             <Card>
             <Card>
               <Typography.Title heading={6}>个人信息</Typography.Title>
               <Typography.Title heading={6}>个人信息</Typography.Title>
-                            <div style={{marginTop: 20}}>
+              <div style={{ marginTop: 20 }}>
                 <Typography.Text strong>邮箱</Typography.Text>
                 <Typography.Text strong>邮箱</Typography.Text>
-                                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                   <div>
                   <div>
                     <Input
                     <Input
-                                            value={userState.user && userState.user.email !== ''?userState.user.email:'未绑定'}
+                      value={userState.user && userState.user.email !== '' ? userState.user.email : '未绑定'}
                       readonly={true}
                       readonly={true}
                     ></Input>
                     ></Input>
                   </div>
                   </div>
                   <div>
                   <div>
-                                        <Button onClick={()=>{setShowEmailBindModal(true)}}>{
-                                            userState.user && userState.user.email !== ''?'修改绑定':'绑定邮箱'
+                    <Button onClick={() => {
+                      setShowEmailBindModal(true);
+                    }}>{
+                      userState.user && userState.user.email !== '' ? '修改绑定' : '绑定邮箱'
                     }</Button>
                     }</Button>
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Typography.Text strong>微信</Typography.Text>
                 <Typography.Text strong>微信</Typography.Text>
-                                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                   <div>
                   <div>
                     <Input
                     <Input
-                                            value={userState.user && userState.user.wechat_id !== ''?'已绑定':'未绑定'}
+                      value={userState.user && userState.user.wechat_id !== '' ? '已绑定' : '未绑定'}
                       readonly={true}
                       readonly={true}
                     ></Input>
                     ></Input>
                   </div>
                   </div>
                   <div>
                   <div>
                     <Button disabled={(userState.user && userState.user.wechat_id !== '') || !status.wechat_login}>
                     <Button disabled={(userState.user && userState.user.wechat_id !== '') || !status.wechat_login}>
                       {
                       {
-                                                status.wechat_login?'绑定':'未启用'
+                        status.wechat_login ? '绑定' : '未启用'
                       }
                       }
                     </Button>
                     </Button>
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Typography.Text strong>GitHub</Typography.Text>
                 <Typography.Text strong>GitHub</Typography.Text>
-                                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                   <div>
                   <div>
                     <Input
                     <Input
-                                            value={userState.user && userState.user.github_id !== ''?userState.user.github_id:'未绑定'}
+                      value={userState.user && userState.user.github_id !== '' ? userState.user.github_id : '未绑定'}
                       readonly={true}
                       readonly={true}
                     ></Input>
                     ></Input>
                   </div>
                   </div>
                   <div>
                   <div>
                     <Button
                     <Button
-                                            onClick={() => {onGitHubOAuthClicked(status.github_client_id)}}
+                      onClick={() => {
+                        onGitHubOAuthClicked(status.github_client_id);
+                      }}
                       disabled={(userState.user && userState.user.github_id !== '') || !status.github_oauth}
                       disabled={(userState.user && userState.user.github_id !== '') || !status.github_oauth}
                     >
                     >
                       {
                       {
-                                                status.github_oauth?'绑定':'未启用'
+                        status.github_oauth ? '绑定' : '未启用'
                       }
                       }
                     </Button>
                     </Button>
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>
 
 
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Typography.Text strong>Telegram</Typography.Text>
                 <Typography.Text strong>Telegram</Typography.Text>
-                                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                   <div>
                   <div>
                     <Input
                     <Input
-                                            value={userState.user && userState.user.telegram_id !== ''?userState.user.telegram_id:'未绑定'}
+                      value={userState.user && userState.user.telegram_id !== '' ? userState.user.telegram_id : '未绑定'}
                       readonly={true}
                       readonly={true}
                     ></Input>
                     ></Input>
                   </div>
                   </div>
                   <div>
                   <div>
                     {status.telegram_oauth ?
                     {status.telegram_oauth ?
                       userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
                       userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
-                                            : <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind" botName={status.telegram_bot_name} />
+                        : <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind"
+                                               botName={status.telegram_bot_name} />
                       : <Button disabled={true}>未启用</Button>
                       : <Button disabled={true}>未启用</Button>
                     }
                     }
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>
 
 
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Space>
                 <Space>
                   <Button onClick={generateAccessToken}>生成系统访问令牌</Button>
                   <Button onClick={generateAccessToken}>生成系统访问令牌</Button>
                   <Button onClick={() => {
                   <Button onClick={() => {
@@ -479,7 +486,7 @@ const PersonalSetting = () => {
                     readOnly
                     readOnly
                     value={systemToken}
                     value={systemToken}
                     onClick={handleSystemTokenClick}
                     onClick={handleSystemTokenClick}
-                                        style={{marginTop: '10px'}}
+                    style={{ marginTop: '10px' }}
                   />
                   />
                 )}
                 )}
                 {
                 {
@@ -499,19 +506,19 @@ const PersonalSetting = () => {
                   visible={showWeChatBindModal}
                   visible={showWeChatBindModal}
                   size={'mini'}
                   size={'mini'}
                 >
                 >
-                                    <Image src={status.wechat_qrcode}/>
-                                    <div style={{textAlign: 'center'}}>
+                  <Image src={status.wechat_qrcode} />
+                  <div style={{ textAlign: 'center' }}>
                     <p>
                     <p>
                       微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                       微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                     </p>
                     </p>
                   </div>
                   </div>
                   <Input
                   <Input
-                                        placeholder='验证码'
-                                        name='wechat_verification_code'
+                    placeholder="验证码"
+                    name="wechat_verification_code"
                     value={inputs.wechat_verification_code}
                     value={inputs.wechat_verification_code}
-                                        onChange={(v)=>handleInputChange('wechat_verification_code', v)}
+                    onChange={(v) => handleInputChange('wechat_verification_code', v)}
                   />
                   />
-                                    <Button color='' fluid size='large' onClick={bindWeChat}>
+                  <Button color="" fluid size="large" onClick={bindWeChat}>
                     绑定
                     绑定
                   </Button>
                   </Button>
                 </Modal>
                 </Modal>
@@ -527,26 +534,26 @@ const PersonalSetting = () => {
               maskClosable={false}
               maskClosable={false}
             >
             >
               <Typography.Title heading={6}>绑定邮箱地址</Typography.Title>
               <Typography.Title heading={6}>绑定邮箱地址</Typography.Title>
-                            <div style={{marginTop: 20, display: 'flex', justifyContent: 'space-between'}}>
+              <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
                 <Input
                 <Input
                   fluid
                   fluid
-                                    placeholder='输入邮箱地址'
-                                    onChange={(value)=>handleInputChange('email', value)}
-                                    name='email'
-                                    type='email'
+                  placeholder="输入邮箱地址"
+                  onChange={(value) => handleInputChange('email', value)}
+                  name="email"
+                  type="email"
                 />
                 />
                 <Button onClick={sendVerificationCode}
                 <Button onClick={sendVerificationCode}
                         disabled={disableButton || loading}>
                         disabled={disableButton || loading}>
                   {disableButton ? `重新发送(${countdown})` : '获取验证码'}
                   {disableButton ? `重新发送(${countdown})` : '获取验证码'}
                 </Button>
                 </Button>
               </div>
               </div>
-                            <div style={{marginTop: 10}}>
+              <div style={{ marginTop: 10 }}>
                 <Input
                 <Input
                   fluid
                   fluid
-                                    placeholder='验证码'
-                                    name='email_verification_code'
+                  placeholder="验证码"
+                  name="email_verification_code"
                   value={inputs.email_verification_code}
                   value={inputs.email_verification_code}
-                                    onChange={(value)=>handleInputChange('email_verification_code', value)}
+                  onChange={(value) => handleInputChange('email_verification_code', value)}
                 />
                 />
               </div>
               </div>
               {turnstileEnabled ? (
               {turnstileEnabled ? (
@@ -567,19 +574,19 @@ const PersonalSetting = () => {
               centered={true}
               centered={true}
               onOk={deleteAccount}
               onOk={deleteAccount}
             >
             >
-                            <div style={{marginTop: 20}}>
+              <div style={{ marginTop: 20 }}>
                 <Banner
                 <Banner
                   type="danger"
                   type="danger"
                   description="您正在删除自己的帐户，将清空所有数据且不可恢复"
                   description="您正在删除自己的帐户，将清空所有数据且不可恢复"
                   closeIcon={null}
                   closeIcon={null}
                 />
                 />
               </div>
               </div>
-                            <div style={{marginTop: 20}}>
+              <div style={{ marginTop: 20 }}>
                 <Input
                 <Input
                   placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
                   placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
-                                    name='self_account_deletion_confirmation'
+                  name="self_account_deletion_confirmation"
                   value={inputs.self_account_deletion_confirmation}
                   value={inputs.self_account_deletion_confirmation}
-                                    onChange={(value)=>handleInputChange('self_account_deletion_confirmation', value)}
+                  onChange={(value) => handleInputChange('self_account_deletion_confirmation', value)}
                 />
                 />
                 {turnstileEnabled ? (
                 {turnstileEnabled ? (
                   <Turnstile
                   <Turnstile
@@ -600,19 +607,19 @@ const PersonalSetting = () => {
               centered={true}
               centered={true}
               onOk={changePassword}
               onOk={changePassword}
             >
             >
-                            <div style={{marginTop: 20}}>
+              <div style={{ marginTop: 20 }}>
                 <Input
                 <Input
-                                    name='set_new_password'
-                                    placeholder='新密码'
+                  name="set_new_password"
+                  placeholder="新密码"
                   value={inputs.set_new_password}
                   value={inputs.set_new_password}
-                                    onChange={(value)=>handleInputChange('set_new_password', value)}
+                  onChange={(value) => handleInputChange('set_new_password', value)}
                 />
                 />
                 <Input
                 <Input
-                                    style={{marginTop: 20}}
-                                    name='set_new_password_confirmation'
-                                    placeholder='确认新密码'
+                  style={{ marginTop: 20 }}
+                  name="set_new_password_confirmation"
+                  placeholder="确认新密码"
                   value={inputs.set_new_password_confirmation}
                   value={inputs.set_new_password_confirmation}
-                                    onChange={(value)=>handleInputChange('set_new_password_confirmation', value)}
+                  onChange={(value) => handleInputChange('set_new_password_confirmation', value)}
                 />
                 />
                 {turnstileEnabled ? (
                 {turnstileEnabled ? (
                   <Turnstile
                   <Turnstile

web/src/components/PrivateRoute.js

@@ -5,7 +5,7 @@ import { history } from '../helpers';
 
 
 function PrivateRoute({ children }) {
 function PrivateRoute({ children }) {
   if (!localStorage.getItem('user')) {
   if (!localStorage.getItem('user')) {
-    return <Navigate to='/login' state={{ from: history.location }} />;
+    return <Navigate to="/login" state={{ from: history.location }} />;
   }
   }
   return children;
   return children;
 }
 }

web/src/components/RedemptionsTable.js

-import React, {useEffect, useState} from 'react';
-import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers';
+import React, { useEffect, useState } from 'react';
+import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
 
 
-import {ITEMS_PER_PAGE} from '../constants';
-import {renderQuota} from '../helpers/render';
-import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui";
-import EditRedemption from "../pages/Redemption/EditRedemption";
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';
+import { Button, Form, Modal, Popconfirm, Popover, Table, Tag } from '@douyinfe/semi-ui';
+import EditRedemption from '../pages/Redemption/EditRedemption';
 
 
 function renderTimestamp(timestamp) {
 function renderTimestamp(timestamp) {
   return (
   return (
@@ -17,13 +17,13 @@ function renderTimestamp(timestamp) {
 function renderStatus(status) {
 function renderStatus(status) {
   switch (status) {
   switch (status) {
     case 1:
     case 1:
-            return <Tag color='green' size='large'>未使用</Tag>;
+      return <Tag color="green" size="large">未使用</Tag>;
     case 2:
     case 2:
-            return <Tag color='red' size='large'> 已禁用 </Tag>;
+      return <Tag color="red" size="large"> 已禁用 </Tag>;
     case 3:
     case 3:
-            return <Tag color='grey' size='large'> 已使用 </Tag>;
+      return <Tag color="grey" size="large"> 已使用 </Tag>;
     default:
     default:
-            return <Tag color='black' size='large'> 未知状态 </Tag>;
+      return <Tag color="black" size="large"> 未知状态 </Tag>;
   }
   }
 }
 }
 
 
@@ -31,11 +31,11 @@ const RedemptionsTable = () => {
   const columns = [
   const columns = [
     {
     {
       title: 'ID',
       title: 'ID',
-            dataIndex: 'id',
+      dataIndex: 'id'
     },
     },
     {
     {
       title: '名称',
       title: '名称',
-            dataIndex: 'name',
+      dataIndex: 'name'
     },
     },
     {
     {
       title: '状态',
       title: '状态',
@@ -47,7 +47,7 @@ const RedemptionsTable = () => {
             {renderStatus(text)}
             {renderStatus(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '额度',
       title: '额度',
@@ -58,7 +58,7 @@ const RedemptionsTable = () => {
             {renderQuota(parseInt(text))}
             {renderQuota(parseInt(text))}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '创建时间',
       title: '创建时间',
@@ -69,7 +69,7 @@ const RedemptionsTable = () => {
             {renderTimestamp(text)}
             {renderTimestamp(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '兑换人ID',
       title: '兑换人ID',
@@ -80,7 +80,7 @@ const RedemptionsTable = () => {
             {text === 0 ? '无' : text}
             {text === 0 ? '无' : text}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '',
       title: '',
@@ -91,14 +91,14 @@ const RedemptionsTable = () => {
             content={
             content={
               record.key
               record.key
             }
             }
-                        style={{padding: 20}}
+            style={{ padding: 20 }}
             position="top"
             position="top"
           >
           >
-                        <Button theme='light' type='tertiary' style={{marginRight: 1}}>查看</Button>
+            <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
           </Popover>
           </Popover>
-                    <Button theme='light' type='secondary' style={{marginRight: 1}}
+          <Button theme="light" type="secondary" style={{ marginRight: 1 }}
                   onClick={async (text) => {
                   onClick={async (text) => {
-                                await copyText(record.key)
+                    await copyText(record.key);
                   }}
                   }}
           >复制</Button>
           >复制</Button>
           <Popconfirm
           <Popconfirm
@@ -111,23 +111,23 @@ const RedemptionsTable = () => {
                 () => {
                 () => {
                   removeRecord(record.key);
                   removeRecord(record.key);
                 }
                 }
-                            )
+              );
             }}
             }}
           >
           >
-                        <Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
+            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
           </Popconfirm>
           </Popconfirm>
           {
           {
             record.status === 1 ?
             record.status === 1 ?
-                            <Button theme='light' type='warning' style={{marginRight: 1}} onClick={
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
                 async () => {
                 async () => {
                   manageRedemption(
                   manageRedemption(
                     record.id,
                     record.id,
                     'disable',
                     'disable',
                     record
                     record
-                                    )
+                  );
                 }
                 }
               }>禁用</Button> :
               }>禁用</Button> :
-                            <Button theme='light' type='secondary' style={{marginRight: 1}} onClick={
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
                 async () => {
                 async () => {
                   manageRedemption(
                   manageRedemption(
                     record.id,
                     record.id,
@@ -137,15 +137,15 @@ const RedemptionsTable = () => {
                 }
                 }
               } disabled={record.status === 3}>启用</Button>
               } disabled={record.status === 3}>启用</Button>
           }
           }
-                    <Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
+          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
             () => {
             () => {
               setEditingRedemption(record);
               setEditingRedemption(record);
               setShowEdit(true);
               setShowEdit(true);
             }
             }
           } disabled={record.status !== 1}>编辑</Button>
           } disabled={record.status !== 1}>编辑</Button>
         </div>
         </div>
-            ),
-        },
+      )
+    }
   ];
   ];
 
 
   const [redemptions, setRedemptions] = useState([]);
   const [redemptions, setRedemptions] = useState([]);
@@ -156,13 +156,13 @@ const RedemptionsTable = () => {
   const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
   const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [editingRedemption, setEditingRedemption] = useState({
   const [editingRedemption, setEditingRedemption] = useState({
-        id: undefined,
+    id: undefined
   });
   });
   const [showEdit, setShowEdit] = useState(false);
   const [showEdit, setShowEdit] = useState(false);
 
 
   const closeEdit = () => {
   const closeEdit = () => {
     setShowEdit(false);
     setShowEdit(false);
-    }
+  };
 
 
   // const setCount = (data) => {
   // const setCount = (data) => {
   //     if (data.length >= (activePage) * ITEMS_PER_PAGE) {
   //     if (data.length >= (activePage) * ITEMS_PER_PAGE) {
@@ -183,11 +183,11 @@ const RedemptionsTable = () => {
     } else {
     } else {
       setTokenCount(redeptions.length);
       setTokenCount(redeptions.length);
     }
     }
-    }
+  };
 
 
   const loadRedemptions = async (startIdx) => {
   const loadRedemptions = async (startIdx) => {
     const res = await API.get(`/api/redemption/?p=${startIdx}`);
     const res = await API.get(`/api/redemption/?p=${startIdx}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (startIdx === 0) {
       if (startIdx === 0) {
         setRedemptionFormat(data);
         setRedemptionFormat(data);
@@ -219,11 +219,11 @@ const RedemptionsTable = () => {
       showSuccess('已复制到剪贴板！');
       showSuccess('已复制到剪贴板！');
     } else {
     } else {
       // setSearchKeyword(text);
       // setSearchKeyword(text);
-            Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
-        }
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
     }
+  };
 
 
-    const onPaginationChange = (e, {activePage}) => {
+  const onPaginationChange = (e, { activePage }) => {
     (async () => {
     (async () => {
       if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
       if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
         // In this case we have to load more data and then append them.
         // In this case we have to load more data and then append them.
@@ -246,7 +246,7 @@ const RedemptionsTable = () => {
   };
   };
 
 
   const manageRedemption = async (id, action, record) => {
   const manageRedemption = async (id, action, record) => {
-        let data = {id};
+    let data = { id };
     let res;
     let res;
     switch (action) {
     switch (action) {
       case 'delete':
       case 'delete':
@@ -261,7 +261,7 @@ const RedemptionsTable = () => {
         res = await API.put('/api/redemption/?status_only=true', data);
         res = await API.put('/api/redemption/?status_only=true', data);
         break;
         break;
     }
     }
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('操作成功完成！');
       showSuccess('操作成功完成！');
       let redemption = res.data.data;
       let redemption = res.data.data;
@@ -287,7 +287,7 @@ const RedemptionsTable = () => {
     }
     }
     setSearching(true);
     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;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setRedemptions(data);
       setRedemptions(data);
       setActivePage(1);
       setActivePage(1);
@@ -332,15 +332,15 @@ const RedemptionsTable = () => {
     },
     },
     onChange: (selectedRowKeys, selectedRows) => {
     onChange: (selectedRowKeys, selectedRows) => {
       setSelectedKeys(selectedRows);
       setSelectedKeys(selectedRows);
-        },
+    }
   };
   };
 
 
   const handleRow = (record, index) => {
   const handleRow = (record, index) => {
     if (record.status !== 1) {
     if (record.status !== 1) {
       return {
       return {
         style: {
         style: {
-                    background: 'var(--semi-color-disabled-border)',
-                },
+          background: 'var(--semi-color-disabled-border)'
+        }
       };
       };
     } else {
     } else {
       return {};
       return {};
@@ -353,18 +353,18 @@ const RedemptionsTable = () => {
                       handleClose={closeEdit}></EditRedemption>
                       handleClose={closeEdit}></EditRedemption>
       <Form onSubmit={searchRedemptions}>
       <Form onSubmit={searchRedemptions}>
         <Form.Input
         <Form.Input
-                    label='搜索关键字'
-                    field='keyword'
-                    icon='search'
-                    iconPosition='left'
-                    placeholder='关键字(id或者名称)'
+          label="搜索关键字"
+          field="keyword"
+          icon="search"
+          iconPosition="left"
+          placeholder="关键字(id或者名称)"
           value={searchKeyword}
           value={searchKeyword}
           loading={searching}
           loading={searching}
           onChange={handleKeywordChange}
           onChange={handleKeywordChange}
         />
         />
       </Form>
       </Form>
 
 
-            <Table style={{marginTop: 20}} columns={columns} dataSource={pageData} pagination={{
+      <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
         currentPage: activePage,
         currentPage: activePage,
         pageSize: ITEMS_PER_PAGE,
         pageSize: ITEMS_PER_PAGE,
         total: tokenCount,
         total: tokenCount,
@@ -375,26 +375,26 @@ const RedemptionsTable = () => {
         //   setPageSize(size);
         //   setPageSize(size);
         //   setActivePage(1);
         //   setActivePage(1);
         // },
         // },
-                onPageChange: handlePageChange,
+        onPageChange: handlePageChange
       }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
       }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
       </Table>
       </Table>
-            <Button theme='light' type='primary' style={{marginRight: 8}} onClick={
+      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
         () => {
         () => {
           setEditingRedemption({
           setEditingRedemption({
-                        id: undefined,
+            id: undefined
           });
           });
           setShowEdit(true);
           setShowEdit(true);
         }
         }
       }>添加兑换码</Button>
       }>添加兑换码</Button>
-            <Button label='复制所选兑换码' type="warning" onClick={
+      <Button label="复制所选兑换码" type="warning" onClick={
         async () => {
         async () => {
           if (selectedKeys.length === 0) {
           if (selectedKeys.length === 0) {
             showError('请至少选择一个兑换码！');
             showError('请至少选择一个兑换码！');
             return;
             return;
           }
           }
-                    let keys = "";
+          let keys = '';
           for (let i = 0; i < selectedKeys.length; i++) {
           for (let i = 0; i < selectedKeys.length; i++) {
-                        keys += selectedKeys[i].name + "    " + selectedKeys[i].key + "\n";
+            keys += selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
           }
           }
           await copyText(keys);
           await copyText(keys);
         }
         }

web/src/components/RegisterForm.js

@@ -98,49 +98,49 @@ const RegisterForm = () => {
   };
   };
 
 
   return (
   return (
-    <Grid textAlign='center' style={{ marginTop: '48px' }}>
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
       <Grid.Column style={{ maxWidth: 450 }}>
       <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
+        <Header as="h2" color="" textAlign="center">
           <Image src={logo} /> 新用户注册
           <Image src={logo} /> 新用户注册
         </Header>
         </Header>
-        <Form size='large'>
+        <Form size="large">
           <Segment>
           <Segment>
             <Form.Input
             <Form.Input
               fluid
               fluid
-              icon='user'
-              iconPosition='left'
-              placeholder='输入用户名，最长 12 位'
+              icon="user"
+              iconPosition="left"
+              placeholder="输入用户名，最长 12 位"
               onChange={handleChange}
               onChange={handleChange}
-              name='username'
+              name="username"
             />
             />
             <Form.Input
             <Form.Input
               fluid
               fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='输入密码，最短 8 位，最长 20 位'
+              icon="lock"
+              iconPosition="left"
+              placeholder="输入密码，最短 8 位，最长 20 位"
               onChange={handleChange}
               onChange={handleChange}
-              name='password'
-              type='password'
+              name="password"
+              type="password"
             />
             />
             <Form.Input
             <Form.Input
               fluid
               fluid
-              icon='lock'
-              iconPosition='left'
-              placeholder='输入密码，最短 8 位，最长 20 位'
+              icon="lock"
+              iconPosition="left"
+              placeholder="输入密码，最短 8 位，最长 20 位"
               onChange={handleChange}
               onChange={handleChange}
-              name='password2'
-              type='password'
+              name="password2"
+              type="password"
             />
             />
             {showEmailVerification ? (
             {showEmailVerification ? (
               <>
               <>
                 <Form.Input
                 <Form.Input
                   fluid
                   fluid
-                  icon='mail'
-                  iconPosition='left'
-                  placeholder='输入邮箱地址'
+                  icon="mail"
+                  iconPosition="left"
+                  placeholder="输入邮箱地址"
                   onChange={handleChange}
                   onChange={handleChange}
-                  name='email'
-                  type='email'
+                  name="email"
+                  type="email"
                   action={
                   action={
                     <Button onClick={sendVerificationCode} disabled={loading}>
                     <Button onClick={sendVerificationCode} disabled={loading}>
                       获取验证码
                       获取验证码
@@ -149,11 +149,11 @@ const RegisterForm = () => {
                 />
                 />
                 <Form.Input
                 <Form.Input
                   fluid
                   fluid
-                  icon='lock'
-                  iconPosition='left'
-                  placeholder='输入验证码'
+                  icon="lock"
+                  iconPosition="left"
+                  placeholder="输入验证码"
                   onChange={handleChange}
                   onChange={handleChange}
-                  name='verification_code'
+                  name="verification_code"
                 />
                 />
               </>
               </>
             ) : (
             ) : (
@@ -170,9 +170,9 @@ const RegisterForm = () => {
               <></>
               <></>
             )}
             )}
             <Button
             <Button
-              color='green'
+              color="green"
               fluid
               fluid
-              size='large'
+              size="large"
               onClick={handleSubmit}
               onClick={handleSubmit}
               loading={loading}
               loading={loading}
             >
             >
@@ -182,7 +182,7 @@ const RegisterForm = () => {
         </Form>
         </Form>
         <Message>
         <Message>
           已有账户？
           已有账户？
-          <Link to='/login' className='btn btn-link'>
+          <Link to="/login" className="btn btn-link">
             点击登录
             点击登录
           </Link>
           </Link>
         </Message>
         </Message>

web/src/components/SiderBar.js

-import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import {Link, useNavigate} from 'react-router-dom';
-import {UserContext} from '../context/User';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/User';
 import { StatusContext } from '../context/Status';
 import { StatusContext } from '../context/Status';
 
 
-import { API, getLogo, getSystemName, isAdmin, isMobile, showError, showSuccess } from '../helpers';
+import { API, getLogo, getSystemName, isAdmin, isMobile, showError } from '../helpers';
 import '../index.css';
 import '../index.css';
 
 
 import {
 import {
   IconCalendarClock,
   IconCalendarClock,
-    IconHistogram,
+  IconComment,
+  IconCreditCard,
   IconGift,
   IconGift,
+  IconHistogram,
+  IconHome,
+  IconImage,
   IconKey,
   IconKey,
-    IconUser,
   IconLayers,
   IconLayers,
   IconSetting,
   IconSetting,
-    IconCreditCard,
-    IconComment,
-    IconHome,
-    IconImage
+  IconUser
 } from '@douyinfe/semi-icons';
 } from '@douyinfe/semi-icons';
-import {Nav, Avatar, Dropdown, Layout} from '@douyinfe/semi-ui';
+import { Layout, Nav } from '@douyinfe/semi-ui';
 
 
 // HeaderBar Buttons
 // HeaderBar Buttons
 
 
@@ -39,74 +39,74 @@ const SiderBar = () => {
       text: '首页',
       text: '首页',
       itemKey: 'home',
       itemKey: 'home',
       to: '/',
       to: '/',
-            icon: <IconHome/>
+      icon: <IconHome />
     },
     },
     {
     {
       text: '渠道',
       text: '渠道',
       itemKey: 'channel',
       itemKey: 'channel',
       to: '/channel',
       to: '/channel',
-            icon: <IconLayers/>,
-            className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
+      icon: <IconLayers />,
+      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
     },
     },
     {
     {
       text: '聊天',
       text: '聊天',
       itemKey: 'chat',
       itemKey: 'chat',
       to: '/chat',
       to: '/chat',
       icon: <IconComment />,
       icon: <IconComment />,
-            className: localStorage.getItem('chat_link')?'semi-navigation-item-normal':'tableHiddle',
+      className: localStorage.getItem('chat_link') ? 'semi-navigation-item-normal' : 'tableHiddle'
     },
     },
     {
     {
       text: '令牌',
       text: '令牌',
       itemKey: 'token',
       itemKey: 'token',
       to: '/token',
       to: '/token',
-            icon: <IconKey/>
+      icon: <IconKey />
     },
     },
     {
     {
       text: '兑换码',
       text: '兑换码',
       itemKey: 'redemption',
       itemKey: 'redemption',
       to: '/redemption',
       to: '/redemption',
-            icon: <IconGift/>,
-            className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
+      icon: <IconGift />,
+      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
     },
     },
     {
     {
       text: '钱包',
       text: '钱包',
       itemKey: 'topup',
       itemKey: 'topup',
       to: '/topup',
       to: '/topup',
-            icon: <IconCreditCard/>
+      icon: <IconCreditCard />
     },
     },
     {
     {
       text: '用户管理',
       text: '用户管理',
       itemKey: 'user',
       itemKey: 'user',
       to: '/user',
       to: '/user',
-            icon: <IconUser/>,
-            className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
+      icon: <IconUser />,
+      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
     },
     },
     {
     {
       text: '日志',
       text: '日志',
       itemKey: 'log',
       itemKey: 'log',
       to: '/log',
       to: '/log',
-            icon: <IconHistogram/>
+      icon: <IconHistogram />
     },
     },
     {
     {
       text: '数据看板',
       text: '数据看板',
       itemKey: 'detail',
       itemKey: 'detail',
       to: '/detail',
       to: '/detail',
       icon: <IconCalendarClock />,
       icon: <IconCalendarClock />,
-            className: localStorage.getItem('enable_data_export') === 'true'?'semi-navigation-item-normal':'tableHiddle',
+      className: localStorage.getItem('enable_data_export') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
     },
     },
     {
     {
       text: '绘图',
       text: '绘图',
       itemKey: 'midjourney',
       itemKey: 'midjourney',
       to: '/midjourney',
       to: '/midjourney',
-            icon: <IconImage/>,
-            className: localStorage.getItem('enable_drawing') === 'true'?'semi-navigation-item-normal':'tableHiddle',
+      icon: <IconImage />,
+      className: localStorage.getItem('enable_drawing') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
     },
     },
     {
     {
       text: '设置',
       text: '设置',
       itemKey: 'setting',
       itemKey: 'setting',
       to: '/setting',
       to: '/setting',
-            icon: <IconSetting/>
-        },
+      icon: <IconSetting />
+    }
     // {
     // {
     //     text: '关于',
     //     text: '关于',
     //     itemKey: 'about',
     //     itemKey: 'about',
@@ -149,12 +149,12 @@ const SiderBar = () => {
     loadStatus().then(() => {
     loadStatus().then(() => {
       setIsCollapsed(isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true');
       setIsCollapsed(isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true');
     });
     });
-    },[])
+  }, []);
 
 
   return (
   return (
     <>
     <>
       <Layout>
       <Layout>
-                <div style={{height: '100%'}}>
+        <div style={{ height: '100%' }}>
           <Nav
           <Nav
             // bodyStyle={{ maxWidth: 200 }}
             // bodyStyle={{ maxWidth: 200 }}
             style={{ maxWidth: 200 }}
             style={{ maxWidth: 200 }}
@@ -164,24 +164,24 @@ const SiderBar = () => {
               setIsCollapsed(collapsed);
               setIsCollapsed(collapsed);
             }}
             }}
             selectedKeys={selectedKeys}
             selectedKeys={selectedKeys}
-                        renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => {
+            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
               const routerMap = {
               const routerMap = {
-                                home: "/",
-                                channel: "/channel",
-                                token: "/token",
-                                redemption: "/redemption",
-                                topup: "/topup",
-                                user: "/user",
-                                log: "/log",
-                                midjourney: "/midjourney",
-                                setting: "/setting",
-                                about: "/about",
-                                chat: "/chat",
-                                detail: "/detail",
+                home: '/',
+                channel: '/channel',
+                token: '/token',
+                redemption: '/redemption',
+                topup: '/topup',
+                user: '/user',
+                log: '/log',
+                midjourney: '/midjourney',
+                setting: '/setting',
+                about: '/about',
+                chat: '/chat',
+                detail: '/detail'
               };
               };
               return (
               return (
                 <Link
                 <Link
-                                    style={{textDecoration: "none"}}
+                  style={{ textDecoration: 'none' }}
                   to={routerMap[props.itemKey]}
                   to={routerMap[props.itemKey]}
                 >
                 >
                   {itemElement}
                   {itemElement}
@@ -193,8 +193,8 @@ const SiderBar = () => {
               setSelectedKeys([key.itemKey]);
               setSelectedKeys([key.itemKey]);
             }}
             }}
             header={{
             header={{
-                            logo: <img src={logo} alt='logo' style={{marginRight: '0.75em'}}/>,
-                            text: systemName,
+              logo: <img src={logo} alt="logo" style={{ marginRight: '0.75em' }} />,
+              text: systemName
             }}
             }}
             // footer={{
             // footer={{
             //   text: '© 2021 NekoAPI',
             //   text: '© 2021 NekoAPI',

web/src/components/SystemSetting.js

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
-import { Button, Divider, Form, Grid, Header, Modal, Message } from 'semantic-ui-react';
+import { Button, Divider, Form, Grid, Header, Message, Modal } from 'semantic-ui-react';
 import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
 import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
 
 
 const SystemSetting = () => {
 const SystemSetting = () => {
@@ -38,7 +38,7 @@ const SystemSetting = () => {
     // telegram login
     // telegram login
     TelegramOAuthEnabled: '',
     TelegramOAuthEnabled: '',
     TelegramBotToken: '',
     TelegramBotToken: '',
-        TelegramBotName: '',
+    TelegramBotName: ''
   });
   });
   const [originInputs, setOriginInputs] = useState({});
   const [originInputs, setOriginInputs] = useState({});
   let [loading, setLoading] = useState(false);
   let [loading, setLoading] = useState(false);
@@ -153,7 +153,7 @@ const SystemSetting = () => {
   const submitPayAddress = async () => {
   const submitPayAddress = async () => {
     if (inputs.ServerAddress === '') {
     if (inputs.ServerAddress === '') {
       showError('请先填写服务器地址');
       showError('请先填写服务器地址');
-            return
+      return;
     }
     }
     if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
     if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
       if (!verifyJSON(inputs.TopupGroupRatio)) {
       if (!verifyJSON(inputs.TopupGroupRatio)) {
@@ -170,7 +170,7 @@ const SystemSetting = () => {
     if (inputs.EpayKey !== '') {
     if (inputs.EpayKey !== '') {
       await updateOption('EpayKey', inputs.EpayKey);
       await updateOption('EpayKey', inputs.EpayKey);
     }
     }
-        await updateOption('Price', "" + inputs.Price);
+    await updateOption('Price', '' + inputs.Price);
   };
   };
 
 
   const submitSMTP = async () => {
   const submitSMTP = async () => {
@@ -267,105 +267,105 @@ const SystemSetting = () => {
       setRestrictedDomainInput('');
       setRestrictedDomainInput('');
       setInputs({
       setInputs({
         ...inputs,
         ...inputs,
-                EmailDomainWhitelist: [...localDomainList, restrictedDomainInput],
+        EmailDomainWhitelist: [...localDomainList, restrictedDomainInput]
       });
       });
       setEmailDomainWhitelist([...EmailDomainWhitelist, {
       setEmailDomainWhitelist([...EmailDomainWhitelist, {
         key: restrictedDomainInput,
         key: restrictedDomainInput,
         text: restrictedDomainInput,
         text: restrictedDomainInput,
-                value: restrictedDomainInput,
+        value: restrictedDomainInput
       }]);
       }]);
     }
     }
-    }
+  };
 
 
   return (
   return (
     <Grid columns={1}>
     <Grid columns={1}>
       <Grid.Column>
       <Grid.Column>
         <Form loading={loading}>
         <Form loading={loading}>
-                    <Header as='h3'>通用设置</Header>
-                    <Form.Group widths='equal'>
+          <Header as="h3">通用设置</Header>
+          <Form.Group widths="equal">
             <Form.Input
             <Form.Input
-                            label='服务器地址'
-                            placeholder='例如：https://yourdomain.com'
+              label="服务器地址"
+              placeholder="例如：https://yourdomain.com"
               value={inputs.ServerAddress}
               value={inputs.ServerAddress}
-                            name='ServerAddress'
+              name="ServerAddress"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitServerAddress}>
           <Form.Button onClick={submitServerAddress}>
             更新服务器地址
             更新服务器地址
           </Form.Button>
           </Form.Button>
-                    <Divider/>
-                    <Header as='h3'>支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header>
-                    <Form.Group widths='equal'>
+          <Divider />
+          <Header as="h3">支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header>
+          <Form.Group widths="equal">
             <Form.Input
             <Form.Input
-                            label='支付地址，不填写则不启用在线支付'
-                            placeholder='例如：https://yourdomain.com'
+              label="支付地址，不填写则不启用在线支付"
+              placeholder="例如：https://yourdomain.com"
               value={inputs.PayAddress}
               value={inputs.PayAddress}
-                            name='PayAddress'
+              name="PayAddress"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Input
             <Form.Input
-                            label='易支付商户ID'
-                            placeholder='例如：0001'
+              label="易支付商户ID"
+              placeholder="例如：0001"
               value={inputs.EpayId}
               value={inputs.EpayId}
-                            name='EpayId'
+              name="EpayId"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Input
             <Form.Input
-                            label='易支付商户密钥'
-                            placeholder='例如：dejhfueqhujasjmndbjkqaw'
+              label="易支付商户密钥"
+              placeholder="例如：dejhfueqhujasjmndbjkqaw"
               value={inputs.EpayKey}
               value={inputs.EpayKey}
-                            name='EpayKey'
+              name="EpayKey"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
 
 
           </Form.Group>
           </Form.Group>
-                    <Form.Group widths='equal'>
+          <Form.Group widths="equal">
             <Form.Input
             <Form.Input
-                          label='回调地址，不填写则使用上方服务器地址作为回调地址'
-                          placeholder='例如：https://yourdomain.com'
+              label="回调地址，不填写则使用上方服务器地址作为回调地址"
+              placeholder="例如：https://yourdomain.com"
               value={inputs.CustomCallbackAddress}
               value={inputs.CustomCallbackAddress}
-                          name='CustomCallbackAddress'
+              name="CustomCallbackAddress"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Input
             <Form.Input
-                          label='充值价格（x元/美金）'
-                          placeholder='例如：7，就是7元/美金'
+              label="充值价格（x元/美金）"
+              placeholder="例如：7，就是7元/美金"
               value={inputs.Price}
               value={inputs.Price}
-                          name='Price'
+              name="Price"
               min={0}
               min={0}
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Input
             <Form.Input
-                          label='最低充值数量'
-                          placeholder='例如：2，就是最低充值2$'
+              label="最低充值数量"
+              placeholder="例如：2，就是最低充值2$"
               value={inputs.MinTopUp}
               value={inputs.MinTopUp}
-                          name='MinTopUp'
+              name="MinTopUp"
               min={1}
               min={1}
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
-                    <Form.Group widths='equal'>
+          <Form.Group widths="equal">
             <Form.TextArea
             <Form.TextArea
-                            label='充值分组倍率'
-                            name='TopupGroupRatio'
+              label="充值分组倍率"
+              name="TopupGroupRatio"
               onChange={handleInputChange}
               onChange={handleInputChange}
               style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
               style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.TopupGroupRatio}
               value={inputs.TopupGroupRatio}
-                            placeholder='为一个 JSON 文本，键为组名称，值为倍率'
+              placeholder="为一个 JSON 文本，键为组名称，值为倍率"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitPayAddress}>
           <Form.Button onClick={submitPayAddress}>
             更新支付设置
             更新支付设置
           </Form.Button>
           </Form.Button>
           <Divider />
           <Divider />
-                    <Header as='h3'>配置登录注册</Header>
+          <Header as="h3">配置登录注册</Header>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.PasswordLoginEnabled === 'true'}
               checked={inputs.PasswordLoginEnabled === 'true'}
-                            label='允许通过密码进行登录'
-                            name='PasswordLoginEnabled'
+              label="允许通过密码进行登录"
+              name="PasswordLoginEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             {
             {
@@ -383,7 +383,7 @@ const SystemSetting = () => {
                 <Modal.Actions>
                 <Modal.Actions>
                   <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
                   <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
                   <Button
                   <Button
-                                        color='yellow'
+                    color="yellow"
                     onClick={async () => {
                     onClick={async () => {
                       setShowPasswordWarningModal(false);
                       setShowPasswordWarningModal(false);
                       await updateOption('PasswordLoginEnabled', 'false');
                       await updateOption('PasswordLoginEnabled', 'false');
@@ -396,80 +396,80 @@ const SystemSetting = () => {
             }
             }
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.PasswordRegisterEnabled === 'true'}
               checked={inputs.PasswordRegisterEnabled === 'true'}
-                            label='允许通过密码进行注册'
-                            name='PasswordRegisterEnabled'
+              label="允许通过密码进行注册"
+              name="PasswordRegisterEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.EmailVerificationEnabled === 'true'}
               checked={inputs.EmailVerificationEnabled === 'true'}
-                            label='通过密码注册时需要进行邮箱验证'
-                            name='EmailVerificationEnabled'
+              label="通过密码注册时需要进行邮箱验证"
+              name="EmailVerificationEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.GitHubOAuthEnabled === 'true'}
               checked={inputs.GitHubOAuthEnabled === 'true'}
-                            label='允许通过 GitHub 账户登录 & 注册'
-                            name='GitHubOAuthEnabled'
+              label="允许通过 GitHub 账户登录 & 注册"
+              name="GitHubOAuthEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.WeChatAuthEnabled === 'true'}
               checked={inputs.WeChatAuthEnabled === 'true'}
-                            label='允许通过微信登录 & 注册'
-                            name='WeChatAuthEnabled'
+              label="允许通过微信登录 & 注册"
+              name="WeChatAuthEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.TelegramOAuthEnabled === 'true'}
               checked={inputs.TelegramOAuthEnabled === 'true'}
-                            label='允许通过 Telegram 进行登录'
-                            name='TelegramOAuthEnabled'
+              label="允许通过 Telegram 进行登录"
+              name="TelegramOAuthEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.RegisterEnabled === 'true'}
               checked={inputs.RegisterEnabled === 'true'}
-                            label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）'
-                            name='RegisterEnabled'
+              label="允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）"
+              name="RegisterEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
             <Form.Checkbox
             <Form.Checkbox
               checked={inputs.TurnstileCheckEnabled === 'true'}
               checked={inputs.TurnstileCheckEnabled === 'true'}
-                            label='启用 Turnstile 用户校验'
-                            name='TurnstileCheckEnabled'
+              label="启用 Turnstile 用户校验"
+              name="TurnstileCheckEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
             />
             />
           </Form.Group>
           </Form.Group>
           <Divider />
           <Divider />
-                    <Header as='h3'>
+          <Header as="h3">
             配置邮箱域名白名单
             配置邮箱域名白名单
             <Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
             <Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
           </Header>
           </Header>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Checkbox
             <Form.Checkbox
-                            label='启用邮箱域名白名单'
-                            name='EmailDomainRestrictionEnabled'
+              label="启用邮箱域名白名单"
+              name="EmailDomainRestrictionEnabled"
               onChange={handleInputChange}
               onChange={handleInputChange}
               checked={inputs.EmailDomainRestrictionEnabled === 'true'}
               checked={inputs.EmailDomainRestrictionEnabled === 'true'}
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Group widths={2}>
           <Form.Group widths={2}>
             <Form.Dropdown
             <Form.Dropdown
-                            label='允许的邮箱域名'
-                            placeholder='允许的邮箱域名'
-                            name='EmailDomainWhitelist'
+              label="允许的邮箱域名"
+              placeholder="允许的邮箱域名"
+              name="EmailDomainWhitelist"
               required
               required
               fluid
               fluid
               multiple
               multiple
               selection
               selection
               onChange={handleInputChange}
               onChange={handleInputChange}
               value={inputs.EmailDomainWhitelist}
               value={inputs.EmailDomainWhitelist}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               options={EmailDomainWhitelist}
               options={EmailDomainWhitelist}
             />
             />
             <Form.Input
             <Form.Input
-                            label='添加新的允许的邮箱域名'
+              label="添加新的允许的邮箱域名"
               action={
               action={
-                                <Button type='button' onClick={() => {
+                <Button type="button" onClick={() => {
                   submitNewRestrictedDomain();
                   submitNewRestrictedDomain();
                 }}>填入</Button>
                 }}>填入</Button>
               }
               }
@@ -478,8 +478,8 @@ const SystemSetting = () => {
                   submitNewRestrictedDomain();
                   submitNewRestrictedDomain();
                 }
                 }
               }}
               }}
-                            autoComplete='new-password'
-                            placeholder='输入新的允许的邮箱域名'
+              autoComplete="new-password"
+              placeholder="输入新的允许的邮箱域名"
               value={restrictedDomainInput}
               value={restrictedDomainInput}
               onChange={(e, { value }) => {
               onChange={(e, { value }) => {
                 setRestrictedDomainInput(value);
                 setRestrictedDomainInput(value);
@@ -488,62 +488,62 @@ const SystemSetting = () => {
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
           <Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
           <Divider />
           <Divider />
-                    <Header as='h3'>
+          <Header as="h3">
             配置 SMTP
             配置 SMTP
             <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
             <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
           </Header>
           </Header>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Input
             <Form.Input
-                            label='SMTP 服务器地址'
-                            name='SMTPServer'
+              label="SMTP 服务器地址"
+              name="SMTPServer"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.SMTPServer}
               value={inputs.SMTPServer}
-                            placeholder='例如：smtp.qq.com'
+              placeholder="例如：smtp.qq.com"
             />
             />
             <Form.Input
             <Form.Input
-                            label='SMTP 端口'
-                            name='SMTPPort'
+              label="SMTP 端口"
+              name="SMTPPort"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.SMTPPort}
               value={inputs.SMTPPort}
-                            placeholder='默认: 587'
+              placeholder="默认: 587"
             />
             />
             <Form.Input
             <Form.Input
-                            label='SMTP 账户'
-                            name='SMTPAccount'
+              label="SMTP 账户"
+              name="SMTPAccount"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.SMTPAccount}
               value={inputs.SMTPAccount}
-                            placeholder='通常是邮箱地址'
+              placeholder="通常是邮箱地址"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Input
             <Form.Input
-                            label='SMTP 发送者邮箱'
-                            name='SMTPFrom'
+              label="SMTP 发送者邮箱"
+              name="SMTPFrom"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.SMTPFrom}
               value={inputs.SMTPFrom}
-                            placeholder='通常和邮箱地址保持一致'
+              placeholder="通常和邮箱地址保持一致"
             />
             />
             <Form.Input
             <Form.Input
-                            label='SMTP 访问凭证'
-                            name='SMTPToken'
+              label="SMTP 访问凭证"
+              name="SMTPToken"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            type='password'
-                            autoComplete='new-password'
+              type="password"
+              autoComplete="new-password"
               checked={inputs.RegisterEnabled === 'true'}
               checked={inputs.RegisterEnabled === 'true'}
-                            placeholder='敏感信息不会发送到前端显示'
+              placeholder="敏感信息不会发送到前端显示"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
           <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
           <Divider />
           <Divider />
-                    <Header as='h3'>
+          <Header as="h3">
             配置 GitHub OAuth App
             配置 GitHub OAuth App
             <Header.Subheader>
             <Header.Subheader>
               用以支持通过 GitHub 进行登录注册，
               用以支持通过 GitHub 进行登录注册，
-                            <a href='https://github.com/settings/developers' target='_blank'>
+              <a href="https://github.com/settings/developers" target="_blank" rel="noreferrer">
                 点击此处
                 点击此处
               </a>
               </a>
               管理你的 GitHub OAuth App
               管理你的 GitHub OAuth App
@@ -556,34 +556,34 @@ const SystemSetting = () => {
           </Message>
           </Message>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Input
             <Form.Input
-                            label='GitHub Client ID'
-                            name='GitHubClientId'
+              label="GitHub Client ID"
+              name="GitHubClientId"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.GitHubClientId}
               value={inputs.GitHubClientId}
-                            placeholder='输入你注册的 GitHub OAuth APP 的 ID'
+              placeholder="输入你注册的 GitHub OAuth APP 的 ID"
             />
             />
             <Form.Input
             <Form.Input
-                            label='GitHub Client Secret'
-                            name='GitHubClientSecret'
+              label="GitHub Client Secret"
+              name="GitHubClientSecret"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            type='password'
-                            autoComplete='new-password'
+              type="password"
+              autoComplete="new-password"
               value={inputs.GitHubClientSecret}
               value={inputs.GitHubClientSecret}
-                            placeholder='敏感信息不会发送到前端显示'
+              placeholder="敏感信息不会发送到前端显示"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitGitHubOAuth}>
           <Form.Button onClick={submitGitHubOAuth}>
             保存 GitHub OAuth 设置
             保存 GitHub OAuth 设置
           </Form.Button>
           </Form.Button>
           <Divider />
           <Divider />
-                    <Header as='h3'>
+          <Header as="h3">
             配置 WeChat Server
             配置 WeChat Server
             <Header.Subheader>
             <Header.Subheader>
               用以支持通过微信进行登录注册，
               用以支持通过微信进行登录注册，
               <a
               <a
-                                href='https://github.com/songquanpeng/wechat-server'
-                                target='_blank'
+                href="https://github.com/songquanpeng/wechat-server"
+                target="_blank" rel="noreferrer"
               >
               >
                 点击此处
                 点击此处
               </a>
               </a>
@@ -592,61 +592,61 @@ const SystemSetting = () => {
           </Header>
           </Header>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Input
             <Form.Input
-                            label='WeChat Server 服务器地址'
-                            name='WeChatServerAddress'
-                            placeholder='例如：https://yourdomain.com'
+              label="WeChat Server 服务器地址"
+              name="WeChatServerAddress"
+              placeholder="例如：https://yourdomain.com"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.WeChatServerAddress}
               value={inputs.WeChatServerAddress}
             />
             />
             <Form.Input
             <Form.Input
-                            label='WeChat Server 访问凭证'
-                            name='WeChatServerToken'
-                            type='password'
+              label="WeChat Server 访问凭证"
+              name="WeChatServerToken"
+              type="password"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.WeChatServerToken}
               value={inputs.WeChatServerToken}
-                            placeholder='敏感信息不会发送到前端显示'
+              placeholder="敏感信息不会发送到前端显示"
             />
             />
             <Form.Input
             <Form.Input
-                            label='微信公众号二维码图片链接'
-                            name='WeChatAccountQRCodeImageURL'
+              label="微信公众号二维码图片链接"
+              name="WeChatAccountQRCodeImageURL"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.WeChatAccountQRCodeImageURL}
               value={inputs.WeChatAccountQRCodeImageURL}
-                            placeholder='输入一个图片链接'
+              placeholder="输入一个图片链接"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitWeChat}>
           <Form.Button onClick={submitWeChat}>
             保存 WeChat Server 设置
             保存 WeChat Server 设置
           </Form.Button>
           </Form.Button>
           <Divider />
           <Divider />
-                    <Header as='h3'>配置 Telegram 登录</Header>
+          <Header as="h3">配置 Telegram 登录</Header>
           <Form.Group inline>
           <Form.Group inline>
             <Form.Input
             <Form.Input
-                            label='Telegram Bot Token'
-                            name='TelegramBotToken'
+              label="Telegram Bot Token"
+              name="TelegramBotToken"
               onChange={handleInputChange}
               onChange={handleInputChange}
               value={inputs.TelegramBotToken}
               value={inputs.TelegramBotToken}
-                            placeholder='输入你的 Telegram Bot Token'
+              placeholder="输入你的 Telegram Bot Token"
             />
             />
             <Form.Input
             <Form.Input
-                            label='Telegram Bot 名称'
-                            name='TelegramBotName'
+              label="Telegram Bot 名称"
+              name="TelegramBotName"
               onChange={handleInputChange}
               onChange={handleInputChange}
               value={inputs.TelegramBotName}
               value={inputs.TelegramBotName}
-                            placeholder='输入你的 Telegram Bot 名称'
+              placeholder="输入你的 Telegram Bot 名称"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitTelegramSettings}>
           <Form.Button onClick={submitTelegramSettings}>
             保存 Telegram 登录设置
             保存 Telegram 登录设置
           </Form.Button>
           </Form.Button>
           <Divider />
           <Divider />
-                    <Header as='h3'>
+          <Header as="h3">
             配置 Turnstile
             配置 Turnstile
             <Header.Subheader>
             <Header.Subheader>
               用以支持用户校验，
               用以支持用户校验，
-                            <a href='https://dash.cloudflare.com/' target='_blank'>
+              <a href="https://dash.cloudflare.com/" target="_blank" rel="noreferrer">
                 点击此处
                 点击此处
               </a>
               </a>
               管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
               管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
@@ -654,21 +654,21 @@ const SystemSetting = () => {
           </Header>
           </Header>
           <Form.Group widths={3}>
           <Form.Group widths={3}>
             <Form.Input
             <Form.Input
-                            label='Turnstile Site Key'
-                            name='TurnstileSiteKey'
+              label="Turnstile Site Key"
+              name="TurnstileSiteKey"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            autoComplete='new-password'
+              autoComplete="new-password"
               value={inputs.TurnstileSiteKey}
               value={inputs.TurnstileSiteKey}
-                            placeholder='输入你注册的 Turnstile Site Key'
+              placeholder="输入你注册的 Turnstile Site Key"
             />
             />
             <Form.Input
             <Form.Input
-                            label='Turnstile Secret Key'
-                            name='TurnstileSecretKey'
+              label="Turnstile Secret Key"
+              name="TurnstileSecretKey"
               onChange={handleInputChange}
               onChange={handleInputChange}
-                            type='password'
-                            autoComplete='new-password'
+              type="password"
+              autoComplete="new-password"
               value={inputs.TurnstileSecretKey}
               value={inputs.TurnstileSecretKey}
-                            placeholder='敏感信息不会发送到前端显示'
+              placeholder="敏感信息不会发送到前端显示"
             />
             />
           </Form.Group>
           </Form.Group>
           <Form.Button onClick={submitTurnstile}>
           <Form.Button onClick={submitTurnstile}>

web/src/components/TokensTable.js

-import React, {useEffect, useState} from 'react';
-import {API, copy, isAdmin, showError, showSuccess, showWarning, timestamp2string} from '../helpers';
-
-import {ITEMS_PER_PAGE} from '../constants';
-import {renderQuota, stringToColor} from '../helpers/render';
-import {
-    Avatar,
-    Tag,
-    Table,
-    Button,
-    Popover,
-    Form,
-    Modal,
-    Popconfirm,
-    SplitButtonGroup,
-    Dropdown
-} from "@douyinfe/semi-ui";
-
-import {
-    IconTreeTriangleDown,
-} from '@douyinfe/semi-icons';
-import EditToken from "../pages/Token/EditToken";
+import React, { useEffect, useState } from 'react';
+import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
+
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';
+import { Button, Dropdown, Form, Modal, Popconfirm, Popover, SplitButtonGroup, Table, Tag } from '@douyinfe/semi-ui';
+
+import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
+import EditToken from '../pages/Token/EditToken';
+
 const COPY_OPTIONS = [
 const COPY_OPTIONS = [
-    {key: 'next', text: 'ChatGPT Next Web', value: 'next'},
-    {key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama'},
-    {key: 'opencat', text: 'OpenCat', value: 'opencat'},
+  { key: 'next', text: 'ChatGPT Next Web', value: 'next' },
+  { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
+  { key: 'opencat', text: 'OpenCat', value: 'opencat' }
 ];
 ];
 
 
 const OPEN_LINK_OPTIONS = [
 const OPEN_LINK_OPTIONS = [
-    {key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama'},
-    {key: 'opencat', text: 'OpenCat', value: 'opencat'},
+  { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
+  { key: 'opencat', text: 'OpenCat', value: 'opencat' }
 ];
 ];
 
 
 function renderTimestamp(timestamp) {
 function renderTimestamp(timestamp) {
@@ -43,34 +31,42 @@ function renderStatus(status, model_limits_enabled = false) {
   switch (status) {
   switch (status) {
     case 1:
     case 1:
       if (model_limits_enabled) {
       if (model_limits_enabled) {
-                return <Tag color='green' size='large'>已启用：限制模型</Tag>;
+        return <Tag color="green" size="large">已启用：限制模型</Tag>;
       } else {
       } else {
-                return <Tag color='green' size='large'>已启用</Tag>;
+        return <Tag color="green" size="large">已启用</Tag>;
       }
       }
     case 2:
     case 2:
-            return <Tag color='red' size='large'> 已禁用 </Tag>;
+      return <Tag color="red" size="large"> 已禁用 </Tag>;
     case 3:
     case 3:
-            return <Tag color='yellow' size='large'> 已过期 </Tag>;
+      return <Tag color="yellow" size="large"> 已过期 </Tag>;
     case 4:
     case 4:
-            return <Tag color='grey' size='large'> 已耗尽 </Tag>;
+      return <Tag color="grey" size="large"> 已耗尽 </Tag>;
     default:
     default:
-            return <Tag color='black' size='large'> 未知状态 </Tag>;
+      return <Tag color="black" size="large"> 未知状态 </Tag>;
   }
   }
 }
 }
 
 
 const TokensTable = () => {
 const TokensTable = () => {
 
 
   const link_menu = [
   const link_menu = [
-        {node: 'item', key: 'next', name: 'ChatGPT Next Web', onClick: () => {onOpenLink('next')}},
-        {node: 'item', key: 'ama', name: 'AMA 问天', value: 'ama'},
-        {node: 'item', key: 'next-mj', name: 'ChatGPT Web & Midjourney', value: 'next-mj', onClick: () => {onOpenLink('next-mj')}},
-        {node: 'item', key: 'opencat', name: 'OpenCat', value: 'opencat'},
+    {
+      node: 'item', key: 'next', name: 'ChatGPT Next Web', onClick: () => {
+        onOpenLink('next');
+      }
+    },
+    { node: 'item', key: 'ama', name: 'AMA 问天', value: 'ama' },
+    {
+      node: 'item', key: 'next-mj', name: 'ChatGPT Web & Midjourney', value: 'next-mj', onClick: () => {
+        onOpenLink('next-mj');
+      }
+    },
+    { node: 'item', key: 'opencat', name: 'OpenCat', value: 'opencat' }
   ];
   ];
 
 
   const columns = [
   const columns = [
     {
     {
       title: '名称',
       title: '名称',
-            dataIndex: 'name',
+      dataIndex: 'name'
     },
     },
     {
     {
       title: '状态',
       title: '状态',
@@ -82,7 +78,7 @@ const TokensTable = () => {
             {renderStatus(text, record.model_limits_enabled)}
             {renderStatus(text, record.model_limits_enabled)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '已用额度',
       title: '已用额度',
@@ -93,7 +89,7 @@ const TokensTable = () => {
             {renderQuota(parseInt(text))}
             {renderQuota(parseInt(text))}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '剩余额度',
       title: '剩余额度',
@@ -101,10 +97,11 @@ const TokensTable = () => {
       render: (text, record, index) => {
       render: (text, record, index) => {
         return (
         return (
           <div>
           <div>
-                        {record.unlimited_quota ? <Tag size={'large'} color={'white'}>无限制</Tag> : <Tag size={'large'} color={'light-blue'}>{renderQuota(parseInt(text))}</Tag>}
+            {record.unlimited_quota ? <Tag size={'large'} color={'white'}>无限制</Tag> :
+              <Tag size={'large'} color={'light-blue'}>{renderQuota(parseInt(text))}</Tag>}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '创建时间',
       title: '创建时间',
@@ -115,7 +112,7 @@ const TokensTable = () => {
             {renderTimestamp(text)}
             {renderTimestamp(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '过期时间',
       title: '过期时间',
@@ -123,10 +120,10 @@ const TokensTable = () => {
       render: (text, record, index) => {
       render: (text, record, index) => {
         return (
         return (
           <div>
           <div>
-                        {record.expired_time === -1 ? "永不过期" : renderTimestamp(text)}
+            {record.expired_time === -1 ? '永不过期' : renderTimestamp(text)}
           </div>
           </div>
         );
         );
-            },
+      }
     },
     },
     {
     {
       title: '',
       title: '',
@@ -137,28 +134,55 @@ const TokensTable = () => {
             content={
             content={
               'sk-' + record.key
               'sk-' + record.key
             }
             }
-                        style={{padding: 20}}
+            style={{ padding: 20 }}
             position="top"
             position="top"
           >
           >
-                        <Button theme='light' type='tertiary' style={{marginRight: 1}}>查看</Button>
+            <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
           </Popover>
           </Popover>
-                    <Button theme='light' type='secondary' style={{marginRight: 1}}
+          <Button theme="light" type="secondary" style={{ marginRight: 1 }}
                   onClick={async (text) => {
                   onClick={async (text) => {
-                                await copyText('sk-' + record.key)
+                    await copyText('sk-' + record.key);
                   }}
                   }}
           >复制</Button>
           >复制</Button>
-                    <SplitButtonGroup style={{marginRight: 1}} aria-label="项目操作按钮组">
-                        <Button theme="light" style={{ color: 'rgba(var(--semi-teal-7), 1)' }} onClick={()=>{onOpenLink('next', record.key)}}>聊天</Button>
+          <SplitButtonGroup style={{ marginRight: 1 }} aria-label="项目操作按钮组">
+            <Button theme="light" style={{ color: 'rgba(var(--semi-teal-7), 1)' }} onClick={() => {
+              onOpenLink('next', record.key);
+            }}>聊天</Button>
             <Dropdown trigger="click" position="bottomRight" menu={
             <Dropdown trigger="click" position="bottomRight" menu={
               [
               [
-                                {node: 'item', key: 'next', disabled: !localStorage.getItem('chat_link'), name: 'ChatGPT Next Web', onClick: () => {onOpenLink('next', record.key)}},
-                                {node: 'item', key: 'next-mj', disabled: !localStorage.getItem('chat_link2'), name: 'ChatGPT Web & Midjourney', onClick: () => {onOpenLink('next-mj', record.key)}},
-                                {node: 'item', key: 'ama', name: 'AMA 问天（BotGem）', onClick: () => {onOpenLink('ama', record.key)}},
-                                {node: 'item', key: 'opencat', name: 'OpenCat', onClick: () => {onOpenLink('opencat', record.key)}},
+                {
+                  node: 'item',
+                  key: 'next',
+                  disabled: !localStorage.getItem('chat_link'),
+                  name: 'ChatGPT Next Web',
+                  onClick: () => {
+                    onOpenLink('next', record.key);
+                  }
+                },
+                {
+                  node: 'item',
+                  key: 'next-mj',
+                  disabled: !localStorage.getItem('chat_link2'),
+                  name: 'ChatGPT Web & Midjourney',
+                  onClick: () => {
+                    onOpenLink('next-mj', record.key);
+                  }
+                },
+                {
+                  node: 'item', key: 'ama', name: 'AMA 问天（BotGem）', onClick: () => {
+                    onOpenLink('ama', record.key);
+                  }
+                },
+                {
+                  node: 'item', key: 'opencat', name: 'OpenCat', onClick: () => {
+                    onOpenLink('opencat', record.key);
+                  }
+                }
               ]
               ]
             }
             }
             >
             >
-                            <Button style={ { padding: '8px 4px', color: 'rgba(var(--semi-teal-7), 1)' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
+              <Button style={{ padding: '8px 4px', color: 'rgba(var(--semi-teal-7), 1)' }} type="primary"
+                      icon={<IconTreeTriangleDown />}></Button>
             </Dropdown>
             </Dropdown>
           </SplitButtonGroup>
           </SplitButtonGroup>
           <Popconfirm
           <Popconfirm
@@ -171,23 +195,23 @@ const TokensTable = () => {
                 () => {
                 () => {
                   removeRecord(record.key);
                   removeRecord(record.key);
                 }
                 }
-                            )
+              );
             }}
             }}
           >
           >
-                        <Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
+            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
           </Popconfirm>
           </Popconfirm>
           {
           {
             record.status === 1 ?
             record.status === 1 ?
-                            <Button theme='light' type='warning' style={{marginRight: 1}} onClick={
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
                 async () => {
                 async () => {
                   manageToken(
                   manageToken(
                     record.id,
                     record.id,
                     'disable',
                     'disable',
                     record
                     record
-                                    )
+                  );
                 }
                 }
               }>禁用</Button> :
               }>禁用</Button> :
-                            <Button theme='light' type='secondary' style={{marginRight: 1}} onClick={
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
                 async () => {
                 async () => {
                   manageToken(
                   manageToken(
                     record.id,
                     record.id,
@@ -197,15 +221,15 @@ const TokensTable = () => {
                 }
                 }
               }>启用</Button>
               }>启用</Button>
           }
           }
-                    <Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
+          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
             () => {
             () => {
               setEditingToken(record);
               setEditingToken(record);
               setShowEdit(true);
               setShowEdit(true);
             }
             }
           }>编辑</Button>
           }>编辑</Button>
         </div>
         </div>
-            ),
-        },
+      )
+    }
   ];
   ];
 
 
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
@@ -221,17 +245,17 @@ const TokensTable = () => {
   const [showTopUpModal, setShowTopUpModal] = useState(false);
   const [showTopUpModal, setShowTopUpModal] = useState(false);
   const [targetTokenIdx, setTargetTokenIdx] = useState(0);
   const [targetTokenIdx, setTargetTokenIdx] = useState(0);
   const [editingToken, setEditingToken] = useState({
   const [editingToken, setEditingToken] = useState({
-        id: undefined,
+    id: undefined
   });
   });
 
 
   const closeEdit = () => {
   const closeEdit = () => {
     setShowEdit(false);
     setShowEdit(false);
     setTimeout(() => {
     setTimeout(() => {
       setEditingToken({
       setEditingToken({
-                id: undefined,
+        id: undefined
       });
       });
     }, 500);
     }, 500);
-    }
+  };
 
 
   const setTokensFormat = (tokens) => {
   const setTokensFormat = (tokens) => {
     setTokens(tokens);
     setTokens(tokens);
@@ -240,13 +264,13 @@ const TokensTable = () => {
     } else {
     } else {
       setTokenCount(tokens.length);
       setTokenCount(tokens.length);
     }
     }
-    }
+  };
 
 
   let pageData = tokens.slice((activePage - 1) * pageSize, activePage * pageSize);
   let pageData = tokens.slice((activePage - 1) * pageSize, activePage * pageSize);
   const loadTokens = async (startIdx) => {
   const loadTokens = async (startIdx) => {
     setLoading(true);
     setLoading(true);
     const res = await API.get(`/api/token/?p=${startIdx}&size=${pageSize}`);
     const res = await API.get(`/api/token/?p=${startIdx}&size=${pageSize}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (startIdx === 0) {
       if (startIdx === 0) {
         setTokensFormat(data);
         setTokensFormat(data);
@@ -261,7 +285,7 @@ const TokensTable = () => {
     setLoading(false);
     setLoading(false);
   };
   };
 
 
-    const onPaginationChange = (e, {activePage}) => {
+  const onPaginationChange = (e, { activePage }) => {
     (async () => {
     (async () => {
       if (activePage === Math.ceil(tokens.length / pageSize) + 1) {
       if (activePage === Math.ceil(tokens.length / pageSize) + 1) {
         // In this case we have to load more data and then append them.
         // In this case we have to load more data and then append them.
@@ -325,7 +349,7 @@ const TokensTable = () => {
       // setSearchKeyword(text);
       // setSearchKeyword(text);
       Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
       Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
     }
-    }
+  };
 
 
   const onOpenLink = async (type, key) => {
   const onOpenLink = async (type, key) => {
     let status = localStorage.getItem('status');
     let status = localStorage.getItem('status');
@@ -358,14 +382,14 @@ const TokensTable = () => {
         break;
         break;
       default:
       default:
         if (!chatLink) {
         if (!chatLink) {
-                    showError('管理员未设置聊天链接')
+          showError('管理员未设置聊天链接');
           return;
           return;
         }
         }
         url = defaultUrl;
         url = defaultUrl;
     }
     }
 
 
     window.open(url, '_blank');
     window.open(url, '_blank');
-    }
+  };
 
 
   useEffect(() => {
   useEffect(() => {
     loadTokens(0)
     loadTokens(0)
@@ -389,7 +413,7 @@ const TokensTable = () => {
 
 
   const manageToken = async (id, action, record) => {
   const manageToken = async (id, action, record) => {
     setLoading(true);
     setLoading(true);
-        let data = {id};
+    let data = { id };
     let res;
     let res;
     switch (action) {
     switch (action) {
       case 'delete':
       case 'delete':
@@ -404,7 +428,7 @@ const TokensTable = () => {
         res = await API.put('/api/token/?status_only=true', data);
         res = await API.put('/api/token/?status_only=true', data);
         break;
         break;
     }
     }
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('操作成功完成！');
       showSuccess('操作成功完成！');
       let token = res.data.data;
       let token = res.data.data;
@@ -432,7 +456,7 @@ const TokensTable = () => {
     }
     }
     setSearching(true);
     setSearching(true);
     const res = await API.get(`/api/token/search?keyword=${searchKeyword}&token=${searchToken}`);
     const res = await API.get(`/api/token/search?keyword=${searchKeyword}&token=${searchToken}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setTokensFormat(data);
       setTokensFormat(data);
       setActivePage(1);
       setActivePage(1);
@@ -481,15 +505,15 @@ const TokensTable = () => {
     },
     },
     onChange: (selectedRowKeys, selectedRows) => {
     onChange: (selectedRowKeys, selectedRows) => {
       setSelectedKeys(selectedRows);
       setSelectedKeys(selectedRows);
-        },
+    }
   };
   };
 
 
   const handleRow = (record, index) => {
   const handleRow = (record, index) => {
     if (record.status !== 1) {
     if (record.status !== 1) {
       return {
       return {
         style: {
         style: {
-                    background: 'var(--semi-color-disabled-border)',
-                },
+          background: 'var(--semi-color-disabled-border)'
+        }
       };
       };
     } else {
     } else {
       return {};
       return {};
@@ -499,28 +523,28 @@ const TokensTable = () => {
   return (
   return (
     <>
     <>
       <EditToken refresh={refresh} editingToken={editingToken} visiable={showEdit} handleClose={closeEdit}></EditToken>
       <EditToken refresh={refresh} editingToken={editingToken} visiable={showEdit} handleClose={closeEdit}></EditToken>
-            <Form layout='horizontal' style={{marginTop: 10}} labelPosition={'left'}>
+      <Form layout="horizontal" style={{ marginTop: 10 }} labelPosition={'left'}>
         <Form.Input
         <Form.Input
           field="keyword"
           field="keyword"
-                    label='搜索关键字'
-                    placeholder='令牌名称'
+          label="搜索关键字"
+          placeholder="令牌名称"
           value={searchKeyword}
           value={searchKeyword}
           loading={searching}
           loading={searching}
           onChange={handleKeywordChange}
           onChange={handleKeywordChange}
         />
         />
         <Form.Input
         <Form.Input
           field="token"
           field="token"
-                    label='Key'
-                    placeholder='密钥'
+          label="Key"
+          placeholder="密钥"
           value={searchToken}
           value={searchToken}
           loading={searching}
           loading={searching}
           onChange={handleSearchTokenChange}
           onChange={handleSearchTokenChange}
         />
         />
-                <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
-                        onClick={searchTokens} style={{marginRight: 8}}>查询</Button>
+        <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
+                onClick={searchTokens} style={{ marginRight: 8 }}>查询</Button>
       </Form>
       </Form>
 
 
-            <Table style={{marginTop: 20}} columns={columns} dataSource={pageData} pagination={{
+      <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
         currentPage: activePage,
         currentPage: activePage,
         pageSize: pageSize,
         pageSize: pageSize,
         total: tokenCount,
         total: tokenCount,
@@ -531,26 +555,26 @@ const TokensTable = () => {
           setPageSize(size);
           setPageSize(size);
           setActivePage(1);
           setActivePage(1);
         },
         },
-                onPageChange: handlePageChange,
+        onPageChange: handlePageChange
       }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
       }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
       </Table>
       </Table>
-            <Button theme='light' type='primary' style={{marginRight: 8}} onClick={
+      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
         () => {
         () => {
           setEditingToken({
           setEditingToken({
-                        id: undefined,
+            id: undefined
           });
           });
           setShowEdit(true);
           setShowEdit(true);
         }
         }
       }>添加令牌</Button>
       }>添加令牌</Button>
-            <Button label='复制所选令牌' type="warning" onClick={
+      <Button label="复制所选令牌" type="warning" onClick={
         async () => {
         async () => {
           if (selectedKeys.length === 0) {
           if (selectedKeys.length === 0) {
             showError('请至少选择一个令牌！');
             showError('请至少选择一个令牌！');
             return;
             return;
           }
           }
-                    let keys = "";
+          let keys = '';
           for (let i = 0; i < selectedKeys.length; i++) {
           for (let i = 0; i < selectedKeys.length; i++) {
-                        keys += selectedKeys[i].name + "    sk-" + selectedKeys[i].key + "\n";
+            keys += selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
           }
           }
           await copyText(keys);
           await copyText(keys);
         }
         }

web/src/components/UsersTable.js

-import React, {useEffect, useState} from 'react';
-import {API, isAdmin, showError, showSuccess} from '../helpers';
-import {Button, Modal, Popconfirm, Popover, Table, Tag, Form, Tooltip, Space} from "@douyinfe/semi-ui";
-import {ITEMS_PER_PAGE} from '../constants';
-import {renderGroup, renderNumber, renderQuota, renderText, stringToColor} from '../helpers/render';
-import AddUser from "../pages/User/AddUser";
-import EditUser from "../pages/User/EditUser";
+import React, { useEffect, useState } from 'react';
+import { API, showError, showSuccess } from '../helpers';
+import { Button, Form, Popconfirm, Space, Table, Tag, Tooltip } from '@douyinfe/semi-ui';
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderGroup, renderNumber, renderQuota } from '../helpers/render';
+import AddUser from '../pages/User/AddUser';
+import EditUser from '../pages/User/EditUser';
 
 
 function renderRole(role) {
 function renderRole(role) {
   switch (role) {
   switch (role) {
     case 1:
     case 1:
-            return <Tag size='large'>普通用户</Tag>;
+      return <Tag size="large">普通用户</Tag>;
     case 10:
     case 10:
-            return <Tag color='yellow' size='large'>管理员</Tag>;
+      return <Tag color="yellow" size="large">管理员</Tag>;
     case 100:
     case 100:
-            return <Tag color='orange' size='large'>超级管理员</Tag>;
+      return <Tag color="orange" size="large">超级管理员</Tag>;
     default:
     default:
-            return <Tag color='red' size='large'>未知身份</Tag>;
+      return <Tag color="red" size="large">未知身份</Tag>;
   }
   }
 }
 }
 
 
 const UsersTable = () => {
 const UsersTable = () => {
   const columns = [{
   const columns = [{
-        title: 'ID', dataIndex: 'id',
+    title: 'ID', dataIndex: 'id'
   }, {
   }, {
-        title: '用户名', dataIndex: 'username',
+    title: '用户名', dataIndex: 'username'
   }, {
   }, {
     title: '分组', dataIndex: 'group', render: (text, record, index) => {
     title: '分组', dataIndex: 'group', render: (text, record, index) => {
       return (<div>
       return (<div>
         {renderGroup(text)}
         {renderGroup(text)}
       </div>);
       </div>);
-        },
+    }
   }, {
   }, {
     title: '统计信息', dataIndex: 'info', render: (text, record, index) => {
     title: '统计信息', dataIndex: 'info', render: (text, record, index) => {
       return (<div>
       return (<div>
         <Space spacing={1}>
         <Space spacing={1}>
           <Tooltip content={'剩余额度'}>
           <Tooltip content={'剩余额度'}>
-                        <Tag color='white' size='large'>{renderQuota(record.quota)}</Tag>
+            <Tag color="white" size="large">{renderQuota(record.quota)}</Tag>
           </Tooltip>
           </Tooltip>
           <Tooltip content={'已用额度'}>
           <Tooltip content={'已用额度'}>
-                        <Tag color='white' size='large'>{renderQuota(record.used_quota)}</Tag>
+            <Tag color="white" size="large">{renderQuota(record.used_quota)}</Tag>
           </Tooltip>
           </Tooltip>
           <Tooltip content={'调用次数'}>
           <Tooltip content={'调用次数'}>
-                        <Tag color='white' size='large'>{renderNumber(record.request_count)}</Tag>
+            <Tag color="white" size="large">{renderNumber(record.request_count)}</Tag>
           </Tooltip>
           </Tooltip>
         </Space>
         </Space>
       </div>);
       </div>);
@@ -51,14 +51,14 @@ const UsersTable = () => {
       return (<div>
       return (<div>
         <Space spacing={1}>
         <Space spacing={1}>
           <Tooltip content={'邀请人数'}>
           <Tooltip content={'邀请人数'}>
-                        <Tag color='white' size='large'>{renderNumber(record.aff_count)}</Tag>
+            <Tag color="white" size="large">{renderNumber(record.aff_count)}</Tag>
           </Tooltip>
           </Tooltip>
           <Tooltip content={'邀请总收益'}>
           <Tooltip content={'邀请总收益'}>
-                        <Tag color='white' size='large'>{renderQuota(record.aff_history_quota)}</Tag>
+            <Tag color="white" size="large">{renderQuota(record.aff_history_quota)}</Tag>
           </Tooltip>
           </Tooltip>
           <Tooltip content={'邀请人ID'}>
           <Tooltip content={'邀请人ID'}>
-                        {record.inviter_id === 0 ? <Tag color='white' size='large'>无</Tag> :
-                            <Tag color='white' size='large'>{record.inviter_id}</Tag>}
+            {record.inviter_id === 0 ? <Tag color="white" size="large">无</Tag> :
+              <Tag color="white" size="large">{record.inviter_id}</Tag>}
           </Tooltip>
           </Tooltip>
         </Space>
         </Space>
       </div>);
       </div>);
@@ -68,44 +68,44 @@ const UsersTable = () => {
       return (<div>
       return (<div>
         {renderRole(text)}
         {renderRole(text)}
       </div>);
       </div>);
-        },
+    }
   }, {
   }, {
     title: '状态', dataIndex: 'status', render: (text, record, index) => {
     title: '状态', dataIndex: 'status', render: (text, record, index) => {
       return (<div>
       return (<div>
-                {record.DeletedAt !== null? <Tag color='red'>已注销</Tag> : renderStatus(text)}
+        {record.DeletedAt !== null ? <Tag color="red">已注销</Tag> : renderStatus(text)}
       </div>);
       </div>);
-        },
+    }
   }, {
   }, {
     title: '', dataIndex: 'operate', render: (text, record, index) => (<div>
     title: '', dataIndex: 'operate', render: (text, record, index) => (<div>
       {
       {
-                record.DeletedAt !== null ? <></>:
+        record.DeletedAt !== null ? <></> :
           <>
           <>
             <Popconfirm
             <Popconfirm
               title="确定？"
               title="确定？"
               okType={'warning'}
               okType={'warning'}
               onConfirm={() => {
               onConfirm={() => {
-                                manageUser(record.username, 'promote', record)
+                manageUser(record.username, 'promote', record);
               }}
               }}
             >
             >
-                            <Button theme='light' type='warning' style={{marginRight: 1}}>提升</Button>
+              <Button theme="light" type="warning" style={{ marginRight: 1 }}>提升</Button>
             </Popconfirm>
             </Popconfirm>
             <Popconfirm
             <Popconfirm
               title="确定？"
               title="确定？"
               okType={'warning'}
               okType={'warning'}
               onConfirm={() => {
               onConfirm={() => {
-                                manageUser(record.username, 'demote', record)
+                manageUser(record.username, 'demote', record);
               }}
               }}
             >
             >
-                            <Button theme='light' type='secondary' style={{marginRight: 1}}>降级</Button>
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }}>降级</Button>
             </Popconfirm>
             </Popconfirm>
             {record.status === 1 ?
             {record.status === 1 ?
-                            <Button theme='light' type='warning' style={{marginRight: 1}} onClick={async () => {
-                                manageUser(record.username, 'disable', record)
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={async () => {
+                manageUser(record.username, 'disable', record);
               }}>禁用</Button> :
               }}>禁用</Button> :
-                            <Button theme='light' type='secondary' style={{marginRight: 1}} onClick={async () => {
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={async () => {
                 manageUser(record.username, 'enable', record);
                 manageUser(record.username, 'enable', record);
               }} disabled={record.status === 3}>启用</Button>}
               }} disabled={record.status === 3}>启用</Button>}
-                        <Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={() => {
+            <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={() => {
               setEditingUser(record);
               setEditingUser(record);
               setShowEditUser(true);
               setShowEditUser(true);
             }}>编辑</Button>
             }}>编辑</Button>
@@ -120,13 +120,13 @@ const UsersTable = () => {
         onConfirm={() => {
         onConfirm={() => {
           manageUser(record.username, 'delete', record).then(() => {
           manageUser(record.username, 'delete', record).then(() => {
             removeRecord(record.id);
             removeRecord(record.id);
-                    })
+          });
         }}
         }}
       >
       >
-                <Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
+        <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
       </Popconfirm>
       </Popconfirm>
-        </div>),
-    },];
+    </div>)
+  }];
 
 
   const [users, setUsers] = useState([]);
   const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [loading, setLoading] = useState(true);
@@ -137,7 +137,7 @@ const UsersTable = () => {
   const [showAddUser, setShowAddUser] = useState(false);
   const [showAddUser, setShowAddUser] = useState(false);
   const [showEditUser, setShowEditUser] = useState(false);
   const [showEditUser, setShowEditUser] = useState(false);
   const [editingUser, setEditingUser] = useState({
   const [editingUser, setEditingUser] = useState({
-        id: undefined,
+    id: undefined
   });
   });
 
 
   const setCount = (data) => {
   const setCount = (data) => {
@@ -146,7 +146,7 @@ const UsersTable = () => {
     } else {
     } else {
       setUserCount(data.length);
       setUserCount(data.length);
     }
     }
-    }
+  };
 
 
   const removeRecord = key => {
   const removeRecord = key => {
     console.log(key);
     console.log(key);
@@ -163,7 +163,7 @@ const UsersTable = () => {
 
 
   const loadUsers = async (startIdx) => {
   const loadUsers = async (startIdx) => {
     const res = await API.get(`/api/user/?p=${startIdx}`);
     const res = await API.get(`/api/user/?p=${startIdx}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (startIdx === 0) {
       if (startIdx === 0) {
         setUsers(data);
         setUsers(data);
@@ -180,7 +180,7 @@ const UsersTable = () => {
     setLoading(false);
     setLoading(false);
   };
   };
 
 
-    const onPaginationChange = (e, {activePage}) => {
+  const onPaginationChange = (e, { activePage }) => {
     (async () => {
     (async () => {
       if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
       if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
         // In this case we have to load more data and then append them.
         // In this case we have to load more data and then append them.
@@ -202,7 +202,7 @@ const UsersTable = () => {
     const res = await API.post('/api/user/manage', {
     const res = await API.post('/api/user/manage', {
       username, action
       username, action
     });
     });
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('操作成功完成！');
       showSuccess('操作成功完成！');
       let user = res.data.data;
       let user = res.data.data;
@@ -222,13 +222,13 @@ const UsersTable = () => {
   const renderStatus = (status) => {
   const renderStatus = (status) => {
     switch (status) {
     switch (status) {
       case 1:
       case 1:
-                return <Tag size='large'>已激活</Tag>;
+        return <Tag size="large">已激活</Tag>;
       case 2:
       case 2:
-                return (<Tag size='large' color='red'>
+        return (<Tag size="large" color="red">
           已封禁
           已封禁
         </Tag>);
         </Tag>);
       default:
       default:
-                return (<Tag size='large' color='grey'>
+        return (<Tag size="large" color="grey">
           未知状态
           未知状态
         </Tag>);
         </Tag>);
     }
     }
@@ -243,7 +243,7 @@ const UsersTable = () => {
     }
     }
     setSearching(true);
     setSearching(true);
     const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
     const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       setUsers(data);
       setUsers(data);
       setActivePage(1);
       setActivePage(1);
@@ -284,14 +284,14 @@ const UsersTable = () => {
 
 
   const closeAddUser = () => {
   const closeAddUser = () => {
     setShowAddUser(false);
     setShowAddUser(false);
-    }
+  };
 
 
   const closeEditUser = () => {
   const closeEditUser = () => {
     setShowEditUser(false);
     setShowEditUser(false);
     setEditingUser({
     setEditingUser({
-            id: undefined,
+      id: undefined
     });
     });
-    }
+  };
 
 
   const refresh = async () => {
   const refresh = async () => {
     if (searchKeyword === '') {
     if (searchKeyword === '') {
@@ -304,14 +304,15 @@ const UsersTable = () => {
   return (
   return (
     <>
     <>
       <AddUser refresh={refresh} visible={showAddUser} handleClose={closeAddUser}></AddUser>
       <AddUser refresh={refresh} visible={showAddUser} handleClose={closeAddUser}></AddUser>
-            <EditUser refresh={refresh} visible={showEditUser} handleClose={closeEditUser} editingUser={editingUser}></EditUser>
+      <EditUser refresh={refresh} visible={showEditUser} handleClose={closeEditUser}
+                editingUser={editingUser}></EditUser>
       <Form onSubmit={searchUsers}>
       <Form onSubmit={searchUsers}>
         <Form.Input
         <Form.Input
-                    label='搜索关键字'
-                    icon='search'
-                    field='keyword'
-                    iconPosition='left'
-                    placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...'
+          label="搜索关键字"
+          icon="search"
+          field="keyword"
+          iconPosition="left"
+          placeholder="搜索用户的 ID，用户名，显示名称，以及邮箱地址 ..."
           value={searchKeyword}
           value={searchKeyword}
           loading={searching}
           loading={searching}
           onChange={value => handleKeywordChange(value)}
           onChange={value => handleKeywordChange(value)}
@@ -323,9 +324,9 @@ const UsersTable = () => {
         pageSize: ITEMS_PER_PAGE,
         pageSize: ITEMS_PER_PAGE,
         total: userCount,
         total: userCount,
         pageSizeOpts: [10, 20, 50, 100],
         pageSizeOpts: [10, 20, 50, 100],
-                onPageChange: handlePageChange,
-            }} loading={loading}/>
-            <Button theme='light' type='primary' style={{marginRight: 8}} onClick={
+        onPageChange: handlePageChange
+      }} loading={loading} />
+      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
         () => {
         () => {
           setShowAddUser(true);
           setShowAddUser(true);
         }
         }

web/src/components/WeChatIcon.js

@@ -3,14 +3,14 @@ import { Icon } from '@douyinfe/semi-ui';
 
 
 const WeChatIcon = () => {
 const WeChatIcon = () => {
   function CustomIcon() {
   function CustomIcon() {
-    return <svg t='1709714447384' className='icon' viewBox='0 0 1024 1024' version='1.1'
-                xmlns='http://www.w3.org/2000/svg' p-id='5091' width='16' height='16'>
+    return <svg t="1709714447384" className="icon" viewBox="0 0 1024 1024" version="1.1"
+                xmlns="http://www.w3.org/2000/svg" p-id="5091" width="16" height="16">
       <path
       <path
-        d='M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z'
-        p-id='5092'></path>
+        d="M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z"
+        p-id="5092"></path>
       <path
       <path
-        d='M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z'
-        p-id='5093'></path>
+        d="M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z"
+        p-id="5093"></path>
     </svg>;
     </svg>;
   }
   }
 
 

web/src/pages/Redemption/EditRedemption.js

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import {API, downloadTextAsFile, isMobile, showError, showSuccess} from '../../helpers';
-import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
-import {SideSheet, Space, Spin, Button, Input, Typography, AutoComplete, Modal} from "@douyinfe/semi-ui";
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {Divider} from "semantic-ui-react";
+import { useNavigate, useParams } from 'react-router-dom';
+import { API, downloadTextAsFile, isMobile, showError, showSuccess } from '../../helpers';
+import { renderQuotaWithPrompt } from '../../helpers/render';
+import { AutoComplete, Button, Input, Modal, SideSheet, Space, Spin, Typography } from '@douyinfe/semi-ui';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Divider } from 'semantic-ui-react';
 
 
 const EditRedemption = (props) => {
 const EditRedemption = (props) => {
   const isEdit = props.editingRedemption.id !== undefined;
   const isEdit = props.editingRedemption.id !== undefined;
   const [loading, setLoading] = useState(isEdit);
   const [loading, setLoading] = useState(isEdit);
 
 
   const params = useParams();
   const params = useParams();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const originInputs = {
   const originInputs = {
     name: '',
     name: '',
     quota: 100000,
     quota: 100000,
@@ -22,7 +22,7 @@ const EditRedemption = (props) => {
 
 
   const handleCancel = () => {
   const handleCancel = () => {
     props.handleClose();
     props.handleClose();
-  }
+  };
 
 
   const handleInputChange = (name, value) => {
   const handleInputChange = (name, value) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
     setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -82,9 +82,9 @@ const EditRedemption = (props) => {
       showError(message);
       showError(message);
     }
     }
     if (!isEdit && data) {
     if (!isEdit && data) {
-      let text = "";
+      let text = '';
       for (let i = 0; i < data.length; i++) {
       for (let i = 0; i < data.length; i++) {
-        text += data[i] + "\n";
+        text += data[i] + '\n';
       }
       }
       // downloadTextAsFile(text, `${inputs.name}.txt`);
       // downloadTextAsFile(text, `${inputs.name}.txt`);
       Modal.confirm({
       Modal.confirm({
@@ -108,14 +108,14 @@ const EditRedemption = (props) => {
       <SideSheet
       <SideSheet
         placement={isEdit ? 'right' : 'left'}
         placement={isEdit ? 'right' : 'left'}
         title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
         title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
-          headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-          bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
+        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         visible={props.visiable}
         visible={props.visiable}
         footer={
         footer={
-            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
             <Space>
-                <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
             </Space>
             </Space>
           </div>
           </div>
         }
         }
@@ -126,49 +126,49 @@ const EditRedemption = (props) => {
         <Spin spinning={loading}>
         <Spin spinning={loading}>
           <Input
           <Input
             style={{ marginTop: 20 }}
             style={{ marginTop: 20 }}
-              label='名称'
-              name='name'
+            label="名称"
+            name="name"
             placeholder={'请输入名称'}
             placeholder={'请输入名称'}
             onChange={value => handleInputChange('name', value)}
             onChange={value => handleInputChange('name', value)}
             value={name}
             value={name}
-              autoComplete='new-password'
+            autoComplete="new-password"
             required={!isEdit}
             required={!isEdit}
           />
           />
-          <Divider/>
+          <Divider />
           <div style={{ marginTop: 20 }}>
           <div style={{ marginTop: 20 }}>
             <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
             <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
           </div>
           </div>
           <AutoComplete
           <AutoComplete
             style={{ marginTop: 8 }}
             style={{ marginTop: 8 }}
-              name='quota'
+            name="quota"
             placeholder={'请输入额度'}
             placeholder={'请输入额度'}
             onChange={(value) => handleInputChange('quota', value)}
             onChange={(value) => handleInputChange('quota', value)}
             value={quota}
             value={quota}
-              autoComplete='new-password'
-              type='number'
+            autoComplete="new-password"
+            type="number"
             position={'bottom'}
             position={'bottom'}
             data={[
             data={[
-                {value: 500000, label: '1$'},
-                {value: 5000000, label: '10$'},
-                {value: 25000000, label: '50$'},
-                {value: 50000000, label: '100$'},
-                {value: 250000000, label: '500$'},
-                {value: 500000000, label: '1000$'},
+              { value: 500000, label: '1$' },
+              { value: 5000000, label: '10$' },
+              { value: 25000000, label: '50$' },
+              { value: 50000000, label: '100$' },
+              { value: 250000000, label: '500$' },
+              { value: 500000000, label: '1000$' }
             ]}
             ]}
           />
           />
           {
           {
             !isEdit && <>
             !isEdit && <>
-                <Divider/>
+              <Divider />
               <Typography.Text>生成数量</Typography.Text>
               <Typography.Text>生成数量</Typography.Text>
               <Input
               <Input
                 style={{ marginTop: 8 }}
                 style={{ marginTop: 8 }}
-                    label='生成数量'
-                    name='count'
+                label="生成数量"
+                name="count"
                 placeholder={'请输入生成数量'}
                 placeholder={'请输入生成数量'}
                 onChange={value => handleInputChange('count', value)}
                 onChange={value => handleInputChange('count', value)}
                 value={count}
                 value={count}
-                    autoComplete='new-password'
-                    type='number'
+                autoComplete="new-password"
+                type="number"
               />
               />
             </>
             </>
           }
           }

web/src/pages/Token/EditToken.js

-import React, {useEffect, useRef, useState} from 'react';
-import {useParams, useNavigate} from 'react-router-dom';
-import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers';
-import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { API, isMobile, showError, showSuccess, timestamp2string } from '../../helpers';
+import { renderQuotaWithPrompt } from '../../helpers/render';
 import {
 import {
-    Layout,
-    SideSheet,
+    AutoComplete,
+    Banner,
     Button,
     Button,
+    Checkbox,
+    DatePicker,
+    Input,
+    Select,
+    SideSheet,
     Space,
     Space,
     Spin,
     Spin,
-    Banner,
-    Input,
-    DatePicker,
-    AutoComplete,
-    Typography,
-    Checkbox, Select
-} from "@douyinfe/semi-ui";
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {Divider} from "semantic-ui-react";
+    Typography
+} from '@douyinfe/semi-ui';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Divider } from 'semantic-ui-react';
 
 
 const EditToken = (props) => {
 const EditToken = (props) => {
   const [isEdit, setIsEdit] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
@@ -27,19 +27,19 @@ const EditToken = (props) => {
     expired_time: -1,
     expired_time: -1,
     unlimited_quota: false,
     unlimited_quota: false,
     model_limits_enabled: false,
     model_limits_enabled: false,
-        model_limits: [],
+    model_limits: []
   };
   };
   const [inputs, setInputs] = useState(originInputs);
   const [inputs, setInputs] = useState(originInputs);
-    const {name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits} = inputs;
+  const { name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits } = inputs;
   // const [visible, setVisible] = useState(false);
   // const [visible, setVisible] = useState(false);
   const [models, setModels] = useState({});
   const [models, setModels] = useState({});
   const navigate = useNavigate();
   const navigate = useNavigate();
   const handleInputChange = (name, value) => {
   const handleInputChange = (name, value) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   };
   const handleCancel = () => {
   const handleCancel = () => {
     props.handleClose();
     props.handleClose();
-    }
+  };
   const setExpiredTime = (month, day, hour, minute) => {
   const setExpiredTime = (month, day, hour, minute) => {
     let now = new Date();
     let now = new Date();
     let timestamp = now.getTime() / 1000;
     let timestamp = now.getTime() / 1000;
@@ -49,19 +49,19 @@ const EditToken = (props) => {
     seconds += minute * 60;
     seconds += minute * 60;
     if (seconds !== 0) {
     if (seconds !== 0) {
       timestamp += seconds;
       timestamp += seconds;
-            setInputs({...inputs, expired_time: timestamp2string(timestamp)});
+      setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
     } else {
     } else {
-            setInputs({...inputs, expired_time: -1});
+      setInputs({ ...inputs, expired_time: -1 });
     }
     }
   };
   };
 
 
   const setUnlimitedQuota = () => {
   const setUnlimitedQuota = () => {
-        setInputs({...inputs, unlimited_quota: !unlimited_quota});
+    setInputs({ ...inputs, unlimited_quota: !unlimited_quota });
   };
   };
 
 
   const loadModels = async () => {
   const loadModels = async () => {
     let res = await API.get(`/api/user/models`);
     let res = await API.get(`/api/user/models`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       let localModelOptions = data.map((model) => ({
       let localModelOptions = data.map((model) => ({
         label: model,
         label: model,
@@ -71,12 +71,12 @@ const EditToken = (props) => {
     } else {
     } else {
       showError(message);
       showError(message);
     }
     }
-    }
+  };
 
 
   const loadToken = async () => {
   const loadToken = async () => {
     setLoading(true);
     setLoading(true);
     let res = await API.get(`/api/token/${props.editingToken.id}`);
     let res = await API.get(`/api/token/${props.editingToken.id}`);
-        const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
     if (success) {
       if (data.expired_time !== -1) {
       if (data.expired_time !== -1) {
         data.expired_time = timestamp2string(data.expired_time);
         data.expired_time = timestamp2string(data.expired_time);
@@ -135,7 +135,7 @@ const EditToken = (props) => {
     setLoading(true);
     setLoading(true);
     if (isEdit) {
     if (isEdit) {
       // 编辑令牌的逻辑保持不变
       // 编辑令牌的逻辑保持不变
-            let localInputs = {...inputs};
+      let localInputs = { ...inputs };
       localInputs.remain_quota = parseInt(localInputs.remain_quota);
       localInputs.remain_quota = parseInt(localInputs.remain_quota);
       if (localInputs.expired_time !== -1) {
       if (localInputs.expired_time !== -1) {
         let time = Date.parse(localInputs.expired_time);
         let time = Date.parse(localInputs.expired_time);
@@ -147,8 +147,8 @@ const EditToken = (props) => {
         localInputs.expired_time = Math.ceil(time / 1000);
         localInputs.expired_time = Math.ceil(time / 1000);
       }
       }
       localInputs.model_limits = localInputs.model_limits.join(',');
       localInputs.model_limits = localInputs.model_limits.join(',');
-            let res = await API.put(`/api/token/`, {...localInputs, id: parseInt(props.editingToken.id)});
-            const {success, message} = res.data;
+      let res = await API.put(`/api/token/`, { ...localInputs, id: parseInt(props.editingToken.id) });
+      const { success, message } = res.data;
       if (success) {
       if (success) {
         showSuccess('令牌更新成功！');
         showSuccess('令牌更新成功！');
         props.refresh();
         props.refresh();
@@ -160,7 +160,7 @@ const EditToken = (props) => {
       // 处理新增多个令牌的情况
       // 处理新增多个令牌的情况
       let successCount = 0; // 记录成功创建的令牌数量
       let successCount = 0; // 记录成功创建的令牌数量
       for (let i = 0; i < tokenCount; i++) {
       for (let i = 0; i < tokenCount; i++) {
-                let localInputs = {...inputs};
+        let localInputs = { ...inputs };
         if (i !== 0) {
         if (i !== 0) {
           // 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
           // 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
           localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
           localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
@@ -178,7 +178,7 @@ const EditToken = (props) => {
         }
         }
         localInputs.model_limits = localInputs.model_limits.join(',');
         localInputs.model_limits = localInputs.model_limits.join(',');
         let res = await API.post(`/api/token/`, localInputs);
         let res = await API.post(`/api/token/`, localInputs);
-                const {success, message} = res.data;
+        const { success, message } = res.data;
 
 
         if (success) {
         if (success) {
           successCount++;
           successCount++;
@@ -200,20 +200,19 @@ const EditToken = (props) => {
   };
   };
 
 
 
 
-
   return (
   return (
     <>
     <>
       <SideSheet
       <SideSheet
         placement={isEdit ? 'right' : 'left'}
         placement={isEdit ? 'right' : 'left'}
         title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>}
         title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>}
-                headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-                bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
+        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         visible={props.visiable}
         visible={props.visiable}
         footer={
         footer={
-                    <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
             <Space>
-                            <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                            <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
             </Space>
             </Space>
           </div>
           </div>
         }
         }
@@ -223,26 +222,26 @@ const EditToken = (props) => {
       >
       >
         <Spin spinning={loading}>
         <Spin spinning={loading}>
           <Input
           <Input
-                        style={{marginTop: 20}}
-                        label='名称'
-                        name='name'
+            style={{ marginTop: 20 }}
+            label="名称"
+            name="name"
             placeholder={'请输入名称'}
             placeholder={'请输入名称'}
             onChange={(value) => handleInputChange('name', value)}
             onChange={(value) => handleInputChange('name', value)}
             value={name}
             value={name}
-                        autoComplete='new-password'
+            autoComplete="new-password"
             required={!isEdit}
             required={!isEdit}
           />
           />
-                    <Divider/>
+          <Divider />
           <DatePicker
           <DatePicker
-                        label='过期时间'
-                        name='expired_time'
+            label="过期时间"
+            name="expired_time"
             placeholder={'请选择过期时间'}
             placeholder={'请选择过期时间'}
             onChange={(value) => handleInputChange('expired_time', value)}
             onChange={(value) => handleInputChange('expired_time', value)}
             value={expired_time}
             value={expired_time}
-                        autoComplete='new-password'
-                        type='dateTime'
+            autoComplete="new-password"
+            type="dateTime"
           />
           />
-                    <div style={{marginTop: 20}}>
+          <div style={{ marginTop: 20 }}>
             <Space>
             <Space>
               <Button type={'tertiary'} onClick={() => {
               <Button type={'tertiary'} onClick={() => {
                 setExpiredTime(0, 0, 0, 0);
                 setExpiredTime(0, 0, 0, 0);
@@ -259,51 +258,51 @@ const EditToken = (props) => {
             </Space>
             </Space>
           </div>
           </div>
 
 
-                    <Divider/>
+          <Divider />
           <Banner type={'warning'}
           <Banner type={'warning'}
                   description={'注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。'}></Banner>
                   description={'注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。'}></Banner>
-                    <div style={{marginTop: 20}}>
+          <div style={{ marginTop: 20 }}>
             <Typography.Text>{`额度${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text>
             <Typography.Text>{`额度${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text>
           </div>
           </div>
           <AutoComplete
           <AutoComplete
-                        style={{marginTop: 8}}
-                        name='remain_quota'
+            style={{ marginTop: 8 }}
+            name="remain_quota"
             placeholder={'请输入额度'}
             placeholder={'请输入额度'}
             onChange={(value) => handleInputChange('remain_quota', value)}
             onChange={(value) => handleInputChange('remain_quota', value)}
             value={remain_quota}
             value={remain_quota}
-                        autoComplete='new-password'
-                        type='number'
+            autoComplete="new-password"
+            type="number"
             // position={'top'}
             // position={'top'}
             data={[
             data={[
-                            {value: 500000, label: '1$'},
-                            {value: 5000000, label: '10$'},
-                            {value: 25000000, label: '50$'},
-                            {value: 50000000, label: '100$'},
-                            {value: 250000000, label: '500$'},
-                            {value: 500000000, label: '1000$'},
+              { value: 500000, label: '1$' },
+              { value: 5000000, label: '10$' },
+              { value: 25000000, label: '50$' },
+              { value: 50000000, label: '100$' },
+              { value: 250000000, label: '500$' },
+              { value: 500000000, label: '1000$' }
             ]}
             ]}
             disabled={unlimited_quota}
             disabled={unlimited_quota}
           />
           />
 
 
           {!isEdit && (
           {!isEdit && (
             <>
             <>
-                            <div style={{marginTop: 20}}>
+              <div style={{ marginTop: 20 }}>
                 <Typography.Text>新建数量</Typography.Text>
                 <Typography.Text>新建数量</Typography.Text>
               </div>
               </div>
               <AutoComplete
               <AutoComplete
                 style={{ marginTop: 8 }}
                 style={{ marginTop: 8 }}
-                                label='数量'
+                label="数量"
                 placeholder={'请选择或输入创建令牌的数量'}
                 placeholder={'请选择或输入创建令牌的数量'}
                 onChange={(value) => handleTokenCountChange(value)}
                 onChange={(value) => handleTokenCountChange(value)}
                 onSelect={(value) => handleTokenCountChange(value)}
                 onSelect={(value) => handleTokenCountChange(value)}
                 value={tokenCount.toString()}
                 value={tokenCount.toString()}
-                                autoComplete='off'
-                                type='number'
+                autoComplete="off"
+                type="number"
                 data={[
                 data={[
                   { value: 10, label: '10个' },
                   { value: 10, label: '10个' },
                   { value: 20, label: '20个' },
                   { value: 20, label: '20个' },
                   { value: 30, label: '30个' },
                   { value: 30, label: '30个' },
-                                    { value: 100, label: '100个' },
+                  { value: 100, label: '100个' }
                 ]}
                 ]}
                 disabled={unlimited_quota}
                 disabled={unlimited_quota}
               />
               />
@@ -311,15 +310,15 @@ const EditToken = (props) => {
           )}
           )}
 
 
           <div>
           <div>
-                        <Button style={{marginTop: 8}} type={'warning'} onClick={() => {
+            <Button style={{ marginTop: 8 }} type={'warning'} onClick={() => {
               setUnlimitedQuota();
               setUnlimitedQuota();
             }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
             }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
           </div>
           </div>
-                    <Divider/>
-                    <div style={{marginTop: 10, display: 'flex'}}>
+          <Divider />
+          <div style={{ marginTop: 10, display: 'flex' }}>
             <Space>
             <Space>
               <Checkbox
               <Checkbox
-                                name='model_limits_enabled'
+                name="model_limits_enabled"
                 checked={model_limits_enabled}
                 checked={model_limits_enabled}
                 onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
                 onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
               >
               >
@@ -329,9 +328,9 @@ const EditToken = (props) => {
           </div>
           </div>
 
 
           <Select
           <Select
-                        style={{marginTop: 8}}
+            style={{ marginTop: 8 }}
             placeholder={'请选择该渠道所支持的模型'}
             placeholder={'请选择该渠道所支持的模型'}
-                        name='models'
+            name="models"
             required
             required
             multiple
             multiple
             selection
             selection
@@ -339,7 +338,7 @@ const EditToken = (props) => {
               handleInputChange('model_limits', value);
               handleInputChange('model_limits', value);
             }}
             }}
             value={inputs.model_limits}
             value={inputs.model_limits}
-                        autoComplete='new-password'
+            autoComplete="new-password"
             optionList={models}
             optionList={models}
             disabled={!model_limits_enabled}
             disabled={!model_limits_enabled}
           />
           />

web/src/pages/User/AddUser.js

-import React, {useState} from 'react';
-import {API, isMobile, showError, showSuccess} from '../../helpers';
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {Button, SideSheet, Space, Input, Spin} from "@douyinfe/semi-ui";
+import React, { useState } from 'react';
+import { API, isMobile, showError, showSuccess } from '../../helpers';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Button, Input, SideSheet, Space, Spin } from '@douyinfe/semi-ui';
 
 
 const AddUser = (props) => {
 const AddUser = (props) => {
   const originInputs = {
   const originInputs = {
     username: '',
     username: '',
     display_name: '',
     display_name: '',
-        password: '',
+    password: ''
   };
   };
   const [inputs, setInputs] = useState(originInputs);
   const [inputs, setInputs] = useState(originInputs);
   const [loading, setLoading] = useState(false);
   const [loading, setLoading] = useState(false);
-    const {username, display_name, password} = inputs;
+  const { username, display_name, password } = inputs;
 
 
   const handleInputChange = (name, value) => {
   const handleInputChange = (name, value) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   };
 
 
   const submit = async () => {
   const submit = async () => {
     setLoading(true);
     setLoading(true);
     if (inputs.username === '' || inputs.password === '') return;
     if (inputs.username === '' || inputs.password === '') return;
     const res = await API.post(`/api/user/`, inputs);
     const res = await API.post(`/api/user/`, inputs);
-        const {success, message} = res.data;
+    const { success, message } = res.data;
     if (success) {
     if (success) {
       showSuccess('用户账户创建成功！');
       showSuccess('用户账户创建成功！');
       setInputs(originInputs);
       setInputs(originInputs);
@@ -35,21 +35,21 @@ const AddUser = (props) => {
 
 
   const handleCancel = () => {
   const handleCancel = () => {
     props.handleClose();
     props.handleClose();
-    }
+  };
 
 
   return (
   return (
     <>
     <>
       <SideSheet
       <SideSheet
         placement={'left'}
         placement={'left'}
         title={<Title level={3}>{'添加用户'}</Title>}
         title={<Title level={3}>{'添加用户'}</Title>}
-                headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-                bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
+        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         visible={props.visible}
         visible={props.visible}
         footer={
         footer={
-                    <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
             <Space>
-                            <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                            <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
             </Space>
             </Space>
           </div>
           </div>
         }
         }
@@ -59,7 +59,7 @@ const AddUser = (props) => {
       >
       >
         <Spin spinning={loading}>
         <Spin spinning={loading}>
           <Input
           <Input
-                        style={{marginTop: 20}}
+            style={{ marginTop: 20 }}
             label="用户名"
             label="用户名"
             name="username"
             name="username"
             addonBefore={'用户名'}
             addonBefore={'用户名'}
@@ -69,7 +69,7 @@ const AddUser = (props) => {
             autoComplete="off"
             autoComplete="off"
           />
           />
           <Input
           <Input
-                        style={{marginTop: 20}}
+            style={{ marginTop: 20 }}
             addonBefore={'显示名'}
             addonBefore={'显示名'}
             label="显示名称"
             label="显示名称"
             name="display_name"
             name="display_name"
@@ -79,7 +79,7 @@ const AddUser = (props) => {
             value={display_name}
             value={display_name}
           />
           />
           <Input
           <Input
-                        style={{marginTop: 20}}
+            style={{ marginTop: 20 }}
             label="密 码"
             label="密 码"
             name="password"
             name="password"
             type={'password'}
             type={'password'}

web/src/pages/User/EditUser.js

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
-import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import { SideSheet, Space, Button, Spin, Input, Typography, Select, Divider } from "@douyinfe/semi-ui";
+import { renderQuotaWithPrompt } from '../../helpers/render';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import { Button, Divider, Input, Select, SideSheet, Space, Spin, Typography } from '@douyinfe/semi-ui';
 
 
 const EditUser = (props) => {
 const EditUser = (props) => {
   const userId = props.editingUser.id;
   const userId = props.editingUser.id;
@@ -29,7 +29,7 @@ const EditUser = (props) => {
       let res = await API.get(`/api/group/`);
       let res = await API.get(`/api/group/`);
       setGroupOptions(res.data.data.map((group) => ({
       setGroupOptions(res.data.data.map((group) => ({
         label: group,
         label: group,
-        value: group,
+        value: group
       })));
       })));
     } catch (error) {
     } catch (error) {
       showError(error.message);
       showError(error.message);
@@ -38,7 +38,7 @@ const EditUser = (props) => {
   const navigate = useNavigate();
   const navigate = useNavigate();
   const handleCancel = () => {
   const handleCancel = () => {
     props.handleClose();
     props.handleClose();
-  }
+  };
   const loadUser = async () => {
   const loadUser = async () => {
     setLoading(true);
     setLoading(true);
     let res = undefined;
     let res = undefined;
@@ -98,8 +98,8 @@ const EditUser = (props) => {
         footer={
         footer={
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
             <Space>
-              <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-              <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              <Button theme="solid" size={'large'} onClick={submit}>提交</Button>
+              <Button theme="solid" size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
             </Space>
             </Space>
           </div>
           </div>
         }
         }
@@ -112,35 +112,35 @@ const EditUser = (props) => {
             <Typography.Text>用户名</Typography.Text>
             <Typography.Text>用户名</Typography.Text>
           </div>
           </div>
           <Input
           <Input
-            label='用户名'
-            name='username'
+            label="用户名"
+            name="username"
             placeholder={'请输入新的用户名'}
             placeholder={'请输入新的用户名'}
             onChange={value => handleInputChange('username', value)}
             onChange={value => handleInputChange('username', value)}
             value={username}
             value={username}
-            autoComplete='new-password'
+            autoComplete="new-password"
           />
           />
           <div style={{ marginTop: 20 }}>
           <div style={{ marginTop: 20 }}>
             <Typography.Text>密码</Typography.Text>
             <Typography.Text>密码</Typography.Text>
           </div>
           </div>
           <Input
           <Input
-            label='密码'
-            name='password'
+            label="密码"
+            name="password"
             type={'password'}
             type={'password'}
             placeholder={'请输入新的密码，最短 8 位'}
             placeholder={'请输入新的密码，最短 8 位'}
             onChange={value => handleInputChange('password', value)}
             onChange={value => handleInputChange('password', value)}
             value={password}
             value={password}
-            autoComplete='new-password'
+            autoComplete="new-password"
           />
           />
           <div style={{ marginTop: 20 }}>
           <div style={{ marginTop: 20 }}>
             <Typography.Text>显示名称</Typography.Text>
             <Typography.Text>显示名称</Typography.Text>
           </div>
           </div>
           <Input
           <Input
-            label='显示名称'
-            name='display_name'
+            label="显示名称"
+            name="display_name"
             placeholder={'请输入新的显示名称'}
             placeholder={'请输入新的显示名称'}
             onChange={value => handleInputChange('display_name', value)}
             onChange={value => handleInputChange('display_name', value)}
             value={display_name}
             value={display_name}
-            autoComplete='new-password'
+            autoComplete="new-password"
           />
           />
           {
           {
             userId && <>
             userId && <>
@@ -149,7 +149,7 @@ const EditUser = (props) => {
               </div>
               </div>
               <Select
               <Select
                 placeholder={'请选择分组'}
                 placeholder={'请选择分组'}
-                name='group'
+                name="group"
                 fluid
                 fluid
                 search
                 search
                 selection
                 selection
@@ -157,19 +157,19 @@ const EditUser = (props) => {
                 additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
                 additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
                 onChange={value => handleInputChange('group', value)}
                 onChange={value => handleInputChange('group', value)}
                 value={inputs.group}
                 value={inputs.group}
-                autoComplete='new-password'
+                autoComplete="new-password"
                 optionList={groupOptions}
                 optionList={groupOptions}
               />
               />
               <div style={{ marginTop: 20 }}>
               <div style={{ marginTop: 20 }}>
                 <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
                 <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
               </div>
               </div>
               <Input
               <Input
-                name='quota'
+                name="quota"
                 placeholder={'请输入新的剩余额度'}
                 placeholder={'请输入新的剩余额度'}
                 onChange={value => handleInputChange('quota', value)}
                 onChange={value => handleInputChange('quota', value)}
                 value={quota}
                 value={quota}
                 type={'number'}
                 type={'number'}
-                autoComplete='new-password'
+                autoComplete="new-password"
               />
               />
             </>
             </>
           }
           }
@@ -178,37 +178,37 @@ const EditUser = (props) => {
             <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
             <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
           </div>
           </div>
           <Input
           <Input
-            name='github_id'
+            name="github_id"
             value={github_id}
             value={github_id}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
             readonly
           />
           />
           <div style={{ marginTop: 20 }}>
           <div style={{ marginTop: 20 }}>
             <Typography.Text>已绑定的微信账户</Typography.Text>
             <Typography.Text>已绑定的微信账户</Typography.Text>
           </div>
           </div>
           <Input
           <Input
-            name='wechat_id'
+            name="wechat_id"
             value={wechat_id}
             value={wechat_id}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
             readonly
           />
           />
           <Input
           <Input
-            name='telegram_id'
+            name="telegram_id"
             value={telegram_id}
             value={telegram_id}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
             readonly
           />
           />
           <div style={{ marginTop: 20 }}>
           <div style={{ marginTop: 20 }}>
             <Typography.Text>已绑定的邮箱账户</Typography.Text>
             <Typography.Text>已绑定的邮箱账户</Typography.Text>
           </div>
           </div>
           <Input
           <Input
-            name='email'
+            name="email"
             value={email}
             value={email}
-            autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            autoComplete="new-password"
+            placeholder="此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改"
             readonly
             readonly
           />
           />
         </Spin>
         </Spin>