chore: lint fix

2025-11-13 01:23:41 +08:00 · 2024-03-23 21:24:39 +08:00
parent 15e7307320
commit 962dc984f4
55 changed files with 5263 additions and 3589 deletions
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -1,31 +1,39 @@
 import React, { useEffect, useState } from 'react';
-import { API, isMobile, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string } from '../helpers';
+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 {
-    Button,
-    Dropdown,
-    Form,
-    InputNumber,
-    Popconfirm,
-    Space,
-    SplitButtonGroup,
-    Switch,
-    Table,
-    Tag,
-    Tooltip,
-    Typography
+  renderGroup,
+  renderNumberWithPoint,
+  renderQuota,
+} from '../helpers/render';
+import {
+  Button,
+  Dropdown,
+  Form,
+  InputNumber,
+  Popconfirm,
+  Space,
+  SplitButtonGroup,
+  Switch,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
 } from '@douyinfe/semi-ui';
 import EditChannel from '../pages/Channel/EditChannel';
 import { IconTreeTriangleDown } from '@douyinfe/semi-icons';

 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }

 let type2label = undefined;
@@ -38,7 +46,11 @@ function renderType(type) {
    }
    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 = () => {
@@ -50,11 +62,11 @@ const ChannelsTable = () => {
    // },
    {
      title: 'ID',
-      dataIndex: 'id'
+      dataIndex: 'id',
    },
    {
      title: '名称',
-      dataIndex: 'name'
+      dataIndex: 'name',
    },
    {
      title: '分组',
@@ -63,48 +75,34 @@ const ChannelsTable = () => {
        return (
          <div>
            <Space spacing={2}>
-              {
-                text.split(',').map((item, index) => {
-                  return (renderGroup(item));
-                })
-              }
+              {text.split(',').map((item, index) => {
+                return renderGroup(item);
+              })}
            </Space>
          </div>
        );
-      }
+      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderType(text)}
-          </div>
-        );
-      }
+        return <div>{renderType(text)}</div>;
+      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderStatus(text)}
-          </div>
-        );
-      }
+        return <div>{renderStatus(text)}</div>;
+      },
    },
    {
      title: '响应时间',
      dataIndex: 'response_time',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderResponseTime(text)}
-          </div>
-        );
-      }
+        return <div>{renderResponseTime(text)}</div>;
+      },
    },
    {
      title: '已用/剩余',
@@ -114,17 +112,26 @@ const ChannelsTable = () => {
          <div>
            <Space spacing={1}>
              <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 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>
            </Space>
          </div>
        );
-      }
+      },
    },
    {
      title: '优先级',
@@ -134,8 +141,8 @@ const ChannelsTable = () => {
          <div>
            <InputNumber
              style={{ width: 70 }}
-              name="priority"
-              onBlur={e => {
+              name='priority'
+              onBlur={(e) => {
                manageChannel(record.id, 'priority', record, e.target.value);
              }}
              keepFocus={true}
@@ -145,7 +152,7 @@ const ChannelsTable = () => {
            />
          </div>
        );
-      }
+      },
    },
    {
      title: '权重',
@@ -155,8 +162,8 @@ const ChannelsTable = () => {
          <div>
            <InputNumber
              style={{ width: 70 }}
-              name="weight"
-              onBlur={e => {
+              name='weight'
+              onBlur={(e) => {
                manageChannel(record.id, 'weight', record, e.target.value);
              }}
              keepFocus={true}
@@ -166,68 +173,90 @@ const ChannelsTable = () => {
            />
          </div>
        );
-      }
+      },
    },
    {
      title: '',
      dataIndex: 'operate',
      render: (text, record, index) => (
        <div>
-          <SplitButtonGroup style={{ marginRight: 1 }} aria-label="测试操作项目组">
-            <Button theme="light" onClick={() => {
-              testChannel(record, '');
-            }}>测试</Button>
-            <Dropdown trigger="click" position="bottomRight" menu={record.test_models}
+          <SplitButtonGroup
+            style={{ marginRight: 1 }}
+            aria-label='测试操作项目组'
+          >
+            <Button
+              theme='light'
+              onClick={() => {
+                testChannel(record, '');
+              }}
            >
-              <Button style={{ padding: '8px 4px' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
+              测试
+            </Button>
+            <Dropdown
+              trigger='click'
+              position='bottomRight'
+              menu={record.test_models}
+            >
+              <Button
+                style={{ padding: '8px 4px' }}
+                type='primary'
+                icon={<IconTreeTriangleDown />}
+              ></Button>
            </Dropdown>
          </SplitButtonGroup>
          {/*<Button theme='light' type='primary' style={{marginRight: 1}} onClick={()=>testChannel(record)}>测试</Button>*/}
          <Popconfirm
-            title="确定是否要删除此渠道？"
-            content="此修改将不可逆"
+            title='确定是否要删除此渠道？'
+            content='此修改将不可逆'
            okType={'danger'}
            position={'left'}
            onConfirm={() => {
-              manageChannel(record.id, 'delete', record).then(
-                () => {
-                  removeRecord(record.id);
-                }
-              );
+              manageChannel(record.id, 'delete', record).then(() => {
+                removeRecord(record.id);
+              });
            }}
          >
-            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+            <Button theme='light' type='danger' style={{ marginRight: 1 }}>
+              删除
+            </Button>
          </Popconfirm>
-          {
-            record.status === 1 ?
-              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
-                async () => {
-                  manageChannel(
-                    record.id,
-                    'disable',
-                    record
-                  );
-                }
-              }>禁用</Button> :
-              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
-                async () => {
-                  manageChannel(
-                    record.id,
-                    'enable',
-                    record
-                  );
-                }
-              }>启用</Button>
-          }
-          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
-            () => {
+          {record.status === 1 ? (
+            <Button
+              theme='light'
+              type='warning'
+              style={{ marginRight: 1 }}
+              onClick={async () => {
+                manageChannel(record.id, 'disable', record);
+              }}
+            >
+              禁用
+            </Button>
+          ) : (
+            <Button
+              theme='light'
+              type='secondary'
+              style={{ marginRight: 1 }}
+              onClick={async () => {
+                manageChannel(record.id, 'enable', record);
+              }}
+            >
+              启用
+            </Button>
+          )}
+          <Button
+            theme='light'
+            type='tertiary'
+            style={{ marginRight: 1 }}
+            onClick={() => {
              setEditingChannel(record);
              setShowEdit(true);
-            }
-          }>编辑</Button>
+            }}
+          >
+            编辑
+          </Button>
        </div>
-      )
-    }
+      ),
+    },
  ];

  const [channels, setChannels] = useState([]);
