Browse Source

🎨feat(ui): Improve Chat page UI and add i18n support

- 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.
Apple\Apple 11 tháng trước cách đây
mục cha
commit
226ef003e5

+ 1 - 0
web/src/i18n/locales/en.json

@@ -1536,6 +1536,7 @@
   "关闭公告": "Close Notice",
   "关闭公告": "Close Notice",
   "搜索条件": "Search Conditions",
   "搜索条件": "Search Conditions",
   "加载中...": "Loading...",
   "加载中...": "Loading...",
+  "正在跳转...": "Redirecting...",
   "暂无公告": "No Notice",
   "暂无公告": "No Notice",
   "操练场": "Playground",
   "操练场": "Playground",
   "欢迎使用,请完成以下设置以开始使用系统": "Welcome to use, please complete the following settings to start using the system",
   "欢迎使用,请完成以下设置以开始使用系统": "Welcome to use, please complete the following settings to start using the system",

+ 15 - 8
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 { useTokenKeys } from '../../hooks/useTokenKeys';
-import { Banner, Layout } from '@douyinfe/semi-ui';
+import { Spin } from '@douyinfe/semi-ui';
 import { useParams } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 
 const ChatPage = () => {
 const ChatPage = () => {
+  const { t } = useTranslation();
   const { id } = useParams();
   const { id } = useParams();
   const { keys, serverAddress, isLoading } = useTokenKeys(id);
   const { keys, serverAddress, isLoading } = useTokenKeys(id);
 
 
@@ -40,12 +42,17 @@ const ChatPage = () => {
       allow='camera;microphone'
       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>
     </div>
   );
   );
 };
 };