♻️ refactor(auth): replace custom loading UI with shared Loading component and add i18n support

- 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

@@ -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 [prompt, setPrompt] = useState(t('处理中...'));
-  const [processing, setProcessing] = useState(true);
 
   let navigate = useNavigate();
 
@@ -20,25 +21,25 @@ const OAuth2Callback = (props) => {
     const { success, message, data } = res.data;
     if (success) {
       if (message === 'bind') {
-        showSuccess('绑定成功！');
+        showSuccess(t('绑定成功！'));
-        navigate('/setting');
+        navigate('/console/setting');
       } else {
         userDispatch({ type: 'login', payload: data });
         localStorage.setItem('user', JSON.stringify(data));
         setUserData(data);
         updateAPI();
-        showSuccess('登录成功！');
+        showSuccess(t('登录成功！'));
-        navigate('/token');
+        navigate('/console/token');
       }
     } else {
       showError(message);
       if (count === 0) {
-        setPrompt(`操作失败，重定向至登录界面中...`);
+        setPrompt(t('操作失败，重定向至登录界面中...'));
-        navigate('/setting'); // in case this is failed to bind GitHub
+        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 (
+  return <Loading prompt={prompt} />;
-    <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>
-  );
 };
 
 export default OAuth2Callback;