From e07163c568d217712dbe4afb658e144dd656a6d6 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Tue, 20 May 2025 23:47:29 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20OAuth2Callback=20?=
 =?UTF-8?q?Page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/OAuth2Callback.js | 16 ++++++++++------
 web/src/pages/Home/index.js          |  4 ++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/src/components/OAuth2Callback.js b/web/src/components/OAuth2Callback.js
index 616ec313..9edae986 100644
--- a/web/src/components/OAuth2Callback.js
+++ b/web/src/components/OAuth2Callback.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { Spin, Typography, Space } from '@douyinfe/semi-ui';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { API, showError, showSuccess, updateAPI } from '../helpers';
 import { UserContext } from '../context/User';
@@ -52,11 +52,15 @@ const OAuth2Callback = (props) => {
   }, []);
 
   return (
-    <Segment style={{ minHeight: '300px' }}>
-      <Dimmer active inverted>
-        <Loader size='large'>{prompt}</Loader>
-      </Dimmer>
-    </Segment>
+    <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>
   );
 };
 
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index e9d3b393..e42be2e0 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -95,14 +95,14 @@ const Home = () => {
                 {/* 操作按钮 */}
                 <div className="mt-6 md:mt-10 flex flex-wrap gap-4 justify-center md:justify-start">
                   <Link to="/console">
-                    <Button theme="solid" type="primary" size="large">
+                    <Button theme="solid" type="primary" size="large" className="!rounded-3xl">
                       {t('开始使用')}
                     </Button>
                   </Link>
                   {isDemoSiteMode && (
                     <Button
                       size="large"
-                      className="flex items-center"
+                      className="flex items-center !rounded-3xl"
                       icon={<IconGithubLogo />}
                       onClick={() => window.open('https://github.com/QuantumNous/new-api', '_blank')}
                     >