Merge pull request #563 from Licoy/main

封装OAuth2授权回调页面、修复独立日志数据库查询令牌日志时错误问题

model/log.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"one-api/common"
+	"os"
 	"strings"
 	"time"
 
@@ -39,7 +40,15 @@ const (
 )
 
 func GetLogByKey(key string) (logs []*Log, err error) {
-	err = LOG_DB.Joins("left join tokens on tokens.id = logs.token_id").Where("tokens.key = ?", strings.TrimPrefix(key, "sk-")).Find(&logs).Error
+	if os.Getenv("LOG_SQL_DSN") != "" {
+		var tk Token
+		if err = DB.Model(&Token{}).Where("`key`=?", strings.TrimPrefix(key, "sk-")).First(&tk).Error; err != nil {
+			return nil, err
+		}
+		err = LOG_DB.Model(&Log{}).Where("token_id=?", tk.Id).Find(&logs).Error
+	} else {
+		err = LOG_DB.Joins("left join tokens on tokens.id = logs.token_id").Where("tokens.key = ?", strings.TrimPrefix(key, "sk-")).Find(&logs).Error
+	}
 	return logs, err
 }
 

web/src/App.js

@@ -10,7 +10,6 @@ import Setting from './pages/Setting';
 import EditUser from './pages/User/EditUser';
 import { getLogo, getSystemName } from './helpers';
 import PasswordResetForm from './components/PasswordResetForm';
-import GitHubOAuth from './components/GitHubOAuth';
 import PasswordResetConfirm from './components/PasswordResetConfirm';
 import { UserContext } from './context/User';
 import Channel from './pages/Channel';
@@ -26,7 +25,7 @@ import Midjourney from './pages/Midjourney';
 import Pricing from './pages/Pricing/index.js';
 import Task from "./pages/Task/index.js";
 import Playground from './components/Playground.js';
-import LinuxDoOAuth from './components/LinuxDoOAuth.js';
+import OAuth2Callback from "./components/OAuth2Callback.js";
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -178,7 +177,7 @@ function App() {
           path='/oauth/github'
           element={
             <Suspense fallback={<Loading></Loading>}>
-              <GitHubOAuth />
+              <OAuth2Callback type='github'></OAuth2Callback>
             </Suspense>
           }
         />
@@ -186,7 +185,7 @@ function App() {
           path='/oauth/linuxdo'
           element={
             <Suspense fallback={<Loading></Loading>}>
-              <LinuxDoOAuth />
+                <OAuth2Callback type='linuxdo'></OAuth2Callback>
             </Suspense>
           }
         />

web/src/components/GitHubOAuth.js

@@ -1,61 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Dimmer, Loader, Segment } from 'semantic-ui-react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { API, showError, showSuccess, updateAPI } from '../helpers';
-import { UserContext } from '../context/User';
-import { setUserData } from '../helpers/data.js';
-
-const GitHubOAuth = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [userState, userDispatch] = useContext(UserContext);
-  const [prompt, setPrompt] = useState('处理中...');
-  const [processing, setProcessing] = useState(true);
-
-  let navigate = useNavigate();
-
-  const sendCode = async (code, state, count) => {
-    const res = await API.get(`/api/oauth/github?code=${code}&state=${state}`);
-    const { success, message, data } = res.data;
-    if (success) {
-      if (message === 'bind') {
-        showSuccess('绑定成功！');
-        navigate('/setting');
-      } else {
-        userDispatch({ type: 'login', payload: data });
-        localStorage.setItem('user', JSON.stringify(data));
-        setUserData(data);
-        updateAPI()
-        showSuccess('登录成功！');
-        navigate('/token');
-      }
-    } else {
-      showError(message);
-      if (count === 0) {
-        setPrompt(`操作失败，重定向至登录界面中...`);
-        navigate('/setting'); // in case this is failed to bind GitHub
-        return;
-      }
-      count++;
-      setPrompt(`出现错误，第 ${count} 次重试中...`);
-      await new Promise((resolve) => setTimeout(resolve, count * 2000));
-      await sendCode(code, state, count);
-    }
-  };
-
-  useEffect(() => {
-    let code = searchParams.get('code');
-    let state = searchParams.get('state');
-    sendCode(code, state, 0).then();
-  }, []);
-
-  return (
-    <Segment style={{ minHeight: '300px' }}>
-      <Dimmer active inverted>
-        <Loader size='large'>{prompt}</Loader>
-      </Dimmer>
-    </Segment>
-  );
-};
-
-export default GitHubOAuth;

web/src/components/LinuxDoOAuth.js