@@ -240,20 +269,22 @@ const ChannelsTable = () => {
  const [searching, setSearching] = useState(false);
  const [updatingBalance, setUpdatingBalance] = useState(false);
  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 [groupOptions, setGroupOptions] = useState([]);
  const [showEdit, setShowEdit] = useState(false);
  const [enableBatchDelete, setEnableBatchDelete] = useState(false);
  const [editingChannel, setEditingChannel] = useState({
-    id: undefined
+    id: undefined,
  });
  const [selectedChannels, setSelectedChannels] = useState([]);

-  const removeRecord = id => {
+  const removeRecord = (id) => {
    let newDataSource = [...channels];
    if (id != null) {
-      let idx = newDataSource.findIndex(data => data.id === id);
+      let idx = newDataSource.findIndex((data) => data.id === id);

      if (idx > -1) {
        newDataSource.splice(idx, 1);
@@ -272,7 +303,7 @@ const ChannelsTable = () => {
          name: item,
          onClick: () => {
            testChannel(channels[i], item);
-          }
+          },
        });
      });
      channels[i].test_models = test_models;
@@ -288,7 +319,9 @@ const ChannelsTable = () => {

  const loadChannels = async (startIdx, pageSize, idSort) => {
    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;
    if (success) {
      if (startIdx === 0) {
@@ -311,7 +344,8 @@ const ChannelsTable = () => {
  useEffect(() => {
    // console.log('default effect')
    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);
    loadChannels(0, localPageSize, localIdSort)
@@ -361,7 +395,6 @@ const ChannelsTable = () => {
      let channel = res.data.data;
      let newChannels = [...channels];
      if (action === 'delete') {
-
      } else {
        record.status = channel.status;
      }
@@ -374,22 +407,26 @@ const ChannelsTable = () => {
  const renderStatus = (status) => {
    switch (status) {
      case 1:
-        return <Tag size="large" color="green">已启用</Tag>;
+        return (
+          <Tag size='large' color='green'>
+            已启用
+          </Tag>
+        );
      case 2:
        return (
-          <Tag size="large" color="yellow">
+          <Tag size='large' color='yellow'>
            已禁用
          </Tag>
        );
      case 3:
        return (
-          <Tag size="large" color="yellow">
+          <Tag size='large' color='yellow'>
            自动禁用
          </Tag>
        );
      default:
        return (
-          <Tag size="large" color="grey">
+          <Tag size='large' color='grey'>
            未知状态
          </Tag>
        );
@@ -400,15 +437,35 @@ const ChannelsTable = () => {
    let time = responseTime / 1000;
    time = time.toFixed(2) + ' 秒';
    if (responseTime === 0) {
-      return <Tag size="large" color="grey">未测试</Tag>;
+      return (
+        <Tag size='large' color='grey'>
+          未测试
+        </Tag>
+      );
    } else if (responseTime <= 1000) {
-      return <Tag size="large" color="green">{time}</Tag>;
+      return (
+        <Tag size='large' color='green'>
+          {time}
+        </Tag>
+      );
    } else if (responseTime <= 3000) {
-      return <Tag size="large" color="lime">{time}</Tag>;
+      return (
+        <Tag size='large' color='lime'>
+          {time}
+        </Tag>
+      );
    } else if (responseTime <= 5000) {
-      return <Tag size="large" color="yellow">{time}</Tag>;
+      return (
+        <Tag size='large' color='yellow'>
+          {time}
+        </Tag>
+      );
    } else {
-      return <Tag size="large" color="red">{time}</Tag>;
+      return (
+        <Tag size='large' color='red'>
+          {time}
+        </Tag>
+      );
    }
  };

@@ -420,7 +477,9 @@ const ChannelsTable = () => {
      return;
    }
    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;
    if (success) {
      setChannels(data);
@@ -520,14 +579,16 @@ const ChannelsTable = () => {
    }
  };

-  let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize);
+  let pageData = channels.slice(
+    (activePage - 1) * pageSize,
+    activePage * pageSize,
+  );

-  const handlePageChange = page => {
+  const handlePageChange = (page) => {
    setActivePage(page);
    if (page === Math.ceil(channels.length / pageSize) + 1) {
      // In this case we have to load more data and then append them.
-      loadChannels(page - 1, pageSize, idSort).then(r => {
-      });
+      loadChannels(page - 1, pageSize, idSort).then((r) => {});
    }
  };

@@ -547,10 +608,12 @@ const ChannelsTable = () => {
      let res = await API.get(`/api/group/`);
      // add 'all' option
      // res.data.data.unshift('all');
-      setGroupOptions(res.data.data.map((group) => ({
-        label: group,
-        value: group
-      })));
+      setGroupOptions(
+        res.data.data.map((group) => ({
+          label: group,
+          value: group,
+        })),
+      );
    } catch (error) {
      showError(error.message);
    }
@@ -564,27 +627,34 @@ const ChannelsTable = () => {
    if (record.status !== 1) {
      return {
        style: {
-          background: 'var(--semi-color-disabled-border)'
-        }
+          background: 'var(--semi-color-disabled-border)',
+        },
      };
    } else {
      return {};
    }
  };

-
  return (
    <>
-      <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} />
-      <Form onSubmit={() => {
-        searchChannels(searchKeyword, searchGroup, searchModel);
-      }} labelPosition="left">
+      <EditChannel
+        refresh={refresh}
+        visible={showEdit}
+        handleClose={closeEdit}
+        editingChannel={editingChannel}
+      />
+      <Form
+        onSubmit={() => {
+          searchChannels(searchKeyword, searchGroup, searchModel);
+        }}
+        labelPosition='left'
+      >
        <div style={{ display: 'flex' }}>
          <Space>
            <Form.Input
-              field="search_keyword"
-              label="搜索渠道关键词"
-              placeholder="ID，名称和密钥 ..."
+              field='search_keyword'
+              label='搜索渠道关键词'
+              placeholder='ID，名称和密钥 ...'
              value={searchKeyword}
              loading={searching}
              onChange={(v) => {
@@ -592,21 +662,33 @@ const ChannelsTable = () => {
              }}
            />
            <Form.Input
-              field="search_model"
-              label="模型"
-              placeholder="模型关键字"
+              field='search_model'
+              label='模型'
+              placeholder='模型关键字'
              value={searchModel}
              loading={searching}
              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>
        </div>
      </Form>
@@ -614,80 +696,118 @@ const ChannelsTable = () => {
        <Space>
          <Space>
            <Typography.Text strong>使用ID排序</Typography.Text>
-            <Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
-              localStorage.setItem('id-sort', v + '');
-              setIdSort(v);
-              loadChannels(0, pageSize, v)
-                .then()
-                .catch((reason) => {
-                  showError(reason);
-                });
-            }}></Switch>
+            <Switch
+              checked={idSort}
+              label='使用ID排序'
+              uncheckedText='关'
+              aria-label='是否用ID排序'
+              onChange={(v) => {
+                localStorage.setItem('id-sort', v + '');
+                setIdSort(v);
+                loadChannels(0, pageSize, v)
+                  .then()
+                  .catch((reason) => {
+                    showError(reason);
+                  });
+              }}
+            ></Switch>
          </Space>
        </Space>
      </div>

-      <Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
-        currentPage: activePage,
-        pageSize: pageSize,
-        total: channelCount,
-        pageSizeOpts: [10, 20, 50, 100],
-        showSizeChanger: true,
-        formatPageText: (page) => '',
-        onPageSizeChange: (size) => {
-          handlePageSizeChange(size).then();
-        },
-        onPageChange: handlePageChange
-      }} loading={loading} onRow={handleRow} rowSelection={
-        enableBatchDelete ?
-          {
-            onChange: (selectedRowKeys, selectedRows) => {
-              // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-              setSelectedChannels(selectedRows);
-            }
-          } : 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={
-            () => {
+      <Table
+        className={'channel-table'}
+        style={{ marginTop: 15 }}
+        columns={columns}
+        dataSource={pageData}
+        pagination={{
+          currentPage: activePage,
+          pageSize: pageSize,
+          total: channelCount,
+          pageSizeOpts: [10, 20, 50, 100],
+          showSizeChanger: true,
+          formatPageText: (page) => '',
+          onPageSizeChange: (size) => {
+            handlePageSizeChange(size).then();
+          },
+          onPageChange: handlePageChange,
+        }}
+        loading={loading}
+        onRow={handleRow}
+        rowSelection={
+          enableBatchDelete
+            ? {
+                onChange: (selectedRowKeys, selectedRows) => {
+                  // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+                  setSelectedChannels(selectedRows);
+                },
+              }
+            : 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={() => {
              setEditingChannel({
-                id: undefined
+                id: undefined,
              });
              setShowEdit(true);
-            }
-          }>添加渠道</Button>
+            }}
+          >
+            添加渠道
+          </Button>
          <Popconfirm
-            title="确定？"
+            title='确定？'
            okType={'warning'}
            onConfirm={testAllChannels}
            position={isMobile() ? 'top' : 'top'}
          >
-            <Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
+            <Button theme='light' type='warning' style={{ marginRight: 8 }}>
+              测试所有通道
+            </Button>
          </Popconfirm>
          <Popconfirm
-            title="确定？"
+            title='确定？'
            okType={'secondary'}
            onConfirm={updateAllChannelsBalance}
          >
-            <Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
+            <Button theme='light' type='secondary' style={{ marginRight: 8 }}>
+              更新所有已启用通道余额
+            </Button>
          </Popconfirm>
          <Popconfirm
-            title="确定是否要删除禁用通道？"
-            content="此修改将不可逆"
+            title='确定是否要删除禁用通道？'
+            content='此修改将不可逆'
            okType={'danger'}
            onConfirm={deleteAllDisabledChannels}
          >
-            <Button theme="light" type="danger" style={{ marginRight: 8 }}>删除禁用通道</Button>
+            <Button theme='light' type='danger' style={{ marginRight: 8 }}>
+              删除禁用通道
+            </Button>
          </Popconfirm>

-          <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={refresh}>刷新</Button>
+          <Button
+            theme='light'
+            type='primary'
+            style={{ marginRight: 8 }}
+            onClick={refresh}
+          >
+            刷新
+          </Button>
        </Space>
        {/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}

@@ -696,28 +816,41 @@ const ChannelsTable = () => {
      <div style={{ marginTop: 20 }}>
        <Space>
          <Typography.Text strong>开启批量删除</Typography.Text>
-          <Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
-            setEnableBatchDelete(v);
-          }}></Switch>
+          <Switch
+            label='开启批量删除'
+            uncheckedText='关'
+            aria-label='是否开启批量删除'
+            onChange={(v) => {
+              setEnableBatchDelete(v);
+            }}
+          ></Switch>
          <Popconfirm
-            title="确定是否要删除所选通道？"
-            content="此修改将不可逆"
+            title='确定是否要删除所选通道？'
+            content='此修改将不可逆'
            okType={'danger'}
            onConfirm={batchDeleteChannels}
            disabled={!enableBatchDelete}
            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
-            title="确定是否要修复数据库一致性？"
-            content="进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用"
+            title='确定是否要修复数据库一致性？'
+            content='进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用'
            okType={'warning'}
            onConfirm={fixChannelsAbilities}
            position={'top'}
          >
-            <Button theme="light" type="secondary" style={{ marginRight: 8 }}>修复数据库一致性</Button>
+            <Button theme='light' type='secondary' style={{ marginRight: 8 }}>
+              修复数据库一致性
+            </Button>
          </Popconfirm>
        </Space>
      </div>
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -32,27 +32,36 @@ const Footer = () => {
      <Layout.Content style={{ textAlign: 'center' }}>
        {footer ? (
          <div
-            className="custom-footer"
+            className='custom-footer'
            dangerouslySetInnerHTML={{ __html: footer }}
          ></div>
        ) : (
-          <div className="custom-footer">
+          <div className='custom-footer'>
            <a
-              href="https://github.com/Calcium-Ion/new-api"
-              target="_blank" rel="noreferrer"
+              href='https://github.com/Calcium-Ion/new-api'
+              target='_blank'
+              rel='noreferrer'
            >
              New API {import.meta.env.VITE_REACT_APP_VERSION}{' '}
            </a>
            由{' '}
-            <a href="https://github.com/Calcium-Ion" target="_blank" rel="noreferrer">
+            <a
+              href='https://github.com/Calcium-Ion'
+              target='_blank'
+              rel='noreferrer'
+            >
              Calcium-Ion
            </a>{' '}
            开发，基于{' '}
-            <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noreferrer">
+            <a
+              href='https://github.com/songquanpeng/one-api'
+              target='_blank'
+              rel='noreferrer'
+            >
              One API v0.5.4
            </a>{' '}
            ，本项目根据{' '}
-            <a href="https://opensource.org/licenses/mit-license.php">
+            <a href='https://opensource.org/licenses/mit-license.php'>
              MIT 许可证
            </a>{' '}
            授权
--- a/web/src/components/GitHubOAuth.js
+++ b/web/src/components/GitHubOAuth.js
@@ -49,7 +49,7 @@ const GitHubOAuth = () => {
  return (
    <Segment style={{ minHeight: '300px' }}>
      <Dimmer active inverted>
-        <Loader size="large">{prompt}</Loader>
+        <Loader size='large'>{prompt}</Loader>
      </Dimmer>
    </Segment>
  );
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -17,15 +17,15 @@ let headerButtons = [
    text: '关于',
    itemKey: 'about',
    to: '/about',
-    icon: <IconHelpCircle />
-  }
+    icon: <IconHelpCircle />,
+  },
 ];

 if (localStorage.getItem('chat_link')) {
  headerButtons.splice(1, 0, {
    name: '聊天',
    to: '/chat',
-    icon: 'comments'
+    icon: 'comments',
  });
 }

@@ -40,7 +40,11 @@ const HeaderBar = () => {
  var themeMode = localStorage.getItem('theme-mode');
  const currentDate = new Date();
  // enable fireworks on new year(1.1 and 2.9-2.24)
-  const isNewYear = (currentDate.getMonth() === 0 && currentDate.getDate() === 1) || (currentDate.getMonth() === 1 && currentDate.getDate() >= 9 && currentDate.getDate() <= 24);
+  const isNewYear =
+    (currentDate.getMonth() === 0 && currentDate.getDate() === 1) ||
+    (currentDate.getMonth() === 1 &&
+      currentDate.getDate() >= 9 &&
+      currentDate.getDate() <= 24);

  async function logout() {
    setShowSidebar(false);
@@ -93,7 +97,7 @@ const HeaderBar = () => {
              const routerMap = {
                about: '/about',
                login: '/login',
-                register: '/register'
+                register: '/register',
              };
              return (
                <Link
@@ -106,52 +110,69 @@ const HeaderBar = () => {
            }}
            selectedKeys={[]}
            // items={headerButtons}
-            onSelect={key => {
-
-            }}
+            onSelect={(key) => {}}
            footer={
              <>
-                {isNewYear &&
+                {isNewYear && (
                  // happy new year
                  <Dropdown
-                    position="bottomRight"
+                    position='bottomRight'
                    render={
                      <Dropdown.Menu>
-                        <Dropdown.Item onClick={handleNewYearClick}>Happy New Year!!!</Dropdown.Item>
+                        <Dropdown.Item onClick={handleNewYearClick}>
+                          Happy New Year!!!
+                        </Dropdown.Item>
                      </Dropdown.Menu>
                    }
                  >
                    <Nav.Item itemKey={'new-year'} text={'🏮'} />
                  </Dropdown>
-                }
+                )}
                <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
-                <Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
-                {userState.user ?
+                <Switch
+                  checkedText='🌞'
+                  size={'large'}
+                  checked={dark}
+                  uncheckedText='🌙'
+                  onChange={switchMode}
+                />
+                {userState.user ? (
                  <>
                    <Dropdown
-                      position="bottomRight"
+                      position='bottomRight'
                      render={
                        <Dropdown.Menu>
                          <Dropdown.Item onClick={logout}>退出</Dropdown.Item>
                        </Dropdown.Menu>
                      }
                    >
-                      <Avatar size="small" color={stringToColor(userState.user.username)} style={{ margin: 4 }}>
+                      <Avatar
+                        size='small'
+                        color={stringToColor(userState.user.username)}
+                        style={{ margin: 4 }}
+                      >
                        {userState.user.username[0]}
                      </Avatar>
                      <span>{userState.user.username}</span>
                    </Dropdown>
                  </>
-                  :
+                ) : (
                  <>
-                    <Nav.Item itemKey={'login'} text={'登录'} icon={<IconKey />} />
-                    <Nav.Item itemKey={'register'} text={'注册'} icon={<IconUser />} />
+                    <Nav.Item
+                      itemKey={'login'}
+                      text={'登录'}
+                      icon={<IconKey />}
+                    />
+                    <Nav.Item
+                      itemKey={'register'}
+                      text={'注册'}
+                      icon={<IconUser />}
+                    />
                  </>
-                }
+                )}
              </>
            }
-          >
-          </Nav>
+          ></Nav>
        </div>
      </Layout>
    </>
--- a/web/src/components/Loading.js
+++ b/web/src/components/Loading.js
@@ -3,7 +3,9 @@ import { Spin } from '@douyinfe/semi-ui';

 const Loading = ({ prompt: name = 'page' }) => {
  return (
-    <Spin style={{height: 100}} spinning={true}>加载{name}中...</Spin>
+    <Spin style={{ height: 100 }} spinning={true}>
+      加载{name}中...
+    </Spin>
  );
 };

--- a/web/src/components/LoginForm.js
+++ b/web/src/components/LoginForm.js
@@ -4,7 +4,15 @@ import { UserContext } from '../context/User';
 import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
 import { onGitHubOAuthClicked } from './utils';
 import Turnstile from 'react-turnstile';
-import { Button, Card, Divider, Form, Icon, Layout, Modal } from '@douyinfe/semi-ui';
+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';
@@ -16,7 +24,7 @@ const LoginForm = () => {
  const [inputs, setInputs] = useState({
    username: '',
    password: '',
-    wechat_verification_code: ''
+    wechat_verification_code: '',
  });
  const [searchParams, setSearchParams] = useSearchParams();
  const [submitted, setSubmitted] = useState(false);
@@ -56,7 +64,7 @@ const LoginForm = () => {
      return;
    }
    const res = await API.get(
-      `/api/oauth/wechat?code=${inputs.wechat_verification_code}`
+      `/api/oauth/wechat?code=${inputs.wechat_verification_code}`,
    );
    const { success, message, data } = res.data;
    if (success) {
@@ -81,17 +89,24 @@ const LoginForm = () => {
    }
    setSubmitted(true);
    if (username && password) {
-      const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
-        username,
-        password
-      });
+      const res = await API.post(
+        `/api/user/login?turnstile=${turnstileToken}`,
+        {
+          username,
+          password,
+        },
+      );
      const { success, message, data } = res.data;
      if (success) {
        userDispatch({ type: 'login', payload: data });
        localStorage.setItem('user', JSON.stringify(data));
        showSuccess('登录成功！');
        if (username === 'root' && password === '123456') {
-          Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true });
+          Modal.error({
+            title: '您正在使用默认密码！',
+            content: '请立刻修改默认密码！',
+            centered: true,
+          });
        }
        navigate('/token');
      } else {
@@ -104,7 +119,16 @@ const LoginForm = () => {

  // 添加Telegram登录处理函数
  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 = {};
    fields.forEach((field) => {
      if (response[field]) {
@@ -126,10 +150,15 @@ const LoginForm = () => {
  return (
    <div>
      <Layout>
-        <Layout.Header>
-        </Layout.Header>
+        <Layout.Header></Layout.Header>
        <Layout.Content>
-          <div style={{ justifyContent: 'center', display: 'flex', marginTop: 120 }}>
+          <div
+            style={{
+              justifyContent: 'center',
+              display: 'flex',
+              marginTop: 120,
+            }}
+          >
            <div style={{ width: 500 }}>
              <Card>
                <Title heading={2} style={{ textAlign: 'center' }}>
@@ -139,50 +168,72 @@ const LoginForm = () => {
                  <Form.Input
                    field={'username'}
                    label={'用户名'}
-                    placeholder="用户名"
-                    name="username"
+                    placeholder='用户名'
+                    name='username'
                    onChange={(value) => handleChange('username', value)}
                  />
                  <Form.Input
                    field={'password'}
                    label={'密码'}
-                    placeholder="密码"
-                    name="password"
-                    type="password"
+                    placeholder='密码'
+                    name='password'
+                    type='password'
                    onChange={(value) => handleChange('password', value)}
                  />

-                  <Button theme="solid" style={{ width: '100%' }} type={'primary'} size="large"
-                          htmlType={'submit'} onClick={handleSubmit}>
+                  <Button
+                    theme='solid'
+                    style={{ width: '100%' }}
+                    type={'primary'}
+                    size='large'
+                    htmlType={'submit'}
+                    onClick={handleSubmit}
+                  >
                    登录
                  </Button>
                </Form>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    marginTop: 20,
+                  }}
+                >
                  <Text>
-                    没有账号请先 <Link to="/register">注册账号</Link>
+                    没有账号请先 <Link to='/register'>注册账号</Link>
                  </Text>
                  <Text>
-                    忘记密码 <Link to="/reset">点击重置</Link>
+                    忘记密码 <Link to='/reset'>点击重置</Link>
                  </Text>
                </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>
-                    <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        marginTop: 20,
+                      }}
+                    >
                      {status.github_oauth ? (
                        <Button
-                          type="primary"
+                          type='primary'
                          icon={<IconGithubLogo />}
-                          onClick={() => onGitHubOAuthClicked(status.github_client_id)}
+                          onClick={() =>
+                            onGitHubOAuthClicked(status.github_client_id)
+                          }
                        />
                      ) : (
                        <></>
                      )}
                      {status.wechat_login ? (
                        <Button
-                          type="primary"
+                          type='primary'
                          style={{ color: 'rgba(var(--semi-green-5), 1)' }}
                          icon={<Icon svg={<WeChatIcon />} />}
                          onClick={onWeChatLoginClicked}
@@ -192,7 +243,10 @@ const LoginForm = () => {
                      )}

                      {status.telegram_oauth ? (
-                        <TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
+                        <TelegramLoginButton
+                          dataOnauth={onTelegramLoginClicked}
+                          botName={status.telegram_bot_name}
+                        />
                      ) : (
                        <></>
                      )}
@@ -202,7 +256,7 @@ const LoginForm = () => {
                  <></>
                )}
                <Modal
-                  title="微信扫码登录"
+                  title='微信扫码登录'
                  visible={showWeChatLoginModal}
                  maskClosable={true}
                  onOk={onSubmitWeChatVerificationCode}
@@ -211,7 +265,13 @@ const LoginForm = () => {
                  size={'small'}
                  centered={true}
                >
-                  <div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItem: 'center',
+                      flexDirection: 'column',
+                    }}
+                  >
                    <img src={status.wechat_qrcode} />
                  </div>
                  <div style={{ textAlign: 'center' }}>
@@ -219,19 +279,27 @@ const LoginForm = () => {
                      微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
                    </p>
                  </div>
-                  <Form size="large">
+                  <Form size='large'>
                    <Form.Input
                      field={'wechat_verification_code'}
-                      placeholder="验证码"
+                      placeholder='验证码'
                      label={'验证码'}
                      value={inputs.wechat_verification_code}
-                      onChange={(value) => handleChange('wechat_verification_code', value)}
+                      onChange={(value) =>
+                        handleChange('wechat_verification_code', value)
+                      }
                    />
                  </Form>
                </Modal>
              </Card>
              {turnstileEnabled ? (
-                <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    marginTop: 20,
+                  }}
+                >
                  <Turnstile
                    sitekey={turnstileSiteKey}
                    onVerify={(token) => {
@@ -244,7 +312,6 @@ const LoginForm = () => {
              )}
            </div>
          </div>
-
        </Layout.Content>
      </Layout>
    </div>
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -1,7 +1,25 @@
 import React, { useEffect, useState } from 'react';
-import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  isAdmin,
+  showError,
+  showSuccess,
+  timestamp2string,
+} from '../helpers';

-import { Avatar, Button, Form, Layout, Modal, Select, Space, Spin, Table, Tag } from '@douyinfe/semi-ui';
+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';
@@ -9,131 +27,285 @@ import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 const { Header } = Layout;

 function renderTimestamp(timestamp) {
-  return (<>
-    {timestamp2string(timestamp)}
-  </>);
+  return <>{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) {
  switch (type) {
    case 1:
-      return <Tag color="cyan" size="large"> 充值 </Tag>;
+      return (
+        <Tag color='cyan' size='large'>
+          {' '}
+          充值{' '}
+        </Tag>
+      );
    case 2:
-      return <Tag color="lime" size="large"> 消费 </Tag>;
+      return (
+        <Tag color='lime' size='large'>
+          {' '}
+          消费{' '}
+        </Tag>
+      );
    case 3:
-      return <Tag color="orange" size="large"> 管理 </Tag>;
+      return (
+        <Tag color='orange' size='large'>
+          {' '}
+          管理{' '}
+        </Tag>
+      );
    case 4:
-      return <Tag color="purple" size="large"> 系统 </Tag>;
+      return (
+        <Tag color='purple' size='large'>
+          {' '}
+          系统{' '}
+        </Tag>
+      );
    default:
-      return <Tag color="black" size="large"> 未知 </Tag>;
+      return (
+        <Tag color='black' size='large'>
+          {' '}
+          未知{' '}
+        </Tag>
+      );
  }
 }

 function renderIsStream(bool) {
  if (bool) {
-    return <Tag color="blue" size="large">流</Tag>;
+    return (
+      <Tag color='blue' size='large'>
+        流
+      </Tag>
+    );
  } else {
-    return <Tag color="purple" size="large">非流</Tag>;
+    return (
+      <Tag color='purple' size='large'>
+        非流
+      </Tag>
+    );
  }
 }

 function renderUseTime(type) {
  const time = parseInt(type);
  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) {
-    return <Tag color="orange" size="large"> {time} s </Tag>;
+    return (
+      <Tag color='orange' size='large'>
+        {' '}
+        {time} s{' '}
+      </Tag>
+    );
  } else {
-    return <Tag color="red" size="large"> {time} s </Tag>;
+    return (
+      <Tag color='red' size='large'>
+        {' '}
+        {time} s{' '}
+      </Tag>
+    );
  }
 }

 const LogsTable = () => {
-  const columns = [{
-    title: '时间', dataIndex: 'timestamp2string'
-  }, {
-    title: '渠道',
-    dataIndex: 'channel',
-    className: isAdmin() ? 'tableShow' : 'tableHiddle',
-    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> : <></> : <></>);
-    }
-  }, {
-    title: '用户',
-    dataIndex: 'username',
-    className: isAdmin() ? 'tableShow' : 'tableHiddle',
-    render: (text, record, index) => {
-      return (isAdminUser ? <div>
-        <Avatar size="small" color={stringToColor(text)} style={{ marginRight: 4 }}
-                onClick={() => showUserInfo(record.user_id)}>
-          {typeof text === 'string' && text.slice(0, 1)}
-        </Avatar>
-        {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>
-      </div> : <></>);
-    }
-  }, {
-    title: '类型', dataIndex: 'type', render: (text, record, index) => {
-      return (<div>
-        {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);
-        }}> {text} </Tag>
-      </div> : <></>);
-    }
-  }, {
-    title: '用时', dataIndex: 'use_time', render: (text, record, index) => {
-      return (<div>
-        <Space>
-          {renderUseTime(text)}
-          {renderIsStream(record.is_stream)}
-        </Space>
-      </div>);
-    }
-  }, {
-    title: '提示', dataIndex: 'prompt_tokens', render: (text, record, index) => {
-      return (record.type === 0 || record.type === 2 ? <div>
-        {<span> {text} </span>}
-      </div> : <></>);
-    }
-  }, {
-    title: '补全', dataIndex: 'completion_tokens', render: (text, record, index) => {
-      return (parseInt(text) > 0 && (record.type === 0 || record.type === 2) ? <div>
-        {<span> {text} </span>}
-      </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 }}>
-        {text}
-      </Paragraph>;
-    }
-  }];
+  const columns = [
+    {
+      title: '时间',
+      dataIndex: 'timestamp2string',
+    },
+    {
+      title: '渠道',
+      dataIndex: 'channel',
+      className: isAdmin() ? 'tableShow' : 'tableHiddle',
+      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>
+          ) : (
+            <></>
+          )
+        ) : (
+          <></>
+        );
+      },
+    },
+    {
+      title: '用户',
+      dataIndex: 'username',
+      className: isAdmin() ? 'tableShow' : 'tableHiddle',
+      render: (text, record, index) => {
+        return isAdminUser ? (
+          <div>
+            <Avatar
+              size='small'
+              color={stringToColor(text)}
+              style={{ marginRight: 4 }}
+              onClick={() => showUserInfo(record.user_id)}
+            >
+              {typeof text === 'string' && text.slice(0, 1)}
+            </Avatar>
+            {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>
+          </div>
+        ) : (
+          <></>
+        );
+      },
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      render: (text, record, index) => {
+        return <div>{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);
+              }}
+            >
+              {' '}
+              {text}{' '}
+            </Tag>
+          </div>
+        ) : (
+          <></>
+        );
+      },
+    },
+    {
+      title: '用时',
+      dataIndex: 'use_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            <Space>
+              {renderUseTime(text)}
+              {renderIsStream(record.is_stream)}
+            </Space>
+          </div>
+        );
+      },
+    },
+    {
+      title: '提示',
+      dataIndex: 'prompt_tokens',
+      render: (text, record, index) => {
+        return record.type === 0 || record.type === 2 ? (
+          <div>{<span> {text} </span>}</div>
+        ) : (
+          <></>
+        );
+      },
+    },
+    {
+      title: '补全',
+      dataIndex: 'completion_tokens',
+      render: (text, record, index) => {
+        return parseInt(text) > 0 &&
+          (record.type === 0 || record.type === 2) ? (
+          <div>{<span> {text} </span>}</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 }}
+          >
+            {text}
+          </Paragraph>
+        );
+      },
+    },
+  ];

  const [logs, setLogs] = useState([]);
  const [showStat, setShowStat] = useState(false);
@@ -154,12 +326,20 @@ const LogsTable = () => {
    model_name: '',
    start_timestamp: timestamp2string(now.getTime() / 1000 - 86400),
    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({
-    quota: 0, token: 0
+    quota: 0,
+    token: 0,
  });

  const handleInputChange = (value, name) => {
@@ -169,7 +349,9 @@ const LogsTable = () => {
  const getLogSelfStat = async () => {
    let localStartTimestamp = Date.parse(start_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;
    if (success) {
      setStat(data);
@@ -181,7 +363,9 @@ const LogsTable = () => {
  const getLogStat = async () => {
    let localStartTimestamp = Date.parse(start_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;
    if (success) {
      setStat(data);
@@ -209,12 +393,16 @@ const LogsTable = () => {
    const { success, message, data } = res.data;
    if (success) {
      Modal.info({
-        title: '用户信息', content: <div style={{ padding: 12 }}>
-          <p>用户名: {data.username}</p>
-          <p>余额: {renderQuota(data.quota)}</p>
-          <p>已用额度：{renderQuota(data.used_quota)}</p>
-          <p>请求次数：{renderNumber(data.request_count)}</p>
-        </div>, centered: true
+        title: '用户信息',
+        content: (
+          <div style={{ padding: 12 }}>
+            <p>用户名: {data.username}</p>
+            <p>余额: {renderQuota(data.quota)}</p>
+            <p>已用额度：{renderQuota(data.used_quota)}</p>
+            <p>请求次数：{renderNumber(data.request_count)}</p>
+          </div>
+        ),
+        centered: true,
      });
    } else {
      showError(message);
@@ -259,14 +447,16 @@ const LogsTable = () => {
    setLoading(false);
  };

-  const pageData = logs.slice((activePage - 1) * pageSize, activePage * pageSize);
+  const pageData = logs.slice(
+    (activePage - 1) * pageSize,
+    activePage * pageSize,
+  );

-  const handlePageChange = page => {
+  const handlePageChange = (page) => {
    setActivePage(page);
    if (page === Math.ceil(logs.length / pageSize) + 1) {
      // In this case we have to load more data and then append them.
-      loadLogs(page - 1, pageSize, logType).then(r => {
-      });
+      loadLogs(page - 1, pageSize, logType).then((r) => {});
    }
  };

@@ -298,7 +488,8 @@ const LogsTable = () => {

  useEffect(() => {
    // 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);
    loadLogs(0, localPageSize)
      .then()
@@ -326,74 +517,136 @@ const LogsTable = () => {
    setSearching(false);
  };

-  return (<>
-    <Layout>
-      <Header>
-        <Spin spinning={loadingStat}>
-          <h3>使用明细（总消耗额度：
-            <span onClick={handleEyeClick} style={{
-              cursor: 'pointer', color: 'gray'
-            }}>{showStat ? renderQuota(stat.quota) : '点击查看'}</span>
-            ）
-          </h3>
-        </Spin>
-      </Header>
-      <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 }}
-                           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 }}
-                           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')} />
-          </>}
-          <Form.Section>
-            <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
-                    onClick={refresh} loading={loading}>查询</Button>
-          </Form.Section>
-        </>
-      </Form>
-      <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
-        currentPage: activePage,
-        pageSize: pageSize,
-        total: logCount,
-        pageSizeOpts: [10, 20, 50, 100],
-        showSizeChanger: true,
-        onPageSizeChange: (size) => {
-          handlePageSizeChange(size).then();
-        },
-        onPageChange: handlePageChange
-      }} />
-      <Select defaultValue="0" style={{ width: 120 }} onChange={(value) => {
-        setLogType(parseInt(value));
-        refresh(parseInt(value)).then();
-      }}>
-        <Select.Option value="0">全部</Select.Option>
-        <Select.Option value="1">充值</Select.Option>
-        <Select.Option value="2">消费</Select.Option>
-        <Select.Option value="3">管理</Select.Option>
-        <Select.Option value="4">系统</Select.Option>
-      </Select>
-    </Layout>
-  </>);
+  return (
+    <>
+      <Layout>
+        <Header>
+          <Spin spinning={loadingStat}>
+            <h3>
+              使用明细（总消耗额度：
+              <span
+                onClick={handleEyeClick}
+                style={{
+                  cursor: 'pointer',
+                  color: 'gray',
+                }}
+              >
+                {showStat ? renderQuota(stat.quota) : '点击查看'}
+              </span>
+              ）
+            </h3>
+          </Spin>
+        </Header>
+        <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 }}
+              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 }}
+              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')}
+                />
+              </>
+            )}
+            <Form.Section>
+              <Button
+                label='查询'
+                type='primary'
+                htmlType='submit'
+                className='btn-margin-right'
+                onClick={refresh}
+                loading={loading}
+              >
+                查询
+              </Button>
+            </Form.Section>
+          </>
+        </Form>
+        <Table
+          style={{ marginTop: 5 }}
+          columns={columns}
+          dataSource={pageData}
+          pagination={{
+            currentPage: activePage,
+            pageSize: pageSize,
+            total: logCount,
+            pageSizeOpts: [10, 20, 50, 100],
+            showSizeChanger: true,
+            onPageSizeChange: (size) => {
+              handlePageSizeChange(size).then();
+            },
+            onPageChange: handlePageChange,
+          }}
+        />
+        <Select
+          defaultValue='0'
+          style={{ width: 120 }}
+          onChange={(value) => {
+            setLogType(parseInt(value));
+            refresh(parseInt(value)).then();
+          }}
+        >
+          <Select.Option value='0'>全部</Select.Option>
+          <Select.Option value='1'>充值</Select.Option>
+          <Select.Option value='2'>消费</Select.Option>
+          <Select.Option value='3'>管理</Select.Option>
+          <Select.Option value='4'>系统</Select.Option>
+        </Select>
+      </Layout>
+    </>
+  );
 };

 export default LogsTable;
--- a/web/src/components/MjLogsTable.js
+++ b/web/src/components/MjLogsTable.js
@@ -1,86 +1,226 @@
 import React, { useEffect, useState } from 'react';
-import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  isAdmin,
+  showError,
+  showSuccess,
+  timestamp2string,
+} from '../helpers';

-import { Banner, Button, Form, ImagePreview, Layout, Modal, Progress, Table, Tag, Typography } from '@douyinfe/semi-ui';
+import {
+  Banner,
+  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',
-  '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) {
  switch (type) {
    case 'IMAGINE':
-      return <Tag color="blue" size="large">绘图</Tag>;
+      return (
+        <Tag color='blue' size='large'>
+          绘图
+        </Tag>
+      );
    case 'UPSCALE':
-      return <Tag color="orange" size="large">放大</Tag>;
+      return (
+        <Tag color='orange' size='large'>
+          放大
+        </Tag>
+      );
    case 'VARIATION':
-      return <Tag color="purple" size="large">变换</Tag>;
+      return (
+        <Tag color='purple' size='large'>
+          变换
+        </Tag>
+      );
    case 'HIGH_VARIATION':
-      return <Tag color="purple" size="large">强变换</Tag>;
+      return (
+        <Tag color='purple' size='large'>
+          强变换
+        </Tag>
+      );
    case 'LOW_VARIATION':
-      return <Tag color="purple" size="large">弱变换</Tag>;
+      return (
+        <Tag color='purple' size='large'>
+          弱变换
+        </Tag>
+      );
    case 'PAN':
-      return <Tag color="cyan" size="large">平移</Tag>;
+      return (
+        <Tag color='cyan' size='large'>
+          平移
+        </Tag>
+      );
    case 'DESCRIBE':
-      return <Tag color="yellow" size="large">图生文</Tag>;
+      return (
+        <Tag color='yellow' size='large'>
+          图生文
+        </Tag>
+      );
    case 'BLEND':
-      return <Tag color="lime" size="large">图混合</Tag>;
+      return (
+        <Tag color='lime' size='large'>
+          图混合
+        </Tag>
+      );
    case 'SHORTEN':
-      return <Tag color="pink" size="large">缩词</Tag>;
+      return (
+        <Tag color='pink' size='large'>
+          缩词
+        </Tag>
+      );
    case 'REROLL':
-      return <Tag color="indigo" size="large">重绘</Tag>;
+      return (
+        <Tag color='indigo' size='large'>
+          重绘
+        </Tag>
+      );
    case 'INPAINT':
-      return <Tag color="violet" size="large">局部重绘-提交</Tag>;
+      return (
+        <Tag color='violet' size='large'>
+          局部重绘-提交
+        </Tag>
+      );
    case 'ZOOM':
-      return <Tag color="teal" size="large">变焦</Tag>;
+      return (
+        <Tag color='teal' size='large'>
+          变焦
+        </Tag>
+      );
    case 'CUSTOM_ZOOM':
-      return <Tag color="teal" size="large">自定义变焦-提交</Tag>;
+      return (
+        <Tag color='teal' size='large'>
+          自定义变焦-提交
+        </Tag>
+      );
    case 'MODAL':
-      return <Tag color="green" size="large">窗口处理</Tag>;
+      return (
+        <Tag color='green' size='large'>
+          窗口处理
+        </Tag>
+      );
    case 'SWAP_FACE':
-      return <Tag color="light-green" size="large">换脸</Tag>;
+      return (
+        <Tag color='light-green' size='large'>
+          换脸
+        </Tag>
+      );
    default:
-      return <Tag color="white" size="large">未知</Tag>;
+      return (
+        <Tag color='white' size='large'>
+          未知
+        </Tag>
+      );
  }
 }

-
 function renderCode(code) {
  switch (code) {
    case 1:
-      return <Tag color="green" size="large">已提交</Tag>;
+      return (
+        <Tag color='green' size='large'>
+          已提交
+        </Tag>
+      );
    case 21:
-      return <Tag color="lime" size="large">等待中</Tag>;
+      return (
+        <Tag color='lime' size='large'>
+          等待中
+        </Tag>
+      );
    case 22:
-      return <Tag color="orange" size="large">重复提交</Tag>;
+      return (
+        <Tag color='orange' size='large'>
+          重复提交
+        </Tag>
+      );
    case 0:
-      return <Tag color="yellow" size="large">未提交</Tag>;
+      return (
+        <Tag color='yellow' size='large'>
+          未提交
+        </Tag>
+      );
    default:
-      return <Tag color="white" size="large">未知</Tag>;
+      return (
+        <Tag color='white' size='large'>
+          未知
+        </Tag>
+      );
  }
 }

-
 function renderStatus(type) {
  // Ensure all cases are string literals by adding quotes.
  switch (type) {
    case 'SUCCESS':
-      return <Tag color="green" size="large">成功</Tag>;
+      return (
+        <Tag color='green' size='large'>
+          成功
+        </Tag>
+      );
    case 'NOT_START':
-      return <Tag color="grey" size="large">未启动</Tag>;
+      return (
+        <Tag color='grey' size='large'>
+          未启动
+        </Tag>
+      );
    case 'SUBMITTED':
-      return <Tag color="yellow" size="large">队列中</Tag>;
+      return (
+        <Tag color='yellow' size='large'>
+          队列中
+        </Tag>
+      );
    case 'IN_PROGRESS':
-      return <Tag color="blue" size="large">执行中</Tag>;
+      return (
+        <Tag color='blue' size='large'>
+          执行中
+        </Tag>
+      );
    case 'FAILURE':
-      return <Tag color="red" size="large">失败</Tag>;
+      return (
+        <Tag color='red' size='large'>
+          失败
+        </Tag>
+      );
    case 'MODAL':
-      return <Tag color="yellow" size="large">窗口等待</Tag>;
+      return (
+        <Tag color='yellow' size='large'>
+          窗口等待
+        </Tag>
+      );
    default:
-      return <Tag color="white" size="large">未知</Tag>;
+      return (
+        <Tag color='white' size='large'>
+          未知
+        </Tag>
+      );
  }
 }

@@ -97,7 +237,6 @@ const renderTimestamp = (timestampInSeconds) => {
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
 };

-
 const LogsTable = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState('');
@@ -106,12 +245,8 @@ const LogsTable = () => {
      title: '提交时间',
      dataIndex: 'submit_time',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderTimestamp(text / 1000)}
-          </div>
-        );
-      }
+        return <div>{renderTimestamp(text / 1000)}</div>;
+      },
    },
    {
      title: '渠道',
@@ -119,61 +254,50 @@ const LogsTable = () => {
      className: isAdmin() ? 'tableShow' : 'tableHiddle',
      render: (text, record, index) => {
        return (
-
          <div>
-            <Tag color={colors[parseInt(text) % colors.length]} size="large" onClick={() => {
-              copyText(text); // 假设copyText是用于文本复制的函数
-            }}> {text} </Tag>
+            <Tag
+              color={colors[parseInt(text) % colors.length]}
+              size='large'
+              onClick={() => {
+                copyText(text); // 假设copyText是用于文本复制的函数
+              }}
+            >
+              {' '}
+              {text}{' '}
+            </Tag>
          </div>
-
        );
-      }
+      },
    },
    {
      title: '类型',
      dataIndex: 'action',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderType(text)}
-          </div>
-        );
-      }
+        return <div>{renderType(text)}</div>;
+      },
    },
    {
      title: '任务ID',
      dataIndex: 'mj_id',
      render: (text, record, index) => {
-        return (
-          <div>
-            {text}
-          </div>
-        );
-      }
+        return <div>{text}</div>;
+      },
    },
    {
      title: '提交结果',
      dataIndex: 'code',
      className: isAdmin() ? 'tableShow' : 'tableHiddle',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderCode(text)}
