refactor: 迁移 i18n 系统从 react-i18next 到 chrome.i18n

- 移除 react-i18next、i18next 及相关依赖
- 删除旧的 i18n/ 目录和 useLazyTranslation 工具
- 新增 utils/chromeI18n.ts 类型安全 wrapper（useI18n Hook + getMessage）
- 生成 public/_locales/{zh,en}/messages.json（298 个翻译 key）
- 批量更新 39+ 组件文件的导入和翻译调用
- 转换翻译键格式：namespace:key → namespace_key
- 修复 ErrorBoundary/PageErrorBoundary 从 withTranslation HOC 改为直接调用 getMessage
- 更新 vitest.setup.ts mock 加载实际翻译文本
- 修复 11 个测试文件的断言以匹配中文翻译
- TypeScript、ESLint、547 项测试全部通过

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

pages/Base64Converter/Base64ConverterSection.tsx

@@ -1,6 +1,6 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import DecodeResultPaper from '@/components/DecodeResultPaper';
 import { Button } from '@/components/ui/button';
@@ -19,7 +19,7 @@ interface Base64ConverterSectionProps {
 }
 
 export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   const [direction, setDirection] = useStorageState(
     `base64Converter/${mode}Mode/direction`,

pages/Base64Converter/TextMode.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import { base64ToText, textToBase64 } from '@/utils/base64Converter';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
@@ -20,7 +20,7 @@ interface TextModeProps {
 }
 
 export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   // 1. 纯净的核心源状态机：只保留输入源和转换方向
   const [input, setInput] = useState('');

pages/Base64Converter/__tests__/TextMode.test.tsx

@@ -19,18 +19,18 @@ describe('TextMode', () => {
 
   it('应该渲染编码/解码切换按钮', () => {
     render(<TextMode />);
-    expect(screen.getByText('base64Converter:encode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:decode')).toBeInTheDocument();
+    expect(screen.getByText('编码')).toBeInTheDocument();
+    expect(screen.getByText('解码')).toBeInTheDocument();
   });
 
   it('应该渲染输入框和转换按钮', () => {
     render(<TextMode />);
-    expect(screen.getByPlaceholderText('base64Converter:textInputPlaceholder')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('输入需要编码为 Base64 的文本...')).toBeInTheDocument();
   });
 
   it('应该将文本编码为 Base64', async () => {
     render(<TextMode />);
-    const input = screen.getByPlaceholderText('base64Converter:textInputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
     fireEvent.change(input, { target: { value: 'Hello' } });
 
     act(() => {
@@ -38,7 +38,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:base64Output')).toBeInTheDocument();
+      expect(screen.getByText('Base64 编码结果')).toBeInTheDocument();
     });
     expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
   });
@@ -47,9 +47,9 @@ describe('TextMode', () => {
     render(<TextMode />);
 
     // 切换到解码模式
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
 
     act(() => {
@@ -57,7 +57,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:textOutput')).toBeInTheDocument();
+      expect(screen.getByText('解码文本结果')).toBeInTheDocument();
     });
     expect(screen.getByRole('button', { name: 'Hello' })).toBeInTheDocument();
   });
@@ -66,9 +66,9 @@ describe('TextMode', () => {
     render(<TextMode />);
 
     // 切换到解码模式
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'invalid!!!' } });
 
     act(() => {
@@ -76,7 +76,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:invalidBase64')).toBeInTheDocument();
+      expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
     });
   });
 
@@ -84,7 +84,7 @@ describe('TextMode', () => {
     render(<TextMode />);
 
     // 先编码
-    const input = screen.getByPlaceholderText('base64Converter:textInputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
     fireEvent.change(input, { target: { value: 'Hello' } });
 
     act(() => {
@@ -96,7 +96,7 @@ describe('TextMode', () => {
     });
 
     // 切换方向
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
     // 输出应该被清除
     await waitFor(() => {
@@ -107,7 +107,7 @@ describe('TextMode', () => {
   it('点击清除按钮应该清空所有内容', async () => {
     render(<TextMode />);
 
-    const input = screen.getByPlaceholderText('base64Converter:textInputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
     fireEvent.change(input, { target: { value: 'Hello' } });
 
     act(() => {
@@ -129,48 +129,52 @@ describe('TextMode', () => {
   it('解码模式下粘贴图片 data URI 时应该显示切换图像模式的提示', () => {
     render(<TextMode />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, {
       target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
     });
 
-    expect(screen.getByText('base64Converter:imageDataUriHint')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:switchToImageMode')).toBeInTheDocument();
+    expect(
+      screen.getByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('切换到图像模式')).toBeInTheDocument();
   });
 
   it('粘贴非图片 data URI 时不应该显示图像模式提示', () => {
     render(<TextMode />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
 
-    expect(screen.queryByText('base64Converter:imageDataUriHint')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
+    ).not.toBeInTheDocument();
   });
 
   it('点击切换图像模式按钮应该调用 onSwitchToImageMode 回调', () => {
     const onSwitch = vi.fn();
     render(<TextMode onSwitchToImageMode={onSwitch} />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    fireEvent.click(screen.getByText('解码'));
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, {
       target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
     });
 
-    fireEvent.click(screen.getByText('base64Converter:switchToImageMode'));
+    fireEvent.click(screen.getByText('切换到图像模式'));
     expect(onSwitch).toHaveBeenCalledTimes(1);
   });
 
   it('解码模式下对二进制数据应该显示更清晰的错误', async () => {
     render(<TextMode />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
 
     act(() => {
@@ -178,7 +182,9 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:binaryDataDetected')).toBeInTheDocument();
+      expect(
+        screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
+      ).toBeInTheDocument();
     });
   });
 });

pages/Base64Converter/__tests__/index.test.tsx

@@ -2,15 +2,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Base64ConverterPage from '../index';
 
-// Mock useLazyTranslation
-vi.mock('@/utils/useLazyTranslation', () => ({
-  useLazyTranslation: () => ({
-    t: (key: string) => key,
-    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
-    isLoaded: true,
-  }),
-}));
-
 // Mock getEntryPointType
 vi.mock('@/config/features', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/config/features')>();
@@ -49,15 +40,15 @@ describe('Base64ConverterPage', () => {
   it('应该渲染模式切换按钮', async () => {
     render(<Base64ConverterPage />);
     await waitForStorageInit();
-    expect(screen.getByText('base64Converter:textMode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:fileMode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:imageMode')).toBeInTheDocument();
+    expect(screen.getByText('文本')).toBeInTheDocument();
+    expect(screen.getByText('文件')).toBeInTheDocument();
+    expect(screen.getByText('图像')).toBeInTheDocument();
   });
 
   it('切换到文件模式应该渲染 FileMode', async () => {
     render(<Base64ConverterPage />);
     await waitForStorageInit();
-    fireEvent.click(screen.getByText('base64Converter:fileMode'));
+    fireEvent.click(screen.getByText('文件'));
     await waitFor(() => {
       expect(screen.getByTestId('file-mode')).toBeInTheDocument();
     });
@@ -67,7 +58,7 @@ describe('Base64ConverterPage', () => {
   it('切换到图像模式应该渲染 ImageMode', async () => {
     render(<Base64ConverterPage />);
     await waitForStorageInit();
-    fireEvent.click(screen.getByText('base64Converter:imageMode'));
+    fireEvent.click(screen.getByText('图像'));
     await waitFor(() => {
       expect(screen.getByTestId('image-mode')).toBeInTheDocument();
     });

pages/Base64Converter/index.tsx

@@ -1,4 +1,4 @@
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConverterPageMode } from '@/types/storage';
 import TextMode from './TextMode';
@@ -12,7 +12,7 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
 type PageMode = Base64ConverterPageMode;
 
 export default function Index() {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
   const [pageMode, setPageMode] = useStorageState(
     'base64Converter/pageMode',
     'text',

pages/Base64Converter/useBase64Converter.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import type { FileToBase64Result } from '@/utils/base64Converter';
 import {
   base64ToBlob,
@@ -21,7 +21,7 @@ interface UseBase64ConverterProps {
 }
 
 export function useBase64Converter({ mode }: UseBase64ConverterProps) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   const [result, setResult] = useState<FileToBase64Result | null>(null);
   const [info, setInfo] = useState<FileInfo | null>(null);