From 7e9bd35ac77cb9fa54af7bbf014d9b07f3621c6c Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 8 Jun 2025 00:07:37 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(auth):=20replace?=
 =?UTF-8?q?=20custom=20loading=20UI=20with=20shared=20Loading=20component?=
 =?UTF-8?q?=20and=20add=20i18n=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace inline loading UI in OAuth2Callback with shared Loading component
- Add internationalization support using useTranslation hook
- Translate all hardcoded Chinese strings to support multiple languages
- Remove unused processing state variable
- Maintain consistent loading experience across the application
- Support dynamic text content for retry attempts with parameter interpolation
---
 web/src/components/auth/OAuth2Callback.js | 33 +++++++++--------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/web/src/components/auth/OAuth2Callback.js b/web/src/components/auth/OAuth2Callback.js
index 83f9db46..6d0bbe70 100644
--- a/web/src/components/auth/OAuth2Callback.js
+++ b/web/src/components/auth/OAuth2Callback.js
@@ -1,15 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Spin, Typography, Space } from '@douyinfe/semi-ui';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { API, showError, showSuccess, updateAPI, setUserData } from '../../helpers';
 import { UserContext } from '../../context/User';
+import Loading from '../common/Loading';
 
 const OAuth2Callback = (props) => {
+  const { t } = useTranslation();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const [userState, userDispatch] = useContext(UserContext);
-  const [prompt, setPrompt] = useState('处理中...');
-  const [processing, setProcessing] = useState(true);
+  const [prompt, setPrompt] = useState(t('处理中...'));
 
   let navigate = useNavigate();
 
@@ -20,25 +21,25 @@ const OAuth2Callback = (props) => {
     const { success, message, data } = res.data;
     if (success) {
       if (message === 'bind') {
-        showSuccess('绑定成功！');
-        navigate('/setting');
+        showSuccess(t('绑定成功！'));
+        navigate('/console/setting');
       } else {
         userDispatch({ type: 'login', payload: data });
         localStorage.setItem('user', JSON.stringify(data));
         setUserData(data);
         updateAPI();
-        showSuccess('登录成功！');
-        navigate('/token');
+        showSuccess(t('登录成功！'));
+        navigate('/console/token');
       }
     } else {
       showError(message);
       if (count === 0) {
-        setPrompt(`操作失败，重定向至登录界面中...`);
-        navigate('/setting'); // in case this is failed to bind GitHub
+        setPrompt(t('操作失败，重定向至登录界面中...'));
+        navigate('/console/setting'); // in case this is failed to bind GitHub
         return;
       }
       count++;
-      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      setPrompt(t('出现错误，第 ${count} 次重试中...', { count }));
       await new Promise((resolve) => setTimeout(resolve, count * 2000));
       await sendCode(code, state, count);
     }
@@ -50,17 +51,7 @@ const OAuth2Callback = (props) => {
     sendCode(code, state, 0).then();
   }, []);
 
-  return (
-    <div className="flex items-center justify-center min-h-[300px] w-full bg-white rounded-lg shadow p-6">
-      <Space vertical align="center">
-        <Spin size="large" spinning={processing}>
-          <div className="min-h-[200px] min-w-[200px] flex items-center justify-center">
-            <Typography.Text type="secondary">{prompt}</Typography.Text>
-          </div>
-        </Spin>
-      </Space>
-    </div>
-  );
+  return <Loading prompt={prompt} />;
 };
 
 export default OAuth2Callback;