-          </div>
-        );
-      }
+        return <div>{renderCode(text)}</div>;
+      },
    },
    {
      title: '任务状态',
      dataIndex: 'status',
      className: isAdmin() ? 'tableShow' : 'tableHiddle',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderStatus(text)}
-          </div>
-        );
-      }
+        return <div>{renderStatus(text)}</div>;
+      },
    },
    {
      title: '进度',
@@ -183,13 +307,20 @@ const LogsTable = () => {
          <div>
            {
              // 转换例如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>
        );
-      }
+      },
    },
    {
      title: '结果图片',
@@ -201,14 +332,14 @@ const LogsTable = () => {
        return (
          <Button
            onClick={() => {
-              setModalImageUrl(text);  // 更新图片URL状态
-              setIsModalOpenurl(true);    // 打开模态框
+              setModalImageUrl(text); // 更新图片URL状态
+              setIsModalOpenurl(true); // 打开模态框
            }}
          >
            查看图片
          </Button>
        );
-      }
+      },
    },
    {
      title: 'Prompt',
@@ -231,7 +362,7 @@ const LogsTable = () => {
            {text}
          </Typography.Text>
        );
-      }
+      },
    },
    {
      title: 'PromptEn',
@@ -254,7 +385,7 @@ const LogsTable = () => {
            {text}
          </Typography.Text>
        );
-      }
+      },
    },
    {
      title: '失败原因',
@@ -277,9 +408,8 @@ const LogsTable = () => {
            {text}
          </Typography.Text>
        );
-      }
-    }
-
+      },
+    },
  ];

  const [logs, setLogs] = useState([]);
@@ -299,20 +429,19 @@ const LogsTable = () => {
    channel_id: '',
    mj_id: '',
    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 [stat, setStat] = useState({
    quota: 0,
-    token: 0
+    token: 0,
  });

  const handleInputChange = (value, name) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
  };

-
  const setLogsFormat = (logs) => {
    for (let i = 0; i < logs.length; i++) {
      logs[i].timestamp2string = timestamp2string(logs[i].created_at);
@@ -351,14 +480,16 @@ const LogsTable = () => {
    setLoading(false);
  };

-  const pageData = logs.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+  const pageData = logs.slice(
+    (activePage - 1) * ITEMS_PER_PAGE,
+    activePage * ITEMS_PER_PAGE,
+  );

-  const handlePageChange = page => {
+  const handlePageChange = (page) => {
    setActivePage(page);
    if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
      // In this case we have to load more data and then append them.
-      loadLogs(page - 1).then(r => {
-      });
+      loadLogs(page - 1).then((r) => {});
    }
  };

@@ -390,46 +521,83 @@ const LogsTable = () => {

  return (
    <>
-
      <Layout>
-        {isAdminUser && showBanner ? <Banner
-          type="info"
-          description="当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。"
-        /> : <></>
-        }
-        <Form layout="horizontal" style={{ marginTop: 10 }}>
+        {isAdminUser && showBanner ? (
+          <Banner
+            type='info'
+            description='当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。'
+          />
+        ) : (
+          <></>
+        )}
+        <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 }}
-                             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 }}
-                             initValue={end_timestamp}
-                             value={end_timestamp} type="dateTime"
-                             name="end_timestamp"
-                             onChange={value => handleInputChange(value, 'end_timestamp')} />
+            <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}
+              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}
+              value={end_timestamp}
+              type='dateTime'
+              name='end_timestamp'
+              onChange={(value) => handleInputChange(value, 'end_timestamp')}
+            />

            <Form.Section>
-              <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
-                      onClick={refresh}>查询</Button>
+              <Button
+                label='查询'
+                type='primary'
+                htmlType='submit'
+                className='btn-margin-right'
+                onClick={refresh}
+              >
+                查询
+              </Button>
            </Form.Section>
          </>
        </Form>
-        <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
-          currentPage: activePage,
-          pageSize: ITEMS_PER_PAGE,
-          total: logCount,
-          pageSizeOpts: [10, 20, 50, 100],
-          onPageChange: handlePageChange
-        }} loading={loading} />
+        <Table
+          style={{ marginTop: 5 }}
+          columns={columns}
+          dataSource={pageData}
+          pagination={{
+            currentPage: activePage,
+            pageSize: ITEMS_PER_PAGE,
+            total: logCount,
+            pageSizeOpts: [10, 20, 50, 100],
+            onPageChange: handlePageChange,
+          }}
+          loading={loading}
+        />
        <Modal
          visible={isModalOpen}
          onOk={() => setIsModalOpen(false)}
@@ -445,7 +613,6 @@ const LogsTable = () => {
          visible={isModalOpenurl}
          onVisibleChange={(visible) => setIsModalOpenurl(visible)}
        />
-
      </Layout>
    </>
  );
--- a/web/src/components/OperationSetting.js
+++ b/web/src/components/OperationSetting.js
@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Divider, Form, Grid, Header } from 'semantic-ui-react';
-import { API, showError, showSuccess, timestamp2string, verifyJSON } from '../helpers';
+import {
+  API,
+  showError,
+  showSuccess,
+  timestamp2string,
+  verifyJSON,
+} from '../helpers';

 const OperationSetting = () => {
  let now = new Date();
@@ -35,16 +41,18 @@ const OperationSetting = () => {
    DataExportDefaultTime: 'hour',
    DataExportInterval: 5,
    DefaultCollapseSidebar: '', // 默认折叠侧边栏
-    RetryTimes: 0
+    RetryTimes: 0,
  });
  const [originInputs, setOriginInputs] = useState({});
  let [loading, setLoading] = useState(false);
