fix(测试数据生成器): 修复 Worker 取消失效与规则存储静默失败

- 为生成任务引入 generationId，忽略过期 Worker 响应，避免取消后展示错误数据 - Worker 每 100 行让出事件循环，使 cancel 消息能被及时处理 - ruleStorage.setAll 返回写入结果，save/update/delete 在 QuotaExceeded 时返回失败 - 补充 useGenerator 与 ruleStorage 单元测试
develop (#68 )
2026-06-26 08:41:32 +00:00 · 2026-06-07 00:04:53 +08:00 · 2026-06-06 01:07:27 +08:00 · 2026-06-05 21:15:48 +08:00 · 2026-06-05 19:29:21 +08:00 · 2026-06-05 13:10:44 +08:00
96 changed files with 2918 additions and 927 deletions
@@ -1,17 +0,0 @@
-# CI/CD 配置
-
-## CI 步骤
-
-严格顺序，任一步骤失败则停止并标记 CI 失败：
-
-1. `setup`（安装依赖、`wxt prepare`）
-2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
-3. `build`（仅当步骤 2 全部成功时执行）
-
-## Pre-commit Hook
-
-`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交：
-
-1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
-2. 同一代码文件：运行 `prettier --write`
-3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
@@ -18,9 +18,27 @@ npm run test:watch       # vitest 监视模式
 npm run test:coverage    # 带覆盖率的测试
 ```

+运行单个测试: `npx vitest run path/to/file.test.ts`
+
 ## 验证流程

-详见 [CI 配置](./.github/CI.md)
+CI 步骤（严格顺序，任一步骤失败则停止并标记 CI 失败）：
+
+1. `setup`（安装依赖、`wxt prepare`）
+2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
+3. `build`（仅当步骤 2 全部成功时执行）
+
+Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交）：
+
+1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
+2. 同一代码文件：运行 `prettier --write`
+3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
+
+## WXT 生成文件
+
+- `.wxt/` 目录由 `postinstall` 自动执行 `wxt prepare` 生成，包含 TypeScript 类型声明和扩展的 tsconfig。
+- 生产构建输出到 `.output/` 目录。
+- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`。

 ## 项目结构

@@ -55,10 +73,41 @@ src/pages/FeatureName/

 - 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
 - Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
- 子组件可以独立调用全局 Hook
+- 子组件可以独立调用 `useI18n` 等全局 Hook
 - 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
 - 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录

+### 测试数据生成器模块
+
+```
+src/pages/TestDataGenerator/
+├── index.tsx                    # 主页面（字段配置 + 标签页切换）
+├── hooks/useGenerator.ts        # Web Worker 管理 Hook（创建、复用、通信、销毁）
+└── components/
+    ├── FieldList.tsx            # 字段列表（虚拟滚动 + @dnd-kit 拖拽排序 + 规则保存）
+    ├── FieldItem.tsx            # 字段卡片展示
+    ├── FieldEditor.tsx          # 字段编辑器（名称校验、生成器选择、参数配置）
+    ├── GeneratorSelector.tsx    # 生成器选择器（分类 + 搜索）
+    ├── GeneratorConfig.tsx      # 生成器参数表单（动态渲染 string/number/boolean/select/array）
+    ├── GenerateOptions.tsx      # 生成选项（数量、格式）
+    ├── GenerateButton.tsx       # 生成按钮 + 进度条
+    ├── DataPreview.tsx          # 示例数据预览（JSON 语法高亮）
+    ├── ResultPanel.tsx          # 生成结果状态面板
+    ├── ExportPanel.tsx          # 导出面板（复制/下载 JSON/CSV）
+    └── RuleManager.tsx          # 规则管理（CRUD、搜索、导入/导出）
+
+src/utils/
+├── ruleStorage.ts               # 规则持久化存储（localStorage）
+├── dataExporter.ts              # 数据导出工具（JSON/CSV 转换、下载、剪贴板）
+└── generators/                  # 内置生成器定义（个人信息、企业、技术、基础类型）
+
+src/workers/
+└── generator.worker.ts          # 数据生成 Web Worker
+
+src/types/
+└── testDataGenerator.ts         # 类型定义（FieldConfig, DataRule, GeneratorDefinition 等）
+```
+
 ## 关键架构决策

 **路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
@@ -67,6 +116,7 @@ src/pages/FeatureName/

 **存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
 使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
+修改 StorageSchema 时，必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。

 **通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。

@@ -82,21 +132,39 @@ src/pages/FeatureName/
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
  - `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
+  - `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
  - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
 - Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
 - 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试

+## i18n (chrome.i18n)
+
+项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化，通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
+
+- **翻译文件**: `public/_locales/{zh,en}/messages.json`（Chrome 扩展标准格式）
+- **默认语言**: `zh`（在 `wxt.config.ts` 的 `manifest.default_locale` 中配置）
+- **使用方式**: `import { useI18n } from '@/utils/chromeI18n'`
+- **翻译键格式**:
+  - 直接 key: `t('dashboard_title')` → 查找 `dashboard_title`
+  - 命名空间格式（兼容旧用法）: `t('common:buttons.search')` → 查找 `common_buttons_search`
+  - 带命名空间参数: `useI18n(['common', 'features'])`，会自动尝试 `common_key`、`features_key`
+- **占位符支持**: `t('router_notFoundDescription', { entryPointType: 'popup' })`
+- **Hook 返回值**: `{ t, i18n: { language, changeLanguage }, isLoaded }`
+- **回退策略**: 当翻译 key 未命中时，返回 key 本身（开发模式下在控制台记录 warning）
+- **限制**: `chrome.i18n` 无法动态切换语言，语言跟随浏览器设置，切换后需刷新页面
+
 ## 新功能开发清单

 1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
 2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
 3. 在 `src/pages/` 创建页面组件 (懒加载)：
-   - `index.tsx` — UI 组件
-   - `use{FeatureName}.ts` — 业务逻辑 Hook
+   - `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
+   - `useFeatureName.ts` — 业务逻辑 Hook
   - `constants.ts` — 常量（可选）
-4. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`；如有不使用的权限，需移除
-5. 添加对应的单元测试
+4. 在 `public/_locales/zh/messages.json`（及 `en/messages.json`）添加翻译
+5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
+6. 添加对应的单元测试

 ## 代码规范

@@ -108,7 +176,6 @@ src/pages/FeatureName/
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
 - **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
- **测试维护**: 新增/编辑已有功能/组件时，需要针对相关的测试进行更新

 ## 关键外部库（非显而易见的）

@@ -117,3 +184,4 @@ src/pages/FeatureName/
 - `qrious` + `qr-scanner` — 二维码生成与解析
 - `dayjs` — 日期处理（时间戳转换）
 - `sonner` — Toast 通知（替代传统 snackbar）
+- Web Worker — 批量数据生成（`src/workers/generator.worker.ts`），避免阻塞 UI 线程
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -4,6 +4,7 @@ import { copyTextToClipboard } from '@/utils/clipboard';
 import { cn } from '@/lib/utils';
 import { buttonVariants, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
+import { useI18n } from '@/utils/chromeI18n';

 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
  text: string;
@@ -18,6 +19,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
  className,
  ...props
 }) => {
+  const { t } = useI18n('common');
  const [copied, setCopied] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

@@ -31,18 +33,18 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
    e.stopPropagation();

    if (!text) {
-      toast.error('无内容可复制');
+      toast.error(t('messages.copyEmpty'));
      return;
    }

    const success = await copyTextToClipboard(text);
    if (success) {
-      toast.success('已复制到剪贴板');
+      toast.success(t('messages.copySuccess'));
      setCopied(true);
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setCopied(false), 1500);
    } else {
-      toast.error('复制失败');
+      toast.error(t('messages.copyError'));
    }
  };

@@ -50,8 +52,8 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
    <button
      type="button"
      onClick={handleCopy}
-      title={tooltip ?? '复制'}
-      aria-label={tooltip ?? '复制'}
+      title={tooltip ?? t('buttons.copy')}
+      aria-label={tooltip ?? t('buttons.copy')}
      className={cn(
        buttonVariants({ variant, size }),
        copied &&
@@ -0,0 +1,194 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+// unmock the globally-mocked component so we test the real implementation
+vi.unmock('@/components/CopyButton');
+
+vi.mock('@/utils/clipboard', () => ({
+  copyTextToClipboard: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import { CopyButton } from '@/components/CopyButton';
+import { copyTextToClipboard } from '@/utils/clipboard';
+import { toast } from 'sonner';
+
+const mockedCopy = vi.mocked(copyTextToClipboard);
+const mockedToast = vi.mocked(toast);
+
+describe('CopyButton', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="hello world" />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).toHaveBeenCalledWith('hello world');
+    expect(mockedToast.success).toHaveBeenCalled();
+  });
+
+  it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="test" />);
+
+    // 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
+    await user.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button').className).toContain('text-emerald');
+    });
+
+    // 1.5 秒后样式恢复
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button').className).not.toContain('text-emerald');
+    });
+  });
+
+  it('复制空文本时弹出 error toast', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="" />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).not.toHaveBeenCalled();
+    expect(mockedToast.error).toHaveBeenCalled();
+  });
+
+  it('复制失败时弹出 error toast', async () => {
+    mockedCopy.mockResolvedValue(false);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="something" />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).toHaveBeenCalledWith('something');
+    expect(mockedToast.error).toHaveBeenCalled();
+  });
+
+  // ==================== 新增测试 ====================
+
+  it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
+    render(<CopyButton text="initial" />);
+
+    const button = screen.getByRole('button');
+    expect(button.className).not.toContain('text-emerald');
+    // 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
+    expect(button).toHaveAttribute('aria-label');
+  });
+
+  it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
+    render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('title', '自定义提示');
+    expect(button).toHaveAttribute('aria-label', '自定义提示');
+  });
+
+  it('className 被正确透传到按钮', () => {
+    render(<CopyButton text="class-test" className="my-custom-class" />);
+
+    const button = screen.getByRole('button');
+    expect(button.className).toContain('my-custom-class');
+  });
+
+  it('点击事件阻止冒泡', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    const parentClick = vi.fn();
+
+    render(
+      <div onClick={parentClick}>
+        <CopyButton text="stop-propagation" />
+      </div>,
+    );
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).toHaveBeenCalled();
+    expect(parentClick).not.toHaveBeenCalled();
+  });
+
+  it('组件卸载时清除定时器，不触发状态更新警告', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    const { unmount } = render(<CopyButton text="unmount-test" />);
+
+    await user.click(screen.getByRole('button'));
+
+    // 在 1.5 秒超时到期前卸载组件
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
+    expect(() => unmount()).not.toThrow();
+
+    // 前进剩余时间，确认没有异常
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+  });
+
+  it('快速连续点击不会创建多个重叠定时器', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="rapid-click" />);
+
+    const button = screen.getByRole('button');
+
+    // 快速点击 3 次
+    await user.click(button);
+    await user.click(button);
+    await user.click(button);
+
+    // copyTextToClipboard 应该被调用 3 次（每次点击都执行）
+    expect(mockedCopy).toHaveBeenCalledTimes(3);
+
+    // 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
+    //  advance 1.5 秒后，copied 状态应恢复为 false
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    await waitFor(() => {
+      expect(button.className).not.toContain('text-emerald');
+    });
+  });
+
+  it('其他 button props 通过 ...props 透传', () => {
+    render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('data-testid', 'copy-btn');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('id', 'copy-button-id');
+  });
+});
@@ -9,9 +9,8 @@
 */
 import { Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { formatBytes } from '@/utils/format';
+import { formatFileSize } from '@/utils/base64Converter';
+import { useI18n } from '@/utils/chromeI18n';

 interface DecodeResultPaperProps {
  /** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
@@ -39,6 +38,8 @@ export default function DecodeResultPaper({
  onDownload,
  children,
 }: DecodeResultPaperProps) {
+  const { t } = useI18n('base64Converter');
+
  return (
    <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
      {/* 标题 */}
@@ -50,19 +51,24 @@ export default function DecodeResultPaper({
      {/* 文件信息 */}
      <div className="flex gap-4 mb-3">
        <span className="text-xs text-muted-foreground">
-          {'推断的 MIME 类型'}: {mimeType}
+          {t('inferredMimeType')}: {mimeType}
        </span>
        <span className="text-xs text-muted-foreground">
-          {'解码大小'}: {formatBytes(blobSize)}
+          {t('decodedSize')}: {formatFileSize(blobSize)}
        </span>
      </div>

      {/* 文件名输入 */}
      <div className="mb-3">
-        <Label className="block text-xs font-medium text-muted-foreground mb-1">
-          {'解码后文件名'}
-        </Label>
-        <Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
+        <label className="block text-xs font-medium text-muted-foreground mb-1">
+          {t('decodedFileName')}
+        </label>
+        <input
+          type="text"
+          value={fileName}
+          onChange={(e) => onFileNameChange(e.target.value)}
+          className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+        />
      </div>

      {/* 下载按钮 */}
@@ -73,7 +79,7 @@ export default function DecodeResultPaper({
        className="w-full rounded-lg font-bold"
      >
        <Download className="mr-2 h-4 w-4" />
-        {'下载'}
+        {t('download')}
      </Button>
    </div>
  );
@@ -1,6 +1,7 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { getMessage } from '@/utils/chromeI18n';

 interface Props {
  children: ReactNode;
@@ -43,9 +44,11 @@ class ErrorBoundary extends Component<Props, State> {
            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
              <AlertCircle className="h-8 w-8" />
            </div>
-            <h2 className="text-xl font-extrabold text-destructive mb-2">糟糕，出了点问题</h2>
+            <h2 className="text-xl font-extrabold text-destructive mb-2">
+              {getMessage('errorBoundary_title')}
+            </h2>
            <p className="text-sm text-muted-foreground mb-6">
-              应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
+              {getMessage('errorBoundary_description')}
            </p>
            {this.state.error && (
              <div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
@@ -60,7 +63,7 @@ class ErrorBoundary extends Component<Props, State> {
              className="rounded-lg font-bold shadow-sm"
            >
              <RefreshCw className="mr-2 h-4 w-4" />
-              刷新应用
+              {getMessage('errorBoundary_refresh')}
            </Button>
          </div>
        </div>
@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
+import { useI18n } from '@/utils/chromeI18n';

 interface ImageUploaderProps {
  /** 选中的文件 */
@@ -30,6 +29,7 @@ const ImageUploader = ({
  dragging,
  onDraggingChange,
 }: ImageUploaderProps) => {
+  const { t } = useI18n('qrCode');
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = useCallback(
@@ -45,8 +45,8 @@ const ImageUploader = ({
      URL.revokeObjectURL(previewUrl);
    }
    onClearFile();
-    toast.success('图片已清除');
-  }, [previewUrl, onClearFile]);
+    toast.success(t('qrCode:imageCleared'));
+  }, [previewUrl, onClearFile, t]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
@@ -86,10 +86,10 @@ const ImageUploader = ({
          if (file) {
            try {
              handleFileChange(file);
-              toast.success('图片粘贴成功，正在解析...');
+              toast.success(t('qrCode:imagePasted'));
            } catch (error) {
              console.error('处理粘贴图片失败:', error);
-              toast.error('粘贴图片失败，请重试');
+              toast.error(t('qrCode:imagePasteError'));
            }
          }
          break;
@@ -102,7 +102,7 @@ const ImageUploader = ({
    return () => {
      document.removeEventListener('paste', handlePaste);
    };
-  }, [handleFileChange]);
+  }, [handleFileChange, t]);

  return (
    <div
@@ -111,7 +111,7 @@ const ImageUploader = ({
          ? 'border-green-600 bg-green-50'
          : selectedFile
            ? 'border-green-600 bg-green-50/50'
-            : 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
+            : 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10/50'
      }`}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
