🎨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.
This commit is contained in:
Apple\Apple
2025-06-07 23:22:25 +08:00
parent 33014e9399
commit 6e7249cf06
2 changed files with 16 additions and 8 deletions

View File

@@ -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",

View File

@@ -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>
);
};