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);

pages/Dashboard/index.tsx

@@ -3,12 +3,12 @@ import ToolCard from '@/pages/Dashboard/ToolCard';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 export default function DashboardPage() {
   const { navigateTo, visiblePages, pageOrder } = useRouter();
-  const { t } = useTranslation(['features']);
+  const { t } = useI18n(['features']);
 
   const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
 

pages/HtmlToMarkdown/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Download, Trash2 } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
@@ -13,7 +13,7 @@ const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
   typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
 
 export default function HtmlToMarkdownPage() {
-  const { t } = useLazyTranslation('htmlToMarkdown');
+  const { t } = useI18n('htmlToMarkdown');
   const [previewMode, setPreviewMode] = useStorageState(
     'htmlToMarkdown/previewMode',
     'split' as HtmlToMarkdownPreviewMode,

pages/JsonTools/DiffNavigator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
 
 export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -19,7 +19,7 @@ export default function DiffNavigator({
   className,
   ...props
 }: DiffNavigatorProps) {
-  const { t } = useLazyTranslation('jsonDiff');
+  const { t } = useI18n('jsonDiff');
 
   // 计算当前的边界禁用状态守卫
   const isFirst = currentIndex <= 0;

pages/JsonTools/DiffResult.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import JsonTree from './JsonTree';
 import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
@@ -18,7 +18,7 @@ export default function DiffResult({
   className,
   ...props
 }: DiffResultProps) {
-  const { t } = useLazyTranslation('jsonDiff');
+  const { t } = useI18n('jsonDiff');
 
   if (viewMode === 'sideBySide') {
     return (

pages/JsonTools/JsonConvertSection.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { formatByteSize } from '@/utils/textStatistics';
 import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
@@ -25,7 +25,7 @@ export default function JsonConvertSection({
   className,
   ...props
 }: JsonConvertSectionProps) {
-  const { t } = useLazyTranslation('jsonFormat');
+  const { t } = useI18n('jsonFormat');
 
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');

pages/JsonTools/JsonFormatSection.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import {
   formatJson,
   type JsonFormatOptions,
@@ -14,7 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
 export default function JsonFormatSection() {
-  const { t } = useLazyTranslation('jsonFormat');
+  const { t } = useI18n('jsonFormat');
 
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');

pages/JsonTools/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import JsonDiffInput from './JsonDiffInput';
 import DiffResult from './DiffResult';
 import DiffNavigator from './DiffNavigator';
@@ -37,7 +37,7 @@ const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
 type PageMode = JsonToolsPageMode;
 
 export default function Index() {
-  const { t } = useLazyTranslation(['jsonDiff', 'jsonFormat']);
+  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
   // 1. 受控原始输入源

pages/Jwt/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { parseJwt, stringifyJson } from '@/utils/jwt';
 import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { cn } from '@/lib/utils';
 
@@ -15,7 +15,7 @@ interface SectionProps {
 }
 
 const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
-  const { t } = useLazyTranslation('jwt');
+  const { t } = useI18n('jwt');
   return (
     <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
       <div className="flex justify-between items-center mb-2 select-none">
@@ -39,7 +39,7 @@ const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionPr
 };
 
 export default function Index() {
-  const { t } = useLazyTranslation(['jwt', 'jsonFormat']);
+  const { t } = useI18n(['jwt', 'jsonFormat']);
   const [jwtInput, setJwtInput] = useState('');
 
   // 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
@@ -74,7 +74,7 @@ export default function Index() {
         <TextInputArea
           minRows={5}
           maxRows={10}
-          placeholder={t('jwt:placeholder')}
+          placeholder={t('jwt_placeholder')}
           value={jwtInput}
           onChange={(val) => {
             const cleaned = val.replace(/^Bearer\s*/i, '').trim();

pages/MarkdownToHtml/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Download, Printer, Trash2 } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { Button } from '@/components/ui/button';
@@ -82,7 +82,7 @@ const PREVIEW_STYLES = `
 `;
 
 export default function MarkdownToHtmlPage() {
-  const { t } = useLazyTranslation('markdownToHtml');
+  const { t } = useI18n('markdownToHtml');
   const [previewMode, setPreviewMode] = useStorageState(
     'markdownToHtml/previewMode',
     'split' as MarkdownToHtmlPreviewMode,

pages/QrCode/__tests__/index.test.tsx

@@ -11,15 +11,6 @@ vi.mock('lucide-react', async (importOriginal) => {
   };
 });
 
-// Mock useLazyTranslation
-vi.mock('@/utils/useLazyTranslation', () => ({
-  useLazyTranslation: () => ({
-    t: (key: string) => key,
-    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
-    isLoaded: true,
-  }),
-}));
-
 // Mock useSnackbar
 vi.mock('@/components/GlobalSnackbar', () => ({
   useSnackbar: () => ({
@@ -64,13 +55,13 @@ describe('QrCodePage', () => {
 
   it('应该渲染模式切换按钮', () => {
     render(<QrCodePage />);
-    expect(screen.getByText('qrCode:urlToQr')).toBeInTheDocument();
-    expect(screen.getByText('qrCode:qrToUrl')).toBeInTheDocument();
+    expect(screen.getByText('文本转二维码')).toBeInTheDocument();
+    expect(screen.getByText('二维码转文本')).toBeInTheDocument();
   });
 
   it('切换到解析模式应该渲染 ImageUploader', () => {
     render(<QrCodePage />);
-    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
+    fireEvent.click(screen.getByText('二维码转文本'));
     expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
     expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
@@ -78,16 +69,16 @@ describe('QrCodePage', () => {
   it('切换回生成模式应该渲染 QrCodePreview', () => {
     render(<QrCodePage />);
     // 先切换到解析模式
-    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
+    fireEvent.click(screen.getByText('二维码转文本'));
     expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
     // 再切换回生成模式
-    fireEvent.click(screen.getByText('qrCode:urlToQr'));
+    fireEvent.click(screen.getByText('文本转二维码'));
     expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
   });
 
   it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
     render(<QrCodePage />);
-    expect(screen.getByText('qrCode:urlInputLabel')).toBeInTheDocument();
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
   });
 
   it('应该渲染双翼响应式卡片网格布局', () => {

pages/QrCode/components/GeneratePanel.tsx

@@ -1,12 +1,12 @@
 import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 export default function GeneratePanel() {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
 
   return (

pages/QrCode/components/ParsePanel.tsx

@@ -2,13 +2,13 @@ import { useCallback, useEffect } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
 import { useSnackbar } from '@/components/GlobalSnackbar';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 export default function ParsePanel() {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { showMessage } = useSnackbar();
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 

pages/QrCode/hooks/useQrCode.ts

@@ -3,13 +3,13 @@ import QRious from 'qrious';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useDebounce } from '@/utils/useDebounce';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
 export function useQrCode(): QrCodeContextValue {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { showMessage } = useSnackbar();
 
   // 核心路由视图模式

pages/QrCode/index.tsx

@@ -1,6 +1,6 @@
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { QrCodeContext } from './contexts/QrCodeContext';
 import { useQrCode } from './hooks/useQrCode';
 import GeneratePanel from './components/GeneratePanel';
@@ -8,7 +8,7 @@ import ParsePanel from './components/ParsePanel';
 import type { QrCodeMode } from './types';
 
 export default function Index() {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const qrCode = useQrCode();
 
   // 模式选项驱动骨架

pages/RightClickRestorer/__tests__/index.test.tsx

@@ -26,7 +26,7 @@ describe('RightClickRestorerPage', () => {
 
   it('should render locked status', () => {
     render(<RightClickRestorerPage />);
-    expect(screen.getByText(/statusLocked/)).toBeInTheDocument();
+    expect(screen.getByText(/未解锁/)).toBeInTheDocument();
   });
 
   it('should call unlock when button clicked', () => {

pages/RightClickRestorer/index.tsx

@@ -3,10 +3,10 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
 import { useRightClickRestorer } from './useRightClickRestorer';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 export default function RightClickRestorerPage() {
-  const { t } = useLazyTranslation('rightClickRestorer');
+  const { t } = useI18n('rightClickRestorer');
   const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
 
   if (isLoading) {

pages/StorageCleaner/AutoRefreshToggle.tsx

@@ -14,7 +14,7 @@
  */
 
 import React from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
@@ -43,7 +43,7 @@ export default function AutoRefreshToggle({
   className,
   ...props
 }: AutoRefreshToggleProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   return (
     <div

pages/StorageCleaner/CleaningResult.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CheckCircle, XCircle } from 'lucide-react';
 import type { CleaningResult as CleaningResultType } from '@/types/storage';
 import { formatCleaningResult } from '@/utils/storageCleaner';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
 
 interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,7 +10,7 @@ interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   if (!result) return null;
 

pages/StorageCleaner/ErrorDisplay.tsx

@@ -1,5 +1,5 @@
 import { AlertCircle } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -7,7 +7,7 @@ interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   return (
     // 1. 精简层级：单层外壳直接搞定居中、响应式高度与外部类名扩展

pages/StorageCleaner/OptionItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formatSize } from '@/utils/storageCleaner';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 // 引入官方的 Checkbox 原子组件
 import { Checkbox } from '@/components/ui/checkbox';
@@ -22,7 +22,7 @@ export default function OptionItem({
   className,
   ...props
 }: OptionItemProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   return (
     <div

pages/StorageCleaner/StorageCleanerConfirm.tsx

@@ -10,7 +10,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
@@ -26,7 +26,7 @@ export function StorageCleanerConfirm({
   onConfirm,
   options,
 }: StorageCleanerConfirmProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   const selectedOptions = Object.entries(options)
     .filter(([_, value]) => value)
@@ -99,7 +99,7 @@ export function StorageCleanerConfirm({
             onClick={onClose}
             className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
           >
-            {t('common:buttons.cancel')}
+            {t('common_buttons_cancel')}
           </Button>
         </DialogFooter>
       </DialogContent>

pages/StorageCleaner/StorageOptionsGrid.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StorageCleanerOptions } from '@/types/storage';
 import OptionItem from './OptionItem';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 // 1. 引入官方标准的 Checkbox 原子组件
 import { Checkbox } from '@/components/ui/checkbox';
@@ -26,7 +26,7 @@ export default function StorageOptionsGrid({
   className,
   ...props
 }: StorageOptionsGridProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
     { key: 'localStorage' },

pages/StorageCleaner/index.tsx

@@ -6,10 +6,10 @@ import StorageOptionsGrid from './StorageOptionsGrid';
 import AutoRefreshToggle from './AutoRefreshToggle';
 import ErrorDisplay from './ErrorDisplay';
 import CleaningResult from './CleaningResult';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 export default function Index() {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   const {
     error,

pages/StorageCleaner/useStorageCleaner.ts

@@ -17,7 +17,7 @@ import {
   isRestrictedUrl,
 } from '@/utils/storageCleaner';
 import { MessageAction, sendMessage } from '@/utils/messages';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { toast } from 'sonner'; // 1. 直接引用 shadcn 推荐的 Sonner 单例通知，踢出回调依赖
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
@@ -56,7 +56,7 @@ export interface UseStorageCleanerReturn {
 }
 
 export function useStorageCleaner(): UseStorageCleanerReturn {
-  const { t } = useLazyTranslation(['storageCleaner', 'common']);
+  const { t } = useI18n(['storageCleaner', 'common']);
   const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [isInitializing, setIsInitializing] = useState<boolean>(true);

pages/TextStatistics/index.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import { formatByteSize, getTextStats } from '@/utils/textStatistics';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { cn } from '@/lib/utils';
 
 export default function Index() {
-  const { t } = useLazyTranslation('textStatistics');
+  const { t } = useI18n('textStatistics');
   const [text, setText] = useState('');
 
   const handleContextMenuData = useCallback((payload: string) => {

pages/Timestamp/LiveClock.tsx

@@ -3,7 +3,7 @@ import { Clock } from 'lucide-react';
 import CopyButton from '@/components/CopyButton';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import type { UnitType } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 引入标准的 shadcn 工具函数
 
 interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,7 +12,7 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
-  const { t } = useLazyTranslation('timestamp');
+  const { t } = useI18n('timestamp');
   const { showMessage } = useSnackbar();
   const onUseNowRef = useRef(onUseNow);
 

pages/Timestamp/ResultView.tsx

@@ -3,7 +3,7 @@ import dayjs from '@/utils/dayjs';
 import CopyButton from '@/components/CopyButton';
 import type { UnitType } from './constants';
 import { DATE_FORMAT } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // shadcn 核心类名合并工具
 
 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,7 +25,7 @@ const ResultView = React.memo(
     className,
     ...props
   }: ResultViewProps) => {
-    const { t } = useLazyTranslation('timestamp');
+    const { t } = useI18n('timestamp');
 
     // 严谨计算时间衍生的附加时区/相对时间状态
     const extraInfo = useMemo(() => {

pages/Timestamp/index.tsx

@@ -3,7 +3,7 @@ import { ZONES } from './constants';
 import LiveClock from './LiveClock';
 import ResultView from './ResultView';
 import { useTimestampConverter } from './useTimestampConverter';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 // 1. 引入标准的 shadcn/ui 原子表单组件（代替原生的原生 Input 和 Select）
@@ -17,7 +17,7 @@ import {
 } from '@/components/ui/select';
 
 export default function Index() {
-  const { t } = useLazyTranslation('timestamp');
+  const { t } = useI18n('timestamp');
 
   // 2. 完美对接全新重构后的统一单源响应式 Hook
   const {

pages/Timestamp/useTimestampConverter.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType } from './constants';
 import { DATE_FORMAT } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -26,7 +26,7 @@ function isTimestampLike(input: string): boolean {
 }
 
 export function useTimestampConverter(): UseTimestampConverterReturn {
-  const { t } = useLazyTranslation('timestamp');
+  const { t } = useI18n('timestamp');
   const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
   const [unit, setUnit] = useState<UnitType>('ms');
   const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');