feat: implement localization for Translator feature with multi-language...

feat: implement localization for Translator feature with multi-language support and update Header component

src/components/Header.jsx

@@ -165,7 +165,7 @@ function Header() {
                 }
                 onClick={handleNavClick}
               >
-                翻译工具
+                {t('translator.title')}
               </NavLink>
               <NavLink 
                 to="/ai-products" 

src/locales/en/common.json

@@ -18,6 +18,10 @@
       "title": "Image Tools",
       "description": "A suite of practical image processing tools, including a handwriting font generator, Markdown to image converter, and quote to image creator, making image editing and creative design tasks easier."
     },
+    "translator": {
+      "title": "Translator",
+      "description": "Supports text and image multi-language translation, making it easy to communicate across languages."
+    },
     "blog": {
       "title": "AI News",
       "description": "Offers the latest tech insights, development tips, and AI product reviews to help developers stay updated with cutting-edge information and improve their skills."

src/locales/ja/common.json

@@ -18,6 +18,10 @@
       "title": "画像ツール",
       "description": "手書きフォント生成、Markdown画像変換、有名な引用句の画像化など、実用的な画像処理ツールを多数集め、画像編集とクリエイティブデザインの作業を簡単にします。"
     },
+    "translator": {
+      "title": "翻訳ツール",
+      "description": "テキストと画像の多言語翻訳をサポートし、簡単に言語を越えて交流できます。"
+    },
     "blog": {
       "title": "AIニュース",
       "description": "最新の技術共有、開発経験、AI製品レビューなどのコンテンツを提供し、開発者が最先端の情報を入手してスキルを向上できるようサポートします。"

src/locales/ko/common.json

@@ -18,6 +18,10 @@
       "title": "이미지 도구",
       "description": "손글씨 폰트 생성기, Markdown 이미지 변환기, 명언 이미지 생성기 등 다양한 실용적인 이미지 처리 도구를 제공하여, 이미지 편집과 창의적인 디자인 작업을 쉽게 수행할 수 있습니다."
     },
+    "translator": {
+      "title": "번역 도구",
+      "description": "텍스트 및 이미지 다국어 번역을 지원하여 교류를 쉽게 할 수 있습니다."
+    },
     "blog": {
       "title": "AI 뉴스",
       "description": "최신 기술 공유, 개발 경험, AI 제품 리뷰 등의 콘텐츠를 제공하여 개발자가 최신 정보를 얻고 기술을 향상시킬 수 있도록 돕습니다."

src/locales/zh/common.json

@@ -18,6 +18,10 @@
       "title": "图片工具",
       "description": "集成多款实用的图片处理工具，包括手写字体生成器、Markdown转图片、名人名言转图片等，轻松完成图片编辑与创意设计工作。"
     },
+    "translator": {
+      "title": "翻译工具",
+      "description": "支持文本和图片多语言翻译，轻松实现跨语言交流。"
+    },
     "blog": {
       "title": "AI 资讯",
       "description": "提供最新技术分享、开发经验、AI产品评测等内容，帮助开发者获取前沿资讯，提升技能。"

src/pages/Translator.jsx

@@ -16,6 +16,8 @@ import {
   SyncOutlined,
   PauseOutlined
 } from '@ant-design/icons';
+import { useTranslation } from '../js/i18n';
+import SEO from '../components/SEO';
 
 const { TabPane } = Tabs;
 const { TextArea } = Input;
@@ -278,6 +280,7 @@ function fileToBase64(file) {
 }
 
 const Translator = () => {
+  const { t } = useTranslation();
   const [sourceText, setSourceText] = useState('');
   const [translatedText, setTranslatedText] = useState('');
   const [targetLanguage, setTargetLanguage] = useState('中文');
@@ -1027,19 +1030,25 @@ const Translator = () => {
   ];
 
   return (
-    <div className="flex flex-col items-center pt-16 md:pt-20 pb-12 px-4 sm:px-6">
-      <div className="w-full max-w-6xl">
-        <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
-          <Tabs
-            defaultActiveKey="text"
-            items={tabItems}
-            className="custom-tabs"
-            animated={{ inkBar: true, tabPane: false }}
-            onChange={handleTabChange}
-          />
+    <>
+      <SEO
+        title={t('translator.title')}
+        description={t('translator.description')}
+      />
+      <div className="flex flex-col items-center pt-16 md:pt-20 pb-12 px-4 sm:px-6">
+        <div className="w-full max-w-6xl">
+          <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
+            <Tabs
+              defaultActiveKey="text"
+              items={tabItems}
+              className="custom-tabs"
+              animated={{ inkBar: true, tabPane: false }}
+              onChange={handleTabChange}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };