From a7c79a9e34f6347441f46670b95b403ed5b0b5a9 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 26 May 2025 23:10:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20i18n:=20add=20internationalizati?=
 =?UTF-8?q?on=20support=20for=20Loading=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 web/src/components/Loading.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Loading.js b/web/src/components/Loading.js
index 5432b837..980e9cb1 100644
--- a/web/src/components/Loading.js
+++ b/web/src/components/Loading.js
@@ -1,17 +1,20 @@
 import React from 'react';
 import { Spin } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
 
 const Loading = ({ prompt: name = '', size = 'large' }) => {
+  const { t } = useTranslation();
+
   return (
     <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={size} 
-          spinning={true} 
+        <Spin
+          size={size}
+          spinning={true}
           tip={null}
         />
         <span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
-          {name ? `加载${name}中...` : '加载中...'}
+          {name ? t('加载{{name}}中...', { name }) : t('加载中...')}
         </span>
       </div>
     </div>