🎨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", "关闭公告": "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",

View File

@@ -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> <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
<Layout> <div className="flex flex-col items-center">
<Layout.Header> <Spin
<Banner description={'正在跳转......'} type={'warning'} /> size="large"
</Layout.Header> spinning={true}
</Layout> tip={null}
/>
<span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
{t('正在跳转...')}
</span>
</div>
</div> </div>
); );
}; };