From 6e7249cf0655c8c869e2c240ca47a1ff26c6f5f4 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sat, 7 Jun 2025 23:22:25 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8feat(ui):=20Improve=20Chat=20page?=
 =?UTF-8?q?=20UI=20and=20add=20i18n=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace Banner with full-screen Spin component for better loading UX
- Add English translation for "正在跳转..." ("Redirecting...")
- Integrate i18next translation hook in Chat page component
- Remove unused useEffect import for cleaner code

The Chat page now shows a centered full-screen loading spinner instead of
a banner when redirecting, providing a more consistent and professional
user experience. The loading text is now properly internationalized and
will display "Redirecting..." in English and "正在跳转..." in Chinese.
---
 web/src/i18n/locales/en.json |  1 +
 web/src/pages/Chat/index.js  | 23 +++++++++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 82625b67..a3a05acd 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1536,6 +1536,7 @@
   "关闭公告": "Close Notice",
   "搜索条件": "Search Conditions",
   "加载中...": "Loading...",
+  "正在跳转...": "Redirecting...",
   "暂无公告": "No Notice",
   "操练场": "Playground",
   "欢迎使用，请完成以下设置以开始使用系统": "Welcome to use, please complete the following settings to start using the system",
diff --git a/web/src/pages/Chat/index.js b/web/src/pages/Chat/index.js
index bd4e19a1..22c5c1e2 100644
--- a/web/src/pages/Chat/index.js
+++ b/web/src/pages/Chat/index.js
@@ -1,9 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTokenKeys } from '../../hooks/useTokenKeys';
-import { Banner, Layout } from '@douyinfe/semi-ui';
+import { Spin } from '@douyinfe/semi-ui';
 import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 const ChatPage = () => {
+  const { t } = useTranslation();
   const { id } = useParams();
   const { keys, serverAddress, isLoading } = useTokenKeys(id);
 
@@ -40,12 +42,17 @@ const ChatPage = () => {
       allow='camera;microphone'
     />
   ) : (
-    <div>
-      <Layout>
-        <Layout.Header>
-          <Banner description={'正在跳转......'} type={'warning'} />
-        </Layout.Header>
-      </Layout>
+    <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
+      <div className="flex flex-col items-center">
+        <Spin
+          size="large"
+          spinning={true}
+          tip={null}
+        />
+        <span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
+          {t('正在跳转...')}
+        </span>
+      </div>
     </div>
   );
 };