🎨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:
@@ -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",
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user