@@ -1,61 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Dimmer, Loader, Segment } from 'semantic-ui-react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { API, showError, showSuccess, updateAPI } from '../helpers';
-import { UserContext } from '../context/User';
-import { setUserData } from '../helpers/data.js';
-
-const LinuxDoOAuth = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [userState, userDispatch] = useContext(UserContext);
-  const [prompt, setPrompt] = useState('处理中...');
-  const [processing, setProcessing] = useState(true);
-
-  let navigate = useNavigate();
-
-  const sendCode = async (code, state, count) => {
-    const res = await API.get(`/api/oauth/linuxdo?code=${code}&state=${state}`);
-    const { success, message, data } = res.data;
-    if (success) {
-      if (message === 'bind') {
-        showSuccess('绑定成功！');
-        navigate('/setting');
-      } else {
-        userDispatch({ type: 'login', payload: data });
-        localStorage.setItem('user', JSON.stringify(data));
-        setUserData(data);
-        updateAPI()
-        showSuccess('登录成功！');
-        navigate('/token');
-      }
-    } else {
-      showError(message);
-      if (count === 0) {
-        setPrompt(`操作失败，重定向至登录界面中...`);
-        navigate('/setting'); // in case this is failed to bind GitHub
-        return;
-      }
-      count++;
-      setPrompt(`出现错误，第 ${count} 次重试中...`);
-      await new Promise((resolve) => setTimeout(resolve, count * 2000));
-      await sendCode(code, state, count);
-    }
-  };
-
-  useEffect(() => {
-    let code = searchParams.get('code');
-    let state = searchParams.get('state');
-    sendCode(code, state, 0).then();
-  }, []);
-
-  return (
-    <Segment style={{ minHeight: '300px' }}>
-      <Dimmer active inverted>
-        <Loader size='large'>{prompt}</Loader>
-      </Dimmer>
-    </Segment>
-  );
-};
-
-export default LinuxDoOAuth;

web/src/components/OAuth2Callback.js

@@ -0,0 +1,61 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { API, showError, showSuccess, updateAPI } from '../helpers';
+import { UserContext } from '../context/User';
+import { setUserData } from '../helpers/data.js';
+
+const OAuth2Callback = (props) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const [userState, userDispatch] = useContext(UserContext);
+    const [prompt, setPrompt] = useState('处理中...');
+    const [processing, setProcessing] = useState(true);
+
+    let navigate = useNavigate();
+
+    const sendCode = async (code, state, count) => {
+        const res = await API.get(`/api/oauth/${props.type}?code=${code}&state=${state}`);
+        const { success, message, data } = res.data;
+        if (success) {
+            if (message === 'bind') {
+                showSuccess('绑定成功！');
+                navigate('/setting');
+            } else {
+                userDispatch({ type: 'login', payload: data });
+                localStorage.setItem('user', JSON.stringify(data));
+                setUserData(data);
+                updateAPI()
+                showSuccess('登录成功！');
+                navigate('/token');
+            }
+        } else {
+            showError(message);
+            if (count === 0) {
+                setPrompt(`操作失败，重定向至登录界面中...`);
+                navigate('/setting'); // in case this is failed to bind GitHub
+                return;
+            }
+            count++;
+            setPrompt(`出现错误，第 ${count} 次重试中...`);
+            await new Promise((resolve) => setTimeout(resolve, count * 2000));
+            await sendCode(code, state, count);
+        }
+    };
+
+    useEffect(() => {
+        let code = searchParams.get('code');
+        let state = searchParams.get('state');
+        sendCode(code, state, 0).then();
+    }, []);
+
+    return (
+        <Segment style={{ minHeight: '300px' }}>
+            <Dimmer active inverted>
+                <Loader size='large'>{prompt}</Loader>
+            </Dimmer>
+        </Segment>
+    );
+};
+
+export default OAuth2Callback;

web/src/components/OperationSetting.js

