فهرست منبع

🎨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 ماه پیش
والد
کامیت
226ef003e5
2فایلهای تغییر یافته به همراه16 افزوده شده و 8 حذف شده
  1. 1 0
      web/src/i18n/locales/en.json
  2. 15 8
      web/src/pages/Chat/index.js

+ 1 - 0
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",

+ 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 { 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>
   );
 };