-  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 = [
    { key: 'hour', text: '小时', value: 'hour' },
    { key: 'day', text: '天', value: 'day' },
-    { key: 'week', text: '周', value: 'week' }
+    { key: 'week', text: '周', value: 'week' },
  ];
  const getOptions = async () => {
    const res = await API.get('/api/option/');
@@ -52,7 +60,11 @@ const OperationSetting = () => {
    if (success) {
      let newInputs = {};
      data.forEach((item) => {
-        if (item.key === 'ModelRatio' || item.key === 'GroupRatio' || item.key === 'ModelPrice') {
+        if (
+          item.key === 'ModelRatio' ||
+          item.key === 'GroupRatio' ||
+          item.key === 'ModelPrice'
+        ) {
          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
        }
        newInputs[item.key] = item.value;
@@ -79,7 +91,7 @@ const OperationSetting = () => {
    console.log(key, value);
    const res = await API.put('/api/option/', {
      key,
-      value
+      value,
    });
    const { success, message } = res.data;
    if (success) {
@@ -91,7 +103,12 @@ const OperationSetting = () => {
  };

  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') {
        localStorage.setItem('data_export_default_time', value);
      } else if (name === 'MjNotifyEnabled') {
@@ -106,11 +123,22 @@ const OperationSetting = () => {
  const submitConfig = async (group) => {
    switch (group) {
      case 'monitor':
-        if (originInputs['ChannelDisableThreshold'] !== inputs.ChannelDisableThreshold) {
-          await updateOption('ChannelDisableThreshold', inputs.ChannelDisableThreshold);
+        if (
+          originInputs['ChannelDisableThreshold'] !==
+          inputs.ChannelDisableThreshold
+        ) {
+          await updateOption(
+            'ChannelDisableThreshold',
+            inputs.ChannelDisableThreshold,
+          );
        }
-        if (originInputs['QuotaRemindThreshold'] !== inputs.QuotaRemindThreshold) {
-          await updateOption('QuotaRemindThreshold', inputs.QuotaRemindThreshold);
+        if (
+          originInputs['QuotaRemindThreshold'] !== inputs.QuotaRemindThreshold
+        ) {
+          await updateOption(
+            'QuotaRemindThreshold',
+            inputs.QuotaRemindThreshold,
+          );
        }
        break;
      case 'ratio':
@@ -177,7 +205,9 @@ const OperationSetting = () => {

  const deleteHistoryLogs = async () => {
    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;
    if (success) {
      showSuccess(`${data} 条日志已清理！`);
@@ -189,131 +219,129 @@ const OperationSetting = () => {
    <Grid columns={1}>
      <Grid.Column>
        <Form loading={loading}>
-          <Header as="h3">
-            通用设置
-          </Header>
+          <Header as='h3'>通用设置</Header>
          <Form.Group widths={4}>
            <Form.Input
-              label="充值链接"
-              name="TopUpLink"
+              label='充值链接'
+              name='TopUpLink'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.TopUpLink}
-              type="link"
-              placeholder="例如发卡网站的购买链接"
+              type='link'
+              placeholder='例如发卡网站的购买链接'
            />
            <Form.Input
-              label="默认聊天页面链接"
-              name="ChatLink"
+              label='默认聊天页面链接'
+              name='ChatLink'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.ChatLink}
-              type="link"
-              placeholder="例如 ChatGPT Next Web 的部署地址"
+              type='link'
+              placeholder='例如 ChatGPT Next Web 的部署地址'
            />
            <Form.Input
-              label="聊天页面2链接"
-              name="ChatLink2"
+              label='聊天页面2链接'
+              name='ChatLink2'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.ChatLink2}
-              type="link"
-              placeholder="例如 ChatGPT Web & Midjourney 的部署地址"
+              type='link'
+              placeholder='例如 ChatGPT Web & Midjourney 的部署地址'
            />
            <Form.Input
-              label="单位美元额度"
-              name="QuotaPerUnit"
+              label='单位美元额度'
+              name='QuotaPerUnit'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.QuotaPerUnit}
-              type="number"
-              step="0.01"
-              placeholder="一单位货币能兑换的额度"
+              type='number'
+              step='0.01'
+              placeholder='一单位货币能兑换的额度'
            />
            <Form.Input
-              label="失败重试次数"
-              name="RetryTimes"
+              label='失败重试次数'
+              name='RetryTimes'
              type={'number'}
-              step="1"
-              min="0"
+              step='1'
+              min='0'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.RetryTimes}
-              placeholder="失败重试次数"
+              placeholder='失败重试次数'
            />
          </Form.Group>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.DisplayInCurrencyEnabled === 'true'}
-              label="以货币形式显示额度"
-              name="DisplayInCurrencyEnabled"
+              label='以货币形式显示额度'
+              name='DisplayInCurrencyEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.DisplayTokenStatEnabled === 'true'}
-              label="Billing 相关 API 显示令牌额度而非用户额度"
-              name="DisplayTokenStatEnabled"
+              label='Billing 相关 API 显示令牌额度而非用户额度'
+              name='DisplayTokenStatEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.DefaultCollapseSidebar === 'true'}
-              label="默认折叠侧边栏"
-              name="DefaultCollapseSidebar"
+              label='默认折叠侧边栏'
+              name='DefaultCollapseSidebar'
              onChange={handleInputChange}
            />
          </Form.Group>
-          <Form.Button onClick={() => {
-            submitConfig('general').then();
-          }}>保存通用设置</Form.Button>
+          <Form.Button
+            onClick={() => {
+              submitConfig('general').then();
+            }}
+          >
+            保存通用设置
+          </Form.Button>
          <Divider />
-          <Header as="h3">
-            绘图设置
-          </Header>
+          <Header as='h3'>绘图设置</Header>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.DrawingEnabled === 'true'}
-              label="启用绘图功能"
-              name="DrawingEnabled"
+              label='启用绘图功能'
+              name='DrawingEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.MjNotifyEnabled === 'true'}
-              label="允许回调（会泄露服务器ip地址）"
-              name="MjNotifyEnabled"
+              label='允许回调（会泄露服务器ip地址）'
+              name='MjNotifyEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
          <Divider />
-          <Header as="h3">
-            屏蔽词过滤设置
-          </Header>
+          <Header as='h3'>屏蔽词过滤设置</Header>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.CheckSensitiveEnabled === 'true'}
-              label="启用屏蔽词过滤功能"
-              name="CheckSensitiveEnabled"
+              label='启用屏蔽词过滤功能'
+              name='CheckSensitiveEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.CheckSensitiveOnPromptEnabled === 'true'}
-              label="启用prompt检查"
-              name="CheckSensitiveOnPromptEnabled"
+              label='启用prompt检查'
+              name='CheckSensitiveOnPromptEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.CheckSensitiveOnCompletionEnabled === 'true'}
-              label="启用生成内容检查"
-              name="CheckSensitiveOnCompletionEnabled"
+              label='启用生成内容检查'
+              name='CheckSensitiveOnCompletionEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.StopOnSensitiveEnabled === 'true'}
-              label="在检测到屏蔽词时，立刻停止生成，否则替换屏蔽词"
-              name="StopOnSensitiveEnabled"
+              label='在检测到屏蔽词时，立刻停止生成，否则替换屏蔽词'
+              name='StopOnSensitiveEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
@@ -328,210 +356,223 @@ const OperationSetting = () => {
          {/*    placeholder="例如：10"*/}
          {/*  />*/}
          {/*</Form.Group>*/}
-          <Form.Group widths="equal">
+          <Form.Group widths='equal'>
            <Form.TextArea
-              label="屏蔽词列表，一行一个屏蔽词，不需要符号分割"
-              name="SensitiveWords"
+              label='屏蔽词列表，一行一个屏蔽词，不需要符号分割'
+              name='SensitiveWords'
              onChange={handleInputChange}
              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
              value={inputs.SensitiveWords}
-              placeholder="一行一个屏蔽词"
+              placeholder='一行一个屏蔽词'
            />
          </Form.Group>
-          <Form.Button onClick={() => {
-            submitConfig('words').then();
-          }}>保存屏蔽词设置</Form.Button>
+          <Form.Button
+            onClick={() => {
+              submitConfig('words').then();
+            }}
+          >
+            保存屏蔽词设置
+          </Form.Button>
          <Divider />
-          <Header as="h3">
-            日志设置
-          </Header>
+          <Header as='h3'>日志设置</Header>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.LogConsumeEnabled === 'true'}
-              label="启用额度消费日志记录"
-              name="LogConsumeEnabled"
+              label='启用额度消费日志记录'
+              name='LogConsumeEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
          <Form.Group widths={4}>
-            <Form.Input label="目标时间" value={historyTimestamp} type="datetime-local"
-                        name="history_timestamp"
-                        onChange={(e, { name, value }) => {
-                          setHistoryTimestamp(value);
-                        }} />
+            <Form.Input
+              label='目标时间'
+              value={historyTimestamp}
+              type='datetime-local'
+              name='history_timestamp'
+              onChange={(e, { name, value }) => {
+                setHistoryTimestamp(value);
+              }}
+            />
          </Form.Group>
-          <Form.Button onClick={() => {
-            deleteHistoryLogs().then();
-          }}>清理历史日志</Form.Button>
+          <Form.Button
+            onClick={() => {
+              deleteHistoryLogs().then();
+            }}
+          >
+            清理历史日志
+          </Form.Button>
          <Divider />
-          <Header as="h3">
-            数据看板
-          </Header>
+          <Header as='h3'>数据看板</Header>
          <Form.Checkbox
            checked={inputs.DataExportEnabled === 'true'}
-            label="启用数据看板（实验性）"
-            name="DataExportEnabled"
+            label='启用数据看板（实验性）'
+            name='DataExportEnabled'
            onChange={handleInputChange}
          />
          <Form.Group>
            <Form.Input
-              label="数据看板更新间隔（分钟，设置过短会影响数据库性能）"
-              name="DataExportInterval"
+              label='数据看板更新间隔（分钟，设置过短会影响数据库性能）'
+              name='DataExportInterval'
              type={'number'}
-              step="1"
-              min="1"
+              step='1'
+              min='1'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.DataExportInterval}
-              placeholder="数据看板更新间隔（分钟，设置过短会影响数据库性能）"
+              placeholder='数据看板更新间隔（分钟，设置过短会影响数据库性能）'
            />
            <Form.Select
-              label="数据看板默认时间粒度（仅修改展示粒度，统计精确到小时）"
+              label='数据看板默认时间粒度（仅修改展示粒度，统计精确到小时）'
              options={timeOptions}
-              name="DataExportDefaultTime"
+              name='DataExportDefaultTime'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.DataExportDefaultTime}
-              placeholder="数据看板默认时间粒度"
+              placeholder='数据看板默认时间粒度'
            />
          </Form.Group>
          <Divider />
-          <Header as="h3">
-            监控设置
-          </Header>
+          <Header as='h3'>监控设置</Header>
          <Form.Group widths={3}>
            <Form.Input
-              label="最长响应时间"
-              name="ChannelDisableThreshold"
+              label='最长响应时间'
+              name='ChannelDisableThreshold'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.ChannelDisableThreshold}
-              type="number"
-              min="0"
-              placeholder="单位秒，当运行通道全部测试时，超过此时间将自动禁用通道"
+              type='number'
+              min='0'
+              placeholder='单位秒，当运行通道全部测试时，超过此时间将自动禁用通道'
            />
            <Form.Input
-              label="额度提醒阈值"
-              name="QuotaRemindThreshold"
+              label='额度提醒阈值'
+              name='QuotaRemindThreshold'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.QuotaRemindThreshold}
-              type="number"
-              min="0"
-              placeholder="低于此额度时将发送邮件提醒用户"
+              type='number'
+              min='0'
+              placeholder='低于此额度时将发送邮件提醒用户'
            />
          </Form.Group>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.AutomaticDisableChannelEnabled === 'true'}
-              label="失败时自动禁用通道"
-              name="AutomaticDisableChannelEnabled"
+              label='失败时自动禁用通道'
+              name='AutomaticDisableChannelEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.AutomaticEnableChannelEnabled === 'true'}
-              label="成功时自动启用通道"
-              name="AutomaticEnableChannelEnabled"
+              label='成功时自动启用通道'
+              name='AutomaticEnableChannelEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
-          <Form.Button onClick={() => {
-            submitConfig('monitor').then();
-          }}>保存监控设置</Form.Button>
+          <Form.Button
+            onClick={() => {
+              submitConfig('monitor').then();
+            }}
+          >
+            保存监控设置
+          </Form.Button>
          <Divider />
-          <Header as="h3">
-            额度设置
-          </Header>
+          <Header as='h3'>额度设置</Header>
          <Form.Group widths={4}>
            <Form.Input
-              label="新用户初始额度"
-              name="QuotaForNewUser"
+              label='新用户初始额度'
+              name='QuotaForNewUser'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.QuotaForNewUser}
-              type="number"
-              min="0"
-              placeholder="例如：100"
+              type='number'
+              min='0'
+              placeholder='例如：100'
            />
            <Form.Input
-              label="请求预扣费额度"
-              name="PreConsumedQuota"
+              label='请求预扣费额度'
+              name='PreConsumedQuota'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.PreConsumedQuota}
-              type="number"
-              min="0"
-              placeholder="请求结束后多退少补"
+              type='number'
+              min='0'
+              placeholder='请求结束后多退少补'
            />
            <Form.Input
-              label="邀请新用户奖励额度"
-              name="QuotaForInviter"
+              label='邀请新用户奖励额度'
+              name='QuotaForInviter'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.QuotaForInviter}
-              type="number"
-              min="0"
-              placeholder="例如：2000"
+              type='number'
+              min='0'
+              placeholder='例如：2000'
            />
            <Form.Input
-              label="新用户使用邀请码奖励额度"
-              name="QuotaForInvitee"
+              label='新用户使用邀请码奖励额度'
+              name='QuotaForInvitee'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.QuotaForInvitee}
-              type="number"
-              min="0"
-              placeholder="例如：1000"
+              type='number'
+              min='0'
+              placeholder='例如：1000'
            />
          </Form.Group>
-          <Form.Button onClick={() => {
-            submitConfig('quota').then();
-          }}>保存额度设置</Form.Button>
+          <Form.Button
+            onClick={() => {
+              submitConfig('quota').then();
+            }}
+          >
+            保存额度设置
+          </Form.Button>
          <Divider />
-          <Header as="h3">
-            倍率设置
-          </Header>
-          <Form.Group widths="equal">
+          <Header as='h3'>倍率设置</Header>
+          <Form.Group widths='equal'>
            <Form.TextArea
-              label="模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）"
-              name="ModelPrice"
+              label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）'
+              name='ModelPrice'
              onChange={handleInputChange}
              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.ModelPrice}
              placeholder='为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
            />
          </Form.Group>
-          <Form.Group widths="equal">
+          <Form.Group widths='equal'>
            <Form.TextArea
-              label="模型倍率"
-              name="ModelRatio"
+              label='模型倍率'
+              name='ModelRatio'
              onChange={handleInputChange}
              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.ModelRatio}
-              placeholder="为一个 JSON 文本，键为模型名称，值为倍率"
+              placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
            />
          </Form.Group>
-          <Form.Group widths="equal">
+          <Form.Group widths='equal'>
            <Form.TextArea
-              label="分组倍率"
-              name="GroupRatio"
+              label='分组倍率'
+              name='GroupRatio'
              onChange={handleInputChange}
              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.GroupRatio}
-              placeholder="为一个 JSON 文本，键为分组名称，值为倍率"
+              placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
            />
          </Form.Group>
-          <Form.Button onClick={() => {
-            submitConfig('ratio').then();
-          }}>保存倍率设置</Form.Button>
+          <Form.Button
+            onClick={() => {
+              submitConfig('ratio').then();
+            }}
+          >
+            保存倍率设置
+          </Form.Button>
        </Form>
      </Grid.Column>
    </Grid>
-  )
-    ;
+  );
 };

 export default OperationSetting;
--- a/web/src/components/OtherSetting.js
+++ b/web/src/components/OtherSetting.js
@@ -10,21 +10,20 @@ const OtherSetting = () => {
    Logo: '',
    Footer: '',
    About: '',
-    HomePageContent: ''
+    HomePageContent: '',
  });
  let [loading, setLoading] = useState(false);
  const [showUpdateModal, setShowUpdateModal] = useState(false);
  const [updateData, setUpdateData] = useState({
    tag_name: '',
-    content: ''
+    content: '',
  });

-
  const updateOption = async (key, value) => {
    setLoading(true);
    const res = await API.put('/api/option/', {
      key,
-      value
+      value,
    });
    const { success, message } = res.data;
    if (success) {
@@ -41,7 +40,7 @@ const OtherSetting = () => {
    Logo: false,
    HomePageContent: false,
    About: false,
-    Footer: false
+    Footer: false,
  });
  const handleInputChange = async (value, e) => {
    const name = e.target.id;
@@ -68,14 +67,20 @@ const OtherSetting = () => {
  //  个性化设置 - SystemName
  const submitSystemName = async () => {
    try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: true }));
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        SystemName: true,
+      }));
      await updateOption('SystemName', inputs.SystemName);
      showSuccess('系统名称已更新');
    } catch (error) {
      console.error('系统名称更新失败', error);
      showError('系统名称更新失败');
    } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: false }));
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        SystemName: false,
+      }));
    }
  };

@@ -95,14 +100,20 @@ const OtherSetting = () => {
  // 个性化设置 - 首页内容
  const submitOption = async (key) => {
    try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, HomePageContent: true }));
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        HomePageContent: true,
+      }));
      await updateOption(key, inputs[key]);
      showSuccess('首页内容已更新');
    } catch (error) {
      console.error('首页内容更新失败', error);
      showError('首页内容更新失败');
    } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, HomePageContent: false }));
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        HomePageContent: false,
+      }));
    }
  };
  // 个性化设置 - 关于
@@ -132,15 +143,13 @@ const OtherSetting = () => {
    }
  };