@@ -90,7 +90,7 @@ const OperationSetting = () => {
     try {
       setLoading(true);
       await getOptions();
-      showSuccess('刷新成功');
+      // showSuccess('刷新成功');
     } catch (error) {
       showError('刷新失败');
     } finally {

web/src/components/PersonalSetting.js

@@ -1,783 +1,784 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, {useContext, useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
 import {
-  API,
-  copy,
-  isRoot,
-  showError,
-  showInfo,
-  showSuccess,
+    API,
+    copy,
+    isRoot,
+    showError,
+    showInfo,
+    showSuccess,
 } from '../helpers';
 import Turnstile from 'react-turnstile';
-import { UserContext } from '../context/User';
-import { onGitHubOAuthClicked, onLinuxDOOAuthClicked } from './utils';
+import {UserContext} from '../context/User';
+import {onGitHubOAuthClicked, onLinuxDOOAuthClicked} from './utils';
 import {
-  Avatar,
-  Banner,
-  Button,
-  Card,
-  Descriptions,
-  Image,
-  Input,
-  InputNumber,
-  Layout,
-  Modal,
-  Space,
-  Tag,
-  Typography,
+    Avatar,
+    Banner,
+    Button,
+    Card,
+    Descriptions,
+    Image,
+    Input,
+    InputNumber,
+    Layout,
+    Modal,
+    Space,
+    Tag,
+    Typography,
 } from '@douyinfe/semi-ui';
 import {
-  getQuotaPerUnit,
-  renderQuota,
-  renderQuotaWithPrompt,
-  stringToColor,
+    getQuotaPerUnit,
+    renderQuota,
+    renderQuotaWithPrompt,
+    stringToColor,
 } from '../helpers/render';
 import TelegramLoginButton from 'react-telegram-login';
 
 const PersonalSetting = () => {
-  const [userState, userDispatch] = useContext(UserContext);
-  let navigate = useNavigate();
+    const [userState, userDispatch] = useContext(UserContext);
+    let navigate = useNavigate();
 
-  const [inputs, setInputs] = useState({
-    wechat_verification_code: '',
-    email_verification_code: '',
-    email: '',
-    self_account_deletion_confirmation: '',
-    set_new_password: '',
-    set_new_password_confirmation: '',
-  });
-  const [status, setStatus] = useState({});
-  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
-  const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
-  const [showEmailBindModal, setShowEmailBindModal] = useState(false);
-  const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
-  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
-  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
-  const [turnstileToken, setTurnstileToken] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [disableButton, setDisableButton] = useState(false);
-  const [countdown, setCountdown] = useState(30);
-  const [affLink, setAffLink] = useState('');
-  const [systemToken, setSystemToken] = useState('');
-  const [models, setModels] = useState([]);
-  const [openTransfer, setOpenTransfer] = useState(false);
-  const [transferAmount, setTransferAmount] = useState(0);
+    const [inputs, setInputs] = useState({
+        wechat_verification_code: '',
+        email_verification_code: '',
+        email: '',
+        self_account_deletion_confirmation: '',
+        set_new_password: '',
+        set_new_password_confirmation: '',
+    });
+    const [status, setStatus] = useState({});
+    const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
+    const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
+    const [showEmailBindModal, setShowEmailBindModal] = useState(false);
+    const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
+    const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+    const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+    const [turnstileToken, setTurnstileToken] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [disableButton, setDisableButton] = useState(false);
+    const [countdown, setCountdown] = useState(30);
+    const [affLink, setAffLink] = useState('');
+    const [systemToken, setSystemToken] = useState('');
+    const [models, setModels] = useState([]);
+    const [openTransfer, setOpenTransfer] = useState(false);
+    const [transferAmount, setTransferAmount] = useState(0);
 
-  useEffect(() => {
-    // let user = localStorage.getItem('user');
-    // if (user) {
-    //   userDispatch({ type: 'login', payload: user });
-    // }
-    // console.log(localStorage.getItem('user'))
+    useEffect(() => {
+        // let user = localStorage.getItem('user');
+        // if (user) {
+        //   userDispatch({ type: 'login', payload: user });
+        // }
+        // console.log(localStorage.getItem('user'))
 
-    let status = localStorage.getItem('status');
-    if (status) {
-      status = JSON.parse(status);
-      setStatus(status);
-      if (status.turnstile_check) {
-        setTurnstileEnabled(true);
-        setTurnstileSiteKey(status.turnstile_site_key);
-      }
-    }
-    getUserData().then((res) => {
-      console.log(userState);
-    });
-    loadModels().then();
-    getAffLink().then();
-    setTransferAmount(getQuotaPerUnit());
-  }, []);
+        let status = localStorage.getItem('status');
+        if (status) {
+            status = JSON.parse(status);
+            setStatus(status);
+            if (status.turnstile_check) {
+                setTurnstileEnabled(true);
+                setTurnstileSiteKey(status.turnstile_site_key);
+            }
+        }
+        getUserData().then((res) => {
+            console.log(userState);
+        });
+        loadModels().then();
+        getAffLink().then();
+        setTransferAmount(getQuotaPerUnit());
+    }, []);
 
-  useEffect(() => {
-    let countdownInterval = null;
-    if (disableButton && countdown > 0) {
-      countdownInterval = setInterval(() => {
-        setCountdown(countdown - 1);
-      }, 1000);
-    } else if (countdown === 0) {
-      setDisableButton(false);
-      setCountdown(30);
-    }
-    return () => clearInterval(countdownInterval); // Clean up on unmount
-  }, [disableButton, countdown]);
+    useEffect(() => {
+        let countdownInterval = null;
+        if (disableButton && countdown > 0) {
+            countdownInterval = setInterval(() => {
+                setCountdown(countdown - 1);
+            }, 1000);
+        } else if (countdown === 0) {
+            setDisableButton(false);
+            setCountdown(30);
+        }
+        return () => clearInterval(countdownInterval); // Clean up on unmount
+    }, [disableButton, countdown]);
 
-  const handleInputChange = (name, value) => {
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
-  };
+    const handleInputChange = (name, value) => {
+        setInputs((inputs) => ({...inputs, [name]: value}));
+    };
 
-  const generateAccessToken = async () => {
-    const res = await API.get('/api/user/token');
-    const { success, message, data } = res.data;
-    if (success) {
-      setSystemToken(data);
-      await copy(data);
-      showSuccess(`令牌已重置并已复制到剪贴板`);
-    } else {
-      showError(message);
-    }
-  };
+    const generateAccessToken = async () => {
+        const res = await API.get('/api/user/token');
+        const {success, message, data} = res.data;
+        if (success) {
+            setSystemToken(data);
+            await copy(data);
+            showSuccess(`令牌已重置并已复制到剪贴板`);
+        } else {
+            showError(message);
+        }
+    };
 
-  const getAffLink = async () => {
-    const res = await API.get('/api/user/aff');
-    const { success, message, data } = res.data;
-    if (success) {
-      let link = `${window.location.origin}/register?aff=${data}`;
-      setAffLink(link);
-    } else {
-      showError(message);
-    }
-  };
+    const getAffLink = async () => {
+        const res = await API.get('/api/user/aff');
+        const {success, message, data} = res.data;
+        if (success) {
+            let link = `${window.location.origin}/register?aff=${data}`;
+            setAffLink(link);
+        } else {
+            showError(message);
+        }
+    };
 
-  const getUserData = async () => {
-    let res = await API.get(`/api/user/self`);
-    const { success, message, data } = res.data;
-    if (success) {
-      userDispatch({ type: 'login', payload: data });
-    } else {
-      showError(message);
-    }
-  };
+    const getUserData = async () => {
+        let res = await API.get(`/api/user/self`);
+        const {success, message, data} = res.data;
+        if (success) {
+            userDispatch({type: 'login', payload: data});
+        } else {
+            showError(message);
+        }
+    };
 
-  const loadModels = async () => {
-    let res = await API.get(`/api/user/models`);
-    const { success, message, data } = res.data;
-    if (success) {
-      setModels(data);
-      console.log(data);
-    } else {
-      showError(message);
-    }
-  };
+    const loadModels = async () => {
+        let res = await API.get(`/api/user/models`);
+        const {success, message, data} = res.data;
+        if (success) {
+            setModels(data);
+            console.log(data);
+        } else {
+            showError(message);
+        }
+    };
 
-  const handleAffLinkClick = async (e) => {
-    e.target.select();
-    await copy(e.target.value);
-    showSuccess(`邀请链接已复制到剪切板`);
-  };
+    const handleAffLinkClick = async (e) => {
+        e.target.select();
+        await copy(e.target.value);
+        showSuccess(`邀请链接已复制到剪切板`);
+    };
 
-  const handleSystemTokenClick = async (e) => {
-    e.target.select();
-    await copy(e.target.value);
-    showSuccess(`系统令牌已复制到剪切板`);
-  };
+    const handleSystemTokenClick = async (e) => {
+        e.target.select();
+        await copy(e.target.value);
+        showSuccess(`系统令牌已复制到剪切板`);
+    };
 
-  const deleteAccount = async () => {
-    if (inputs.self_account_deletion_confirmation !== userState.user.username) {
-      showError('请输入你的账户名以确认删除！');
-      return;
-    }
+    const deleteAccount = async () => {
+        if (inputs.self_account_deletion_confirmation !== userState.user.username) {
+            showError('请输入你的账户名以确认删除！');
+            return;
+        }
 
-    const res = await API.delete('/api/user/self');
-    const { success, message } = res.data;
+        const res = await API.delete('/api/user/self');
+        const {success, message} = res.data;
 
-    if (success) {
-      showSuccess('账户已删除！');
-      await API.get('/api/user/logout');
-      userDispatch({ type: 'logout' });
-      localStorage.removeItem('user');
-      navigate('/login');
-    } else {
-      showError(message);
-    }
-  };
+        if (success) {
+            showSuccess('账户已删除！');
+            await API.get('/api/user/logout');
+            userDispatch({type: 'logout'});
+            localStorage.removeItem('user');
+            navigate('/login');
+        } else {
+            showError(message);
+        }
+    };
 
-  const bindWeChat = async () => {
-    if (inputs.wechat_verification_code === '') return;
-    const res = await API.get(
-      `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`,
-    );
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess('微信账户绑定成功！');
-      setShowWeChatBindModal(false);
-    } else {
-      showError(message);
-    }
-  };
+    const bindWeChat = async () => {
+        if (inputs.wechat_verification_code === '') return;
+        const res = await API.get(
+            `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`,
+        );
+        const {success, message} = res.data;
+        if (success) {
+            showSuccess('微信账户绑定成功！');
+            setShowWeChatBindModal(false);
+        } else {
+            showError(message);
+        }
+    };
 
-  const changePassword = async () => {
-    if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
-      showError('两次输入的密码不一致！');
-      return;
-    }
-    const res = await API.put(`/api/user/self`, {
-      password: inputs.set_new_password,
-    });
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess('密码修改成功！');
-      setShowWeChatBindModal(false);
-    } else {
-      showError(message);
-    }
-    setShowChangePasswordModal(false);
-  };
+    const changePassword = async () => {
+        if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
+            showError('两次输入的密码不一致！');
+            return;
+        }
+        const res = await API.put(`/api/user/self`, {
+            password: inputs.set_new_password,
+        });
+        const {success, message} = res.data;
+        if (success) {
+            showSuccess('密码修改成功！');
+            setShowWeChatBindModal(false);
+        } else {
+            showError(message);
+        }
+        setShowChangePasswordModal(false);
+    };
 
