fix(tsconfig): remove unused baseUrl and paths configuration

.github/copilot-instructions.md

@@ -1,141 +0,0 @@
-# Copilot 指令
-
-基于 WXT 框架的浏览器扩展项目（React 19 + TypeScript），为开发者和测试人员提供效率工具：时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等。
-
-## 核心命令
-
-```bash
-npm run dev              # Chrome 开发模式（支持 HMR）
-npm run dev:firefox      # Firefox 开发模式
-npm run build            # Chrome 生产构建
-npm run build:firefox    # Firefox 生产构建
-npm run zip              # 打包 Chrome 扩展（.output/*.zip）
-npm run zip:firefox      # 打包 Firefox 扩展
-npm run lint             # ESLint 检查（--max-warnings=0）
-npm run typecheck        # TypeScript 类型检查（tsc --noEmit）
-npm run test             # 运行全部单元测试（vitest run）
-npm run test:watch       # Vitest 监视模式
-npm run test:coverage    # 带覆盖率的测试
-```
-
-运行单个测试文件：`npx vitest run path/to/file.test.ts`
-
-修改 `package.json` 后需运行 `npm install`（会自动触发 `postinstall` → `wxt prepare` 重新生成 `.wxt/` 类型声明）。
-
-## CI 流水线（GitHub Actions）
-
-严格顺序门控，任一步骤失败则终止：
-
-1. **setup** — 安装依赖，缓存 `node_modules`
-2. **lint**、**typecheck**、**test** — 三者并行运行，全部通过才继续
-3. **build** — Chrome + Firefox 矩阵构建（仅当步骤 2 全部通过时执行）
-
-Pre-commit 钩子（`.husky/pre-commit` → `lint-staged`）：
-
-1. 代码文件（`*.{ts,tsx,js,jsx,mjs}`）：运行 `eslint --fix --max-warnings=0`
-2. 同一代码文件：运行 `prettier --write`
-3. 其他文件（`*.{json,css,scss,md}`）：运行 `prettier --write`
-
-## 项目架构
-
-### 路由（不使用 React Router）
-
-路由完全通过 `config/features.tsx` 中的 `FEATURES` 数组管理。每个功能定义一个 `key`（类型为 `types/storage.d.ts` 中的 `PageType`）和三个懒加载组件，分别对应 `popup`、`sidepanel`、`tab` 三种渲染模式。`providers/RouterProvider.tsx` 中的 `RouterProvider` 根据存储状态渲染当前页面。
-
-存在三套独立的路由作用域：`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute`，各自维护独立的可见页面列表和页面排序。
-
-### 存储
-
-所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中声明，键名使用 kebab-case 格式（如 `app/currentRoute`）。使用 `utils/chromeStorage.ts` 中的类型安全封装（`storageUtil.get/set/remove`）。
-
-Router 同时使用 `chrome.storage.local` 持久化和 `localStorage` 快照来消除首屏闪烁。
-
-### 扩展通信
-
-使用 `@webext-core/messaging`。通信协议在 `utils/messages.ts` 中通过 `ProtocolMap` 定义。使用该模块导出的 `sendMessage` / `onMessage`，不要直接使用原生 `chrome.runtime.sendMessage`。
-
-### 页面组件模式
-
-功能页面遵循 **UI + Hook 分离** 模式，详见 [CODING_STANDARDS.md § 11](./CODING_STANDARDS.md#11-页面开发规范)：
-
-```
-pages/FeatureName/
-├── index.tsx              # UI 组件（纯展示，使用 shadcn/ui 组件）
-├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-└── constants.ts           # 常量定义（可选）
-```
-
-- 页面组件调用 `useI18n('featureName')` 获取翻译函数
-- Hook 负责所有状态管理，通过返回值暴露给页面
-- 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
-
-### 新功能开发清单
-
-1. 在 `types/storage.d.ts` 的 `PageType` 联合类型中添加新成员
-2. 在 `config/features.tsx` 的 `FEATURES` 数组中添加配置（key、翻译键、图标、三种渲染模式组件）
-3. 在 `pages/` 目录创建页面组件（懒加载）：
-   - `index.tsx` — 使用 `useLazyTranslation` 的 UI 组件
-   - `useFeatureName.ts` — 业务逻辑 Hook
-   - `constants.ts` — 常量（可选）
-4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON 文件）
-5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
-6. 添加对应的单元测试
-
-## 关键规范
-
-> 完整的代码编写规范详见 [CODING_STANDARDS.md](./CODING_STANDARDS.md)。
-
-### 浏览器 API
-
-始终使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API，以确保跨浏览器兼容性。
-
-### 路径别名
-
-`@/` 映射到项目根目录（已在 tsconfig 和 vitest.config 中配置）。跨目录导入使用 `@/` 绝对别名，同目录导入使用 `./` 相对路径。
-
-### UI 组件
-
-- 使用 `components/ui/` 下的 shadcn/ui 组件（button、dialog、select、input 等）
-- 图标：`lucide-react`
-- 样式：Tailwind CSS + `@/lib/utils` 中的 `cn()` 工具函数（clsx + tailwind-merge）
-- 主题：使用 shadcn/ui 语义化 token（`bg-background`、`text-foreground`、`border-border` 等），禁止硬编码颜色
-
-### 代码分割
-
-`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd），无需手动配置。
-
-### 代码风格
-
-- 禁止使用 `any`（测试文件除外）
-- 未使用的变量/参数：使用 `_` 前缀（如 `_unused`）
-- Prettier：100 字符宽、单引号、尾逗号 all、LF 换行
-- ESLint 使用 `typescript-eslint` 的 `projectService: true`
-- 导出模式：页面组件 default export，工具函数/Hook 命名导出，UI 组件 forwardRef + 命名导出
-
-### 测试
-
-- 环境：jsdom
-- 全局变量：`vitest/globals`（describe、it、expect 等无需导入）
-- Setup 文件：`vitest.setup.ts` 自动 mock 以下内容：
-  - `chrome.*` / `browser.*` API（storage、tabs、runtime、cookies 等）
-  - `react-i18next`（返回 key 作为翻译）
-  - `@/utils/useLazyTranslation`（返回 `ns:key` 格式）
-  - `window.matchMedia`
-- 测试文件命名：`__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
-- 使用 `vi.mock()` 进行模块级 mock；避免重复 mock `vitest.setup.ts` 中已有的内容
-- 测试工具：`@testing-library/react` + `@testing-library/user-event`
-
-### 国际化（i18n）
-
-- 命名空间：`common`（默认）、`features`
-- 翻译键格式：`namespace:key`（如 `features:timestamp.title`）
-- 语言：`zh`（默认）、`en`
-- 翻译文件：`i18n/locales/{zh,en}/{common,features}.json` + 各功能独立 JSON 文件
-- 使用 `useLazyTranslation` Hook 加载功能专属翻译
-- 回退策略：缺失的翻译键回退到 `zh`，若仍缺失则返回占位格式 `namespace:key`
-
-### WXT 生成文件
-
-- `.wxt/` 目录由 `postinstall`（`wxt prepare`）自动生成，包含 TypeScript 类型声明和扩展 tsconfig
-- 生产构建输出到 `.output/` 目录
-- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`

.github/workflows/ci.yml

@@ -13,6 +13,8 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  # 💡 1. 提速核心：前置基建节点（Infrastructure Initialization）
+  # 专门负责锁死环境、同步下载并缓存 node_modules，下游节点直接满血复用！
   setup:
     name: Prepare Dependencies
     runs-on: ubuntu-latest
@@ -27,6 +29,7 @@ jobs:
         with:
           node-version: '22'
 
+      # 建立基于 package-lock.json 唯一哈希的缓存大闸
       - name: Cache Node Modules
         id: cache-nodemodules
         uses: actions/cache@v4
@@ -44,6 +47,7 @@ jobs:
         id: cache-info
         run: echo "key=${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}" >> $GITHUB_OUTPUT
 
+  # 💡 2. 静态语法质检节点（依赖前置节点完成）
   lint:
     name: Lint
     runs-on: ubuntu-latest
@@ -66,6 +70,7 @@ jobs:
       - name: Run ESLint
         run: npm run lint
 
+  # 💡 3. 强类型守卫节点（2秒瞬时恢复，开箱即查）
   typecheck:
     name: TypeScript Check
     runs-on: ubuntu-latest
@@ -91,6 +96,7 @@ jobs:
       - name: Run TypeScript type check
         run: npm run typecheck
 
+  # 💡 4. 单元测试节点（无缝运行你刚刚修复完的 setupTests.ts 套件）
   test:
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -116,12 +122,16 @@ jobs:
       - name: Run tests
         run: npm run test
 
+  # 💡 5. 多端分布式最终编译节点（Production Matrix Compliance）
   build:
     name: Build (${{ matrix.browser }})
     runs-on: ubuntu-latest
+    # 只有当 Linter、类型大闸、Vitest 单元测试全数满分通过，才放行最终打包编译
     needs: [ lint, typecheck, test ]
     strategy:
       matrix:
+        # 💡 完美对齐 WXT 跨端架构：将 firefox 同步纳入生产编译大矩阵，
+        # 如果 firefox 编译因任何多端不兼容挂掉，CI 会立刻拉起警报，防护力拉满！
         browser: [ chrome, firefox ]
       fail-fast: false
     steps:
@@ -139,6 +149,7 @@ jobs:
           path: node_modules
           key: ${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}
 
+      # 💡 动态代理编译指令：完美匹配 WXT / 各类多端打包器的标准构建命令
       - name: Generate WXT types
         run: npx wxt prepare
 

.gitignore

@@ -31,4 +31,3 @@ stats-*.json
 dev/*
 
 docs/*
-!docs/VISUAL_STYLE_GUIDE.md

.husky/pre-commit

@@ -1,5 +1 @@
-# 后台运行类型检查，结果输出到 stderr 但不阻塞提交
-npx tsc --noEmit &
-
-# 前台运行 lint-staged（自动修复 + 格式化）
 npx lint-staged

.husky/pre-push

@@ -1,13 +0,0 @@
-# pre-push: 严格检查，阻塞有问题的代码推送到远程
-# 类型检查（全项目，因为类型错误可能跨文件传播）
-npx tsc --noEmit
-
-# ESLint 严格检查（仅检查本次推送的变更文件，不阻塞不相关的旧代码）
-# 新分支无 upstream 时，回退到与 origin/main 对比
-MERGE_BASE=$(git merge-base HEAD @{upstream} 2>/dev/null || git merge-base HEAD origin/main 2>/dev/null)
-if [ -n "$MERGE_BASE" ]; then
-  CHANGED_FILES=$(git diff --name-only --diff-filter=d "$MERGE_BASE" HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
-  if [ -n "$CHANGED_FILES" ]; then
-    echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
-  fi
-fi

AGENTS.md

@@ -1,6 +1,6 @@
 # AGENTS.md
 
-WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
+WXT 浏览器扩展项目 (React 19 + TypeScript)。
 
 ## 核心命令
 
@@ -22,17 +22,14 @@ npm run test:coverage    # 带覆盖率的测试
 
 ## 验证流程
 
-CI 步骤（严格顺序，任一步骤失败则停止并标记 CI 失败）：
+CI 执行顺序: `setup → lint/typecheck/test(并行) → build` (build 依赖前三者)。
 
-1. `setup`（安装依赖、`wxt prepare`）
+Pre-commit hook (`.husky/pre-commit` 调用 `lint-staged`):
-2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
-3. `build`（仅当步骤 2 全部成功时执行）
 
-Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交）：
+- 代码文件 (`*.{ts,tsx,js,jsx,mjs}`): `eslint --fix --max-warnings=0 --no-warn-ignored` → `prettier --write`
+- 其他文件 (`*.{json,css,scss,md}`): `prettier --write`
 
-1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
+提交前确保 `lint` 和 `typecheck` 通过。
-2. 同一代码文件：运行 `prettier --write`
-3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
 
 ## WXT 生成文件
 
@@ -43,94 +40,55 @@ Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回
 ## 项目结构
 
 ```
-src/                   # 源代码根目录
+config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
-  config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
+entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
-  entrypoints/           # 扩展入口点 (popup/, sidepanel/, background.ts, content.ts)
+pages/                 # 功能页面组件 (懒加载)
-  pages/                 # 功能页面组件 (懒加载)
+components/            # 可复用 UI 组件
-  components/            # 可复用 UI 组件
+providers/             # React Context (Router, Theme 等)
-  components/ui/         # shadcn/ui 基础组件 (button, dialog, select 等)
+hooks/                 # 自定义 React Hooks
-  providers/             # React Context (Router, Theme 等)
+utils/                 # 工具函数与服务抽象
-  hooks/                 # 自定义 React Hooks
+types/                 # TypeScript 类型声明
-  utils/                 # 工具函数与服务抽象
+i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功能独立 JSON)
-  types/                 # TypeScript 类型声明
-  lib/                   # 通用工具函数（cn、utils）
-public/                # 静态资源（图标、_locales 等）
 ```
 
-### 页面组件模式
-
-典型功能页面遵循 **UI + Hook 分离** 模式。详见 [CODING_STANDARDS.md § 11](./.github/CODING_STANDARDS.md#11-页面开发规范)。
-
-```
-src/pages/FeatureName/
-├── index.tsx              # 页面 UI（纯展示，仅负责渲染布局）
-├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-├── constants.ts           # 常量定义（可选，≥3 个常量时创建）
-└── __tests__/
-    └── index.test.tsx
-```
-
-- 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
-- Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
-- 子组件可以独立调用 `useI18n` 等全局 Hook
-- 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
-- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
-
 ## 关键架构决策
 
-**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
+**路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
-渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
+渲染对应组件。支持三种渲染模式: popup / sidepanel / tab。
-每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
 
-**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
+**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义。使用 `utils/chromeStorage.ts` 及其
-使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
+Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
-修改 StorageSchema 时，必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
 
-**通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
+**通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
 
 **路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
 
 **浏览器兼容**: 优先使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API。
 
-**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-qr、vendor-dnd 等），无需手动配置。
-
 ## 测试环境
 
 - 环境: jsdom
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
   - `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
-  - `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
+  - `react-i18next` (返回 key 作为翻译)
+  - `@/utils/useLazyTranslation` (返回 `ns:key` 格式翻译)
   - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
-- Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
-- 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
 
-## i18n (chrome.i18n)
+## i18n
 
-项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化，通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
+- 命名空间: `common` (默认), `features`
-
+- 翻译键格式: `namespace:key` (如 `features:timestamp.title`)
-- **翻译文件**: `public/_locales/{zh,en}/messages.json`（Chrome 扩展标准格式）
+- 语言: `zh` (默认), `en`
-- **默认语言**: `zh`（在 `wxt.config.ts` 的 `manifest.default_locale` 中配置）
+- 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json` 及对应功能独立 JSON
-- **使用方式**: `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` 联合类型
+1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
-2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
+2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
-3. 在 `src/pages/` 创建页面组件 (懒加载)：
+3. 在 `pages/` 创建页面组件 (懒加载)
-   - `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
+4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON）
-   - `useFeatureName.ts` — 业务逻辑 Hook
-   - `constants.ts` — 常量（可选）
-4. 在 `public/_locales/zh/messages.json`（及 `en/messages.json`）添加翻译
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
 
@@ -139,15 +97,15 @@ src/pages/FeatureName/
 - 禁止使用 `any` (测试文件除外)
 - 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
 - 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
-- UI 组件: 优先使用 `src/components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
-- 图标: 使用 `lucide-react` 图标库
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
 
-## 关键外部库（非显而易见的）
+## 技术栈版本
 
-- `@webext-core/messaging` — 扩展消息通信
+- WXT: ^0.20.26
-- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
+- React: ^19.2.6
-- `qrious` + `qr-scanner` — 二维码生成与解析
+- Tailwind CSS: ^3.4.19
-- `dayjs` — 日期处理（时间戳转换）
+- shadcn/ui (基于 Radix UI + class-variance-authority)
-- `sonner` — Toast 通知（替代传统 snackbar）
+- TypeScript: ^5.9.3
+- Vitest: ^4.1.7
+- i18next: ^26.2.0

CLAUDE.md

@@ -1 +0,0 @@
-@AGENT.md

README.md

@@ -63,6 +63,11 @@
 - **文件转换**: 支持文件与 Base64 字符串互转.
 - **图像预览**: 支持图片 Base64 编码与实时预览.
 
+### 📝 Markdown ↔ HTML 转换
+
+- **Markdown 转 HTML**: 实时预览 Markdown 渲染结果，支持导出 HTML 源码.
+- **HTML 转 Markdown**: 将 HTML 内容转换为 Markdown 格式.
+
 ## 技术栈
 
 - **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
@@ -79,24 +84,25 @@
 ## 项目结构
 
 ```text
-├── src/                   # 源代码根目录
+├── components/           # 可复用 React 组件
-│   ├── components/        # 可复用 React 组件
+├── config/              # 应用配置
-│   ├── config/            # 应用配置
+│   └── features.tsx     # 功能定义与路由映射
-│   │   └── features.tsx   # 功能定义与路由映射
+├── entrypoints/         # 扩展程序入口点
-│   ├── entrypoints/       # 扩展程序入口点
+│   ├── popup/           # 点击图标弹出的主界面
-│   │   ├── popup/         # 点击图标弹出的主界面
+│   ├── options/         # 扩展程序设置页面
-│   │   ├── sidepanel/     # 浏览器侧边栏集成
+│   ├── sidepanel/       # 浏览器侧边栏集成
-│   │   ├── background.ts  # 后台 Service Worker
+│   ├── background.ts    # 后台 Service Worker
-│   │   └── content.ts     # 网页注入脚本
+│   └── content.ts       # 网页注入脚本
-│   ├── pages/             # 各功能模块的页面组件
+├── pages/               # 各功能模块的页面组件
-│   ├── providers/         # 全局状态提供者 (Router, Theme 等)
+├── providers/           # 全局状态提供者 (Router, Theme 等)
-│   ├── hooks/             # 自定义 React Hooks
+├── hooks/               # 自定义 React Hooks
-│   ├── utils/             # 工具函数与服务抽象
+├── utils/               # 工具函数与服务抽象
-│   ├── types/             # TypeScript 类型声明
+├── types/               # TypeScript 类型声明
-│   └── lib/               # 通用工具函数 (cn, utils 等)
+├── lib/                 # 通用工具函数 (cn, utils 等)
-├── public/                # 静态资源 (图标、manifest 资源等)
+├── i18n/                # 国际化资源
-├── wxt.config.ts          # WXT 框架核心配置
+├── public/              # 静态资源 (图标、manifest 资源等)
-└── package.json           # 项目元数据与依赖管理
+├── wxt.config.ts        # WXT 框架核心配置
+└── package.json         # 项目元数据与依赖管理
 ```
 
 ## 开发与部署

components/CopyButton.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { copyTextToClipboard } from '@/utils/clipboard';
+import { cn } from '@/lib/utils'; // 1. 必须使用 cn 工具函数
+import { toast } from 'sonner'; // 2. 推荐使用 shadcn 默认的全局 toast
+
+// 3. 继承原生按钮属性，允许外部自由扩展 className、variant 等
+interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  tooltip?: string;
+  size?: 'small' | 'medium' | 'large';
+  // 移除复杂的自定义颜色变体，交由 Tailwind 类名或 shadcn 的 variant 解决
+  variant?: 'default' | 'secondary' | 'ghost' | 'outline';
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({
+  text,
+  tooltip = '复制',
+  size = 'small',
+  variant = 'ghost',
+  className,
+  ...props
+}) => {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation(); // 基础组件防冒泡，避免触发父级点击事件
+
+    if (!text) {
+      toast.error('无内容可复制');
+      return;
+    }
+
+    const success = await copyTextToClipboard(text);
+    if (success) {
+      toast.success('复制成功');
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 1500);
+    } else {
+      toast.error('复制失败');
+    }
+  };
+
+  // 4. 将控制尺寸的类名标准化
+  const sizeClasses = {
+    small: 'h-8 w-8 text-xs',
+    medium: 'h-10 w-10 text-sm',
+    large: 'h-12 w-12 text-base',
+  };
+
+  // 5. 映射 shadcn 的底层通用 Variant 类名
+  const variantClasses = {
+    default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+    ghost: 'hover:bg-accent hover:text-accent-foreground',
+    outline:
+      'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      title={tooltip}
+      // 6. 使用 cn() 合并类名，并完美支持暗黑模式的语义化变量 (destructive/muted等)
+      className={cn(
+        'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+        sizeClasses[size],
+        copied
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' // 兼顾暗黑模式的成功色
+          : variantClasses[variant],
+        className, // 允许外部直接传入 text-red-500 等覆盖样式
+      )}
+      {...props}
+    >
+      {copied ? (
+        <Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
+      ) : (
+        <Copy className="h-[1.2em] w-[1.2em]" />
+      )}
+    </button>
+  );
+};
+
+export default CopyButton;

components/DecodeResultPaper.tsx

@@ -10,7 +10,7 @@
 import { Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { formatFileSize } from '@/utils/base64Converter';
-import { useI18n } from '@/utils/chromeI18n';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface DecodeResultPaperProps {
   /** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
@@ -38,7 +38,7 @@ export default function DecodeResultPaper({
   onDownload,
   children,
 }: DecodeResultPaperProps) {
-  const { t } = useI18n('base64Converter');
+  const { t } = useLazyTranslation('base64Converter');
 
   return (
     <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">

components/ErrorBoundary.tsx

@@ -1,7 +1,6 @@
 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;
@@ -12,7 +11,10 @@ interface State {
   error: Error | null;
 }
 
-class ErrorBoundary extends Component<Props, State> {
+/**
+ * 错误边界组件：捕获子组件树中的 JavaScript 错误
+ */
+export class ErrorBoundary extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -39,31 +41,27 @@ class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
+        <div className="mt-16 mx-auto max-w-md">
-          <div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm">
+          <div className="p-6 text-center rounded-xl border border-red-200 bg-red-50">
-            <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-16 w-16 text-red-500 mx-auto mb-4" />
-              <AlertCircle className="h-8 w-8" />
+            <h2 className="text-xl font-extrabold text-red-600 mb-2">糟糕，出了点问题</h2>
-            </div>
-            <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">
+              <div className="mb-6 p-4 bg-muted rounded-lg text-left max-h-[200px] overflow-auto">
-                <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
+                <pre className="font-mono text-xs whitespace-pre-wrap break-all text-red-700">
                   {this.state.error.toString()}
                 </pre>
               </div>
             )}
             <Button
-              variant="destructive"
+              variant="default"
               onClick={this.handleReset}
-              className="rounded-lg font-bold shadow-sm"
+              className="rounded-lg font-bold bg-red-600 hover:bg-red-700 text-white"
             >
               <RefreshCw className="mr-2 h-4 w-4" />
-              {getMessage('errorBoundary_refresh')}
+              刷新应用
             </Button>
           </div>
         </div>
@@ -74,5 +72,4 @@ class ErrorBoundary extends Component<Props, State> {
   }
 }
 
-export { ErrorBoundary };
 export default ErrorBoundary;

components/GlobalSnackbar.tsx