@@ -125,7 +125,7 @@ const ImageUploader = ({
        className="hidden"
        id="qr-code-upload"
      />
-      <Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
+      <label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
        {selectedFile ? (
          <div className="text-center w-full relative">
            <div className="relative inline-block">
@@ -134,22 +134,20 @@ const ImageUploader = ({
                alt="QR Code Preview"
                className="max-w-full max-h-40 rounded-lg object-contain"
              />
-              <Button
+              <button
                type="button"
-                variant="destructive"
-                size="icon"
                data-testid="ClearIcon"
                onClick={(e) => {
                  e.stopPropagation();
                  handleClearFile();
                }}
-                className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
+                className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
              >
                <X className="w-3 h-3" />
-              </Button>
+              </button>
            </div>
            <span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
-            <span className="block text-xs text-muted-foreground">{'点击更换图片'}</span>
+            <span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
          </div>
        ) : (
          <>
@@ -158,14 +156,14 @@ const ImageUploader = ({
              className="w-12 h-12 text-muted-foreground mx-auto mb-2"
            />
            <span className="block text-sm text-muted-foreground mb-1">
-              {'点击、拖拽或粘贴上传二维码图片'}
+              {t('qrCode:clickToUpload')}
            </span>
            <span className="block text-xs text-muted-foreground">
-              {'支持 PNG、JPG、WEBP、Base64 格式'}
+              {t('qrCode:supportFormats')}
            </span>
          </>
        )}
-      </Label>
+      </label>
    </div>
  );
 };
@@ -1,6 +1,7 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { getMessage } from '@/utils/chromeI18n';

 interface Props {
  children: ReactNode;
@@ -45,9 +46,11 @@ class PageErrorBoundary extends Component<Props, State> {
              <AlertCircle className="h-6 w-6" />
            </div>

-            <h3 className="text-base font-semibold text-foreground mb-1.5">该功能运行异常</h3>
+            <h3 className="text-base font-semibold text-foreground mb-1.5">
+              {getMessage('pageErrorBoundary_title')}
+            </h3>
            <p className="text-xs text-muted-foreground mb-5">
-              该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。
+              {getMessage('pageErrorBoundary_description')}
            </p>

            {this.state.error && (
@@ -65,7 +68,7 @@ class PageErrorBoundary extends Component<Props, State> {
              className="font-medium shadow-sm"
            >
              <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-              重新尝试
+              {getMessage('errorBoundary_retry')}
            </Button>
          </div>
        </div>
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';

@@ -23,6 +24,8 @@ const QrCodePreview = ({
  className,
  ...props
 }: QrCodePreviewProps) => {
+  const { t } = useI18n('qrCode');
+
  // 空状态下的虚线骨架屏
  if (!qrCodeDataUrl) {
    return (
@@ -34,7 +37,7 @@ const QrCodePreview = ({
        {...props}
      >
        <p className="text-sm text-muted-foreground text-center">
-          {placeholderText || '二维码将显示在这里'}
+          {placeholderText || t('qrCode:qrCodeWillShow')}
        </p>
      </div>
    );
@@ -65,12 +68,12 @@ const QrCodePreview = ({
        <div className="flex w-full gap-2 mt-3">
          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
            <Download className="w-3.5 h-3.5 text-muted-foreground" />
-            <span className="truncate text-xs">{'下载二维码'}</span>
+            <span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
          </Button>

          <Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
            <Copy className="w-3.5 h-3.5" />
-            <span className="truncate text-xs">{'复制二维码'}</span>
+            <span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
          </Button>
        </div>
      </div>
@@ -1,6 +1,7 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
 import { Suspense } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils';
@@ -10,6 +11,7 @@ const entryPointType = getEntryPointType();

 export default function RouterContainer() {
  const { currentPage, isLoaded } = useRouter();
+  const { t } = useI18n('common');

  const animationClass =
    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
@@ -41,9 +43,9 @@ export default function RouterContainer() {
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
                <AlertTriangle className="h-6 w-6" />
              </div>
-              <h3 className="text-sm font-semibold text-foreground">{'页面未找到'}</h3>
+              <h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
              <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-                {`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
+                {t('router.notFoundDescription', { entryPointType })}
              </p>
            </div>
          )}
@@ -17,16 +17,6 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
  buttonClassName?: string;
 }

-const SIZE_CLASSES = {
-  small: 'text-xs h-8 px-2 py-1 rounded-md',
-  medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
-  large: 'text-base h-11 px-4 py-2 rounded-lg',
-} as const;
-
-const SELECTED_CLASSES =
-  'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
-const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
-
 export default function SwitchButtonGroup<T extends string | number = string>({
  value,
  options,
@@ -36,6 +26,12 @@ export default function SwitchButtonGroup<T extends string | number = string>({
  buttonClassName,
  ...props
 }: SwitchButtonGroupProps<T>) {
+  const sizeClasses = {
+    small: 'text-xs h-8 px-2 py-1 rounded-md',
+    medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
+    large: 'text-base h-11 px-4 py-2 rounded-lg',
+  };
+
  return (
    <div
      className={cn(
@@ -44,23 +40,29 @@ export default function SwitchButtonGroup<T extends string | number = string>({
      )}
      {...props}
    >
-      {options.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          onClick={() => onChange(option.value)}
-          className={cn(
-            'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
-            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
-            'disabled:pointer-events-none disabled:opacity-50',
-            SIZE_CLASSES[size],
-            value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
-            buttonClassName,
-          )}
-        >
-          {option.label}
-        </button>
-      ))}
+      {options.map((option) => {
+        const isSelected = value === option.value;
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => onChange(option.value)}
+            className={cn(
+              'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
+              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
+              'disabled:pointer-events-none disabled:opacity-50',
+              sizeClasses[size],
+              isSelected
+                ? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
+                : 'hover:bg-background/50 hover:text-foreground/80',
+              buttonClassName,
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
    </div>
  );
 }
@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { X } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
 import { CopyButton } from '@/components/CopyButton';
@@ -113,7 +114,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
  const [internalValue, setInternalValue] = useState(defaultValue);
  const [error, setError] = useState<string>('');

-  const placeholder = placeholderProp ?? '请输入文本';
+  const { t } = useI18n('common');
+  const placeholder = placeholderProp ?? t('textInputArea.placeholder');

  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
@@ -157,7 +159,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newVal = e.target.value;
    if (maxLength && newVal.length > maxLength) {
-      const msg = `内容不能超过 ${maxLength} 个字符`;
+      const msg = t('charCount', { count: maxLength });
      setError(msg);
      toast.warning(msg);
      return;
@@ -179,9 +181,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
    onChange?.('');
    setError('');
    internalRef.current?.focus();
-    toast.success('已清空');
+    toast.success(t('textInputArea.cleared'));
    onClear?.();
-  }, [isControlled, onChange, onClear]);
+  }, [isControlled, onChange, onClear, t]);

  const handleAction = useCallback(
    (action: ToolbarAction) => {
@@ -270,13 +272,18 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
            {/* 右侧系统按钮组 */}
            <div className="flex items-center gap-1.5 ml-auto shrink-0">
              {allowCopy && value && (
-                <CopyButton text={value} tooltip={'复制内容'} size="sm" className="h-7 w-7 p-1" />
+                <CopyButton
+                  text={value}
+                  tooltip={t('textInputArea.copyContent')}
+                  size="sm"
+                  className="h-7 w-7 p-1"
+                />
              )}
              {showClear && value && !disabled && !readOnly && (
                <button
                  type="button"
                  onClick={handleClear}
-                  aria-label={'清空'}
+                  aria-label={t('textInputArea.clear')}
                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                >
                  <X className="h-4 w-4" />
@@ -5,6 +5,7 @@ import { useThemeMode } from '@/providers/ThemeModeProvider';
 import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
 import { openExtensionPage } from '@/utils/chromeTabs';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 const SEARCH_HISTORY_LIMIT = 10;
@@ -13,6 +14,7 @@ const SEARCH_HISTORY_DISPLAY = 5;
 export default function TopBar() {
  const { currentPage, goBack, navigateTo } = useRouter();
  const { mode, setMode } = useThemeMode();
+  const { t } = useI18n(['common', 'features']);

  const [searchQuery, setSearchQuery] = useState('');
  const [showResults, setShowResults] = useState(false);
@@ -64,9 +66,12 @@ export default function TopBar() {
    if (!query) return [];
    return FEATURES.filter((f) => {
      if (f.key === 'dashboard') return false;
-      return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
+      return (
+        t(f.labelKey).toLowerCase().includes(query) ||
+        t(f.descriptionKey).toLowerCase().includes(query)
+      );
    });
-  }, [searchQuery]);
+  }, [searchQuery, t]);

  const displayedHistory = useMemo(() => {
    if (searchQuery.trim()) return [];
@@ -139,7 +144,7 @@ export default function TopBar() {
          <button
            type="button"
            onClick={goBack}
-            aria-label={'返回'}
+            aria-label={t('common_buttons_back')}
            className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
@@ -154,7 +159,7 @@ export default function TopBar() {
          <input
            ref={inputRef}
            type="text"
-            placeholder={'搜索工具...'}
+            placeholder={t('common_buttons_search')}
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value);
@@ -163,7 +168,7 @@ export default function TopBar() {
            }}
            onFocus={() => setShowResults(true)}
            onKeyDown={handleKeyDown}
-            aria-label={'搜索工具...'}
+            aria-label={t('common_buttons_search')}
            className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
          />
          {!searchQuery && (
@@ -178,7 +183,7 @@ export default function TopBar() {
                setSearchQuery('');
                setSelectedIndex(-1);
              }}
-              aria-label={'清除搜索'}
+              aria-label={t('common:buttons.clearSearch')}
              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
            >
              <X className="h-3 w-3" />
@@ -214,22 +219,24 @@ export default function TopBar() {
                        {feature.icon && <feature.icon className="h-4 w-4" />}
                      </div>
                      <div className="flex-1 min-w-0">
-                        <p className="font-medium text-foreground truncate">{feature.label}</p>
+                        <p className="font-medium text-foreground truncate">
+                          {t(feature.labelKey)}
+                        </p>
                        <p className="text-xs text-muted-foreground truncate mt-0.5">
-                          {feature.description}
+                          {t(feature.descriptionKey)}
                        </p>
                      </div>
                    </li>
                  ))
                ) : (
                  <li className="px-4 py-6 text-center text-sm text-muted-foreground">
-                    {'未找到相关工具'}
+                    {t('common:buttons.noResults')}
                  </li>
                )
              ) : (
                <>
                  <div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
-                    {'最近搜索'}
+                    {t('common:buttons.recentSearch')}
                  </div>
                  {displayedHistory.map((item, index) => (
                    <li
@@ -254,10 +261,10 @@ export default function TopBar() {
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-foreground truncate">
-                          {item.feature?.label}
+                          {item.feature && t(item.feature.labelKey)}
                        </p>
                        <p className="text-xs text-muted-foreground truncate mt-0.5">
-                          {item.feature?.description}
+                          {item.feature && t(item.feature.descriptionKey)}
                        </p>
                      </div>
                    </li>
@@ -271,19 +278,10 @@ export default function TopBar() {

      {/* 右侧：操作区 */}
      <div className="flex items-center gap-1 shrink-0">
-        <IconButton
-          onClick={cycleThemeMode}
-          title={
-            mode === 'light'
-              ? '切换到深色模式'
-              : mode === 'dark'
-                ? '切换到系统模式'
-                : '切换到浅色模式'
-          }
-        >
+        <IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
          <ThemeIcon className="h-4 w-4" />
        </IconButton>
-        <IconButton onClick={handleOpenInTab} title={'在标签页打开'}>
+        <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
          <ExternalLink className="h-4 w-4" />
        </IconButton>
      </div>
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import DecodeResultPaper from '../components/DecodeResultPaper';
+import DecodeResultPaper from '@/components/DecodeResultPaper';

 describe('DecodeResultPaper 组件', () => {
  const defaultProps = {
@@ -27,7 +27,7 @@ describe('DecodeResultPaper 组件', () => {
      expect(screen.getByText(/image\/png/)).toBeInTheDocument();
    });

-    it('应通过 formatBytes 渲染文件大小', () => {
+    it('应通过 formatFileSize 渲染文件大小', () => {
      render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
      expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
    });
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import ImageUploader from '../components/ImageUploader';
+import ImageUploader from '@/components/ImageUploader';

 // 配置多端一致性常驻桩（WXT 规范）
 const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import QrCodePreview from '../components/QrCodePreview';
+import QrCodePreview from '@/components/QrCodePreview';

 describe('QrCodePreview 组件', () => {
  const mockOnDownload = vi.fn();
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
+import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
 import type { StorageCleanerOptions } from '@/types/storage';
 import React from 'react';

@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {

    it('默认显示清空按钮', () => {
      render(<TextInputArea value="有内容" onChange={() => {}} />);
-      expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
    });

    it('无内容时清空按钮应隐藏', () => {
      render(<TextInputArea value="" onChange={() => {}} />);
-      expect(screen.queryByRole('button', { name: '清空' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
    });

    it('disabled 时清空按钮应隐藏', () => {
@@ -57,7 +57,7 @@ describe('TextInputArea 组件', () => {
      const handleChange = vi.fn();
      render(<TextInputArea value="内容" onChange={handleChange} />);

-      fireEvent.click(screen.getByRole('button', { name: '清空' }));
+      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));

      expect(handleChange).toHaveBeenCalledWith('');
    });
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
    it('清空按钮应清空内容', () => {
      render(<TextInputArea defaultValue="内容" />);

-      fireEvent.click(screen.getByRole('button', { name: '清空' }));
+      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));

      expect(screen.getByRole('textbox')).toHaveValue('');
    });
@@ -90,12 +90,14 @@ describe('TextInputArea 组件', () => {
  describe('allowCopy 复制功能', () => {
    it('allowCopy 且有内容时显示复制按钮', () => {
      render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
-      expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
    });

    it('allowCopy 但无内容时隐藏复制按钮', () => {
      render(<TextInputArea value="" onChange={() => {}} allowCopy />);
-      expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
+      ).not.toBeInTheDocument();
    });

    it('allowCopy=false 时不显示复制按钮', () => {
@@ -111,7 +113,7 @@ describe('TextInputArea 组件', () => {

      render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);

-      await user.click(screen.getByRole('button', { name: '复制内容' }));
+      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));

      expect(writeTextSpy).toHaveBeenCalledWith('测试');
    });
@@ -124,7 +126,7 @@ describe('TextInputArea 组件', () => {

      render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);

-      await user.click(screen.getByRole('button', { name: '复制内容' }));
+      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));

      expect(writeTextSpy).toHaveBeenCalledWith('测试');
    });
@@ -156,7 +158,6 @@ describe('TextInputArea 组件', () => {
      fireEvent.change(textarea, { target: { value: '123456' } });

      expect(handleChange).not.toHaveBeenCalledWith('123456');
-      expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
    });

    it('未超出 maxLength 的输入应正常触发', () => {
@@ -369,7 +370,7 @@ describe('TextInputArea 组件', () => {
      const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);

      render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
-      await user.click(screen.getByRole('button', { name: '复制内容' }));
+      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));

      expect(writeTextSpy).toHaveBeenCalledWith('测试');
    });
@@ -380,7 +381,7 @@ describe('TextInputArea 组件', () => {
      const handleClear = vi.fn();
      render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);

-      fireEvent.click(screen.getByRole('button', { name: '清空' }));
+      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));

      expect(handleClear).toHaveBeenCalledOnce();
    });
@@ -388,7 +389,7 @@ describe('TextInputArea 组件', () => {
    it('不传 onClear 时清空按钮应正常工作', () => {
      render(<TextInputArea defaultValue="内容" />);

-      fireEvent.click(screen.getByRole('button', { name: '清空' }));
+      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));

      expect(screen.getByRole('textbox')).toHaveValue('');
    });
@@ -16,13 +16,13 @@ describe('features', () => {
    it('should have all required properties for each feature', () => {
      FEATURES.forEach((feature) => {
        expect(feature).toHaveProperty('key');
-        expect(feature).toHaveProperty('label');
-        expect(feature).toHaveProperty('description');
+        expect(feature).toHaveProperty('labelKey');
+        expect(feature).toHaveProperty('descriptionKey');
        expect(feature).toHaveProperty('defaultVisible');
        expect(feature).toHaveProperty('components');
        expect(typeof feature.key).toBe('string');
-        expect(typeof feature.label).toBe('string');
-        expect(typeof feature.description).toBe('string');
+        expect(typeof feature.labelKey).toBe('string');
+        expect(typeof feature.descriptionKey).toBe('string');
        expect(typeof feature.defaultVisible).toBe('boolean');
        expect(typeof feature.components).toBe('object');
        expect(feature.components).toHaveProperty('popup');
@@ -50,14 +50,14 @@ describe('features', () => {
      const feature = getFeatureByKey('dashboard');
      expect(feature).toBeDefined();
      expect(feature?.key).toBe('dashboard');
-      expect(feature?.label).toBe('仪表盘');
+      expect(feature?.labelKey).toBe('dashboard_title');
    });

    it('should return timestamp feature', () => {
      const feature = getFeatureByKey('timestamp');
      expect(feature).toBeDefined();
      expect(feature?.key).toBe('timestamp');
-      expect(feature?.label).toBe('时间戳');
+      expect(feature?.labelKey).toBe('timestamp_title');
      expect(feature?.themeColorKey).toBeDefined();
    });

@@ -65,7 +65,7 @@ describe('features', () => {
      const feature = getFeatureByKey('storageCleaner');
      expect(feature).toBeDefined();
      expect(feature?.key).toBe('storageCleaner');
-      expect(feature?.label).toBe('存储清理');
+      expect(feature?.labelKey).toBe('storageCleaner_title');
    });

    it('should return undefined for invalid key', () => {
@@ -29,8 +29,8 @@ const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));

 export interface FeatureConfig {
  key: PageType;
-  label: string;
-  description: string;
+  labelKey: string;
+  descriptionKey: string;
  themeColorKey?: PaletteColorKey;
  icon?: ComponentType<LucideProps>;
  defaultVisible: boolean;
@@ -44,8 +44,8 @@ export interface FeatureConfig {
 export const FEATURES: FeatureConfig[] = [
  {
    key: 'dashboard',
-    label: '仪表盘',
-    description: '',
+    labelKey: 'dashboard_title',
+    descriptionKey: '',
    defaultVisible: true,
    components: {
      popup: DashboardPage,
@@ -55,8 +55,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'timestamp',
-    label: '时间戳',
-    description: 'Unix 毫秒数转换与格式化',
+    labelKey: 'timestamp_title',
+    descriptionKey: 'timestamp_description',
    themeColorKey: 'primary',
    icon: Clock,
    defaultVisible: true,
@@ -68,8 +68,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'storageCleaner',
-    label: '存储清理',
-    description: '清理缓存、Cookies 及本地存储',
+    labelKey: 'storageCleaner_title',
+    descriptionKey: 'storageCleaner_description',
    themeColorKey: 'warning',
    icon: Database,
    defaultVisible: true,
@@ -81,8 +81,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'qrCode',
-    label: '二维码工具',
-    description: '生成当前选中的 URL 的二维码',
+    labelKey: 'qrCode_title',
+    descriptionKey: 'qrCode_description',
    themeColorKey: 'success',
    icon: QrCode,
    defaultVisible: true,
@@ -94,8 +94,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'textStatistics',
-    label: '文本统计',
-    description: '实时分析文本字符、单词及字节',
+    labelKey: 'textStatistics_title',
+    descriptionKey: 'textStatistics_description',
    themeColorKey: 'secondary',
    icon: FileText,
    defaultVisible: true,
@@ -107,8 +107,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'jwt',
-    label: 'JWT 解析',
-    description: 'JSON Web Token 解码与查看',
+    labelKey: 'jwt_title',
+    descriptionKey: 'jwt_description',
    themeColorKey: 'info',
    icon: Key,
    defaultVisible: true,
@@ -120,8 +120,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'jsonDiff',
-    label: 'JSON 工具',
-    description: '差异比较、格式化、YAML/TOML 转换及压缩',
+    labelKey: 'jsonDiff_title',
+    descriptionKey: 'jsonDiff_description',
    themeColorKey: 'primary',
    icon: GitCompareArrows,
    defaultVisible: true,
@@ -133,8 +133,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'base64Converter',
-    label: 'Base64 转换器',
-    description: '文本、文件与图像的 Base64 编码转换',
+    labelKey: 'base64Converter_title',
+    descriptionKey: 'base64Converter_description',
    themeColorKey: 'info',
    icon: ArrowLeftRight,
    defaultVisible: true,
@@ -146,8 +146,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'rightClickRestorer',
-    label: '右键恢复',
-    description: '检测并恢复被网站禁用的浏览器右键菜单',
+    labelKey: 'rightClickRestorer_title',
+    descriptionKey: 'rightClickRestorer_description',
    themeColorKey: 'success',
    icon: MousePointerClick,
    defaultVisible: true,
@@ -159,8 +159,8 @@ export const FEATURES: FeatureConfig[] = [
  },
  {
    key: 'testDataGenerator',
-    label: '测试数据生成器',
-    description: '自定义规则批量生成测试数据',
+    labelKey: 'testDataGenerator_title',
+    descriptionKey: 'testDataGenerator_description',
    themeColorKey: 'warning',
    icon: FileSpreadsheet,
    defaultVisible: true,
@@ -36,7 +36,7 @@ describe('background 菜单注册与分流', () => {
      expect(chrome.contextMenus.create).toHaveBeenCalledWith(
        expect.objectContaining({
          id: 'jwt',
-          title: '解析 JWT',
+          title: '🔑 解析 JWT',
          parentId: 'testing-tools-parent',
        }),
      );
@@ -48,7 +48,7 @@ describe('background 菜单注册与分流', () => {
      expect(chrome.contextMenus.create).toHaveBeenCalledWith(
        expect.objectContaining({
          id: 'qrCode-page',
-          title: '网页链接转二维码',
+          title: '🔗 网页链接转二维码',
          contexts: ['page'],
        }),
      );
@@ -1,10 +1,11 @@
 import type { ContextMenuClickedPayload } from '@/utils/messages';
 import { MessageAction, onMessage } from '@/utils/messages';
 import { getTextStats } from '@/utils/textStatistics';
+import { getMessage } from '@/utils/chromeI18n';
 import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';

 function convertTimestamp(input: string): string {
-  const invalidText = '无效时间戳';
+  const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
  const num = Number(input.trim());

  if (isNaN(num)) {
@@ -1,14 +1,14 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
+import { useI18n } from '@/utils/chromeI18n';
 import { CopyButton } from '@/components/CopyButton';
-import DecodeResultPaper from './DecodeResultPaper';
+import DecodeResultPaper from '@/components/DecodeResultPaper';
 import { Button } from '@/components/ui/button';
-import { downloadBlob } from '@/utils/base64Converter';
-import { formatBytes } from '@/utils/format';
+import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConvertDirection } from '@/types/storage';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { useBase64Converter } from '../useBase64Converter';
+import { useBase64Converter } from './useBase64Converter';
 import { cn } from '@/lib/utils';

 const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
@@ -19,6 +19,8 @@ interface Base64ConverterSectionProps {
 }

 export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
+  const { t } = useI18n('base64Converter');
+
  const [direction, setDirection] = useStorageState(
    `base64Converter/${mode}Mode/direction`,
    'encode',
@@ -41,6 +43,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
    setCustomFileName,
    resetAll,
    safeFileSelect,
+    maxFileSizeStr,
  } = useBase64Converter({ mode });

  const handleDirectionChange = (next: Base64ConvertDirection) => {
@@ -59,8 +62,8 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
        <SwitchButtonGroup
          value={direction}
          options={[
-            { value: 'encode', label: '编码' },
-            { value: 'decode', label: '解码' },
+            { value: 'encode', label: t('encode') },
+            { value: 'decode', label: t('decode') },
          ]}
          onChange={handleDirectionChange}
          size="small"
@@ -119,10 +122,10 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                  {info.name}
                </span>
                <span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
-                  {formatBytes(info.size)} · {info.type}
+                  {formatFileSize(info.size)} · {info.type}
                </span>
                <span className="text-[11px] font-medium text-primary/80 mt-1">
-                  {'点击或拖拽以替换文件'}
+                  {t('clickOrDropToReplace')}
                </span>
              </div>
            ) : (
@@ -133,14 +136,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                  <Upload className="w-8 h-8 text-muted-foreground/60" />
                )}
                <span className="text-xs font-bold text-foreground/80">
-                  {mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
+                  {mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
                </span>
                <span className="text-[10px] font-medium text-muted-foreground/60">
-                  {'最大文件大小：{{max}}'}
+                  {t('maxFileSize', { max: maxFileSizeStr })}
                </span>
                {mode === 'image' && (
                  <span className="text-[10px] font-medium text-muted-foreground/50">
-                    {'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
+                    {t('supportedFormats')}
                  </span>
                )}
              </div>
@@ -157,17 +160,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
            <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
              <div className="flex justify-between items-center select-none">
                <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-                  {'Base64 编码结果'}
+                  {t('base64Output')}
                </span>
                <div className="flex gap-2">
                  <CopyButton
                    text={result.rawBase64}
-                    tooltip={'复制纯 Base64'}
+                    tooltip={t('copyRaw')}
                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
                  />
                  <CopyButton
                    text={result.output}
-                    tooltip={'复制 Data URI'}
+                    tooltip={t('copyDataUri')}
                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
                  />
                </div>
@@ -185,16 +188,16 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
              <div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
                <div className="flex gap-4 items-center tabular-nums">
                  <span>
-                    {'原始大小'}:{' '}
+                    {t('originalSize')}:{' '}
                    <span className="font-semibold text-foreground/80">
-                      {formatBytes(result.originalBytes)}
+                      {formatFileSize(result.originalBytes)}
                    </span>
                  </span>
                  <span className="text-border/60">|</span>
                  <span>
-                    {'编码大小'}:{' '}
+                    {t('encodedSize')}:{' '}
                    <span className="font-semibold text-foreground/80">
-                      {formatBytes(result.outputBytes)}
+                      {formatFileSize(result.outputBytes)}
                    </span>
                  </span>
                </div>
@@ -205,7 +208,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                  className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
                >
                  <Trash2 className="w-3.5 h-3.5" />
-                  {'清空'}
+                  {t('clear')}
                </Button>
              </div>
            </div>
@@ -214,7 +217,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
      ) : (
        <div className="flex flex-col space-y-4">
          <TextInputArea
-            placeholder={'输入需要解码的 Base64 或 data URI...'}
+            placeholder={t('decodeBase64Placeholder')}
            value={decodeInput}
            onChange={setDecodeInput}
            externalError={decodeError || undefined}
@@ -225,7 +228,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
          />
          {decoded && (
            <DecodeResultPaper
-              title={mode === 'image' ? '解码图像' : '解码文件'}
+              title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
              mimeType={decoded.mimeType}
              blobSize={decoded.blob.size}
              fileName={decodedFileName}
@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import TextInputArea from '@/components/TextInputArea';
+import { useI18n } from '@/utils/chromeI18n';
+import { CopyButton } from '@/components/CopyButton';
+import { base64ToText, textToBase64 } from '@/utils/base64Converter';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+import { Button } from '@/components/ui/button';
+
+const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
+
+const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
+  'Invalid Base64 string': 'invalidBase64',
+  'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
+    'binaryDataDetected',
+};
+
+interface TextModeProps {
+  onSwitchToImageMode?: () => void;
+}
+
+export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
+  const { t } = useI18n('base64Converter');
+
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+  const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    setInput(payload);
+    setDebouncedInput(payload);
+    setDirection('decode');
+  }, []);
+
+  useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
+
+  const conversionPipeline = useMemo(() => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed) return { output: '', error: null };
+
+    try {
+      if (direction === 'encode') {
+        const result = textToBase64(debouncedInput);
+        return { output: result.output, error: null };
+      } else {
+        const decoded = base64ToText(trimmed);
+        return { output: decoded, error: null };
+      }
+    } catch (e) {
+      const message = e instanceof Error ? e.message : '';
+      const i18nKey = ERROR_MESSAGE_TO_I18N[message];
+      return {
+        output: '',
+        error: i18nKey ? t(i18nKey) : message || t('conversionFailed'),
+      };
+    }
+  }, [debouncedInput, direction, t]);
+
+  const output = conversionPipeline.output;
+  const error = conversionPipeline.error;
+
+  const placeholder =
+    direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
+  const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
+
+  const showImageHint = useMemo(
+    () => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
+    [direction, input],
+  );
+
+  const handleDirectionChange = (value: 'encode' | 'decode') => {
+    if (value === direction) return;
+    setDirection(value);
+    setInput('');
+    setDebouncedInput('');
+  };
+
+  const handleClear = () => {
+    setInput('');
+    setDebouncedInput('');
+  };
+
+  return (
+    <div className="w-full flex flex-col space-y-4 px-2">
+      {/* 受控方向切流中枢 */}
+      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
+        <SwitchButtonGroup
+          value={direction}
+          options={[
+            { value: 'encode', label: t('encode') },
+            { value: 'decode', label: t('decode') },
+          ]}
+          onChange={handleDirectionChange}
+          size="small"
+        />
+      </div>
+
+      {/* 高性能受控文本输入端 */}
+      <TextInputArea
+        placeholder={placeholder}
+        value={input}
+        onChange={setInput}
+        externalError={error || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={5}
+        maxRows={10}
+        onClear={handleClear}
+      />
+
+      {/* 图片 URI 类型劫持警告引导区：
+        - 💡 修复点：彻底废除原生亮色硬编码 hover:bg-blue-100 类名，
+        - 完美向全站 shadcn 暗黑生态看齐，采用标准的 bg-primary/10 混合变体。
+      */}
+      {showImageHint && (
+        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
+          <span className="text-xs font-semibold text-primary tracking-tight">
+            {t('imageDataUriHint')}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onSwitchToImageMode}
+            className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
+          >
+            {t('switchToImageMode')}
+          </Button>
+        </div>
+      )}
+
+      {/* 5. 编码/解码核心数据承载流卡片 */}
+      {output && (
+        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
+          <div className="flex justify-between items-center select-none">
+            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
+              {outputLabel}
+            </span>
+            <CopyButton
+              text={output}
+              className="h-6 px-2 rounded-md border text-[10px] font-bold"
+            />
+          </div>
+
+          <TextInputArea
+            readOnly
+            value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
+            showClear={false}
+            minRows={4}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import TextMode from '../components/TextMode';
+import TextMode from '../TextMode';

 // Mock CopyButton
 vi.mock('@/components/CopyButton', () => ({
@@ -76,7 +76,7 @@ describe('TextMode', () => {
    });

    await waitFor(() => {
-      expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
+      expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
    });
  });

@@ -118,7 +118,7 @@ describe('TextMode', () => {
      expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
    });

-    fireEvent.click(screen.getByRole('button', { name: '清空' }));
+    fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));

    await waitFor(() => {
      expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
@@ -182,7 +182,9 @@ describe('TextMode', () => {
    });

    await waitFor(() => {
-      expect(screen.getByText('检测到二进制数据（如图像），请使用图像选项卡')).toBeInTheDocument();
+      expect(
+        screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
+      ).toBeInTheDocument();
    });
  });
 });
@@ -12,7 +12,7 @@ vi.mock('@/config/features', async (importOriginal) => {
 });

 // Mock 子组件
-vi.mock('../components/TextMode', () => ({
+vi.mock('../TextMode', () => ({
  default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
    <div data-testid="text-mode">
      TextMode
@@ -21,7 +21,7 @@ vi.mock('../components/TextMode', () => ({
  ),
 }));

-vi.mock('../components/Base64ConverterSection', () => ({
+vi.mock('../Base64ConverterSection', () => ({
  default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
 }));

@@ -1,90 +0,0 @@
-import TextInputArea from '@/components/TextInputArea';
-import { CopyButton } from '@/components/CopyButton';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { Button } from '@/components/ui/button';
-import { useTextMode } from '../useTextMode';
-
-interface TextModeProps {
-  onSwitchToImageMode?: () => void;
-}
-
-export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
-  const {
-    input,
-    setInput,
-    direction,
-    handleDirectionChange,
-    placeholder,
-    output,
-    outputLabel,
-    error,
-    showImageHint,
-    handleClear,
-  } = useTextMode();
-
-  return (
-    <div className="w-full flex flex-col space-y-4 px-2">
-      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
-        <SwitchButtonGroup
-          value={direction}
-          options={[
-            { value: 'encode', label: '编码' },
-            { value: 'decode', label: '解码' },
-          ]}
-          onChange={handleDirectionChange}
-          size="small"
-        />
-      </div>
-
-      <TextInputArea
-        placeholder={placeholder}
-        value={input}
-        onChange={setInput}
-        externalError={error || undefined}
-        showClear={true}
-        allowCopy={true}
-        minRows={5}
-        maxRows={10}
-        onClear={handleClear}
-      />
-
-      {showImageHint && (
-        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
-          <span className="text-xs font-semibold text-primary tracking-tight">
-            检测到图片的 data URI，请使用「图像」选项卡进行解码。
-          </span>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={onSwitchToImageMode}
-            className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
-          >
-            切换到图像模式
-          </Button>
-        </div>
-      )}
-
-      {output && (
-        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
-          <div className="flex justify-between items-center select-none">
-            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-              {outputLabel}
-            </span>
-            <CopyButton
-              text={output}
-              className="h-6 px-2 rounded-md border text-[10px] font-bold"
-            />
-          </div>
-
-          <TextInputArea
-            readOnly
-            value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
-            showClear={false}
-            minRows={4}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
@@ -1,7 +1,8 @@
+import { useI18n } from '@/utils/chromeI18n';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConverterPageMode } from '@/types/storage';
-import TextMode from './components/TextMode';
-import Base64ConverterSection from './components/Base64ConverterSection';
+import TextMode from './TextMode';
+import Base64ConverterSection from './Base64ConverterSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';

 const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
@@ -11,6 +12,7 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
 type PageMode = Base64ConverterPageMode;

 export default function Index() {
+  const { t } = useI18n('base64Converter');
  const [pageMode, setPageMode] = useStorageState(
    'base64Converter/pageMode',
    'text',
@@ -22,9 +24,9 @@ export default function Index() {
      <SwitchButtonGroup
        value={pageMode}
        options={[
-          { value: 'text', label: '文本' },
-          { value: 'file', label: '文件' },
-          { value: 'image', label: '图像' },
+          { value: 'text', label: t('base64Converter:textMode') },
+          { value: 'file', label: t('base64Converter:fileMode') },
+          { value: 'image', label: t('base64Converter:imageMode') },
        ]}
        onChange={(value: PageMode) => setPageMode(value)}
        size="small"
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import type { FileToBase64Result } from '@/utils/base64Converter';
 import {
  base64ToBlob,
@@ -20,6 +21,8 @@ interface UseBase64ConverterProps {
 }

 export function useBase64Converter({ mode }: UseBase64ConverterProps) {
+  const { t } = useI18n('base64Converter');
+
  const [result, setResult] = useState<FileToBase64Result | null>(null);
  const [info, setInfo] = useState<FileInfo | null>(null);
  const [isLoading, setIsLoading] = useState(false);
@@ -59,7 +62,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
      setInfo(null);

      if (!isFileSizeValid(file.size)) {
-        setEncodeError(`文件大小超出限制（最大 ${MAX_FILE_SIZE / 1024 / 1024} MB）`);
+        setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
        return;
      }

@@ -68,7 +71,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
        !isSupportedImageType(file.type) &&
        !isSupportedImageExtension(file.name)
      ) {
-        setEncodeError('不支持的图像格式');
+        setEncodeError(t('unsupportedImageType'));
        return;
      }

@@ -84,13 +87,13 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
        if (!cancelRef.current) setResult(res);
      } catch (e) {
        if (!cancelRef.current) {
-          setEncodeError(e instanceof Error ? e.message : '转换失败');
+          setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
        }
      } finally {
        if (!cancelRef.current) setIsLoading(false);
      }
    },
-    [mode],
+    [mode, t],
  );

  const safeFileSelect = useCallback(
@@ -113,10 +116,10 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
      const message = e instanceof Error ? e.message : '';
      return {
        decoded: null,
-        error: message === 'Invalid Base64 string' ? 'Base64 字符串无效' : '转换失败',
+        error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
      };
    }
-  }, [debouncedDecodeInput]);
+  }, [debouncedDecodeInput, t]);

  const decoded = decodePipeline.decoded;
  const decodeError = decodePipeline.error;
@@ -1,91 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { base64ToText, textToBase64 } from '@/utils/base64Converter';
-import { useContextMenuData } from '@/utils/useContextMenuData';
-
-const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
-
-const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
-  'Invalid Base64 string': '无效的 Base64 字符串',
-  'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
-    '检测到二进制数据（如图像），请使用图像选项卡',
-};
-
-export function useTextMode() {
-  const [input, setInput] = useState('');
-  const [debouncedInput, setDebouncedInput] = useState('');
-  const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 200);
-    return () => clearTimeout(handle);
-  }, [input]);
-
-  const handleContextMenuData = useCallback((payload: string) => {
-    setInput(payload);
-    setDebouncedInput(payload);
-    setDirection('decode');
-  }, []);
-
-  useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
-
-  const conversionPipeline = useMemo(() => {
-    const trimmed = debouncedInput.trim();
-    if (!trimmed) return { output: '', error: null };
-
-    try {
-      if (direction === 'encode') {
-        const result = textToBase64(debouncedInput);
-        return { output: result.output, error: null };
-      } else {
-        const decoded = base64ToText(trimmed);
-        return { output: decoded, error: null };
-      }
-    } catch (e) {
-      const message = e instanceof Error ? e.message : '';
-      const i18nKey = ERROR_MESSAGE_TO_I18N[message];
-      return {
-        output: '',
-        error: i18nKey || message || '转换失败',
-      };
-    }
-  }, [debouncedInput, direction]);
-
-  const output = conversionPipeline.output;
-  const error = conversionPipeline.error;
-
-  const placeholder =
-    direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
-  const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
-
-  const showImageHint = useMemo(
-    () => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
-    [direction, input],
-  );
-
-  const handleDirectionChange = (value: 'encode' | 'decode') => {
-    if (value === direction) return;
-    setDirection(value);
-    setInput('');
-    setDebouncedInput('');
-  };
-
-  const handleClear = () => {
-    setInput('');
-    setDebouncedInput('');
-  };
-
-  return {
-    input,
-    setInput,
-    direction,
-    handleDirectionChange,
-    placeholder,
-    output,
-    outputLabel,
-    error,
-    showImageHint,
-    handleClear,
-  };
-}
@@ -1,10 +1,12 @@
 import { useRouter } from '@/providers/RouterProvider';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 export default function Index() {
  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
+  const { t } = useI18n(['features']);

  const visibleSet = new Set<string>(visiblePages);

@@ -26,7 +28,7 @@ export default function Index() {
      {showRecent && (
        <div className="flex flex-col gap-2">
          <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-            {'最近使用'}
+            {t('dashboard_recentlyUsed')}
          </h3>
          <div className="flex flex-wrap gap-2">
            {recentFeatures.map(({ key, feature }) => {
@@ -44,7 +46,7 @@ export default function Index() {
                  )}
                >
                  <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
-                  {feature!.label}
+                  {t(feature!.labelKey)}
                </button>
              );
            })}
@@ -55,7 +57,7 @@ export default function Index() {
      {/* 全部工具 — 紧凑 Grid */}
      <div className="flex flex-col gap-2">
        <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-          {'全部工具'}
+          {t('dashboard_allTools')}
        </h3>
        <div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
          {visibleFeatures.map(({ key, feature }) => {
@@ -80,7 +82,7 @@ export default function Index() {
                  )}
                />
                <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
-                  {feature!.label}
+                  {t(feature!.labelKey)}
                </span>
              </button>
            );
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,6 +19,8 @@ export default function DiffNavigator({
  className,
  ...props
 }: DiffNavigatorProps) {
+  const { t } = useI18n('jsonDiff');
+
  const isFirst = currentIndex <= 0;
  const isLast = currentIndex >= total - 1;

@@ -30,7 +33,9 @@ export default function DiffNavigator({
        )}
        {...props}
      >
-        <span className="text-xs font-semibold text-muted-foreground/90">{'无差异'}</span>
+        <span className="text-xs font-semibold text-muted-foreground/90">
+          {t('jsonDiff:noDiffs')}
+        </span>
      </div>
    );
  }
@@ -47,7 +52,7 @@ export default function DiffNavigator({
      <button
        type="button"
        disabled={isFirst}
-        aria-label={'上一个'}
+        aria-label={t('jsonDiff:previousDiff')}
        onClick={onPrev}
        className={cn(
          'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
@@ -67,7 +72,7 @@ export default function DiffNavigator({
      <button
        type="button"
        disabled={isLast}
-        aria-label={'下一个'}
+        aria-label={t('jsonDiff:nextDiff')}
        onClick={onNext}
        className={cn(
          'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
@@ -1,7 +1,8 @@
 import React from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import JsonTree from './JsonTree';
-import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from '../types';
+import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';

 export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
  result: DiffResultType;
@@ -16,6 +17,8 @@ export default function DiffResult({
  className,
  ...props
 }: DiffResultProps) {
+  const { t } = useI18n('jsonDiff');
+
  if (viewMode === 'sideBySide') {
    return (
      <div
@@ -23,11 +26,11 @@ export default function DiffResult({
        {...props}
      >
        <div className="flex-1 min-w-0">
-          <SectionLabel text={'原始 JSON'} />
+          <SectionLabel text={t('jsonDiff:leftLabel')} />
          <JsonTree node={result.root} side="left" activePath={activePath} />
        </div>
        <div className="flex-1 min-w-0">
-          <SectionLabel text={'目标 JSON'} />
+          <SectionLabel text={t('jsonDiff:rightLabel')} />
          <JsonTree node={result.root} side="right" activePath={activePath} />
        </div>
      </div>
@@ -1,31 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import { formatBytes } from '@/utils/format';
 import { CopyButton } from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';
-import type { ConvertFunction, ConvertResult } from '../types';

-const CONVERT_LABELS: Record<
-  string,
-  { inputPlaceholder: string; outputLabel: string; emptyHint: string }
-> = {
-  yaml: {
-    inputPlaceholder: '输入需要转换的 JSON...',
-    outputLabel: 'YAML 结果',
-    emptyHint: '输入 JSON 后点击转换',
-  },
-  toml: {
-    inputPlaceholder: '输入需要转换的 JSON...',
-    outputLabel: 'TOML 结果',
-    emptyHint: '输入 JSON 后点击转换',
-  },
-  minify: {
-    inputPlaceholder: '输入需要压缩的 JSON...',
-    outputLabel: '压缩结果',
-    emptyHint: '输入 JSON 后点击压缩',
-  },
-};
+export interface ConvertResult {
+  output: string;
+  originalBytes: number;
+  outputBytes: number;
+}
+
+export type ConvertFunction = (text: string) => ConvertResult;

 interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  translationPrefix: string;
@@ -38,11 +25,12 @@ export default function JsonConvertSection({
  className,
  ...props
 }: JsonConvertSectionProps) {
+  const { t } = useI18n('jsonFormat');
+
  const [input, setInput] = useState('');
  const [debouncedInput, setDebouncedInput] = useState('');

  const pk = translationPrefix;
-  const labels = CONVERT_LABELS[pk] || CONVERT_LABELS.yaml;

  // Debounce input
  useEffect(() => {
@@ -84,7 +72,7 @@ export default function JsonConvertSection({
    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
      {/* 输入区 */}
      <TextInputArea
-        placeholder={labels.inputPlaceholder}
+        placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
        value={input}
        onChange={setInput}
        externalError={error || runtimeError || undefined}
@@ -101,19 +89,19 @@ export default function JsonConvertSection({
          <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
            <div className="flex gap-4 items-center">
              <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-                {labels.outputLabel}
+                {t(`jsonFormat:${pk}OutputLabel`)}
              </span>

              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
                <span>
-                  {'原始大小'}:{' '}
+                  {t('jsonFormat:originalSize')}:{' '}
                  <span className="font-semibold text-foreground/80">
                    {formatBytes(result.originalBytes)}
                  </span>
                </span>
                <span className="text-border/60">|</span>
                <span>
-                  {'格式化后大小'}:{' '}
+                  {t('jsonFormat:formattedSize')}:{' '}
                  <span className="font-semibold text-foreground/80">
                    {formatBytes(result.outputBytes)}
                  </span>
@@ -134,7 +122,7 @@ export default function JsonConvertSection({
      ) : (
        <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
          <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
-            {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
+            {error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
          </p>
        </div>
      )}
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import {
  formatJson,
  type JsonFormatOptions,
@@ -13,6 +14,8 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';

 export default function JsonFormatSection() {
+  const { t } = useI18n('jsonFormat');
+
  const [input, setInput] = useState('');
  const [debouncedInput, setDebouncedInput] = useState('');
  const [indentSize, setIndentSize] = useState<number>(2);
@@ -63,7 +66,7 @@ export default function JsonFormatSection() {
          {/* 缩进配置区 */}
          <div className="flex gap-2 items-center shrink-0 select-none">
            <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-              {'缩进'}
+              {t('jsonFormat:indentSize')}
            </span>
            <SwitchButtonGroup
              value={indentSize}
@@ -91,7 +94,7 @@ export default function JsonFormatSection() {
              htmlFor="sort-keys-checkbox"
              className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
            >
-              {'键名排序'}
+              {t('jsonFormat:sortKeys')}
            </Label>
          </div>
        </div>
@@ -99,7 +102,7 @@ export default function JsonFormatSection() {

      {/* 满血版输入终端 */}
      <TextInputArea
-        placeholder={'输入需要格式化的 JSON...'}
+        placeholder={t('jsonFormat:inputPlaceholder')}
        value={input}
        onChange={setInput}
        externalError={error || runtimeError || undefined}
@@ -117,19 +120,19 @@ export default function JsonFormatSection() {
          <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
            <div className="flex gap-4 items-center">
              <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-                {'格式化结果'}
+                {t('jsonFormat:outputLabel')}
              </span>

              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
                <span>
-                  {'原始大小'}:{' '}
+                  {t('jsonFormat:originalSize')}:{' '}
                  <span className="font-semibold text-foreground/80">
                    {formatBytes(result.originalBytes)}
                  </span>
                </span>
                <span className="text-border/60">|</span>
                <span>
-                  {'格式化后大小'}:{' '}
+                  {t('jsonFormat:formattedSize')}:{' '}
                  <span className="font-semibold text-foreground/80">
                    {formatBytes(result.formattedBytes)}
                  </span>
@@ -151,7 +154,7 @@ export default function JsonFormatSection() {
        /* 空状态指示引导区 */
        <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
          <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
-            {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
+            {error ? t('jsonFormat:fixErrorHint') : t('jsonFormat:emptyHint')}
          </p>
        </div>
      )}
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
-import type { DiffNode, DiffType } from '../types';
+import type { DiffNode, DiffType } from './types';
 import { cn } from '@/lib/utils';

 export type TreeSide = 'left' | 'right';
@@ -1,11 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import Index from '../index';
-
-describe('JsonTools 页面', () => {
-  it('应该渲染模式切换按钮', () => {
-    render(<Index />);
-    // 基本渲染测试：页面含多个模式切换按钮，应至少渲染一个
-    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
-  });
-});
@@ -1,4 +1,4 @@
-import type { DiffNode, DiffResult, DiffType } from '@/pages/JsonTools/types';
+import type { DiffNode, DiffResult, DiffType } from './types';

 const ROOT_PATH = '$';
 const SENTINEL = Symbol('missing');
@@ -1,8 +1,9 @@
-import JsonDiffInput from './components/JsonDiffInput';
-import DiffResult from './components/DiffResult';
-import DiffNavigator from './components/DiffNavigator';
-import JsonFormatSection from './components/JsonFormatSection';
-import JsonConvertSection from './components/JsonConvertSection';
+import { useI18n } from '@/utils/chromeI18n';
+import JsonDiffInput from './JsonDiffInput';
+import DiffResult from './DiffResult';
+import DiffNavigator from './DiffNavigator';
+import JsonFormatSection from './JsonFormatSection';
+import JsonConvertSection from './JsonConvertSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { useJsonTools } from './useJsonTools';
 import type { JsonToolsPageMode } from '@/types/storage';
@@ -11,6 +12,7 @@ import type { ViewMode } from './types';
 type PageMode = JsonToolsPageMode;

 export default function Index() {
+  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
  const {
    pageMode,
    setPageMode,
@@ -39,11 +41,11 @@ export default function Index() {
        value={pageMode}
        onChange={(v: PageMode) => setPageMode(v)}
        options={[
-          { value: 'diff', label: '差异比较' },
-          { value: 'format', label: '格式化' },
-          { value: 'yaml', label: 'YAML' },
-          { value: 'toml', label: 'TOML' },
-          { value: 'minify', label: '压缩' },
+          { value: 'diff', label: t('jsonFormat:diffMode') },
+          { value: 'format', label: t('jsonFormat:formatMode') },
+          { value: 'yaml', label: t('jsonFormat:yamlMode') },
+          { value: 'toml', label: t('jsonFormat:tomlMode') },
+          { value: 'minify', label: t('jsonFormat:minifyMode') },
        ]}
        size="small"
        className="w-full sm:w-auto"
@@ -56,8 +58,8 @@ export default function Index() {
              value={viewMode}
              onChange={(v: ViewMode) => setViewMode(v)}
              options={[
-                { value: 'sideBySide', label: '并排' },
-                { value: 'unified', label: '统一' },
+                { value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
+                { value: 'unified', label: t('jsonDiff:unifiedMode') },
              ]}
              size="small"
            />
@@ -65,16 +67,16 @@ export default function Index() {

          <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
            <JsonDiffInput
-              label={'原始 JSON'}
-              placeholder={'输入原始 JSON...'}
+              label={t('jsonDiff:leftLabel')}
+              placeholder={t('jsonDiff:leftPlaceholder')}
              value={leftInput}
              onChange={setLeftInput}
              error={leftError}
              minRows={9}
            />
            <JsonDiffInput
-              label={'目标 JSON'}
-              placeholder={'输入目标 JSON...'}
+              label={t('jsonDiff:rightLabel')}
+              placeholder={t('jsonDiff:rightPlaceholder')}
              value={rightInput}
              onChange={setRightInput}
              error={rightError}
@@ -97,9 +99,7 @@ export default function Index() {
          ) : (
            <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
              <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
-                {leftError || rightError
-                  ? '请修正上方 JSON 的语法错误以开启实时流式比对'
-                  : '输入两侧 JSON 后点击比较'}
+                {leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
              </p>
            </div>
          )}
@@ -53,13 +53,3 @@ export interface DiffResult {
  /** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */
  diffCount: number;
 }
-
-/** JSON 转换结果 */
-export interface ConvertResult {
-  output: string;
-  originalBytes: number;
-  outputBytes: number;
-}
-
-/** JSON 转换函数类型 */
-export type ConvertFunction = (text: string) => ConvertResult;
@@ -1,12 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import { useStorageState } from '@/utils/useStorageState';
-import { diffJson } from '@/utils/diffEngine';
+import { diffJson } from './diffEngine';
 import { jsonToYaml } from '@/utils/jsonToYaml';
 import { jsonToToml } from '@/utils/jsonToToml';
 import { minifyJson } from '@/utils/jsonFormatter';
 import { isValidPageMode, tryParse } from './constants';
 import type { JsonToolsPageMode } from '@/types/storage';
-import type { ConvertFunction, ViewMode } from './types';
+import type { ConvertFunction } from './JsonConvertSection';
+import type { ViewMode } from './types';

 export interface UseJsonToolsReturn {
  pageMode: JsonToolsPageMode;
@@ -33,6 +35,7 @@ export interface UseJsonToolsReturn {
 }

 export function useJsonTools(): UseJsonToolsReturn {
+  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
  const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);

  // Diff inputs
@@ -52,12 +55,12 @@ export function useJsonTools(): UseJsonToolsReturn {

  // Parse debounced inputs
  const parseState = useMemo(() => {
-    const invalidMsg = '无效的 JSON 格式';
+    const invalidMsg = t('jsonDiff:invalidJson');
    return {
      left: tryParse(debouncedLeft, invalidMsg),
      right: tryParse(debouncedRight, invalidMsg),
    };
-  }, [debouncedLeft, debouncedRight]);
+  }, [debouncedLeft, debouncedRight, t]);

  const leftError = parseState.left.error;
  const rightError = parseState.right.error;
@@ -1,4 +1,5 @@
 import { CopyButton } from '@/components/CopyButton';
+import { useI18n } from '@/utils/chromeI18n';
 import { stringifyJson } from '@/utils/jwt';
 import { cn } from '@/lib/utils';

@@ -17,6 +18,7 @@ export default function JwtSection({
  bgClass,
  borderClass,
 }: JwtSectionProps) {
+  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">
@@ -29,7 +31,7 @@ export default function JwtSection({
        />
      </div>
      <pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
-        {content ? stringifyJson(content) : '无法解析'}
+        {content ? stringifyJson(content) : t('jwt:invalidFormat')}
      </pre>
    </div>
  );
@@ -2,8 +2,10 @@ import TextInputArea from '@/components/TextInputArea';
 import { CopyButton } from '@/components/CopyButton';
 import JwtSection from './JwtSection';
 import { useJwt } from './useJwt';
+import { useI18n } from '@/utils/chromeI18n';

 export default function Index() {
+  const { t } = useI18n(['jwt', 'jsonFormat']);
  const { jwtInput, result, handleChange, handleClear } = useJwt();

  return (
@@ -12,7 +14,7 @@ export default function Index() {
        <TextInputArea
          minRows={5}
          maxRows={10}
-          placeholder={'在此粘贴 JWT 令牌 (Encoded JWT)...'}
+          placeholder={t('jwt_placeholder')}
          value={jwtInput}
          onChange={handleChange}
          allowCopy={true}
@@ -24,7 +26,7 @@ export default function Index() {
        {result && !result.error && (
          <div className="flex flex-col gap-4">
            <JwtSection
-              title={'HEADER: 算法 & 令牌类型'}
+              title={t('jwt:headerTitle')}
              content={result.header}
              colorClass="text-[#fb015b] dark:text-rose-400"
              borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
@@ -32,7 +34,7 @@ export default function Index() {
            />

            <JwtSection
-              title={'PAYLOAD: 数据'}
+              title={t('jwt:payloadTitle')}
              content={result.payload}
              colorClass="text-[#a03aff] dark:text-purple-400"
              borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
@@ -42,7 +44,7 @@ export default function Index() {
            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
-                  {'签名'}
+                  {t('jwt:signatureTitle')}
                </span>
                <CopyButton
                  text={result.signature || ''}
@@ -50,7 +52,7 @@ export default function Index() {
                />
              </div>
              <span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
-                {result.signature || '无签名'}
+                {result.signature || t('jwt:noSignature')}
              </span>
            </div>
          </div>
@@ -58,7 +60,9 @@ export default function Index() {

        {result?.error && (
          <div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
-            <p className="text-xs font-semibold text-muted-foreground/80">{'无效的 JSON 格式'}</p>
+            <p className="text-xs font-semibold text-muted-foreground/80">
+              {t('jsonFormat:invalidJson')}
+            </p>
          </div>
        )}
      </div>
@@ -26,11 +26,11 @@ vi.mock('@/config/features', async (importOriginal) => {
  };
 });

-vi.mock('../components/QrCodePreview', () => ({
+vi.mock('@/components/QrCodePreview', () => ({
  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
 }));

-vi.mock('../components/ImageUploader', () => ({
+vi.mock('@/components/ImageUploader', () => ({
  default: () => <div data-testid="image-uploader">ImageUploader</div>,
 }));

@@ -1,6 +1,7 @@
 import { Loader2, Pencil, QrCode } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import QrCodePreview from './QrCodePreview';
+import QrCodePreview from '@/components/QrCodePreview';
+import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
@@ -10,6 +11,7 @@ import { cn } from '@/lib/utils';
 const TEXT_PREVIEW_MAX_LENGTH = 80;

 export default function GeneratePanel() {
+  const { t } = useI18n('qrCode');
  const {
    generatorState,
    setTextToEncode,
@@ -40,13 +42,13 @@ export default function GeneratePanel() {
        >
          <div className="flex flex-col space-y-2.5">
            <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-              {'输入 URL 或文本'}
+              {t('qrCode:urlInputLabel')}
            </Label>

            <TextInputArea
              value={generatorState.textToEncode}
              onChange={setTextToEncode}
-              placeholder={'请输入 URL 或文本内容，将自动生成二维码'}
+              placeholder={t('qrCode:urlInputPlaceholder')}
              showCount={true}
              showClear={true}
              allowCopy={false}
@@ -64,12 +66,12 @@ export default function GeneratePanel() {
              {generatorState.generating ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  {'生成中...'}
+                  {t('qrCode:generating')}
                </>
              ) : (
                <>
                  <QrCode className="w-4 h-4 mr-2" />
-                  {'生成二维码'}
+                  {t('qrCode:generateButton')}
                </>
              )}
            </Button>
@@ -86,11 +88,11 @@ export default function GeneratePanel() {
      <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
        <div className="flex items-center justify-between mb-1.5">
          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-            {'原始文本'}
+            {t('qrCode:textPreviewLabel')}
          </Label>
          <Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
            <Pencil className="w-3 h-3 mr-1" />
-            {'编辑'}
+            {t('qrCode:editButton')}
          </Button>
        </div>
        <div
@@ -2,13 +2,15 @@ import { useCallback, useEffect } from 'react';
 import { RefreshCw } from 'lucide-react';
 import { toast } from 'sonner';
 import TextInputArea from '@/components/TextInputArea';
-import ImageUploader from './ImageUploader';
+import ImageUploader from '@/components/ImageUploader';
+import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';

 export default function ParsePanel() {
+  const { t } = useI18n('qrCode');
  const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();

  const hasFile = parserState.selectedFile !== null;
@@ -25,7 +27,7 @@ export default function ParsePanel() {
          const file = items[i].getAsFile();
          if (file) {
            handleFileChange(file);
-            toast.success('图片粘贴成功，正在解析...');
+            toast.success(t('qrCode:imagePasted'));
          }
          return;
        }
@@ -39,14 +41,14 @@ export default function ParsePanel() {
          const blob = await response.blob();
          const file = new File([blob], 'pasted-image.png', { type: blob.type });
          handleFileChange(file);
-          toast.success('图片粘贴成功，正在解析...');
+          toast.success(t('qrCode:imagePasted'));
        } catch (error) {
          console.error('处理 Base64 图片失败:', error);
-          toast.error('粘贴图片失败，请重试');
+          toast.error(t('qrCode:imagePasteError'));
        }
      }
    },
-    [handleFileChange],
+    [handleFileChange, t],
  );

  useEffect(() => {
@@ -80,11 +82,11 @@ export default function ParsePanel() {
      <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
        <div className="flex items-center justify-between mb-1.5">
          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-            {'已上传图片'}
+            {t('qrCode:uploadedImage')}
          </Label>
          <Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
            <RefreshCw className="w-3 h-3 mr-1" />
-            {'重新上传'}
+            {t('qrCode:reuploadButton')}
          </Button>
        </div>
        <div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
@@ -96,7 +98,7 @@ export default function ParsePanel() {
          <div className="flex-1 min-w-0">
            <p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
            {parserState.parsing && (
-              <p className="text-xs text-primary animate-pulse mt-1">{'解析中...'}</p>
+              <p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
            )}
          </div>
        </div>
@@ -111,7 +113,7 @@ export default function ParsePanel() {
      >
        <div className="flex flex-col space-y-2.5">
          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
-            {'解析结果'}
+            {t('qrCode:resultLabel')}
          </Label>

          <TextInputArea
@@ -119,7 +121,7 @@ export default function ParsePanel() {
            readOnly={true}
            showClear={false}
            allowCopy={true}
-            placeholder={parserState.parsing ? '' : '解析结果将显示在此处'}
+            placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
            minRows={4}
            maxRows={8}
            externalError={parserState.parseError || undefined}
@@ -3,6 +3,7 @@ import QRious from 'qrious';
 import { toast } from 'sonner';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
+import { useI18n } from '@/utils/chromeI18n';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';

@@ -77,6 +78,8 @@ function generateQrCodeDataUrl(text: string): string {
 }

 export function useQrCode(): QrCodeContextValue {
+  const { t } = useI18n('qrCode');
+
  const [mode, setMode] = useState<QrCodeMode>('generate');

  const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
@@ -109,37 +112,40 @@ export function useQrCode(): QrCodeContextValue {
  }, []);

  /** 自动检测URL并生成二维码 */
-  const autoGenerateIfUrl = useCallback((text: string) => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-
-    if (!isUrl(text)) {
-      return;
-    }
-
-    debounceTimerRef.current = setTimeout(() => {
-      setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
-
-      const qrCodeDataUrl = generateQrCodeDataUrl(text);
-
-      if (qrCodeDataUrl) {
-        setGeneratorState((prev) => ({
-          ...prev,
-          step: 'preview',
-          savedText: text.trim(),
-          qrCodeDataUrl,
-          generating: false,
-        }));
-      } else {
-        setGeneratorState((prev) => ({
-          ...prev,
-          generating: false,
-          inputError: '生成二维码失败，请重试',
-        }));
+  const autoGenerateIfUrl = useCallback(
+    (text: string) => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
      }
-    }, DEBOUNCE_DELAY);
-  }, []);
+
+      if (!isUrl(text)) {
+        return;
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
+
+        const qrCodeDataUrl = generateQrCodeDataUrl(text);
+
+        if (qrCodeDataUrl) {
+          setGeneratorState((prev) => ({
+            ...prev,
+            step: 'preview',
+            savedText: text.trim(),
+            qrCodeDataUrl,
+            generating: false,
+          }));
+        } else {
+          setGeneratorState((prev) => ({
+            ...prev,
+            generating: false,
+            inputError: t('qrCode:generateError'),
+          }));
+        }
+      }, DEBOUNCE_DELAY);
+    },
+    [t],
+  );

  const setTextToEncode = useCallback(
    (text: string) => {
@@ -154,8 +160,8 @@ export function useQrCode(): QrCodeContextValue {
    const text = generatorState.textToEncode.trim();

    if (!text) {
-      setGeneratorState((prev) => ({ ...prev, inputError: '请输入内容' }));
-      toast.error('请输入内容');
+      setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
+      toast.error(t('qrCode:inputRequired'));
      return;
    }

@@ -170,9 +176,9 @@ export function useQrCode(): QrCodeContextValue {
        setGeneratorState((prev) => ({
          ...prev,
          generating: false,
-          inputError: '生成二维码失败，请重试',
+          inputError: t('qrCode:generateError'),
        }));
-        toast.error('生成二维码失败，请重试');
+        toast.error(t('qrCode:generateError'));
        return;
      }

@@ -184,7 +190,7 @@ export function useQrCode(): QrCodeContextValue {
        generating: false,
      }));
    }, 0);
-  }, [generatorState.textToEncode]);
+  }, [generatorState.textToEncode, t]);

  /** 返回编辑态，保留上次输入内容 */
  const backToEdit = useCallback(() => {
@@ -201,43 +207,46 @@ export function useQrCode(): QrCodeContextValue {
  }, []);

  /** 从图片URL解析二维码 */
-  const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
-    try {
-      setParserState((prev) => ({
-        ...prev,
-        parsing: true,
-        parseError: '',
-        decodedResult: '',
-        previewUrl: imageUrl,
-        selectedFile: null,
-      }));
+  const parseQrCodeFromUrl = useCallback(
+    async (imageUrl: string) => {
+      try {
+        setParserState((prev) => ({
+          ...prev,
+          parsing: true,
+          parseError: '',
+          decodedResult: '',
+          previewUrl: imageUrl,
+          selectedFile: null,
+        }));

-      // 从URL获取图片并转换为File对象
-      const response = await fetch(imageUrl);
-      const blob = await response.blob();
-      const file = new File([blob], 'qrcode-image.png', { type: blob.type });
+        // 从URL获取图片并转换为File对象
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+        const file = new File([blob], 'qrcode-image.png', { type: blob.type });

-      setParserState((prev) => ({ ...prev, selectedFile: file }));
+        setParserState((prev) => ({ ...prev, selectedFile: file }));

-      const result = await parseQrCodeFromFile(file);
+        const result = await parseQrCodeFromFile(file);

-      if (result.success && result.data) {
-        setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
-        toast.success('二维码解析成功');
-      } else {
-        const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
+        if (result.success && result.data) {
+          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+          toast.success(t('qrCode:parseSuccess'));
+        } else {
+          const errorMsg = result.error || t('qrCode:noQrDetected');
+          setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+          toast.error(errorMsg);
+        }
+      } catch (error) {
+        console.error('解析图片二维码失败:', error);
+        const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
        setParserState((prev) => ({ ...prev, parseError: errorMsg }));
        toast.error(errorMsg);
+      } finally {
+        setParserState((prev) => ({ ...prev, parsing: false }));
      }
-    } catch (error) {
-      console.error('解析图片二维码失败:', error);
-      const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
-      setParserState((prev) => ({ ...prev, parseError: errorMsg }));
-      toast.error(errorMsg);
-    } finally {
-      setParserState((prev) => ({ ...prev, parsing: false }));
-    }
-  }, []);
+    },
+    [t],
+  );

  /** 右键菜单传入URL时，自动生成二维码或解析图片 */
  const handleContextMenuData = useCallback(
@@ -285,29 +294,32 @@ export function useQrCode(): QrCodeContextValue {
  useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });

  // 反向活态解析二维码算法
-  const parseQrCode = useCallback(async (file: File) => {
-    try {
-      setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
+  const parseQrCode = useCallback(
+    async (file: File) => {
+      try {
+        setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));

-      const result = await parseQrCodeFromFile(file);
+        const result = await parseQrCodeFromFile(file);

-      if (result.success && result.data) {
-        setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
-        toast.success('二维码解析成功');
-      } else {
-        const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
+        if (result.success && result.data) {
+          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+          toast.success(t('qrCode:parseSuccess'));
+        } else {
+          const errorMsg = result.error || t('qrCode:noQrDetected');
+          setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+          toast.error(errorMsg);
+        }
+      } catch (error) {
+        console.error('解析二维码失败:', error);
+        const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
        setParserState((prev) => ({ ...prev, parseError: errorMsg }));
        toast.error(errorMsg);
+      } finally {
+        setParserState((prev) => ({ ...prev, parsing: false }));
      }
-    } catch (error) {
-      console.error('解析二维码失败:', error);
-      const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
-      setParserState((prev) => ({ ...prev, parseError: errorMsg }));
-      toast.error(errorMsg);
-    } finally {
-      setParserState((prev) => ({ ...prev, parsing: false }));
-    }
-  }, []);
+    },
+    [t],
+  );

  const downloadQrCode = useCallback(() => {
    if (!generatorState.qrCodeDataUrl) return;
@@ -316,8 +328,8 @@ export function useQrCode(): QrCodeContextValue {
    link.href = generatorState.qrCodeDataUrl;
    link.download = 'qrcode.png';
    link.click();
-    toast.success('二维码下载成功');
-  }, [generatorState.qrCodeDataUrl]);
+    toast.success(t('qrCode:qrCodeDownloadSuccess'));
+  }, [generatorState.qrCodeDataUrl, t]);

  const copyQrCode = useCallback(async () => {
    if (!generatorState.qrCodeDataUrl) return;
@@ -332,12 +344,12 @@ export function useQrCode(): QrCodeContextValue {
        }),
      ]);

-      toast.success('二维码已复制到剪贴板');
+      toast.success(t('qrCode:qrCodeCopySuccess'));
    } catch (error) {
      console.error('复制二维码失败:', error);
-      toast.error('复制失败，请重试');
+      toast.error(t('qrCode:copyError'));
    }
-  }, [generatorState.qrCodeDataUrl]);
+  }, [generatorState.qrCodeDataUrl, t]);

  const handleFileChange = useCallback(
    (file: File) => {
@@ -1,5 +1,6 @@
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';

+import { useI18n } from '@/utils/chromeI18n';
 import { QrCodeContext } from './contexts/QrCodeContext';
 import { useQrCode } from './hooks/useQrCode';
 import GeneratePanel from './components/GeneratePanel';
@@ -7,12 +8,13 @@ import ParsePanel from './components/ParsePanel';
 import type { QrCodeMode } from './types';

 export default function Index() {
+  const { t } = useI18n('qrCode');
  const qrCode = useQrCode();

  // 模式选项驱动骨架
  const modeOptions = [
-    { value: 'generate' as QrCodeMode, label: '文本转二维码' },
-    { value: 'parse' as QrCodeMode, label: '二维码转文本' },
+    { value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
+    { value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
  ];

  return (
@@ -3,15 +3,17 @@ 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 { useI18n } from '@/utils/chromeI18n';

 export default function Index() {
+  const { t } = useI18n('rightClickRestorer');
  const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
        <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {'正在加载...'}
+          {t('rightClickRestorer:loading')}
        </span>
      </div>
    );
@@ -22,7 +24,7 @@ export default function Index() {
      {/* Current Domain */}
      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
        <div className="p-4">
-          <Label className="text-sm font-medium">{'当前域名'}</Label>
+          <Label className="text-sm font-medium">{t('rightClickRestorer:currentDomain')}</Label>
          <div className="mt-2 flex items-center justify-between gap-2">
            <code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
              {domain || '—'}
@@ -30,17 +32,17 @@ export default function Index() {
            {isUnsupported ? (
              <Badge variant="destructive" className="gap-1 shrink-0">
                <AlertTriangle className="h-3 w-3" />
-                {'不支持'}
+                {t('rightClickRestorer:unsupported')}
              </Badge>
            ) : isUnlocked ? (
              <Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
                <ShieldCheck className="h-3 w-3" />
-                {'已解锁'}
+                {t('rightClickRestorer:statusUnlocked')}
              </Badge>
            ) : (
              <Badge variant="secondary" className="gap-1 shrink-0">
                <Shield className="h-3 w-3" />
-                {'未解锁'}
+                {t('rightClickRestorer:statusLocked')}
              </Badge>
            )}
          </div>
@@ -53,18 +55,16 @@ export default function Index() {
          {isUnsupported ? (
            <>
              <p className="text-xs text-muted-foreground">
-                {'当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。'}
+                {t('rightClickRestorer:unsupportedDesc')}
              </p>
              <Button className="w-full gap-2" disabled variant="secondary">
                <AlertTriangle className="h-4 w-4" />
-                {'不支持'}
+                {t('rightClickRestorer:unsupported')}
              </Button>
            </>
          ) : (
            <>
-              <p className="text-xs text-muted-foreground">
-                {'点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。'}
-              </p>
+              <p className="text-xs text-muted-foreground">{t('rightClickRestorer:unlockDesc')}</p>
              <Button
                className="w-full gap-2"
                onClick={() => void unlock()}
@@ -72,7 +72,9 @@ export default function Index() {
                variant={isUnlocked ? 'secondary' : 'default'}
              >
                <MousePointerClick className="h-4 w-4" />
-                {isUnlocked ? '右键已解锁' : '解锁当前网站右键'}
+                {isUnlocked
+                  ? t('rightClickRestorer:alreadyUnlocked')
+                  : t('rightClickRestorer:unlockBtn')}
              </Button>
            </>
          )}
@@ -14,6 +14,7 @@
 */

 import React from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
@@ -42,6 +43,8 @@ export default function AutoRefreshToggle({
  className,
  ...props
 }: AutoRefreshToggleProps) {
+  const { t } = useI18n('storageCleaner');
+
  return (
    <div
      className={cn(
@@ -54,7 +57,7 @@ export default function AutoRefreshToggle({
        htmlFor="auto-refresh-switch"
        className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
      >
-        {'清理后自动刷新页面'}
+        {t('storageCleaner:autoRefresh')}
      </Label>

      <Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
@@ -2,6 +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 { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -9,6 +10,8 @@ interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
 }

 export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
+  const { t } = useI18n('storageCleaner');
+
  if (!result) return null;

  const isSuccess = result.overallSuccess;
@@ -30,7 +33,9 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
        )}

        <span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
-          {isSuccess ? formatCleaningResult(result) : result.error || '部分清理失败'}
+          {isSuccess
+            ? formatCleaningResult(result, t)
+            : result.error || t('storageCleaner:partialFailure')}
        </span>
      </div>
    </div>
@@ -1,4 +1,5 @@
 import { AlertCircle } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -6,6 +7,8 @@ interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
 }

 export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
+  const { t } = useI18n('storageCleaner');
+
  return (
    <div
      className={cn(
@@ -24,7 +27,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
        </p>

        <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
-          {'存储清理功能仅适用于标准网页'}
+          {t('storageCleaner:errorStandardOnly')}
        </p>
      </div>
    </div>
@@ -1,18 +1,10 @@
 import React from 'react';
 import { formatBytes } from '@/utils/format';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-import type { StorageSizeInfo } from '../useStorageCleaner';
+import type { StorageSizeInfo } from './useStorageCleaner';
 import { Checkbox } from '@/components/ui/checkbox';

-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
  labelKey: string;
  checked: boolean;
@@ -28,9 +20,10 @@ export default function OptionItem({
  className,
  ...props
 }: OptionItemProps) {
+  const { t } = useI18n('storageCleaner');
+
  const sizeValue = sizeInfo?.value;
  const isCount = sizeInfo?.displayType === 'count';
-  const label = OPTION_LABELS[labelKey] || labelKey;

  return (
    <div
@@ -51,7 +44,7 @@ export default function OptionItem({
            checked ? 'text-foreground' : 'text-foreground/75',
          )}
        >
-          {label}
+          {t(labelKey)}
        </span>

        {sizeValue !== undefined && sizeValue > 0 ? (
@@ -61,11 +54,11 @@ export default function OptionItem({
              checked ? 'text-primary/70' : 'text-muted-foreground/70',
            )}
          >
-            {isCount ? `${sizeValue} 项` : formatBytes(sizeValue)}
+            {isCount ? `${sizeValue} ${t('storageCleaner:countUnit')}` : formatBytes(sizeValue)}
          </span>
        ) : (
          <span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
-            {'无数据'}
+            {t('storageCleaner:noData')}
          </span>
        )}
      </div>
@@ -10,6 +10,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 export interface StorageCleanerConfirmProps {
@@ -19,24 +20,17 @@ export interface StorageCleanerConfirmProps {
  options: StorageCleanerOptions;
 }

-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 export function StorageCleanerConfirm({
  open,
  onClose,
  onConfirm,
  options,
 }: StorageCleanerConfirmProps) {
+  const { t } = useI18n('storageCleaner');
+
  const selectedOptions = Object.entries(options)
    .filter(([_, value]) => value)
-    .map(([key, _]) => OPTION_LABELS[key] || key);
+    .map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));

  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
@@ -48,14 +42,14 @@ export function StorageCleanerConfirm({
        {/* 头部标题区域 */}
        <DialogHeader className="pt-1">
          <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
-            {'确认清理数据？'}
+            {t('storageCleaner:confirmTitle')}
          </DialogTitle>
        </DialogHeader>

        {/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
        <div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
          <DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
-            {'您将永久删除当前页面的以下选定存储项。'}
+            {t('storageCleaner:confirmDesc')}
          </DialogDescription>

          {/* 待清理项目徽章群 */}
@@ -75,7 +69,7 @@ export function StorageCleanerConfirm({
          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
            <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
            <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
-              {'此操作不可撤销'}
+              {t('storageCleaner:irreversible')}
            </span>
          </div>
        </div>
@@ -87,7 +81,7 @@ export function StorageCleanerConfirm({
            onClick={onConfirm}
            className="w-full text-xs font-bold shadow-sm h-9"
          >
-            {'确认清理'}
+            {t('storageCleaner:confirmAction')}
          </Button>
          <Button
            variant="outline"
@@ -95,7 +89,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')}
          </Button>
        </DialogFooter>
      </DialogContent>
@@ -1,7 +1,8 @@
 import React from 'react';
 import type { StorageCleanerOptions } from '@/types/storage';
-import type { StorageSizeInfo } from '../useStorageCleaner';
+import type { StorageSizeInfo } from './useStorageCleaner';
 import OptionItem from './OptionItem';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
@@ -25,6 +26,8 @@ export default function StorageOptionsGrid({
  className,
  ...props
 }: StorageOptionsGridProps) {
+  const { t } = useI18n('storageCleaner');
+
  const optionKeys: (keyof StorageCleanerOptions)[] = [
    'localStorage',
    'sessionStorage',
@@ -45,7 +48,7 @@ export default function StorageOptionsGrid({
          {optionKeys.map((key) => (
            <OptionItem
              key={key}
-              labelKey={key}
+              labelKey={`storageCleaner:options.${key}`}
              checked={options[key]}
              sizeInfo={sizes[key]}
              onChange={() => onOptionChange(key)}
@@ -59,7 +62,7 @@ export default function StorageOptionsGrid({
        className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
      >
        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
-          {'全选所有项'}
+          {t('storageCleaner:selectAll')}
        </Label>

        <Checkbox
@@ -1,32 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import Index from '../index';
-
-// Mock the chrome APIs
-vi.mock('@/utils/chromeStorage', () => ({
-  storageUtil: {
-    get: vi.fn().mockResolvedValue(null),
-    set: vi.fn().mockResolvedValue(undefined),
-  },
-}));
-
-vi.mock('@/utils/storageCleaner', () => ({
-  getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
-  isRestrictedUrl: vi.fn().mockReturnValue(false),
-  getCookieSize: vi.fn().mockResolvedValue(0),
-  getLocalStorageSize: vi.fn().mockResolvedValue(0),
-  getSessionStorageSize: vi.fn().mockResolvedValue(0),
-  getOriginStorageEstimate: vi.fn().mockResolvedValue(0),
-  getCacheStorageSize: vi.fn().mockResolvedValue(0),
-  getServiceWorkerCount: vi.fn().mockResolvedValue(0),
-  clearStorage: vi.fn().mockResolvedValue({ overallSuccess: true }),
-  formatCleaningResult: vi.fn().mockReturnValue('Cleaned successfully'),
-}));
-
-describe('StorageCleaner 页面', () => {
-  it('应该渲染初始化加载状态', () => {
-    // storageCleaner:initializing 的中文文案为「正在读取站点数据...」
-    render(<Index />);
-    expect(screen.getByText(/正在读取站点数据/)).toBeInTheDocument();
-  });
-});
@@ -1,13 +1,16 @@
 import { Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import StorageCleanerConfirm from './components/StorageCleanerConfirm';
+import StorageCleanerConfirm from './StorageCleanerConfirm';
 import { useStorageCleaner } from './useStorageCleaner';
-import StorageOptionsGrid from './components/StorageOptionsGrid';
-import AutoRefreshToggle from './components/AutoRefreshToggle';
-import ErrorDisplay from './components/ErrorDisplay';
-import CleaningResult from './components/CleaningResult';
+import StorageOptionsGrid from './StorageOptionsGrid';
+import AutoRefreshToggle from './AutoRefreshToggle';
+import ErrorDisplay from './ErrorDisplay';
+import CleaningResult from './CleaningResult';
+import { useI18n } from '@/utils/chromeI18n';

 export default function Index() {
+  const { t } = useI18n('storageCleaner');
+
  const {
    error,
    isInitializing,
@@ -33,7 +36,7 @@ export default function Index() {
      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
        <Loader2 className="h-6 w-6 text-muted-foreground/80" />
        <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {'正在读取站点数据...'}
+          {t('storageCleaner:initializing')}
        </span>
      </div>
    );
@@ -72,10 +75,10 @@ export default function Index() {
            {loading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {'正在清理...'}
+                {t('storageCleaner:cleaning')}
              </>
            ) : (
-              '立即清理'
+              t('storageCleaner:cleanNow')
            )}
          </Button>
        </div>
@@ -16,6 +16,7 @@ import {
  getSessionStorageSize,
  isRestrictedUrl,
 } from '@/utils/storageCleaner';
+import { useI18n } from '@/utils/chromeI18n';
 import { toast } from 'sonner';

 const DEFAULT_OPTIONS: StorageCleanerOptions = {
@@ -58,6 +59,7 @@ export interface UseStorageCleanerReturn {
 }

 export function useStorageCleaner(): UseStorageCleanerReturn {
+  const { t } = useI18n(['storageCleaner', 'common']);
  const [error, setError] = useState<string>('');
  const [isInitializing, setIsInitializing] = useState<boolean>(true);
  const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
@@ -91,11 +93,11 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
      if (currentRequestId !== requestIdRef.current) return;

      if (!tab || !tab.url) {
-        setError('无法获取当前标签页');
+        setError(t('storageCleaner:errorNoTab'));
        return;
      }
      if (isRestrictedUrl(tab.url)) {
-        setError('存储清理功能不支持此页面');
+        setError(t('storageCleaner:errorRestricted'));
        return;
      }

@@ -133,7 +135,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
        setIsInitializing(false);
      }
    }
-  }, []);
+  }, [t]);

  const loadInfoRef = useRef(loadInfo);
  useEffect(() => {
@@ -175,7 +177,10 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
    if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
    storageTimerRef.current = setTimeout(async () => {
      await storageUtil
-        .set('storageCleaner/preferences', { reloadAfterClean, selectedTypes: options })
+        .set('storageCleaner/preferences', {
+          reloadAfterClean,
+          selectedTypes: options,
+        })
        .catch(console.error);
    }, 500);
  }, [options, reloadAfterClean, isInitializing]);
@@ -204,7 +209,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {

    const tab = await getCurrentTab();
    if (!tab || !tab.id || !tab.url) {
-      toast.warning('无法获取当前标签页');
+      toast.warning(t('storageCleaner:errorNoTab'));
      return;
    }

@@ -214,18 +219,18 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
      setResult(cleaningResult);

      if (reloadAfterClean && cleaningResult.overallSuccess) {
-        toast.success('清理成功，即将刷新页面');
+        toast.success(t('storageCleaner:cleanSuccessReload'));
        await chrome.tabs.reload(tab.id);
      } else {
        await loadInfo();
      }
    } catch (err) {
-      toast.error(`清理失败: ${String(err)}`);
+      toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
    } finally {
      setLoading(false);
      setShowConfirm(false);
    }
-  }, [options, reloadAfterClean, loadInfo]);
+  }, [options, reloadAfterClean, loadInfo, t]);

  const totalBytes = useMemo(() => {
    return Object.values(sizes).reduce((acc, s) => {
@@ -5,6 +5,7 @@

 import { useMemo } from 'react';
 import { FileJson, FileText } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import { getGeneratorById } from '@/lib/generators';
 import type { FieldConfig } from '@/types/testDataGenerator';

@@ -55,6 +56,8 @@ function getValueColor(value: string): string {
 }

 export default function DataPreview({ fields }: DataPreviewProps) {
+  const { t } = useI18n('testDataGenerator');
+
  // 生成一条示例数据
  const sampleData = useMemo(() => {
    if (fields.length === 0) return null;
@@ -80,7 +83,7 @@ export default function DataPreview({ fields }: DataPreviewProps) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center">
        <FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
-        <p className="text-xs text-muted-foreground/50">{'配置字段后点击「生成数据」按钮'}</p>
+        <p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
      </div>
    );
  }
@@ -93,10 +96,12 @@ export default function DataPreview({ fields }: DataPreviewProps) {
          <div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
            <FileText className="h-3 w-3 text-primary" />
          </div>
-          <span className="text-xs font-medium text-muted-foreground">{'示例数据'}</span>
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('testDataGenerator_sampleData')}
+          </span>
        </div>
        <span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
-          {Object.keys(sampleData).length} {'字段'}
+          {Object.keys(sampleData).length} {t('testDataGenerator_fields')}
        </span>
      </div>

@@ -6,6 +6,7 @@
 import { Copy, Download } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
+import { useI18n } from '@/utils/chromeI18n';
 import { DataExporter } from '@/utils/dataExporter';
 import type { GenerateResult } from '@/types/testDataGenerator';

@@ -14,6 +15,8 @@ interface ExportPanelProps {
 }

 export default function ExportPanel({ result }: ExportPanelProps) {
+  const { t } = useI18n('testDataGenerator');
+
  if (!result?.data || result.data.length === 0) {
    return null;
  }
@@ -22,9 +25,9 @@ export default function ExportPanel({ result }: ExportPanelProps) {
    const content = DataExporter.toJSON(result.data!);
    const success = await DataExporter.copyToClipboard(content);
    if (success) {
-      toast.success('已复制到剪贴板');
+      toast.success(t('testDataGenerator_copySuccess'));
    } else {
-      toast.error('复制失败');
+      toast.error(t('testDataGenerator_copyFailed'));
    }
  };

@@ -32,9 +35,9 @@ export default function ExportPanel({ result }: ExportPanelProps) {
    const content = DataExporter.toCSV(result.data!);
    const success = await DataExporter.copyToClipboard(content);
    if (success) {
-      toast.success('已复制到剪贴板');
+      toast.success(t('testDataGenerator_copySuccess'));
    } else {
-      toast.error('复制失败');
+      toast.error(t('testDataGenerator_copyFailed'));
    }
  };

@@ -50,27 +53,27 @@ export default function ExportPanel({ result }: ExportPanelProps) {

  return (
    <div className="space-y-2">
-      <h4 className="text-sm font-medium text-foreground">{'导出数据'}</h4>
+      <h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>

      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
          <Copy className="h-4 w-4" />
-          {'复制 JSON'}
+          {t('testDataGenerator_copyJSON')}
        </Button>

        <Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
          <Copy className="h-4 w-4" />
-          {'复制 CSV'}
+          {t('testDataGenerator_copyCSV')}
        </Button>

        <Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
          <Download className="h-4 w-4" />
-          {'下载 JSON'}
+          {t('testDataGenerator_downloadJSON')}
        </Button>

        <Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
          <Download className="h-4 w-4" />
-          {'下载 CSV'}
+          {t('testDataGenerator_downloadCSV')}
        </Button>
      </div>
    </div>
@@ -4,8 +4,8 @@
 */

 import { useState, useCallback } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Badge } from '@/components/ui/badge';
 import { getGeneratorById } from '@/lib/generators';
@@ -21,6 +21,7 @@ interface FieldEditorProps {
 }

 export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
+  const { t } = useI18n('testDataGenerator');
  const generator = getGeneratorById(field.generatorId);
  const [nameError, setNameError] = useState<string | null>(null);

@@ -28,20 +29,20 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
    (name: string): string | null => {
      const trimmed = name.trim();
      if (!trimmed) {
-        return '字段名称不能为空';
+        return t('testDataGenerator_fieldNameEmpty');
      }
      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
-        return '字段名称只能包含字母、数字和下划线';
+        return t('testDataGenerator_fieldNameInvalid');
      }
      const isDuplicate = allFieldNames.some(
        (n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
      );
      if (isDuplicate) {
-        return '字段名称已存在';
+        return t('testDataGenerator_fieldNameDuplicate');
      }
      return null;
    },
-    [allFieldNames, field.name],
+    [allFieldNames, field.name, t],
  );

  const handleNameChange = (name: string) => {
@@ -109,13 +110,15 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="flex items-center justify-between">
-            <Label className="text-sm font-medium text-foreground">{'字段名称'}</Label>
+            <label className="text-sm font-medium text-foreground">
+              {t('testDataGenerator_fieldName')}
+            </label>
            <span className="text-xs text-muted-foreground">{field.name.length}/20</span>
          </div>
          <Input
            value={field.name}
            onChange={(e) => handleNameChange(e.target.value)}
-            placeholder={'请输入字段名称'}
+            placeholder={t('testDataGenerator_fieldNamePlaceholder')}
            maxLength={20}
            className={`h-9 ${nameError ? 'border-destructive' : ''}`}
          />
@@ -124,7 +127,9 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie

        <div className="space-y-2">
          <div className="flex items-center justify-between">
-            <Label className="text-sm font-medium text-foreground">{'字段描述'}</Label>
+            <label className="text-sm font-medium text-foreground">
+              {t('testDataGenerator_fieldDescription')}
+            </label>
            <span className="text-xs text-muted-foreground">
              {(field.description || '').length}/50
            </span>
@@ -132,7 +137,7 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
          <Input
            value={field.description || ''}
            onChange={(e) => handleDescriptionChange(e.target.value)}
-            placeholder={'可选，添加字段说明'}
+            placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
            maxLength={50}
            className="h-9"
          />
@@ -142,14 +147,18 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
      {/* 必填/选填配置 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
-          <Label className="text-sm font-medium text-foreground">{'必填'}</Label>
+          <label className="text-sm font-medium text-foreground">
+            {t('testDataGenerator_required')}
+          </label>
          <Switch checked={field.required} onCheckedChange={handleRequiredChange} />
        </div>

        {!field.required && (
          <div className="space-y-2 pl-1">
            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">{'空值率'}</span>
+              <span className="text-sm text-muted-foreground">
+                {t('testDataGenerator_nullRate')}
+              </span>
              <Badge variant="secondary" className="text-xs">
                {field.nullRate}%
              </Badge>
@@ -189,20 +198,26 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie

      {/* 唯一性约束 */}
      <div className="flex items-center justify-between">
-        <Label className="text-sm font-medium text-foreground">{'唯一性约束'}</Label>
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_uniqueConstraint')}
+        </label>
        <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
      </div>

      {/* 生成器选择 */}
      <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{'数据生成器'}</Label>
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_generator')}
+        </label>
        <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
      </div>

      {/* 生成器参数配置 */}
      {generator && (
        <div className="space-y-2">
-          <Label className="text-sm font-medium text-foreground">{'生成器参数'}</Label>
+          <label className="text-sm font-medium text-foreground">
+            {t('testDataGenerator_generatorParams')}
+          </label>
          <GeneratorConfig
            generator={generator}
            params={field.params}
@@ -3,6 +3,7 @@
 * 展示单个字段的基本信息，适配固定高度卡片
 */

+import { useI18n } from '@/utils/chromeI18n';
 import { getGeneratorById } from '@/lib/generators';
 import { Badge } from '@/components/ui/badge';
 import type { FieldConfig } from '@/types/testDataGenerator';
@@ -13,6 +14,7 @@ interface FieldItemProps {
 }

 export default function FieldItem({ field, onClick }: FieldItemProps) {
+  const { t } = useI18n('testDataGenerator');
  const generator = getGeneratorById(field.generatorId);

  return (
@@ -41,7 +43,7 @@ export default function FieldItem({ field, onClick }: FieldItemProps) {
          )}
          {field.unique && (
            <Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
-              {'唯一'}
+              {t('testDataGenerator_unique')}
            </Badge>
          )}
        </div>
@@ -10,6 +10,7 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { useI18n } from '@/utils/chromeI18n';
 import * as ruleStorage from '@/utils/ruleStorage';
 import {
  DndContext,
@@ -122,6 +123,7 @@ export default function FieldList({
  editingRule,
  onRuleSaved,
 }: FieldListProps) {
+  const { t } = useI18n('testDataGenerator');
  const [scrollTop, setScrollTop] = useState(0);
  const [activeId, setActiveId] = useState<string | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
@@ -224,10 +226,10 @@ export default function FieldList({
    });

    if (updated) {
-      toast.success('规则已更新');
+      toast.success(t('testDataGenerator_ruleUpdated'));
      onRuleSaved?.();
    }
-  }, [editingRule, fields, onRuleSaved]);
+  }, [editingRule, fields, t, onRuleSaved]);

  // 新建规则或另存为
  const handleSave = useCallback(
@@ -256,18 +258,18 @@ export default function FieldList({
        setShowConfirmOverwrite(false);
        setRuleName('');
        setRuleDescription('');
-        toast.success('规则已保存');
+        toast.success(t('testDataGenerator_ruleSaved'));
        onRuleSaved?.();
      }
    },
-    [ruleName, ruleDescription, fields, onRuleSaved],
+    [ruleName, ruleDescription, fields, t, onRuleSaved],
  );

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-medium text-foreground">
-          {'字段'} ({fields.length}/{MAX_FIELDS})
+          {t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
        </h3>
        <div className="flex items-center gap-2">
          {editingRule ? (
@@ -278,10 +280,10 @@ export default function FieldList({
                onClick={handleUpdateRule}
                disabled={fields.length === 0}
                className="h-8 gap-1.5 px-2.5"
-                title={`${'编辑中'}: ${editingRule.name}`}
+                title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
              >
                <Save className="h-3.5 w-3.5" />
-                {'更新规则'}
+                {t('testDataGenerator_updateRule')}
              </Button>
              <Button
                variant="ghost"
@@ -290,7 +292,7 @@ export default function FieldList({
                disabled={fields.length === 0}
                className="h-8 px-2"
              >
-                {'另存为'}
+                {t('testDataGenerator_saveAs')}
              </Button>
            </>
          ) : (
@@ -302,7 +304,7 @@ export default function FieldList({
              className="h-8 gap-1.5 px-2.5"
            >
              <Save className="h-3.5 w-3.5" />
-              {'保存规则'}
+              {t('testDataGenerator_saveRule')}
            </Button>
          )}
          <Button
@@ -313,7 +315,7 @@ export default function FieldList({
            className="h-8 gap-1.5 px-2.5"
          >
            <Plus className="h-4 w-4" />
-            {'添加字段'}
+            {t('testDataGenerator_addField')}
          </Button>
        </div>
      </div>
@@ -322,8 +324,10 @@ export default function FieldList({
        {fields.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
-            <p className="text-sm text-muted-foreground">{'暂无字段'}</p>
-            <p className="text-xs text-muted-foreground/70 mt-1">{'点击上方按钮添加第一个字段'}</p>
+            <p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
+            <p className="text-xs text-muted-foreground/70 mt-1">
+              {t('testDataGenerator_addFieldHint')}
+            </p>
          </div>
        ) : (
          <DndContext
@@ -415,22 +419,22 @@ export default function FieldList({
            <Input
              value={ruleName}
              onChange={(e) => setRuleName(e.target.value)}
-              placeholder={'规则名称'}
+              placeholder={t('testDataGenerator_ruleNamePlaceholder')}
              className="h-9"
            />
            <Input
              value={ruleDescription}
              onChange={(e) => setRuleDescription(e.target.value)}
-              placeholder={'规则描述（可选）'}
+              placeholder={t('testDataGenerator_ruleDescPlaceholder')}
              className="h-9"
            />
          </div>
          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
            <Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
-              {'取消'}
+              {t('testDataGenerator_cancel')}
            </Button>
            <Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
-              {'确认'}
+              {t('testDataGenerator_confirm')}
            </Button>
          </div>
        </DialogContent>
@@ -443,14 +447,16 @@ export default function FieldList({
          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
        >
          <div className="flex-1 overflow-y-auto px-6 pb-4">
-            <p className="text-sm text-muted-foreground">{'已存在同名规则，是否覆盖保存？'}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('testDataGenerator_ruleNameDuplicate')}
+            </p>
          </div>
          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
            <Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
-              {'取消'}
+              {t('testDataGenerator_cancel')}
            </Button>
            <Button size="sm" onClick={() => handleSave(true)}>
-              {'覆盖'}
+              {t('testDataGenerator_overwrite')}
            </Button>
          </div>
        </DialogContent>
@@ -5,6 +5,7 @@

 import { Play, Square } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { useI18n } from '@/utils/chromeI18n';
 import type { GenerateProgress } from '@/types/testDataGenerator';

 interface GenerateButtonProps {
@@ -22,20 +23,27 @@ export default function GenerateButton({
  progress,
  disabled,
 }: GenerateButtonProps) {
+  const { t } = useI18n('testDataGenerator');
+
  return (
    <div className="space-y-3">
      {isGenerating ? (
        <>
          <Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
            <Square className="h-5 w-5" />
-            {'取消'}
+            {t('testDataGenerator_cancel')}
          </Button>

          {/* 进度条 */}
          {progress && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>{'已生成 {{current}} / {{total}} 条'}</span>
+                <span>
+                  {t('testDataGenerator_progress', {
+                    current: progress.generated.toLocaleString(),
+                    total: progress.total.toLocaleString(),
+                  })}
+                </span>
                <span>{progress.progress}%</span>
              </div>
              <div className="h-2 bg-muted rounded-full overflow-hidden">
@@ -46,7 +54,9 @@ export default function GenerateButton({
              </div>
              {progress.estimatedTimeLeft !== undefined && (
                <p className="text-xs text-muted-foreground text-center">
-                  {'预计剩余 {{time}} 秒'}
+                  {t('testDataGenerator_estimatedTime', {
+                    time: Math.ceil(progress.estimatedTimeLeft / 1000),
+                  })}
                </p>
              )}
            </div>
@@ -55,7 +65,7 @@ export default function GenerateButton({
      ) : (
        <Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
          <Play className="h-5 w-5" />
-          {'生成数据'}
+          {t('testDataGenerator_generate')}
        </Button>
      )}
    </div>
@@ -3,8 +3,8 @@
 * 配置生成数量、数据格式等选项
 */

+import { useI18n } from '@/utils/chromeI18n';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';

 interface GenerateOptionsProps {
  count: number;
@@ -26,11 +26,15 @@ export default function GenerateOptions({
  format,
  onFormatChange,
 }: GenerateOptionsProps) {
+  const { t } = useI18n('testDataGenerator');
+
  return (
    <div className="space-y-4">
      {/* 生成数量 */}
      <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{'生成数量'}</Label>
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_count')}
+        </label>
        <div className="flex flex-wrap gap-2">
          {COUNT_PRESETS.map((preset) => (
            <button
@@ -63,7 +67,9 @@ export default function GenerateOptions({

      {/* 数据格式 */}
      <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{'数据格式'}</Label>
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_format')}
+        </label>
        <div className="flex gap-2">
          {FORMAT_OPTIONS.map((option) => (
            <button
@@ -4,7 +4,6 @@
 */

 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import {
  Select,
@@ -13,6 +12,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
+import { useI18n } from '@/utils/chromeI18n';
 import type { GeneratorDefinition } from '@/types/testDataGenerator';

 interface GeneratorConfigProps {
@@ -22,22 +22,27 @@ interface GeneratorConfigProps {
 }

 export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
+  const { t } = useI18n('testDataGenerator');
  const handleParamChange = (key: string, value: unknown) => {
    onChange({ ...params, [key]: value });
  };

  if (generator.params.length === 0) {
-    return <p className="text-sm text-muted-foreground py-2">{'此生成器无可配置参数'}</p>;
+    return (
+      <p className="text-sm text-muted-foreground py-2">
+        {t('testDataGenerator_noGeneratorParams')}
+      </p>
+    );
  }

  return (
    <div className="space-y-4 p-3 rounded-lg bg-muted/30">
      {generator.params.map((param) => (
        <div key={param.key} className="space-y-2">
-          <Label className="text-sm font-medium text-foreground">
+          <label className="text-sm font-medium text-foreground">
            {param.label}
            {param.required && <span className="text-destructive ml-1">*</span>}
-          </Label>
+          </label>
          {param.description && (
            <p className="text-xs text-muted-foreground">{param.description}</p>
          )}
@@ -65,7 +70,9 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
          {param.type === 'boolean' && (
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">
-                {params[param.key] !== false ? '启用' : '禁用'}
+                {params[param.key] !== false
+                  ? t('testDataGenerator_enabled')
+                  : t('testDataGenerator_disabled')}
              </span>
              <Switch
                checked={params[param.key] !== false}
@@ -108,7 +115,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
                    .filter(Boolean),
                )
              }
-              placeholder={'用逗号分隔多个值'}
+              placeholder={t('testDataGenerator_commaSeparated')}
              className="h-9"
            />
          )}
@@ -6,6 +6,7 @@
 import { useState } from 'react';
 import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { useI18n } from '@/utils/chromeI18n';
 import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';

 interface GeneratorSelectorProps {
@@ -21,6 +22,7 @@ const categoryIcons: Record<string, React.ComponentType<{ className?: string }>>
 };

 export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
+  const { t } = useI18n('testDataGenerator');
  const [searchQuery, setSearchQuery] = useState('');
  const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');

@@ -36,7 +38,7 @@ export default function GeneratorSelector({ selectedId, onChange }: GeneratorSel
        <Input
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={'搜索生成器...'}
+          placeholder={t('testDataGenerator_searchGenerator')}
          className="pl-9 h-9"
        />
      </div>
@@ -4,6 +4,7 @@
 */

 import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import type { GenerateResult } from '@/types/testDataGenerator';

 interface ResultPanelProps {
@@ -11,6 +12,8 @@ interface ResultPanelProps {
 }

 export default function ResultPanel({ result }: ResultPanelProps) {
+  const { t } = useI18n('testDataGenerator');
+
  if (!result) return null;

  const getStatusIcon = () => {
@@ -25,12 +28,12 @@ export default function ResultPanel({ result }: ResultPanelProps) {

  const getStatusText = () => {
    if (result.success && (!result.warnings || result.warnings.length === 0)) {
-      return '生成成功';
+      return t('testDataGenerator_success');
    }
    if (result.success && result.warnings && result.warnings.length > 0) {
-      return '部分成功';
+      return t('testDataGenerator_partialSuccess');
    }
-    return '生成失败';
+    return t('testDataGenerator_failed');
  };

  return (
@@ -49,7 +52,9 @@ export default function ResultPanel({ result }: ResultPanelProps) {
            <span className="text-lg font-semibold text-foreground">
              {result.stats.total.toLocaleString()}
            </span>
-            <span className="text-xs text-muted-foreground">{'总条数'}</span>
+            <span className="text-xs text-muted-foreground">
+              {t('testDataGenerator_totalCount')}
+            </span>
          </div>

          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -57,7 +62,9 @@ export default function ResultPanel({ result }: ResultPanelProps) {
            <span className="text-lg font-semibold text-green-500">
              {result.stats.success.toLocaleString()}
            </span>
-            <span className="text-xs text-muted-foreground">{'成功'}</span>
+            <span className="text-xs text-muted-foreground">
+              {t('testDataGenerator_successCount')}
+            </span>
          </div>

          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -65,7 +72,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
            <span className="text-lg font-semibold text-foreground">
              {(result.stats.duration / 1000).toFixed(2)}s
            </span>
-            <span className="text-xs text-muted-foreground">{'耗时'}</span>
+            <span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
          </div>
        </div>
      )}
@@ -75,7 +82,9 @@ export default function ResultPanel({ result }: ResultPanelProps) {
        <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle className="h-4 w-4 text-yellow-500" />
-            <span className="text-sm font-medium text-yellow-500">{'警告'}</span>
+            <span className="text-sm font-medium text-yellow-500">
+              {t('testDataGenerator_warnings')}
+            </span>
          </div>
          <ul className="list-disc list-inside space-y-1">
            {result.warnings.slice(0, 5).map((warning, index) => (
@@ -84,7 +93,9 @@ export default function ResultPanel({ result }: ResultPanelProps) {
              </li>
            ))}
            {result.warnings.length > 5 && (
-              <li className="text-xs text-yellow-500/80">... {'还有 {{count}} 条警告'}</li>
+              <li className="text-xs text-yellow-500/80">
+                ... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
+              </li>
            )}
          </ul>
        </div>
@@ -20,6 +20,7 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { useI18n } from '@/utils/chromeI18n';
 import * as ruleStorage from '@/utils/ruleStorage';
 import type { DataRule, FieldConfig } from '@/types/testDataGenerator';

@@ -30,6 +31,7 @@ interface RuleManagerProps {
 }

 export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
+  const { t, i18n } = useI18n('testDataGenerator');
  const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
  const [searchQuery, setSearchQuery] = useState('');
  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
@@ -62,9 +64,9 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
      onLoad(rule.fields);
      ruleStorage.recordUse(rule.id);
      loadRules();
-      toast.success(`已加载规则「${rule.name}」`);
+      toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
    },
-    [onLoad, loadRules],
+    [onLoad, loadRules, t],
  );

  const handleDelete = useCallback(() => {
@@ -72,20 +74,20 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
    ruleStorage.deleteRule(ruleToDelete.id);
    loadRules();
    setRuleToDelete(null);
-    toast.success('规则已删除');
+    toast.success(t('testDataGenerator_ruleDeleted'));
    onRulesChanged?.();
-  }, [ruleToDelete, loadRules, onRulesChanged]);
+  }, [ruleToDelete, loadRules, t, onRulesChanged]);

  const handleDuplicate = useCallback(
    (id: string) => {
-      const result = ruleStorage.duplicate(id, '（副本）');
+      const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
      if (result) {
        loadRules();
-        toast.success('规则已复制');
+        toast.success(t('testDataGenerator_ruleDuplicated'));
        onRulesChanged?.();
      }
    },
-    [loadRules, onRulesChanged],
+    [loadRules, t, onRulesChanged],
  );

  const handleEdit = useCallback(
@@ -111,14 +113,14 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
      } finally {
        URL.revokeObjectURL(url);
      }
-      toast.success('规则已导出');
+      toast.success(t('testDataGenerator_exportSuccess'));
    } catch (error) {
      console.error('[RuleManager] 导出失败:', error);
-      toast.error('导出失败');
+      toast.error(t('testDataGenerator_exportFailed'));
    } finally {
      setIsExporting(false);
    }
-  }, []);
+  }, [t]);

  const handleImport = useCallback(() => {
    const input = document.createElement('input');
@@ -134,11 +136,11 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
        const result = ruleStorage.importRules(text);

        if (result.success > 0) {
-          toast.success(`成功导入 ${result.success} 条规则`);
+          toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
        }

        if (result.failed > 0) {
-          toast.error(`${result.failed} 条规则导入失败`);
+          toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
          console.warn('[RuleManager] 导入警告:', result.errors);
        }

@@ -146,22 +148,25 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
        onRulesChanged?.();
      } catch (error) {
        console.error('[RuleManager] 导入失败:', error);
-        toast.error('规则导入失败');
+        toast.error(t('testDataGenerator_importFailed'));
      } finally {
        setIsImporting(false);
      }
    };
    input.click();
-  }, [loadRules, onRulesChanged]);
+  }, [loadRules, t, onRulesChanged]);

-  const formatDate = useCallback((timestamp: number) => {
-    return new Date(timestamp).toLocaleDateString('zh-CN', {
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  }, []);
+  const formatDate = useCallback(
+    (timestamp: number) => {
+      return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+    [i18n.language],
+  );

  return (
    <div className="space-y-4">
@@ -173,15 +178,15 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
        >
          <div className="flex-1 overflow-y-auto px-6 pb-4">
            <p className="text-sm text-muted-foreground">
-              {ruleToDelete && `确定要删除规则「${ruleToDelete.name}」吗？此操作不可撤销。`}
+              {t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
            </p>
          </div>
          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
            <Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
-              {'取消'}
+              {t('testDataGenerator_cancel')}
            </Button>
            <Button variant="destructive" size="sm" onClick={handleDelete}>
-              {'确认'}
+              {t('testDataGenerator_confirm')}
            </Button>
          </div>
        </DialogContent>
@@ -201,7 +206,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
          ) : (
            <Upload className="h-4 w-4" />
          )}
-          {'导入'}
+          {t('testDataGenerator_import')}
        </Button>
        <Button
          variant="outline"
@@ -215,7 +220,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
          ) : (
            <Download className="h-4 w-4" />
          )}
-          {'导出数据'}
+          {t('testDataGenerator_export')}
        </Button>
      </div>

@@ -225,12 +230,12 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
        <Input
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
-          placeholder={'搜索规则...'}
+          placeholder={t('testDataGenerator_searchRules')}
          className="pl-9 pr-24 h-9"
          maxLength={20}
        />
-        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
-          {`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
+        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
+          {t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
        </span>
      </div>

@@ -240,7 +245,9 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
          <div className="text-center py-6">
            <Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
            <p className="text-sm text-muted-foreground">
-              {debouncedSearchQuery ? '未找到匹配的规则' : '暂无保存的规则'}
+              {debouncedSearchQuery
+                ? t('testDataGenerator_noSearchResults')
+                : t('testDataGenerator_noRules')}
            </p>
          </div>
        ) : (
@@ -253,7 +260,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                <div className="flex items-center gap-2">
                  <span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
                  <span className="text-xs text-muted-foreground">
-                    {rule.fields.length} {'字段'}
+                    {rule.fields.length} {t('testDataGenerator_fields')}
                  </span>
                </div>
                {rule.description && (
@@ -266,7 +273,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                    <Clock className="h-3 w-3" />
                    {formatDate(rule.updatedAt)}
                  </span>
-                  <span>{`使用 ${rule.useCount} 次`}</span>
+                  <span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
                </div>
              </div>

@@ -276,7 +283,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                  size="icon"
                  className="h-7 w-7"
                  onClick={() => handleLoad(rule)}
-                  title={'加载'}
+                  title={t('testDataGenerator_load')}
                >
                  <FolderOpen className="h-3.5 w-3.5" />
                </Button>
@@ -285,7 +292,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                  size="icon"
                  className="h-7 w-7"
                  onClick={() => handleEdit(rule)}
-                  title={'编辑'}
+                  title={t('testDataGenerator_edit')}
                >
                  <Edit className="h-3.5 w-3.5" />
                </Button>
@@ -294,7 +301,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                  size="icon"
                  className="h-7 w-7"
                  onClick={() => handleDuplicate(rule.id)}
-                  title={'复制'}
+                  title={t('testDataGenerator_duplicate')}
                >
                  <Copy className="h-3.5 w-3.5" />
                </Button>
@@ -303,7 +310,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                  size="icon"
                  className="h-7 w-7 text-destructive hover:text-destructive"
                  onClick={() => setRuleToDelete(rule)}
-                  title={'删除'}
+                  title={t('testDataGenerator_delete')}
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </Button>
@@ -4,7 +4,6 @@ import userEvent from '@testing-library/user-event';

 // Mock dependencies
 vi.mock('@/utils/ruleStorage', () => ({
-  MAX_RULES: 20,
  getAll: vi.fn(() => []),
  save: vi.fn(),
  deleteRule: vi.fn(),
@@ -88,7 +87,8 @@ describe('RuleManager', () => {

    expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
    expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
-    expect(mockedToast.success).toHaveBeenCalledWith('已加载规则「Test Rule」');
+    // Note: t() mock doesn't handle placeholders, so we just check it was called
+    expect(mockedToast.success).toHaveBeenCalled();
  });

  it('should show delete confirmation dialog', async () => {
@@ -100,7 +100,7 @@ describe('RuleManager', () => {
    const deleteButton = screen.getByTitle('删除');
    await user.click(deleteButton);

-    expect(screen.getByText('确定要删除规则「Test Rule」吗？此操作不可撤销。')).toBeInTheDocument();
+    expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
  });

  it('should delete rule after confirmation', async () => {
@@ -178,14 +178,6 @@ describe('RuleManager', () => {
    vi.restoreAllMocks();
  });

-  it('should show saved rule count', () => {
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    expect(screen.getByText('已保存 1/20 条')).toBeInTheDocument();
-  });
-
  it('should show field count for each rule', () => {
    mockedRuleStorage.getAll.mockReturnValue([mockRule]);

@@ -0,0 +1,117 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useGenerator } from '@/pages/TestDataGenerator/hooks/useGenerator';
+import type { FieldConfig, WorkerResponseMessage } from '@/types/testDataGenerator';
+
+const mockField: FieldConfig = {
+  id: 'field-1',
+  name: 'username',
+  generatorId: 'string',
+  params: {},
+  required: true,
+  nullRate: 0,
+  unique: false,
+};
+
+type WorkerListener = (event: MessageEvent<WorkerResponseMessage>) => void;
+
+class MockWorker {
+  static instances: MockWorker[] = [];
+  onmessage: WorkerListener | null = null;
+  onerror: ((event: ErrorEvent) => void) | null = null;
+  postedMessages: unknown[] = [];
+
+  constructor(_url: URL, _options?: WorkerOptions) {
+    MockWorker.instances.push(this);
+  }
+
+  postMessage(message: unknown) {
+    this.postedMessages.push(message);
+  }
+
+  terminate() {
+    const index = MockWorker.instances.indexOf(this);
+    if (index >= 0) {
+      MockWorker.instances.splice(index, 1);
+    }
+  }
+
+  emit(message: WorkerResponseMessage) {
+    this.onmessage?.({ data: message } as MessageEvent<WorkerResponseMessage>);
+  }
+}
+
+describe('useGenerator', () => {
+  beforeEach(() => {
+    MockWorker.instances = [];
+    vi.stubGlobal('Worker', MockWorker);
+  });
+
+  it('应忽略过期 generationId 的 complete 消息', async () => {
+    const { result } = renderHook(() => useGenerator());
+
+    act(() => {
+      result.current.generate([mockField], 10);
+    });
+
+    const worker = MockWorker.instances[0];
+    expect(worker).toBeDefined();
+
+    act(() => {
+      result.current.cancel();
+    });
+
+    act(() => {
+      result.current.generate([mockField], 5);
+    });
+
+    act(() => {
+      worker.emit({
+        type: 'complete',
+        generationId: 1,
+        payload: {
+          success: true,
+          data: [{ username: 'stale' }],
+          stats: { total: 10, success: 10, failed: 0, duration: 1 },
+        },
+      });
+    });
+
+    expect(result.current.result).toBeNull();
+    expect(result.current.isGenerating).toBe(true);
+
+    act(() => {
+      worker.emit({
+        type: 'complete',
+        generationId: 3,
+        payload: {
+          success: true,
+          data: [{ username: 'fresh' }],
+          stats: { total: 5, success: 5, failed: 0, duration: 1 },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.isGenerating).toBe(false);
+    });
+    expect(result.current.result?.data?.[0]).toEqual({ username: 'fresh' });
+  });
+
+  it('cancel 后应发送 cancel 消息并使 generationId 失效', () => {
+    const { result } = renderHook(() => useGenerator());
+
+    act(() => {
+      result.current.generate([mockField], 100);
+    });
+
+    const worker = MockWorker.instances[0];
+
+    act(() => {
+      result.current.cancel();
+    });
+
+    expect(result.current.isGenerating).toBe(false);
+    expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
+  });
+});
@@ -8,7 +8,8 @@ import type {
  FieldConfig,
  GenerateResult,
  GenerateProgress,
-  WorkerMessage,
+  WorkerRequestMessage,
+  WorkerResponseMessage,
 } from '@/types/testDataGenerator';

 export interface UseGeneratorReturn {
@@ -35,6 +36,7 @@ export function useGenerator(): UseGeneratorReturn {
  const [error, setError] = useState<string | null>(null);

  const workerRef = useRef<Worker | null>(null);
+  const generationIdRef = useRef(0);

  // 清理 Worker
  useEffect(() => {
@@ -58,22 +60,30 @@ export function useGenerator(): UseGeneratorReturn {
      type: 'module',
    });

-    worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
+    worker.onmessage = (e: MessageEvent<WorkerResponseMessage>) => {
      const data = e.data;
      const { type } = data;

+      if (data.generationId !== generationIdRef.current) {
+        return;
+      }
+
      switch (type) {
        case 'progress':
-          setProgress(data.payload as GenerateProgress);
+          setProgress(data.payload);
          break;
        case 'complete':
          setIsGenerating(false);
-          setResult(data.payload as GenerateResult);
+          if (data.payload.success) {
+            setResult(data.payload);
+          } else if (data.payload.error && data.payload.error !== '生成已取消') {
+            setError(data.payload.error);
+          }
          setProgress(null);
          break;
        case 'error':
          setIsGenerating(false);
-          setError((data.payload as { error: string }).error);
+          setError(data.payload.error);
          setProgress(null);
          break;
      }
@@ -100,15 +110,17 @@ export function useGenerator(): UseGeneratorReturn {
    (fields: FieldConfig[], count: number, csvMode = false) => {
      if (isGenerating) return;

+      const generationId = ++generationIdRef.current;
+
      setIsGenerating(true);
      setProgress(null);
      setResult(null);
      setError(null);

      const worker = getWorker();
-      const message: WorkerMessage = {
+      const message: WorkerRequestMessage = {
        type: 'start',
-        payload: { fields, count, csvMode },
+        payload: { generationId, fields, count, csvMode },
      };
      worker.postMessage(message);
    },
@@ -120,7 +132,8 @@ export function useGenerator(): UseGeneratorReturn {
   */
  const cancel = useCallback(() => {
    if (workerRef.current && isGenerating) {
-      const message: WorkerMessage = { type: 'cancel' };
+      ++generationIdRef.current;
+      const message: WorkerRequestMessage = { type: 'cancel' };
      workerRef.current.postMessage(message);
      setIsGenerating(false);
      setProgress(null);
@@ -4,6 +4,7 @@

 import { useState, useCallback, useRef, useEffect } from 'react';
 import { Settings, Database, Tag } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { useGenerator } from './hooks/useGenerator';
 import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
@@ -28,6 +29,7 @@ import RuleManager from './components/RuleManager';
 type TabType = 'fields' | 'rules';

 export default function TestDataGeneratorPage() {
+  const { t } = useI18n('testDataGenerator');
  const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();

  // 字段配置
@@ -50,11 +52,11 @@ export default function TestDataGeneratorPage() {
  useEffect(() => {
    if (result?.success && result.stats && result !== lastToastResultRef.current) {
      lastToastResultRef.current = result;
-      toast.success('生成完成', {
-        description: `${result.stats.total} ${'条数据'}`,
+      toast.success(t('testDataGenerator_generateSuccess'), {
+        description: `${result.stats.total} ${t('testDataGenerator_records')}`,
      });
    }
-  }, [result]);
+  }, [result, t]);

  // 添加新字段
  const handleAddField = useCallback(() => {
@@ -130,9 +132,9 @@ export default function TestDataGeneratorPage() {
      setEditingRule(rule);
      setActiveTab('fields');
      clearResult();
-      toast.success('正在编辑规则「{{name}}」');
+      toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
    },
-    [clearResult],
+    [clearResult, t],
  );

  // 保存规则成功后清除编辑状态
@@ -174,7 +176,7 @@ export default function TestDataGeneratorPage() {
                )}
              >
                <Settings className="h-4 w-4" />
-                {'字段配置'}
+                {t('testDataGenerator_fieldConfig')}
              </button>
              <button
                onClick={() => setActiveTab('rules')}
@@ -186,7 +188,7 @@ export default function TestDataGeneratorPage() {
                )}
              >
                <Tag className="h-4 w-4" />
-                {'规则管理'}
+                {t('testDataGenerator_ruleManagement')}
              </button>
            </div>

@@ -257,7 +259,7 @@ export default function TestDataGeneratorPage() {
            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
              <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
                <Database className="h-4 w-4" />
-                {'数据预览'}
+                {t('testDataGenerator_dataPreview')}
              </h3>
              <div className="h-[280px]">
                <DataPreview fields={fields} />
@@ -291,10 +293,10 @@ export default function TestDataGeneratorPage() {
          </div>
          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
            <Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
-              {'取消'}
+              {t('testDataGenerator_cancel')}
            </Button>
            <Button size="sm" onClick={() => setIsEditorOpen(false)}>
-              {'完成'}
+              {t('testDataGenerator_done')}
            </Button>
          </div>
        </DialogContent>
@@ -1,16 +1,18 @@
 import TextInputArea from '@/components/TextInputArea';
 import { formatBytes } from '@/utils/format';
+import { useI18n } from '@/utils/chromeI18n';
 import { useTextStatistics } from './useTextStatistics';
 import { cn } from '@/lib/utils';

 export default function Index() {
+  const { t } = useI18n('textStatistics');
  const { text, stats, setText } = useTextStatistics();

  const statItems = [
-    { label: '字符数', value: stats.characters },
-    { label: '单词数', value: stats.words },
-    { label: '行数', value: stats.lines },
-    { label: '字节大小', value: formatBytes(stats.bytes) },
+    { label: t('textStatistics:characters'), value: stats.characters },
+    { label: t('textStatistics:words'), value: stats.words },
+    { label: t('textStatistics:lines'), value: stats.lines },
+    { label: t('textStatistics:bytes'), value: formatBytes(stats.bytes) },
  ];

  return (
@@ -18,7 +20,7 @@ export default function Index() {
      <TextInputArea
        value={text}
        onChange={setText}
-        placeholder={'在此输入或粘贴文本...'}
+        placeholder={t('textStatistics:placeholder')}
        minRows={10}
        maxRows={18}
        showClear={true}
@@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { CopyButton } from '@/components/CopyButton';
-import type { UnitType } from '../constants';
-import { msToUnit } from '../constants';
+import type { UnitType } from './constants';
+import { msToUnit } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,6 +13,8 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
 }

 export default function LiveClock({ unit, onUseNow, className, ...props }: LiveClockProps) {
+  const { t } = useI18n('timestamp');
+
  const [rawTime, setRawTime] = useState(() => Date.now());

  useEffect(() => {
@@ -33,7 +36,7 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
      {...props}
    >
      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
-        {'当前时间戳'}
+        {t('timestamp:currentTs')}
      </span>

      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
@@ -44,15 +47,19 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
        type="button"
        onClick={() => {
          onUseNow(rawTime);
-          toast.success('已使用当前时间戳');
+          toast.success(t('timestamp:usedSuccess'));
        }}
-        title={'填充到下方'}
+        title={t('timestamp:useNowTooltip')}
        className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
      >
        <Clock className="w-3.5 h-3.5" />
      </button>

-      <CopyButton text={text} tooltip={'复制时间戳'} className="h-7 w-7 rounded-md border" />
+      <CopyButton
+        text={text}
+        tooltip={t('timestamp:copyTsTooltip')}
+        className="h-7 w-7 rounded-md border"
+      />
    </div>
  );
 }
@@ -1,5 +1,6 @@
 import React from 'react';
 import { CopyButton } from '@/components/CopyButton';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -13,6 +14,8 @@ export default function ResultView({
  className,
  ...props
 }: ResultViewProps) {
+  const { t } = useI18n('timestamp');
+
  if (!result) {
    if (!showEmptyPlaceholder) return null;
    return (
@@ -23,7 +26,7 @@ export default function ResultView({
        )}
        {...props}
      >
-        {'请输入并点击转换'}
+        {t('timestamp:resultEmpty')}
      </div>
    );
  }
@@ -31,7 +34,7 @@ export default function ResultView({
  return (
    <div className={cn('flex flex-col w-full', className)} {...props}>
      <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
-        {'转换结果'}
+        {t('timestamp:resultLabel')}
      </span>

      <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
@@ -40,7 +43,7 @@ export default function ResultView({
        </span>
        <CopyButton
          text={result}
-          tooltip={'复制结果'}
+          tooltip={t('timestamp:copyResultTooltip')}
          className="h-8 w-8 rounded-md shrink-0 border"
        />
      </div>
@@ -1,11 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import Index from '../index';
-
-describe('Timestamp 页面', () => {
-  it('应该渲染模式切换按钮', () => {
-    render(<Index />);
-    // 基本渲染测试：页面含多个模式切换按钮，应至少渲染一个
-    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
-  });
-});
@@ -1,9 +1,10 @@
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { ZONES } from './constants';
 import type { ModeType, UnitType, ZoneType } from './constants';
-import LiveClock from './components/LiveClock';
-import ResultView from './components/ResultView';
+import LiveClock from './LiveClock';
+import ResultView from './ResultView';
 import { useTimestampConverter } from './useTimestampConverter';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';

 import { Input } from '@/components/ui/input';
@@ -16,16 +17,18 @@ import {
 } from '@/components/ui/select';

 const MODE_OPTIONS: { value: ModeType; label: string }[] = [
-  { value: 'ts2dt', label: '时间戳转日期' },
-  { value: 'dt2ts', label: '日期转时间戳' },
+  { value: 'ts2dt', label: 'timestamp:tsToDate' },
+  { value: 'dt2ts', label: 'timestamp:dateToTs' },
 ];

 const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
-  { value: 'ms', label: '毫秒' },
-  { value: 's', label: '秒' },
+  { value: 'ms', label: 'timestamp:unitMs' },
+  { value: 's', label: 'timestamp:unitS' },
 ];

 export default function Index() {
+  const { t } = useI18n('timestamp');
+
  const {
    mode,
    input,
@@ -50,7 +53,7 @@ export default function Index() {
            <div className="flex flex-col gap-4">
              <SwitchButtonGroup
                value={mode}
-                options={MODE_OPTIONS}
+                options={MODE_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
                onChange={setMode}
                size="small"
              />
@@ -58,7 +61,9 @@ export default function Index() {
              <div className="flex flex-col gap-1.5">
                <Input
                  type="text"
-                  placeholder={mode === 'ts2dt' ? '输入时间戳...' : 'YYYY-MM-DD HH:mm:ss'}
+                  placeholder={
+                    mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
+                  }
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  className={cn(
@@ -73,7 +78,7 @@ export default function Index() {
              <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
                <SwitchButtonGroup
                  value={unit}
-                  options={UNIT_OPTIONS}
+                  options={UNIT_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
                  onChange={setUnit}
                  size="small"
                  className="sm:w-auto shrink-0"
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType, ModeType } from './constants';
 import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';

 export interface UseTimestampConverterReturn {
@@ -28,6 +29,7 @@ function isTimestampLike(input: string): boolean {
 }

 export function useTimestampConverter(): UseTimestampConverterReturn {
+  const { t } = useI18n('timestamp');
  const [mode, setMode] = useState<ModeType>('ts2dt');
  const [unit, setUnit] = useState<UnitType>('ms');
  const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
@@ -41,22 +43,22 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
    if (mode === 'ts2dt') {
      const num = Number(rawInput);
      if (isNaN(num)) {
-        return { result: '', error: '请输入有效数字' };
+        return { result: '', error: t('timestamp:errors.invalidNumber') };
      }
      const d = dayjsFromTimestamp(num, unit);
      if (!d.isValid()) {
-        return { result: '', error: '无效时间戳' };
+        return { result: '', error: t('timestamp:errors.invalidTimestamp') };
      }
      return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
    } else {
      const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
      if (!d.isValid()) {
-        return { result: '', error: '无效的日期格式' };
+        return { result: '', error: t('timestamp:errors.invalidFormat') };
      }
      const ms = d.valueOf();
      return { result: String(msToUnit(ms, unit)), error: '' };
    }
-  }, [input, mode, unit, zone]);
+  }, [input, mode, unit, zone, t]);

  const handleContextMenuData = (payload: string) => {
    const trimmed = payload.trim();
@@ -156,19 +156,29 @@ export interface GenerateProgress {
 }

 /**
- * Worker 消息类型
+ * Worker 请求消息类型
 */
-export type WorkerMessage =
+export type WorkerRequestMessage =
  | { type: 'start'; payload: WorkerStartPayload }
-  | { type: 'progress'; payload: GenerateProgress }
-  | { type: 'complete'; payload: GenerateResult }
-  | { type: 'error'; payload: { error: string } }
  | { type: 'cancel' };

+/**
+ * Worker 响应消息类型
+ */
+export type WorkerResponseMessage =
+  | { type: 'progress'; generationId: number; payload: GenerateProgress }
+  | { type: 'complete'; generationId: number; payload: GenerateResult }
+  | { type: 'error'; generationId: number; payload: { error: string } };
+
+/** @deprecated 使用 WorkerRequestMessage | WorkerResponseMessage */
+export type WorkerMessage = WorkerRequestMessage | WorkerResponseMessage;
+
 /**
 * Worker 启动参数
 */
 export interface WorkerStartPayload {
+  /** 生成任务 ID，用于忽略过期 Worker 响应 */
+  generationId: number;
  /** 字段配置列表 */
  fields: FieldConfig[];
  /** 生成数量 */
@@ -7,6 +7,7 @@ import {
  isSupportedImageType,
  isSupportedImageExtension,
  extractMimeTypeFromDataUri,
+  formatFileSize,
  base64ToBytes,
  sniffMimeFromBytes,
  base64ToBlob,
@@ -184,6 +185,26 @@ describe('extractMimeTypeFromDataUri', () => {
  });
 });

+describe('formatFileSize', () => {
+  it('应该格式化字节', () => {
+    expect(formatFileSize(0)).toBe('0 B');
+    expect(formatFileSize(512)).toBe('512 B');
+  });
+
+  it('应该格式化 KB', () => {
+    expect(formatFileSize(1024)).toBe('1.0 KB');
+    expect(formatFileSize(1536)).toBe('1.5 KB');
+  });
+
+  it('应该格式化 MB', () => {
+    expect(formatFileSize(1048576)).toBe('1.00 MB');
+  });
+
+  it('应该格式化 GB', () => {
+    expect(formatFileSize(1073741824)).toBe('1.00 GB');
+  });
+});
+
 describe('base64ToBytes', () => {
  it('应该解码标准 ASCII Base64 为字节序列', () => {
    const bytes = base64ToBytes('aGVsbG8=');
@@ -50,7 +50,7 @@ describe('contextMenu', () => {
      );
      expect(imageMenus).toHaveLength(1);
      expect(imageMenus[0].id).toBe('qrCode-image');
-      expect(imageMenus[0].title).toBe('解析图片二维码');
+      expect(imageMenus[0].title).toBe('🖼️ 解析图片二维码');
    });
  });

@@ -73,7 +73,7 @@ describe('contextMenu', () => {

      expect(chrome.contextMenus.create).toHaveBeenCalledWith({
        id: 'jwt',
-        title: '解析 JWT',
+        title: '🔑 解析 JWT',
        contexts: ['selection'],
        parentId: 'testing-tools-parent',
      });
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { diffJson } from '../diffEngine';
+import { diffJson } from '../../pages/JsonTools/diffEngine';

 describe('diffJson', () => {
  it('should detect added property', () => {
@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as ruleStorage from '../ruleStorage';
+
+const STORAGE_KEY = 'testDataGenerator_rules';
+
+const mockField = {
+  id: 'field-1',
+  name: 'username',
+  generatorId: 'string',
+  params: {},
+  required: true,
+  nullRate: 0,
+  unique: false,
+};
+
+describe('ruleStorage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('save 在 localStorage 写入失败时应返回 null', () => {
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    const result = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+
+    expect(result).toBeNull();
+    expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('update 在 localStorage 写入失败时应返回 null', () => {
+    const saved = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+    expect(saved).not.toBeNull();
+
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    const updated = ruleStorage.update(saved!.id, { name: 'Updated Rule' });
+    expect(updated).toBeNull();
+  });
+
+  it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
+    const saved = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+    expect(saved).not.toBeNull();
+
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    expect(ruleStorage.deleteRule(saved!.id)).toBe(false);
+    expect(ruleStorage.getById(saved!.id)).toBeDefined();
+  });
+});
@@ -2,6 +2,8 @@
 * Base64 转换器工具函数
 */

+import { formatBytes } from './format';
+
 /** 最大文件大小限制（10 MB） */
 export const MAX_FILE_SIZE = 10 * 1024 * 1024;

@@ -210,6 +212,17 @@ export function extractMimeTypeFromDataUri(dataUri: string): string {
  return match ? match[1] : 'application/octet-stream';
 }

+/**
+ * 格式化文件大小显示
+ *
+ * @deprecated 直接使用 {@link formatBytes} 代替
+ * @param bytes 字节数
+ * @returns 格式化后的字符串
+ */
+export function formatFileSize(bytes: number): string {
+  return formatBytes(bytes);
+}
+
 /**
 * Base64 解码为二进制后的产物
 */
@@ -0,0 +1,68 @@
+/**
+ * chrome.i18n 类型安全 wrapper
+ * 提供与 react-i18next 兼容的接口
+ */
+
+/**
+ * 获取翻译文本
+ * @param msgId 翻译 key（如 'timestamp_pageTitle'）
+ * @param substitutions 占位符替换值（可选）
+ * @returns 翻译后的文本
+ */
+export function getMessage(msgId: string, substitutions?: string[]): string {
+  try {
+    return chrome.i18n.getMessage(msgId, substitutions);
+  } catch (error) {
+    console.warn(`[chrome.i18n] 无法获取翻译: ${msgId}`, error);
+    return msgId; // 回退到 key 本身
+  }
+}
+
+/**
+ * react-i18next 兼容的 Hook
+ * 返回 t 函数和相关信息
+ */
+export function useI18n(namespace?: string | string[]) {
+  const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
+
+  const t = (key: string, options?: Record<string, unknown>): string => {
+    // 统一将分隔符转换为下划线，兼容 'namespace:key.path' 和 'key.path' 两种写法
+    const msgId = key.replace(':', '_').replace(/\./g, '_');
+
+    // 先尝试直接查找 key
+    let message = getMessage(msgId);
+
+    // 如果直接查找未命中（空字符串或返回 key 本身），尝试命名空间前缀（使用转换后的 msgId）
+    if ((!message || message === msgId) && namespaces.length > 0) {
+      for (const ns of namespaces) {
+        const candidate = `${ns}_${msgId}`;
+        const result = getMessage(candidate);
+        if (result !== candidate) {
+          message = result;
+          break;
+        }
+      }
+    }
+
+    if (options) {
+      for (const [placeholder, value] of Object.entries(options)) {
+        message = message.replace(`{{${placeholder}}}`, String(value));
+      }
+    }
+
+    return message;
+  };
+
+  return {
+    t,
+    i18n: {
+      language: 'zh',
+      changeLanguage: (_lng?: string) => {
+        // chrome.i18n 无法动态切换语言，需要刷新页面
+        console.warn('[chrome.i18n] 无法动态切换语言，需要刷新页面');
+        return Promise.resolve();
+      },
+    },
+    isLoaded: true,
+  };
+}
@@ -44,43 +44,43 @@ export const CONTEXT_MENU_CONFIGS: ContextMenuItemConfig[] = [
  },
  {
    id: 'jwt',
-    title: '解析 JWT',
+    title: '🔑 解析 JWT',
    contexts: [chrome.contextMenus.ContextType.SELECTION],
    parentId: PARENT_MENU_ID,
  },
  {
    id: 'base64Converter',
-    title: 'Base64 解码',
+    title: '🔄 Base64 解码',
    contexts: [chrome.contextMenus.ContextType.SELECTION],
    parentId: PARENT_MENU_ID,
  },
  {
    id: 'textStatistics',
-    title: '统计选中文本',
+    title: '📊 统计选中文本',
    contexts: [chrome.contextMenus.ContextType.SELECTION],
    parentId: PARENT_MENU_ID,
  },
  {
    id: 'timestamp',
-    title: '转换时间戳',
+    title: '⏰ 转换时间戳',
    contexts: [chrome.contextMenus.ContextType.SELECTION],
    parentId: PARENT_MENU_ID,
  },
  {
    id: 'storageCleaner',
-    title: '清理当前网站存储',
+    title: '🧹 清理当前网站存储',
    contexts: [chrome.contextMenus.ContextType.PAGE],
    parentId: PARENT_MENU_ID,
  },
  {
    id: 'qrCode-page',
-    title: '网页链接转二维码',
+    title: '🔗 网页链接转二维码',
    contexts: [chrome.contextMenus.ContextType.PAGE],
    parentId: PARENT_MENU_ID,
  },
  {
    id: 'qrCode-image',
-    title: '解析图片二维码',
+    title: '🖼️ 解析图片二维码',
    contexts: [chrome.contextMenus.ContextType.IMAGE],
    parentId: PARENT_MENU_ID,
  },
@@ -2,6 +2,8 @@
 * JWT 解析工具
 */

+import { getMessage } from '@/utils/chromeI18n';
+
 interface JwtHeader {
  alg: string;
  typ?: string;
@@ -41,7 +43,7 @@ export function decodeBase64Url(str: string): string {
  const pad = base64.length % 4;
  if (pad) {
    if (pad === 1) {
-      throw new Error('无效的 Base64URL 字符串');
+      throw new Error(getMessage('jwt_errors_invalidBase64String'));
    }
    base64 += new Array(5 - pad).join('=');
  }
@@ -56,9 +58,10 @@ export function decodeBase64Url(str: string): string {
    const decoder = new TextDecoder('utf-8');
    return decoder.decode(bytes);
  } catch (e) {
-    throw new Error('Base64 解码失败: ' + (e instanceof Error ? e.message : String(e)), {
-      cause: e,
-    });
+    throw new Error(
+      getMessage('jwt_errors_failedToDecode') + (e instanceof Error ? e.message : String(e)),
+      { cause: e },
+    );
  }
 }

@@ -75,7 +78,7 @@ export function parseJwt(token: string): JwtResult {
      payload: null,
      signature: '',
      raw: { header: '', payload: '', signature: '' },
-      error: 'JWT 格式无效：应包含 3 个部分（header.payload.signature）',
+      error: getMessage('jwt_errors_invalidFormat'),
    };
  }

@@ -95,7 +98,8 @@ export function parseJwt(token: string): JwtResult {
    const headerJson = decodeBase64Url(headerB64);
    result.header = JSON.parse(headerJson);
  } catch (e) {
-    result.error = 'JWT Header 解析失败: ' + (e instanceof Error ? e.message : String(e));
+    result.error =
+      getMessage('jwt_errors_parseHeaderFailed') + (e instanceof Error ? e.message : String(e));
    return result;
  }

@@ -103,7 +107,8 @@ export function parseJwt(token: string): JwtResult {
    const payloadJson = decodeBase64Url(payloadB64);
    result.payload = JSON.parse(payloadJson);
  } catch (e) {
-    result.error = 'JWT Payload 解析失败: ' + (e instanceof Error ? e.message : String(e));
+    result.error =
+      getMessage('jwt_errors_parsePayloadFailed') + (e instanceof Error ? e.message : String(e));
    return result;
  }

@@ -9,7 +9,7 @@ import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
 const STORAGE_KEY = 'testDataGenerator_rules';

 /** 最大规则数量 */
-export const MAX_RULES = 20;
+const MAX_RULES = 20;

 /**
 * 获取所有规则
@@ -78,7 +78,9 @@ export function save(
      useCount: 0,
    };
    rules.unshift(newRule);
-    setAll(rules);
+    if (!setAll(rules)) {
+      return null;
+    }
    return newRule;
  }

@@ -95,7 +97,9 @@ export function save(
    updatedAt: now,
  };
  rules[index] = updatedRule;
-  setAll(rules);
+  if (!setAll(rules)) {
+    return null;
+  }
  return updatedRule;
 }

@@ -117,7 +121,9 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
    updatedAt: Date.now(),
  };
  rules[index] = updatedRule;
-  setAll(rules);
+  if (!setAll(rules)) {
+    return null;
+  }
  return updatedRule;
 }

@@ -132,8 +138,7 @@ export function deleteRule(id: string): boolean {
    return false;
  }
  rules.splice(index, 1);
-  setAll(rules);
-  return true;
+  return setAll(rules);
 }

 /**
@@ -165,7 +170,9 @@ export function duplicate(id: string, copySuffix = '（副本）'): DataRule | n

  const rules = getAll();
  rules.unshift(newRule);
-  setAll(rules);
+  if (!setAll(rules)) {
+    return null;
+  }
  return newRule;
 }

@@ -267,11 +274,13 @@ export function clear(): void {
 /**
 * 保存所有规则到存储
 */
-function setAll(rules: DataRule[]): void {
+function setAll(rules: DataRule[]): boolean {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
+    return true;
  } catch (error) {
    console.error('[ruleStorage] 保存规则失败:', error);
+    return false;
  }
 }

@@ -20,15 +20,6 @@ const CLEAN_OPTION_KEYS: (keyof StorageCleanerOptions)[] = [
  'serviceWorkers',
 ];

-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 export async function getCurrentTab() {
  // For popup pages, we need to get the active tab from the browser window that triggered the popup.
  // We should ONLY care about the currently active tab in the last focused window.
@@ -371,19 +362,22 @@ export async function clearStorage(
  return result;
 }

-export function formatCleaningResult(result: CleaningResult): string {
+export function formatCleaningResult(
+  result: CleaningResult,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): string {
  const parts: string[] = [];

  for (const key of CLEAN_OPTION_KEYS) {
    const r = result[key];
    if (r?.success && r.count > 0) {
-      parts.push(`${r.count} ${OPTION_LABELS[key] || key}`);
+      parts.push(`${r.count} ${t(`storageCleaner:options.${key}`)}`);
    }
  }

  if (parts.length === 0) {
-    return '该页面没有可清理的存储数据';
+    return t('storageCleaner:noDataToClean');
  }

-  return `清理了 ${parts.join(', ')}`;
+  return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
 }
@@ -6,11 +6,14 @@
 import { getGeneratorById } from '@/lib/generators';
 import type {
  FieldConfig,
-  WorkerMessage,
+  WorkerRequestMessage,
  GenerateResult,
  GenerateProgress,
 } from '@/types/testDataGenerator';

+/** 每生成 N 行让出一次事件循环，以便处理 cancel 消息 */
+const YIELD_EVERY = 100;
+
 // 生成结果缓存
 let generatedData: Record<string, unknown>[] = [];
 let isCancelled = false;
@@ -18,7 +21,7 @@ let isCancelled = false;
 /**
 * Worker 消息处理器
 */
-self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
  const data = e.data;
  const { type } = data;

@@ -37,11 +40,12 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
 * 处理开始生成消息
 */
 async function handleStart(payload: {
+  generationId: number;
  fields: FieldConfig[];
  count: number;
  csvMode: boolean;
 }): Promise<void> {
-  const { fields, count } = payload;
+  const { generationId, fields, count } = payload;
  generatedData = [];

  try {
@@ -51,6 +55,7 @@ async function handleStart(payload: {
      if (!generator) {
        self.postMessage({
          type: 'error',
+          generationId,
          payload: { error: `生成器 "${field.generatorId}" 不存在` },
        });
        return;
@@ -65,6 +70,7 @@ async function handleStart(payload: {
      if (isCancelled) {
        self.postMessage({
          type: 'complete',
+          generationId,
          payload: {
            success: false,
            error: '生成已取消',
@@ -136,7 +142,23 @@ async function handleStart(payload: {
          total: count,
          estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
        };
-        self.postMessage({ type: 'progress', payload: progress });
+        self.postMessage({ type: 'progress', generationId, payload: progress });
+      }
+
+      // 定期让出事件循环，使 cancel 消息能被处理
+      if ((i + 1) % YIELD_EVERY === 0) {
+        await new Promise<void>((resolve) => setTimeout(resolve, 0));
+        if (isCancelled) {
+          self.postMessage({
+            type: 'complete',
+            generationId,
+            payload: {
+              success: false,
+              error: '生成已取消',
+            },
+          });
+          return;
+        }
      }
    }

@@ -155,10 +177,11 @@ async function handleStart(payload: {
      },
    };

-    self.postMessage({ type: 'complete', payload: result });
+    self.postMessage({ type: 'complete', generationId, payload: result });
  } catch (error) {
    self.postMessage({
      type: 'error',
+      generationId,
      payload: { error: `生成失败: ${error}` },
    });
  }
@@ -1,6 +1,41 @@
 import '@testing-library/jest-dom';
 import { afterEach, beforeEach, vi } from 'vitest';
 import React from 'react';
+import zhMessages from './public/_locales/zh_CN/messages.json';
+
+// Type assertion to allow string indexing
+const zhMessagesMap = zhMessages as Record<string, { message: string }>;
+
+vi.mock('@/utils/chromeI18n', () => ({
+  useI18n: (ns?: string | string[]) => ({
+    t: (key: string) => {
+      let msgId = key;
+      // Handle namespace:key format
+      if (key.includes(':')) {
+        msgId = key.replace(':', '_').replace(/\./g, '_');
+      }
+      // Try direct key first
+      if (zhMessagesMap[msgId]) return zhMessagesMap[msgId].message;
+      // Try namespace prefix (using converted msgId)
+      if (ns) {
+        const namespaces = Array.isArray(ns) ? ns : [ns];
+        for (const n of namespaces) {
+          const candidate = `${n}_${msgId}`;
+          if (zhMessagesMap[candidate]) return zhMessagesMap[candidate].message;
+        }
+      }
+      return msgId;
+    },
+    i18n: {
+      changeLanguage: vi.fn().mockResolvedValue(undefined),
+      language: 'zh',
+    },
+    isLoaded: true,
+  }),
+  getMessage: (msgId: string) => zhMessagesMap[msgId]?.message ?? msgId,
+  getLanguage: () => 'zh',
+  preloadNamespaces: vi.fn().mockResolvedValue(undefined),
+}));

 vi.mock('@/components/CopyButton', () => ({
  CopyButton: ({
@@ -90,20 +125,6 @@ const webExtensionMock = {
    sendMessage: vi.fn().mockResolvedValue(undefined),
    create: vi.fn().mockResolvedValue({}),
    reload: vi.fn().mockResolvedValue(undefined),
-    onActivated: {
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-    },
-    onUpdated: {
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-    },
-  },
-  windows: {
-    onFocusChanged: {
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-    },
  },
  runtime: {
    id: 'test-extension-id',
@@ -45,9 +45,12 @@ export default defineConfig({
    name: 'Testing Tool',
    description: 'A tool for testing web applications.',
    version_name: undefined,
+    default_locale: 'zh_CN',
    permissions: [
      'storage',
+      'unlimitedStorage',
      'clipboardWrite',
+      'activeTab',
      'scripting',
      'tabs',
      'cookies',
@@ -63,7 +66,7 @@ export default defineConfig({
      '128': 'icon/128.png',
    },
    action: {
-      default_title: 'Testing Tool',
+      default_title: '__MSG_appName__',
      default_icon: {
        '16': 'icon/16.png',
        '32': 'icon/32.png',
Author	SHA1	Message	Date
Cursor Agent	42ab669d5f	fix(测试数据生成器): 修复 Worker 取消失效与规则存储静默失败 - 为生成任务引入 generationId，忽略过期 Worker 响应，避免取消后展示错误数据 - Worker 每 100 行让出事件循环，使 cancel 消息能被及时处理 - ruleStorage.setAll 返回写入结果，save/update/delete 在 QuotaExceeded 时返回失败 - 补充 useGenerator 与 ruleStorage 单元测试	2026-06-26 08:41:32 +00:00
LingandRX	a163297de4	develop (#68 ) * docs(AGENTS.md): 添加 Git Commit 必须使用中文描述的规范 * docs: 更新测试数据生成器功能设计文档 * refactor: 删除死代码 * docs: 统一测试数据生成器文档，移除 SQL/TypeScript 导出，修复接口命名不一致 * feat: 实现测试数据生成器功能 * docs: 更新 README 和 AGENTS 文档，补充测试数据生成器模块说明	2026-06-07 00:04:53 +08:00
LingandRX	a5d86a92c2	develop (#67 ) feat: 升级项目 Logo、完善 toast 提示及优化工程化配置 ### Features - logo: 替换全套项目图标，更新 wxt.config.ts 浏览器扩展图标配置。 ### Bug Fixes - ui/toast: 引入 <Toaster> 组件修复 toast 无法显示问题，并调整位置为正下方。 - i18n: 统一将 t() 函数中的 `.` 和 `:` 转换为 `_`，修复国际化文案读取失败问题。 - context-menu: 限制 srcUrl 检查仅在二维码图片菜单项生效，避免误判。 - hooks: 修复 pre-push 钩子，仅对变更文件进行 eslint 检查，并支持无 upstream 时的回退对比。 - components: 修复 CopyButton 动画与组件导入方式，并补齐无障碍属性与测试。 - async: 延迟生成二维码以正确渲染 loading 状态，并适配相关异步测试。 ### Refactor & Cleans - clean: 清理未使用的组件（ToolCard）、Hook（useDebounce）及多个未使用的工具函数导出。 - structure: 统一移动测试文件至 __tests__ 目录，移除不必要的类型导出。 ### Documentation - docs: 在 AGENTS.md 中明确规范 Git Commit 必须使用中文描述。	2026-06-06 01:07:27 +08:00
LingandRX	c992986789	fix(CopyButton): 修复 review 反馈并补充测试 (#66 ) * fix: remove non-functional animation classes from CopyButton * test(CopyButton): 补充单元测试覆盖边界场景 * fix: unify CopyButton imports to named export across all consumers * fix(CopyButton): add aria-label for screen reader accessibility	2026-06-05 21:15:48 +08:00
LingandRX	70b799aa2d	fix: add missing Toaster component to enable toast display (#65 ) The project was calling toast.success/error/warning from sonner in 7 files, but the <Toaster> component was never rendered in the React tree. This meant sonner stored toast data internally but no UI was ever displayed to users. Changes: - Create src/components/ui/sonner.tsx with shadcn/ui-style Toaster wrapper that integrates with ThemeModeProvider for light/dark theme support - Add <Toaster /> to AppRoot.tsx so it works across all entry points (popup, sidepanel, browser-tab) fix: always convert dots to underscores in i18n t() key lookup The t() function only converted dots to underscores when the key contained a colon (namespace:key format). Keys using dot notation like 'messages.copySuccess' were passed directly to chrome.i18n.getMessage() without dot-to-underscore conversion, causing lookups to fail silently and return empty strings - resulting in toast notifications with no text. Now all separators (both ':' and '.') are consistently converted to '_' regardless of format, matching the messages.json key convention. fix: position toast at bottom-center instead of bottom-right	2026-06-05 19:29:21 +08:00
LingandRX	58af2af37b	fix: 右键菜单 srcUrl 误判、pre-push 变更文件检测、generating 状态不可见 (#64 ) * fix: 修复右键菜单 srcUrl 误判、pre-push 全量扫描、generating 状态不可见问题 - contextMenu: srcUrl 检查限定为 qrCode-image 菜单项，避免其他菜单误返回图片 URL - pre-push: eslint 改为只检查变更文件（git diff 过滤），tsc 保留全项目检查 - useQrCode: confirmGenerate 用 setTimeout 延迟生成，让 loading 状态先被 React 渲染 - tests: 生成相关测试改为 async + waitFor 适配异步 confirmGenerate * fix(hooks): pre-push 无 upstream 时回退到 origin/main 对比 * fix(hooks): 用 merge-base 替代 rev-parse 修复 pre-push 变更文件检测	2026-06-05 13:10:44 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>