chore: upgrade dependencies (WXT v0.20.26 + low/medium risk deps) (#41)

* feat: 添加 contextMenus 权限和消息类型定义 * feat: 实现右键菜单注册与点击分流逻辑 - 新增 utils/contextMenu.ts 封装菜单配置和解析函数 - 在 background.ts 监听 onInstalled 初始化菜单 - 实现 contextMenus.onClicked 点击事件处理 - 分流逻辑：优先发送到侧边栏，否则打开 options 页面 - 添加 contextMenu 单元测试（15个测试用例） - 更新 vitest.setup.ts 添加 contextMenus mock * feat: 实现 Content Script 原位轻量提示 UI - 新增 uiPopover.ts 实现原位弹窗组件（深色主题、自动定位、自动隐藏） - 新增 contextMenuHandler.ts 处理右键菜单消息 - 时间戳转换：在点击位置显示转换结果 - 文本统计：显示字符/单词/行数/字节统计 - 更新 messageHandler.ts 挂载右键菜单消息监听 * feat: 实现 React 页面层右键菜单数据联动 - 新增 useContextMenuData Hook 处理右键菜单数据传递 - 重构 Jwt/Base64Converter/TextStatistics/QrCode 页面接收右键数据 - RouterProvider 支持从 URL 参数解析右键菜单数据 - 添加 contextMenu/pendingData 存储键到 StorageSchema - 添加 useContextMenuData 单元测试（12个测试用例） * test: 添加 background 单元测试与边界情况处理 - 新增 entrypoints/__tests__/background.test.ts (12个测试用例) - 超长文本截断限制 (>10000字符) - Base64 内联图片拦截并返回错误提示 - 更新 parseContextMenuClick 返回 ParseResult 格式 - 更新测试匹配新的返回格式 - lint/typecheck/test 全部通过 (579个测试) * fix: 修复右键菜单跳转到错误页面的问题 - 将 options 页面路径从 '/entrypoints/options/index.html' 修正为 '/options.html' - WXT 构建后 entrypoints/options/index.html 会输出为根目录的 options.html * fix: 修复右键菜单跳转目标为 popup 页面 - 将 fallback 页面从 options.html 改为 popup.html - popup 页面使用 RouterProvider，可以正确处理 URL 参数并跳转到对应功能页面 - options 页面是独立设置页，不支持 URL 参数路由 * fix: 使用 openPopup() 替代 tabs.create() 打开弹窗 - background.ts: 使用 browser.action.openPopup() 打开 popup 弹窗 - 先保存数据到 storage，然后打开 popup - RouterProvider.tsx: 初始化时检查 storage 中的 pendingData 并跳转到对应页面 - 移除之前错误的 tabs.create() 方式 * fix: 修复右键菜单数据未传递到目标页面的问题 - RouterProvider 不再提前清除 pendingData - 让目标页面的 useContextMenuData 来消费和清除数据 - 这样确保 TextStatistics 等页面能正确接收选中的文本 * fix: 修复 popup 已打开时右键菜单不生效的问题 - 在 RouterProvider 中添加对 contextMenu/pendingData 的 storage 变化监听 - 当 pendingData 变化时，自动跳转到对应功能页面 - 解决了 openPopup() 只聚焦已有窗口而不触发重新挂载的问题 * feat: 支持右键菜单图片二维码识别 - 在 qrCodeParser.ts 中添加 parseQrCodeFromUrl 函数，支持从图片 URL 解析二维码 - 在 QrCodeToUrlSection 中使用 useContextMenuData 接收右键菜单传递的图片 URL - 自动下载图片并解析二维码，显示解析结果 * refactor: 暂时移除图片二维码识别功能 - 删除 qrCode-image 右键菜单配置 - 删除 parseQrCodeFromUrl 函数 - 删除 QrCodeToUrlSection 中的 useContextMenuData 相关代码 - 更新相关测试用例 * feat: 支持右键菜单时间戳转换 - 在 useTimestampConverter 中添加 useContextMenuData hook - 智能识别输入是时间戳还是日期时间字符串 - 自动切换到对应模式并执行转换 - 时间戳自动识别秒/毫秒单位 * fix: 修复右键菜单功能的多个逻辑漏洞 1. 修复时区硬编码问题 - 使用用户选择的时区而非固定 Asia/Shanghai 2. 修复 openPopup() 失败后数据残留 - 失败时清除 storage 中的待处理数据 3. 统一数据过期时间常量 - 导出 CONTEXT_MENU_DATA_EXPIRY_MS 并统一使用 4. 修复 featureKey 类型断言不安全 - 使用映射表处理非常规菜单 ID * refactor(qrcode): 提取独立组件并添加单元测试 - 创建 pages/QrCode/types.ts 定义状态类型接口 - 提取 QrCodePreview 组件用于二维码预览和操作 - 提取 ImageUploader 组件封装图片上传、拖拽、粘贴逻辑 - 重构 UrlToQrCodeSection 状态提升到父组件 - 重构 QrCodeToUrlSection 通过回调传递解析结果 - 更新主页面 index.tsx 集中管理所有状态 - 为 QrCodePreview 和 ImageUploader 添加单元测试 (23 个用例) * refactor(qrcode): 引入通用组件并重构双栏布局 - 引入 SwitchButtonGroup 用于模式切换 - 引入 TextInputArea 用于文本输入和结果展示 - 使用 MUI Grid 构建响应式双栏布局 - 实现 generate/parse 模式下的左右面板内容切换 - 修复 iconColor 颜色格式错误，使用 qrCodePageStyles.primaryColor * refactor(qrcode): 国际化补充、质量保障与错误处理优化 - 补充 i18n 翻译键（generateMode, parseMode, pasteHint 等） - 创建 useDebounce Hook 实现输入防抖 (200ms) - 使用 useRef 解决 useEffect 无限循环问题 - 编写 pages/QrCode 单元测试 (7 个用例) - 优化右键菜单错误处理，改进用户提示 - 运行 603 个测试全部通过 * refactor(qrcode): 组件化重构，采用 Context + Hook 模式 - 创建 QrCodeContext 和 QrCodeProvider 管理共享状态 - 提取 useQrCode Hook 封装所有状态和业务逻辑 - 创建 GeneratePanel 组件处理二维码生成模式 - 创建 ParsePanel 组件处理二维码解析模式 - 简化 index.tsx 为容器组件 (340行 → 47行) - 删除未使用的旧组件文件 (QrCodeToUrlSection, UrlToQrCodeSection) - 清理 types.ts 中未使用的类型定义 - 603 个测试全部通过 * fix(qrcode): 固定二维码预览图片尺寸，避免布局抖动 - 设置 QR_PREVIEW_IMAGE 固定尺寸 250x250 - 与 QRious 生成的二维码大小保持一致 - 解决输入内容变化时预览窗口大小跳动问题 * fix(qrcode): 修复切换 tab 后二维码图片失效问题 - 移除 ImageUploader 组件卸载时的预览 URL 释放逻辑 - 在 useQrCode hook 中统一管理预览 URL 生命周期 - 创建新预览 URL 前释放旧的，避免内存泄漏 * fix(qrcode): 固定图片上传区域高度，避免布局抖动 - 将 DROPZONE 的 minHeight: 200 改为 height: 250 - 与二维码预览图片高度保持一致 - 解决上传图片时 div 高度变化问题 * refactor(qrCode): 优化二维码解析功能 - 将'二维码转 URL'改为'二维码转文本' - 将解析结果的文本预览框的 placeholder 置为空 - 去除手动解析二维码功能，只保留自动解析 * fix(pageHeader): 使用 MUI 主题色替代硬编码颜色，支持暗色模式 * feat(pageHeader): popup 模式下隐藏 PageHeader 组件 * fix(i18n): 统一使用 useLazyTranslation 避免翻译 key 闪烁 * perf: 配置 manualChunks 拆分 vendor chunk，优化打包体积 - 使用 Vite 插件 manualChunksForHtmlOnly 仅对 HTML 多入口构建生效 - 跳过 background/content-script 的 IIFE 构建（不支持 manualChunks） - 拆分 vendor-react (193KB)、vendor-mui (326KB)、vendor-i18n (55KB) - 按需加载 vendor-qr (78KB)、vendor-dnd (45KB)、vendor-markdown (41KB) - PageErrorBoundary chunk 从 454KB 降至 36KB * chore: upgrade wxt to v0.20.26 and @wxt-dev/module-react to v1.2.2 * chore: upgrade low-risk dependencies - react: 19.2.3 → 19.2.6 - react-dom: 19.2.3 → 19.2.6 - dayjs: 1.11.19 → 1.11.20 - marked: 18.0.3 → 18.0.4 - prettier: 3.8.1 → 3.8.3 - terser: 5.46.0 → 5.47.1 - i18next: 26.0.8 → 26.2.0 - react-i18next: 17.0.6 → 17.0.8 - globals: 17.2.0 → 17.6.0 - eslint-plugin-react-hooks: 7.0.1 → 7.1.1 - @typescript-eslint/*: 8.54.0 → 8.59.4 - typescript-eslint: 8.54.0 → 8.59.4 - @testing-library/jest-dom: 6.6.0 → 6.9.1 - @testing-library/react: 16.0.0 → 16.3.2 - @testing-library/user-event: 14.5.2 → 14.6.1 - @testing-library/dom: added as peer dependency - @types/react: 19.2.7 → 19.2.15 - @types/chrome: 0.1.36 → 0.1.42 - @types/webextension-polyfill: 0.12.4 → 0.12.5 * chore: upgrade medium-risk dependencies - lint-staged: 16.2.7 → 17.0.5 - jsdom: 25.0.0 → 29.1.1 - @vitejs/plugin-react: 4.3.4 → 6.0.2 - vitest: 2.0.0 → 4.1.7 - @vitest/coverage-v8: upgraded to match vitest - @webext-core/messaging: 2.3.0 → 3.0.1 - eslint: 9.39.2 → 10.4.0 - @eslint/js: added as new dependency - @types/marked: removed (marked now provides its own types) Fixes: - Fix ref update during render in useQrCode.ts - Fix ref update during render in useStorageCleaner.ts - Add error cause in jwt.ts decode function - Add type assertion for mock functions in htmlToMarkdown.test.ts * chore(deps): 降级 eslint 版本并移除 @eslint/js * docs: 精简 AGENTS.md，聚焦高信号信息 * test: 修复测试中的 act() 警告和 clipboard mock 问题 - TextInputArea: 使用 userEvent 替代 fireEvent，用 vi.spyOn 替代 Object.assign mock clipboard - ImageMode/FileMode: 添加 waitForStorageReady() 等待 useStorageState 异步初始化
2026-05-21 22:12:11 +08:00
parent 179a3d31f4
commit 689c3faf16
10 changed files with 3160 additions and 3662 deletions
@@ -1,122 +1,98 @@
 # AGENTS.md
-This file provides guidance to AI agents (such as Gemini, Codex, etc.) when working with the code in this repository.
+WXT 浏览器扩展项目 (React 19 + TypeScript + MUI v7)。
 ## 项目概述
 **Testing Tools** 是一个基于 WXT (Web Extension Toolkit) 框架的现代化浏览器扩展项目. 它提供了一系列实用的开发和测试工具，包括时间戳转换、存储管理、文本统计、JWT 解析及二维码工具.
 ## 核心命令
 ### 开发与构建
 - `npm run dev` - 启动 Chrome 浏览器的开发模式（支持 HMR）
 - `npm run dev:firefox` - 启动 Firefox 浏览器的开发模式
 - `npm run build` - 构建 Chrome 浏览器的生产版本
 - `npm run build:firefox` - 构建 Firefox 浏览器的生产版本
 - `npm run zip` - 打包 Chrome 扩展为 ZIP 文件
 - `npm run zip:firefox` - 打包 Firefox 扩展为 ZIP 文件
 - `npm run typecheck` - 执行 TypeScript 类型检查（`tsc --noEmit`）
 - `npm run lint` - 运行 ESLint 静态代码检查
 ### 测试
 - `npm run test` - 运行所有单元测试（单次执行）
 - `npm run test:watch` - 启动 Vitest 交互式监视模式
 - `npm run test:coverage` - 运行测试并生成代码覆盖率报告
 **运行单个测试文件：**
 ```bash
-npx vitest run path/to/your.test.ts
+npm run dev              # Chrome 开发模式 (HMR)
 npm run dev:firefox      # Firefox 开发模式
 npm run build            # Chrome 生产构建
 npm run build:firefox    # Firefox 生产构建
 npm run lint             # ESLint (--max-warnings=0)
 npm run typecheck        # tsc --noEmit
 npm run test             # vitest run (单次执行)
 npm run test:watch       # vitest 监视模式
 npm run test:coverage    # 带覆盖率的测试
 ```
-### 依赖管理
+运行单个测试: `npx vitest run path/to/file.test.ts`
- `npm install` - 安装项目依赖
+## 验证流程
 - `postinstall` 钩子会自动运行 `wxt prepare` 以生成必要的类型定义和入口点.
 - `prepare` 钩子会自动初始化 Husky 以进行 Git 提交前检查.
-## 项目架构与目录结构
+CI 执行顺序: `lint → typecheck → test → build` (build 依赖前三者)。
-### 技术栈
+Pre-commit hook (lint-staged) 顺序:
- **框架**: WXT v0.20.6 (Web Extension Toolkit)
+1. `prettier --write`
- **前端**: React 19 + TypeScript 5
+2. `eslint --fix --max-warnings=0`
- **UI 库**: Material UI (MUI) @7.x + Emotion
+3. `tsc --noEmit`
 - **日期处理**: dayjs (集成 UTC 和 Timezone 插件)
 - **通信**: `@webext-core/messaging` (用于 Entrypoints 间通信)
 - **测试**: Vitest + Testing Library (jsdom 环境)
 - **代码规范**: ESLint v9 + Prettier + Husky + lint-staged
-### 目录结构
+提交前确保三者通过。
-```text
+## 项目结构
-├── components/           # 原子级 UI 组件
+
-│   ├── __tests__/        # 组件单元测试
+```
-│   ├── PageHeader.tsx    # 标准页面头部
+config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
-│   ├── ToolCard.tsx      # 仪表盘卡片基础
+config/pageTheme.ts    # 页面级主题常量
-│   └── ...
+config/theme.ts        # MUI 全局主题
-├── config/               # 核心配置与元数据
+entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
-│   ├── features.tsx      # 功能特性定义（路由与元数据的单一事实来源）
+pages/                 # 功能页面组件 (懒加载)
-│   ├── pageTheme.ts      # 页面级主题与样式常量
+components/            # 可复用 UI 组件
-│   └── theme.ts          # MUI 全局主题配置
+providers/             # React Context (Router, Theme 等)
-├── entrypoints/          # 浏览器扩展入口点
+utils/                 # 工具函数与服务抽象
-│   ├── background.ts     # 后台 Service Worker (消息中转与生命周期)
+types/                 # TypeScript 类型声明
-│   ├── content.ts        # 注入页面的内容脚本
+i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json)
 │   ├── popup/            # 弹窗界面主入口
 │   ├── options/          # 选项页面主入口
 │   └── sidepanel/        # 侧边栏界面主入口
 ├── pages/                # 功能模块页面组件
 │   ├── DashboardPage.tsx # 仪表盘/首页
 │   ├── Jwt/index.tsx       # JWT 解析工具
 │   ├── QrCode/index.tsx    # 二维码工具
 │   ├── StorageCleaner/index.tsx # 存储清理工具
 │   ├── TextStatistics/index.tsx # 文本统计工具
 │   └── Timestamp/index.tsx # 时间戳转换工具
 ├── providers/            # React Context Providers (Router, Theme 等)
 ├── utils/                # 业务逻辑与工具函数
 │   ├── chromeStorage.ts  # 类型安全的 Chrome Storage 封装
 │   ├── jwt.ts            # JWT 解析逻辑
 │   ├── textStatistics.ts # 文本分析逻辑
 │   └── ...
 ├── types/                # 全局 TypeScript 类型声明
 └── public/               # 静态资源 (图标等)
 ```
-## 核心功能说明
+## 关键架构决策
-### 1. 路由与功能发现
+**路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType` 渲染对应组件。
-项目不使用传统的 React Router，而是通过 `config/features.tsx` 中的 `FEATURES` 数组统一管理.
+**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义。使用 `utils/chromeStorage.ts` 及其 Hook。
- 每个功能都有一个唯一的 `PageType` (如 `timestamp`, `jwt`).
+**通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
 - `RouterProvider` 负责维护当前的页面状态，并根据 `FEATURES` 配置渲染对应的组件.
-### 2. 存储管理 (Chrome Storage)
+**路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
- 统一使用 `utils/chromeStorage.ts` 及其对应的 Hook.
+## 测试环境
 - 所有的存储键值必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义，以确保存储的类型安全.
-### 3. 消息通信 (Messaging)
+- 环境: jsdom
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
  - `chrome.*` API (storage, tabs, runtime, cookies 等)
  - `react-i18next` (返回 key 作为翻译)
  - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
- 使用 `@webext-core/messaging` 进行 Popup, Sidepanel, Background 和 Content Script 之间的通信.
+## i18n
 - 消息协议定义在 `utils/messages.ts` 中.
-### 4. 样式系统
+- 命名空间: `common` (默认), `features`
 - 翻译键格式: `namespace:key` (如 `features:timestamp.title`)
 - 语言: `zh` (默认), `en`
 - 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json`
- 基于 MUI v7 的 `Box`, `Stack`, `Paper` 等组件构建.
+## 新功能开发清单
 - 页面特定的复杂样式应在 `config/pageTheme.ts` 中统一定义，以保持视觉一致性.
-## AI 代理开发准则
+1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
 2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
 3. 在 `pages/` 创建页面组件 (懒加载)
 4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
-1.  **类型安全**: 始终优先使用 TypeScript 接口和类型. 不要使用 `any`.
+## 代码规范
 2.  **组件化**: 新功能应拆分为 `pages/` 中的页面组件和 `components/` 中的通用组件.
 3.  **单元测试**: 每次修改逻辑或添加新功能后，必须在对应的 `__tests__` 目录下增加测试用例.
 4.  **单一事实来源**: 功能的添加、修改或删除应首先从 `config/features.tsx` 开始.
 5.  **跨浏览器兼容**: WXT 处理了大部分差异，但涉及原生 API (如 `chrome.cookies`) 时，请确保逻辑在 Firefox 和 Chrome 下均有效.
 6.  **i18n**: 目前主要使用中文 UI，但在开发时请注意提取硬编码字符串，以便未来国际化.
-## 权限管理
+- 禁止使用 `any` (测试文件除外)
 - 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
 - 样式: 复杂页面样式放 `config/pageTheme.ts`，简单样式用 MUI `sx` prop
 - 格式: Prettier (100 字符宽, 单引号, 尾逗号)
-所有新申请的浏览器权限必须同步更新至 `wxt.config.ts` 的 `manifest.permissions` 中.
+## 技术栈版本
 - WXT: ^0.20.26
 - React: ^19.2.6
 - MUI: ^7.3.8
 - TypeScript: ^5.9.3
 - Vitest: ^4.1.7
 - i18next: ^26.2.0
@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TextInputArea from '@/components/TextInputArea';
 describe('TextInputArea 组件', () => {
@@ -107,40 +108,34 @@ describe('TextInputArea 组件', () => {
    });
    it('复制时调用 showMessage', async () => {
      const user = userEvent.setup();
      const showMessage = vi.fn();
-      Object.assign(navigator, {
+      const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
        clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
      });
      render(
        <TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
      );
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
+      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('测试');
+      expect(writeTextSpy).toHaveBeenCalledWith('测试');
      await vi.waitFor(() => {
      expect(showMessage).toHaveBeenCalledWith('messages.copySuccess', { severity: 'success' });
    });
    });
    it('复制失败时调用 showMessage 错误提示', async () => {
      const user = userEvent.setup();
      const showMessage = vi.fn();
-      Object.assign(navigator, {
+      vi.spyOn(navigator.clipboard, 'writeText').mockRejectedValue(new Error('失败'));
        clipboard: { writeText: vi.fn().mockRejectedValue(new Error('失败')) },
      });
      render(
        <TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
      );
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
+      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
      await vi.waitFor(() => {
      expect(showMessage).toHaveBeenCalledWith('messages.copyError', { severity: 'error' });
    });
  });
  });
  describe('showCount 字符计数', () => {
    it('显示当前字符数', () => {
@@ -377,21 +372,18 @@ describe('TextInputArea 组件', () => {
  describe('showMessage prop', () => {
    it('复制成功时调用 showMessage', async () => {
      const user = userEvent.setup();
      const showMessage = vi.fn();
-      Object.assign(navigator, {
+      vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
        clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
      });
      render(
        <TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
      );
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
+      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
      await vi.waitFor(() => {
      expect(showMessage).toHaveBeenCalledWith('messages.copySuccess', { severity: 'success' });
    });
  });
  });
  describe('onClear 回调', () => {
    it('点击清空按钮时应调用 onClear', () => {
@@ -28,42 +28,43 @@
    "@emotion/styled": "^11.14.1",
    "@mui/icons-material": "^7.3.8",
    "@mui/material": "^7.3.8",
-    "@types/marked": "^5.0.2",
+    "@testing-library/dom": "^10.4.1",
-    "@webext-core/messaging": "^2.3.0",
+    "@vitest/coverage-v8": "^4.1.7",
-    "dayjs": "^1.11.19",
+    "@webext-core/messaging": "^3.0.1",
-    "i18next": "^26.0.8",
+    "dayjs": "^1.11.20",
    "i18next": "^26.2.0",
    "i18next-browser-languagedetector": "^8.2.1",
-    "marked": "^18.0.3",
+    "marked": "^18.0.4",
    "qr-scanner": "^1.4.2",
    "qrious": "^4.0.2",
-    "react": "^19.2.3",
+    "react": "^19.2.6",
-    "react-dom": "^19.2.3",
+    "react-dom": "^19.2.6",
-    "react-i18next": "^17.0.6"
+    "react-i18next": "^17.0.8"
  },
  "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
-    "@types/chrome": "^0.1.36",
+    "@types/chrome": "^0.1.42",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.15",
    "@types/react-dom": "^19.2.3",
-    "@types/webextension-polyfill": "^0.12.4",
+    "@types/webextension-polyfill": "^0.12.5",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.4",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/parser": "^8.59.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^6.0.2",
-    "@wxt-dev/module-react": "^1.1.5",
+    "@wxt-dev/module-react": "^1.2.2",
    "eslint": "^9.39.2",
    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.2.0",
+    "globals": "^17.6.0",
    "husky": "^9.1.7",
-    "jsdom": "^25.0.0",
+    "jsdom": "^29.1.1",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^17.0.5",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
-    "terser": "^5.46.0",
+    "terser": "^5.47.1",
    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.59.4",
-    "vitest": "^2.0.0",
+    "vitest": "^4.1.7",
-    "wxt": "^0.20.6"
+    "wxt": "^0.20.26"
  }
 }
@@ -20,14 +20,16 @@ beforeEach(() => {
 const waitForStorageReady = () => act(() => Promise.resolve());
 describe('FileMode', () => {
-  it('应该渲染文件上传区域', () => {
+  it('应该渲染文件上传区域', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    expect(screen.getByText('clickOrDropToFile')).toBeInTheDocument();
    expect(screen.getByText('maxFileSize')).toBeInTheDocument();
  });
  it('应该处理有效的文件选择', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
@@ -43,6 +45,7 @@ describe('FileMode', () => {
  it('应该拒绝超出大小限制的文件', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    // 创建一个超过 10MB 的文件
    const largeContent = new Uint8Array(11 * 1024 * 1024);
@@ -58,6 +61,7 @@ describe('FileMode', () => {
  it('点击清除按钮应该清空文件状态', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    const file = new File(['test'], 'test.txt', { type: 'text/plain' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -77,6 +81,7 @@ describe('FileMode', () => {
  it('应该显示文件大小和类型信息', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -91,6 +96,7 @@ describe('FileMode', () => {
  it('应该显示原始大小和编码大小', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -104,6 +110,7 @@ describe('FileMode', () => {
  it('应该提供复制按钮', async () => {
    render(<FileMode />);
    await waitForStorageReady();
    const file = new File(['test'], 'test.txt', { type: 'text/plain' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -18,14 +18,16 @@ beforeEach(() => {
 const waitForStorageReady = () => act(() => Promise.resolve());
 describe('ImageMode', () => {
-  it('应该渲染图像上传区域', () => {
+  it('应该渲染图像上传区域', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    expect(screen.getByText('clickOrDropToImage')).toBeInTheDocument();
    expect(screen.getByText('supportedFormats')).toBeInTheDocument();
  });
  it('应该接受有效的图像文件', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    const file = new File(['fake-image-data'], 'test.png', { type: 'image/png' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -39,6 +41,7 @@ describe('ImageMode', () => {
  it('应该拒绝非图像文件', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    const file = new File(['not an image'], 'test.txt', { type: 'text/plain' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -51,6 +54,7 @@ describe('ImageMode', () => {
  it('应该拒绝超出大小限制的图像', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    const largeContent = new Uint8Array(11 * 1024 * 1024);
    const file = new File([largeContent], 'large.png', { type: 'image/png' });
@@ -65,6 +69,7 @@ describe('ImageMode', () => {
  it('应该通过扩展名识别图像', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    // 没有 MIME 类型但有正确扩展名
    const file = new File(['fake'], 'test.jpg');
@@ -78,6 +83,7 @@ describe('ImageMode', () => {
  it('点击清除按钮应该清空图像状态', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    const file = new File(['fake'], 'test.png', { type: 'image/png' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -97,6 +103,7 @@ describe('ImageMode', () => {
  it('应该显示图像预览', async () => {
    render(<ImageMode />);
    await waitForStorageReady();
    const file = new File(['fake-image'], 'test.png', { type: 'image/png' });
    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
@@ -74,7 +74,9 @@ export function useQrCode(): QrCodeContextValue {
  // 使用 useRef 存储 generateQrCode 的最新引用，避免无限循环
  const generateQrCodeRef = useRef(generateQrCode);
  useEffect(() => {
    generateQrCodeRef.current = generateQrCode;
  });
  // 防抖处理输入文本（200ms）
  const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
@@ -144,7 +144,9 @@ export function useStorageCleaner({
  }, [t]);
  const loadInfoRef = useRef(loadInfo);
  useEffect(() => {
    loadInfoRef.current = loadInfo;
  });
  const debouncedLoadInfo = useCallback(() => {
    if (debounceTimerRef.current) {
@@ -230,8 +230,8 @@ describe('downloadMarkdownFile', () => {
    };
    vi.spyOn(document, 'createElement').mockReturnValue(mockLink as any);
-    vi.spyOn(document.body, 'appendChild').mockImplementation(appendChildSpy);
+    vi.spyOn(document.body, 'appendChild').mockImplementation(appendChildSpy as any);
-    vi.spyOn(document.body, 'removeChild').mockImplementation(removeChildSpy);
+    vi.spyOn(document.body, 'removeChild').mockImplementation(removeChildSpy as any);
  });
  afterEach(() => {
@@ -60,6 +60,7 @@ export function decodeBase64Url(str: string): string {
  } catch (e) {
    throw new Error(
      i18n.t('jwt:errors.failedToDecode') + (e instanceof Error ? e.message : String(e)),
      { cause: e },
    );
  }
 }