-
  const openGitHubRelease = () => {
-    window.location =
-      'https://github.com/songquanpeng/one-api/releases/latest';
+    window.location = 'https://github.com/songquanpeng/one-api/releases/latest';
  };

  const checkUpdate = async () => {
    const res = await API.get(
-      'https://api.github.com/repos/songquanpeng/one-api/releases/latest'
+      'https://api.github.com/repos/songquanpeng/one-api/releases/latest',
    );
    const { tag_name, body } = res.data;
    if (tag_name === process.env.REACT_APP_VERSION) {
@@ -148,7 +157,7 @@ const OtherSetting = () => {
    } else {
      setUpdateData({
        tag_name: tag_name,
-        content: marked.parse(body)
+        content: marked.parse(body),
      });
      setShowUpdateModal(true);
    }
@@ -175,13 +184,15 @@ const OtherSetting = () => {
    getOptions();
  }, []);

-
  return (
    <Row>
      <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.TextArea
              label={'公告'}
@@ -191,12 +202,17 @@ const OtherSetting = () => {
              style={{ fontFamily: 'JetBrains Mono, Consolas' }}
              autosize={{ minRows: 6, maxRows: 12 }}
            />
-            <Button onClick={submitNotice} loading={loadingInput['Notice']}>设置公告</Button>
+            <Button onClick={submitNotice} loading={loadingInput['Notice']}>
+              设置公告
+            </Button>
          </Form.Section>
        </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.Input
              label={'系统名称'}
@@ -204,48 +220,69 @@ const OtherSetting = () => {
              field={'SystemName'}
              onChange={handleInputChange}
            />
-            <Button onClick={submitSystemName} loading={loadingInput['SystemName']}>设置系统名称</Button>
+            <Button
+              onClick={submitSystemName}
+              loading={loadingInput['SystemName']}
+            >
+              设置系统名称
+            </Button>
            <Form.Input
              label={'Logo 图片地址'}
              placeholder={'在此输入 Logo 图片地址'}
              field={'Logo'}
              onChange={handleInputChange}
            />
-            <Button onClick={submitLogo} loading={loadingInput['Logo']}>设置 Logo</Button>
+            <Button onClick={submitLogo} loading={loadingInput['Logo']}>
+              设置 Logo
+            </Button>
            <Form.TextArea
              label={'首页内容'}
-              placeholder={'在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页。'}
+              placeholder={
+                '在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页。'
+              }
              field={'HomePageContent'}
              onChange={handleInputChange}
              style={{ fontFamily: 'JetBrains Mono, Consolas' }}
              autosize={{ minRows: 6, maxRows: 12 }}
            />
-            <Button onClick={() => submitOption('HomePageContent')}
-                    loading={loadingInput['HomePageContent']}>设置首页内容</Button>
+            <Button
+              onClick={() => submitOption('HomePageContent')}
+              loading={loadingInput['HomePageContent']}
+            >
+              设置首页内容
+            </Button>
            <Form.TextArea
              label={'关于'}
-              placeholder={'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'}
+              placeholder={
+                '在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'
+              }
              field={'About'}
              onChange={handleInputChange}
              style={{ fontFamily: 'JetBrains Mono, Consolas' }}
              autosize={{ minRows: 6, maxRows: 12 }}
            />
-            <Button onClick={submitAbout} loading={loadingInput['About']}>设置关于</Button>
+            <Button onClick={submitAbout} loading={loadingInput['About']}>
+              设置关于
+            </Button>
            {/*  */}
            <Banner
              fullMode={false}
-              type="info"
-              description="移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。"
+              type='info'
+              description='移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。'
              closeIcon={null}
              style={{ marginTop: 15 }}
            />
            <Form.Input
              label={'页脚'}
-              placeholder={'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'}
+              placeholder={
+                '在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'
+              }
              field={'Footer'}
              onChange={handleInputChange}
            />
-            <Button onClick={submitFooter} loading={loadingInput['Footer']}>设置页脚</Button>
+            <Button onClick={submitFooter} loading={loadingInput['Footer']}>
+              设置页脚
+            </Button>
          </Form.Section>
        </Form>
      </Col>
--- a/web/src/components/PasswordResetConfirm.js
+++ b/web/src/components/PasswordResetConfirm.js
@@ -6,7 +6,7 @@ import { useSearchParams } from 'react-router-dom';
 const PasswordResetConfirm = () => {
  const [inputs, setInputs] = useState({
    email: '',
-    token: ''
+    token: '',
  });
  const { email, token } = inputs;

@@ -23,7 +23,7 @@ const PasswordResetConfirm = () => {
    let email = searchParams.get('email');
    setInputs({
      token,
-      email
+      email,
    });
  }, []);

@@ -46,7 +46,7 @@ const PasswordResetConfirm = () => {
    setLoading(true);
    const res = await API.post(`/api/user/reset`, {
      email,
-      token
+      token,
    });
    const { success, message } = res.data;
    if (success) {
@@ -61,29 +61,29 @@ const PasswordResetConfirm = () => {
  }

  return (
-    <Grid textAlign="center" style={{ marginTop: '48px' }}>
+    <Grid textAlign='center' style={{ marginTop: '48px' }}>
      <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>
-        <Form size="large">
+        <Form size='large'>
          <Segment>
            <Form.Input
              fluid
-              icon="mail"
-              iconPosition="left"
-              placeholder="邮箱地址"
-              name="email"
+              icon='mail'
+              iconPosition='left'
+              placeholder='邮箱地址'
+              name='email'
              value={email}
              readOnly
            />
            {newPassword && (
              <Form.Input
                fluid
-                icon="lock"
-                iconPosition="left"
-                placeholder="新密码"
-                name="newPassword"
+                icon='lock'
+                iconPosition='left'
+                placeholder='新密码'
+                name='newPassword'
                value={newPassword}
                readOnly
                onClick={(e) => {
@@ -94,9 +94,9 @@ const PasswordResetConfirm = () => {
              />
            )}
            <Button
-              color="green"
+              color='green'
              fluid
-              size="large"
+              size='large'
              onClick={handleSubmit}
              loading={loading}
              disabled={disableButton}
--- a/web/src/components/PasswordResetForm.js
+++ b/web/src/components/PasswordResetForm.js
@@ -5,7 +5,7 @@ import Turnstile from 'react-turnstile';

 const PasswordResetForm = () => {
  const [inputs, setInputs] = useState({
-    email: ''
+    email: '',
  });
  const { email } = inputs;

@@ -31,7 +31,7 @@ const PasswordResetForm = () => {

  function handleChange(e) {
    const { name, value } = e.target;
-    setInputs(inputs => ({ ...inputs, [name]: value }));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
  }

  async function handleSubmit(e) {
@@ -43,7 +43,7 @@ const PasswordResetForm = () => {
    }
    setLoading(true);
    const res = await API.get(
-      `/api/reset_password?email=${email}&turnstile=${turnstileToken}`
+      `/api/reset_password?email=${email}&turnstile=${turnstileToken}`,
    );
    const { success, message } = res.data;
    if (success) {
@@ -56,19 +56,19 @@ const PasswordResetForm = () => {
  }

  return (
-    <Grid textAlign="center" style={{ marginTop: '48px' }}>
+    <Grid textAlign='center' style={{ marginTop: '48px' }}>
      <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>
-        <Form size="large">
+        <Form size='large'>
          <Segment>
            <Form.Input
              fluid
-              icon="mail"
-              iconPosition="left"
-              placeholder="邮箱地址"
-              name="email"
+              icon='mail'
+              iconPosition='left'
+              placeholder='邮箱地址'
+              name='email'
              value={email}
              onChange={handleChange}
            />
@@ -83,9 +83,9 @@ const PasswordResetForm = () => {
              <></>
            )}
            <Button
-              color="green"
+              color='green'
              fluid
-              size="large"
+              size='large'
              onClick={handleSubmit}
              loading={loading}
              disabled={disableButton}
--- a/web/src/components/PersonalSetting.js
+++ b/web/src/components/PersonalSetting.js
@@ -1,6 +1,13 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { API, copy, isRoot, showError, showInfo, showSuccess } from '../helpers';
+import {
+  API,
+  copy,
+  isRoot,
+  showError,
+  showInfo,
+  showSuccess,
+} from '../helpers';
 import Turnstile from 'react-turnstile';
 import { UserContext } from '../context/User';
 import { onGitHubOAuthClicked } from './utils';
@@ -17,9 +24,14 @@ import {
  Modal,
  Space,
  Tag,
-  Typography
+  Typography,
 } from '@douyinfe/semi-ui';
-import { getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor } from '../helpers/render';
+import {
+  getQuotaPerUnit,
+  renderQuota,
+  renderQuotaWithPrompt,
+  stringToColor,
+} from '../helpers/render';
 import TelegramLoginButton from 'react-telegram-login';

 const PersonalSetting = () => {
@@ -32,7 +44,7 @@ const PersonalSetting = () => {
    email: '',
    self_account_deletion_confirmation: '',
    set_new_password: '',
-    set_new_password_confirmation: ''
+    set_new_password_confirmation: '',
  });
  const [status, setStatus] = useState({});
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
@@ -67,11 +79,9 @@ const PersonalSetting = () => {
        setTurnstileSiteKey(status.turnstile_site_key);
      }
    }
-    getUserData().then(
-      (res) => {
-        console.log(userState);
-      }
-    );
+    getUserData().then((res) => {
+      console.log(userState);
+    });
    loadModels().then();
    getAffLink().then();
    setTransferAmount(getQuotaPerUnit());
@@ -173,7 +183,7 @@ const PersonalSetting = () => {
  const bindWeChat = async () => {
    if (inputs.wechat_verification_code === '') return;
    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;
    if (success) {
@@ -189,12 +199,9 @@ const PersonalSetting = () => {
      showError('两次输入的密码不一致！');
      return;
    }
-    const res = await API.put(
-      `/api/user/self`,
-      {
-        password: inputs.set_new_password
-      }
-    );
+    const res = await API.put(`/api/user/self`, {
+      password: inputs.set_new_password,
+    });
    const { success, message } = res.data;
    if (success) {
      showSuccess('密码修改成功！');
@@ -210,12 +217,9 @@ const PersonalSetting = () => {
      showError('划转金额最低为' + renderQuota(getQuotaPerUnit()));
      return;
    }
-    const res = await API.post(
-      `/api/user/aff_transfer`,
-      {
-        quota: transferAmount
-      }
-    );
+    const res = await API.post(`/api/user/aff_transfer`, {
+      quota: transferAmount,
+    });
    const { success, message } = res.data;
    if (success) {
      showSuccess(message);
@@ -238,7 +242,7 @@ const PersonalSetting = () => {
    }
    setLoading(true);
    const res = await API.get(
-      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
    );
    const { success, message } = res.data;
    if (success) {
@@ -256,7 +260,7 @@ const PersonalSetting = () => {
    }
    setLoading(true);
    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;
    if (success) {
@@ -295,7 +299,7 @@ const PersonalSetting = () => {
      <Layout>
        <Layout.Content>
          <Modal
-            title="请输入要划转的数量"
+            title='请输入要划转的数量'
            visible={openTransfer}
            onOk={transfer}
            onCancel={handleCancel}
@@ -305,13 +309,25 @@ const PersonalSetting = () => {
          >
            <div style={{ marginTop: 20 }}>
              <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 style={{ marginTop: 20 }}>
-              <Typography.Text>{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + renderQuota(getQuotaPerUnit())}</Typography.Text>
+              <Typography.Text>
+                {`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` +
+                  renderQuota(getQuotaPerUnit())}
+              </Typography.Text>
              <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>
          </Modal>
@@ -319,27 +335,45 @@ const PersonalSetting = () => {
            <Card
              title={
                <Card.Meta
-                  avatar={<Avatar size="default" color={stringToColor(getUsername())}
-                                  style={{ marginRight: 4 }}>
-                    {typeof getUsername() === 'string' && getUsername().slice(0, 1)}
-                  </Avatar>}
+                  avatar={
+                    <Avatar
+                      size='default'
+                      color={stringToColor(getUsername())}
+                      style={{ marginRight: 4 }}
+                    >
+                      {typeof getUsername() === 'string' &&
+                        getUsername().slice(0, 1)}
+                    </Avatar>
+                  }
                  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>
              }
              headerExtraContent={
                <>
-                  <Space vertical align="start">
-                    <Tag color="green">{'ID: ' + userState?.user?.id}</Tag>
-                    <Tag color="blue">{userState?.user?.group}</Tag>
+                  <Space vertical align='start'>
+                    <Tag color='green'>{'ID: ' + userState?.user?.id}</Tag>
+                    <Tag color='blue'>{userState?.user?.group}</Tag>
                  </Space>
                </>
              }
              footer={
                <Descriptions row>
-                  <Descriptions.Item itemKey="当前余额">{renderQuota(userState?.user?.quota)}</Descriptions.Item>
-                  <Descriptions.Item itemKey="历史消耗">{renderQuota(userState?.user?.used_quota)}</Descriptions.Item>
-                  <Descriptions.Item itemKey="请求次数">{userState.user?.request_count}</Descriptions.Item>
+                  <Descriptions.Item itemKey='当前余额'>
+                    {renderQuota(userState?.user?.quota)}
+                  </Descriptions.Item>
+                  <Descriptions.Item itemKey='历史消耗'>
+                    {renderQuota(userState?.user?.used_quota)}
+                  </Descriptions.Item>
+                  <Descriptions.Item itemKey='请求次数'>
+                    {userState.user?.request_count}
+                  </Descriptions.Item>
                </Descriptions>
              }
            >
@@ -347,15 +381,18 @@ const PersonalSetting = () => {
              <div style={{ marginTop: 10 }}>
                <Space wrap>
                  {models.map((model) => (
-                    <Tag key={model} color="cyan" onClick={() => {
-                      copyText(model);
-                    }}>
+                    <Tag
+                      key={model}
+                      color='cyan'
+                      onClick={() => {
+                        copyText(model);
+                      }}
+                    >
                      {model}
                    </Tag>
                  ))}
                </Space>
              </div>
-
            </Card>
            <Card
              footer={
@@ -373,18 +410,25 @@ const PersonalSetting = () => {
              <Typography.Title heading={6}>邀请信息</Typography.Title>
              <div style={{ marginTop: 10 }}>
                <Descriptions row>
-                  <Descriptions.Item itemKey="待使用收益">
-                                        <span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
-                                            {
-                                              renderQuota(userState?.user?.aff_quota)
-                                            }
-                                        </span>
-                    <Button type={'secondary'} onClick={() => setOpenTransfer(true)} size={'small'}
-                            style={{ marginLeft: 10 }}>划转</Button>
+                  <Descriptions.Item itemKey='待使用收益'>
+                    <span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
+                      {renderQuota(userState?.user?.aff_quota)}
+                    </span>
+                    <Button
+                      type={'secondary'}
+                      onClick={() => setOpenTransfer(true)}
+                      size={'small'}
+                      style={{ marginLeft: 10 }}
+                    >
+                      划转
+                    </Button>
+                  </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="总收益">{renderQuota(userState?.user?.aff_history_quota)}</Descriptions.Item>
-                  <Descriptions.Item itemKey="邀请人数">{userState?.user?.aff_count}</Descriptions.Item>
                </Descriptions>
              </div>
            </Card>
@@ -392,46 +436,71 @@ const PersonalSetting = () => {
              <Typography.Title heading={6}>个人信息</Typography.Title>
              <div style={{ marginTop: 20 }}>
                <Typography.Text strong>邮箱</Typography.Text>
-                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
                  <div>
                    <Input
-                      value={userState.user && userState.user.email !== '' ? userState.user.email : '未绑定'}
+                      value={
+                        userState.user && userState.user.email !== ''
+                          ? userState.user.email
+                          : '未绑定'
+                      }
                      readonly={true}
                    ></Input>
                  </div>
                  <div>
-                    <Button onClick={() => {
-                      setShowEmailBindModal(true);
-                    }}>{
-                      userState.user && userState.user.email !== '' ? '修改绑定' : '绑定邮箱'
-                    }</Button>
+                    <Button
+                      onClick={() => {
+                        setShowEmailBindModal(true);
+                      }}
+                    >
+                      {userState.user && userState.user.email !== ''
+                        ? '修改绑定'
+                        : '绑定邮箱'}
+                    </Button>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 10 }}>
                <Typography.Text strong>微信</Typography.Text>
-                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
                  <div>
                    <Input
-                      value={userState.user && userState.user.wechat_id !== '' ? '已绑定' : '未绑定'}
+                      value={
+                        userState.user && userState.user.wechat_id !== ''
+                          ? '已绑定'
+                          : '未绑定'
+                      }
                      readonly={true}
                    ></Input>
                  </div>
                  <div>
-                    <Button disabled={(userState.user && userState.user.wechat_id !== '') || !status.wechat_login}>
-                      {
-                        status.wechat_login ? '绑定' : '未启用'
+                    <Button
+                      disabled={
+                        (userState.user && userState.user.wechat_id !== '') ||
+                        !status.wechat_login
                      }
+                    >
+                      {status.wechat_login ? '绑定' : '未启用'}
                    </Button>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 10 }}>
                <Typography.Text strong>GitHub</Typography.Text>
-                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
                  <div>
                    <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}
                    ></Input>
                  </div>
@@ -440,11 +509,12 @@ const PersonalSetting = () => {
                      onClick={() => {
                        onGitHubOAuthClicked(status.github_client_id);
                      }}
-                      disabled={(userState.user && userState.user.github_id !== '') || !status.github_oauth}
-                    >
-                      {
-                        status.github_oauth ? '绑定' : '未启用'
+                      disabled={
+                        (userState.user && userState.user.github_id !== '') ||
+                        !status.github_oauth
                      }
+                    >
+                      {status.github_oauth ? '绑定' : '未启用'}
                    </Button>
                  </div>
                </div>
@@ -452,33 +522,56 @@ const PersonalSetting = () => {

              <div style={{ marginTop: 10 }}>
                <Typography.Text strong>Telegram</Typography.Text>
-                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
                  <div>
                    <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}
                    ></Input>
                  </div>
                  <div>
-                    {status.telegram_oauth ?
-                      userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
-                        : <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind"
-                                               botName={status.telegram_bot_name} />
-                      : <Button disabled={true}>未启用</Button>
-                    }
+                    {status.telegram_oauth ? (
+                      userState.user.telegram_id !== '' ? (
+                        <Button disabled={true}>已绑定</Button>
+                      ) : (
+                        <TelegramLoginButton
+                          dataAuthUrl='/api/oauth/telegram/bind'
+                          botName={status.telegram_bot_name}
+                        />
+                      )
+                    ) : (
+                      <Button disabled={true}>未启用</Button>
+                    )}
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 10 }}>
                <Space>
-                  <Button onClick={generateAccessToken}>生成系统访问令牌</Button>
-                  <Button onClick={() => {
-                    setShowChangePasswordModal(true);
-                  }}>修改密码</Button>
-                  <Button type={'danger'} onClick={() => {
-                    setShowAccountDeleteModal(true);
-                  }}>删除个人账户</Button>
+                  <Button onClick={generateAccessToken}>
+                    生成系统访问令牌
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      setShowChangePasswordModal(true);
+                    }}
+                  >
+                    修改密码
+                  </Button>
+                  <Button
+                    type={'danger'}
+                    onClick={() => {
+                      setShowAccountDeleteModal(true);
+                    }}
+                  >
+                    删除个人账户
+                  </Button>
                </Space>

                {systemToken && (
@@ -489,17 +582,15 @@ const PersonalSetting = () => {
                    style={{ marginTop: '10px' }}
                  />
                )}
-                {
-                  status.wechat_login && (
-                    <Button
-                      onClick={() => {
-                        setShowWeChatBindModal(true);
-                      }}
-                    >
-                      绑定微信账号
-                    </Button>
-                  )
-                }
+                {status.wechat_login && (
+                  <Button
+                    onClick={() => {
+                      setShowWeChatBindModal(true);
+                    }}
+                  >
+                    绑定微信账号
+                  </Button>
+                )}
                <Modal
                  onCancel={() => setShowWeChatBindModal(false)}
                  // onOpen={() => setShowWeChatBindModal(true)}
@@ -513,12 +604,14 @@ const PersonalSetting = () => {
                    </p>
                  </div>
                  <Input
-                    placeholder="验证码"
-                    name="wechat_verification_code"
+                    placeholder='验证码'
+                    name='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>
                </Modal>
@@ -534,26 +627,36 @@ const PersonalSetting = () => {
              maskClosable={false}
            >
              <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
                  fluid
-                  placeholder="输入邮箱地址"
+                  placeholder='输入邮箱地址'
                  onChange={(value) => handleInputChange('email', value)}
-                  name="email"
-                  type="email"
+                  name='email'
+                  type='email'
                />
-                <Button onClick={sendVerificationCode}
-                        disabled={disableButton || loading}>
+                <Button
+                  onClick={sendVerificationCode}
+                  disabled={disableButton || loading}
+                >
                  {disableButton ? `重新发送(${countdown})` : '获取验证码'}
                </Button>
              </div>
              <div style={{ marginTop: 10 }}>
                <Input
                  fluid
-                  placeholder="验证码"
-                  name="email_verification_code"
+                  placeholder='验证码'
+                  name='email_verification_code'
                  value={inputs.email_verification_code}
-                  onChange={(value) => handleInputChange('email_verification_code', value)}
+                  onChange={(value) =>
+                    handleInputChange('email_verification_code', value)
+                  }
                />
              </div>
              {turnstileEnabled ? (
@@ -576,17 +679,22 @@ const PersonalSetting = () => {
            >
              <div style={{ marginTop: 20 }}>
                <Banner
-                  type="danger"
-                  description="您正在删除自己的帐户，将清空所有数据且不可恢复"
+                  type='danger'
+                  description='您正在删除自己的帐户，将清空所有数据且不可恢复'
                  closeIcon={null}
                />
              </div>
              <div style={{ marginTop: 20 }}>
                <Input
                  placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
-                  name="self_account_deletion_confirmation"
+                  name='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 ? (
                  <Turnstile
@@ -609,17 +717,21 @@ const PersonalSetting = () => {
            >
              <div style={{ marginTop: 20 }}>
                <Input
-                  name="set_new_password"
-                  placeholder="新密码"
+                  name='set_new_password'
+                  placeholder='新密码'
                  value={inputs.set_new_password}
-                  onChange={(value) => handleInputChange('set_new_password', value)}
+                  onChange={(value) =>
+                    handleInputChange('set_new_password', value)
+                  }
                />
                <Input
                  style={{ marginTop: 20 }}
-                  name="set_new_password_confirmation"
-                  placeholder="确认新密码"
+                  name='set_new_password_confirmation'
+                  placeholder='确认新密码'
                  value={inputs.set_new_password_confirmation}
-                  onChange={(value) => handleInputChange('set_new_password_confirmation', value)}
+                  onChange={(value) =>
+                    handleInputChange('set_new_password_confirmation', value)
+                  }
                />
                {turnstileEnabled ? (
                  <Turnstile
@@ -634,7 +746,6 @@ const PersonalSetting = () => {
              </div>
            </Modal>
          </div>
-
        </Layout.Content>
      </Layout>
    </div>
--- a/web/src/components/PrivateRoute.js
+++ b/web/src/components/PrivateRoute.js
@@ -2,12 +2,11 @@ import { Navigate } from 'react-router-dom';

 import { history } from '../helpers';

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

-export { PrivateRoute };
+export { PrivateRoute };
--- a/web/src/components/RedemptionsTable.js
+++ b/web/src/components/RedemptionsTable.js
@@ -1,29 +1,58 @@
 import React, { useEffect, useState } from 'react';
-import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showSuccess,
+  timestamp2string,
+} from '../helpers';

 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
-import { Button, Form, Modal, Popconfirm, Popover, Table, Tag } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Form,
+  Modal,
+  Popconfirm,
+  Popover,
+  Table,
+  Tag,
+} from '@douyinfe/semi-ui';
 import EditRedemption from '../pages/Redemption/EditRedemption';

 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }

 function renderStatus(status) {
  switch (status) {
    case 1:
-      return <Tag color="green" size="large">未使用</Tag>;
+      return (
+        <Tag color='green' size='large'>
+          未使用
+        </Tag>
+      );
    case 2:
-      return <Tag color="red" size="large"> 已禁用 </Tag>;
+      return (
+        <Tag color='red' size='large'>
+          {' '}
+          已禁用{' '}
+        </Tag>
+      );
    case 3:
-      return <Tag color="grey" size="large"> 已使用 </Tag>;
+      return (
+        <Tag color='grey' size='large'>
+          {' '}
+          已使用{' '}
+        </Tag>
+      );
    default:
-      return <Tag color="black" size="large"> 未知状态 </Tag>;
+      return (
+        <Tag color='black' size='large'>
+          {' '}
+          未知状态{' '}
+        </Tag>
+      );
  }
 }

@@ -31,121 +60,115 @@ const RedemptionsTable = () => {
  const columns = [
    {
      title: 'ID',
-      dataIndex: 'id'
+      dataIndex: 'id',
    },
    {
      title: '名称',
-      dataIndex: 'name'
+      dataIndex: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderStatus(text)}
-          </div>
-        );
-      }
+        return <div>{renderStatus(text)}</div>;
+      },
    },
    {
      title: '额度',
      dataIndex: 'quota',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderQuota(parseInt(text))}
-          </div>
-        );
-      }
+        return <div>{renderQuota(parseInt(text))}</div>;
+      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_time',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderTimestamp(text)}
-          </div>
-        );
-      }
+        return <div>{renderTimestamp(text)}</div>;
+      },
    },
    {
      title: '兑换人ID',
      dataIndex: 'used_user_id',
      render: (text, record, index) => {
-        return (
-          <div>
-            {text === 0 ? '无' : text}
-          </div>
-        );
-      }
+        return <div>{text === 0 ? '无' : text}</div>;
+      },
    },
    {
      title: '',
      dataIndex: 'operate',
      render: (text, record, index) => (
        <div>
-          <Popover
-            content={
-              record.key
-            }
-            style={{ padding: 20 }}
-            position="top"
-          >
-            <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
+          <Popover content={record.key} style={{ padding: 20 }} position='top'>
+            <Button theme='light' type='tertiary' style={{ marginRight: 1 }}>
+              查看
+            </Button>
          </Popover>
-          <Button theme="light" type="secondary" style={{ marginRight: 1 }}
-                  onClick={async (text) => {
-                    await copyText(record.key);
-                  }}
-          >复制</Button>
+          <Button
+            theme='light'
+            type='secondary'
+            style={{ marginRight: 1 }}
+            onClick={async (text) => {
+              await copyText(record.key);
+            }}
+          >
+            复制
+          </Button>
          <Popconfirm
-            title="确定是否要删除此兑换码？"
-            content="此修改将不可逆"
+            title='确定是否要删除此兑换码？'
+            content='此修改将不可逆'
            okType={'danger'}
            position={'left'}
            onConfirm={() => {
-              manageRedemption(record.id, 'delete', record).then(
-                () => {
-                  removeRecord(record.key);
-                }
-              );
+              manageRedemption(record.id, 'delete', record).then(() => {
+                removeRecord(record.key);
+              });
            }}
          >
-            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+            <Button theme='light' type='danger' style={{ marginRight: 1 }}>
+              删除
+            </Button>
          </Popconfirm>
-          {
-            record.status === 1 ?
-              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
-                async () => {
-                  manageRedemption(
-                    record.id,
-                    'disable',
-                    record
-                  );
-                }
-              }>禁用</Button> :
-              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
-                async () => {
-                  manageRedemption(
-                    record.id,
-                    'enable',
-                    record
-                  );
-                }
-              } disabled={record.status === 3}>启用</Button>
-          }
-          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
-            () => {
+          {record.status === 1 ? (
+            <Button
+              theme='light'
+              type='warning'
+              style={{ marginRight: 1 }}
+              onClick={async () => {
+                manageRedemption(record.id, 'disable', record);
+              }}
+            >
+              禁用
+            </Button>
+          ) : (
+            <Button
+              theme='light'
+              type='secondary'
+              style={{ marginRight: 1 }}
+              onClick={async () => {
+                manageRedemption(record.id, 'enable', record);
+              }}
+              disabled={record.status === 3}
+            >
+              启用
+            </Button>
+          )}
+          <Button
+            theme='light'
+            type='tertiary'
+            style={{ marginRight: 1 }}
+            onClick={() => {
              setEditingRedemption(record);
              setShowEdit(true);
-            }
-          } disabled={record.status !== 1}>编辑</Button>
+            }}
+            disabled={record.status !== 1}
+          >
+            编辑
+          </Button>
        </div>
-      )
-    }
+      ),
+    },
  ];

  const [redemptions, setRedemptions] = useState([]);
@@ -156,7 +179,7 @@ const RedemptionsTable = () => {
  const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [editingRedemption, setEditingRedemption] = useState({
-    id: undefined
+    id: undefined,
  });
  const [showEdit, setShowEdit] = useState(false);

@@ -178,7 +201,7 @@ const RedemptionsTable = () => {
    // }
    // data.key = '' + data.id
    setRedemptions(redeptions);
-    if (redeptions.length >= (activePage) * ITEMS_PER_PAGE) {
+    if (redeptions.length >= activePage * ITEMS_PER_PAGE) {
      setTokenCount(redeptions.length + 1);
    } else {
      setTokenCount(redeptions.length);
@@ -202,10 +225,10 @@ const RedemptionsTable = () => {
    setLoading(false);
  };

-  const removeRecord = key => {
+  const removeRecord = (key) => {
    let newDataSource = [...redemptions];
    if (key != null) {
-      let idx = newDataSource.findIndex(data => data.key === key);
+      let idx = newDataSource.findIndex((data) => data.key === key);

      if (idx > -1) {
        newDataSource.splice(idx, 1);
@@ -268,7 +291,6 @@ const RedemptionsTable = () => {
      let newRedemptions = [...redemptions];
      // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
      if (action === 'delete') {
-
      } else {
        record.status = redemption.status;
      }
@@ -286,7 +308,9 @@ const RedemptionsTable = () => {
      return;
    }
    setSearching(true);
-    const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
+    const res = await API.get(
+      `/api/redemption/search?keyword=${searchKeyword}`,
+    );
    const { success, message, data } = res.data;
    if (success) {
      setRedemptions(data);
@@ -315,32 +339,32 @@ const RedemptionsTable = () => {
    setLoading(false);
  };

-  const handlePageChange = page => {
+  const handlePageChange = (page) => {
    setActivePage(page);
    if (page === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
      // In this case we have to load more data and then append them.
-      loadRedemptions(page - 1).then(r => {
-      });
+      loadRedemptions(page - 1).then((r) => {});
    }
  };

-  let pageData = redemptions.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+  let pageData = redemptions.slice(
+    (activePage - 1) * ITEMS_PER_PAGE,
+    activePage * ITEMS_PER_PAGE,
+  );
  const rowSelection = {
-    onSelect: (record, selected) => {
-    },
-    onSelectAll: (selected, selectedRows) => {
-    },
+    onSelect: (record, selected) => {},
+    onSelectAll: (selected, selectedRows) => {},
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedKeys(selectedRows);
-    }
+    },
  };

  const handleRow = (record, index) => {
    if (record.status !== 1) {
      return {
        style: {
-          background: 'var(--semi-color-disabled-border)'
-        }
+          background: 'var(--semi-color-disabled-border)',
+        },
      };
    } else {
      return {};
@@ -349,45 +373,64 @@ const RedemptionsTable = () => {

  return (
    <>
-      <EditRedemption refresh={refresh} editingRedemption={editingRedemption} visiable={showEdit}
-                      handleClose={closeEdit}></EditRedemption>
+      <EditRedemption
+        refresh={refresh}
+        editingRedemption={editingRedemption}
+        visiable={showEdit}
+        handleClose={closeEdit}
+      ></EditRedemption>
      <Form onSubmit={searchRedemptions}>
        <Form.Input
-          label="搜索关键字"
-          field="keyword"
-          icon="search"
-          iconPosition="left"
-          placeholder="关键字(id或者名称)"
+          label='搜索关键字'
+          field='keyword'
+          icon='search'
+          iconPosition='left'
+          placeholder='关键字(id或者名称)'
          value={searchKeyword}
          loading={searching}
          onChange={handleKeywordChange}
        />
      </Form>

-      <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
-        currentPage: activePage,
-        pageSize: ITEMS_PER_PAGE,
-        total: tokenCount,
-        // showSizeChanger: true,
-        // pageSizeOptions: [10, 20, 50, 100],
-        formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`,
-        // onPageSizeChange: (size) => {
-        //   setPageSize(size);
-        //   setActivePage(1);
-        // },
-        onPageChange: handlePageChange
-      }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
-      </Table>
-      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
-        () => {
+      <Table
+        style={{ marginTop: 20 }}
+        columns={columns}
+        dataSource={pageData}
+        pagination={{
+          currentPage: activePage,
+          pageSize: ITEMS_PER_PAGE,
+          total: tokenCount,
+          // showSizeChanger: true,
+          // pageSizeOptions: [10, 20, 50, 100],
+          formatPageText: (page) =>
+            `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`,
+          // onPageSizeChange: (size) => {
+          //   setPageSize(size);
+          //   setActivePage(1);
+          // },
+          onPageChange: handlePageChange,
+        }}
+        loading={loading}
+        rowSelection={rowSelection}
+        onRow={handleRow}
+      ></Table>
+      <Button
+        theme='light'
+        type='primary'
+        style={{ marginRight: 8 }}
+        onClick={() => {
          setEditingRedemption({
-            id: undefined
+            id: undefined,
          });
          setShowEdit(true);
-        }
-      }>添加兑换码</Button>
-      <Button label="复制所选兑换码" type="warning" onClick={
-        async () => {
+        }}
+      >
+        添加兑换码
+      </Button>
+      <Button
+        label='复制所选兑换码'
+        type='warning'
+        onClick={async () => {
          if (selectedKeys.length === 0) {
            showError('请至少选择一个兑换码！');
            return;
@@ -397,8 +440,10 @@ const RedemptionsTable = () => {
            keys += selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
          }
          await copyText(keys);
-        }
-      }>复制所选兑换码到剪贴板</Button>
+        }}
+      >
+        复制所选兑换码到剪贴板
+      </Button>
    </>
  );
 };
--- a/web/src/components/RegisterForm.js
+++ b/web/src/components/RegisterForm.js
@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Grid,
+  Header,
+  Image,
+  Message,
+  Segment,
+} from 'semantic-ui-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
@@ -10,7 +18,7 @@ const RegisterForm = () => {
    password: '',
    password2: '',
    email: '',
-    verification_code: ''
+    verification_code: '',
  });
  const { username, password, password2 } = inputs;
  const [showEmailVerification, setShowEmailVerification] = useState(false);
@@ -65,7 +73,7 @@ const RegisterForm = () => {
      inputs.aff_code = affCode;
      const res = await API.post(
        `/api/user/register?turnstile=${turnstileToken}`,
-        inputs
+        inputs,
      );
      const { success, message } = res.data;
      if (success) {
@@ -86,7 +94,7 @@ const RegisterForm = () => {
    }
    setLoading(true);
    const res = await API.get(
-      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
    );
    const { success, message } = res.data;
    if (success) {
@@ -98,49 +106,49 @@ const RegisterForm = () => {
  };

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

-import { API, getLogo, getSystemName, isAdmin, isMobile, showError } from '../helpers';
+import {
+  API,
+  getLogo,
+  getSystemName,
+  isAdmin,
+  isMobile,
+  showError,
+} from '../helpers';
 import '../index.css';

 import {
@@ -17,7 +24,7 @@ import {
  IconKey,
  IconLayers,
  IconSetting,
-  IconUser
+  IconUser,
 } from '@douyinfe/semi-icons';
 import { Layout, Nav } from '@douyinfe/semi-ui';

@@ -26,7 +33,8 @@ import { Layout, Nav } from '@douyinfe/semi-ui';
 const SiderBar = () => {
  const [userState, userDispatch] = useContext(UserContext);
  const [statusState, statusDispatch] = useContext(StatusContext);
-  const defaultIsCollapsed = isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';
+  const defaultIsCollapsed =
+    isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';

  let navigate = useNavigate();
  const [selectedKeys, setSelectedKeys] = useState(['home']);
@@ -46,89 +54,105 @@ const SiderBar = () => {
    setting: '/setting',
    about: '/about',
    chat: '/chat',
-    detail: '/detail'
+    detail: '/detail',
  };

-  const headerButtons = useMemo(() => [
-    {
-      text: '首页',
-      itemKey: 'home',
-      to: '/',
-      icon: <IconHome />
-    },
-    {
-      text: '渠道',
-      itemKey: 'channel',
-      to: '/channel',
-      icon: <IconLayers />,
-      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
-    },
-    {
-      text: '聊天',
-      itemKey: 'chat',
-      to: '/chat',
-      icon: <IconComment />,
-      className: localStorage.getItem('chat_link') ? 'semi-navigation-item-normal' : 'tableHiddle'
-    },
-    {
-      text: '令牌',
-      itemKey: 'token',
-      to: '/token',
-      icon: <IconKey />
-    },
-    {
-      text: '兑换码',
-      itemKey: 'redemption',
-      to: '/redemption',
-      icon: <IconGift />,
-      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
-    },
-    {
-      text: '钱包',
-      itemKey: 'topup',
-      to: '/topup',
-      icon: <IconCreditCard />
-    },
-    {
-      text: '用户管理',
-      itemKey: 'user',
-      to: '/user',
-      icon: <IconUser />,
-      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
-    },
-    {
-      text: '日志',
-      itemKey: 'log',
-      to: '/log',
-      icon: <IconHistogram />
-    },
-    {
-      text: '数据看板',
-      itemKey: 'detail',
-      to: '/detail',
-      icon: <IconCalendarClock />,
-      className: localStorage.getItem('enable_data_export') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
-    },
-    {
-      text: '绘图',
-      itemKey: 'midjourney',
-      to: '/midjourney',
-      icon: <IconImage />,
-      className: localStorage.getItem('enable_drawing') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
-    },
-    {
-      text: '设置',
-      itemKey: 'setting',
-      to: '/setting',
-      icon: <IconSetting />
-    }
-    // {
-    //     text: '关于',
-    //     itemKey: 'about',
-    //     to: '/about',
-    //     icon: <IconAt/>
-    // }
-  ], [localStorage.getItem('enable_data_export'), localStorage.getItem('enable_drawing'), localStorage.getItem('chat_link'), isAdmin()]);
+  const headerButtons = useMemo(
+    () => [
+      {
+        text: '首页',
+        itemKey: 'home',
+        to: '/',
+        icon: <IconHome />,
+      },
+      {
+        text: '渠道',
+        itemKey: 'channel',
+        to: '/channel',
+        icon: <IconLayers />,
+        className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle',
+      },
+      {
+        text: '聊天',
+        itemKey: 'chat',
+        to: '/chat',
+        icon: <IconComment />,
+        className: localStorage.getItem('chat_link')
+          ? 'semi-navigation-item-normal'
+          : 'tableHiddle',
+      },
+      {
+        text: '令牌',
+        itemKey: 'token',
+        to: '/token',
+        icon: <IconKey />,
+      },
+      {
+        text: '兑换码',
+        itemKey: 'redemption',
+        to: '/redemption',
+        icon: <IconGift />,
+        className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle',
+      },
+      {
+        text: '钱包',
+        itemKey: 'topup',
+        to: '/topup',
+        icon: <IconCreditCard />,
+      },
+      {
+        text: '用户管理',
+        itemKey: 'user',
+        to: '/user',
+        icon: <IconUser />,
+        className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle',
+      },
+      {
+        text: '日志',
+        itemKey: 'log',
+        to: '/log',
+        icon: <IconHistogram />,
+      },
+      {
+        text: '数据看板',
+        itemKey: 'detail',
+        to: '/detail',
+        icon: <IconCalendarClock />,
+        className:
+          localStorage.getItem('enable_data_export') === 'true'
+            ? 'semi-navigation-item-normal'
+            : 'tableHiddle',
+      },
+      {
+        text: '绘图',
+        itemKey: 'midjourney',
+        to: '/midjourney',
+        icon: <IconImage />,
+        className:
+          localStorage.getItem('enable_drawing') === 'true'
+            ? 'semi-navigation-item-normal'
+            : 'tableHiddle',
+      },
+      {
+        text: '设置',
+        itemKey: 'setting',
+        to: '/setting',
+        icon: <IconSetting />,
+      },
+      // {
+      //     text: '关于',
+      //     itemKey: 'about',
+      //     to: '/about',
+      //     icon: <IconAt/>
+      // }
+    ],
+    [
+      localStorage.getItem('enable_data_export'),
+      localStorage.getItem('enable_drawing'),
+      localStorage.getItem('chat_link'),
+      isAdmin(),
+    ],
+  );

  const loadStatus = async () => {
    const res = await API.get('/api/status');
@@ -143,8 +167,14 @@ const SiderBar = () => {
      localStorage.setItem('display_in_currency', data.display_in_currency);
      localStorage.setItem('enable_drawing', data.enable_drawing);
      localStorage.setItem('enable_data_export', data.enable_data_export);
-      localStorage.setItem('data_export_default_time', data.data_export_default_time);
-      localStorage.setItem('default_collapse_sidebar', data.default_collapse_sidebar);
+      localStorage.setItem(
+        'data_export_default_time',
+        data.data_export_default_time,
+      );
+      localStorage.setItem(
+        'default_collapse_sidebar',
+        data.default_collapse_sidebar,
+      );
      localStorage.setItem('mj_notify_enabled', data.mj_notify_enabled);
      if (data.chat_link) {
        localStorage.setItem('chat_link', data.chat_link);
@@ -163,11 +193,14 @@ const SiderBar = () => {

  useEffect(() => {
    loadStatus().then(() => {
-      setIsCollapsed(isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true');
+      setIsCollapsed(
+        isMobile() ||
+          localStorage.getItem('default_collapse_sidebar') === 'true',
+      );
    });
-    let localKey = window.location.pathname.split('/')[1]
+    let localKey = window.location.pathname.split('/')[1];
    if (localKey === '') {
-      localKey = 'home'
+      localKey = 'home';
    }
    setSelectedKeys([localKey]);
  }, []);
@@ -179,9 +212,12 @@ const SiderBar = () => {
          <Nav
            // bodyStyle={{ maxWidth: 200 }}
            style={{ maxWidth: 200 }}
-            defaultIsCollapsed={isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'}
+            defaultIsCollapsed={
+              isMobile() ||
+              localStorage.getItem('default_collapse_sidebar') === 'true'
+            }
            isCollapsed={isCollapsed}
-            onCollapseChange={collapsed => {
+            onCollapseChange={(collapsed) => {
              setIsCollapsed(collapsed);
            }}
            selectedKeys={selectedKeys}
@@ -196,20 +232,20 @@ const SiderBar = () => {
              );
            }}
            items={headerButtons}
-            onSelect={key => {
+            onSelect={(key) => {
              setSelectedKeys([key.itemKey]);
            }}
            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={{
            //   text: '© 2021 NekoAPI',
            // }}
          >
-
-            <Nav.Footer collapseButton={true}>
-            </Nav.Footer>
+            <Nav.Footer collapseButton={true}></Nav.Footer>
          </Nav>
        </div>
      </Layout>
--- a/web/src/components/SystemSetting.js
+++ b/web/src/components/SystemSetting.js
@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Divider, Form, Grid, Header, Message, Modal } from 'semantic-ui-react';
+import {
+  Button,
+  Divider,
+  Form,
+  Grid,
+  Header,
+  Message,
+  Modal,
+} from 'semantic-ui-react';
 import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';

 const SystemSetting = () => {
@@ -38,13 +46,14 @@ const SystemSetting = () => {
    // telegram login
    TelegramOAuthEnabled: '',
    TelegramBotToken: '',
-    TelegramBotName: ''
+    TelegramBotName: '',
  });
  const [originInputs, setOriginInputs] = useState({});
  let [loading, setLoading] = useState(false);
  const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
  const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
-  const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false);
+  const [showPasswordWarningModal, setShowPasswordWarningModal] =
+    useState(false);

  const getOptions = async () => {
    const res = await API.get('/api/option/');
@@ -59,13 +68,15 @@ const SystemSetting = () => {
      });
      setInputs({
        ...newInputs,
-        EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(',')
+        EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(','),
      });
      setOriginInputs(newInputs);

-      setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => {
-        return { key: item, text: item, value: item };
-      }));
+      setEmailDomainWhitelist(
+        newInputs.EmailDomainWhitelist.split(',').map((item) => {
+          return { key: item, text: item, value: item };
+        }),
+      );
    } else {
      showError(message);
    }
@@ -94,7 +105,7 @@ const SystemSetting = () => {
    }
    const res = await API.put('/api/option/', {
      key,
-      value
+      value,
    });
    const { success, message } = res.data;
    if (success) {
@@ -105,7 +116,8 @@ const SystemSetting = () => {
        value = parseFloat(value);
      }
      setInputs((inputs) => ({
-        ...inputs, [key]: value
+        ...inputs,
+        [key]: value,
      }));
    } else {
      showError(message);
@@ -197,13 +209,16 @@ const SystemSetting = () => {
    }
  };

-
  const submitEmailDomainWhitelist = async () => {
    if (
-      originInputs['EmailDomainWhitelist'] !== inputs.EmailDomainWhitelist.join(',') &&
+      originInputs['EmailDomainWhitelist'] !==
+        inputs.EmailDomainWhitelist.join(',') &&
      inputs.SMTPToken !== ''
    ) {
-      await updateOption('EmailDomainWhitelist', inputs.EmailDomainWhitelist.join(','));
+      await updateOption(
+        'EmailDomainWhitelist',
+        inputs.EmailDomainWhitelist.join(','),
+      );
    }
  };

@@ -211,7 +226,7 @@ const SystemSetting = () => {
    if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
      await updateOption(
        'WeChatServerAddress',
-        removeTrailingSlash(inputs.WeChatServerAddress)
+        removeTrailingSlash(inputs.WeChatServerAddress),
      );
    }
    if (
@@ -220,7 +235,7 @@ const SystemSetting = () => {
    ) {
      await updateOption(
        'WeChatAccountQRCodeImageURL',
-        inputs.WeChatAccountQRCodeImageURL
+        inputs.WeChatAccountQRCodeImageURL,
      );
    }
    if (
@@ -263,17 +278,23 @@ const SystemSetting = () => {

  const submitNewRestrictedDomain = () => {
    const localDomainList = inputs.EmailDomainWhitelist;
-    if (restrictedDomainInput !== '' && !localDomainList.includes(restrictedDomainInput)) {
+    if (
+      restrictedDomainInput !== '' &&
+      !localDomainList.includes(restrictedDomainInput)
+    ) {
      setRestrictedDomainInput('');
      setInputs({
        ...inputs,
-        EmailDomainWhitelist: [...localDomainList, restrictedDomainInput]
+        EmailDomainWhitelist: [...localDomainList, restrictedDomainInput],
      });
-      setEmailDomainWhitelist([...EmailDomainWhitelist, {
-        key: restrictedDomainInput,
-        text: restrictedDomainInput,
-        value: restrictedDomainInput
-      }]);
+      setEmailDomainWhitelist([
+        ...EmailDomainWhitelist,
+        {
+          key: restrictedDomainInput,
+          text: restrictedDomainInput,
+          value: restrictedDomainInput,
+        },
+      ]);
    }
  };

@@ -281,13 +302,13 @@ const SystemSetting = () => {
    <Grid columns={1}>
      <Grid.Column>
        <Form loading={loading}>
-          <Header as="h3">通用设置</Header>
-          <Form.Group widths="equal">
+          <Header as='h3'>通用设置</Header>
+          <Form.Group widths='equal'>
            <Form.Input
-              label="服务器地址"
-              placeholder="例如：https://yourdomain.com"
+              label='服务器地址'
+              placeholder='例如：https://yourdomain.com'
              value={inputs.ServerAddress}
-              name="ServerAddress"
+              name='ServerAddress'
              onChange={handleInputChange}
            />
          </Form.Group>
@@ -295,81 +316,79 @@ const SystemSetting = () => {
            更新服务器地址
          </Form.Button>
          <Divider />
-          <Header as="h3">支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header>
-          <Form.Group widths="equal">
+          <Header as='h3'>
+            支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
+          </Header>
+          <Form.Group widths='equal'>
            <Form.Input
-              label="支付地址，不填写则不启用在线支付"
-              placeholder="例如：https://yourdomain.com"
+              label='支付地址，不填写则不启用在线支付'
+              placeholder='例如：https://yourdomain.com'
              value={inputs.PayAddress}
-              name="PayAddress"
+              name='PayAddress'
              onChange={handleInputChange}
            />
            <Form.Input
-              label="易支付商户ID"
-              placeholder="例如：0001"
+              label='易支付商户ID'
+              placeholder='例如：0001'
              value={inputs.EpayId}
-              name="EpayId"
+              name='EpayId'
              onChange={handleInputChange}
            />
            <Form.Input
-              label="易支付商户密钥"
-              placeholder="例如：dejhfueqhujasjmndbjkqaw"
+              label='易支付商户密钥'
+              placeholder='例如：dejhfueqhujasjmndbjkqaw'
              value={inputs.EpayKey}
-              name="EpayKey"
+              name='EpayKey'
              onChange={handleInputChange}
            />
-
          </Form.Group>
-          <Form.Group widths="equal">
+          <Form.Group widths='equal'>
            <Form.Input
-              label="回调地址，不填写则使用上方服务器地址作为回调地址"
-              placeholder="例如：https://yourdomain.com"
+              label='回调地址，不填写则使用上方服务器地址作为回调地址'
+              placeholder='例如：https://yourdomain.com'
              value={inputs.CustomCallbackAddress}
-              name="CustomCallbackAddress"
+              name='CustomCallbackAddress'
              onChange={handleInputChange}
            />
            <Form.Input
-              label="充值价格（x元/美金）"
-              placeholder="例如：7，就是7元/美金"
+              label='充值价格（x元/美金）'
+              placeholder='例如：7，就是7元/美金'
              value={inputs.Price}
-              name="Price"
+              name='Price'
              min={0}
              onChange={handleInputChange}
            />
            <Form.Input
-              label="最低充值数量"
-              placeholder="例如：2，就是最低充值2$"
+              label='最低充值数量'
+              placeholder='例如：2，就是最低充值2$'
              value={inputs.MinTopUp}
-              name="MinTopUp"
+              name='MinTopUp'
              min={1}
              onChange={handleInputChange}
            />
          </Form.Group>
-          <Form.Group widths="equal">
+          <Form.Group widths='equal'>
            <Form.TextArea
-              label="充值分组倍率"
-              name="TopupGroupRatio"
+              label='充值分组倍率'
+              name='TopupGroupRatio'
              onChange={handleInputChange}
              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.TopupGroupRatio}
-              placeholder="为一个 JSON 文本，键为组名称，值为倍率"
+              placeholder='为一个 JSON 文本，键为组名称，值为倍率'
            />
          </Form.Group>
-          <Form.Button onClick={submitPayAddress}>
-            更新支付设置
-          </Form.Button>
+          <Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button>
          <Divider />
-          <Header as="h3">配置登录注册</Header>
+          <Header as='h3'>配置登录注册</Header>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.PasswordLoginEnabled === 'true'}
-              label="允许通过密码进行登录"
-              name="PasswordLoginEnabled"
+              label='允许通过密码进行登录'
+              name='PasswordLoginEnabled'
              onChange={handleInputChange}
            />
-            {
-              showPasswordWarningModal &&
+            {showPasswordWarningModal && (
              <Modal
                open={showPasswordWarningModal}
                onClose={() => setShowPasswordWarningModal(false)}
@@ -378,12 +397,16 @@ const SystemSetting = () => {
              >
                <Modal.Header>警告</Modal.Header>
                <Modal.Content>
-                  <p>取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？</p>
+                  <p>
+                    取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？
+                  </p>
                </Modal.Content>
                <Modal.Actions>
-                  <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
+                  <Button onClick={() => setShowPasswordWarningModal(false)}>
+                    取消
+                  </Button>
                  <Button
-                    color="yellow"
+                    color='yellow'
                    onClick={async () => {
                      setShowPasswordWarningModal(false);
                      await updateOption('PasswordLoginEnabled', 'false');
@@ -393,157 +416,170 @@ const SystemSetting = () => {
                  </Button>
                </Modal.Actions>
              </Modal>
-            }
+            )}
            <Form.Checkbox
              checked={inputs.PasswordRegisterEnabled === 'true'}
-              label="允许通过密码进行注册"
-              name="PasswordRegisterEnabled"
+              label='允许通过密码进行注册'
+              name='PasswordRegisterEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.EmailVerificationEnabled === 'true'}
-              label="通过密码注册时需要进行邮箱验证"
-              name="EmailVerificationEnabled"
+              label='通过密码注册时需要进行邮箱验证'
+              name='EmailVerificationEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.GitHubOAuthEnabled === 'true'}
-              label="允许通过 GitHub 账户登录 & 注册"
-              name="GitHubOAuthEnabled"
+              label='允许通过 GitHub 账户登录 & 注册'
+              name='GitHubOAuthEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.WeChatAuthEnabled === 'true'}
-              label="允许通过微信登录 & 注册"
-              name="WeChatAuthEnabled"
+              label='允许通过微信登录 & 注册'
+              name='WeChatAuthEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.TelegramOAuthEnabled === 'true'}
-              label="允许通过 Telegram 进行登录"
-              name="TelegramOAuthEnabled"
+              label='允许通过 Telegram 进行登录'
+              name='TelegramOAuthEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
          <Form.Group inline>
            <Form.Checkbox
              checked={inputs.RegisterEnabled === 'true'}
-              label="允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）"
-              name="RegisterEnabled"
+              label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）'
+              name='RegisterEnabled'
              onChange={handleInputChange}
            />
            <Form.Checkbox
              checked={inputs.TurnstileCheckEnabled === 'true'}
-              label="启用 Turnstile 用户校验"
-              name="TurnstileCheckEnabled"
+              label='启用 Turnstile 用户校验'
+              name='TurnstileCheckEnabled'
              onChange={handleInputChange}
            />
          </Form.Group>
          <Divider />
-          <Header as="h3">
+          <Header as='h3'>
            配置邮箱域名白名单
-            <Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
+            <Header.Subheader>
+              用以防止恶意用户利用临时邮箱批量注册
+            </Header.Subheader>
          </Header>
          <Form.Group widths={3}>
            <Form.Checkbox
-              label="启用邮箱域名白名单"
-              name="EmailDomainRestrictionEnabled"
+              label='启用邮箱域名白名单'
+              name='EmailDomainRestrictionEnabled'
              onChange={handleInputChange}
              checked={inputs.EmailDomainRestrictionEnabled === 'true'}
            />
          </Form.Group>
          <Form.Group widths={2}>
            <Form.Dropdown
-              label="允许的邮箱域名"
-              placeholder="允许的邮箱域名"
-              name="EmailDomainWhitelist"
+              label='允许的邮箱域名'
+              placeholder='允许的邮箱域名'
+              name='EmailDomainWhitelist'
              required
              fluid
              multiple
              selection
              onChange={handleInputChange}
              value={inputs.EmailDomainWhitelist}
-              autoComplete="new-password"
+              autoComplete='new-password'
              options={EmailDomainWhitelist}
            />
            <Form.Input
-              label="添加新的允许的邮箱域名"
+              label='添加新的允许的邮箱域名'
              action={
-                <Button type="button" onClick={() => {
-                  submitNewRestrictedDomain();
-                }}>填入</Button>
+                <Button
+                  type='button'
+                  onClick={() => {
+                    submitNewRestrictedDomain();
+                  }}
+                >
+                  填入
+                </Button>
              }
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  submitNewRestrictedDomain();
                }
              }}
-              autoComplete="new-password"
-              placeholder="输入新的允许的邮箱域名"
+              autoComplete='new-password'
+              placeholder='输入新的允许的邮箱域名'
              value={restrictedDomainInput}
              onChange={(e, { value }) => {
                setRestrictedDomainInput(value);
              }}
            />
          </Form.Group>
-          <Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
+          <Form.Button onClick={submitEmailDomainWhitelist}>
+            保存邮箱域名白名单设置
+          </Form.Button>
          <Divider />
-          <Header as="h3">
+          <Header as='h3'>
            配置 SMTP
            <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
          </Header>
          <Form.Group widths={3}>
            <Form.Input
-              label="SMTP 服务器地址"
-              name="SMTPServer"
+              label='SMTP 服务器地址'
+              name='SMTPServer'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.SMTPServer}
-              placeholder="例如：smtp.qq.com"
+              placeholder='例如：smtp.qq.com'
            />
            <Form.Input
-              label="SMTP 端口"
-              name="SMTPPort"
+              label='SMTP 端口'
+              name='SMTPPort'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.SMTPPort}
-              placeholder="默认: 587"
+              placeholder='默认: 587'
            />
            <Form.Input
-              label="SMTP 账户"
-              name="SMTPAccount"
+              label='SMTP 账户'
+              name='SMTPAccount'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.SMTPAccount}
-              placeholder="通常是邮箱地址"
+              placeholder='通常是邮箱地址'
            />
          </Form.Group>
          <Form.Group widths={3}>
            <Form.Input
-              label="SMTP 发送者邮箱"
-              name="SMTPFrom"
+              label='SMTP 发送者邮箱'
+              name='SMTPFrom'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.SMTPFrom}
-              placeholder="通常和邮箱地址保持一致"
+              placeholder='通常和邮箱地址保持一致'
            />
            <Form.Input
-              label="SMTP 访问凭证"
-              name="SMTPToken"
+              label='SMTP 访问凭证'
+              name='SMTPToken'
              onChange={handleInputChange}
-              type="password"
-              autoComplete="new-password"
+              type='password'
+              autoComplete='new-password'
              checked={inputs.RegisterEnabled === 'true'}
-              placeholder="敏感信息不会发送到前端显示"
+              placeholder='敏感信息不会发送到前端显示'
            />
          </Form.Group>
          <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
          <Divider />
-          <Header as="h3">
+          <Header as='h3'>
            配置 GitHub OAuth App
            <Header.Subheader>
              用以支持通过 GitHub 进行登录注册，
-              <a href="https://github.com/settings/developers" target="_blank" rel="noreferrer">
+              <a
+                href='https://github.com/settings/developers'
+                target='_blank'
+                rel='noreferrer'
+              >
                点击此处
              </a>
              管理你的 GitHub OAuth App
@@ -556,34 +592,35 @@ const SystemSetting = () => {
          </Message>
          <Form.Group widths={3}>
            <Form.Input
-              label="GitHub Client ID"
-              name="GitHubClientId"
+              label='GitHub Client ID'
+              name='GitHubClientId'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.GitHubClientId}
-              placeholder="输入你注册的 GitHub OAuth APP 的 ID"
+              placeholder='输入你注册的 GitHub OAuth APP 的 ID'
            />
            <Form.Input
-              label="GitHub Client Secret"
-              name="GitHubClientSecret"
+              label='GitHub Client Secret'
+              name='GitHubClientSecret'
              onChange={handleInputChange}
-              type="password"
-              autoComplete="new-password"
+              type='password'
+              autoComplete='new-password'
              value={inputs.GitHubClientSecret}
-              placeholder="敏感信息不会发送到前端显示"
+              placeholder='敏感信息不会发送到前端显示'
            />
          </Form.Group>
          <Form.Button onClick={submitGitHubOAuth}>
            保存 GitHub OAuth 设置
          </Form.Button>
          <Divider />
-          <Header as="h3">
+          <Header as='h3'>
            配置 WeChat Server
            <Header.Subheader>
              用以支持通过微信进行登录注册，
              <a
-                href="https://github.com/songquanpeng/wechat-server"
-                target="_blank" rel="noreferrer"
+                href='https://github.com/songquanpeng/wechat-server'
+                target='_blank'
+                rel='noreferrer'
              >
                点击此处
              </a>
@@ -592,61 +629,65 @@ const SystemSetting = () => {
          </Header>
          <Form.Group widths={3}>
            <Form.Input
-              label="WeChat Server 服务器地址"
-              name="WeChatServerAddress"
-              placeholder="例如：https://yourdomain.com"
+              label='WeChat Server 服务器地址'
+              name='WeChatServerAddress'
+              placeholder='例如：https://yourdomain.com'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.WeChatServerAddress}
            />
            <Form.Input
-              label="WeChat Server 访问凭证"
-              name="WeChatServerToken"
-              type="password"
+              label='WeChat Server 访问凭证'
+              name='WeChatServerToken'
+              type='password'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.WeChatServerToken}
-              placeholder="敏感信息不会发送到前端显示"
+              placeholder='敏感信息不会发送到前端显示'
            />
            <Form.Input
-              label="微信公众号二维码图片链接"
-              name="WeChatAccountQRCodeImageURL"
+              label='微信公众号二维码图片链接'
+              name='WeChatAccountQRCodeImageURL'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.WeChatAccountQRCodeImageURL}
-              placeholder="输入一个图片链接"
+              placeholder='输入一个图片链接'
            />
          </Form.Group>
          <Form.Button onClick={submitWeChat}>
            保存 WeChat Server 设置
          </Form.Button>
          <Divider />
-          <Header as="h3">配置 Telegram 登录</Header>
+          <Header as='h3'>配置 Telegram 登录</Header>
          <Form.Group inline>
            <Form.Input
-              label="Telegram Bot Token"
-              name="TelegramBotToken"
+              label='Telegram Bot Token'
+              name='TelegramBotToken'
              onChange={handleInputChange}
              value={inputs.TelegramBotToken}
-              placeholder="输入你的 Telegram Bot Token"
+              placeholder='输入你的 Telegram Bot Token'
            />
            <Form.Input
-              label="Telegram Bot 名称"
-              name="TelegramBotName"
+              label='Telegram Bot 名称'
+              name='TelegramBotName'
              onChange={handleInputChange}
              value={inputs.TelegramBotName}
-              placeholder="输入你的 Telegram Bot 名称"
+              placeholder='输入你的 Telegram Bot 名称'
            />
          </Form.Group>
          <Form.Button onClick={submitTelegramSettings}>
            保存 Telegram 登录设置
          </Form.Button>
          <Divider />
-          <Header as="h3">
+          <Header as='h3'>
            配置 Turnstile
            <Header.Subheader>
              用以支持用户校验，
-              <a href="https://dash.cloudflare.com/" target="_blank" rel="noreferrer">
+              <a
+                href='https://dash.cloudflare.com/'
+                target='_blank'
+                rel='noreferrer'
+              >
                点击此处
              </a>
              管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
@@ -654,21 +695,21 @@ const SystemSetting = () => {
          </Header>
          <Form.Group widths={3}>
            <Form.Input
-              label="Turnstile Site Key"
-              name="TurnstileSiteKey"
+              label='Turnstile Site Key'
+              name='TurnstileSiteKey'
              onChange={handleInputChange}
-              autoComplete="new-password"
+              autoComplete='new-password'
              value={inputs.TurnstileSiteKey}
-              placeholder="输入你注册的 Turnstile Site Key"
+              placeholder='输入你注册的 Turnstile Site Key'
            />
            <Form.Input
-              label="Turnstile Secret Key"
-              name="TurnstileSecretKey"
+              label='Turnstile Secret Key'
+              name='TurnstileSecretKey'
              onChange={handleInputChange}
-              type="password"
-              autoComplete="new-password"
+              type='password'
+              autoComplete='new-password'
              value={inputs.TurnstileSecretKey}
-              placeholder="敏感信息不会发送到前端显示"
+              placeholder='敏感信息不会发送到前端显示'
            />
          </Form.Group>
          <Form.Button onClick={submitTurnstile}>
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -1,9 +1,25 @@
 import React, { useEffect, useState } from 'react';
-import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
+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 {
+  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';
@@ -11,85 +27,107 @@ import EditToken from '../pages/Token/EditToken';
 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: 'opencat', text: 'OpenCat', value: 'opencat' },
 ];

 const OPEN_LINK_OPTIONS = [
  { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
-  { key: 'opencat', text: 'OpenCat', value: 'opencat' }
+  { key: 'opencat', text: 'OpenCat', value: 'opencat' },
 ];

 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }

 function renderStatus(status, model_limits_enabled = false) {
  switch (status) {
    case 1:
      if (model_limits_enabled) {
-        return <Tag color="green" size="large">已启用：限制模型</Tag>;
+        return (
+          <Tag color='green' size='large'>
+            已启用：限制模型
+          </Tag>
+        );
      } else {
-        return <Tag color="green" size="large">已启用</Tag>;
+        return (
+          <Tag color='green' size='large'>
+            已启用
+          </Tag>
+        );
      }
    case 2:
-      return <Tag color="red" size="large"> 已禁用 </Tag>;
+      return (
+        <Tag color='red' size='large'>
+          {' '}
+          已禁用{' '}
+        </Tag>
+      );
    case 3:
-      return <Tag color="yellow" size="large"> 已过期 </Tag>;
+      return (
+        <Tag color='yellow' size='large'>
+          {' '}
+          已过期{' '}
+        </Tag>
+      );
    case 4:
-      return <Tag color="grey" size="large"> 已耗尽 </Tag>;
+      return (
+        <Tag color='grey' size='large'>
+          {' '}
+          已耗尽{' '}
+        </Tag>
+      );
    default:
-      return <Tag color="black" size="large"> 未知状态 </Tag>;
+      return (
+        <Tag color='black' size='large'>
+          {' '}
+          未知状态{' '}
+        </Tag>
+      );
  }
 }

 const TokensTable = () => {
-
  const link_menu = [
    {
-      node: 'item', key: 'next', name: 'ChatGPT Next Web', onClick: () => {
+      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: () => {
+      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: 'opencat', name: 'OpenCat', value: 'opencat' },
  ];

  const columns = [
    {
      title: '名称',
-      dataIndex: 'name'
+      dataIndex: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderStatus(text, record.model_limits_enabled)}
-          </div>
-        );
-      }
+        return <div>{renderStatus(text, record.model_limits_enabled)}</div>;
+      },
    },
    {
      title: '已用额度',
      dataIndex: 'used_quota',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderQuota(parseInt(text))}
-          </div>
-        );
-      }
+        return <div>{renderQuota(parseInt(text))}</div>;
+      },
    },
    {
      title: '剩余额度',
@@ -97,22 +135,25 @@ const TokensTable = () => {
      render: (text, record, index) => {
        return (
          <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>
        );
-      }
+      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_time',
      render: (text, record, index) => {
-        return (
-          <div>
-            {renderTimestamp(text)}
-          </div>
-        );
-      }
+        return <div>{renderTimestamp(text)}</div>;
+      },
    },
    {
      title: '过期时间',
@@ -123,7 +164,7 @@ const TokensTable = () => {
            {record.expired_time === -1 ? '永不过期' : renderTimestamp(text)}
          </div>
        );
-      }
+      },
    },
    {
      title: '',
@@ -131,25 +172,41 @@ const TokensTable = () => {
      render: (text, record, index) => (
        <div>
          <Popover
-            content={
-              'sk-' + record.key
-            }
+            content={'sk-' + record.key}
            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>
-          <Button theme="light" type="secondary" style={{ marginRight: 1 }}
-                  onClick={async (text) => {
-                    await copyText('sk-' + 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={
-              [
+          <Button
+            theme='light'
+            type='secondary'
+            style={{ marginRight: 1 }}
+            onClick={async (text) => {
+              await copyText('sk-' + 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={[
                {
                  node: 'item',
                  key: 'next',
@@ -157,7 +214,7 @@ const TokensTable = () => {
                  name: 'ChatGPT Next Web',
                  onClick: () => {
                    onOpenLink('next', record.key);
-                  }
+                  },
                },
                {
                  node: 'item',
@@ -166,70 +223,88 @@ const TokensTable = () => {
                  name: 'ChatGPT Web & Midjourney',
                  onClick: () => {
                    onOpenLink('next-mj', record.key);
-                  }
+                  },
                },
                {
-                  node: 'item', key: 'ama', name: 'AMA 问天（BotGem）', onClick: () => {
+                  node: 'item',
+                  key: 'ama',
+                  name: 'AMA 问天（BotGem）',
+                  onClick: () => {
                    onOpenLink('ama', record.key);
-                  }
+                  },
                },
                {
-                  node: 'item', key: 'opencat', name: 'OpenCat', onClick: () => {
+                  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>
          </SplitButtonGroup>
          <Popconfirm
-            title="确定是否要删除此令牌？"
-            content="此修改将不可逆"
+            title='确定是否要删除此令牌？'
+            content='此修改将不可逆'
            okType={'danger'}
            position={'left'}
            onConfirm={() => {
-              manageToken(record.id, 'delete', record).then(
-                () => {
-                  removeRecord(record.key);
-                }
-              );
+              manageToken(record.id, 'delete', record).then(() => {
+                removeRecord(record.key);
+              });
            }}
          >
-            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+            <Button theme='light' type='danger' style={{ marginRight: 1 }}>
+              删除
+            </Button>
          </Popconfirm>
-          {
-            record.status === 1 ?
-              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
-                async () => {
-                  manageToken(
-                    record.id,
-                    'disable',
-                    record
-                  );
-                }
-              }>禁用</Button> :
-              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
-                async () => {
-                  manageToken(
-                    record.id,
-                    'enable',
-                    record
-                  );
-                }
-              }>启用</Button>
-          }
-          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
-            () => {
+          {record.status === 1 ? (
+            <Button
+              theme='light'
+              type='warning'
+              style={{ marginRight: 1 }}
+              onClick={async () => {
+                manageToken(record.id, 'disable', record);
+              }}
+            >
+              禁用
+            </Button>
+          ) : (
+            <Button
+              theme='light'
+              type='secondary'
+              style={{ marginRight: 1 }}
+              onClick={async () => {
+                manageToken(record.id, 'enable', record);
+              }}
+            >
+              启用
+            </Button>
+          )}
+          <Button
+            theme='light'
+            type='tertiary'
+            style={{ marginRight: 1 }}
+            onClick={() => {
              setEditingToken(record);
              setShowEdit(true);
-            }
-          }>编辑</Button>
+            }}
+          >
+            编辑
+          </Button>
        </div>
-      )
-    }
+      ),
+    },
  ];

  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
@@ -245,14 +320,14 @@ const TokensTable = () => {
  const [showTopUpModal, setShowTopUpModal] = useState(false);
  const [targetTokenIdx, setTargetTokenIdx] = useState(0);
  const [editingToken, setEditingToken] = useState({
-    id: undefined
+    id: undefined,
  });

  const closeEdit = () => {
    setShowEdit(false);
    setTimeout(() => {
      setEditingToken({
-        id: undefined
+        id: undefined,
      });
    }, 500);
  };
@@ -266,7 +341,10 @@ const TokensTable = () => {
    }
  };

-  let pageData = tokens.slice((activePage - 1) * pageSize, activePage * pageSize);
+  let pageData = tokens.slice(
+    (activePage - 1) * pageSize,
+    activePage * pageSize,
+  );
  const loadTokens = async (startIdx) => {
    setLoading(true);
    const res = await API.get(`/api/token/?p=${startIdx}&size=${pageSize}`);
@@ -315,7 +393,8 @@ const TokensTable = () => {
    let nextUrl;

    if (nextLink) {
-      nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      nextUrl =
+        nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
    } else {
      nextUrl = `https://chat.oneapi.pro/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
    }
@@ -323,7 +402,8 @@ const TokensTable = () => {
    let url;
    switch (type) {
      case 'ama':
-        url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+        url =
+          mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
        break;
      case 'opencat':
        url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
@@ -367,7 +447,8 @@ const TokensTable = () => {
    let defaultUrl;

    if (chatLink) {
-      defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      defaultUrl =
+        chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
    }
    let url;
    switch (type) {
@@ -378,7 +459,8 @@ const TokensTable = () => {
        url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
        break;
      case 'next-mj':
-        url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+        url =
+          mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
        break;
      default:
        if (!chatLink) {
@@ -399,10 +481,10 @@ const TokensTable = () => {
      });
  }, [pageSize]);

-  const removeRecord = key => {
+  const removeRecord = (key) => {
    let newDataSource = [...tokens];
    if (key != null) {
-      let idx = newDataSource.findIndex(data => data.key === key);
+      let idx = newDataSource.findIndex((data) => data.key === key);

      if (idx > -1) {
        newDataSource.splice(idx, 1);
@@ -435,7 +517,6 @@ const TokensTable = () => {
      let newTokens = [...tokens];
      // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
      if (action === 'delete') {
-
      } else {
        record.status = token.status;
        // newTokens[realIdx].status = token.status;
@@ -455,7 +536,9 @@ const TokensTable = () => {
      return;
    }
    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;
    if (success) {
      setTokensFormat(data);
@@ -488,32 +571,28 @@ const TokensTable = () => {
    setLoading(false);
  };

-
-  const handlePageChange = page => {
+  const handlePageChange = (page) => {
    setActivePage(page);
    if (page === Math.ceil(tokens.length / pageSize) + 1) {
      // In this case we have to load more data and then append them.
-      loadTokens(page - 1).then(r => {
-      });
+      loadTokens(page - 1).then((r) => {});
    }
  };

  const rowSelection = {
-    onSelect: (record, selected) => {
-    },
-    onSelectAll: (selected, selectedRows) => {
-    },
+    onSelect: (record, selected) => {},
+    onSelectAll: (selected, selectedRows) => {},
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedKeys(selectedRows);
-    }
+    },
  };

  const handleRow = (record, index) => {
    if (record.status !== 1) {
      return {
        style: {
-          background: 'var(--semi-color-disabled-border)'
-        }
+          background: 'var(--semi-color-disabled-border)',
+        },
      };
    } else {
      return {};
@@ -522,63 +601,98 @@ const TokensTable = () => {

  return (
    <>
-      <EditToken refresh={refresh} editingToken={editingToken} visiable={showEdit} handleClose={closeEdit}></EditToken>
-      <Form layout="horizontal" style={{ marginTop: 10 }} labelPosition={'left'}>
+      <EditToken
+        refresh={refresh}
+        editingToken={editingToken}
+        visiable={showEdit}
+        handleClose={closeEdit}
+      ></EditToken>
+      <Form
+        layout='horizontal'
+        style={{ marginTop: 10 }}
+        labelPosition={'left'}
+      >
        <Form.Input
-          field="keyword"
-          label="搜索关键字"
-          placeholder="令牌名称"
+          field='keyword'
+          label='搜索关键字'
+          placeholder='令牌名称'
          value={searchKeyword}
          loading={searching}
          onChange={handleKeywordChange}
        />
        <Form.Input
-          field="token"
-          label="Key"
-          placeholder="密钥"
+          field='token'
+          label='Key'
+          placeholder='密钥'
          value={searchToken}
          loading={searching}
          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>

-      <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
-        currentPage: activePage,
-        pageSize: pageSize,
-        total: tokenCount,
-        showSizeChanger: true,
-        pageSizeOptions: [10, 20, 50, 100],
-        formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
-        onPageSizeChange: (size) => {
-          setPageSize(size);
-          setActivePage(1);
-        },
-        onPageChange: handlePageChange
-      }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
-      </Table>
-      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
-        () => {
+      <Table
+        style={{ marginTop: 20 }}
+        columns={columns}
+        dataSource={pageData}
+        pagination={{
+          currentPage: activePage,
+          pageSize: pageSize,
+          total: tokenCount,
+          showSizeChanger: true,
+          pageSizeOptions: [10, 20, 50, 100],
+          formatPageText: (page) =>
+            `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
+          onPageSizeChange: (size) => {
+            setPageSize(size);
+            setActivePage(1);
+          },
+          onPageChange: handlePageChange,
+        }}
+        loading={loading}
+        rowSelection={rowSelection}
+        onRow={handleRow}
+      ></Table>
+      <Button
+        theme='light'
+        type='primary'
+        style={{ marginRight: 8 }}
+        onClick={() => {
          setEditingToken({
-            id: undefined
+            id: undefined,
          });
          setShowEdit(true);
-        }
-      }>添加令牌</Button>
-      <Button label="复制所选令牌" type="warning" onClick={
-        async () => {
+        }}
+      >
+        添加令牌
+      </Button>
+      <Button
+        label='复制所选令牌'
+        type='warning'
+        onClick={async () => {
          if (selectedKeys.length === 0) {
            showError('请至少选择一个令牌！');
            return;
          }
          let keys = '';
          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);
-        }
-      }>复制所选令牌到剪贴板</Button>
+        }}
+      >
+        复制所选令牌到剪贴板
+      </Button>
    </>
  );
 };
--- a/web/src/components/UsersTable.js
+++ b/web/src/components/UsersTable.js
@@ -1,6 +1,14 @@
 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 {
+  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';
@@ -9,124 +17,218 @@ import EditUser from '../pages/User/EditUser';
 function renderRole(role) {
  switch (role) {
    case 1:
-      return <Tag size="large">普通用户</Tag>;
+      return <Tag size='large'>普通用户</Tag>;
    case 10:
-      return <Tag color="yellow" size="large">管理员</Tag>;
+      return (
+        <Tag color='yellow' size='large'>
+          管理员
+        </Tag>
+      );
    case 100:
-      return <Tag color="orange" size="large">超级管理员</Tag>;
+      return (
+        <Tag color='orange' size='large'>
+          超级管理员
+        </Tag>
+      );
    default:
-      return <Tag color="red" size="large">未知身份</Tag>;
+      return (
+        <Tag color='red' size='large'>
+          未知身份
+        </Tag>
+      );
  }
 }

 const UsersTable = () => {
-  const columns = [{
-    title: 'ID', dataIndex: 'id'
-  }, {
-    title: '用户名', dataIndex: 'username'
-  }, {
-    title: '分组', dataIndex: 'group', render: (text, record, index) => {
-      return (<div>
-        {renderGroup(text)}
-      </div>);
-    }
-  }, {
-    title: '统计信息', dataIndex: 'info', render: (text, record, index) => {
-      return (<div>
-        <Space spacing={1}>
-          <Tooltip content={'剩余额度'}>
-            <Tag color="white" size="large">{renderQuota(record.quota)}</Tag>
-          </Tooltip>
-          <Tooltip content={'已用额度'}>
-            <Tag color="white" size="large">{renderQuota(record.used_quota)}</Tag>
-          </Tooltip>
-          <Tooltip content={'调用次数'}>
-            <Tag color="white" size="large">{renderNumber(record.request_count)}</Tag>
-          </Tooltip>
-        </Space>
-      </div>);
-    }
-  }, {
-    title: '邀请信息', dataIndex: 'invite', render: (text, record, index) => {
-      return (<div>
-        <Space spacing={1}>
-          <Tooltip content={'邀请人数'}>
-            <Tag color="white" size="large">{renderNumber(record.aff_count)}</Tag>
-          </Tooltip>
-          <Tooltip content={'邀请总收益'}>
-            <Tag color="white" size="large">{renderQuota(record.aff_history_quota)}</Tag>
-          </Tooltip>
-          <Tooltip content={'邀请人ID'}>
-            {record.inviter_id === 0 ? <Tag color="white" size="large">无</Tag> :
-              <Tag color="white" size="large">{record.inviter_id}</Tag>}
-          </Tooltip>
-        </Space>
-      </div>);
-    }
-  }, {
-    title: '角色', dataIndex: 'role', render: (text, record, index) => {
-      return (<div>
-        {renderRole(text)}
-      </div>);
-    }
-  }, {
-    title: '状态', dataIndex: 'status', render: (text, record, index) => {
-      return (<div>
-        {record.DeletedAt !== null ? <Tag color="red">已注销</Tag> : renderStatus(text)}
-      </div>);
-    }
-  }, {
-    title: '', dataIndex: 'operate', render: (text, record, index) => (<div>
-      {
-        record.DeletedAt !== null ? <></> :
-          <>
-            <Popconfirm
-              title="确定？"
-              okType={'warning'}
-              onConfirm={() => {
-                manageUser(record.username, 'promote', record);
-              }}
-            >
-              <Button theme="light" type="warning" style={{ marginRight: 1 }}>提升</Button>
-            </Popconfirm>
-            <Popconfirm
-              title="确定？"
-              okType={'warning'}
-              onConfirm={() => {
-                manageUser(record.username, 'demote', record);
-              }}
-            >
-              <Button theme="light" type="secondary" style={{ marginRight: 1 }}>降级</Button>
-            </Popconfirm>
-            {record.status === 1 ?
-              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={async () => {
-                manageUser(record.username, 'disable', record);
-              }}>禁用</Button> :
-              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={async () => {
-                manageUser(record.username, 'enable', record);
-              }} disabled={record.status === 3}>启用</Button>}
-            <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={() => {
-              setEditingUser(record);
-              setShowEditUser(true);
-            }}>编辑</Button>
-          </>
-
-      }
-      <Popconfirm
-        title="确定是否要删除此用户？"
-        content="硬删除，此修改将不可逆"
-        okType={'danger'}
-        position={'left'}
-        onConfirm={() => {
-          manageUser(record.username, 'delete', record).then(() => {
-            removeRecord(record.id);
-          });
-        }}
-      >
-        <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
-      </Popconfirm>
-    </div>)
-  }];
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+    },
+    {
+      title: '用户名',
+      dataIndex: 'username',
+    },
+    {
+      title: '分组',
+      dataIndex: 'group',
+      render: (text, record, index) => {
+        return <div>{renderGroup(text)}</div>;
+      },
+    },
+    {
+      title: '统计信息',
+      dataIndex: 'info',
+      render: (text, record, index) => {
+        return (
+          <div>
+            <Space spacing={1}>
+              <Tooltip content={'剩余额度'}>
+                <Tag color='white' size='large'>
+                  {renderQuota(record.quota)}
+                </Tag>
+              </Tooltip>
+              <Tooltip content={'已用额度'}>
+                <Tag color='white' size='large'>
+                  {renderQuota(record.used_quota)}
+                </Tag>
+              </Tooltip>
+              <Tooltip content={'调用次数'}>
+                <Tag color='white' size='large'>
+                  {renderNumber(record.request_count)}
+                </Tag>
+              </Tooltip>
+            </Space>
+          </div>
+        );
+      },
+    },
+    {
+      title: '邀请信息',
+      dataIndex: 'invite',
+      render: (text, record, index) => {
+        return (
+          <div>
+            <Space spacing={1}>
+              <Tooltip content={'邀请人数'}>
+                <Tag color='white' size='large'>
+                  {renderNumber(record.aff_count)}
+                </Tag>
+              </Tooltip>
+              <Tooltip content={'邀请总收益'}>
+                <Tag color='white' size='large'>
+                  {renderQuota(record.aff_history_quota)}
+                </Tag>
+              </Tooltip>
+              <Tooltip content={'邀请人ID'}>
+                {record.inviter_id === 0 ? (
+                  <Tag color='white' size='large'>
+                    无
+                  </Tag>
+                ) : (
+                  <Tag color='white' size='large'>
+                    {record.inviter_id}
+                  </Tag>
+                )}
+              </Tooltip>
+            </Space>
+          </div>
+        );
+      },
+    },
+    {
+      title: '角色',
+      dataIndex: 'role',
+      render: (text, record, index) => {
+        return <div>{renderRole(text)}</div>;
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {record.DeletedAt !== null ? (
+              <Tag color='red'>已注销</Tag>
+            ) : (
+              renderStatus(text)
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      title: '',
+      dataIndex: 'operate',
+      render: (text, record, index) => (
+        <div>
+          {record.DeletedAt !== null ? (
+            <></>
+          ) : (
+            <>
+              <Popconfirm
+                title='确定？'
+                okType={'warning'}
+                onConfirm={() => {
+                  manageUser(record.username, 'promote', record);
+                }}
+              >
+                <Button theme='light' type='warning' style={{ marginRight: 1 }}>
+                  提升
+                </Button>
+              </Popconfirm>
+              <Popconfirm
+                title='确定？'
+                okType={'warning'}
+                onConfirm={() => {
+                  manageUser(record.username, 'demote', record);
+                }}
+              >
+                <Button
+                  theme='light'
+                  type='secondary'
+                  style={{ marginRight: 1 }}
+                >
+                  降级
+                </Button>
+              </Popconfirm>
+              {record.status === 1 ? (
+                <Button
+                  theme='light'
+                  type='warning'
+                  style={{ marginRight: 1 }}
+                  onClick={async () => {
+                    manageUser(record.username, 'disable', record);
+                  }}
+                >
+                  禁用
+                </Button>
+              ) : (
+                <Button
+                  theme='light'
+                  type='secondary'
+                  style={{ marginRight: 1 }}
+                  onClick={async () => {
+                    manageUser(record.username, 'enable', record);
+                  }}
+                  disabled={record.status === 3}
+                >
+                  启用
+                </Button>
+              )}
+              <Button
+                theme='light'
+                type='tertiary'
+                style={{ marginRight: 1 }}
+                onClick={() => {
+                  setEditingUser(record);
+                  setShowEditUser(true);
+                }}
+              >
+                编辑
+              </Button>
+            </>
+          )}
+          <Popconfirm
+            title='确定是否要删除此用户？'
+            content='硬删除，此修改将不可逆'
+            okType={'danger'}
+            position={'left'}
+            onConfirm={() => {
+              manageUser(record.username, 'delete', record).then(() => {
+                removeRecord(record.id);
+              });
+            }}
+          >
+            <Button theme='light' type='danger' style={{ marginRight: 1 }}>
+              删除
+            </Button>
+          </Popconfirm>
+        </div>
+      ),
+    },
+  ];

  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
@@ -137,22 +239,22 @@ const UsersTable = () => {
  const [showAddUser, setShowAddUser] = useState(false);
  const [showEditUser, setShowEditUser] = useState(false);
  const [editingUser, setEditingUser] = useState({
-    id: undefined
+    id: undefined,
  });

  const setCount = (data) => {
-    if (data.length >= (activePage) * ITEMS_PER_PAGE) {
+    if (data.length >= activePage * ITEMS_PER_PAGE) {
      setUserCount(data.length + 1);
    } else {
      setUserCount(data.length);
    }
  };

-  const removeRecord = key => {
+  const removeRecord = (key) => {
    console.log(key);
    let newDataSource = [...users];
    if (key != null) {
-      let idx = newDataSource.findIndex(data => data.id === key);
+      let idx = newDataSource.findIndex((data) => data.id === key);

      if (idx > -1) {
        newDataSource.splice(idx, 1);
@@ -200,7 +302,8 @@ const UsersTable = () => {

  const manageUser = async (username, action, record) => {
    const res = await API.post('/api/user/manage', {
-      username, action
+      username,
+      action,
    });
    const { success, message } = res.data;
    if (success) {
@@ -208,7 +311,6 @@ const UsersTable = () => {
      let user = res.data.data;
      let newUsers = [...users];
      if (action === 'delete') {
-
      } else {
        record.status = user.status;
        record.role = user.role;
@@ -222,15 +324,19 @@ const UsersTable = () => {
  const renderStatus = (status) => {
    switch (status) {
      case 1:
-        return <Tag size="large">已激活</Tag>;
+        return <Tag size='large'>已激活</Tag>;
      case 2:
-        return (<Tag size="large" color="red">
-          已封禁
-        </Tag>);
+        return (
+          <Tag size='large' color='red'>
+            已封禁
+          </Tag>
+        );
      default:
-        return (<Tag size="large" color="grey">
-          未知状态
-        </Tag>);
+        return (
+          <Tag size='large' color='grey'>
+            未知状态
+          </Tag>
+        );
    }
  };

@@ -271,16 +377,18 @@ const UsersTable = () => {
    setLoading(false);
  };

-  const handlePageChange = page => {
+  const handlePageChange = (page) => {
    setActivePage(page);
    if (page === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
      // In this case we have to load more data and then append them.
-      loadUsers(page - 1).then(r => {
-      });
+      loadUsers(page - 1).then((r) => {});
    }
  };

-  const pageData = users.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+  const pageData = users.slice(
+    (activePage - 1) * ITEMS_PER_PAGE,
+    activePage * ITEMS_PER_PAGE,
+  );

  const closeAddUser = () => {
    setShowAddUser(false);
@@ -289,7 +397,7 @@ const UsersTable = () => {
  const closeEditUser = () => {
    setShowEditUser(false);
    setEditingUser({
-      id: undefined
+      id: undefined,
    });
  };

@@ -303,34 +411,52 @@ const UsersTable = () => {

  return (
    <>
-      <AddUser refresh={refresh} visible={showAddUser} handleClose={closeAddUser}></AddUser>
-      <EditUser refresh={refresh} visible={showEditUser} handleClose={closeEditUser}
-                editingUser={editingUser}></EditUser>
+      <AddUser
+        refresh={refresh}
+        visible={showAddUser}
+        handleClose={closeAddUser}
+      ></AddUser>
+      <EditUser
+        refresh={refresh}
+        visible={showEditUser}
+        handleClose={closeEditUser}
+        editingUser={editingUser}
+      ></EditUser>
      <Form onSubmit={searchUsers}>
        <Form.Input
-          label="搜索关键字"
-          icon="search"
-          field="keyword"
-          iconPosition="left"
-          placeholder="搜索用户的 ID，用户名，显示名称，以及邮箱地址 ..."
+          label='搜索关键字'
+          icon='search'
+          field='keyword'
+          iconPosition='left'
+          placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...'
          value={searchKeyword}
          loading={searching}
-          onChange={value => handleKeywordChange(value)}
+          onChange={(value) => handleKeywordChange(value)}
        />
      </Form>

-      <Table columns={columns} dataSource={pageData} pagination={{
-        currentPage: activePage,
-        pageSize: ITEMS_PER_PAGE,
-        total: userCount,
-        pageSizeOpts: [10, 20, 50, 100],
-        onPageChange: handlePageChange
-      }} loading={loading} />
-      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
-        () => {
+      <Table
+        columns={columns}
+        dataSource={pageData}
+        pagination={{
+          currentPage: activePage,
+          pageSize: ITEMS_PER_PAGE,
+          total: userCount,
+          pageSizeOpts: [10, 20, 50, 100],
+          onPageChange: handlePageChange,
+        }}
+        loading={loading}
+      />
+      <Button
+        theme='light'
+        type='primary'
+        style={{ marginRight: 8 }}
+        onClick={() => {
          setShowAddUser(true);
-        }
-      }>添加用户</Button>
+        }}
+      >
+        添加用户
+      </Button>
    </>
  );
 };
--- a/web/src/components/WeChatIcon.js
+++ b/web/src/components/WeChatIcon.js
@@ -3,15 +3,27 @@ import { Icon } from '@douyinfe/semi-ui';

 const WeChatIcon = () => {
  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">
-      <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
-        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>;
+    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
+          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
+          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>
+    );
  }

  return (
--- a/web/src/components/utils.js
+++ b/web/src/components/utils.js
@@ -15,6 +15,6 @@ export async function onGitHubOAuthClicked(github_client_id) {
  const state = await getOAuthState();
  if (!state) return;
  window.open(
-    `https://github.com/login/oauth/authorize?client_id=${github_client_id}&state=${state}&scope=user:email`
+    `https://github.com/login/oauth/authorize?client_id=${github_client_id}&state=${state}&scope=user:email`,
  );
-}
+}