🌐 i18n: add internationalization support for Loading component
This commit introduces the following changes:
- Add i18n support to the Loading component
- Import useTranslation hook from react-i18next
- Replace hardcoded Chinese text with translation keys
- Support dynamic content interpolation for loading prompts
- Use {{name}} variable in translation template
Technical details:
- Added: import { useTranslation } from 'react-i18next'
- Modified: Loading text from static Chinese to i18n keys
- Translation keys added:
- "加载中..."
- "加载{{name}}中..."
File changed: web/src/components/Loading.js
This commit is contained in:
@@ -1,17 +1,20 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Spin } from '@douyinfe/semi-ui';
|
import { Spin } from '@douyinfe/semi-ui';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
const Loading = ({ prompt: name = '', size = 'large' }) => {
|
const Loading = ({ prompt: name = '', size = 'large' }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
|
<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">
|
<div className="flex flex-col items-center">
|
||||||
<Spin
|
<Spin
|
||||||
size={size}
|
size={size}
|
||||||
spinning={true}
|
spinning={true}
|
||||||
tip={null}
|
tip={null}
|
||||||
/>
|
/>
|
||||||
<span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
|
<span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
|
||||||
{name ? `加载${name}中...` : '加载中...'}
|
{name ? t('加载{{name}}中...', { name }) : t('加载中...')}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user