@@ -0,0 +1,368 @@
+/**
+ * GlobalSnackbar - 全局 Snackbar 消息提示组件及 Provider
+ *
+ * 提供可复用的 Toast 消息提示功能，支持三种使用方式：
+ * 1. 作为受控组件使用：通过 props 控制显示状态
+ * 2. 通过 useSnackbarState Hook 使用：在组件内部自动管理状态
+ * 3. 通过 SnackbarProvider 和 useSnackbar Hook 使用：全局单例模式
+ *
+ * @module GlobalSnackbar
+ * @version 1.1.0
+ *
+ * @example
+ * ```tsx
+ * // 方式一：受控组件
+ * <GlobalSnackbar
+ *   message="操作成功"
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   severity="success"
+ * />
+ *
+ * // 方式二：Hook 方式 (局部状态)
+ * const { snackbarProps, showMessage } = useSnackbarState();
+ * showMessage('Hello!', { severity: 'info' });
+ *
+ * // 方式三：Context 方式 (全局状态)
+ * // 在根组件包裹 Provider
+ * <SnackbarProvider>
+ *   <App />
+ * </SnackbarProvider>
+ *
+ * // 在子组件中使用
+ * const { showMessage } = useSnackbar();
+ * showMessage('Global Message');
+ * ```
+ */
+
+import {
+  JSX,
+  useState,
+  useRef,
+  createContext,
+  useContext,
+  useEffect,
+  type ReactNode,
+  type SyntheticEvent,
+} from 'react';
+import { CheckCircle, Info, AlertTriangle, XCircle } from 'lucide-react';
+
+/**
+ * Snackbar 消息严重程度类型
+ * @description 决定 Alert 组件的颜色和图标
+ * - success: 绿色，成功提示
+ * - info: 蓝色，信息提示
+ * - warning: 橙色，警告提示
+ * - error: 红色，错误提示
+ */
+export type SnackbarSeverity = 'success' | 'info' | 'warning' | 'error';
+
+/**
+ * GlobalSnackbar 组件的属性接口
+ * @interface GlobalSnackbarProps
+ */
+export interface GlobalSnackbarProps {
+  /** 消息内容，要显示的提示文本 */
+  message: string;
+  /** 是否显示 Snackbar */
+  open: boolean;
+  /** 关闭回调函数 */
+  onClose: () => void;
+  /** 消息级别，影响颜色和图标样式，默认 'info' */
+  severity?: SnackbarSeverity;
+  /** 自动隐藏时间（毫秒），设为 0 则不自动关闭，默认 2000 */
+  autoHideDuration?: number;
+  /** Snackbar 弹出位置，默认 { vertical: 'bottom', horizontal: 'center' } */
+  anchorOrigin?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+  };
+  /** 是否使用 Alert 组件包裹，false 则使用原生 Snackbar message，默认 true */
+  showAlert?: boolean;
+  /** 是否隐藏 Alert 图标，默认 false */
+  hideIcon?: boolean;
+  /** 自定义样式，透传给外层 Snackbar 组件 */
+  sx?: React.CSSProperties;
+  /** 自定义样式，透传给内层 Alert 组件（仅 showAlert=true 时生效） */
+  alertSx?: React.CSSProperties;
+}
+
+/**
+ * showMessage 方法的选项配置
+ * @interface SnackbarOptions
+ */
+export interface SnackbarOptions {
+  /** 消息级别：success | info | warning | error */
+  severity?: SnackbarSeverity;
+  /** 自动隐藏时间（毫秒），设为 0 则不自动关闭 */
+  autoHideDuration?: number;
+  /** 是否隐藏 Alert 图标 */
+  hideIcon?: boolean;
+  /** 是否使用 Alert 组件包裹 */
+  showAlert?: boolean;
+}
+
+/**
+ * useSnackbarState Hook 的返回值类型
+ * @interface UseSnackbarStateResult
+ */
+export interface UseSnackbarStateResult {
+  /** 传递给 GlobalSnackbar 组件的属性对象 */
+  snackbarProps: GlobalSnackbarProps;
+  /** 显示消息的方法 */
+  showMessage: (message: string, options?: SnackbarOptions) => void;
+  /** 关闭消息的方法 */
+  closeMessage: () => void;
+}
+
+/**
+ * GlobalSnackbar 组件的默认属性配置
+ * @description 提供类型安全的默认值选择
+ */
+const defaultProps: Required<
+  Pick<
+    GlobalSnackbarProps,
+    'severity' | 'autoHideDuration' | 'anchorOrigin' | 'showAlert' | 'hideIcon'
+  >
+> = {
+  severity: 'info',
+  autoHideDuration: 2000,
+  anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+  showAlert: true,
+  hideIcon: false,
+};
+
+const severityConfig: Record<
+  SnackbarSeverity,
+  { icon: React.ElementType; bgClass: string; textClass: string }
+> = {
+  success: { icon: CheckCircle, bgClass: 'bg-green-500', textClass: 'text-white' },
+  info: { icon: Info, bgClass: 'bg-primary/100', textClass: 'text-white' },
+  warning: { icon: AlertTriangle, bgClass: 'bg-amber-500', textClass: 'text-white' },
+  error: { icon: XCircle, bgClass: 'bg-red-500', textClass: 'text-white' },
+};
+
+/**
+ * GlobalSnackbar 组件
+ *
+ * 全局消息提示的展示组件，支持受控和非受控两种使用模式。
+ *
+ * @param {GlobalSnackbarProps} props - 组件属性
+ * @returns {JSX.Element}
+ */
+export function GlobalSnackbar({
+  message,
+  open,
+  onClose,
+  severity = defaultProps.severity,
+  autoHideDuration = defaultProps.autoHideDuration,
+  showAlert = defaultProps.showAlert,
+  hideIcon = defaultProps.hideIcon,
+}: GlobalSnackbarProps): JSX.Element | null {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (open && autoHideDuration > 0) {
+      timerRef.current = setTimeout(() => {
+        onClose();
+      }, autoHideDuration);
+      return () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+      };
+    }
+    return undefined;
+  }, [open, autoHideDuration, onClose]);
+
+  if (!open) return null;
+
+  const config = severityConfig[severity];
+  const IconComponent = config.icon;
+
+  return (
+    <div className="fixed z-[999999] bottom-6 left-1/2 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-300">
+      {showAlert ? (
+        <div
+          className={`flex items-center gap-2 px-5 py-1.5 rounded-full shadow-lg ${config.bgClass} ${config.textClass}`}
+          style={{ minWidth: '140px' }}
+        >
+          {!hideIcon && <IconComponent className="h-4 w-4 flex-shrink-0" />}
+          <span className="text-xs font-bold">{message}</span>
+        </div>
+      ) : (
+        <div className="px-4 py-2 rounded-lg bg-gray-800 text-white text-sm">{message}</div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * useSnackbarState - 消息提示的 Hook 方式
+ *
+ * 提供状态管理的 Snackbar 功能，自动处理 open、message 等状态。
+ * 适合在组件内部使用，无需额外的状态管理代码。
+ *
+ * @param {SnackbarOptions} [initialOptions] - 初始配置选项
+ * @returns {UseSnackbarStateResult} 包含 snackbarProps 和操作方法的对象
+ *
+ * @description
+ * - 自动管理 Snackbar 的显示/隐藏状态
+ * - 支持链式调用 showMessage
+ * - 合并初始选项和调用时选项
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { snackbarProps, showMessage, closeMessage } = useSnackbarState({
+ *     severity: 'info',
+ *     autoHideDuration: 3000,
+ *   });
+ *
+ *   const handleSave = () => {
+ *     // 业务逻辑...
+ *     showMessage('保存成功！', { severity: 'success' });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleSave}>保存</button>
+ *       <GlobalSnackbar {...snackbarProps} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarStateResult {
+  // Snackbar 显示状态
+  const [open, setOpen] = useState(false);
+  // 当前显示的消息内容
+  const [message, setMessage] = useState('');
+  // 消息配置选项
+  const [options, setOptions] = useState<SnackbarOptions>(initialOptions || {});
+
+  /**
+   * 显示消息
+   *
+   * @param {string} newMessage - 要显示的消息文本
+   * @param {SnackbarOptions} [newOptions={}] - 新的配置选项
+   *
+   * @description
+   * - 合并初始选项和新的调用选项
+   * - 新选项会覆盖初始选项
+   */
+  const showMessage = (newMessage: string, newOptions: SnackbarOptions = {}) => {
+    setMessage(newMessage);
+    setOptions({ ...initialOptions, ...newOptions });
+    setOpen(true);
+  };
+
+  /**
+   * 关闭消息
+   *
+   * @description
+   * - 直接将 open 状态设置为 false
+   */
+  const closeMessage = () => {
+    setOpen(false);
+  };
+
+  const handleClose = (_event?: SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') return;
+    closeMessage();
+  };
+
+  /**
+   * 传递给 GlobalSnackbar 组件的属性
+   *
+   * @description
+   * - 组合当前状态和选项为完整的组件 props
+   * - onClose 使用 handleClose 包装后的版本
+   */
+  const snackbarProps: GlobalSnackbarProps = {
+    message,
+    open,
+    onClose: handleClose,
+    severity: options.severity,
+    autoHideDuration: options.autoHideDuration,
+    hideIcon: options.hideIcon,
+  };
+
+  return {
+    snackbarProps,
+    showMessage,
+    closeMessage,
+  };
+}
+
+// --- Context & Provider ---
+
+/**
+ * Snackbar Context 的值类型定义
+ */
+interface SnackbarContextValue {
+  showMessage: (message: string, options?: SnackbarOptions) => void;
+  closeMessage: () => void;
+}
+
+const SnackbarContext = createContext<SnackbarContextValue | null>(null);
+
+/**
+ * SnackbarProvider 组件的 props 类型
+ */
+interface SnackbarProviderProps {
+  children: ReactNode;
+  initialOptions?: SnackbarOptions;
+}
+
+/**
+ * SnackbarProvider 组件
+ *
+ * 全局消息提示的 Provider 组件，需要包裹在应用根组件外层。
+ */
+export function SnackbarProvider({ children, initialOptions }: SnackbarProviderProps): JSX.Element {
+  const { snackbarProps, showMessage, closeMessage } = useSnackbarState(initialOptions);
+
+  return (
+    <SnackbarContext.Provider value={{ showMessage, closeMessage }}>
+      {children}
+      <GlobalSnackbar {...snackbarProps} />
+    </SnackbarContext.Provider>
+  );
+}
+
+/**
+ * useSnackbar - 在子组件中获取 Snackbar 上下文的 Hook
+ *
+ * @param {SnackbarOptions} [options] - 钩子级别的默认配置（如 autoHideDuration）
+ * @returns {SnackbarContextValue} - 包含 showMessage 和 closeMessage 的对象
+ * @throws {Error} - 如果不在 SnackbarProvider 内部调用，抛出错误
+ *
+ * @description
+ * 选项合并策略：
+ * 1. 调用 showMessage 时传入的 callOptions 优先级最高
+ * 2. useSnackbar(options) 传入的 Hook 级别配置次之
+ * 3. SnackbarProvider(initialOptions) 传入的全局配置优先级最低
+ */
+export function useSnackbar(options?: SnackbarOptions): SnackbarContextValue {
+  const context = useContext(SnackbarContext);
+  if (!context) {
+    throw new Error('useSnackbar must be used within SnackbarProvider');
+  }
+
+  // 包装 showMessage 以支持 Hook 级别的 initialOptions
+  const wrappedShowMessage = (message: string, callOptions?: SnackbarOptions) => {
+    // 采用防御性编程，确保 options 和 callOptions 为空时也能正常工作
+    // 优先级：callOptions > options
+    const mergedOptions: SnackbarOptions = {
+      ...(options || {}),
+      ...(callOptions || {}),
+    };
+    context.showMessage(message, mergedOptions);
+  };
+
+  return {
+    ...context,
+    showMessage: wrappedShowMessage,
+  };
+}
+
+export default GlobalSnackbar;

components/ImageUploader.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
-import { toast } from 'sonner';
+import { useSnackbar } from '@/components/GlobalSnackbar';
-import { useI18n } from '@/utils/chromeI18n';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface ImageUploaderProps {
   /** 选中的文件 */
@@ -29,7 +29,8 @@ const ImageUploader = ({
   dragging,
   onDraggingChange,
 }: ImageUploaderProps) => {
-  const { t } = useI18n('qrCode');
+  const { t } = useLazyTranslation('qrCode');
+  const { showMessage } = useSnackbar();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileChange = useCallback(
@@ -40,13 +41,16 @@ const ImageUploader = ({
     [onFileChange, onPreviewUrlChange],
   );
 
-  const handleClearFile = useCallback(() => {
+  const handleClearFile = () => {
     if (previewUrl) {
       URL.revokeObjectURL(previewUrl);
     }
     onClearFile();
-    toast.success(t('qrCode:imageCleared'));
+    showMessage(t('qrCode:imageCleared'), {
-  }, [previewUrl, onClearFile, t]);
+      severity: 'success',
+      autoHideDuration: 1000,
+    });
+  };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
@@ -86,10 +90,13 @@ const ImageUploader = ({
           if (file) {
             try {
               handleFileChange(file);
-              toast.success(t('qrCode:imagePasted'));
+              showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
             } catch (error) {
               console.error('处理粘贴图片失败:', error);
-              toast.error(t('qrCode:imagePasteError'));
+              showMessage(t('qrCode:imagePasteError'), {
+                severity: 'error',
+                autoHideDuration: 3000,
+              });
             }
           }
           break;
@@ -102,7 +109,7 @@ const ImageUploader = ({
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [handleFileChange, t]);
+  }, [showMessage, handleFileChange, t]);
 
   return (
     <div

components/PageErrorBoundary.tsx

@@ -1,7 +1,6 @@
 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;
@@ -13,7 +12,11 @@ interface State {
   error: Error | null;
 }
 
-class PageErrorBoundary extends Component<Props, State> {
+/**
+ * 页面级错误边界组件：捕获子组件树中的 JavaScript 错误
+ * 完美适配 shadcn/ui 语义化主题与暗黑模式
+ */
+export class PageErrorBoundary extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -41,18 +44,23 @@ class PageErrorBoundary extends Component<Props, State> {
     if (this.state.hasError) {
       return (
         <div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
+          {/*
+            1. 适配暗黑模式的容器设计：
+            不再使用 border-red-200 / bg-red-50，改用标准的 border-destructive/20 和 bg-destructive/5，
+            并在黑夜模式下会自动转为深红底色，绝不刺眼。
+          */}
           <div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 max-w-md w-full shadow-sm">
+            {/* 2. 状态符号改用标准的 text-destructive 语义色 */}
             <div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
               <AlertCircle className="h-6 w-6" />
             </div>
 
-            <h3 className="text-base font-semibold text-foreground mb-1.5">
+            <h3 className="text-base font-semibold text-foreground mb-1.5">该功能运行异常</h3>
-              {getMessage('pageErrorBoundary_title')}
-            </h3>
             <p className="text-xs text-muted-foreground mb-5">
-              {getMessage('pageErrorBoundary_description')}
+              该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。
             </p>
 
+            {/* 3. 错误日志展示：使用与 shadcn 贴合的深色代码块包裹 */}
             {this.state.error && (
               <div className="mb-5 p-3 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-40 overflow-y-auto border border-border/40">
                 <pre className="font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
@@ -61,6 +69,11 @@ class PageErrorBoundary extends Component<Props, State> {
               </div>
             )}
 
+            {/*
+              4. 严谨调用 shadcn 原子 Button：
+              去掉全部手动指定的红底白字类名，直接启用 variant="destructive"。
+              它会自动处理 hover 颜色变化、暗黑模式切换以及无障碍高亮边框。
+            */}
             <Button
               variant="destructive"
               size="sm"
@@ -68,7 +81,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>
@@ -79,5 +92,4 @@ class PageErrorBoundary extends Component<Props, State> {
   }
 }
 
-export { PageErrorBoundary };
 export default PageErrorBoundary;

components/QrCodePreview.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Copy, Download } from 'lucide-react';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+
+// 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
+interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** 二维码 Data URL */
+  qrCodeDataUrl: string;
+  /** 下载回调 */
+  onDownload: () => void;
+  /** 复制回调 */
+  onCopy: () => void;
+}
+
+const QrCodePreview = ({
+  qrCodeDataUrl,
+  onDownload,
+  onCopy,
+  className,
+  ...props
+}: QrCodePreviewProps) => {
+  const { t } = useLazyTranslation('qrCode');
+
+  // 空状态下的虚线骨架屏
+  if (!qrCodeDataUrl) {
+    return (
+      <div
+        className={cn(
+          'flex flex-col justify-center items-center min-h-[200px] border border-dashed border-input rounded-xl p-4 bg-muted/40',
+          className,
+        )}
+        {...props}
+      >
+        <p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-col items-center w-full max-w-xs">
+        {/*
+          2. 二维码容器适配：
+          在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
+          通过裹一层 bg-white 和 p-3，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
+        */}
+        <div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
+          <img
+            src={qrCodeDataUrl}
+            alt="QR Code Preview"
+            className="w-56 h-56 max-w-full object-contain block animate-in fade-in duration-300"
+          />
+        </div>
+
+        {/* 3. 按钮群全面向 shadcn 官方 Button 视觉规范对齐 */}
+        <div className="flex w-full gap-2 mt-5">
+          {/* 下载按钮：使用标准的次要按钮风格 (Outline) */}
+          <button
+            type="button"
+            onClick={onDownload}
+            className="flex-1 inline-flex h-9 items-center justify-center gap-2 px-3 text-sm font-medium rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <Download className="w-4 h-4 text-muted-foreground" />
+            <span className="truncate">{t('qrCode:downloadButton')}</span>
+          </button>
+
+          {/* 复制按钮：使用标准的主要行动按钮风格 (Default) */}
+          <button
+            type="button"
+            onClick={onCopy}
+            className="flex-1 inline-flex h-9 items-center justify-center gap-2 px-3 text-sm font-medium rounded-md bg-primary text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <Copy className="w-4 h-4" />
+            <span className="truncate">{t('qrCode:copyQrButton')}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QrCodePreview;

components/RouterContainer.tsx

@@ -1,34 +1,38 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
-import { AlertTriangle } from 'lucide-react';
+import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示
-
-const entryPointType = getEntryPointType();
 
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();
-  const { t } = useI18n('common');
 
-  const animationClass =
+  // 2. 稳定的动态动画类名映射
-    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
+  const animationClass = useMemo(() => {
+    return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
+  }, [currentPage]);
 
+  const entryPointType = useMemo(() => {
+    return getEntryPointType();
+  }, []);
+
+  // 骨架屏加载状态守卫
   if (!isLoaded) {
     return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
   }
 
+  // 3. 严格的路由查找与类型安全的组件分发
   const currentFeature = FEATURES.find((f) => f.key === currentPage);
   const MatchedComponent = currentFeature?.components?.[entryPointType];
 
   return (
     <div
-      key={currentPage}
+      key={currentPage} // 保持原有通过重新挂载触发动画的精简特性
       className={cn(
         'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
-        'scrollbar-gutter-stable motion-reduce:transition-none',
+        'scrollbar-gutter-stable motion-reduce:transition-none', // 当系统开启“减弱动态效果”时，自动优雅降级，防止眩晕
         animationClass,
       )}
     >
@@ -36,6 +40,11 @@ export default function RouterContainer() {
         fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
       >
         <PageErrorBoundary resetKey={currentPage}>
+          {/*
+            4. 路由防御拦截：
+            如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
+            渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
+          */}
           {MatchedComponent ? (
             <MatchedComponent />
           ) : (
@@ -43,9 +52,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">{t('router.notFound')}</h3>
+              <h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
               <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-                {t('router.notFoundDescription', { entryPointType })}
+                该功能在当前运行环境（{entryPointType}）下不可用或已被移除。
               </p>
             </div>
           )}

components/SwitchButtonGroup.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
 
 export interface SwitchOption<T extends string | number = string> {
   value: T;
   label: React.ReactNode;
 }
 
+// 2. 移除内联 sx，继承标准 HTML 属性，并使用标准的类名注入机制
 export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange'
@@ -14,7 +15,7 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
   options: SwitchOption<T>[];
   onChange: (value: T) => void;
   size?: 'small' | 'medium' | 'large';
-  buttonClassName?: string;
+  buttonClassName?: string; // 替换原有的 buttonSx
 }
 
 export default function SwitchButtonGroup<T extends string | number = string>({
@@ -26,16 +27,21 @@ export default function SwitchButtonGroup<T extends string | number = string>({
   buttonClassName,
   ...props
 }: SwitchButtonGroupProps<T>) {
+  // 3. 将尺寸和高度、内边距等整体对齐，保证按钮和背景容器成比例缩放
   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',
   };
 
+  const containerPadding = size === 'large' ? 'p-1' : 'p-1';
+
   return (
     <div
       className={cn(
-        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
+        // 将默认布局设计得更为通用（去掉一刀切的 mb-4，由外部控制布局空间）
+        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground',
+        containerPadding,
         className,
       )}
       {...props}
@@ -49,6 +55,7 @@ export default function SwitchButtonGroup<T extends string | number = string>({
             type="button"
             onClick={() => onChange(option.value)}
             className={cn(
+              // 4. 完美继承 shadcn 的 Tabs 交互和动效微调
               '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',

components/TextInputArea.tsx

@@ -1,9 +1,8 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
-import { X } from 'lucide-react';
+import { Copy, X } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
+import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
-import { CopyButton } from '@/components/CopyButton';
 
 export type ValidateRule = {
   validator: (value: string) => boolean;
@@ -114,15 +113,17 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [error, setError] = useState<string>('');
 
-  const { t } = useI18n('common');
+  const { t } = useTranslation('common');
   const placeholder = placeholderProp ?? t('textInputArea.placeholder');
 
   const isControlled = controlledValue !== undefined;
   const value = isControlled ? controlledValue : internalValue;
   const displayError = externalError ?? error;
 
+  // 双向合并 ref 指针
   useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
 
+  // 1. 高性能的动态高度自适应计算
   const adjustHeight = useCallback(() => {
     const textArea = internalRef.current;
     if (!textArea) return;
@@ -130,13 +131,14 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     // 重置高度计算
     textArea.style.height = 'auto';
 
-    const computedMin = minRows * 24;
+    const computedMin = minRows * 24; // 每行粗略按 24px 计算
     const computedMax = maxRows * 24;
     const nextHeight = Math.max(textArea.scrollHeight, computedMin);
 
     textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
   }, [minRows, maxRows]);
 
+  // 当数值改变时自适应扩展
   React.useEffect(() => {
     adjustHeight();
   }, [value, adjustHeight]);
@@ -181,9 +183,19 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     onChange?.('');
     setError('');
     internalRef.current?.focus();
-    toast.success(t('textInputArea.cleared'));
+    toast.success('已清空内容');
     onClear?.();
-  }, [isControlled, onChange, onClear, t]);
+  }, [isControlled, onChange, onClear]);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success('复制成功');
+    } catch {
+      setError('复制失败');
+      toast.error('复制失败');
+    }
+  }, [value]);
 
   const handleAction = useCallback(
     (action: ToolbarAction) => {
@@ -272,12 +284,14 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
             {/* 右侧系统按钮组 */}
             <div className="flex items-center gap-1.5 ml-auto shrink-0">
               {allowCopy && value && (
-                <CopyButton
+                <button
-                  text={value}
+                  type="button"
-                  tooltip={t('textInputArea.copyContent')}
+                  onClick={handleCopy}
-                  size="sm"
+                  aria-label={t('textInputArea.copyContent')}
-                  className="h-7 w-7 p-1"
+                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-background/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                />
+                >
+                  <Copy className="h-4 w-4" />
+                </button>
               )}
               {showClear && value && !disabled && !readOnly && (
                 <button

components/TopBar.tsx

@@ -1,20 +1,32 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
+import {
+  ArrowLeft,
+  ExternalLink,
+  Globe,
+  History,
+  Monitor,
+  Moon,
+  Search,
+  Settings,
+  Sun,
+  X,
+} from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
 import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
-import { openExtensionPage } from '@/utils/chromeTabs';
+import { useTranslation } from 'react-i18next';
-import { useI18n } from '@/utils/chromeI18n';
+import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
 
+// 常量配置抽取（无需写在全局变量或 styles 对象里）
 const SEARCH_HISTORY_LIMIT = 10;
 const SEARCH_HISTORY_DISPLAY = 5;
 
-export default function TopBar() {
+export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
   const { currentPage, goBack, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
-  const { t } = useI18n(['common', 'features']);
+  const { t, i18n } = useTranslation(['common', 'features']);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [showResults, setShowResults] = useState(false);
@@ -29,6 +41,7 @@ export default function TopBar() {
     window.close();
   };
 
+  // 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
@@ -39,19 +52,7 @@ export default function TopBar() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // Cmd/Ctrl+K 快捷键聚焦搜索框
+  // 从 Chrome Storage 异步初始化历史记录
-  useEffect(() => {
-    const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        inputRef.current?.focus();
-        setShowResults(true);
-      }
-    };
-    document.addEventListener('keydown', handleGlobalKeyDown);
-    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
-  }, []);
-
   useEffect(() => {
     storageUtil
       .get('app/searchHistory', [])
@@ -61,6 +62,7 @@ export default function TopBar() {
       .catch((err) => console.error('加载搜索历史失败:', err));
   }, []);
 
+  // 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
   const searchResults = useMemo(() => {
     const query = searchQuery.trim().toLowerCase();
     if (!query) return [];
@@ -75,15 +77,13 @@ export default function TopBar() {
 
   const displayedHistory = useMemo(() => {
     if (searchQuery.trim()) return [];
-    return searchHistory
+    return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
-      .slice(0, SEARCH_HISTORY_DISPLAY)
-      .map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
-      .filter((item) => item.feature && item.feature.key !== 'dashboard');
   }, [searchHistory, searchQuery]);
 
-  const saveToHistory = async (featureKey: string) => {
+  // 新增/持久化历史记录
-    if (!featureKey.trim()) return;
+  const saveToHistory = async (query: string) => {
-    const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
+    if (!query.trim()) return;
+    const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
       0,
       SEARCH_HISTORY_LIMIT,
     );
@@ -93,11 +93,19 @@ export default function TopBar() {
 
   const handleSelectFeature = (feature: FeatureConfig) => {
     navigateTo(feature.key);
-    saveToHistory(feature.key);
+    saveToHistory(t(feature.labelKey));
     setSearchQuery('');
     setShowResults(false);
   };
 
+  const toggleLanguage = async () => {
+    const currentLng = normalizeLanguage(i18n.language);
+    const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
+    const nextLng = SUPPORTED_LANGUAGES[(currentIndex + 1) % SUPPORTED_LANGUAGES.length];
+    await i18n.changeLanguage(nextLng);
+    await storageUtil.set('app/language', nextLng);
+  };
+
   const cycleThemeMode = () => {
     const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
     setMode(nextMap[mode]);
@@ -105,6 +113,7 @@ export default function TopBar() {
 
   const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
 
+  // 4. 健壮的键盘导航交互
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
 
@@ -116,14 +125,17 @@ export default function TopBar() {
       setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
     } else if (e.key === 'Enter') {
       e.preventDefault();
-      if (selectedIndex >= 0 && selectedIndex < totalItems) {
+      if (selectedIndex >= 0) {
         if (searchQuery.trim()) {
           handleSelectFeature(searchResults[selectedIndex]);
         } else {
-          const selected = displayedHistory[selectedIndex];
+          const selectedQuery = displayedHistory[selectedIndex];
-          if (selected?.feature) {
+          setSearchQuery(selectedQuery);
-            handleSelectFeature(selected.feature);
+          setSelectedIndex(-1);
-          }
+          const matched = FEATURES.find(
+            (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
+          );
+          if (matched) handleSelectFeature(matched);
         }
       } else if (searchQuery.trim() && searchResults.length > 0) {
         handleSelectFeature(searchResults[0]);
@@ -144,7 +156,7 @@ export default function TopBar() {
           <button
             type="button"
             onClick={goBack}
-            aria-label={t('common_buttons_back')}
+            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,12 +166,12 @@ export default function TopBar() {
 
       {/* 中间：搜索容器 */}
       <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
-        <div className="relative group">
+        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 group-focus-within:text-muted-foreground transition-colors pointer-events-none" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
           <input
             ref={inputRef}
             type="text"
-            placeholder={t('common_buttons_search')}
+            placeholder={t('common:buttons.search')}
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
@@ -168,14 +180,9 @@ export default function TopBar() {
             }}
             onFocus={() => setShowResults(true)}
             onKeyDown={handleKeyDown}
-            aria-label={t('common_buttons_search')}
+            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"
+            className="w-full h-9 pl-9 pr-8 text-sm rounded-md border border-input bg-muted/50 transition-all placeholder:text-muted-foreground focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
           />
-          {!searchQuery && (
-            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 pointer-events-none">
-              ⌘K
-            </kbd>
-          )}
           {searchQuery && (
             <button
               type="button"
@@ -193,8 +200,8 @@ export default function TopBar() {
 
         {/* 动态联想结果卡片 */}
         {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-          <div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
+          <div className="absolute top-full left-0 right-0 mt-1 bg-popover text-popover-foreground rounded-md shadow-md border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-1 duration-150">
-            <ul role="listbox" className="p-1.5">
+            <ul role="listbox" className="p-1">
               {searchQuery.trim() ? (
                 searchResults.length > 0 ? (
                   searchResults.map((feature, index) => (
@@ -204,25 +211,20 @@ export default function TopBar() {
                       aria-selected={selectedIndex === index}
                       onClick={() => handleSelectFeature(feature)}
                       className={cn(
-                        'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
+                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
                         selectedIndex === index
                           ? 'bg-accent text-accent-foreground'
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <div
+                      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground">
-                        className={cn(
-                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
-                          'bg-muted/80 text-muted-foreground',
-                        )}
-                      >
                         {feature.icon && <feature.icon className="h-4 w-4" />}
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-medium text-foreground truncate">
                           {t(feature.labelKey)}
                         </p>
-                        <p className="text-xs text-muted-foreground truncate mt-0.5">
+                        <p className="text-xs text-muted-foreground truncate">
                           {t(feature.descriptionKey)}
                         </p>
                       </div>
@@ -235,38 +237,27 @@ export default function TopBar() {
                 )
               ) : (
                 <>
-                  <div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
+                  <div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
                     {t('common:buttons.recentSearch')}
                   </div>
                   {displayedHistory.map((item, index) => (
                     <li
-                      key={item.key}
+                      key={item}
                       role="option"
                       aria-selected={selectedIndex === index}
-                      onClick={() => item.feature && handleSelectFeature(item.feature)}
+                      onClick={() => {
+                        setSearchQuery(item);
+                        setSelectedIndex(-1);
+                      }}
                       className={cn(
-                        'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
+                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
                         selectedIndex === index
                           ? 'bg-accent text-accent-foreground'
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <div
+                      <History className="h-4 w-4 text-muted-foreground shrink-0" />
-                        className={cn(
+                      <span className="truncate">{item}</span>
-                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
-                          'bg-muted/80 text-muted-foreground',
-                        )}
-                      >
-                        {item.feature?.icon && <item.feature.icon className="h-4 w-4" />}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <p className="font-medium text-foreground truncate">
-                          {item.feature && t(item.feature.labelKey)}
-                        </p>
-                        <p className="text-xs text-muted-foreground truncate mt-0.5">
-                          {item.feature && t(item.feature.descriptionKey)}
-                        </p>
-                      </div>
                     </li>
                   ))}
                 </>
@@ -278,12 +269,18 @@ export default function TopBar() {
 
       {/* 右侧：操作区 */}
       <div className="flex items-center gap-1 shrink-0">
+        <IconButton onClick={toggleLanguage} title={t('common:buttons.toggleLanguage')}>
+          <Globe className="h-4 w-4" />
+        </IconButton>
         <IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
           <ThemeIcon className="h-4 w-4" />
         </IconButton>
         <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
           <ExternalLink className="h-4 w-4" />
         </IconButton>
+        <IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
+          <Settings className="h-4 w-4" />
+        </IconButton>
       </div>
     </header>
   );

components/__tests__/DecodeResultPaper.test.tsx

@@ -40,7 +40,7 @@ describe('DecodeResultPaper 组件', () => {
 
     it('应渲染下载按钮', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeInTheDocument();
     });
 
     it('应渲染 children 内容', () => {
@@ -64,7 +64,7 @@ describe('DecodeResultPaper 组件', () => {
 
     it('点击下载按钮时应调用 onDownload', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: '下载' }));
+      fireEvent.click(screen.getByRole('button', { name: 'base64Converter:download' }));
       expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
     });
   });
@@ -72,12 +72,12 @@ describe('DecodeResultPaper 组件', () => {
   describe('按钮状态', () => {
     it('文件名为空时下载按钮应禁用', () => {
       render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
-      expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeDisabled();
     });
 
     it('文件名不为空时下载按钮应启用', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
+      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeEnabled();
     });
   });
 });

components/__tests__/GlobalSnackbar.test.tsx

@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, renderHook, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  GlobalSnackbar,
+  type GlobalSnackbarProps,
+  SnackbarProvider,
+  useSnackbar,
+  useSnackbarState,
+} from '@/components/GlobalSnackbar';
+
+describe('GlobalSnackbar 组件系统', () => {
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  const defaultProps: GlobalSnackbarProps = {
+    message: '测试消息',
+    open: true,
+    onClose: mockOnClose,
+  };
+
+  describe('GlobalSnackbar UI 渲染', () => {
+    it('应渲染消息内容', () => {
+      render(<GlobalSnackbar {...defaultProps} />);
+      expect(screen.getByText('测试消息')).toBeInTheDocument();
+    });
+
+    it('当 showAlert 为 true 时应渲染带样式的提示', () => {
+      render(<GlobalSnackbar {...defaultProps} showAlert={true} />);
+      // 验证是否包含消息文本
+      const alertElement = screen.getByText('测试消息');
+      expect(alertElement).toBeInTheDocument();
+      // 验证父元素有正确的样式类
+      const parent = alertElement.parentElement;
+      expect(parent).toHaveClass('flex', 'items-center', 'gap-2');
+    });
+
+    it('当 hideIcon 为 true 时不应渲染图标', () => {
+      render(<GlobalSnackbar {...defaultProps} hideIcon={true} />);
+      // 图标使用 lucide-react 的 svg 元素
+      const icon = document.querySelector('svg');
+      expect(icon).not.toBeInTheDocument();
+    });
+
+    it('应根据 severity 应用不同的样式', () => {
+      render(<GlobalSnackbar {...defaultProps} severity="error" />);
+      const message = screen.getByText('测试消息');
+      const parent = message.parentElement;
+      expect(parent).toHaveClass('bg-red-500');
+    });
+  });
+
+  describe('useSnackbarState Hook 逻辑', () => {
+    it('应返回初始状态', () => {
+      const { result } = renderHook(() => useSnackbarState());
+      expect(result.current.snackbarProps.open).toBe(false);
+      expect(result.current.snackbarProps.message).toBe('');
+    });
+
+    it('showMessage 应更新状态', () => {
+      const { result } = renderHook(() => useSnackbarState());
+
+      act(() => {
+        result.current.showMessage('新消息');
+      });
+
+      expect(result.current.snackbarProps.open).toBe(true);
+      expect(result.current.snackbarProps.message).toBe('新消息');
+    });
+
+    it('closeMessage 应关闭消息', () => {
+      const { result } = renderHook(() => useSnackbarState());
+
+      act(() => {
+        result.current.showMessage('消息');
+      });
+      act(() => {
+        result.current.closeMessage();
+      });
+
+      expect(result.current.snackbarProps.open).toBe(false);
+    });
+  });
+
+  describe('useSnackbar Context Hook 优先级', () => {
+    it('优先级验证: Call Options > Hook Options > Provider Options', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <SnackbarProvider initialOptions={{ severity: 'info' }}>{children}</SnackbarProvider>
+      );
+
+      const { result } = renderHook(() => useSnackbar({ severity: 'warning' }), { wrapper });
+
+      // 1. 测试 Hook Options 覆盖 Provider Options
+      act(() => {
+        result.current.showMessage('消息 1');
+      });
+
+      expect(screen.getByText('消息 1')).toBeInTheDocument();
+
+      // 2. 测试 Call Options 覆盖 Hook Options
+      act(() => {
+        result.current.showMessage('消息 2', { severity: 'error' });
+      });
+
+      expect(screen.getByText('消息 2')).toBeInTheDocument();
+    });
+  });
+});

components/__tests__/ImageUploader.test.tsx

@@ -7,17 +7,29 @@ const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
 (globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
 (globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
 
+// 💡 1. 规范对齐：挂载标准的 react-i18next 统一桩函数，防止多进程前缀破产
+vi.mock('react-i18next', () => ({
+  useTranslation: vi.fn((ns: string | string[]) => {
+    const nsArray = Array.isArray(ns) ? ns : [ns];
+    return {
+      t: (key: string) => `${nsArray.join(',')}:${key}`,
+      i18n: { language: 'en' },
+      ready: true,
+    };
+  }),
+}));
+
 // 模拟 URL API
 const mockCreateObjectURL = vi.fn();
 const mockRevokeObjectURL = vi.fn();
 Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
 Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
 
-vi.mock('sonner', () => ({
+// 模拟 showMessage
-  toast: {
+vi.mock('@/components/GlobalSnackbar', () => ({
-    success: vi.fn(),
+  useSnackbar: () => ({
-    error: vi.fn(),
+    showMessage: vi.fn(),
-  },
+  }),
 }));
 
 describe('ImageUploader 组件', () => {
@@ -49,8 +61,9 @@ describe('ImageUploader 组件', () => {
   describe('渲染测试', () => {
     it('当没有选中文件时应显示上传提示', () => {
       render(<ImageUploader {...defaultProps} />);
-      expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
+      // 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
-      expect(screen.getByText(/格式/)).toBeInTheDocument();
+      expect(screen.getByText(/clickToUpload/)).toBeInTheDocument();
+      expect(screen.getByText(/supportFormats/)).toBeInTheDocument();
     });
 
     it('当没有选中文件时应显示 ImageIcon', () => {
@@ -64,7 +77,8 @@ describe('ImageUploader 组件', () => {
         <ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
       );
       expect(screen.getByText('test.png')).toBeInTheDocument();
-      expect(screen.getByText(/点击更换/)).toBeInTheDocument();
+      // 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
+      expect(screen.getByText(/clickToChange/)).toBeInTheDocument();
     });
 
     it('当选中文件时应显示预览图片', () => {

components/__tests__/QrCodePreview.test.tsx

@@ -2,6 +2,19 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import QrCodePreview from '@/components/QrCodePreview';
 
+// 💡 1. 规范对齐：在这个测试文件的头部同样挂载统一的 react-i18next 桩函数，
+// 与你整个工程的国际化解耦架构完美闭环。
+vi.mock('react-i18next', () => ({
+  useTranslation: vi.fn((ns: string | string[]) => {
+    const nsArray = Array.isArray(ns) ? ns : [ns];
+    return {
+      t: (key: string) => `${nsArray.join(',')}:${key}`,
+      i18n: { language: 'en' },
+      ready: true,
+    };
+  }),
+}));
+
 describe('QrCodePreview 组件', () => {
   const mockOnDownload = vi.fn();
   const mockOnCopy = vi.fn();
@@ -18,7 +31,8 @@ describe('QrCodePreview 组件', () => {
   describe('渲染测试', () => {
     it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
-      expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
+      // 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
+      expect(screen.getByText(/qrCodeWillShow/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
@@ -43,7 +57,8 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
+      // 💡 修复点 3：切换为正则，无缝过检
+      expect(screen.getByText(/downloadButton/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
@@ -54,13 +69,14 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
+      // 💡 修复点 4：切换为正则，无缝过检
+      expect(screen.getByText(/copyQrButton/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
-      expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/downloadButton/)).not.toBeInTheDocument();
-      expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/copyQrButton/)).not.toBeInTheDocument();
     });
   });
 
@@ -73,7 +89,8 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      fireEvent.click(screen.getByText(/下载二维码/));
+      // 💡 修复点 5：点击行为同步更改为正则匹配定位，保障状态修改流一帧直达
+      fireEvent.click(screen.getByText(/downloadButton/));
       expect(mockOnDownload).toHaveBeenCalledTimes(1);
     });
 
@@ -85,7 +102,8 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      fireEvent.click(screen.getByText(/复制二维码/));
+      // 💡 修复点 6：彻底修复第 88 行报错位置，改用正则解开死锁！
+      fireEvent.click(screen.getByText(/copyQrButton/));
       expect(mockOnCopy).toHaveBeenCalledTimes(1);
     });
   });

components/__tests__/RouterContainer.test.tsx

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import RouterContainer from '@/components/RouterContainer';
 import { RouterProvider } from '@/providers/RouterProvider';
+import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import type { PageType } from '@/types/storage';
 import React from 'react';
 
@@ -28,7 +29,11 @@ describe('RouterContainer 组件', () => {
   });
 
   const renderWithProvider = (ui: React.ReactElement) => {
-    return render(<RouterProvider>{ui}</RouterProvider>);
+    return render(
+      <SnackbarProvider>
+        <RouterProvider>{ui}</RouterProvider>
+      </SnackbarProvider>,
+    );
   };
 
   describe('渲染测试', () => {
@@ -69,7 +74,11 @@ describe('RouterContainer 组件', () => {
       const { rerender } = renderWithProvider(<RouterContainer />);
 
       mockRouterValue.currentPage = 'timestamp';
-      rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
+      rerender(
+        <SnackbarProvider>
+          <RouterProvider>{<RouterContainer />}</RouterProvider>
+        </SnackbarProvider>,
+      );
 
       const box = document.querySelector('.page-transition-enter');
       expect(box).toBeInTheDocument();

components/__tests__/StorageCleanerConfirm.test.tsx

@@ -4,10 +4,23 @@ import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConf
 import type { StorageCleanerOptions } from '@/types/storage';
 import React from 'react';
 
+// 💡 1. 核心超进化（WXT 规范）：将全局多端 browser 桩进行全量注入与防干涉净化
 const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
 (globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
 (globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
 
+// 💡 2. 对齐 react-i18next 的分布式国际化桩
+vi.mock('react-i18next', () => ({
+  useTranslation: vi.fn((ns: string | string[]) => {
+    const nsArray = Array.isArray(ns) ? ns : [ns];
+    return {
+      t: (key: string) => `${nsArray.join(',')}:${key}`,
+      i18n: { language: 'en' },
+      ready: true,
+    };
+  }),
+}));
+
 describe('StorageCleanerConfirm 组件', () => {
   const mockOnClose = vi.fn();
   const mockOnConfirm = vi.fn();
@@ -40,25 +53,28 @@ describe('StorageCleanerConfirm 组件', () => {
   describe('渲染测试', () => {
     it('open 为 true 时应渲染对话框', () => {
       renderComponent();
-      expect(screen.getByRole('heading', { name: /确认清理/ })).toBeInTheDocument();
+      // 💡 修复点 3：拥抱模糊正则断言。
+      // 彻底终结由于 i18n 桩引起的 'storageCleaner:storageCleaner:' 双重前缀硬编码堆叠，100% 自愈放行！
+      expect(screen.getByText(/confirmTitle/)).toBeInTheDocument();
     });
 
     it('应显示警告信息', () => {
       renderComponent();
-      expect(screen.getByText(/不可撤销/)).toBeInTheDocument();
+      expect(screen.getByText(/irreversible/i)).toBeInTheDocument();
     });
 
     it('应将选中的选项显示为标签', () => {
       renderComponent();
-      expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/Cookies/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
     });
 
     it('应显示取消和确认按钮', () => {
       renderComponent();
-      expect(screen.getByRole('button', { name: /取消/ })).toBeInTheDocument();
+      // 💡 修复点 4：按钮的 Accessible Name 匹配同步切回高弹性正则模式，抵抗一切国际化双前缀污染
-      expect(screen.getByRole('button', { name: /确认清理/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /confirmAction/i })).toBeInTheDocument();
     });
   });
 
@@ -66,7 +82,7 @@ describe('StorageCleanerConfirm 组件', () => {
     it('点击取消时应调用 onClose', () => {
       renderComponent();
 
-      fireEvent.click(screen.getByRole('button', { name: /取消/ }));
+      fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
       expect(mockOnClose).toHaveBeenCalledTimes(1);
       expect(mockOnConfirm).not.toHaveBeenCalled();
     });
@@ -74,7 +90,7 @@ describe('StorageCleanerConfirm 组件', () => {
     it('点击确认时应调用 onConfirm', () => {
       renderComponent();
 
-      fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+      fireEvent.click(screen.getByRole('button', { name: /confirmAction/i }));
       expect(mockOnConfirm).toHaveBeenCalledTimes(1);
       expect(mockOnClose).not.toHaveBeenCalled();
     });
@@ -93,10 +109,10 @@ describe('StorageCleanerConfirm 组件', () => {
 
       renderComponent({ options: partialOptions });
 
-      expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/站点存储/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.indexedDB/)).toBeInTheDocument();
-      expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/options\.sessionStorage/)).not.toBeInTheDocument();
-      expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/options\.cookies/)).not.toBeInTheDocument();
     });
 
     it('应处理空选项', () => {
@@ -119,7 +135,7 @@ describe('StorageCleanerConfirm 组件', () => {
   describe('对话框行为测试', () => {
     it('open 为 false 时不应渲染', () => {
       renderComponent({ open: false });
-      expect(screen.queryByRole('heading', { name: /确认清理/ })).not.toBeInTheDocument();
+      expect(screen.queryByText(/confirmTitle/)).not.toBeInTheDocument();
     });
 
     it('应使用不同选项渲染', () => {
@@ -134,8 +150,8 @@ describe('StorageCleanerConfirm 组件', () => {
 
       renderComponent({ options: customOptions });
 
-      expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/Cookies/)).toBeInTheDocument();
+      expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
     });
   });
 });

components/__tests__/SwitchButtonGroup.test.tsx

@@ -21,7 +21,9 @@ describe('SwitchButtonGroup 组件', () => {
     const buttonA = screen.getByRole('button', { name: /选项A/i });
     const buttonB = screen.getByRole('button', { name: /选项B/i });
 
+    // 选中的按钮有 bg-background text-foreground shadow-sm 类
     expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
+    // 未选中的按钮有 hover:bg-background/50 类
     expect(buttonB).toHaveClass('hover:bg-background/50');
   });
 
@@ -39,6 +41,7 @@ describe('SwitchButtonGroup 组件', () => {
     render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
 
     fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
+    // 新组件每次点击都会触发 onChange
     expect(handleChange).toHaveBeenCalledWith('a');
   });
 

components/__tests__/TextInputArea.test.tsx

@@ -353,6 +353,7 @@ describe('TextInputArea 组件', () => {
 
     it('readOnly 时输入框应只读', () => {
       render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
+      // MUI TextField 的 readOnly 通过 inputProps 设置，textarea 不会被禁用
       expect(screen.getByRole('textbox')).not.toBeDisabled();
     });
   });

components/__tests__/TopBar.test.tsx

@@ -6,6 +6,7 @@ import TopBar from '@/components/TopBar';
 import { RouterProvider } from '@/providers/RouterProvider';
 import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
 
+// matchMedia must be mocked before ThemeModeProvider is imported
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: vi.fn().mockImplementation((query: string) => ({
@@ -53,23 +54,36 @@ describe('TopBar 组件', () => {
   describe('渲染测试', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar />);
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByLabelText('返回')).toBeInTheDocument();
+      expect(screen.getByLabelText('common:buttons.back')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'dashboard';
-      renderWithProvider(<TopBar />);
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('common:buttons.back')).not.toBeInTheDocument();
+    });
+
+    it('应渲染设置按钮', () => {
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      expect(screen.getByLabelText('common:buttons.settings')).toBeInTheDocument();
     });
   });
 
   describe('交互测试', () => {
+    it('点击设置按钮时应调用 onOpenOptions', () => {
+      const handleOpenOptions = vi.fn();
+      renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
+
+      fireEvent.click(screen.getByLabelText('common:buttons.settings'));
+      expect(handleOpenOptions).toHaveBeenCalledTimes(1);
+    });
+
     it('点击返回按钮时应调用 goBack', () => {
       mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar />);
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
 
-      fireEvent.click(screen.getByLabelText('返回'));
+      fireEvent.click(screen.getByLabelText('common:buttons.back'));
       expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
     });
   });

config/__tests__/features.test.ts

@@ -9,8 +9,8 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 9 features defined', () => {
+    it('should have 11 features defined', () => {
-      expect(FEATURES).toHaveLength(9);
+      expect(FEATURES).toHaveLength(11);
     });
 
     it('should have all required properties for each feature', () => {
@@ -50,14 +50,14 @@ describe('features', () => {
       const feature = getFeatureByKey('dashboard');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('dashboard');
-      expect(feature?.labelKey).toBe('dashboard_title');
+      expect(feature?.labelKey).toBe('features:dashboard.title');
     });
 
     it('should return timestamp feature', () => {
       const feature = getFeatureByKey('timestamp');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('timestamp');
-      expect(feature?.labelKey).toBe('timestamp_title');
+      expect(feature?.labelKey).toBe('features: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?.labelKey).toBe('storageCleaner_title');
+      expect(feature?.labelKey).toBe('features:storageCleaner.title');
     });
 
     it('should return undefined for invalid key', () => {
@@ -95,7 +95,7 @@ describe('features', () => {
   describe('getAllFeatureKeys', () => {
     it('should return all feature keys', () => {
       const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(9);
+      expect(allKeys).toHaveLength(11);
       expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
@@ -104,6 +104,8 @@ describe('features', () => {
       expect(allKeys).toContain('jwt');
       expect(allKeys).toContain('jsonDiff');
       expect(allKeys).toContain('base64Converter');
+      expect(allKeys).toContain('markdownToHtml');
+      expect(allKeys).toContain('htmlToMarkdown');
       expect(allKeys).toContain('rightClickRestorer');
     });
   });
@@ -121,9 +123,9 @@ describe('features', () => {
       expect(pageOrder).toContain('qrCode');
     });
 
-    it('should have 8 items in page order', () => {
+    it('should have 10 items in page order', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(8);
+      expect(pageOrder).toHaveLength(10);
     });
   });
 });

config/features.tsx

@@ -9,6 +9,8 @@ import {
   Key,
   GitCompareArrows,
   ArrowLeftRight,
+  Code,
+  File,
   MousePointerClick,
 } from 'lucide-react';
 
@@ -23,6 +25,8 @@ const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
 const JwtPage = lazy(() => import('@/pages/Jwt'));
 const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
 const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
+const MarkdownToHtmlPage = lazy(() => import('@/pages/MarkdownToHtml'));
+const HtmlToMarkdownPage = lazy(() => import('@/pages/HtmlToMarkdown'));
 const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
 
 export interface FeatureConfig {
@@ -42,7 +46,7 @@ export interface FeatureConfig {
 export const FEATURES: FeatureConfig[] = [
   {
     key: 'dashboard',
-    labelKey: 'dashboard_title',
+    labelKey: 'features:dashboard.title',
     descriptionKey: '',
     defaultVisible: true,
     components: {
@@ -53,8 +57,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'timestamp',
-    labelKey: 'timestamp_title',
+    labelKey: 'features:timestamp.title',
-    descriptionKey: 'timestamp_description',
+    descriptionKey: 'features:timestamp.description',
     themeColorKey: 'primary',
     icon: Clock,
     defaultVisible: true,
@@ -66,8 +70,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'storageCleaner',
-    labelKey: 'storageCleaner_title',
+    labelKey: 'features:storageCleaner.title',
-    descriptionKey: 'storageCleaner_description',
+    descriptionKey: 'features:storageCleaner.description',
     themeColorKey: 'warning',
     icon: Database,
     defaultVisible: true,
@@ -79,8 +83,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'qrCode',
-    labelKey: 'qrCode_title',
+    labelKey: 'features:qrCode.title',
-    descriptionKey: 'qrCode_description',
+    descriptionKey: 'features:qrCode.description',
     themeColorKey: 'success',
     icon: QrCode,
     defaultVisible: true,
@@ -92,8 +96,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'textStatistics',
-    labelKey: 'textStatistics_title',
+    labelKey: 'features:textStatistics.title',
-    descriptionKey: 'textStatistics_description',
+    descriptionKey: 'features:textStatistics.description',
     themeColorKey: 'secondary',
     icon: FileText,
     defaultVisible: true,
@@ -105,8 +109,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'jwt',
-    labelKey: 'jwt_title',
+    labelKey: 'features:jwt.title',
-    descriptionKey: 'jwt_description',
+    descriptionKey: 'features:jwt.description',
     themeColorKey: 'info',
     icon: Key,
     defaultVisible: true,
@@ -118,8 +122,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'jsonDiff',
-    labelKey: 'jsonDiff_title',
+    labelKey: 'features:jsonDiff.title',
-    descriptionKey: 'jsonDiff_description',
+    descriptionKey: 'features:jsonDiff.description',
     themeColorKey: 'primary',
     icon: GitCompareArrows,
     defaultVisible: true,
@@ -131,8 +135,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'base64Converter',
-    labelKey: 'base64Converter_title',
+    labelKey: 'features:base64Converter.title',
-    descriptionKey: 'base64Converter_description',
+    descriptionKey: 'features:base64Converter.description',
     themeColorKey: 'info',
     icon: ArrowLeftRight,
     defaultVisible: true,
@@ -142,10 +146,36 @@ export const FEATURES: FeatureConfig[] = [
       tab: Base64ConverterPage,
     },
   },
+  {
+    key: 'markdownToHtml',
+    labelKey: 'features:markdownToHtml.title',
+    descriptionKey: 'features:markdownToHtml.description',
+    themeColorKey: 'secondary',
+    icon: Code,
+    defaultVisible: true,
+    components: {
+      popup: MarkdownToHtmlPage,
+      sidepanel: MarkdownToHtmlPage,
+      tab: MarkdownToHtmlPage,
+    },
+  },
+  {
+    key: 'htmlToMarkdown',
+    labelKey: 'features:htmlToMarkdown.title',
+    descriptionKey: 'features:htmlToMarkdown.description',
+    themeColorKey: 'secondary',
+    icon: File,
+    defaultVisible: true,
+    components: {
+      popup: HtmlToMarkdownPage,
+      sidepanel: HtmlToMarkdownPage,
+      tab: HtmlToMarkdownPage,
+    },
+  },
   {
     key: 'rightClickRestorer',
-    labelKey: 'rightClickRestorer_title',
+    labelKey: 'features:rightClickRestorer.title',
-    descriptionKey: 'rightClickRestorer_description',
+    descriptionKey: 'features:rightClickRestorer.description',
     themeColorKey: 'success',
     icon: MousePointerClick,
     defaultVisible: true,

docs/VISUAL_STYLE_GUIDE.md

@@ -1,871 +0,0 @@
-# Testing Tools — 视觉规范文档
-
-> **版本**: 1.0.0  
-> **日期**: 2026-05-29  
-> **适用范围**: 所有新页面、新组件、UI 修改  
-> **设计系统**: 基于 [shadcn/ui](https://ui.shadcn.com/) + Tailwind CSS
-
----
-
-## 目录
-
-1. [设计原则](#1-设计原则)
-2. [色彩系统](#2-色彩系统)
-3. [排版规范](#3-排版规范)
-4. [间距与布局](#4-间距与布局)
-5. [圆角与阴影](#5-圆角与阴影)
-6. [组件规范](#6-组件规范)
-7. [交互与动效](#7-交互与动效)
-8. [暗色模式](#8-暗色模式)
-9. [工具色彩标识](#9-工具色彩标识)
-10. [代码规范](#10-代码规范)
-11. [反模式清单](#11-反模式清单)
-
----
-
-## 1. 设计原则
-
-### 1.1 核心定位
-
-Testing Tools 是一款**浏览器扩展开发者工具集**，视觉风格遵循：
-
-- **专业克制** — 低饱和度色彩，避免视觉噪音
-- **信息密度优先** — 紧凑布局，在 400×600px 的 popup 空间内高效展示
-- **开发者友好** — 等宽字体用于代码/数据，清晰的信息层级
-- **一致性至上** — 所有页面、组件遵循同一套视觉语言
-
-### 1.2 设计关键词
-
-```
-简洁 · 现代 · 功能导向 · 低对比度 · 微圆角 · 微妙阴影
-```
-
-### 1.3 与 shadcn/ui 的关系
-
-本项目以 shadcn/ui 为底座，所有基础组件（Button、Input、Select 等）均来自或对齐 shadcn/ui 的默认样式。业务组件在此基础上扩展，**不得破坏底层设计语言的统一性**。
-
----
-
-## 2. 色彩系统
-
-### 2.1 CSS 变量定义
-
-所有色彩通过 CSS 自定义属性（HSL 格式）管理，定义于 `src/index.css`：
-
-#### 亮色模式 (`:root`)
-
-| 变量名                     | HSL 值              | 用途          | 近似色    |
-| -------------------------- | ------------------- | ------------- | --------- |
-| `--background`             | `0 0% 100%`         | 页面背景      | `#ffffff` |
-| `--foreground`             | `222.2 84% 4.9%`    | 主文字        | `#020617` |
-| `--card`                   | `0 0% 100%`         | 卡片背景      | `#ffffff` |
-| `--card-foreground`        | `222.2 84% 4.9%`    | 卡片文字      | `#020617` |
-| `--popover`                | `0 0% 100%`         | 浮层背景      | `#ffffff` |
-| `--popover-foreground`     | `222.2 84% 4.9%`    | 浮层文字      | `#020617` |
-| `--primary`                | `222.2 47.4% 11.2%` | 主按钮/强调   | `#0f172a` |
-| `--primary-foreground`     | `210 40% 98%`       | 主按钮文字    | `#f8fafc` |
-| `--secondary`              | `210 40% 96.1%`     | 次级背景      | `#f1f5f9` |
-| `--secondary-foreground`   | `222.2 47.4% 11.2%` | 次级文字      | `#0f172a` |
-| `--muted`                  | `210 40% 96.1%`     | 静音/禁用背景 | `#f1f5f9` |
-| `--muted-foreground`       | `215.4 16.3% 46.9%` | 次要文字      | `#64748b` |
-| `--accent`                 | `210 40% 96.1%`     | 悬停高亮      | `#f1f5f9` |
-| `--accent-foreground`      | `222.2 47.4% 11.2%` | 悬停文字      | `#0f172a` |
-| `--destructive`            | `0 84.2% 60.2%`     | 错误/删除     | `#ef4444` |
-| `--destructive-foreground` | `210 40% 98%`       | 错误文字      | `#f8fafc` |
-| `--border`                 | `214.3 31.8% 91.4%` | 边框          | `#e2e8f0` |
-| `--input`                  | `214.3 31.8% 91.4%` | 输入框边框    | `#e2e8f0` |
-| `--ring`                   | `222.2 84% 4.9%`    | 焦点环        | `#020617` |
-| `--radius`                 | `0.5rem`            | 全局圆角      | `8px`     |
-
-#### 暗色模式 (`.dark`)
-
-暗色模式下所有变量自动反转，保持对比度关系：
-
-| 变量名                 | HSL 值              | 近似色    |
-| ---------------------- | ------------------- | --------- |
-| `--background`         | `222.2 84% 4.9%`    | `#020617` |
-| `--foreground`         | `210 40% 98%`       | `#f8fafc` |
-| `--primary`            | `210 40% 98%`       | `#f8fafc` |
-| `--primary-foreground` | `222.2 47.4% 11.2%` | `#0f172a` |
-| `--secondary`          | `217.2 32.6% 17.5%` | `#1e293b` |
-| `--muted`              | `217.2 32.6% 17.5%` | `#1e293b` |
-| `--border`             | `217.2 32.6% 17.5%` | `#1e293b` |
-
-### 2.2 使用规范
-
-```tsx
-// ✅ 正确：使用 CSS 变量
-<div className="bg-background text-foreground border-border">
-
-// ✅ 正确：使用语义化色彩名
-<Button className="bg-primary text-primary-foreground">
-<span className="text-muted-foreground">
-
-// ❌ 错误：硬编码颜色值
-<div className="bg-white text-black">
-<div className="bg-[#f1f5f9]">
-```
-
-### 2.3 语义化色彩使用场景
-
-| 色彩                       | 场景                             |
-| -------------------------- | -------------------------------- |
-| `background`               | 页面根背景                       |
-| `foreground`               | 主标题、正文                     |
-| `muted-foreground`         | 描述文字、占位符、次级标签       |
-| `border`                   | 卡片边框、分割线、输入框边框     |
-| `card` + `card-foreground` | 卡片容器及其内容                 |
-| `primary`                  | 主按钮、选中状态、关键操作       |
-| `secondary`                | 次级按钮、工具栏背景、标签页背景 |
-| `destructive`              | 错误提示、删除操作、验证失败     |
-| `accent`                   | 悬停背景、下拉选中项             |
-
----
-
-## 3. 排版规范
-
-### 3.1 字体栈
-
-项目使用系统默认字体栈（Tailwind 默认），**不引入自定义字体**。
-
-```css
-/* Tailwind 默认 sans-serif */
-font-family:
-  ui-sans-serif,
-  system-ui,
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  Arial,
-  sans-serif;
-
-/* 等宽字体用于代码/数据 */
-font-family:
-  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-```
-
-### 3.2 字号层级
-
-| 层级      | 类名                                             | 大小 | 字重    | 用途                   |
-| --------- | ------------------------------------------------ | ---- | ------- | ---------------------- |
-| 页面标题  | `text-base font-bold`                            | 16px | 700     | 页面主标题（极少使用） |
-| 卡片标题  | `text-sm font-bold tracking-tight`               | 14px | 700     | 卡片/区块标题          |
-| 正文      | `text-sm`                                        | 14px | 400     | 普通正文               |
-| 次级文字  | `text-xs`                                        | 12px | 400/500 | 描述、标签             |
-| 微标签    | `text-[10px] font-bold uppercase tracking-wider` | 10px | 700     | 区域标签、分类标题     |
-| 数据/代码 | `font-mono text-sm`                              | 14px | 400     | 时间戳、JSON、代码     |
-
-### 3.3 排版模式
-
-```tsx
-// 区域标签（Section Label）— 最常用
-<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-  输出结果
-</span>
-
-// 卡片标题
-<h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
-  标题文字
-</h4>
-
-// 描述文字
-<p className="text-[11px] font-medium text-muted-foreground/90 leading-normal">
-  描述内容
-</p>
-
-// 数据展示
-<span className="font-mono font-bold text-foreground text-sm tracking-tight tabular-nums">
-  1716950400000
-</span>
-```
-
-### 3.4 行高与字间距
-
-| 属性              | 值       | 场景               |
-| ----------------- | -------- | ------------------ |
-| `leading-none`    | 1        | 单行数据、紧凑布局 |
-| `leading-snug`    | 1.375    | 标题、短文本       |
-| `leading-relaxed` | 1.625    | 长文本、代码块     |
-| `tracking-tight`  | -0.025em | 标题、数据         |
-| `tracking-wider`  | 0.05em   | 大写标签           |
-
----
-
-## 4. 间距与布局
-
-### 4.1 容器尺寸
-
-```tsx
-// Popup 模式（默认）
-<div className="w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px]">
-
-// Tab 模式（全屏自适应）
-<div className="sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
-```
-
-### 4.2 间距节奏
-
-| Token           | 值          | 使用场景           |
-| --------------- | ----------- | ------------------ |
-| `p-3` / `p-3.5` | 12px / 14px | 页面内边距（紧凑） |
-| `p-4`           | 16px        | 标准页面内边距     |
-| `p-5`           | 20px        | 卡片内部填充       |
-| `gap-2`         | 8px         | 紧凑元素间距       |
-| `gap-3`         | 12px        | 标准元素间距       |
-| `gap-4`         | 16px        | 区块间距           |
-| `gap-6`         | 24px        | 大区块间距         |
-
-### 4.3 布局模式
-
-#### 页面布局
-
-```tsx
-// 标准页面结构
-<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">{/* 页面内容 */}</div>
-```
-
-#### 卡片布局
-
-```tsx
-// 标准卡片
-<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
-  {/* 卡片内容 */}
-</div>
-
-// 可聚焦卡片（含焦点环）
-<div className="border border-border rounded-xl bg-card ... focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
-```
-
-#### 双栏网格
-
-```tsx
-// 响应式双栏
-<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
-```
-
-#### 工具卡片网格（Dashboard）
-
-```tsx
-// Dashboard 紧凑网格
-<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
-```
-
----
-
-## 5. 圆角与阴影
-
-### 5.1 圆角体系
-
-| Token          | 值     | 使用元素               |
-| -------------- | ------ | ---------------------- |
-| `rounded-sm`   | 2px    | Checkbox、小标签       |
-| `rounded-md`   | 6px    | 按钮、输入框、Select   |
-| `rounded-lg`   | 8px    | 搜索框、小卡片         |
-| `rounded-xl`   | 12px   | 大卡片、面板、图标容器 |
-| `rounded-full` | 9999px | 标签、Avatar           |
-
-### 5.2 阴影体系
-
-| 级别 | 类名                  | 用途                   |
-| ---- | --------------------- | ---------------------- |
-| 无   | —                     | 静态元素               |
-| 低   | `shadow-sm`           | 卡片、输入框、按钮     |
-| 中   | `shadow-lg`           | 下拉菜单、浮层、Dialog |
-| 动态 | 自定义 `shadow-[...]` | 卡片悬停时的彩色阴影   |
-
-### 5.3 彩色阴影规范（工具卡片专用）
-
-```tsx
-// 工具卡片悬停阴影 — 必须使用 rgba 格式配合 CSS 变量
-className="hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
-           dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]"
-```
-
----
-
-## 6. 组件规范
-
-### 6.1 Button
-
-来源：`src/components/ui/button.tsx`
-
-#### 变体
-
-| 变体          | 类名                                         | 场景               |
-| ------------- | -------------------------------------------- | ------------------ |
-| `default`     | `bg-primary text-primary-foreground`         | 主操作             |
-| `destructive` | `bg-destructive text-destructive-foreground` | 删除、危险操作     |
-| `outline`     | `border border-input bg-background`          | 次级操作、取消     |
-| `secondary`   | `bg-secondary text-secondary-foreground`     | 次要操作           |
-| `ghost`       | 仅悬停背景                                   | 图标按钮、低优先级 |
-| `link`        | 下划线文字                                   | 跳转链接           |
-
-#### 尺寸
-
-| 尺寸      | 高度    | 内边距      | 场景     |
-| --------- | ------- | ----------- | -------- |
-| `default` | 40px    | `px-4 py-2` | 标准按钮 |
-| `sm`      | 36px    | `px-3`      | 紧凑按钮 |
-| `lg`      | 44px    | `px-8`      | 突出按钮 |
-| `icon`    | 40×40px | —           | 图标按钮 |
-
-#### 使用示例
-
-```tsx
-// 主操作
-<Button>确认</Button>
-
-// 图标按钮
-<Button variant="ghost" size="icon">
-  <Copy className="h-4 w-4" />
-</Button>
-
-// 危险操作
-<Button variant="destructive" size="sm">删除</Button>
-```
-
-### 6.2 Input
-
-来源：`src/components/ui/input.tsx`
-
-```tsx
-// 标准输入框
-<Input
-  className="font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background"
-/>
-
-// 错误状态
-<Input
-  className="border-destructive focus-visible:ring-destructive"
-/>
-```
-
-**规范要点**：
-
-- 高度统一为 `h-10`（40px）
-- 等宽字体用于数据输入
-- 占位符使用 `text-muted-foreground/60`
-- 错误时边框变红并调整焦点环
-
-### 6.3 SwitchButtonGroup
-
-来源：`src/components/ui/switch.tsx`
-
-```tsx
-// 分段控制器
-<SwitchButtonGroup
-  value={mode}
-  options={[
-    { value: 'ts2dt', label: '转日期' },
-    { value: 'dt2ts', label: '转时间戳' },
-  ]}
-  onChange={setMode}
-  size="small"
-/>
-```
-
-**规范要点**：
-
-- 容器：`rounded-lg bg-muted p-1`
-- 选中项：`bg-background text-foreground shadow-sm font-semibold`
-- 未选中项：`hover:bg-background/50 hover:text-foreground/80`
-- 尺寸：`small`（32px）用于工具页，`medium`（36px）标准
-
-### 6.4 Card（工具卡片）
-
-来源：`src/pages/Dashboard/ToolCard.tsx`
-
-```tsx
-// 标准工具卡片结构
-<div className="group relative rounded-xl border border-border/70 bg-card p-4 h-auto flex flex-col gap-3 shadow-sm">
-  {/* 上半部分：图标 + 标题 + 箭头 */}
-  <div className="flex items-center justify-between">
-    <div className="flex gap-3 items-center">
-      {/* 图标容器 */}
-      <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-[rgba(var(--tool-color),0.08)] text-[rgb(var(--tool-color))]">
-        <Icon className="h-5 w-5" />
-      </div>
-      {/* 文字 */}
-      <div>
-        <h4 className="font-bold text-sm">标题</h4>
-        <p className="text-[11px] text-muted-foreground/90">描述</p>
-      </div>
-    </div>
-    <ChevronRight className="h-4 w-4" />
-  </div>
-  {/* 下半部分：预览区（可选） */}
-  <div className="mt-1 pt-3 border-t border-dashed border-border/80">{snapshot}</div>
-</div>
-```
-
-### 6.5 TextInputArea
-
-来源：`src/components/TextInputArea.tsx`
-
-```tsx
-// 多行文本输入区
-<TextInputArea
-  value={input}
-  onChange={setInput}
-  placeholder="输入内容..."
-  showCount={true}
-  showClear={true}
-  allowCopy={true}
-  minRows={6}
-  maxRows={12}
-/>
-```
-
-**规范要点**：
-
-- 外容器：`rounded-md border border-input bg-background shadow-sm`
-- 焦点状态：`focus-within:ring-1 focus-within:ring-ring`
-- 错误状态：`border-destructive focus-within:ring-destructive`
-- 底部工具栏：`h-10 bg-muted/30 border-t border-border/50`
-- 字体：`font-mono text-sm`
-
-### 6.6 Dialog
-
-来源：`src/components/ui/dialog.tsx`
-
-```tsx
-// 对话框内容
-<DialogContent className="sm:rounded-lg">
-  <DialogHeader>
-    <DialogTitle>标题</DialogTitle>
-    <DialogDescription>描述文字</DialogDescription>
-  </DialogHeader>
-  {/* 内容 */}
-  <DialogFooter>
-    <Button variant="outline">取消</Button>
-    <Button>确认</Button>
-  </DialogFooter>
-</DialogContent>
-```
-
-### 6.7 Select
-
-来源：`src/components/ui/select.tsx`
-
-```tsx
-<Select>
-  <SelectTrigger className="h-9 shadow-sm bg-background">
-    <SelectValue />
-  </SelectTrigger>
-  <SelectContent className="max-h-64">
-    <SelectItem className="text-xs font-semibold focus:bg-accent cursor-pointer">选项</SelectItem>
-  </SelectContent>
-</Select>
-```
-
-### 6.8 Checkbox
-
-来源：`src/components/ui/checkbox.tsx`
-
-```tsx
-// 标准复选框
-<Checkbox className="h-4 w-4 rounded-sm border-primary data-[state=checked]:bg-primary" />
-
-// 小型复选框（工具栏内）
-<Checkbox className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm" />
-```
-
-### 6.9 Badge
-
-来源：`src/components/ui/badge.tsx`
-
-| 变体          | 场景               |
-| ------------- | ------------------ |
-| `default`     | 状态标签、分类     |
-| `secondary`   | 次要标签           |
-| `destructive` | 错误标签           |
-| `outline`     | 可点击标签、筛选器 |
-
-### 6.10 CopyButton
-
-来源：`src/components/CopyButton.tsx`
-
-```tsx
-// 标准复制按钮
-<CopyButton text={content} />
-
-// 小型复制按钮
-<CopyButton text={content} size="sm" className="h-7 w-7 rounded-md border" />
-```
-
-**规范要点**：
-
-- 默认 `variant="ghost" size="icon"`
-- 复制成功后变为绿色背景 + 对勾图标
-- 使用 `sonner` toast 提示复制结果
-
----
-
-## 7. 交互与动效
-
-### 7.1 过渡规范
-
-| 属性                | 值         | 场景                          |
-| ------------------- | ---------- | ----------------------------- |
-| `transition-colors` | 150ms ease | 色彩变化（悬停、焦点）        |
-| `transition-all`    | 150ms ease | 综合变化（SwitchButtonGroup） |
-| `duration-200`      | 200ms      | 复制按钮状态切换              |
-
-### 7.2 焦点状态
-
-所有可交互元素必须有可见的焦点指示器：
-
-```tsx
-// 标准焦点环
-focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-
-// 紧凑焦点环（图标按钮）
-focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
-
-// 输入框焦点
-focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-```
-
-### 7.3 悬停状态
-
-```tsx
-// 按钮悬停
-hover:bg-accent hover:text-accent-foreground
-
-// 卡片悬停
-hover:bg-muted/30 hover:border-[rgba(var(--tool-color),0.45)]
-
-// 链接/文字悬停
-hover:text-foreground hover:underline
-```
-
-### 7.4 动画规范
-
-使用 `tailwindcss-animate` 提供的动画：
-
-```tsx
-// 淡入
-animate-in fade-in duration-150
-
-// 淡入 + 缩放（SwitchButtonGroup 选中项）
-animate-in fade-in-50 zoom-in-95 duration-150
-
-// 从顶部滑入（下拉菜单）
-animate-in fade-in slide-in-from-top-2 duration-150
-
-// 错误提示出现
-animate-in fade-in slide-in-from-top-1 duration-150
-
-// 骨架屏脉冲
-animate-pulse
-```
-
-### 7.5 禁用状态
-
-```tsx
-// 统一禁用样式
-disabled:pointer-events-none disabled:opacity-50
-```
-
----
-
-## 8. 暗色模式
-
-### 8.1 实现方式
-
-通过 `darkMode: 'class'`（Tailwind 配置）+ `.dark` 类切换：
-
-```tsx
-// ThemeModeProvider 自动处理
-document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
-```
-
-### 8.2 暗色模式下的特殊处理
-
-```tsx
-// 彩色阴影增强（暗色模式下阴影需要更高透明度）
-shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
-dark:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]
-
-// 图标容器背景增强
-bg-[rgba(var(--tool-color),0.08)]
-dark:bg-[rgba(var(--tool-color),0.12)]
-
-// 成功状态文字调整
-text-emerald-600 dark:text-emerald-400
-```
-
-### 8.3 暗色模式色彩映射原则
-
-| 亮色             | 暗色             | 说明                            |
-| ---------------- | ---------------- | ------------------------------- |
-| 纯白背景         | 深蓝黑背景       | 避免纯黑 `#000`，使用 `#020617` |
-| 浅灰背景         | 深灰背景         | 保持层次关系                    |
-| 深文字           | 浅文字           | 反转对比度                      |
-| 彩色阴影低透明度 | 彩色阴影高透明度 | 暗色需要更强视觉反馈            |
-
----
-
-## 9. 工具色彩标识
-
-### 9.1 色板定义
-
-每个工具分配一个主题色，定义于 `src/config/features.tsx`：
-
-```ts
-const PALETTE_COLORS: Record<PaletteColorKey, string> = {
-  primary: '13, 148, 136', // teal (#0d9488)
-  success: '22, 163, 74', // green (#16a34a)
-  warning: '217, 119, 6', // amber (#d97706)
-  error: '220, 38, 38', // red (#dc2626)
-  secondary: '147, 51, 232', // purple (#9333e8)
-  info: '37, 99, 235', // blue (#2563eb)
-};
-```
-
-### 9.2 工具色彩分配
-
-| 工具        | 色彩键      | 色值   |
-| ----------- | ----------- | ------ |
-| 时间戳转换  | `primary`   | Teal   |
-| 存储清理    | `warning`   | Amber  |
-| 二维码工具  | `success`   | Green  |
-| 文本统计    | `secondary` | Purple |
-| JWT 解析    | `info`      | Blue   |
-| JSON 对比   | `primary`   | Teal   |
-| Base64 转换 | `info`      | Blue   |
-| 右键还原    | `success`   | Green  |
-
-### 9.3 工具色彩使用规范
-
-```tsx
-// 1. 通过 style 注入 CSS 变量
-<div style={{ ['--tool-color' as string]: rgbValues }}>
-
-// 2. 图标容器背景（低透明度）
-bg-[rgba(var(--tool-color),0.08)]
-dark:bg-[rgba(var(--tool-color),0.12)]
-
-// 3. 图标颜色
- text-[rgb(var(--tool-color))]
-
-// 4. 悬停边框
-hover:border-[rgba(var(--tool-color),0.45)]
-
-// 5. 悬停阴影
-hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
-
-// 6. 箭头悬停色
-group-hover:text-[rgb(var(--tool-color))]
-```
-
-**注意**：工具色彩仅用于**标识和装饰**，不得用于功能性色彩（如成功/错误状态）。
-
----
-
-## 10. 代码规范
-
-### 10.1 Tailwind 类名组织顺序
-
-使用 `cn()` 工具函数（`clsx` + `tailwind-merge`）组合类名，按以下顺序排列：
-
-```tsx
-className={cn(
-  // 1. 布局（display, position, flex, grid）
-  'flex items-center justify-between',
-  // 2. 尺寸（width, height, padding, margin）
-  'w-full h-10 px-4',
-  // 3. 外观（background, border, shadow, rounded）
-  'rounded-md border border-input bg-background shadow-sm',
-  // 4. 文字（color, font, text-align）
-  'text-sm font-medium text-foreground',
-  // 5. 交互（hover, focus, disabled, cursor）
-  'hover:bg-accent focus-visible:ring-2 disabled:opacity-50',
-  // 6. 动画（transition, animate）
-  'transition-colors duration-150',
-  // 7. 条件类
-  isActive && 'bg-primary text-primary-foreground',
-  // 8. 外部传入
-  className,
-)}
-```
-
-### 10.2 颜色使用检查清单
-
-- [ ] 所有颜色使用 CSS 变量（`bg-background` 而非 `bg-white`）
-- [ ] 边框使用 `border-border` 及其透明度变体
-- [ ] 文字层级使用 `foreground` → `muted-foreground` → `muted-foreground/60`
-- [ ] 错误状态使用 `destructive` 系列
-- [ ] 工具色彩仅用于装饰性元素
-
-### 10.3 组件文件组织
-
-```
-src/
-├── components/ui/          # shadcn 基础组件（只读，不修改）
-├── components/             # 业务组件
-│   ├── CopyButton.tsx
-│   ├── SwitchButtonGroup.tsx
-│   ├── TextInputArea.tsx
-│   └── ...
-├── pages/                  # 页面组件
-│   ├── <ToolName>/
-│   │   ├── index.tsx       # 页面入口
-│   │   ├── use<ToolName>.ts # 业务逻辑 Hook
-│   │   └── components/     # 页面私有组件
-│   └── ...
-└── providers/              # Context Providers
-```
-
-### 10.4 新增页面模板
-
-```tsx
-// src/pages/NewTool/index.tsx
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils';
-
-export default function Index() {
-  const { t } = useI18n('newTool');
-
-  return (
-    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
-      {/* 页面内容 */}
-      <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
-        <h4 className="font-bold text-sm tracking-tight">{t('newTool:title')}</h4>
-      </div>
-    </div>
-  );
-}
-```
-
----
-
-## 11. 反模式清单
-
-以下模式**禁止**在项目中使用：
-
-### 11.1 色彩反模式
-
-```tsx
-// ❌ 硬编码颜色
-<div className="bg-white text-black">
-<div className="bg-gray-100">
-<div className="text-gray-500">
-
-// ❌ 使用非语义化 Tailwind 颜色
-<div className="bg-slate-50">
-<div className="text-zinc-400">
-
-// ✅ 使用 CSS 变量
-<div className="bg-background text-foreground">
-<div className="bg-muted text-muted-foreground">
-```
-
-### 11.2 布局反模式
-
-```tsx
-// ❌ 固定高度导致内容截断
-<div className="h-[200px]">
-
-// ✅ 使用 min-height 或自适应
-<div className="min-h-[200px]">
-<div className="h-auto">
-
-// ❌ 使用 margin 做组件间距
-<div className="mb-4">
-
-// ✅ 使用 gap
-<div className="flex flex-col gap-4">
-```
-
-### 11.3 组件反模式
-
-```tsx
-// ❌ 修改 shadcn/ui 基础组件样式
-// 如需修改，通过 className 覆盖或创建包装组件
-
-// ❌ 内联样式用于颜色（工具色彩除外）
-<div style={{ backgroundColor: '#f1f5f9' }}>
-
-// ❌ 混合使用不同圆角体系
-<Button className="rounded-lg">  // Button 应为 rounded-md
-
-// ❌ 忽略焦点状态
-<button className="...">  // 缺少 focus-visible 样式
-```
-
-### 11.4 暗色模式反模式
-
-```tsx
-// ❌ 仅适配部分元素
-<div className="bg-white text-black dark:bg-gray-900 dark:text-white">
-
-// ✅ 使用 CSS 变量自动适配
-<div className="bg-background text-foreground">
-
-// ❌ 暗色模式下使用不合适的透明度
-<div className="bg-black/5 dark:bg-white/5">  // 对比度不足
-
-// ✅ 使用语义化变量
-<div className="bg-muted">
-```
-
----
-
-## 12. 附录
-
-### 12.1 常用类名速查
-
-```
-// 页面容器
-p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none
-
-// 标准卡片
-p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm
-
-// 工具栏
-flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60
-
-// 区域标签
-text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider
-
-// 数据展示
-font-mono font-semibold text-foreground text-sm
-
-// 错误提示
-text-xs font-medium text-destructive
-
-// 空状态
-p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center
-
-// 图标按钮容器
-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background shadow-sm
-
-// 焦点环
-focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-```
-
-### 12.2 相关文件
-
-| 文件                                  | 说明                    |
-| ------------------------------------- | ----------------------- |
-| `src/index.css`                       | CSS 变量定义、全局样式  |
-| `tailwind.config.js`                  | Tailwind 配置、色彩映射 |
-| `src/lib/utils.ts`                    | `cn()` 工具函数         |
-| `src/components/ui/*.tsx`             | shadcn/ui 基础组件      |
-| `src/config/features.tsx`             | 工具配置、色彩分配      |
-| `src/providers/ThemeModeProvider.tsx` | 主题模式管理            |
-
-### 12.3 参考资源
-
-- [shadcn/ui 文档](https://ui.shadcn.com/docs)
-- [Tailwind CSS 文档](https://tailwindcss.com/docs)
-- [Radix UI 文档](https://www.radix-ui.com/)
-- [Lucide Icons](https://lucide.dev/)
-
----
-
-_本文档随项目迭代更新。新增组件或修改视觉风格时，请同步更新此文档。_

entrypoints/background.ts

@@ -0,0 +1,189 @@
+import '../.wxt/types/imports.d.ts';
+import { browser } from 'wxt/browser';
+import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
+import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
+import { saveContextMenuData } from '@/utils/useContextMenuData';
+
+export default defineBackground(() => {
+  // 1. 扩展初次安装或更新时，注册右键上下文菜单
+  browser.runtime.onInstalled.addListener(() => {
+    createAllContextMenus();
+  });
+
+  // 2. 右键点击路由
+  browser.contextMenus.onClicked.addListener(async (info, _tab) => {
+    const result = parseContextMenuClick(info.menuItemId as string, info);
+
+    if (!result.success || !result.data) {
+      if (result.error) {
+        console.warn('[Context Menu Warning]', result.error);
+      }
+      return;
+    }
+
+    const { featureKey, payload } = result.data;
+
+    try {
+      const sidePanelState = await browser.storage.local.get('sidePanelOpen');
+      const isSidePanelOpen = sidePanelState.sidePanelOpen === true;
+
+      if (isSidePanelOpen) {
+        await sendMessage(MessageAction.CONTEXT_MENU_CLICKED, { featureKey, payload });
+        return;
+      }
+    } catch (err) {
+      console.debug('[Context Menu] Side panel pipeline is not available:', err);
+    }
+
+    await saveContextMenuData({ featureKey, payload });
+
+    try {
+      await browser.action.openPopup();
+    } catch (err) {
+      console.warn(
+        '[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，暂存数据已安全保留:',
+        err,
+      );
+    }
+  });
+
+  // 监听扩展图标点击事件，安全激活侧边栏
+  browser.action.onClicked.addListener(async (tab) => {
+    if (tab.id) {
+      try {
+        await browser.sidePanel.open({ tabId: tab.id });
+      } catch (err) {
+        console.error('Failed to open side panel via extension action clicked:', err);
+      }
+    }
+  });
+
+  // 3. 注入主环境脚本（content script 无权访问 chrome.tabs/scripting，委托 background 执行）
+  onMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT, async (message) => {
+    const sender = message.sender as chrome.runtime.MessageSender | undefined;
+    const tabId = sender?.tab?.id;
+
+    if (!tabId) {
+      console.warn('[RightClickRestorer] Injection request missing tabId');
+      return { success: false, message: 'Missing tabId' };
+    }
+
+    try {
+      await browser.scripting.executeScript({
+        target: { tabId },
+        func: () => {
+          'use strict';
+          const w = window as unknown as Record<string, unknown>;
+          if (w.__testingToolsRightClickPatched) return;
+          w.__testingToolsRightClickPatched = true;
+
+          const PROTECTED = ['contextmenu', 'copy', 'paste', 'cut', 'selectstart'];
+
+          /* 1. 屏蔽 MouseEvent.prototype.preventDefault（含 mousedown 右键） */
+          const _origPreventDefault = MouseEvent.prototype.preventDefault;
+          Object.defineProperty(MouseEvent.prototype, 'preventDefault', {
+            value: function (this: MouseEvent) {
+              const t = this.type;
+              if (PROTECTED.includes(t) || (t === 'mousedown' && this.button === 2)) {
+                return;
+              }
+              return _origPreventDefault.call(this);
+            },
+            writable: true,
+            configurable: true,
+          });
+
+          /* 2. 屏蔽 Event.prototype.stopPropagation / stopImmediatePropagation */
+          const _origStopPropagation = Event.prototype.stopPropagation;
+          Object.defineProperty(Event.prototype, 'stopPropagation', {
+            value: function (this: Event) {
+              if (PROTECTED.includes(this.type)) return;
+              return _origStopPropagation.call(this);
+            },
+            writable: true,
+            configurable: true,
+          });
+
+          const _origStopImmediatePropagation = Event.prototype.stopImmediatePropagation;
+          Object.defineProperty(Event.prototype, 'stopImmediatePropagation', {
+            value: function (this: Event) {
+              if (PROTECTED.includes(this.type)) return;
+              return _origStopImmediatePropagation.call(this);
+            },
+            writable: true,
+            configurable: true,
+          });
+
+          /* 3. 拦截 document.oncontextmenu（处理 return false 方式） */
+          let _docOnContextMenu: unknown = null;
+          Object.defineProperty(document, 'oncontextmenu', {
+            get() {
+              return _docOnContextMenu;
+            },
+            set(fn: unknown) {
+              if (typeof fn === 'function') {
+                _docOnContextMenu = function (this: GlobalEventHandlers, e: MouseEvent) {
+                  const r = (fn as (this: GlobalEventHandlers, ev: MouseEvent) => unknown).call(
+                    this,
+                    e,
+                  );
+                  return r === false ? true : r;
+                };
+              } else {
+                _docOnContextMenu = fn;
+              }
+            },
+            configurable: true,
+          });
+        },
+        world: 'MAIN',
+      });
+
+      return { success: true };
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error('[RightClickRestorer] executeScript failed:', errorMsg);
+      return { success: false, message: errorMsg };
+    }
+  });
+
+  // 4. 异步刷新请求监听（统一使用 alarms API，避免 MV3 Service Worker 被销毁导致任务丢失）
+  onMessage(MessageAction.RELOAD_TAB, async (message) => {
+    const { tabId, delay = 0 } = message.data;
+
+    const executeReload = () => {
+      browser.tabs.reload(tabId).catch((err) => {
+        console.error('Failed to execute tab reload operation:', err);
+      });
+    };
+
+    if (delay <= 0) {
+      executeReload();
+      return { success: true };
+    }
+
+    const alarmName = `reload-tab-${tabId}-${Date.now()}`;
+
+    // 创建一次性 Alarm，由浏览器内核保障触发（不受 Service Worker 生命周期影响）
+    await browser.alarms.create(alarmName, { when: Date.now() + delay });
+
+    // 兜底清理：若 alarm 因异常未触发，delay 后 5 秒强制移除监听器并清理 alarm
+    const cleanupTimeout = setTimeout(() => {
+      browser.alarms.onAlarm.removeListener(alarmListener);
+      browser.alarms.clear(alarmName).catch(() => {});
+    }, delay + 5000);
+
+    const alarmListener = (alarm: { name: string }) => {
+      if (alarm.name !== alarmName) return;
+
+      clearTimeout(cleanupTimeout);
+      executeReload();
+      browser.alarms.onAlarm.removeListener(alarmListener);
+      browser.alarms.clear(alarmName).catch(() => {});
+    };
+
+    browser.alarms.onAlarm.addListener(alarmListener);
+
+    return { success: true };
+  });
+});

entrypoints/content.ts

@@ -0,0 +1,10 @@
+import '../.wxt/types/imports.d.ts';
+import { initMessageHandler } from './content/messageHandler';
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  runAt: 'document_end',
+  main() {
+    initMessageHandler();
+  },
+});

entrypoints/content/contextMenuHandler.ts

@@ -1,11 +1,17 @@
 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 getI18nText(key: string, fallback: string): string {
+  if (typeof chrome !== 'undefined' && chrome.i18n) {
+    return chrome.i18n.getMessage(key) || fallback;
+  }
+  return fallback;
+}
+
 function convertTimestamp(input: string): string {
-  const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
+  const invalidText = getI18nText('invalidTimestamp', 'Invalid Timestamp');
   const num = Number(input.trim());
 
   if (isNaN(num)) {

entrypoints/content/messageHandler.ts

@@ -0,0 +1,5 @@
+import { initContextMenuHandler } from './contextMenuHandler';
+
+export function initMessageHandler(): void {
+  initContextMenuHandler();
+}

entrypoints/content/uiPopover.ts

@@ -22,7 +22,7 @@ function injectStyles(): void {
       font-size: 13px;
       line-height: 1.5;
       opacity: 0;
-      visibility: hidden;
+      visibility: hidden; /* 💡 1. 规整隐藏状态：允许排版引擎计算尺寸，同时阻断视觉呈现 */
       transform: translateY(-8px);
       transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
       pointer-events: none;
@@ -125,6 +125,7 @@ function getOrCreatePopover(): HTMLElement {
   return popover;
 }
 
+// 💡 2. 安全防线：字符实体转义沙箱，彻底掐灭任意恶意脚本的执行通道
 function escapeHtml(text: string): string {
   const map: Record<string, string> = {
     '&': '&amp;',
@@ -170,6 +171,7 @@ export function showPopover(
 ): void {
   const popover = getOrCreatePopover();
 
+  // 💡 3. 坚固的无障碍绑定：废除违规的行内 inline onclick，改用标准原生节点监听
   popover.innerHTML = '';
 
   if (title) {

entrypoints/options/App.tsx

@@ -0,0 +1,383 @@
+import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
+import { GripVertical, RefreshCw } from 'lucide-react';
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { PageType, StorageSchema } from '@/types/storage';
+import { storageUtil } from '@/utils/chromeStorage';
+import type { PaletteColorKey } from '@/config/features';
+import {
+  getAllFeatureKeys,
+  getDefaultPageOrder,
+  getDefaultVisibleFeatureKeys,
+  getFeatureByKey,
+} from '@/config/features';
+import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
+import PageErrorBoundary from '@/components/PageErrorBoundary';
+import { useTranslation } from 'react-i18next';
+
+const PALETTE_COLORS: Record<PaletteColorKey, string> = {
+  primary: '#1976d2',
+  success: '#2e7d32',
+  warning: '#e65100',
+  error: '#c62828',
+  secondary: '#9c27b0',
+  info: '#0288d1',
+};
+
+const getColorCode = (key: PaletteColorKey): string => PALETTE_COLORS[key];
+
+const isValidPage = (page: unknown): page is PageType => {
+  return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
+};
+
+const isValidPageList = (pages: unknown): pages is PageType[] => {
+  return Array.isArray(pages) && pages.every(isValidPage);
+};
+
+type WindowType = 'popup' | 'sidepanel' | 'tab';
+
+interface SortableFeatureRowProps {
+  pageKey: PageType;
+  isLast: boolean;
+  isChecked: boolean;
+  isDisabled: boolean;
+  onToggle: (key: PageType) => void;
+}
+
+function SortableFeatureRow({
+  pageKey,
+  isLast,
+  isChecked,
+  isDisabled,
+  onToggle,
+}: SortableFeatureRowProps) {
+  const { t } = useTranslation(['features']);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: pageKey,
+  });
+
+  const feature = getFeatureByKey(pageKey);
+  if (!feature) return null;
+
+  const colorKey = feature.themeColorKey ?? 'primary';
+  const colorCode = getColorCode(colorKey);
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 1 : 'auto',
+    position: 'relative' as const,
+    backgroundColor: isDragging ? `${colorCode}0a` : 'transparent',
+    boxShadow: isDragging ? '0 8px 20px rgba(0,0,0,0.08)' : 'none',
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-center justify-between p-4 sm:p-5 transition-all duration-200 hover:bg-muted ${
+        isLast ? '' : 'border-b border-border'
+      }`}
+    >
+      <div className="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
+        {/* 拖拽手柄 */}
+        <div
+          className="drag-handle text-muted-foreground cursor-grab touch-none transition-colors duration-200 hover:text-foreground active:cursor-grabbing"
+          {...attributes}
+          {...listeners}
+          aria-label={`拖拽以调整 ${t(feature.labelKey)} 的位置`}
+        >
+          <GripVertical size={16} />
+        </div>
+
+        {/* 功能图标 */}
+        <div
+          className="flex items-center justify-center w-9 h-9 rounded-xl flex-shrink-0"
+          style={{
+            backgroundColor: `${colorCode}1a`,
+            color: colorCode,
+          }}
+        >
+          {feature.icon && <feature.icon size={20} />}
+        </div>
+
+        {/* 文本信息 */}
+        <div className="min-w-0 flex-1">
+          <div className="font-bold text-[0.95rem] leading-tight text-foreground">
+            {t(feature.labelKey)}
+          </div>
+          {feature.descriptionKey && (
+            <div
+              className="text-xs text-muted-foreground font-medium mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
+              title={t(feature.descriptionKey)}
+            >
+              {t(feature.descriptionKey)}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 开关 */}
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isChecked}
+        disabled={isDisabled}
+        onClick={() => onToggle(pageKey)}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
+          isChecked ? 'bg-primary' : 'bg-muted'
+        } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200 ${
+            isChecked ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+    </div>
+  );
+}
+
+export default function App() {
+  const { t } = useTranslation(['features', 'common']);
+
+  const initialWindowType = useMemo(() => {
+    if (typeof window === 'undefined') return 'popup';
+    const params = new URLSearchParams(window.location.search);
+    const tab = params.get('tab');
+    if (tab === 'popup' || tab === 'sidepanel' || tab === 'tab') {
+      return tab as WindowType;
+    }
+    return 'popup';
+  }, []);
+
+  const [windowType, setWindowType] = useState<WindowType>(initialWindowType);
+  const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
+  const [pageOrder, setPageOrder] = useState<PageType[]>([]);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const { snackbarProps, showMessage } = useSnackbarState();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const configKeys = useMemo(() => {
+    switch (windowType) {
+      case 'sidepanel':
+        return {
+          visible: 'app/sidepanelVisiblePages' as keyof StorageSchema,
+          order: 'app/sidepanelPageOrder' as keyof StorageSchema,
+        };
+      case 'tab':
+        return {
+          visible: 'app/tabVisiblePages' as keyof StorageSchema,
+          order: 'app/tabPageOrder' as keyof StorageSchema,
+        };
+      case 'popup':
+      default:
+        return {
+          visible: 'app/popupVisiblePages' as keyof StorageSchema,
+          order: 'app/popupPageOrder' as keyof StorageSchema,
+        };
+    }
+  }, [windowType]);
+
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('tab', windowType);
+    window.history.replaceState({}, '', url.toString());
+  }, [windowType]);
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      setIsLoaded(false);
+      try {
+        const [savedVisible, savedOrder] = await Promise.all([
+          storageUtil.get(configKeys.visible, getDefaultVisibleFeatureKeys()),
+          storageUtil.get(configKeys.order, getDefaultPageOrder()),
+        ]);
+        setVisiblePages(
+          isValidPageList(savedVisible) ? savedVisible : getDefaultVisibleFeatureKeys(),
+        );
+        setPageOrder(isValidPageList(savedOrder) ? savedOrder : getDefaultPageOrder());
+      } catch (error) {
+        console.error('Failed to load config:', error);
+        setVisiblePages(getDefaultVisibleFeatureKeys());
+        setPageOrder(getDefaultPageOrder());
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+
+    loadConfig().catch(console.error);
+  }, [configKeys]);
+
+  const showToast = (message: string, severity: 'success' | 'info' | 'warning') => {
+    showMessage(message, { severity });
+  };
+
+  const handlePageToggle = async (page: PageType) => {
+    const isCurrentlyVisible = visiblePages.includes(page);
+    let newPages: PageType[];
+
+    if (isCurrentlyVisible) {
+      if (visiblePages.length <= 1) {
+        showToast('至少需要保留一个可见页面', 'warning');
+        return;
+      }
+      newPages = visiblePages.filter((p) => p !== page);
+    } else {
+      newPages = [...visiblePages, page];
+    }
+
+    try {
+      await storageUtil.set(configKeys.visible, newPages);
+      setVisiblePages(newPages);
+      const feature = getFeatureByKey(page);
+      const label = feature ? t(feature.labelKey) : page;
+      showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${label}`, 'success');
+    } catch (error) {
+      console.error('Failed to save config:', error);
+      showToast('保存失败', 'warning');
+    }
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = pageOrder.indexOf(active.id as PageType);
+    const newIndex = pageOrder.indexOf(over.id as PageType);
+    if (oldIndex < 0 || newIndex < 0) return;
+
+    const newOrder = arrayMove(pageOrder, oldIndex, newIndex);
+    setPageOrder(newOrder);
+
+    try {
+      await storageUtil.set(configKeys.order, newOrder);
+    } catch (error) {
+      console.error('Failed to save order:', error);
+      showToast('排序保存失败', 'warning');
+    }
+  };
+
+  const handleRestoreDefaults = async () => {
+    try {
+      const defaults = getDefaultVisibleFeatureKeys();
+      const defaultOrder = getDefaultPageOrder();
+
+      await Promise.all([
+        storageUtil.set(configKeys.visible, defaults),
+        storageUtil.set(configKeys.order, defaultOrder),
+      ]);
+
+      setVisiblePages(defaults);
+      setPageOrder(defaultOrder);
+      showToast('已恢复当前模式默认设置', 'success');
+    } catch (error) {
+      console.error('Failed to restore defaults:', error);
+      showToast('恢复失败', 'warning');
+    }
+  };
+
+  const handleWindowTypeChange = (_event: SyntheticEvent, newType: WindowType) => {
+    if (newType !== null) {
+      setWindowType(newType);
+    }
+  };
+
+  if (!isLoaded) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app min-h-screen bg-background flex flex-col">
+      <PageErrorBoundary>
+        {/* 顶部标题与导航栏 */}
+        <div className="w-full bg-background border-b border-border pt-8 sm:pt-12 pb-0 px-4 sm:px-8">
+          <div className="max-w-3xl mx-auto">
+            {/* Tab 与恢复按钮同行 */}
+            <div className="flex items-end justify-between border-b-0">
+              <div className="flex-1 flex">
+                {(['popup', 'sidepanel', 'tab'] as WindowType[]).map((type) => (
+                  <button
+                    key={type}
+                    onClick={(e) => handleWindowTypeChange(e, type)}
+                    className={`px-4 sm:px-6 py-2 text-[0.9rem] font-bold transition-colors duration-200 ${
+                      windowType === type
+                        ? 'text-primary border-b-2 border-primary'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`}
+                  >
+                    {type === 'popup' ? 'Popup 窗口' : type === 'sidepanel' ? '侧边栏' : '标签页'}
+                  </button>
+                ))}
+              </div>
+              <button
+                onClick={handleRestoreDefaults}
+                className="mb-1 ml-2 p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors duration-200"
+                title="恢复当前模式默认"
+              >
+                <RefreshCw size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 主内容区域 */}
+        <div className="flex-1 p-4 sm:p-8">
+          <div className="max-w-3xl mx-auto">
+            <div className="rounded-2xl border border-border overflow-hidden bg-card shadow-sm">
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext items={pageOrder} strategy={verticalListSortingStrategy}>
+                  <div className="flex flex-col">
+                    {pageOrder.map((key, index, array) => {
+                      const isChecked = visiblePages.includes(key);
+                      const isDisabled = isChecked && visiblePages.length === 1;
+                      return (
+                        <SortableFeatureRow
+                          key={key}
+                          pageKey={key}
+                          isLast={index === array.length - 1}
+                          isChecked={isChecked}
+                          isDisabled={isDisabled}
+                          onToggle={handlePageToggle}
+                        />
+                      );
+                    })}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            </div>
+          </div>
+        </div>
+      </PageErrorBoundary>
+
+      <GlobalSnackbar {...snackbarProps} />
+    </div>
+  );
+}

entrypoints/options/__tests__/App.test.tsx

@@ -0,0 +1,131 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import App from '../App';
+import { storageUtil } from '@/utils/chromeStorage';
+import {
+  getDefaultVisibleFeatureKeys,
+  getDefaultPageOrder,
+  getFeatureByKey,
+} from '@/config/features';
+
+// Mock storageUtil
+vi.mock('@/utils/chromeStorage', () => ({
+  storageUtil: {
+    get: vi.fn(),
+    set: vi.fn(() => Promise.resolve()),
+  },
+}));
+
+// Mock i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe('Options App', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+  });
+
+  it('合法数据应正常加载并显示正确的功能列表', async () => {
+    const defaultOrder = getDefaultPageOrder();
+
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
+      Promise.resolve(defaultValue),
+    );
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
+    // 验证默认可见的功能都被渲染出来了
+    for (const key of defaultOrder) {
+      const feature = getFeatureByKey(key);
+      if (feature) {
+        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+      }
+    }
+  });
+
+  it('非法 visiblePages 数据应回退到默认值', async () => {
+    const defaultVisible = getDefaultVisibleFeatureKeys();
+
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
+      if (key.includes('VisiblePages')) {
+        return Promise.resolve(['invalidPage', 'anotherInvalid']);
+      }
+      return Promise.resolve(defaultValue);
+    });
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
+    // 验证默认值的功能仍然被渲染（非法数据被回退）
+    for (const key of defaultVisible) {
+      const feature = getFeatureByKey(key);
+      if (feature && key !== 'dashboard') {
+        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+      }
+    }
+  });
+
+  it('非法 pageOrder 数据应回退到默认值', async () => {
+    const defaultOrder = getDefaultPageOrder();
+
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
+      if (key.includes('PageOrder')) {
+        return Promise.resolve(['notARealPage', 123, null]);
+      }
+      return Promise.resolve(defaultValue);
+    });
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
+    // 验证默认顺序的功能都被渲染
+    for (const key of defaultOrder) {
+      const feature = getFeatureByKey(key);
+      if (feature) {
+        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+      }
+    }
+  });
+
+  it('非数组数据应回退到默认值', async () => {
+    const defaultOrder = getDefaultPageOrder();
+
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
+      if (key.includes('VisiblePages')) {
+        return Promise.resolve('not-an-array');
+      }
+      if (key.includes('PageOrder')) {
+        return Promise.resolve({ foo: 'bar' });
+      }
+      return Promise.resolve(defaultValue);
+    });
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
+    // 验证默认功能都被渲染
+    for (const key of defaultOrder) {
+      const feature = getFeatureByKey(key);
+      if (feature) {
+        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+      }
+    }
+  });
+});

entrypoints/options/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>扩展设置 - Testing Tools</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

entrypoints/options/main.tsx

@@ -0,0 +1,11 @@
+import ReactDOM from 'react-dom/client';
+import AppRoot from '@/providers/AppRoot';
+import '@/i18n';
+import '@/src/index.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <AppRoot>
+    <App />
+  </AppRoot>,
+);

entrypoints/popup/App.tsx

@@ -0,0 +1,47 @@
+import RouterProvider from '@/providers/RouterProvider';
+import TopBar from '@/components/TopBar';
+import RouterContainer from '@/components/RouterContainer';
+import ErrorBoundary from '@/components/ErrorBoundary';
+import { SnackbarProvider } from '@/components/GlobalSnackbar';
+import { getEntryPointType } from '@/config/features';
+import { useMemo } from 'react';
+
+export default function App() {
+  const handleOpenOptions = () => {
+    chrome.runtime.openOptionsPage().catch(console.error);
+  };
+
+  const entryType = useMemo(() => getEntryPointType(), []);
+
+  const routerConfig = useMemo(() => {
+    if (entryType === 'tab') {
+      return {
+        syncKey: 'app/tabRoute' as const,
+        visiblePagesKey: 'app/tabVisiblePages' as const,
+        pageOrderKey: 'app/tabPageOrder' as const,
+      };
+    }
+    return {
+      syncKey: 'app/popupRoute' as const,
+      visiblePagesKey: 'app/popupVisiblePages' as const,
+      pageOrderKey: 'app/popupPageOrder' as const,
+    };
+  }, [entryType]);
+
+  return (
+    <RouterProvider
+      syncKey={routerConfig.syncKey}
+      visiblePagesKey={routerConfig.visiblePagesKey}
+      pageOrderKey={routerConfig.pageOrderKey}
+    >
+      <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
+        <div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
+          <TopBar onOpenOptions={handleOpenOptions} />
+          <ErrorBoundary>
+            <RouterContainer />
+          </ErrorBoundary>
+        </div>
+      </SnackbarProvider>
+    </RouterProvider>
+  );
+}

entrypoints/popup/main.tsx

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
+import '@/i18n';
+import '@/src/index.css';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

entrypoints/rightClickRestorer.content.ts

@@ -0,0 +1,194 @@
+import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
+
+const BADGE_ID = 'testing-tools-right-click-restorer-badge';
+const BADGE_STYLE_ID = 'testing-tools-right-click-restorer-badge-style';
+
+let isRestored = false;
+
+function updateBadge(): void {
+  const badge = document.getElementById(BADGE_ID);
+  if (badge) {
+    badge.style.opacity = isRestored ? '1' : '0';
+  }
+}
+
+function createBadge(): void {
+  if (document.getElementById(BADGE_ID)) return;
+
+  if (!document.getElementById(BADGE_STYLE_ID)) {
+    const style = document.createElement('style');
+    style.id = BADGE_STYLE_ID;
+    style.textContent = `
+      #${BADGE_ID} {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 2147483646;
+        padding: 6px 12px;
+        background: #2e7d32;
+        color: #ffffff;
+        border-radius: 20px;
+        font-size: 12px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        opacity: 0;
+        transition: opacity 0.2s ease-out;
+        pointer-events: none;
+        user-select: none;
+      }
+      @media (prefers-color-scheme: dark) {
+        #${BADGE_ID} {
+          background: #4caf50;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.4);
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  const badge = document.createElement('div');
+  badge.id = BADGE_ID;
+  badge.textContent = '\u53f3\u952e\u5df2\u89e3\u9501';
+  document.body.appendChild(badge);
+}
+
+/* ======================== Main World 注入 ======================== */
+
+async function injectMainWorldScript(): Promise<void> {
+  try {
+    const response = await sendMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT);
+    if (!response.success) {
+      console.error('[RightClickRestorer] Background injection failed:', response.message);
+    }
+  } catch (err) {
+    console.error('[RightClickRestorer] Failed to request main world injection:', err);
+  }
+}
+
+/* ======================== Isolated World 事件拦截 ======================== */
+
+function installEventIntercepts(): void {
+  window.addEventListener(
+    'contextmenu',
+    (e) => {
+      if (!isRestored) return;
+      e.stopPropagation();
+    },
+    true,
+  );
+
+  // 部分网站在 mousedown 阶段阻止 contextmenu
+  window.addEventListener(
+    'mousedown',
+    (e) => {
+      if (!isRestored) return;
+      if (e.button === 2 || (e.buttons & 2) !== 0) {
+        e.stopPropagation();
+      }
+    },
+    true,
+  );
+}
+
+/* ======================== 遮罩层穿透 ======================== */
+
+const MEDIA_TAGS = new Set(['IMG', 'VIDEO', 'CANVAS', 'SVG']);
+
+function initMousePenetration(): void {
+  window.addEventListener(
+    'mousedown',
+    (e) => {
+      if (!isRestored || e.button !== 2) return;
+
+      const elements = document.elementsFromPoint(e.clientX, e.clientY);
+      if (!elements.length) return;
+
+      let targetMedia: HTMLElement | null = null;
+      for (const el of elements) {
+        if (MEDIA_TAGS.has(el.tagName)) {
+          targetMedia = el as HTMLElement;
+          break;
+        }
+      }
+
+      if (!targetMedia) return;
+
+      const modified: Array<{ el: HTMLElement; original: string | null }> = [];
+      let foundMedia = false;
+
+      for (const el of elements) {
+        const htmlEl = el as HTMLElement;
+
+        if (el === targetMedia) {
+          foundMedia = true;
+          const original = htmlEl.style.pointerEvents || null;
+          htmlEl.style.setProperty('pointer-events', 'all', 'important');
+          modified.push({ el: htmlEl, original });
+          continue;
+        }
+
+        if (!foundMedia) {
+          const original = htmlEl.style.pointerEvents || null;
+          htmlEl.style.setProperty('pointer-events', 'none', 'important');
+          modified.push({ el: htmlEl, original });
+        }
+      }
+
+      setTimeout(() => {
+        for (const { el, original } of modified) {
+          if (original === null || original === '') {
+            el.style.removeProperty('pointer-events');
+          } else {
+            el.style.pointerEvents = original;
+          }
+        }
+      }, 300);
+    },
+    true,
+  );
+}
+
+/* ======================== 激活保护 ======================== */
+
+async function activateProtection(): Promise<void> {
+  if (isRestored) return;
+
+  await injectMainWorldScript();
+
+  // 再次检查，防止并发调用导致重复注册
+  if (isRestored) return;
+
+  installEventIntercepts();
+  initMousePenetration();
+
+  isRestored = true;
+  updateBadge();
+}
+
+/* ======================== 消息通信 ======================== */
+
+function initMessaging(): void {
+  onMessage(MessageAction.RESTORE_RIGHT_CLICK, async () => {
+    await activateProtection();
+    return { success: true, restored: isRestored };
+  });
+
+  onMessage(MessageAction.QUERY_RIGHT_CLICK_STATUS, () => {
+    return { success: true, restored: isRestored };
+  });
+}
+
+/* ======================== 入口 ======================== */
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  runAt: 'document_start',
+  main() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', createBadge, { once: true });
+    } else {
+      createBadge();
+    }
+    initMessaging();
+  },
+});

entrypoints/sidepanel/App.tsx

@@ -3,9 +3,16 @@ import RouterProvider from '@/providers/RouterProvider';
 import TopBar from '@/components/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
+import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import { MessageAction, sendMessage } from '@/utils/messages';
 
 export default function App() {
+  const handleOpenOptions = () => {
+    chrome.runtime.openOptionsPage().catch((err) => {
+      console.error('Failed to open options page:', err);
+    });
+  };
+
   useEffect(() => {
     sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
     return () => {
@@ -15,12 +22,14 @@ export default function App() {
 
   return (
     <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
-      <div className="app flex flex-col h-screen w-full overflow-hidden">
+      <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
-        <TopBar />
+        <div className="app flex flex-col h-screen w-full overflow-hidden">
-        <ErrorBoundary>
+          <TopBar onOpenOptions={handleOpenOptions} />
-          <RouterContainer />
+          <ErrorBoundary>
-        </ErrorBoundary>
+            <RouterContainer />
-      </div>
+          </ErrorBoundary>
+        </div>
+      </SnackbarProvider>
     </RouterProvider>
   );
 }

entrypoints/sidepanel/main.tsx

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
+import '@/i18n';
+import '@/src/index.css';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

eslint.config.ts

@@ -5,13 +5,16 @@ import reactPlugin from 'eslint-plugin-react';
 import globals from 'globals';
 
 export default tseslint.config(
+  // 1. 全局物理隔离：彻底掐灭对构建产物与配置本身的干扰
   {
     ignores: ['dist', '.output', '.wxt', 'node_modules', 'eslint.config.ts', 'eslint.config.js'],
   },
 
+  // 2. 注入 JavaScript 与 TypeScript 的官方大师级推荐规则集
   js.configs.recommended,
   ...tseslint.configs.recommended,
 
+  // 3. 针对测试文件专属沙箱：解耦强类型死锁，放行 any，容忍未消费变量
   {
     files: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}', 'setupTests.ts'],
     rules: {
@@ -23,8 +26,16 @@ export default tseslint.config(
     },
   },
 
+  // 4. 核心业务全受控大管线（Hooks, Entrypoints, Components 统一护航）
   {
-    files: ['src/**/*.{ts,tsx}'],
+    files: [
+      'hooks/**/*.{ts,tsx}',
+      'entrypoints/**/*.{ts,tsx}',
+      'pages/**/*.{ts,tsx}',
+      'utils/**/*.{ts,tsx}',
+      'components/**/*.{ts,tsx}',
+      'services/**/*.{ts,tsx}',
+    ],
     ignores: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
 
     languageOptions: {
@@ -33,13 +44,17 @@ export default tseslint.config(
         ...globals.browser,
         ...globals.node,
       },
-
+      // 💡 修复点 1（史诗级治愈）：废除脆弱的 project 硬编码路径！
+      // 拥抱 typescript-eslint 官方推荐的 projectService 常驻动态类型调度中枢。
+      // 它会在内存中全自动、流式为所有新建、悬空或暂存文件分配编译上下文，
+      // 彻底终结 "file is not included in any tsconfig" 的全量崩溃黑洞！
       parserOptions: {
         projectService: true,
         tsconfigRootDir: import.meta.dirname,
       },
     },
 
+    // 挂载插件沙箱
     plugins: {
       react: reactPlugin,
       'react-hooks': reactHooks,
@@ -51,19 +66,24 @@ export default tseslint.config(
       },
     },
 
+    // 💡 修复点 2：高精对齐 React 19 / JSX Runtime 的全量生产质检规则大闸
     rules: {
+      // 激活 react-hooks 官方推荐规则
       ...reactHooks.configs.recommended.rules,
+      // 激活 react 官方精选规则（排除旧版 React 必须手动 import 的历史包袱）
       ...reactPlugin.configs.recommended.rules,
       ...reactPlugin.configs['jsx-runtime'].rules,
 
       'react/prop-types': 'off',
 
+      // 清洗原生未消费变量冲突，统一交由 TS 高阶哨兵接管
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': [
         'warn',
         { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
       ],
 
+      // 彻底关闭老旧的 JSX 作用域检查，全面契合 React 19 核心美学
       'react/react-in-jsx-scope': 'off',
     },
   },

i18n/index.ts

@@ -0,0 +1,144 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import type { CustomDetector } from 'i18next-browser-languagedetector'; // 💡 1. 引入官方强类型探测器接口
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { storageUtil } from '@/utils/chromeStorage';
+import dayjs from 'dayjs';
+
+// 导入 Day.js 本地化语言包
+import 'dayjs/locale/zh-cn';
+
+// 同步加载全局核心命名空间
+import commonZh from './locales/zh/common.json';
+import featuresZh from './locales/zh/features.json';
+import commonEn from './locales/en/common.json';
+import featuresEn from './locales/en/features.json';
+
+const resources = {
+  zh: {
+    common: commonZh,
+    features: featuresZh,
+  },
+  en: {
+    common: commonEn,
+    features: featuresEn,
+  },
+};
+
+export const SUPPORTED_LANGUAGES = ['zh', 'en'] as const;
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+
+const LANGUAGE_STORAGE_KEY = 'app/language';
+const LANGUAGE_SNAPSHOT_KEY = 'snapshot/app/language';
+
+/**
+ * 将任意语言标识归一化为受支持的核心代码
+ */
+export const normalizeLanguage = (lng: string): SupportedLanguage => {
+  if (!lng) return 'en';
+  return lng.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+};
+
+/**
+ * 严格校验语言安全边界
+ */
+const isValidLanguage = (lng: unknown): lng is SupportedLanguage => {
+  return typeof lng === 'string' && (SUPPORTED_LANGUAGES as readonly string[]).includes(lng);
+};
+
+/**
+ * 同步从 localStorage 获取语言快照（消除异步闪烁）
+ */
+const getSyncLanguageSnapshot = (): SupportedLanguage | null => {
+  try {
+    const val = localStorage.getItem(LANGUAGE_SNAPSHOT_KEY);
+    if (!val) return null;
+    const parsed = JSON.parse(val) as unknown;
+    return isValidLanguage(parsed) ? parsed : null;
+  } catch (error) {
+    console.error('[i18n] Failed to parse sync language snapshot from localStorage:', error);
+    return null;
+  }
+};
+
+// 💡 2. 强类型接口重塑：显式绑定 CustomDetector 类型，
+// 告诉 TS 编译器这些方法将被全局 Languagedetector 框架隐式调用，彻底治愈“未使用函数”报错！
+const chromeStorageDetector: CustomDetector = {
+  name: 'chromeStorage',
+  lookup() {
+    return undefined;
+  },
+  cacheUserLanguage(lng: string) {
+    const target = normalizeLanguage(lng);
+    // 💡 修复点：对异步写盘操作追加 void 算子或 catch，吞掉 Promise 被忽略警告
+    storageUtil.set(LANGUAGE_STORAGE_KEY, target).catch((err) => {
+      console.error('[i18n Detector Error] Failed to write back language state:', err);
+    });
+  },
+};
+
+const detector = new LanguageDetector();
+detector.addDetector(chromeStorageDetector);
+
+const syncLng = getSyncLanguageSnapshot();
+
+// 💡 3. 修复点：对 i18n.init() 返回的异步 Promise 前方追加 void 斩断依赖链，放行编译
+void i18n
+  .use(detector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    lng: syncLng || undefined,
+    ns: ['common', 'features'],
+    defaultNS: 'common',
+    debug: false,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['chromeStorage', 'navigator'],
+      caches: ['chromeStorage'],
+    },
+  });
+
+// 监听语言变更
+i18n.on('languageChanged', (lng) => {
+  const normalizedLng = normalizeLanguage(lng);
+  dayjs.locale(normalizedLng === 'zh' ? 'zh-cn' : 'en');
+  localStorage.setItem(LANGUAGE_SNAPSHOT_KEY, JSON.stringify(normalizedLng));
+});
+
+// 初始化时从长期异步存储中恢复校准
+storageUtil
+  .get(LANGUAGE_STORAGE_KEY)
+  .then((lng) => {
+    const rawTargetLng = lng || syncLng;
+
+    if (!rawTargetLng) {
+      const initialLng = normalizeLanguage(i18n.language);
+
+      // 💡 修复点：对初始化同步写盘追加安全的 Promise .catch() 异常隔离防护罩
+      storageUtil.set(LANGUAGE_STORAGE_KEY, initialLng).catch((err) => {
+        console.error('[i18n Init Error] Persistent sync collapsed:', err);
+      });
+
+      if (initialLng !== normalizeLanguage(i18n.language)) {
+        // 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
+        void i18n.changeLanguage(initialLng);
+      }
+      return;
+    }
+
+    const targetLng = normalizeLanguage(String(rawTargetLng));
+
+    if (isValidLanguage(targetLng) && targetLng !== normalizeLanguage(i18n.language)) {
+      // 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
+      void i18n.changeLanguage(targetLng);
+    }
+  })
+  .catch((err) => {
+    console.error('[i18n Context Error] Async local storage lookup collapsed:', err);
+  });
+
+export default i18n;

i18n/locales/en/base64Converter.json

@@ -0,0 +1,37 @@
+{
+  "pageTitle": "Base64 Converter",
+  "pageSubtitle": "Encode and decode text, files, and images with Base64",
+  "textMode": "Text",
+  "fileMode": "File",
+  "imageMode": "Image",
+  "encode": "Encode",
+  "decode": "Decode",
+  "clear": "Clear",
+  "textInputPlaceholder": "Enter text to encode to Base64...",
+  "base64InputPlaceholder": "Enter Base64 string to decode...",
+  "base64Output": "Base64 Output",
+  "textOutput": "Decoded Text Output",
+  "copyRaw": "Copy Raw Base64",
+  "copyDataUri": "Copy Data URI",
+  "clickOrDropToFile": "Click or drop a file here",
+  "clickOrDropToImage": "Click or drop an image here",
+  "clickOrDropToReplace": "Click or drop to replace the file",
+  "maxFileSize": "Maximum file size: {{max}}",
+  "supportedFormats": "Supports PNG, JPG, WEBP, GIF, BMP, SVG, etc.",
+  "fileSizeExceeded": "File size exceeds the limit (max {{max}})",
+  "unsupportedImageType": "Unsupported image format",
+  "conversionFailed": "Conversion failed",
+  "originalSize": "Original Size",
+  "encodedSize": "Encoded Size",
+  "invalidBase64": "Invalid Base64 string",
+  "binaryDataDetected": "Input appears to be binary data (e.g. an image). Please switch to the Image tab.",
+  "imageDataUriHint": "Detected an image data URI — please use the Image tab to decode it.",
+  "switchToImageMode": "Switch to Image mode",
+  "download": "Download",
+  "decodedFileName": "Decoded file name",
+  "decodeBase64Placeholder": "Enter Base64 or data URI to decode...",
+  "decodedFileOutput": "Decoded File",
+  "decodedImageOutput": "Decoded Image",
+  "inferredMimeType": "Inferred MIME type",
+  "decodedSize": "Decoded size"
+}

i18n/locales/en/common.json

@@ -0,0 +1,35 @@
+{
+  "appName": "Testing Tools",
+  "buttons": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "copy": "Copy",
+    "clear": "Clear",
+    "refresh": "Refresh",
+    "toggleLanguage": "Switch Language",
+    "toggleTheme": "Toggle theme",
+    "themeMode": {
+      "light": "Switch to dark mode",
+      "dark": "Switch to system mode",
+      "system": "Switch to light mode"
+    },
+    "search": "Search tools...",
+    "back": "Back",
+    "clearSearch": "Clear search",
+    "recentSearch": "Recent search",
+    "noResults": "No tools found",
+    "openInTab": "Open in tab",
+    "settings": "Settings"
+  },
+  "messages": {
+    "copySuccess": "Copied to clipboard",
+    "copyError": "Copy failed"
+  },
+  "textInputArea": {
+    "clear": "Clear",
+    "copyContent": "Copy content",
+    "cleared": "Cleared",
+    "placeholder": "placeholder text"
+  }
+}

i18n/locales/en/features.json

@@ -0,0 +1,45 @@
+{
+  "dashboard": {
+    "title": "Dashboard"
+  },
+  "timestamp": {
+    "title": "Timestamp",
+    "description": "Unix millisecond conversion and formatting"
+  },
+  "storageCleaner": {
+    "title": "Storage Cleaner",
+    "description": "Clean cache, cookies, and local storage"
+  },
+  "qrCode": {
+    "title": "QR Code Tools",
+    "description": "Generate QR code for the selected URL"
+  },
+  "textStatistics": {
+    "title": "Text Statistics",
+    "description": "Real-time analysis of text characters, words, and bytes"
+  },
+  "jwt": {
+    "title": "JWT Parser",
+    "description": "JSON Web Token decoding and viewing"
+  },
+  "jsonDiff": {
+    "title": "JSON Tools",
+    "description": "Diff, format, YAML/TOML conversion, and minify"
+  },
+  "base64Converter": {
+    "title": "Base64 Converter",
+    "description": "Encode text, files, and images to Base64"
+  },
+  "markdownToHtml": {
+    "title": "Markdown to HTML",
+    "description": "Real-time Markdown conversion and HTML preview"
+  },
+  "htmlToMarkdown": {
+    "title": "HTML to Markdown",
+    "description": "Real-time HTML conversion and Markdown preview"
+  },
+  "rightClickRestorer": {
+    "title": "Right Click Restorer",
+    "description": "Detect and restore disabled browser right-click menus"
+  }
+}

i18n/locales/en/htmlToMarkdown.json

@@ -0,0 +1,16 @@
+{
+  "pageTitle": "HTML to Markdown",
+  "pageSubtitle": "Convert HTML to Markdown in real-time",
+  "splitMode": "Split",
+  "previewMode": "Preview",
+  "markdownMode": "Markdown",
+  "clear": "Clear",
+  "inputLabel": "HTML Input",
+  "previewLabel": "Markdown Preview",
+  "markdownOutputLabel": "Markdown Output",
+  "inputPlaceholder": "Enter your HTML content here...",
+  "charCount": "{{count}} chars",
+  "copyMarkdown": "Copy Markdown",
+  "download": "Download",
+  "emptyHint": "Enter HTML content to see the conversion result"
+}

i18n/locales/en/jsonDiff.json

@@ -0,0 +1,21 @@
+{
+  "pageTitle": "JSON Diff",
+  "pageSubtitle": "Compare differences between two JSON values",
+  "leftPlaceholder": "Enter the original JSON...",
+  "rightPlaceholder": "Enter the target JSON...",
+  "leftLabel": "Original JSON",
+  "rightLabel": "Target JSON",
+  "compareButton": "Compare",
+  "clearButton": "Clear",
+  "sideBySideMode": "Side by side",
+  "unifiedMode": "Unified",
+  "previousDiff": "Previous",
+  "nextDiff": "Next",
+  "noDiffs": "No differences",
+  "diffCount": "{{count}} differences",
+  "invalidJson": "Invalid JSON format",
+  "emptyHint": "Enter JSON on both sides and click Compare",
+  "added": "Added",
+  "removed": "Removed",
+  "modified": "Modified"
+}

i18n/locales/en/jsonFormat.json

@@ -0,0 +1,41 @@
+{
+  "formatTitle": "JSON Formatter",
+  "formatSubtitle": "Beautify and format JSON data",
+  "inputPlaceholder": "Enter JSON to format...",
+  "formatButton": "Format",
+  "clearButton": "Clear",
+  "sortKeys": "Sort Keys",
+  "sortKeysTooltip": "Sort JSON object keys in alphabetical order",
+  "indentSize": "Indent",
+  "indentSpaces": "{{count}} spaces",
+  "outputLabel": "Formatted Result",
+  "copySuccess": "Copied",
+  "copyFail": "Copy failed",
+  "noContent": "Nothing to copy",
+  "invalidJson": "Invalid JSON format",
+  "emptyHint": "Enter JSON and click Format",
+  "originalSize": "Original size",
+  "formattedSize": "Formatted size",
+  "diffMode": "Diff",
+  "formatMode": "Format",
+  "yamlMode": "YAML",
+  "tomlMode": "TOML",
+  "minifyMode": "Minify",
+  "yamlTitle": "JSON to YAML",
+  "yamlSubtitle": "Convert JSON data to YAML format",
+  "yamlModeInputPlaceholder": "Enter JSON to convert...",
+  "yamlModeOutputLabel": "YAML Result",
+  "yamlModeEmptyHint": "Enter JSON and click Convert",
+  "convertButton": "Convert",
+  "tomlTitle": "JSON to TOML",
+  "tomlSubtitle": "Convert JSON data to TOML format",
+  "tomlModeInputPlaceholder": "Enter JSON to convert...",
+  "tomlModeOutputLabel": "TOML Result",
+  "tomlModeEmptyHint": "Enter JSON and click Convert",
+  "minifyTitle": "JSON Minifier",
+  "minifySubtitle": "Compress JSON into a compact single-line format",
+  "minifyModeInputPlaceholder": "Enter JSON to minify...",
+  "minifyModeOutputLabel": "Minified Result",
+  "minifyModeEmptyHint": "Enter JSON and click Minify",
+  "minifyButton": "Minify"
+}

i18n/locales/en/jwt.json

@@ -0,0 +1,17 @@
+{
+  "pageTitle": "JWT Parser",
+  "pageSubtitle": "JSON Web Token decoding and viewing",
+  "placeholder": "Paste Encoded JWT here...",
+  "headerTitle": "HEADER: Algorithm & Token Type",
+  "payloadTitle": "PAYLOAD: Data",
+  "signatureTitle": "Signature",
+  "noSignature": "No Signature",
+  "invalidFormat": "Unable to parse",
+  "errors": {
+    "invalidBase64String": "Invalid base64url string",
+    "failedToDecode": "Failed to decode base64url: ",
+    "invalidFormat": "Invalid JWT format: expected 3 parts separated by .",
+    "parseHeaderFailed": "Failed to parse Header: ",
+    "parsePayloadFailed": "Failed to parse Payload: "
+  }
+}

i18n/locales/en/markdownToHtml.json

@@ -0,0 +1,18 @@
+{
+  "pageTitle": "Markdown to HTML",
+  "pageSubtitle": "Convert Markdown to HTML in real-time with preview",
+  "splitMode": "Split",
+  "previewMode": "Preview",
+  "htmlMode": "HTML",
+  "clear": "Clear",
+  "print": "Print",
+  "download": "Download",
+  "inputLabel": "Markdown Input",
+  "previewLabel": "Live Preview",
+  "htmlOutputLabel": "HTML Output",
+  "inputPlaceholder": "Enter your Markdown content here...",
+  "charCount": "{{count}} chars",
+  "copyHtml": "Copy HTML",
+  "downloadSuccess": "File downloaded successfully",
+  "printSuccess": "Print window opened"
+}

i18n/locales/en/qrCode.json

@@ -0,0 +1,48 @@
+{
+  "pageTitle": "QR Code Tools",
+  "pageSubtitle": "Generate and parse QR codes",
+
+  "generateMode": "Generate QR Code",
+  "parseMode": "Parse QR Code",
+
+  "urlToQr": "Text to QR Code",
+  "qrToUrl": "QR Code to Text",
+
+  "urlInputLabel": "Enter URL or Text",
+  "urlInputPlaceholder": "Enter URL or text content, QR code will be generated automatically",
+  "generateButton": "Generate QR Code",
+  "generating": "Generating...",
+
+  "qrCodeWillShow": "QR code will be shown here",
+  "downloadButton": "Download QR Code",
+  "copyQrButton": "Copy QR Code Image",
+
+  "qrCodeSuccess": "QR code generated successfully",
+  "qrCodeDownloadSuccess": "QR code downloaded successfully",
+  "qrCodeCopySuccess": "QR code copied to clipboard",
+
+  "selectImage": "Please select a QR code image",
+  "parseSuccess": "QR code parsed successfully",
+  "noQrDetected": "No QR code detected, please ensure the image is clear and contains a QR code",
+  "parseError": "Failed to parse QR code, please try again",
+  "generateError": "Failed to generate QR code, please check the input",
+  "copyError": "Copy failed, please try again",
+
+  "imagePasted": "Image pasted, parsing...",
+  "imagePasteError": "Failed to paste image, please try again",
+  "imageCleared": "Image cleared",
+  "clickToUpload": "Click, drag, or paste to upload QR code image",
+  "supportFormats": "Supports PNG, JPG, WEBP, Base64 formats",
+
+  "parseButton": "Parse QR Code",
+  "parsing": "Parsing...",
+  "resultLabel": "Parsing Result",
+  "copyTooltip": "Copy",
+
+  "enterUrlError": "Please enter URL or text",
+  "clickToChange": "Click to change image",
+
+  "pasteHint": "Supports Ctrl+V to paste images or Base64 strings",
+  "autoGenerateHint": "QR code will be generated automatically after input",
+  "autoParseHint": "QR code will be parsed automatically after upload"
+}

i18n/locales/en/rightClickRestorer.json

@@ -0,0 +1,13 @@
+{
+  "title": "Right Click Restorer",
+  "description": "Detect and restore disabled browser right-click menus",
+  "loading": "Loading...",
+  "currentDomain": "Current Domain",
+  "statusLocked": "Locked",
+  "statusUnlocked": "Unlocked",
+  "unsupported": "Unsupported",
+  "unsupportedDesc": "The current page is a browser internal or extension page. Right-click unlock is not available. Please switch to a regular webpage.",
+  "unlockDesc": "Click the button below to temporarily unlock the right-click menu for the current website. You will need to unlock again after refreshing the page.",
+  "unlockBtn": "Unlock Right Click",
+  "alreadyUnlocked": "Right Click Unlocked"
+}

i18n/locales/en/storageCleaner.json

@@ -0,0 +1,33 @@
+{
+  "pageTitle": "Storage Cleaner",
+  "pageSubtitle": "Clear cache, cookies, and local storage",
+  "loading": "Loading...",
+  "occupied": "Occupied {{size}}",
+  "cleaning": "Cleaning...",
+  "cleanNow": "Clean Now",
+  "autoRefresh": "Auto refresh page after cleaning",
+  "selectAll": "Select all items",
+  "cleanSuccess": "Cleaning complete",
+  "cleanError": "Cleaning failed",
+  "noData": "No data",
+  "countUnit": "items",
+  "errorNoTab": "Unable to get current tab",
+  "errorRestricted": "Storage cleaning is not supported on this page",
+  "cleanSuccessReload": "Cleaning successful, reloading page...",
+  "errorStandardOnly": "Storage cleaning only works on standard web pages",
+  "confirmTitle": "Confirm Clear Data?",
+  "confirmDesc": "You are about to permanently delete the following selected storage items from the current page.",
+  "irreversible": "This action is irreversible",
+  "confirmAction": "Confirm Clear",
+  "cleanedSummary": "Cleaned {{items}}",
+  "noDataToClean": "No storage data found to clean",
+  "partialFailure": "Some items failed to clean",
+  "options": {
+    "localStorage": "Local Storage",
+    "sessionStorage": "Session Storage",
+    "indexedDB": "IndexedDB",
+    "cookies": "Cookies",
+    "cacheStorage": "Cache Storage",
+    "serviceWorkers": "Service Workers"
+  }
+}

i18n/locales/en/textStatistics.json

@@ -0,0 +1,9 @@
+{
+  "pageTitle": "Text Statistics",
+  "pageSubtitle": "Real-time analysis of characters, words, lines, and byte size",
+  "placeholder": "Type or paste text here...",
+  "characters": "Characters",
+  "words": "Words",
+  "lines": "Lines",
+  "bytes": "Byte Size"
+}

i18n/locales/en/timestamp.json

@@ -0,0 +1,27 @@
+{
+  "pageTitle": "Timestamp Conversion",
+  "pageSubtitle": "Unix millisecond conversion and formatting",
+  "tsToDate": "Timestamp → Date",
+  "dateToTs": "Date → Timestamp",
+  "placeholderTs": "Enter timestamp...",
+  "placeholderDate": "YYYY-MM-DD HH:mm:ss",
+  "unitMs": "Millisecond (ms)",
+  "unitS": "Second (s)",
+  "convertButton": "Convert Now",
+  "currentTs": "Current Timestamp",
+  "useNowTooltip": "Use this value",
+  "copyTsTooltip": "Copy timestamp",
+  "usedSuccess": "Using current timestamp",
+  "resultLabel": "Conversion Result",
+  "copyResultTooltip": "Copy result",
+  "relativeTime": "Relative Time",
+  "iso8601": "ISO 8601",
+  "utcTime": "UTC Time",
+  "copyTooltip": "Copy",
+  "resultEmpty": "Enter a value and click convert",
+  "errors": {
+    "invalidNumber": "Invalid number",
+    "invalidTimestamp": "Invalid timestamp",
+    "invalidFormat": "Format error"
+  }
+}

i18n/locales/zh/base64Converter.json

@@ -0,0 +1,37 @@
+{
+  "pageTitle": "Base64 转换器",
+  "pageSubtitle": "文本、文件与图像的 Base64 编码与解码",
+  "textMode": "文本",
+  "fileMode": "文件",
+  "imageMode": "图像",
+  "encode": "编码",
+  "decode": "解码",
+  "clear": "清空",
+  "textInputPlaceholder": "输入需要编码为 Base64 的文本...",
+  "base64InputPlaceholder": "输入需要解码的 Base64 字符串...",
+  "base64Output": "Base64 编码结果",
+  "textOutput": "解码文本结果",
+  "copyRaw": "复制纯 Base64",
+  "copyDataUri": "复制 Data URI",
+  "clickOrDropToFile": "点击或拖拽文件到此处",
+  "clickOrDropToImage": "点击或拖拽图像到此处",
+  "clickOrDropToReplace": "点击或拖拽以替换文件",
+  "maxFileSize": "最大文件大小：{{max}}",
+  "supportedFormats": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
+  "fileSizeExceeded": "文件大小超出限制（最大 {{max}}）",
+  "unsupportedImageType": "不支持的图像格式",
+  "conversionFailed": "转换失败",
+  "originalSize": "原始大小",
+  "encodedSize": "编码大小",
+  "invalidBase64": "Base64 字符串无效",
+  "binaryDataDetected": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
+  "imageDataUriHint": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
+  "switchToImageMode": "切换到图像模式",
+  "download": "下载",
+  "decodedFileName": "解码后文件名",
+  "decodeBase64Placeholder": "输入需要解码的 Base64 或 data URI...",
+  "decodedFileOutput": "解码文件",
+  "decodedImageOutput": "解码图像",
+  "inferredMimeType": "推断的 MIME 类型",
+  "decodedSize": "解码大小"
+}

i18n/locales/zh/common.json

@@ -0,0 +1,35 @@
+{
+  "appName": "测试工具",
+  "buttons": {
+    "save": "保存",
+    "cancel": "取消",
+    "confirm": "确认",
+    "copy": "复制",
+    "clear": "清理",
+    "refresh": "刷新",
+    "toggleLanguage": "切换语言",
+    "toggleTheme": "切换主题",
+    "themeMode": {
+      "light": "切换到深色模式",
+      "dark": "切换到系统模式",
+      "system": "切换到浅色模式"
+    },
+    "search": "搜索工具...",
+    "back": "返回",
+    "clearSearch": "清除搜索",
+    "recentSearch": "最近搜索",
+    "noResults": "未找到相关工具",
+    "openInTab": "在标签页打开",
+    "settings": "设置"
+  },
+  "messages": {
+    "copySuccess": "已复制到剪贴板",
+    "copyError": "复制失败"
+  },
+  "textInputArea": {
+    "clear": "清空",
+    "copyContent": "复制内容",
+    "cleared": "已清空",
+    "placeholder": "请输入文本"
+  }
+}

i18n/locales/zh/features.json

@@ -0,0 +1,45 @@
+{
+  "dashboard": {
+    "title": "仪表盘"
+  },
+  "timestamp": {
+    "title": "时间戳",
+    "description": "Unix 毫秒数转换与格式化"
+  },
+  "storageCleaner": {
+    "title": "存储清理",
+    "description": "清理缓存、Cookies 及本地存储"
+  },
+  "qrCode": {
+    "title": "二维码工具",
+    "description": "生成当前选中的 URL 的二维码"
+  },
+  "textStatistics": {
+    "title": "文本统计",
+    "description": "实时分析文本字符、单词及字节"
+  },
+  "jwt": {
+    "title": "JWT 解析",
+    "description": "JSON Web Token 解码与查看"
+  },
+  "jsonDiff": {
+    "title": "JSON 工具",
+    "description": "差异比较、格式化、YAML/TOML 转换及压缩"
+  },
+  "base64Converter": {
+    "title": "Base64 转换器",
+    "description": "文本、文件与图像的 Base64 编码转换"
+  },
+  "markdownToHtml": {
+    "title": "Markdown 转 HTML",
+    "description": "实时 Markdown 转换与 HTML 预览"
+  },
+  "htmlToMarkdown": {
+    "title": "HTML 转 Markdown",
+    "description": "实时 HTML 转换与 Markdown 预览"
+  },
+  "rightClickRestorer": {
+    "title": "右键恢复",
+    "description": "检测并恢复被网站禁用的浏览器右键菜单"
+  }
+}

i18n/locales/zh/htmlToMarkdown.json

@@ -0,0 +1,16 @@
+{
+  "pageTitle": "HTML 转 Markdown",
+  "pageSubtitle": "实时将 HTML 转换为 Markdown 格式",
+  "splitMode": "分屏",
+  "previewMode": "预览",
+  "markdownMode": "Markdown",
+  "clear": "清空",
+  "inputLabel": "HTML 输入",
+  "previewLabel": "Markdown 预览",
+  "markdownOutputLabel": "Markdown 输出",
+  "inputPlaceholder": "在此输入 HTML 内容...",
+  "charCount": "{{count}} 字符",
+  "copyMarkdown": "复制 Markdown",
+  "download": "下载",
+  "emptyHint": "输入 HTML 内容以查看转换结果"
+}

i18n/locales/zh/jsonDiff.json

@@ -0,0 +1,21 @@
+{
+  "pageTitle": "JSON 差异比较",
+  "pageSubtitle": "对比两个 JSON 数据的差异",
+  "leftPlaceholder": "输入原始 JSON...",
+  "rightPlaceholder": "输入目标 JSON...",
+  "leftLabel": "原始 JSON",
+  "rightLabel": "目标 JSON",
+  "compareButton": "比较",
+  "clearButton": "清空",
+  "sideBySideMode": "并排",
+  "unifiedMode": "统一",
+  "previousDiff": "上一个",
+  "nextDiff": "下一个",
+  "noDiffs": "无差异",
+  "diffCount": "{{count}} 处差异",
+  "invalidJson": "无效的 JSON 格式",
+  "emptyHint": "输入两侧 JSON 后点击比较",
+  "added": "新增",
+  "removed": "删除",
+  "modified": "修改"
+}

i18n/locales/zh/jsonFormat.json

@@ -0,0 +1,41 @@
+{
+  "formatTitle": "JSON 格式化",
+  "formatSubtitle": "美化和格式化 JSON 数据",
+  "inputPlaceholder": "输入需要格式化的 JSON...",
+  "formatButton": "格式化",
+  "clearButton": "清空",
+  "sortKeys": "键名排序",
+  "sortKeysTooltip": "按字母顺序对 JSON 对象键进行排序",
+  "indentSize": "缩进",
+  "indentSpaces": "{{count}} 个空格",
+  "outputLabel": "格式化结果",
+  "copySuccess": "复制成功",
+  "copyFail": "复制失败",
+  "noContent": "无内容可复制",
+  "invalidJson": "无效的 JSON 格式",
+  "emptyHint": "输入 JSON 后点击格式化",
+  "originalSize": "原始大小",
+  "formattedSize": "格式化后大小",
+  "diffMode": "差异比较",
+  "formatMode": "格式化",
+  "yamlMode": "YAML",
+  "tomlMode": "TOML",
+  "minifyMode": "压缩",
+  "yamlTitle": "JSON 转 YAML",
+  "yamlSubtitle": "将 JSON 数据转换为 YAML 格式",
+  "yamlModeInputPlaceholder": "输入需要转换的 JSON...",
+  "yamlModeOutputLabel": "YAML 结果",
+  "yamlModeEmptyHint": "输入 JSON 后点击转换",
+  "convertButton": "转换",
+  "tomlTitle": "JSON 转 TOML",
+  "tomlSubtitle": "将 JSON 数据转换为 TOML 格式",
+  "tomlModeInputPlaceholder": "输入需要转换的 JSON...",
+  "tomlModeOutputLabel": "TOML 结果",
+  "tomlModeEmptyHint": "输入 JSON 后点击转换",
+  "minifyTitle": "JSON 压缩",
+  "minifySubtitle": "将 JSON 压缩为紧凑的单行格式",
+  "minifyModeInputPlaceholder": "输入需要压缩的 JSON...",
+  "minifyModeOutputLabel": "压缩结果",
+  "minifyModeEmptyHint": "输入 JSON 后点击压缩",
+  "minifyButton": "压缩"
+}

i18n/locales/zh/jwt.json

@@ -0,0 +1,17 @@
+{
+  "pageTitle": "JWT 解析",
+  "pageSubtitle": "JSON Web Token 解码与查看",
+  "placeholder": "在此粘贴 JWT 令牌 (Encoded JWT)...",
+  "headerTitle": "HEADER: 算法 & 令牌类型",
+  "payloadTitle": "PAYLOAD: 数据",
+  "signatureTitle": "签名",
+  "noSignature": "无签名",
+  "invalidFormat": "无法解析",
+  "errors": {
+    "invalidBase64String": "无效的 Base64URL 字符串",
+    "failedToDecode": "Base64URL 解码失败：",
+    "invalidFormat": "JWT 格式错误：必须包含三个由 . 分隔的部分",
+    "parseHeaderFailed": "解析 Header 失败：",
+    "parsePayloadFailed": "解析 Payload 失败："
+  }
+}

i18n/locales/zh/markdownToHtml.json

@@ -0,0 +1,18 @@
+{
+  "pageTitle": "Markdown 转 HTML",
+  "pageSubtitle": "实时将 Markdown 转换为 HTML 并预览",
+  "splitMode": "分屏",
+  "previewMode": "预览",
+  "htmlMode": "HTML",
+  "clear": "清空",
+  "print": "打印",
+  "download": "下载",
+  "inputLabel": "Markdown 输入",
+  "previewLabel": "实时预览",
+  "htmlOutputLabel": "HTML 输出",
+  "inputPlaceholder": "在此输入 Markdown 内容...",
+  "charCount": "{{count}} 字符",
+  "copyHtml": "复制 HTML",
+  "downloadSuccess": "文件下载成功",
+  "printSuccess": "打印窗口已打开"
+}

i18n/locales/zh/qrCode.json

@@ -0,0 +1,48 @@
+{
+  "pageTitle": "二维码工具",
+  "pageSubtitle": "生成和解析二维码",
+
+  "generateMode": "生成二维码",
+  "parseMode": "解析二维码",
+
+  "urlToQr": "文本转二维码",
+  "qrToUrl": "二维码转文本",
+
+  "urlInputLabel": "输入 URL 或文本",
+  "urlInputPlaceholder": "请输入 URL 或文本内容，将自动生成二维码",
+  "generateButton": "生成二维码",
+  "generating": "生成中...",
+
+  "qrCodeWillShow": "二维码将显示在这里",
+  "downloadButton": "下载二维码",
+  "copyQrButton": "复制二维码",
+
+  "qrCodeSuccess": "二维码生成成功",
+  "qrCodeDownloadSuccess": "二维码下载成功",
+  "qrCodeCopySuccess": "二维码已复制到剪贴板",
+
+  "selectImage": "请选择二维码图片",
+  "parseSuccess": "二维码解析成功",
+  "noQrDetected": "未检测到二维码，请确保图片清晰且包含二维码",
+  "parseError": "解析二维码失败，请重试",
+  "generateError": "生成二维码失败，请检查输入内容",
+  "copyError": "复制失败，请重试",
+
+  "imagePasted": "图片粘贴成功，正在解析...",
+  "imagePasteError": "粘贴图片失败，请重试",
+  "imageCleared": "图片已清除",
+  "clickToUpload": "点击、拖拽或粘贴上传二维码图片",
+  "supportFormats": "支持 PNG、JPG、WEBP、Base64 格式",
+
+  "parseButton": "解析二维码",
+  "parsing": "解析中...",
+  "resultLabel": "解析结果",
+  "copyTooltip": "复制",
+
+  "enterUrlError": "请输入 URL 或文本",
+  "clickToChange": "点击更换图片",
+
+  "pasteHint": "支持 Ctrl+V 粘贴图片或 Base64 字符串",
+  "autoGenerateHint": "输入内容后将自动生成二维码",
+  "autoParseHint": "上传图片后将自动解析二维码"
+}

i18n/locales/zh/rightClickRestorer.json

@@ -0,0 +1,13 @@
+{
+  "title": "右键恢复",
+  "description": "检测并恢复被网站禁用的浏览器右键菜单",
+  "loading": "正在加载...",
+  "currentDomain": "当前域名",
+  "statusLocked": "未解锁",
+  "statusUnlocked": "已解锁",
+  "unsupported": "不支持",
+  "unsupportedDesc": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
+  "unlockDesc": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
+  "unlockBtn": "解锁当前网站右键",
+  "alreadyUnlocked": "右键已解锁"
+}

i18n/locales/zh/storageCleaner.json

@@ -0,0 +1,33 @@
+{
+  "pageTitle": "存储清理",
+  "pageSubtitle": "清理缓存、Cookies 及本地存储",
+  "loading": "加载中...",
+  "occupied": "已占用 {{size}}",
+  "cleaning": "正在清理...",
+  "cleanNow": "立即清理",
+  "autoRefresh": "清理后自动刷新页面",
+  "selectAll": "全选所有项",
+  "cleanSuccess": "清理完成",
+  "cleanError": "清理失败",
+  "noData": "无数据",
+  "countUnit": "个",
+  "errorNoTab": "无法获取当前标签页",
+  "errorRestricted": "存储清理功能不支持此页面",
+  "cleanSuccessReload": "清理成功，即将刷新页面",
+  "errorStandardOnly": "存储清理功能仅适用于标准网页",
+  "confirmTitle": "确认清理数据？",
+  "confirmDesc": "您将永久删除当前页面的以下选定存储项。",
+  "irreversible": "此操作不可撤销",
+  "confirmAction": "确认清理",
+  "cleanedSummary": "清理了 {{items}}",
+  "noDataToClean": "该页面没有可清理的存储数据",
+  "partialFailure": "部分清理失败",
+  "options": {
+    "localStorage": "Local Storage",
+    "sessionStorage": "Session Storage",
+    "indexedDB": "IndexedDB",
+    "cookies": "Cookies",
+    "cacheStorage": "Cache Storage",
+    "serviceWorkers": "Service Workers"
+  }
+}

i18n/locales/zh/textStatistics.json

@@ -0,0 +1,9 @@
+{
+  "pageTitle": "文本统计",
+  "pageSubtitle": "实时分析文本的字符、单词、行数及字节大小",
+  "placeholder": "在此输入或粘贴文本...",
+  "characters": "字符数",
+  "words": "单词数",
+  "lines": "行数",
+  "bytes": "字节大小"
+}

i18n/locales/zh/timestamp.json

@@ -0,0 +1,27 @@
+{
+  "pageTitle": "时间戳转换",
+  "pageSubtitle": "Unix 毫秒数转换与格式化",
+  "tsToDate": "时间戳 → 日期",
+  "dateToTs": "日期 → 时间戳",
+  "placeholderTs": "输入时间戳...",
+  "placeholderDate": "YYYY-MM-DD HH:mm:ss",
+  "unitMs": "毫秒 (ms)",
+  "unitS": "秒 (s)",
+  "convertButton": "立即转换",
+  "currentTs": "当前时间戳",
+  "useNowTooltip": "填充到下方",
+  "copyTsTooltip": "复制时间戳",
+  "usedSuccess": "已使用当前时间戳",
+  "resultLabel": "转换结果",
+  "copyResultTooltip": "复制结果",
+  "relativeTime": "相对时间",
+  "iso8601": "ISO 8601",
+  "utcTime": "UTC 时间",
+  "copyTooltip": "复制",
+  "resultEmpty": "请输入并点击转换",
+  "errors": {
+    "invalidNumber": "无效数字",
+    "invalidTimestamp": "无效时间戳",
+    "invalidFormat": "格式错误"
+  }
+}

lint-staged.config.mjs

@@ -1,12 +1,4 @@
-/* global process */
-
-const isCI = process.env.CI === 'true';
-
 export default {
-  '*.{ts,tsx,js,jsx,mjs}': [
+  '*.{ts,tsx,js,jsx,mjs}': ['eslint --fix --max-warnings=0 --no-warn-ignored', 'prettier --write'],
-    'eslint --fix --no-warn-ignored',
-    ...(isCI ? ['eslint --max-warnings=0'] : []),
-    'prettier --write',
-  ],
   '*.{json,css,scss,md}': ['prettier --write'],
 };

package-lock.json

@@ -25,11 +25,15 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.20",
+        "i18next": "^26.2.0",
+        "i18next-browser-languagedetector": "^8.2.1",
         "lucide-react": "^1.16.0",
+        "marked": "^18.0.4",
         "qr-scanner": "^1.4.2",
         "qrious": "^4.0.2",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
+        "react-i18next": "^17.0.8",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.6.0"
       },
@@ -6639,6 +6643,15 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
@@ -6688,6 +6701,43 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/i18next": {
+      "version": "26.2.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.2.0.tgz",
+      "integrity": "sha512-zwBHldHdTmwN7r6UNc7lC6GWNN+YYg3DrRSeHR5PRRBf5QnJZcYHrQc0uaU26qZeYxR7iFZD+Y315dPnKP47wA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
@@ -8387,6 +8437,18 @@
         "url": "https://github.com/sponsors/fregante"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.4.tgz",
+      "integrity": "sha512-c/BTaKzg0G6ezQx97DAkYU7k0HM6ys0FqYeKBL6hlBByZwy+ycA1+f0vDdjMHKKeEjdgkx0GOv9Il6D+85cOqA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/marky": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/marky/-/marky-1.3.0.tgz",
@@ -9745,6 +9807,33 @@
         "react": "^19.2.6"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.8.tgz",
+      "integrity": "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.2.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -11354,7 +11443,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -11653,6 +11742,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11860,6 +11958,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",

package.json

@@ -36,11 +36,15 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
+    "i18next": "^26.2.0",
+    "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.16.0",
+    "marked": "^18.0.4",
     "qr-scanner": "^1.4.2",
     "qrious": "^4.0.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-i18next": "^17.0.8",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
   },

pages/Base64Converter/Base64ConverterSection.tsx

@@ -1,7 +1,7 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import { useI18n } from '@/utils/chromeI18n';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import DecodeResultPaper from '@/components/DecodeResultPaper';
 import { Button } from '@/components/ui/button';
 import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
@@ -19,7 +19,7 @@ interface Base64ConverterSectionProps {
 }
 
 export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
-  const { t } = useI18n('base64Converter');
+  const { t } = useLazyTranslation('base64Converter');
 
   const [direction, setDirection] = useStorageState(
     `base64Converter/${mode}Mode/direction`,
@@ -57,7 +57,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4 px-2">
+    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
           value={direction}
@@ -86,7 +86,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
             }}
             onClick={() => fileInputRef.current?.click()}
             className={cn(
-              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer',
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer transition-all duration-300',
               isDragging
                 ? 'border-primary bg-primary/10'
                 : info
@@ -107,7 +107,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
             {isLoading ? (
               <div className="w-9 h-9 border-3 border-primary/20 border-t-primary rounded-full animate-spin" />
             ) : info ? (
-              <div className="flex flex-col items-center gap-1.5 text-center w-full">
+              <div className="flex flex-col items-center gap-1.5 text-center w-full animate-in fade-in duration-200">
                 {mode === 'image' && result && (
                   <div className="relative p-1 border border-border bg-background rounded-lg shadow-sm mb-1 max-w-[180px] overflow-hidden">
                     <img
@@ -117,7 +117,9 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                     />
                   </div>
                 )}
-                <Upload className={cn('w-8 h-8 text-primary')} />
+                <Upload
+                  className={cn('w-8 h-8 text-primary', mode === 'file' && 'animate-bounce')}
+                />
                 <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
                   {info.name}
                 </span>

pages/Base64Converter/FileMode.tsx

@@ -0,0 +1,220 @@
+import { Trash2, Upload } from 'lucide-react';
+import TextInputArea from '@/components/TextInputArea';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import CopyButton from '@/components/CopyButton';
+import DecodeResultPaper from '@/components/DecodeResultPaper';
+import { Button } from '@/components/ui/button';
+import { downloadBlob, formatFileSize, MAX_FILE_SIZE } from '@/utils/base64Converter';
+import { useStorageState } from '@/utils/useStorageState';
+import type { Base64ConvertDirection } from '@/types/storage';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { useBase64Converter } from './useBase64Converter'; // 💡 斩断重复代码
+import { cn } from '@/lib/utils';
+
+const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
+  val === 'encode' || val === 'decode';
+
+export default function FileMode() {
+  const { t } = useLazyTranslation('base64Converter');
+  const [direction, setDirection] = useStorageState(
+    'base64Converter/fileMode/direction',
+    'encode',
+    isValidDirection,
+  );
+
+  const {
+    result,
+    info,
+    isLoading,
+    isDragging,
+    setIsDragging,
+    fileInputRef,
+    encodeError,
+    decodeInput,
+    setDecodeInput,
+    decoded,
+    decodeError,
+    decodedFileName,
+    setCustomFileName,
+    resetAll,
+    safeFileSelect,
+  } = useBase64Converter({ mode: 'file' });
+
+  const handleDownload = () => {
+    if (decoded) downloadBlob(decoded.blob, decodedFileName);
+  };
+
+  return (
+    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+      <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={(next) => {
+            if (next && next !== direction) {
+              resetAll();
+              setDirection(next);
+            }
+          }}
+          size="small"
+        />
+      </div>
+
+      {direction === 'encode' ? (
+        <div className="flex flex-col space-y-4">
+          <div
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              const file = e.dataTransfer.files[0];
+              if (file) safeFileSelect(file);
+            }}
+            onClick={() => fileInputRef.current?.click()}
+            className={cn(
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer transition-all duration-300',
+              isDragging
+                ? 'border-primary bg-primary/10'
+                : info
+                  ? 'border-primary/60 bg-primary/5'
+                  : 'border-border bg-muted/40 hover:border-primary/80 hover:bg-muted/70',
+            )}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              hidden
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) safeFileSelect(file);
+              }}
+            />
+            {isLoading ? (
+              <div className="w-9 h-9 border-3 border-primary/20 border-t-primary rounded-full animate-spin" />
+            ) : info ? (
+              <div className="flex flex-col items-center gap-1.5 text-center">
+                <Upload className="w-8 h-8 text-primary animate-bounce" />
+                <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
+                  {info.name}
+                </span>
+                <span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
+                  {formatFileSize(info.size)} · {info.type}
+                </span>
+                <span className="text-[11px] font-medium text-primary/80 mt-1">
+                  {t('clickOrDropToReplace')}
+                </span>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center gap-1.5 text-center">
+                <Upload className="w-8 h-8 text-muted-foreground/60" />
+                <span className="text-xs font-bold text-foreground/80">
+                  {t('clickOrDropToFile')}
+                </span>
+                <span className="text-[10px] font-medium text-muted-foreground/60">
+                  {t('maxFileSize', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` })}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {encodeError && (
+            <div
+              role="alert"
+              className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-xs font-semibold text-destructive"
+            >
+              {encodeError}
+            </div>
+          )}
+
+          {result && (
+            <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">
+                  {t('base64Output')}
+                </span>
+                <div className="flex gap-2">
+                  <CopyButton
+                    text={result.rawBase64}
+                    tooltip={t('copyRaw')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                  <CopyButton
+                    text={result.output}
+                    tooltip={t('copyDataUri')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                </div>
+              </div>
+              <TextInputArea
+                readOnly
+                value={
+                  result.output.length > 2000
+                    ? `${result.output.substring(0, 2000)}...`
+                    : result.output
+                }
+                showClear={false}
+                minRows={4}
+              />
+              <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">
+                      {formatFileSize(result.originalBytes)}
+                    </span>
+                  </span>
+                  <span className="text-border/60">|</span>
+                  <span>
+                    {t('encodedSize')}:{' '}
+                    <span className="font-semibold text-foreground/80">
+                      {formatFileSize(result.outputBytes)}
+                    </span>
+                  </span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={resetAll}
+                  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>
+          )}
+        </div>
+      ) : (
+        <div className="flex flex-col space-y-4">
+          <TextInputArea
+            placeholder={t('decodeBase64Placeholder')}
+            value={decodeInput}
+            onChange={setDecodeInput}
+            externalError={decodeError || undefined}
+            showClear={true}
+            allowCopy={true}
+            minRows={6}
+            onClear={resetAll}
+          />
+          {decoded && (
+            <DecodeResultPaper
+              title={t('decodedFileOutput')}
+              mimeType={decoded.mimeType}
+              blobSize={decoded.blob.size}
+              fileName={decodedFileName}
+              onFileNameChange={setCustomFileName}
+              onDownload={handleDownload}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

pages/Base64Converter/ImageMode.tsx

@@ -0,0 +1,259 @@
+import { Image as ImageIcon, Trash2 } from 'lucide-react';
+import TextInputArea from '@/components/TextInputArea';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import CopyButton from '@/components/CopyButton';
+import DecodeResultPaper from '@/components/DecodeResultPaper';
+import { Button } from '@/components/ui/button';
+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 { cn } from '@/lib/utils';
+
+const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
+  val === 'encode' || val === 'decode';
+
+export default function ImageMode() {
+  const { t } = useLazyTranslation('base64Converter');
+  const [direction, setDirection] = useStorageState(
+    'base64Converter/imageMode/direction',
+    'encode',
+    isValidDirection,
+  );
+
+  // 消费完全托管的核心 Hook，消灭本地多余状态机
+  const {
+    result,
+    info,
+    isLoading,
+    isDragging,
+    setIsDragging,
+    fileInputRef,
+    encodeError,
+    decodeInput,
+    setDecodeInput,
+    decoded,
+    decodeError,
+    decodedFileName,
+    setCustomFileName,
+    resetAll,
+    safeFileSelect,
+  } = useBase64Converter({ mode: 'image' });
+
+  const handleDirectionChange = (next: Base64ConvertDirection) => {
+    if (!next || next === direction) return;
+    resetAll();
+    setDirection(next);
+  };
+
+  const handleDownload = () => {
+    if (decoded) downloadBlob(decoded.blob, decodedFileName);
+  };
+
+  return (
+    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+      <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>
+
+      {direction === 'encode' ? (
+        <div className="flex flex-col space-y-4">
+          {/* 图片拖拽投递箱终端 */}
+          <div
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              const file = e.dataTransfer.files[0];
+              if (file) safeFileSelect(file);
+            }}
+            onClick={() => fileInputRef.current?.click()}
+            className={cn(
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer transition-all duration-300',
+              isDragging
+                ? 'border-primary bg-primary/10'
+                : info
+                  ? 'border-primary/60 bg-primary/5'
+                  : 'border-border bg-muted/40 hover:border-primary/80 hover:bg-muted/70',
+            )}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              hidden
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) safeFileSelect(file);
+              }}
+            />
+            {isLoading ? (
+              <div className="w-9 h-9 border-3 border-primary/20 border-t-primary rounded-full animate-spin" />
+            ) : info ? (
+              <div className="flex flex-col items-center gap-1.5 text-center animate-in fade-in duration-200 w-full">
+                {result && (
+                  <div className="relative p-1 border border-border bg-background rounded-lg shadow-sm mb-1 max-w-[180px] overflow-hidden">
+                    <img
+                      src={result.output}
+                      alt="preview"
+                      className="max-h-32 w-full object-contain rounded"
+                    />
+                  </div>
+                )}
+                <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
+                  {info.name}
+                </span>
+                <span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
+                  {formatFileSize(info.size)} · {info.type}
+                </span>
+                <span className="text-[11px] font-medium text-primary/80 mt-1">
+                  {t('clickOrDropToReplace')}
+                </span>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center gap-1.5 text-center">
+                <ImageIcon className="w-8 h-8 text-muted-foreground/60" />
+                <span className="text-xs font-bold text-foreground/80">
+                  {t('clickOrDropToImage')}
+                </span>
+                <span className="text-[10px] font-medium text-muted-foreground/60">
+                  {t('supportedFormats')}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {encodeError && (
+            <div
+              role="alert"
+              className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-xs font-semibold text-destructive tracking-wide"
+            >
+              {encodeError}
+            </div>
+          )}
+
+          {result && (
+            <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">
+                  {t('base64Output')}
+                </span>
+                <div className="flex gap-2">
+                  <CopyButton
+                    text={result.rawBase64}
+                    tooltip={t('copyRaw')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                  <CopyButton
+                    text={result.output}
+                    tooltip={t('copyDataUri')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                </div>
+              </div>
+
+              <TextInputArea
+                readOnly
+                value={
+                  result.output.length > 2000
+                    ? `${result.output.substring(0, 2000)}...`
+                    : result.output
+                }
+                showClear={false}
+                minRows={4}
+              />
+
+              <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">
+                      {formatFileSize(result.originalBytes)}
+                    </span>
+                  </span>
+                  <span className="text-border/60">|</span>
+                  <span>
+                    {t('encodedSize')}:{' '}
+                    <span className="font-semibold text-foreground/80">
+                      {formatFileSize(result.outputBytes)}
+                    </span>
+                  </span>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={resetAll}
+                  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>
+          )}
+
+          {info && !result && (
+            <div className="flex justify-end select-none">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={resetAll}
+                className="h-8 rounded-md text-xs gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+                {t('clear')}
+              </Button>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="flex flex-col space-y-4">
+          <TextInputArea
+            placeholder={t('decodeBase64Placeholder')}
+            value={decodeInput}
+            onChange={setDecodeInput}
+            externalError={decodeError || undefined}
+            showClear={true}
+            allowCopy={true}
+            minRows={6}
+            onClear={resetAll}
+          />
+          {decoded && (
+            <div className="animate-in slide-in-from-bottom-2 duration-300">
+              <DecodeResultPaper
+                title={t('decodedImageOutput')}
+                mimeType={decoded.mimeType}
+                blobSize={decoded.blob.size}
+                fileName={decodedFileName}
+                onFileNameChange={setCustomFileName}
+                onDownload={handleDownload}
+              >
+                <div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
+                  <img
+                    src={`data:${decoded.mimeType};base64,${decoded.rawBase64}`}
+                    alt="decoded preview"
+                    className="max-h-40 w-full rounded-lg object-contain bg-[linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)] bg-[size:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0] dark:bg-none"
+                  />
+                </div>
+              </DecodeResultPaper>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

pages/Base64Converter/TextMode.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
-import { useI18n } from '@/utils/chromeI18n';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import { base64ToText, textToBase64 } from '@/utils/base64Converter';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { useContextMenuData } from '@/utils/useContextMenuData';
@@ -20,12 +20,14 @@ interface TextModeProps {
 }
 
 export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
-  const { t } = useI18n('base64Converter');
+  const { t } = useLazyTranslation('base64Converter');
 
+  // 1. 纯净的核心源状态机：只保留输入源和转换方向
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');
   const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
 
+  // 2. 文本高频敲击防抖大闸：斩断频繁进行文本转 Base64 带来的 CPU 计算过热
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedInput(input);
@@ -33,6 +35,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
     return () => clearTimeout(handle);
   }, [input]);
 
+  // 3. 右键联动数据上下文：优雅原地合并受控状态
   const handleContextMenuData = useCallback((payload: string) => {
     setInput(payload);
     setDebouncedInput(payload);
@@ -41,6 +44,8 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
 
   useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
 
+  // 💡 4. 贯彻方案 A（彻底消灭 setOutput / setError）：
+  // 让所有的转化逻辑、类型安全校验在 useMemo 内存管道中单次渲染一气呵成！
   const conversionPipeline = useMemo(() => {
     const trimmed = debouncedInput.trim();
     if (!trimmed) return { output: '', error: null };
@@ -88,7 +93,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4 px-2">
+    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
       {/* 受控方向切流中枢 */}
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
@@ -107,7 +112,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
         placeholder={placeholder}
         value={input}
         onChange={setInput}
-        externalError={error || undefined}
+        externalError={error || undefined} // 💡 流式异常大闸动态注入
         showClear={true}
         allowCopy={true}
         minRows={5}
@@ -120,7 +125,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
         - 完美向全站 shadcn 暗黑生态看齐，采用标准的 bg-primary/10 混合变体。
       */}
       {showImageHint && (
-        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
+        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20 animate-in slide-in-from-top-1 duration-200">
           <span className="text-xs font-semibold text-primary tracking-tight">
             {t('imageDataUriHint')}
           </span>
@@ -129,7 +134,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
             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"
+            className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 transition-colors px-2.5"
           >
             {t('switchToImageMode')}
           </Button>
@@ -138,7 +143,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
 
       {/* 5. 编码/解码核心数据承载流卡片 */}
       {output && (
-        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
+        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3 animate-in slide-in-from-bottom-2 duration-300">
           <div className="flex justify-between items-center select-none">
             <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
               {outputLabel}

pages/Base64Converter/__tests__/FileMode.test.tsx

@@ -0,0 +1,235 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import FileMode from '../FileMode';
+
+// Mock CopyButton
+vi.mock('@/components/CopyButton', () => ({
+  default: ({ text, tooltip }: { text: string; tooltip?: string }) => (
+    <button data-testid="copy-button" data-tooltip={tooltip}>
+      {text.slice(0, 20)}
+    </button>
+  ),
+}));
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.useFakeTimers({ shouldAdvanceTime: true });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+// useStorageState's async loadState may overwrite user toggle if we click before the
+// initial chrome.storage read settles. Flush pending microtasks first.
+const waitForStorageReady = () => act(() => Promise.resolve());
+
+describe('FileMode', () => {
+  it('应该渲染文件上传区域', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    expect(screen.getByText('base64Converter:clickOrDropToFile')).toBeInTheDocument();
+    expect(screen.getByText('base64Converter:maxFileSize')).toBeInTheDocument();
+  });
+
+  it('应该处理有效的文件选择', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+
+    const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
+
+    // 文件输入是隐藏的，直接触发 change 事件
+    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(hiddenInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(screen.getByText('test.txt')).toBeInTheDocument();
+      expect(screen.getByText('base64Converter:base64Output')).toBeInTheDocument();
+    });
+  });
+
+  it('应该拒绝超出大小限制的文件', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+
+    // 创建一个超过 10MB 的文件
+    const largeContent = new Uint8Array(11 * 1024 * 1024);
+    const file = new File([largeContent], 'large.bin', { type: 'application/octet-stream' });
+
+    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(hiddenInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent('base64Converter:fileSizeExceeded');
+    });
+  });
+
+  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;
+    fireEvent.change(hiddenInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(screen.getByText('test.txt')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('base64Converter:clear'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('test.txt')).not.toBeInTheDocument();
+      expect(screen.getByText('base64Converter:clickOrDropToFile')).toBeInTheDocument();
+    });
+  });
+
+  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;
+    fireEvent.change(hiddenInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(screen.getByText('test.txt')).toBeInTheDocument();
+    });
+    // 文件类型显示在 caption 中，格式为 "size · type"
+    expect(screen.getByText(/test\.txt/)).toBeInTheDocument();
+  });
+
+  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;
+    fireEvent.change(hiddenInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/base64Converter:originalSize/)).toBeInTheDocument();
+      expect(screen.getByText(/base64Converter:encodedSize/)).toBeInTheDocument();
+    });
+  });
+
+  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;
+    fireEvent.change(hiddenInput, { target: { files: [file] } });
+
+    await waitFor(() => {
+      const copyButtons = screen.getAllByTestId('copy-button');
+      expect(copyButtons.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  it('应该渲染 encode/decode 切换按钮', () => {
+    render(<FileMode />);
+    expect(screen.getByText('base64Converter:encode')).toBeInTheDocument();
+    expect(screen.getByText('base64Converter:decode')).toBeInTheDocument();
+  });
+
+  it('切到 decode 应该显示 Base64 输入框', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    fireEvent.click(screen.getByText('base64Converter:decode'));
+    expect(
+      await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder'),
+    ).toBeInTheDocument();
+  });
+
+  it('解码 PDF Base64 后应该显示 application/pdf 与默认文件名 decoded.pdf', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    fireEvent.click(screen.getByText('base64Converter:decode'));
+
+    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
+    fireEvent.change(input, { target: { value: 'JVBERi0K' } });
+
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('base64Converter:decodedFileOutput')).toBeInTheDocument();
+      expect(screen.getByText(/application\/pdf/)).toBeInTheDocument();
+      expect(screen.getByDisplayValue('decoded.pdf')).toBeInTheDocument();
+    });
+  });
+
+  it('解码后的文件名应该可编辑', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    fireEvent.click(screen.getByText('base64Converter:decode'));
+
+    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
+    fireEvent.change(input, { target: { value: 'JVBERi0K' } });
+
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+
+    const filenameInput = (await screen.findByDisplayValue('decoded.pdf')) as HTMLInputElement;
+    fireEvent.change(filenameInput, { target: { value: 'my-report.pdf' } });
+    expect(filenameInput.value).toBe('my-report.pdf');
+  });
+
+  it('解码后应该显示下载按钮', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    fireEvent.click(screen.getByText('base64Converter:decode'));
+
+    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
+    fireEvent.change(input, { target: { value: 'JVBERi0K' } });
+
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+
+    expect(await screen.findByText('base64Converter:download')).toBeInTheDocument();
+  });
+
+  it('解码非法 Base64 应该显示 invalidBase64 错误', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    fireEvent.click(screen.getByText('base64Converter:decode'));
+
+    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
+    fireEvent.change(input, { target: { value: '!!!not base64' } });
+
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('base64Converter:invalidBase64')).toBeInTheDocument();
+    });
+  });
+
+  it('切换方向时应该清空解码状态', async () => {
+    render(<FileMode />);
+    await waitForStorageReady();
+    fireEvent.click(screen.getByText('base64Converter:decode'));
+
+    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
+    fireEvent.change(input, { target: { value: 'JVBERi0K' } });
+
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('base64Converter:decodedFileOutput')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('base64Converter:encode'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('decodedFileOutput')).not.toBeInTheDocument();
+    });
+  });
+});