-  const transfer = async () => {
-    if (transferAmount < getQuotaPerUnit()) {
-      showError('划转金额最低为' + renderQuota(getQuotaPerUnit()));
-      return;
-    }
-    const res = await API.post(`/api/user/aff_transfer`, {
-      quota: transferAmount,
-    });
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess(message);
-      setOpenTransfer(false);
-      getUserData().then();
-    } else {
-      showError(message);
-    }
-  };
+    const transfer = async () => {
+        if (transferAmount < getQuotaPerUnit()) {
+            showError('划转金额最低为' + renderQuota(getQuotaPerUnit()));
+            return;
+        }
+        const res = await API.post(`/api/user/aff_transfer`, {
+            quota: transferAmount,
+        });
+        const {success, message} = res.data;
+        if (success) {
+            showSuccess(message);
+            setOpenTransfer(false);
+            getUserData().then();
+        } else {
+            showError(message);
+        }
+    };
 
-  const sendVerificationCode = async () => {
-    if (inputs.email === '') {
-      showError('请输入邮箱！');
-      return;
-    }
-    setDisableButton(true);
-    if (turnstileEnabled && turnstileToken === '') {
-      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
-      return;
-    }
-    setLoading(true);
-    const res = await API.get(
-      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
-    );
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess('验证码发送成功，请检查邮箱！');
-    } else {
-      showError(message);
-    }
-    setLoading(false);
-  };
+    const sendVerificationCode = async () => {
+        if (inputs.email === '') {
+            showError('请输入邮箱！');
+            return;
+        }
+        setDisableButton(true);
+        if (turnstileEnabled && turnstileToken === '') {
+            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+            return;
+        }
+        setLoading(true);
+        const res = await API.get(
+            `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
+        );
+        const {success, message} = res.data;
+        if (success) {
+            showSuccess('验证码发送成功，请检查邮箱！');
+        } else {
+            showError(message);
+        }
+        setLoading(false);
+    };
 
-  const bindEmail = async () => {
-    if (inputs.email_verification_code === '') {
-      showError('请输入邮箱验证码！');
-      return;
-    }
-    setLoading(true);
-    const res = await API.get(
-      `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`,
-    );
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess('邮箱账户绑定成功！');
-      setShowEmailBindModal(false);
-      userState.user.email = inputs.email;
-    } else {
-      showError(message);
-    }
-    setLoading(false);
-  };
+    const bindEmail = async () => {
+        if (inputs.email_verification_code === '') {
+            showError('请输入邮箱验证码！');
+            return;
+        }
+        setLoading(true);
+        const res = await API.get(
+            `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`,
+        );
+        const {success, message} = res.data;
+        if (success) {
+            showSuccess('邮箱账户绑定成功！');
+            setShowEmailBindModal(false);
+            userState.user.email = inputs.email;
+        } else {
+            showError(message);
+        }
+        setLoading(false);
+    };
 
-  const getUsername = () => {
-    if (userState.user) {
-      return userState.user.username;
-    } else {
-      return 'null';
-    }
-  };
+    const getUsername = () => {
+        if (userState.user) {
+            return userState.user.username;
+        } else {
+            return 'null';
+        }
+    };
 
-  const handleCancel = () => {
-    setOpenTransfer(false);
-  };
+    const handleCancel = () => {
+        setOpenTransfer(false);
+    };
 
-  const copyText = async (text) => {
-    if (await copy(text)) {
-      showSuccess('已复制：' + text);
-    } else {
-      // setSearchKeyword(text);
-      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
-    }
-  };
+    const copyText = async (text) => {
+        if (await copy(text)) {
+            showSuccess('已复制：' + text);
+        } else {
+            // setSearchKeyword(text);
+            Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
+        }
+    };
 
-  return (
-    <div>
-      <Layout>
-        <Layout.Content>
-          <Modal
-            title='请输入要划转的数量'
-            visible={openTransfer}
-            onOk={transfer}
-            onCancel={handleCancel}
-            maskClosable={false}
-            size={'small'}
-            centered={true}
-          >
-            <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>
-            </div>
-            <div style={{ marginTop: 20 }}>
-              <Typography.Text>
-                {`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` +
-                  renderQuota(getQuotaPerUnit())}
-              </Typography.Text>
-              <div>
-                <InputNumber
-                  min={0}
-                  style={{ marginTop: 5 }}
-                  value={transferAmount}
-                  onChange={(value) => setTransferAmount(value)}
-                  disabled={false}
-                ></InputNumber>
-              </div>
-            </div>
-          </Modal>
-          <div style={{ marginTop: 20 }}>
-            <Card
-              title={
-                <Card.Meta
-                  avatar={
-                    <Avatar
-                      size='default'
-                      color={stringToColor(getUsername())}
-                      style={{ marginRight: 4 }}
+    return (
+        <div>
+            <Layout>
+                <Layout.Content>
+                    <Modal
+                        title='请输入要划转的数量'
+                        visible={openTransfer}
+                        onOk={transfer}
+                        onCancel={handleCancel}
+                        maskClosable={false}
+                        size={'small'}
+                        centered={true}
                     >
-                      {typeof getUsername() === 'string' &&
-                        getUsername().slice(0, 1)}
-                    </Avatar>
-                  }
-                  title={<Typography.Text>{getUsername()}</Typography.Text>}
-                  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>
-                </>
-              }
-              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>
-              }
-            >
-              <Typography.Title heading={6}>可用模型</Typography.Title>
-              <div style={{ marginTop: 10 }}>
-                <Space wrap>
-                  {models.map((model) => (
-                    <Tag
-                      key={model}
-                      color='cyan'
-                      onClick={() => {
-                        copyText(model);
-                      }}
-                    >
-                      {model}
-                    </Tag>
-                  ))}
-                </Space>
-              </div>
-            </Card>
-            <Card
-              footer={
-                <div>
-                  <Typography.Text>邀请链接</Typography.Text>
-                  <Input
-                    style={{ marginTop: 10 }}
-                    value={affLink}
-                    onClick={handleAffLinkClick}
-                    readOnly
-                  />
-                </div>
-              }
-            >
-              <Typography.Title heading={6}>邀请信息</Typography.Title>
-              <div style={{ marginTop: 10 }}>
-                <Descriptions row>
-                  <Descriptions.Item itemKey='待使用收益'>
-                    <span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
+                        <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>
+                        </div>
+                        <div style={{marginTop: 20}}>
+                            <Typography.Text>
+                                {`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` +
+                                    renderQuota(getQuotaPerUnit())}
+                            </Typography.Text>
+                            <div>
+                                <InputNumber
+                                    min={0}
+                                    style={{marginTop: 5}}
+                                    value={transferAmount}
+                                    onChange={(value) => setTransferAmount(value)}
+                                    disabled={false}
+                                ></InputNumber>
+                            </div>
+                        </div>
+                    </Modal>
+                    <div style={{marginTop: 20}}>
+                        <Card
+                            title={
+                                <Card.Meta
+                                    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>
+                                        )
+                                    }
+                                ></Card.Meta>
+                            }
+                            headerExtraContent={
+                                <>
+                                    <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>
+                            }
+                        >
+                            <Typography.Title heading={6}>可用模型</Typography.Title>
+                            <div style={{marginTop: 10}}>
+                                <Space wrap>
+                                    {models.map((model) => (
+                                        <Tag
+                                            key={model}
+                                            color='cyan'
+                                            onClick={() => {
+                                                copyText(model);
+                                            }}
+                                        >
+                                            {model}
+                                        </Tag>
+                                    ))}
+                                </Space>
+                            </div>
+                        </Card>
+                        <Card
+                            style={{marginTop: 10}}
+                            footer={
+                                <div>
+                                    <Typography.Text>邀请链接</Typography.Text>
+                                    <Input
+                                        style={{marginTop: 10}}
+                                        value={affLink}
+                                        onClick={handleAffLinkClick}
+                                        readOnly
+                                    />
+                                </div>
+                            }
+                        >
+                            <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>
-                  <Descriptions.Item itemKey='总收益'>
-                    {renderQuota(userState?.user?.aff_history_quota)}
-                  </Descriptions.Item>
-                  <Descriptions.Item itemKey='邀请人数'>
-                    {userState?.user?.aff_count}
-                  </Descriptions.Item>
-                </Descriptions>
-              </div>
-            </Card>
-            <Card>
-              <Typography.Title heading={6}>个人信息</Typography.Title>
-              <div style={{ marginTop: 20 }}>
-                <Typography.Text strong>邮箱</Typography.Text>
-                <div
-                  style={{ display: 'flex', justifyContent: 'space-between' }}
-                >
-                  <div>
-                    <Input
-                      value={
-                        userState.user && userState.user.email !== ''
-                          ? userState.user.email
-                          : '未绑定'
-                      }
-                      readonly={true}
-                    ></Input>
-                  </div>
-                  <div>
-                    <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>
-                    <Input
-                      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>
-                  </div>
-                </div>
-              </div>
-              <div style={{ marginTop: 10 }}>
-                <Typography.Text strong>GitHub</Typography.Text>
-                <div
-                  style={{ display: 'flex', justifyContent: 'space-between' }}
-                >
-                  <div>
-                    <Input
-                      value={
-                        userState.user && userState.user.github_id !== ''
-                          ? userState.user.github_id
-                          : '未绑定'
-                      }
-                      readonly={true}
-                    ></Input>
-                  </div>
-                  <div>
-                    <Button
-                      onClick={() => {
-                        onGitHubOAuthClicked(status.github_client_id);
-                      }}
-                      disabled={
-                        (userState.user && userState.user.github_id !== '') ||
-                        !status.github_oauth
-                      }
-                    >
-                      {status.github_oauth ? '绑定' : '未启用'}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-              <div style={{ marginTop: 10 }}>
-                <Typography.Text strong>Telegram</Typography.Text>
-                <div
-                  style={{ display: 'flex', justifyContent: 'space-between' }}
-                >
-                  <div>
-                    <Input
-                      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>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div style={{ marginTop: 10 }}>
-                <Typography.Text strong>LinuxDO</Typography.Text>
-                <div
-                  style={{ display: 'flex', justifyContent: 'space-between' }}
-                >
-                  <div>
-                    <Input
-                      value={
-                        userState.user && userState.user.linux_do_id !== ''
-                          ? userState.user.linux_do_id
-                          : '未绑定'
-                      }
-                      readonly={true}
-                    ></Input>
-                  </div>
-                  <div>
-                    <Button
-                      onClick={() => {
-                        onLinuxDOOAuthClicked(status.linuxdo_client_id);
-                      }}
-                      disabled={
-                        (userState.user && userState.user.linux_do_id !== '') ||
-                        !status.linuxdo_oauth
-                      }
-                    >
-                      {status.linuxdo_oauth ? '绑定' : '未启用'}
-                    </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>
-                </Space>
+                                        <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>
+                            </div>
+                        </Card>
+                        <Card style={{marginTop: 10}}>
+                            <Typography.Title heading={6}>个人信息</Typography.Title>
+                            <div style={{marginTop: 20}}>
+                                <Typography.Text strong>邮箱</Typography.Text>
+                                <div
+                                    style={{display: 'flex', justifyContent: 'space-between'}}
+                                >
+                                    <div>
+                                        <Input
+                                            value={
+                                                userState.user && userState.user.email !== ''
+                                                    ? userState.user.email
+                                                    : '未绑定'
+                                            }
+                                            readonly={true}
+                                        ></Input>
+                                    </div>
+                                    <div>
+                                        <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>
+                                        <Input
+                                            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>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <Typography.Text strong>GitHub</Typography.Text>
+                                <div
+                                    style={{display: 'flex', justifyContent: 'space-between'}}
+                                >
+                                    <div>
+                                        <Input
+                                            value={
+                                                userState.user && userState.user.github_id !== ''
+                                                    ? userState.user.github_id
+                                                    : '未绑定'
+                                            }
+                                            readonly={true}
+                                        ></Input>
+                                    </div>
+                                    <div>
+                                        <Button
+                                            onClick={() => {
+                                                onGitHubOAuthClicked(status.github_client_id);
+                                            }}
+                                            disabled={
+                                                (userState.user && userState.user.github_id !== '') ||
+                                                !status.github_oauth
+                                            }
+                                        >
+                                            {status.github_oauth ? '绑定' : '未启用'}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <Typography.Text strong>Telegram</Typography.Text>
+                                <div
+                                    style={{display: 'flex', justifyContent: 'space-between'}}
+                                >
+                                    <div>
+                                        <Input
+                                            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>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <Typography.Text strong>LinuxDO</Typography.Text>
+                                <div
+                                    style={{display: 'flex', justifyContent: 'space-between'}}
+                                >
+                                    <div>
+                                        <Input
+                                            value={
+                                                userState.user && userState.user.linux_do_id !== ''
+                                                    ? userState.user.linux_do_id
+                                                    : '未绑定'
+                                            }
+                                            readonly={true}
+                                        ></Input>
+                                    </div>
+                                    <div>
+                                        <Button
+                                            onClick={() => {
+                                                onLinuxDOOAuthClicked(status.linuxdo_client_id);
+                                            }}
+                                            disabled={
+                                                (userState.user && userState.user.linux_do_id !== '') ||
+                                                !status.linuxdo_oauth
+                                            }
+                                        >
+                                            {status.linuxdo_oauth ? '绑定' : '未启用'}
+                                        </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>
+                                </Space>
 
-                {systemToken && (
-                  <Input
-                    readOnly
-                    value={systemToken}
-                    onClick={handleSystemTokenClick}
-                    style={{ marginTop: '10px' }}
-                  />
-                )}
-                {status.wechat_login && (
-                  <Button
-                    onClick={() => {
-                      setShowWeChatBindModal(true);
-                    }}
-                  >
-                    绑定微信账号
-                  </Button>
-                )}
-                <Modal
-                  onCancel={() => setShowWeChatBindModal(false)}
-                  // onOpen={() => setShowWeChatBindModal(true)}
-                  visible={showWeChatBindModal}
-                  size={'small'}
-                >
-                  <Image src={status.wechat_qrcode} />
-                  <div style={{ textAlign: 'center' }}>
-                    <p>
-                      微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
-                    </p>
-                  </div>
-                  <Input
-                    placeholder='验证码'
-                    name='wechat_verification_code'
-                    value={inputs.wechat_verification_code}
-                    onChange={(v) =>
-                      handleInputChange('wechat_verification_code', v)
-                    }
-                  />
-                  <Button color='' fluid size='large' onClick={bindWeChat}>
-                    绑定
-                  </Button>
-                </Modal>
-              </div>
-            </Card>
-            <Modal
-              onCancel={() => setShowEmailBindModal(false)}
-              // onOpen={() => setShowEmailBindModal(true)}
-              onOk={bindEmail}
-              visible={showEmailBindModal}
-              size={'small'}
-              centered={true}
-              maskClosable={false}
-            >
-              <Typography.Title heading={6}>绑定邮箱地址</Typography.Title>
-              <div
-                style={{
-                  marginTop: 20,
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <Input
-                  fluid
-                  placeholder='输入邮箱地址'
-                  onChange={(value) => handleInputChange('email', value)}
-                  name='email'
-                  type='email'
-                />
-                <Button
-                  onClick={sendVerificationCode}
-                  disabled={disableButton || loading}
-                >
-                  {disableButton ? `重新发送 (${countdown})` : '获取验证码'}
-                </Button>
-              </div>
-              <div style={{ marginTop: 10 }}>
-                <Input
-                  fluid
-                  placeholder='验证码'
-                  name='email_verification_code'
-                  value={inputs.email_verification_code}
-                  onChange={(value) =>
-                    handleInputChange('email_verification_code', value)
-                  }
-                />
-              </div>
-              {turnstileEnabled ? (
-                <Turnstile
-                  sitekey={turnstileSiteKey}
-                  onVerify={(token) => {
-                    setTurnstileToken(token);
-                  }}
-                />
-              ) : (
-                <></>
-              )}
-            </Modal>
-            <Modal
-              onCancel={() => setShowAccountDeleteModal(false)}
-              visible={showAccountDeleteModal}
-              size={'small'}
-              centered={true}
-              onOk={deleteAccount}
-            >
-              <div style={{ marginTop: 20 }}>
-                <Banner
-                  type='danger'
-                  description='您正在删除自己的帐户，将清空所有数据且不可恢复'
-                  closeIcon={null}
-                />
-              </div>
-              <div style={{ marginTop: 20 }}>
-                <Input
-                  placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
-                  name='self_account_deletion_confirmation'
-                  value={inputs.self_account_deletion_confirmation}
-                  onChange={(value) =>
-                    handleInputChange(
-                      'self_account_deletion_confirmation',
-                      value,
-                    )
-                  }
-                />
-                {turnstileEnabled ? (
-                  <Turnstile
-                    sitekey={turnstileSiteKey}
-                    onVerify={(token) => {
-                      setTurnstileToken(token);
-                    }}
-                  />
-                ) : (
-                  <></>
-                )}
-              </div>
-            </Modal>
-            <Modal
-              onCancel={() => setShowChangePasswordModal(false)}
-              visible={showChangePasswordModal}
-              size={'small'}
-              centered={true}
-              onOk={changePassword}
-            >
-              <div style={{ marginTop: 20 }}>
-                <Input
-                  name='set_new_password'
-                  placeholder='新密码'
-                  value={inputs.set_new_password}
-                  onChange={(value) =>
-                    handleInputChange('set_new_password', value)
-                  }
-                />
-                <Input
-                  style={{ marginTop: 20 }}
-                  name='set_new_password_confirmation'
-                  placeholder='确认新密码'
-                  value={inputs.set_new_password_confirmation}
-                  onChange={(value) =>
-                    handleInputChange('set_new_password_confirmation', value)
-                  }
-                />
-                {turnstileEnabled ? (
-                  <Turnstile
-                    sitekey={turnstileSiteKey}
-                    onVerify={(token) => {
-                      setTurnstileToken(token);
-                    }}
-                  />
-                ) : (
-                  <></>
-                )}
-              </div>
-            </Modal>
-          </div>
-        </Layout.Content>
-      </Layout>
-    </div>
-  );
+                                {systemToken && (
+                                    <Input
+                                        readOnly
+                                        value={systemToken}
+                                        onClick={handleSystemTokenClick}
+                                        style={{marginTop: '10px'}}
+                                    />
+                                )}
+                                {status.wechat_login && (
+                                    <Button
+                                        onClick={() => {
+                                            setShowWeChatBindModal(true);
+                                        }}
+                                    >
+                                        绑定微信账号
+                                    </Button>
+                                )}
+                                <Modal
+                                    onCancel={() => setShowWeChatBindModal(false)}
+                                    // onOpen={() => setShowWeChatBindModal(true)}
+                                    visible={showWeChatBindModal}
+                                    size={'small'}
+                                >
+                                    <Image src={status.wechat_qrcode}/>
+                                    <div style={{textAlign: 'center'}}>
+                                        <p>
+                                            微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                                        </p>
+                                    </div>
+                                    <Input
+                                        placeholder='验证码'
+                                        name='wechat_verification_code'
+                                        value={inputs.wechat_verification_code}
+                                        onChange={(v) =>
+                                            handleInputChange('wechat_verification_code', v)
+                                        }
+                                    />
+                                    <Button color='' fluid size='large' onClick={bindWeChat}>
+                                        绑定
+                                    </Button>
+                                </Modal>
+                            </div>
+                        </Card>
+                        <Modal
+                            onCancel={() => setShowEmailBindModal(false)}
+                            // onOpen={() => setShowEmailBindModal(true)}
+                            onOk={bindEmail}
+                            visible={showEmailBindModal}
+                            size={'small'}
+                            centered={true}
+                            maskClosable={false}
+                        >
+                            <Typography.Title heading={6}>绑定邮箱地址</Typography.Title>
+                            <div
+                                style={{
+                                    marginTop: 20,
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                }}
+                            >
+                                <Input
+                                    fluid
+                                    placeholder='输入邮箱地址'
+                                    onChange={(value) => handleInputChange('email', value)}
+                                    name='email'
+                                    type='email'
+                                />
+                                <Button
+                                    onClick={sendVerificationCode}
+                                    disabled={disableButton || loading}
+                                >
+                                    {disableButton ? `重新发送 (${countdown})` : '获取验证码'}
+                                </Button>
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <Input
+                                    fluid
+                                    placeholder='验证码'
+                                    name='email_verification_code'
+                                    value={inputs.email_verification_code}
+                                    onChange={(value) =>
+                                        handleInputChange('email_verification_code', value)
+                                    }
+                                />
+                            </div>
+                            {turnstileEnabled ? (
+                                <Turnstile
+                                    sitekey={turnstileSiteKey}
+                                    onVerify={(token) => {
+                                        setTurnstileToken(token);
+                                    }}
+                                />
+                            ) : (
+                                <></>
+                            )}
+                        </Modal>
+                        <Modal
+                            onCancel={() => setShowAccountDeleteModal(false)}
+                            visible={showAccountDeleteModal}
+                            size={'small'}
+                            centered={true}
+                            onOk={deleteAccount}
+                        >
+                            <div style={{marginTop: 20}}>
+                                <Banner
+                                    type='danger'
+                                    description='您正在删除自己的帐户，将清空所有数据且不可恢复'
+                                    closeIcon={null}
+                                />
+                            </div>
+                            <div style={{marginTop: 20}}>
+                                <Input
+                                    placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
+                                    name='self_account_deletion_confirmation'
+                                    value={inputs.self_account_deletion_confirmation}
+                                    onChange={(value) =>
+                                        handleInputChange(
+                                            'self_account_deletion_confirmation',
+                                            value,
+                                        )
+                                    }
+                                />
+                                {turnstileEnabled ? (
+                                    <Turnstile
+                                        sitekey={turnstileSiteKey}
+                                        onVerify={(token) => {
+                                            setTurnstileToken(token);
+                                        }}
+                                    />
+                                ) : (
+                                    <></>
+                                )}
+                            </div>
+                        </Modal>
+                        <Modal
+                            onCancel={() => setShowChangePasswordModal(false)}
+                            visible={showChangePasswordModal}
+                            size={'small'}
+                            centered={true}
+                            onOk={changePassword}
+                        >
+                            <div style={{marginTop: 20}}>
+                                <Input
+                                    name='set_new_password'
+                                    placeholder='新密码'
+                                    value={inputs.set_new_password}
+                                    onChange={(value) =>
+                                        handleInputChange('set_new_password', value)
+                                    }
+                                />
+                                <Input
+                                    style={{marginTop: 20}}
+                                    name='set_new_password_confirmation'
+                                    placeholder='确认新密码'
+                                    value={inputs.set_new_password_confirmation}
+                                    onChange={(value) =>
+                                        handleInputChange('set_new_password_confirmation', value)
+                                    }
+                                />
+                                {turnstileEnabled ? (
+                                    <Turnstile
+                                        sitekey={turnstileSiteKey}
+                                        onVerify={(token) => {
+                                            setTurnstileToken(token);
+                                        }}
+                                    />
+                                ) : (
+                                    <></>
+                                )}
+                            </div>
+                        </Modal>
+                    </div>
+                </Layout.Content>
+            </Layout>
+        </div>
+    );
 };
 
 export default PersonalSetting;