From c8ad2a2283bc1e5716a855a8a74734ebd25d5209 Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@localhost.localdomain>
Date: Sat, 23 May 2026 14:37:31 +0800
Subject: [PATCH 01/71] fix(ci): fix release workflow artifact upload issue

- Split artifact upload into 3 separate steps (Chrome, Firefox, Source)
- Update download steps to match new artifact names
- Add if-no-files-found: error for better error handling
- Fix Node.js 20 compatibility issue with upload-artifact@v4 glob pattern
---
 .github/workflows/release.yml | 40 +++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index df1693e..ff9753f 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -126,13 +126,29 @@ jobs:
 
       # 💡 核心自愈补丁：显式将 .output 下打包出的真实生产绝对路径文件，
       # 稳固地上存至 GitHub 的常驻产物箱中进行安全物理隔离，防范后期发布网络崩溃导致产物蒸发！
-      - name: Upload Extension Artifacts
+      - name: Upload Chrome Extension
         uses: actions/upload-artifact@v4
         with:
-          name: extension-zips
-          path: |
-            .output/*.zip
+          name: chrome-extension
+          path: .output/testing-tools-*.zip
           retention-days: 7
+          if-no-files-found: error
+
+      - name: Upload Firefox Extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: firefox-extension
+          path: .output/testing-tools-*-firefox.zip
+          retention-days: 7
+          if-no-files-found: error
+
+      - name: Upload Source Code
+        uses: actions/upload-artifact@v4
+        with:
+          name: source-code
+          path: .output/testing-tools-*-sources.zip
+          retention-days: 7
+          if-no-files-found: error
 
   # ── Phase 4: 独立中央签发发布（Atomic Release Publisher） ───────────────────
   release:
@@ -144,10 +160,22 @@ jobs:
         uses: actions/checkout@v4
 
       # 💡 独立下载打包完好的绝对产物包
-      - name: Download Extension Artifacts
+      - name: Download Chrome Extension
         uses: actions/download-artifact@v4
         with:
-          name: extension-zips
+          name: chrome-extension
+          path: release-artifacts
+
+      - name: Download Firefox Extension
+        uses: actions/download-artifact@v4
+        with:
+          name: firefox-extension
+          path: release-artifacts
+
+      - name: Download Source Code
+        uses: actions/download-artifact@v4
+        with:
+          name: source-code
           path: release-artifacts
 
       - name: Extract version from tag

From 61e741f1981ccc18bb1202e1ac7555664adf7c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 25 May 2026 19:15:31 +0800
Subject: [PATCH 02/71] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20AGENTS.md?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E5=92=8C=E7=BF=BB=E8=AF=91=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/AGENTS.md b/AGENTS.md
index d2f240d..289a697 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -54,7 +54,7 @@ i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功
 ## 关键架构决策
 
 **路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
-渲染对应组件。支持三种渲染模式: popup / sidepanel / tab。
+渲染对应组件。支持三种渲染模式: popup / sidepanel / tab。每种模式有独立的路由和可见页面配置。
 
 **存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义。使用 `utils/chromeStorage.ts` 及其
 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
@@ -75,13 +75,20 @@ Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照
   - `@/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
 
 - 命名空间: `common` (默认), `features`
 - 翻译键格式: `namespace:key` (如 `features:timestamp.title`)
 - 语言: `zh` (默认), `en`
+- 翻译文件结构:
+  - `i18n/locales/{zh,en}/common.json` - 全局通用翻译
+  - `i18n/locales/{zh,en}/features.json` - 功能模块标题和描述
+  - `i18n/locales/{zh,en}/{功能名}.json` - 各功能独立翻译（如 timestamp.json, storageCleaner.json 等）
 - 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json` 及对应功能独立 JSON
+- 使用 `useLazyTranslation` hook 加载功能独立翻译，返回 `ns:key` 格式
 
 ## 新功能开发清单
 
@@ -97,6 +104,8 @@ Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照
 - 禁止使用 `any` (测试文件除外)
 - 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
 - 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
+- UI 组件: 优先使用 `components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
+- 图标: 使用 `lucide-react` 图标库
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
 
@@ -109,3 +118,6 @@ Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照
 - TypeScript: ^5.9.3
 - Vitest: ^4.1.7
 - i18next: ^26.2.0
+- @dnd-kit (拖拽排序)
+- marked (Markdown 解析)
+- qrious + qr-scanner (二维码生成与解析)

From dec43f89da52ed4f666ff6fa964e37e2b9662c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 25 May 2026 19:21:22 +0800
Subject: [PATCH 03/71] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20AGENTS.md?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E5=96=84=20CI=20=E6=AD=A5=E9=AA=A4=E5=92=8C?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E9=94=AE=E5=90=8D=E6=A0=BC=E5=BC=8F=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 289a697..f28e8bd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,6 +1,6 @@
 # AGENTS.md
 
-WXT 浏览器扩展项目 (React 19 + TypeScript)。
+WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
 
 ## 核心命令
 
@@ -22,14 +22,17 @@ npm run test:coverage    # 带覆盖率的测试
 
 ## 验证流程
 
-CI 执行顺序: `setup → lint/typecheck/test(并行) → build` (build 依赖前三者)。
+CI 步骤（严格顺序，任一步骤失败则停止并标记 CI 失败）：
 
-Pre-commit hook (`.husky/pre-commit` 调用 `lint-staged`):
+1. `setup`（安装依赖、`wxt prepare`）
+2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
+3. `build`（仅当步骤 2 全部成功时执行）
 
-- 代码文件 (`*.{ts,tsx,js,jsx,mjs}`): `eslint --fix --max-warnings=0 --no-warn-ignored` → `prettier --write`
-- 其他文件 (`*.{json,css,scss,md}`): `prettier --write`
+Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交）：
 
-提交前确保 `lint` 和 `typecheck` 通过。
+1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
+2. 同一代码文件：运行 `prettier --write`
+3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
 
 ## WXT 生成文件
 
@@ -54,10 +57,12 @@ i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功
 ## 关键架构决策
 
 **路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
-渲染对应组件。支持三种渲染模式: popup / sidepanel / tab。每种模式有独立的路由和可见页面配置。
+渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
+每种模式有独立的路由和可见页面配置。
 
-**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义。使用 `utils/chromeStorage.ts` 及其
-Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
+**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
+使用 `utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
+修改 StorageSchema 时，必须在 `utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
 
 **通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
 
@@ -89,6 +94,7 @@ Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照
   - `i18n/locales/{zh,en}/{功能名}.json` - 各功能独立翻译（如 timestamp.json, storageCleaner.json 等）
 - 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json` 及对应功能独立 JSON
 - 使用 `useLazyTranslation` hook 加载功能独立翻译，返回 `ns:key` 格式
+- 回退策略: 当翻译 key 在目标语言缺失时，回退到默认语言 `zh`；若默认语言也缺失，返回占位格式 `namespace:key` 并在开发模式下记录 warning
 
 ## 新功能开发清单
 

From e5ae802ab21054abb6bfac230d1b3951db7bc10a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 25 May 2026 20:11:39 +0800
Subject: [PATCH 04/71] fix: remove unnecessary animations from StorageCleaner
 page

- Remove entrance animations (animate-in, fade-in, zoom-in) from all components
- Remove scale effect (active:scale-[0.99]) from clean button
- Remove transition effects (transition-all, transition-colors) from OptionItem, StorageOptionsGrid, AutoRefreshToggle
- Remove bouncing animation from error icon
- Remove pulsing animation from warning banner
- Keep animate-spin on button loading spinner as functional indicator
---
 pages/StorageCleaner/AutoRefreshToggle.tsx     | 2 +-
 pages/StorageCleaner/CleaningResult.tsx        | 5 +----
 pages/StorageCleaner/ErrorDisplay.tsx          | 4 ++--
 pages/StorageCleaner/OptionItem.tsx            | 4 ++--
 pages/StorageCleaner/StorageCleanerConfirm.tsx | 3 +--
 pages/StorageCleaner/StorageOptionsGrid.tsx    | 4 ++--
 pages/StorageCleaner/index.tsx                 | 8 ++++----
 7 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/pages/StorageCleaner/AutoRefreshToggle.tsx b/pages/StorageCleaner/AutoRefreshToggle.tsx
index a062723..dec8af4 100644
--- a/pages/StorageCleaner/AutoRefreshToggle.tsx
+++ b/pages/StorageCleaner/AutoRefreshToggle.tsx
@@ -48,7 +48,7 @@ export default function AutoRefreshToggle({
   return (
     <div
       className={cn(
-        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring flex justify-between items-center',
+        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
         className,
       )}
       {...props}
diff --git a/pages/StorageCleaner/CleaningResult.tsx b/pages/StorageCleaner/CleaningResult.tsx
index b9e4da1..d37c9e6 100644
--- a/pages/StorageCleaner/CleaningResult.tsx
+++ b/pages/StorageCleaner/CleaningResult.tsx
@@ -17,10 +17,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
   const isSuccess = result.success;
 
   return (
-    <div
-      className={cn('animate-in fade-in slide-in-from-top-1 duration-200 w-full', className)}
-      {...props}
-    >
+    <div className={cn('w-full', className)} {...props}>
       {/* 2. 彻底重构容器类名结构：
         - 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
         - 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
diff --git a/pages/StorageCleaner/ErrorDisplay.tsx b/pages/StorageCleaner/ErrorDisplay.tsx
index 4bf067d..e653ada 100644
--- a/pages/StorageCleaner/ErrorDisplay.tsx
+++ b/pages/StorageCleaner/ErrorDisplay.tsx
@@ -13,7 +13,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
     // 1. 精简层级：单层外壳直接搞定居中、响应式高度与外部类名扩展
     <div
       className={cn(
-        'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center animate-in fade-in zoom-in-95 duration-200',
+        'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
         className,
       )}
       {...props}
@@ -25,7 +25,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
       */}
       <div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
         {/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */}
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0 animate-bounce [animation-duration:2s]">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
           <AlertCircle className="h-5 w-5" />
         </div>
 
diff --git a/pages/StorageCleaner/OptionItem.tsx b/pages/StorageCleaner/OptionItem.tsx
index ba82ff5..db4b12d 100644
--- a/pages/StorageCleaner/OptionItem.tsx
+++ b/pages/StorageCleaner/OptionItem.tsx
@@ -29,7 +29,7 @@ export default function OptionItem({
       // 3. 跨越级交互升级：将外部容器升级为一个高度敏感的可点击 Tab 热区
       onClick={onChange}
       className={cn(
-        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none transition-all duration-200',
+        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
         // 4. 彻底抛弃硬编码黄底：
         // - 选中时：使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
         // - 未选中时：保持透明 border-transparent，悬停呈现 bg-muted。
@@ -45,7 +45,7 @@ export default function OptionItem({
       <div className="flex-1 min-w-0 mr-4">
         <span
           className={cn(
-            'block text-xs font-semibold leading-tight truncate transition-colors',
+            'block text-xs font-semibold leading-tight truncate',
             checked ? 'text-foreground font-bold' : 'text-foreground/80',
           )}
         >
diff --git a/pages/StorageCleaner/StorageCleanerConfirm.tsx b/pages/StorageCleaner/StorageCleanerConfirm.tsx
index 1d736a4..190b405 100644
--- a/pages/StorageCleaner/StorageCleanerConfirm.tsx
+++ b/pages/StorageCleaner/StorageCleanerConfirm.tsx
@@ -42,7 +42,6 @@ export function StorageCleanerConfirm({
       <DialogContent
         className={cn(
           'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
-          'animate-in fade-in-50 zoom-in-95 duration-200',
         )}
       >
         {/* 头部标题区域 */}
@@ -72,7 +71,7 @@ export function StorageCleanerConfirm({
           </div>
 
           {/* 风险警告横幅 */}
-          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px] animate-pulse [animation-duration:3s]">
+          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
             <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
             <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
               {t('storageCleaner:irreversible')}
diff --git a/pages/StorageCleaner/StorageOptionsGrid.tsx b/pages/StorageCleaner/StorageOptionsGrid.tsx
index 4e84d6f..699913d 100644
--- a/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -46,7 +46,7 @@ export default function StorageOptionsGrid({
   return (
     <div
       className={cn(
-        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden transition-all',
+        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ export default function StorageOptionsGrid({
       */}
       <div
         onClick={handleToggleAll}
-        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 transition-colors cursor-pointer select-none"
+        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
       >
         <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
           {t('storageCleaner:selectAll')}
diff --git a/pages/StorageCleaner/index.tsx b/pages/StorageCleaner/index.tsx
index b932a00..8cf82af 100644
--- a/pages/StorageCleaner/index.tsx
+++ b/pages/StorageCleaner/index.tsx
@@ -33,8 +33,8 @@ export default function Index() {
 
   if (isInitializing) {
     return (
-      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full animate-in fade-in duration-200">
-        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground/80" />
+      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
+        <Loader2 className="h-6 w-6 text-muted-foreground/80" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
           正在读取站点数据...
         </span>
@@ -47,7 +47,7 @@ export default function Index() {
   }
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-3.5 animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-3.5">
       <StorageOptionsGrid
         options={options}
         sizes={sizes}
@@ -67,7 +67,7 @@ export default function Index() {
         size="default"
         onClick={() => setShowConfirm(true)}
         disabled={isButtonDisabled}
-        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide transition-all active:scale-[0.99]"
+        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
       >
         {loading ? (
           <>

From af2262d2c9da6cdabe7bbc7a4970f77954dd116d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 25 May 2026 20:15:23 +0800
Subject: [PATCH 05/71] fix: remove unnecessary animations from
 RightClickRestorer page

---
 pages/RightClickRestorer/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/RightClickRestorer/index.tsx b/pages/RightClickRestorer/index.tsx
index 31194c2..bc1cbae 100644
--- a/pages/RightClickRestorer/index.tsx
+++ b/pages/RightClickRestorer/index.tsx
@@ -11,7 +11,7 @@ export default function RightClickRestorerPage() {
 
   if (isLoading) {
     return (
-      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full animate-in fade-in duration-200">
+      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
           {t('rightClickRestorer:loading')}
         </span>
@@ -20,9 +20,9 @@ export default function RightClickRestorerPage() {
   }
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-4">
       {/* Current Domain */}
-      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden transition-all">
+      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
         <div className="p-4">
           <Label className="text-sm font-medium">{t('rightClickRestorer:currentDomain')}</Label>
           <div className="mt-2 flex items-center justify-between gap-2">
@@ -50,7 +50,7 @@ export default function RightClickRestorerPage() {
       </div>
 
       {/* Unlock Action */}
-      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden transition-all">
+      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
         <div className="p-4 space-y-3">
           {isUnsupported ? (
             <>

From 0f3b6c4cd845f225f849519339ff48427760a0bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 25 May 2026 20:29:12 +0800
Subject: [PATCH 06/71] fix: remove all unnecessary animations from all pages

- Remove dead code animations (animate-in, fade-in, slide-in, zoom-in, shake) from tailwindcss-animate plugin (not installed)
- Remove decorative transition effects (transition-all, transition-colors) from all page components
- Remove scale effects (active:scale-95) from buttons
- Remove bounce animations (animate-bounce) from icons
- Keep functional animate-spin on loading spinners as they provide essential loading feedback

Affected pages: Dashboard, Timestamp, Jwt, JsonTools, Base64Converter, HtmlToMarkdown, MarkdownToHtml, QrCode, TextStatistics
---
 pages/Base64Converter/Base64ConverterSection.tsx | 10 ++++------
 pages/Base64Converter/FileMode.tsx               |  6 +++---
 pages/Base64Converter/ImageMode.tsx              |  8 ++++----
 pages/Base64Converter/TextMode.tsx               |  8 ++++----
 pages/Base64Converter/index.tsx                  |  2 +-
 pages/Dashboard/ToolCard.tsx                     |  5 ++---
 pages/Dashboard/index.tsx                        |  2 +-
 pages/HtmlToMarkdown/index.tsx                   | 10 +++++-----
 pages/JsonTools/DiffNavigator.tsx                | 10 +++++-----
 pages/JsonTools/DiffResult.tsx                   |  2 +-
 pages/JsonTools/JsonConvertSection.tsx           |  7 ++-----
 pages/JsonTools/JsonFormatSection.tsx            |  6 +++---
 pages/JsonTools/JsonTree.tsx                     |  4 ++--
 pages/JsonTools/index.tsx                        |  4 ++--
 pages/Jwt/index.tsx                              | 10 ++++------
 pages/MarkdownToHtml/index.tsx                   | 14 +++++++-------
 pages/QrCode/components/GeneratePanel.tsx        |  4 ++--
 pages/QrCode/components/ParsePanel.tsx           |  4 ++--
 pages/QrCode/index.tsx                           |  6 +++---
 pages/TextStatistics/index.tsx                   |  3 +--
 pages/Timestamp/LiveClock.tsx                    |  2 +-
 pages/Timestamp/ResultView.tsx                   | 12 +++---------
 pages/Timestamp/index.tsx                        |  8 ++------
 23 files changed, 64 insertions(+), 83 deletions(-)

diff --git a/pages/Base64Converter/Base64ConverterSection.tsx b/pages/Base64Converter/Base64ConverterSection.tsx
index 3cc0d4e..8639af9 100644
--- a/pages/Base64Converter/Base64ConverterSection.tsx
+++ b/pages/Base64Converter/Base64ConverterSection.tsx
@@ -57,7 +57,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+    <div className="w-full flex flex-col space-y-4">
       <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 transition-all duration-300',
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer',
               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 animate-in fade-in duration-200">
+              <div className="flex flex-col items-center gap-1.5 text-center w-full">
                 {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,9 +117,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                     />
                   </div>
                 )}
-                <Upload
-                  className={cn('w-8 h-8 text-primary', mode === 'file' && 'animate-bounce')}
-                />
+                <Upload className={cn('w-8 h-8 text-primary')} />
                 <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
                   {info.name}
                 </span>
diff --git a/pages/Base64Converter/FileMode.tsx b/pages/Base64Converter/FileMode.tsx
index c331fac..d40fd41 100644
--- a/pages/Base64Converter/FileMode.tsx
+++ b/pages/Base64Converter/FileMode.tsx
@@ -45,7 +45,7 @@ export default function FileMode() {
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+    <div className="w-full flex flex-col space-y-4">
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
           value={direction}
@@ -79,7 +79,7 @@ export default function FileMode() {
             }}
             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',
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer',
               isDragging
                 ? 'border-primary bg-primary/10'
                 : info
@@ -100,7 +100,7 @@ export default function FileMode() {
               <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" />
+                <Upload className="w-8 h-8 text-primary" />
                 <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
                   {info.name}
                 </span>
diff --git a/pages/Base64Converter/ImageMode.tsx b/pages/Base64Converter/ImageMode.tsx
index a61285a..eafb0c3 100644
--- a/pages/Base64Converter/ImageMode.tsx
+++ b/pages/Base64Converter/ImageMode.tsx
@@ -52,7 +52,7 @@ export default function ImageMode() {
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+    <div className="w-full flex flex-col space-y-4">
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
           value={direction}
@@ -82,7 +82,7 @@ export default function ImageMode() {
             }}
             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',
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer',
               isDragging
                 ? 'border-primary bg-primary/10'
                 : info
@@ -103,7 +103,7 @@ export default function ImageMode() {
             {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">
+              <div className="flex flex-col items-center gap-1.5 text-center 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
@@ -233,7 +233,7 @@ export default function ImageMode() {
             onClear={resetAll}
           />
           {decoded && (
-            <div className="animate-in slide-in-from-bottom-2 duration-300">
+            <div>
               <DecodeResultPaper
                 title={t('decodedImageOutput')}
                 mimeType={decoded.mimeType}
diff --git a/pages/Base64Converter/TextMode.tsx b/pages/Base64Converter/TextMode.tsx
index 3c34e72..015092a 100644
--- a/pages/Base64Converter/TextMode.tsx
+++ b/pages/Base64Converter/TextMode.tsx
@@ -93,7 +93,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+    <div className="w-full flex flex-col space-y-4">
       {/* 受控方向切流中枢 */}
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
@@ -125,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 animate-in slide-in-from-top-1 duration-200">
+        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
           <span className="text-xs font-semibold text-primary tracking-tight">
             {t('imageDataUriHint')}
           </span>
@@ -134,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 transition-colors 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 px-2.5"
           >
             {t('switchToImageMode')}
           </Button>
@@ -143,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 animate-in slide-in-from-bottom-2 duration-300">
+        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
           <div className="flex justify-between items-center select-none">
             <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
               {outputLabel}
diff --git a/pages/Base64Converter/index.tsx b/pages/Base64Converter/index.tsx
index 5b53d44..dadb075 100644
--- a/pages/Base64Converter/index.tsx
+++ b/pages/Base64Converter/index.tsx
@@ -20,7 +20,7 @@ export default function Index() {
   );
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 min-h-[520px] select-none animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-4 min-h-[520px] select-none">
       <SwitchButtonGroup
         value={pageMode}
         options={[
diff --git a/pages/Dashboard/ToolCard.tsx b/pages/Dashboard/ToolCard.tsx
index f2b2fab..08b4819 100644
--- a/pages/Dashboard/ToolCard.tsx
+++ b/pages/Dashboard/ToolCard.tsx
@@ -46,7 +46,6 @@ export default function ToolCard({
       */
       className={cn(
         'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
-        'transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
         'hover:bg-muted/30',
         'hover:border-[rgba(var(--tool-color),0.45)]',
         '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)]',
@@ -60,7 +59,7 @@ export default function ToolCard({
           {/* 左侧圆形图标容器 */}
           <div
             className={cn(
-              'flex items-center justify-center w-10 h-10 rounded-xl shrink-0 transition-colors duration-300',
+              'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
               'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
               'text-[rgb(var(--tool-color))]',
             )}
@@ -82,7 +81,7 @@ export default function ToolCard({
         </div>
 
         {/* 右侧指示小箭头 */}
-        <div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 transition-all duration-300 ease-in-out group-hover:translate-x-0.5">
+        <div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
           <ChevronRight className="h-4 w-4" />
         </div>
 
diff --git a/pages/Dashboard/index.tsx b/pages/Dashboard/index.tsx
index 2a413ab..8479dda 100644
--- a/pages/Dashboard/index.tsx
+++ b/pages/Dashboard/index.tsx
@@ -16,7 +16,7 @@ export default function DashboardPage() {
     <div
       className={cn(
         'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5 p-3.5 w-full h-auto',
-        'animate-in fade-in duration-300 select-none',
+        'select-none',
       )}
     >
       {pageOrder.map((key) => {
diff --git a/pages/HtmlToMarkdown/index.tsx b/pages/HtmlToMarkdown/index.tsx
index aab869b..f860989 100644
--- a/pages/HtmlToMarkdown/index.tsx
+++ b/pages/HtmlToMarkdown/index.tsx
@@ -49,7 +49,7 @@ export default function HtmlToMarkdownPage() {
       - 彻底清除多余的 container max-w-7xl 这种网页大边距，
       - 统一收拢为我们先前在 Dashboard 页、JSON 工具箱制定的 p-4 space-y-4 标准极客桌面规格。
     */
-    <div className="p-4 w-full flex flex-col space-y-4 select-none animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
       <div className="flex flex-col gap-4">
         {/* 工具栏集成区 */}
         <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
@@ -72,7 +72,7 @@ export default function HtmlToMarkdownPage() {
               size="sm"
               onClick={handleDownload}
               disabled={!result.markdown}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 transition-all"
+              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
             >
               <Download className="h-3.5 w-3.5" />
               {t('download')}
@@ -83,7 +83,7 @@ export default function HtmlToMarkdownPage() {
               variant="outline"
               size="sm"
               onClick={handleClear}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60 transition-all"
+              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
             >
               <Trash2 className="h-3.5 w-3.5" />
               {t('clear')}
@@ -95,7 +95,7 @@ export default function HtmlToMarkdownPage() {
           - 💡 核心修复点：将硬编码的 bg-red-50 实色，完美超进化为系统的全自适应透明色变体
         */}
         {error && (
-          <div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide animate-in shake duration-300">
+          <div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide">
             {error}
           </div>
         )}
@@ -114,7 +114,7 @@ export default function HtmlToMarkdownPage() {
               - 只要用户用鼠标点击了内部的 textarea，外层整块精巧的圆角大边框会一帧内亮起 primary 系统的深色呼吸发光环，
               - 这种“全外包裹层框聚焦”的体验极大模仿了本地原生 IDE 的硬核专业体验！
             */
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col transition-all duration-200 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
+            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
               {/* 卡片头部：改用标准的灰色 bg-muted/50 */}
               <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
                 <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
diff --git a/pages/JsonTools/DiffNavigator.tsx b/pages/JsonTools/DiffNavigator.tsx
index 353b3f4..2ee84f3 100644
--- a/pages/JsonTools/DiffNavigator.tsx
+++ b/pages/JsonTools/DiffNavigator.tsx
@@ -30,7 +30,7 @@ export default function DiffNavigator({
     return (
       <div
         className={cn(
-          'flex items-center justify-center gap-3 px-4 py-2 rounded-lg border border-border bg-muted/30 select-none animate-in fade-in duration-200',
+          'flex items-center justify-center gap-3 px-4 py-2 rounded-lg border border-border bg-muted/30 select-none',
           className,
         )}
         {...props}
@@ -60,9 +60,9 @@ export default function DiffNavigator({
         aria-label={t('jsonDiff:previousDiff')}
         onClick={onPrev}
         className={cn(
-          'p-1 rounded-md text-muted-foreground transition-all hover:bg-accent hover:text-foreground',
+          'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-          'disabled:pointer-events-none disabled:opacity-30 active:scale-95', // 4. 边界拦截：触顶时优雅淡化并锁死点击
+          'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截：触顶时优雅淡化并锁死点击
         )}
       >
         <ChevronLeft className="h-4 w-4" />
@@ -81,9 +81,9 @@ export default function DiffNavigator({
         aria-label={t('jsonDiff:nextDiff')}
         onClick={onNext}
         className={cn(
-          'p-1 rounded-md text-muted-foreground transition-all hover:bg-accent hover:text-foreground',
+          'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-          'disabled:pointer-events-none disabled:opacity-30 active:scale-95', // 4. 边界拦截：触底时优雅淡化并锁死点击
+          'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截：触底时优雅淡化并锁死点击
         )}
       >
         <ChevronRight className="h-4 w-4" />
diff --git a/pages/JsonTools/DiffResult.tsx b/pages/JsonTools/DiffResult.tsx
index e254446..08ec54b 100644
--- a/pages/JsonTools/DiffResult.tsx
+++ b/pages/JsonTools/DiffResult.tsx
@@ -197,7 +197,7 @@ const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) =
   return (
     <div
       className={cn(
-        'flex items-start w-full font-mono py-0.5 select-text group transition-colors',
+        'flex items-start w-full font-mono py-0.5 select-text group',
         currentTheme.bg,
         currentTheme.text,
         // 4. 高亮定位条：不再使用生硬的蓝圆环，改为现代编辑器的“侧边左高亮带”设计，质感直接拉满
diff --git a/pages/JsonTools/JsonConvertSection.tsx b/pages/JsonTools/JsonConvertSection.tsx
index 0a522a5..8abd951 100644
--- a/pages/JsonTools/JsonConvertSection.tsx
+++ b/pages/JsonTools/JsonConvertSection.tsx
@@ -74,10 +74,7 @@ export default function JsonConvertSection({
       : null;
 
   return (
-    <div
-      className={cn('w-full flex flex-col gap-4 animate-in fade-in duration-300', className)}
-      {...props}
-    >
+    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
       {/* 输入区 */}
       <TextInputArea
         placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
@@ -93,7 +90,7 @@ export default function JsonConvertSection({
 
       {/* 4. 结果展示或状态引导卡片区 */}
       {result && result.output ? (
-        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden animate-in slide-in-from-bottom-2 duration-300">
+        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
           {/* 结果栏精致头部 */}
           <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
             <div className="flex gap-4 items-center">
diff --git a/pages/JsonTools/JsonFormatSection.tsx b/pages/JsonTools/JsonFormatSection.tsx
index e1f3aa0..bc4b091 100644
--- a/pages/JsonTools/JsonFormatSection.tsx
+++ b/pages/JsonTools/JsonFormatSection.tsx
@@ -62,7 +62,7 @@ export default function JsonFormatSection() {
       : null;
 
   return (
-    <div className="w-full flex flex-col gap-4 animate-in fade-in duration-300">
+    <div className="w-full flex flex-col gap-4">
       {/* 工具控制栏 */}
       <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
         <div className="flex gap-4 items-center w-full">
@@ -95,7 +95,7 @@ export default function JsonFormatSection() {
             />
             <Label
               htmlFor="sort-keys-checkbox"
-              className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground transition-colors"
+              className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
             >
               {t('jsonFormat:sortKeys')}
             </Label>
@@ -118,7 +118,7 @@ export default function JsonFormatSection() {
 
       {/* 格式化结果流面板展示 */}
       {result && result.formatted ? (
-        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden animate-in slide-in-from-bottom-2 duration-300">
+        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
           {/* 结果栏头部 */}
           <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
             <div className="flex gap-4 items-center">
diff --git a/pages/JsonTools/JsonTree.tsx b/pages/JsonTools/JsonTree.tsx
index fcd3f0d..597791d 100644
--- a/pages/JsonTools/JsonTree.tsx
+++ b/pages/JsonTools/JsonTree.tsx
@@ -135,7 +135,7 @@ const NodeRow = React.memo(
           <div
             onClick={() => setOverride(expanded ? 'closed' : 'open')}
             className={cn(
-              'group flex items-center gap-1 py-0.5 pr-2 text-xs font-mono select-none cursor-pointer rounded-sm transition-colors w-full h-[22px] leading-relaxed',
+              'group flex items-center gap-1 py-0.5 pr-2 text-xs font-mono select-none cursor-pointer rounded-sm w-full h-[22px] leading-relaxed',
               theme.bg,
               isActive &&
                 'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 rounded-none ring-0',
@@ -207,7 +207,7 @@ const NodeRow = React.memo(
       <div
         ref={rowRef}
         className={cn(
-          'flex items-center gap-1 py-0.5 pr-2 font-mono text-xs w-full h-[22px] leading-relaxed rounded-sm transition-colors',
+          'flex items-center gap-1 py-0.5 pr-2 font-mono text-xs w-full h-[22px] leading-relaxed rounded-sm',
           theme.bg,
           isActive &&
             'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 rounded-none ring-0',
diff --git a/pages/JsonTools/index.tsx b/pages/JsonTools/index.tsx
index e808363..c5f7079 100644
--- a/pages/JsonTools/index.tsx
+++ b/pages/JsonTools/index.tsx
@@ -113,7 +113,7 @@ export default function Index() {
   }, []);
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
       <SwitchButtonGroup
         value={pageMode}
         onChange={(v: PageMode) => setPageMode(v)}
@@ -129,7 +129,7 @@ export default function Index() {
       />
 
       {pageMode === 'diff' ? (
-        <div className="flex flex-col space-y-4 animate-in fade-in duration-200">
+        <div className="flex flex-col space-y-4">
           <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
             <SwitchButtonGroup
               value={viewMode}
diff --git a/pages/Jwt/index.tsx b/pages/Jwt/index.tsx
index 189c0c7..4c4604b 100644
--- a/pages/Jwt/index.tsx
+++ b/pages/Jwt/index.tsx
@@ -17,9 +17,7 @@ interface SectionProps {
 const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
   const { t } = useLazyTranslation('jwt');
   return (
-    <div
-      className={cn('p-4 rounded-xl border border-solid transition-colors', bgClass, borderClass)}
-    >
+    <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
       <div className="flex justify-between items-center mb-2 select-none">
         <span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
           {title}
@@ -70,7 +68,7 @@ export default function Index() {
   }, [debouncedInput]);
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 animate-in fade-in duration-300 select-none">
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
       <div className="flex flex-col gap-4">
         {/* 输入终端 */}
         <TextInputArea
@@ -90,7 +88,7 @@ export default function Index() {
 
         {/* 解码看板结果展现 */}
         {result && !result.error && (
-          <div className="flex flex-col gap-4 animate-in slide-in-from-bottom-2 duration-300">
+          <div className="flex flex-col gap-4">
             {/* Header 分区：完美致敬 JWT.io 的鲜艳色彩，同时实现黑夜暗化自适应 */}
             <Section
               title={t('jwt:headerTitle')}
@@ -110,7 +108,7 @@ export default function Index() {
             />
 
             {/* Signature 签名区：完全对齐标准的 shadcn 骨架阶度 */}
-            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm transition-colors">
+            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
               <div className="flex justify-between items-center mb-2">
                 <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
                   {t('jwt:signatureTitle')}
diff --git a/pages/MarkdownToHtml/index.tsx b/pages/MarkdownToHtml/index.tsx
index b27cfa3..a43eda3 100644
--- a/pages/MarkdownToHtml/index.tsx
+++ b/pages/MarkdownToHtml/index.tsx
@@ -175,7 +175,7 @@ export default function MarkdownToHtmlPage() {
   const showPreview = previewMode !== 'html';
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 select-none animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
       <div className="flex flex-col space-y-4">
         {/* 工具集成控制中枢 */}
         <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
@@ -196,7 +196,7 @@ export default function MarkdownToHtmlPage() {
               variant="outline"
               size="sm"
               onClick={handleClear}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60 transition-all"
+              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
             >
               <Trash2 className="h-3.5 w-3.5" />
               {t('clear')}
@@ -206,7 +206,7 @@ export default function MarkdownToHtmlPage() {
               size="sm"
               onClick={handlePrint}
               disabled={!result.html}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 transition-all"
+              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
             >
               <Printer className="h-3.5 w-3.5" />
               {t('print')}
@@ -216,7 +216,7 @@ export default function MarkdownToHtmlPage() {
               size="sm"
               onClick={handleDownload}
               disabled={!result.html}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm active:scale-95 transition-all"
+              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
             >
               <Download className="h-3.5 w-3.5" />
               {t('download')}
@@ -228,7 +228,7 @@ export default function MarkdownToHtmlPage() {
         {error && (
           <div
             role="alert"
-            className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide animate-in shake duration-300"
+            className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide"
           >
             {error}
           </div>
@@ -243,7 +243,7 @@ export default function MarkdownToHtmlPage() {
         >
           {/* Markdown 输入翼终端 */}
           {showInput && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col transition-all duration-200 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring animate-in fade-in">
+            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
               <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
                 <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
                   {t('inputLabel')}
@@ -263,7 +263,7 @@ export default function MarkdownToHtmlPage() {
 
           {/* 实时 HTML/Iframe 预览翼终端 */}
           {showPreview && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col animate-in fade-in">
+            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
               <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
                 <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
                   {(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
diff --git a/pages/QrCode/components/GeneratePanel.tsx b/pages/QrCode/components/GeneratePanel.tsx
index f3eceec..e9f5243 100644
--- a/pages/QrCode/components/GeneratePanel.tsx
+++ b/pages/QrCode/components/GeneratePanel.tsx
@@ -10,11 +10,11 @@ export default function GeneratePanel() {
   const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5 animate-in fade-in duration-300">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
       {/* 左翼：高性能受控输入翼终端 */}
       <div
         className={cn(
-          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4 transition-all duration-200',
+          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
           'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
         )}
       >
diff --git a/pages/QrCode/components/ParsePanel.tsx b/pages/QrCode/components/ParsePanel.tsx
index 80a138f..cd97651 100644
--- a/pages/QrCode/components/ParsePanel.tsx
+++ b/pages/QrCode/components/ParsePanel.tsx
@@ -61,7 +61,7 @@ export default function ParsePanel() {
     /* 💡 统一大视觉轴：
        - 追加 p-0.5 微隔离，配合 gap-6 建立与生成面板（GeneratePanel）绝对像素对齐的网格天平。
     */
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5 animate-in fade-in duration-300">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
       {/* 左翼：图片接收/拖拽/剪贴板上传终端 */}
       <div className="flex flex-col h-full">
         <ImageUploader
@@ -78,7 +78,7 @@ export default function ParsePanel() {
       {/* 右翼：高阶解析出码只读终端 */}
       <div
         className={cn(
-          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4 transition-all duration-200',
+          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
           // 💡 视觉对称增强：加入相同的聚焦变量环联动，使双翼权重达成完美绝对平衡
           'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
         )}
diff --git a/pages/QrCode/index.tsx b/pages/QrCode/index.tsx
index cd2713b..4c8d3ca 100644
--- a/pages/QrCode/index.tsx
+++ b/pages/QrCode/index.tsx
@@ -23,7 +23,7 @@ export default function Index() {
          - 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁，开启标准的 w-full 全自适应包裹。
          - 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4，接管系统级重排！
       */}
-      <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none animate-in fade-in duration-300">
+      <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
         {/* 流式中央控制切流卡：注入 sm 断点防御，防范单栏状态下发生变形 */}
         <div className="w-full sm:w-fit pt-0.5">
           <SwitchButtonGroup
@@ -40,11 +40,11 @@ export default function Index() {
         */}
         <div className="w-full pt-1.5">
           {qrCode.mode === 'generate' ? (
-            <div className="animate-in fade-in duration-200">
+            <div>
               <GeneratePanel />
             </div>
           ) : (
-            <div className="animate-in fade-in duration-200">
+            <div>
               <ParsePanel />
             </div>
           )}
diff --git a/pages/TextStatistics/index.tsx b/pages/TextStatistics/index.tsx
index 8dd5b5f..7d063c6 100644
--- a/pages/TextStatistics/index.tsx
+++ b/pages/TextStatistics/index.tsx
@@ -26,7 +26,7 @@ export default function Index() {
   ];
 
   return (
-    <div className="p-4 w-full space-y-4 animate-in fade-in duration-300">
+    <div className="p-4 w-full space-y-4">
       {/* 文本输入区域 */}
       <TextInputArea
         value={text}
@@ -45,7 +45,6 @@ export default function Index() {
             key={item.label}
             className={cn(
               'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
-              'transition-all duration-200 ease-out',
               'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
             )}
           >
diff --git a/pages/Timestamp/LiveClock.tsx b/pages/Timestamp/LiveClock.tsx
index 9a651dc..a809183 100644
--- a/pages/Timestamp/LiveClock.tsx
+++ b/pages/Timestamp/LiveClock.tsx
@@ -80,7 +80,7 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
         type="button"
         onClick={handleUseNow}
         title={t('timestamp:useNowTooltip')}
-        className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-all hover:bg-accent hover:text-foreground active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
       >
         <Clock className="w-3.5 h-3.5" />
       </button>
diff --git a/pages/Timestamp/ResultView.tsx b/pages/Timestamp/ResultView.tsx
index 582b169..536d138 100644
--- a/pages/Timestamp/ResultView.tsx
+++ b/pages/Timestamp/ResultView.tsx
@@ -50,7 +50,7 @@ const ResultView = React.memo(
       return (
         <div
           className={cn(
-            'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px] animate-in fade-in duration-200',
+            'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
             className,
           )}
           {...props}
@@ -61,13 +61,7 @@ const ResultView = React.memo(
     }
 
     return (
-      <div
-        className={cn(
-          'animate-in fade-in slide-in-from-bottom-2 duration-300 flex flex-col w-full',
-          className,
-        )}
-        {...props}
-      >
+      <div className={cn('flex flex-col w-full', className)} {...props}>
         {/* 顶部小标签 */}
         <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
           {t('timestamp:resultLabel')}
@@ -78,7 +72,7 @@ const ResultView = React.memo(
           对齐 shadcn 官方卡片风格，使用 bg-card、border-border 构筑多层级阴影。
           核心数值直接拉粗为 text-foreground (在黑夜模式下会自动转为大气的纯白，完美避开刺眼强光)
         */}
-        <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring transition-all">
+        <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
           <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
             {result}
           </span>
diff --git a/pages/Timestamp/index.tsx b/pages/Timestamp/index.tsx
index 7999c6d..d362db2 100644
--- a/pages/Timestamp/index.tsx
+++ b/pages/Timestamp/index.tsx
@@ -70,17 +70,13 @@ export default function Index() {
                   value={input}
                   onChange={(e: { target: { value: string } }) => setInput(e.target.value)}
                   className={cn(
-                    'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background transition-all',
+                    'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
                     error && 'border-destructive focus-visible:ring-destructive',
                   )}
                 />
 
                 {/* 错误自愈提示 */}
-                {error && (
-                  <p className="text-destructive text-xs font-medium px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
-                    {error}
-                  </p>
-                )}
+                {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
               </div>
 
               {/* 核心配置群：单位切换 + 时区选择紧凑横排 */}

From c61b59928705833585a0a48e6e7881a4e1d3ebc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 11:54:21 +0800
Subject: [PATCH 07/71] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E6=96=87=E6=A1=A3=EF=BC=88copilot-instructions?=
 =?UTF-8?q?=E3=80=81=E7=BC=96=E7=A0=81=E8=A7=84=E8=8C=83=E3=80=81=E5=90=84?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=20README=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 .github/copilot-instructions.md：Copilot 指令文件，涵盖构建命令、CI 流水线、项目架构、关键规范
- 新增 .github/CODING_STANDARDS.md：完整的代码编写规范文档（TypeScript、React、样式、错误处理、命名、测试、Hook、i18n、存储等 12 个章节）
- 新增 11 个目录的 README.md：components、components/ui、config、entrypoints、i18n、lib、pages、providers、public、src、types、utils
- 更新 AGENTS.md：补充页面组件模式说明和 components/ui 目录

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/CODING_STANDARDS.md     | 821 ++++++++++++++++++++++++++++++++
 .github/copilot-instructions.md | 141 ++++++
 AGENTS.md                       |  45 +-
 components/README.md            |  27 ++
 components/ui/README.md         |  40 ++
 config/README.md                |  44 ++
 entrypoints/README.md           |  51 ++
 i18n/README.md                  |  61 +++
 lib/README.md                   |  26 +
 pages/README.md                 | 142 ++++++
 providers/README.md             |  63 +++
 public/README.md                |  20 +
 src/README.md                   |  24 +
 types/README.md                 |  42 ++
 utils/README.md                 |  42 ++
 15 files changed, 1575 insertions(+), 14 deletions(-)
 create mode 100644 .github/CODING_STANDARDS.md
 create mode 100644 .github/copilot-instructions.md
 create mode 100644 components/README.md
 create mode 100644 components/ui/README.md
 create mode 100644 config/README.md
 create mode 100644 entrypoints/README.md
 create mode 100644 i18n/README.md
 create mode 100644 lib/README.md
 create mode 100644 pages/README.md
 create mode 100644 providers/README.md
 create mode 100644 public/README.md
 create mode 100644 src/README.md
 create mode 100644 types/README.md
 create mode 100644 utils/README.md

diff --git a/.github/CODING_STANDARDS.md b/.github/CODING_STANDARDS.md
new file mode 100644
index 0000000..8e36816
--- /dev/null
+++ b/.github/CODING_STANDARDS.md
@@ -0,0 +1,821 @@
+# 代码编写规范
+
+本文档定义了 Testing Tools 浏览器扩展项目的编码规范和最佳实践。所有代码贡献者应遵循这些规范以保持代码库的一致性和可维护性。
+
+## 1. TypeScript 规范
+
+### 1.1 类型定义：`interface` vs `type`
+
+- **`interface`**：用于组件 Props、对象结构、Context 类型等可扩展结构
+- **`type`**：用于联合类型、工具类型、不可扩展的类型别名
+
+```typescript
+// ✅ interface — 组件 Props / 对象结构
+export interface GlobalSnackbarProps {
+  message: string;
+  open: boolean;
+  onClose: () => void;
+  severity?: SnackbarSeverity;
+}
+
+// ✅ interface — 继承 HTML 属性
+interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
+  unit: UnitType;
+  onUseNow: (val: number) => void;
+}
+
+// ✅ type — 联合类型
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type PageType = 'dashboard' | 'timestamp' | 'storageCleaner' | ...;
+
+// ✅ type — 工具类型
+export type ResolvedThemeMode = 'light' | 'dark';
+```
+
+### 1.2 泛型使用
+
+广泛使用泛型约束，结合 `extends` 进行类型守卫：
+
+```typescript
+// ✅ 泛型 + extends 约束
+export interface SwitchOption<T extends string | number = string> {
+  value: T;
+  label: React.ReactNode;
+}
+
+// ✅ 泛型 + StorageSchema 键约束
+async get<K extends keyof StorageSchema>(
+  key: K,
+  defaultValue?: StorageSchema[K],
+): Promise<StorageSchema[K] | undefined> { ... }
+
+// ✅ 泛型 Hook
+export const useStorageState = <K extends keyof StorageSchema>(
+  key: K,
+  defaultValue: StorageSchema[K],
+  validator?: (val: unknown) => val is StorageSchema[K],
+) => { ... }
+```
+
+### 1.3 类型守卫
+
+优先使用类型守卫函数（`val is Type` 谓词），避免 `as` 强转：
+
+```typescript
+// ✅ 类型守卫谓词函数
+const isValidMode = (v: unknown): v is ThemeMode => VALID_MODES.includes(v as ThemeMode);
+
+const isValidPage = (page: unknown): page is PageType => {
+  return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
+};
+
+// ✅ 安全的 as 断言，仅在类型守卫验证后使用
+export function isSupportedImageType(mimeType: string): boolean {
+  return (SUPPORTED_IMAGE_TYPES as readonly string[]).includes(mimeType);
+}
+```
+
+### 1.4 导出模式
+
+| 场景        | 导出方式                                         | 示例                              |
+| ----------- | ------------------------------------------------ | --------------------------------- |
+| 页面组件    | `export default function ComponentName()`        | `pages/Timestamp/index.tsx`       |
+| 业务组件    | `const X = React.memo(...)` + `export default X` | `LiveClock.tsx`, `ResultView.tsx` |
+| UI 原子组件 | `React.forwardRef(...)` + `export { X }`         | `components/ui/button.tsx`        |
+| 工具函数    | `export function xxx()`                          | `utils/clipboard.ts`              |
+| 自定义 Hook | `export function useXxx()`                       | `utils/useStorageState.ts`        |
+| 类型/接口   | `export interface` / `export type`               | `types/storage.d.ts`              |
+
+```typescript
+// ✅ 页面组件 — default export
+export default function Index() { ... }
+
+// ✅ 需要 memo 的组件 — 箭头函数 + React.memo + displayName
+const LiveClock = React.memo(({ ... }: LiveClockProps) => { ... });
+LiveClock.displayName = 'LiveClock';
+export default LiveClock;
+
+// ✅ UI 组件 — forwardRef + 命名导出
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(...);
+Button.displayName = 'Button';
+export { Button, buttonVariants };
+```
+
+---
+
+## 2. React 组件规范
+
+### 2.1 组件定义方式
+
+- **标准组件**：使用 `function` 声明
+- **需要 memo 的组件**：使用箭头函数 + `React.memo`
+- **需要 ref 的组件**：使用 `React.forwardRef`
+- **错误边界**：使用 Class 组件（React 要求）
+
+```typescript
+// ✅ 标准页面组件
+export default function Index() { ... }
+
+// ✅ 需要 memo 的组件
+const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
+  ...
+});
+LiveClock.displayName = 'LiveClock';
+export default LiveClock;
+
+// ✅ 需要 ref 的组件
+const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props, ref) => {
+  ...
+});
+TextInputArea.displayName = 'TextInputArea';
+export default TextInputArea;
+
+// ✅ Class 组件（仅用于 ErrorBoundary）
+export class ErrorBoundary extends Component<Props, State> { ... }
+```
+
+### 2.2 Props 模式
+
+- 使用 `interface` 定义 Props
+- 继承 `React.HTMLAttributes` 以支持原生属性透传
+- 使用 `Omit` 排除冲突属性
+- 解构 `className` 和 `...rest props`
+
+```typescript
+// ✅ 继承 HTML 属性 + className 透传
+interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+  showEmptyPlaceholder?: boolean;
+}
+
+// 使用时解构 className 和 rest props
+const ResultView = React.memo(({
+  result, mode, unit, zone,
+  showEmptyPlaceholder = false,
+  className, ...props
+}: ResultViewProps) => {
+  return <div className={cn('flex flex-col w-full', className)} {...props}>...</div>;
+});
+
+// ✅ Omit 排除冲突属性
+export interface TextInputAreaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'
+> { ... }
+```
+
+### 2.3 状态管理
+
+- **本地状态**：`useState` + 惰性初始化
+- **衍生状态**：`useMemo` 响应式计算管线
+- **持久化状态**：Chrome Storage + `localStorage` 快照
+- **全局状态**：React Context
+
+```typescript
+// ✅ useState + 惰性初始化
+const [input, setInput] = useState(() => String(Date.now()));
+
+// ✅ useMemo 响应式计算管线（零延迟，无需手动 convert 按钮）
+const conversionPipeline = useMemo(() => {
+  const rawInput = input.trim();
+  if (!rawInput) return { result: '', error: '' };
+  // ... 自动计算结果
+}, [input, mode, unit, zone, t]);
+
+// ✅ Chrome Storage 持久化状态
+export const useStorageState = <K extends keyof StorageSchema>(
+  key: K, defaultValue: StorageSchema[K], validator?: ...
+) => { ... }
+```
+
+### 2.4 副作用模式
+
+- **取消标志**：防止异步竞态
+- **ref 回调指针**：保持回调最新避免依赖膨胀
+- **事件监听 cleanup**：始终在 cleanup 中移除监听器
+- **定时器 cleanup**：始终在 cleanup 中清除定时器
+
+```typescript
+// ✅ 取消标志模式 — 防止异步竞态
+useEffect(() => {
+  let cancelled = false;
+  storageUtil.get(THEME_MODE_KEY, 'system').then((saved) => {
+    if (cancelled) return;
+    if (isValidMode(saved)) { ... }
+  });
+  return () => { cancelled = true; };
+}, [updateResolved]);
+
+// ✅ ref 回调指针 — 保持回调最新避免依赖膨胀
+const onUseNowRef = useRef(onUseNow);
+useEffect(() => { onUseNowRef.current = onUseNow; }, [onUseNow]);
+
+// ✅ setInterval + cleanup
+useEffect(() => {
+  const tickId = setInterval(tick, 200);
+  return () => clearInterval(tickId);
+}, [unit]);
+
+// ✅ 事件监听 cleanup
+useEffect(() => {
+  const handleClickOutside = (event: MouseEvent) => { ... };
+  document.addEventListener('mousedown', handleClickOutside);
+  return () => document.removeEventListener('mousedown', handleClickOutside);
+}, []);
+```
+
+### 2.5 `memo` / `useCallback` / `useMemo` 使用
+
+| 场景                               | 使用方式      |
+| ---------------------------------- | ------------- |
+| 高频渲染组件（列表子项、实时时钟） | `React.memo`  |
+| 事件处理函数、回调引用             | `useCallback` |
+| 响应式计算管线、衍生数据           | `useMemo`     |
+| 避免重复创建对象/集合              | `useMemo`     |
+
+```typescript
+// ✅ React.memo — 高频更新组件
+const LiveClock = React.memo(({ ... }) => { ... });
+const ResultView = React.memo(({ ... }) => { ... });
+
+// ✅ useCallback — 事件处理
+const handleUseNow = useCallback((now: number) => {
+  if (mode === 'ts2dt') {
+    setInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
+  } else {
+    setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
+  }
+}, [mode, unit, zone]);
+
+// ✅ useMemo — 避免重复创建集合
+const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
+```
+
+---
+
+## 3. 导入规范
+
+### 3.1 导入顺序
+
+按来源分组，顺序如下：
+
+1. React 核心
+2. 第三方库（图标、UI 库等）
+3. 业务 Provider / Context
+4. 配置 / 存储
+5. i18n
+6. 本地页面组件
+7. UI 组件
+8. 工具函数 / Hook
+9. 类型
+10. 常量
+
+```typescript
+// 1. React 核心
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+// 2. 第三方库
+import { ArrowLeft, ExternalLink, Globe } from 'lucide-react';
+import { toast } from 'sonner';
+// 3. 业务 Provider
+import { useRouter } from '@/providers/RouterProvider';
+import { useThemeMode } from '@/providers/ThemeModeProvider';
+// 4. 配置 / 存储
+import { FeatureConfig, FEATURES } from '@/config/features';
+import { storageUtil } from '@/utils/chromeStorage';
+// 5. i18n
+import { useTranslation } from 'react-i18next';
+import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
+// 6. 本地组件
+import TextMode from './TextMode';
+import { ZONES } from './constants';
+// 7. UI 组件
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { Button } from '@/components/ui/button';
+// 8. 工具函数 / Hook
+import { cn } from '@/lib/utils';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
+// 9. 类型
+import type { PageType, StorageSchema } from '@/types/storage';
+```
+
+### 3.2 路径别名
+
+- `@/` 映射到项目根目录
+- **跨目录导入**：使用 `@/` 绝对别名
+- **同目录导入**：使用相对路径 `./`
+
+```typescript
+// ✅ 绝对别名导入 — 跨目录
+import { cn } from '@/lib/utils';
+import { storageUtil } from '@/utils/chromeStorage';
+import type { StorageSchema } from '@/types/storage';
+import { Button } from '@/components/ui/button';
+
+// ✅ 相对导入 — 仅限同目录
+import TextMode from './TextMode';
+import { ZONES } from './constants';
+import { useTimestampConverter } from './useTimestampConverter';
+```
+
+---
+
+## 4. 样式规范
+
+### 4.1 `cn()` 工具函数
+
+统一使用 `cn()` 合并 Tailwind 类名（来自 `clsx` + `tailwind-merge`），导入自 `@/lib/utils`：
+
+```typescript
+import { cn } from '@/lib/utils';
+
+// ✅ 条件类名 + 合并外部 className
+<div className={cn(
+  'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
+  className,   // 外部传入的覆盖
+)} {...props}>
+
+// ✅ 错误状态变体
+<Input className={cn(
+  'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60',
+  error && 'border-destructive focus-visible:ring-destructive',
+)} />
+
+// ✅ 选中/未选中状态
+className={cn(
+  'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
+  sizeClasses[size],
+  isSelected
+    ? 'bg-background text-foreground shadow-sm font-semibold'
+    : 'hover:bg-background/50 hover:text-foreground/80',
+  buttonClassName,
+)}
+```
+
+### 4.2 主题 / 暗色模式
+
+使用 shadcn/ui 的 CSS 变量语义化类名，**禁止硬编码颜色值**：
+
+```typescript
+// ✅ 语义化颜色 token — 亮/暗模式自适应
+<div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
+<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+
+// ✅ 暗色模式特殊处理
+'fixed ... bg-white dark:bg-gray-900 p-6 ...'
+
+// ✅ 需要固定颜色的特殊场景（如二维码白色背景保护）
+<div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
+```
+
+**常用语义化 token：**
+
+| 用途 | 类名                                                               |
+| ---- | ------------------------------------------------------------------ |
+| 背景 | `bg-background`, `bg-card`, `bg-muted`, `bg-secondary`             |
+| 文字 | `text-foreground`, `text-card-foreground`, `text-muted-foreground` |
+| 边框 | `border-border`, `border-border/80`                                |
+| 主色 | `text-primary`, `bg-primary`, `border-primary`                     |
+| 危险 | `text-destructive`, `bg-destructive`, `border-destructive`         |
+
+### 4.3 响应式设计
+
+移动优先，使用 `sm:` / `md:` / `lg:` 断点：
+
+```typescript
+// ✅ Grid 自适应布局
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+
+// ✅ Dashboard 自动填充网格
+<div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5 p-3.5 w-full h-auto">
+
+// ✅ 弹性方向切换
+<div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
+
+// ✅ 内边距响应式
+<div className="p-4 sm:p-6 space-y-4">
+```
+
+---
+
+## 5. 错误处理
+
+### 5.1 工具函数：结果对象模式
+
+工具函数**不抛异常**，返回包含 `hasError` 和 `error` 字段的结果对象：
+
+```typescript
+// ✅ 结果对象模式
+export function markdownToHtml(markdown: string): MarkdownToHtmlResult {
+  try {
+    ...
+    return { html, originalLength, htmlLength, hasError: false };
+  } catch (error) {
+    return {
+      html: '', ...
+      hasError: true,
+      error: error instanceof Error ? error.message : 'Markdown 解析失败',
+    };
+  }
+}
+```
+
+### 5.2 UI 层：try-catch + Toast
+
+UI 层异步操作使用 try-catch，通过 `sonner` 的 `toast` 显示错误：
+
+```typescript
+import { toast } from 'sonner';
+
+const handleCopy = useCallback(async () => {
+  try {
+    await navigator.clipboard.writeText(value);
+    toast.success('复制成功');
+  } catch {
+    toast.error('复制失败');
+  }
+}, [value]);
+```
+
+### 5.3 Promise 异常隔离
+
+对不关心返回值的异步操作，使用 `void` + `.catch()` 隔离异常：
+
+```typescript
+// ✅ void + .catch 模式
+void storageUtil.set(THEME_MODE_KEY, next).catch((err) => {
+  console.error('[Theme Storage Error] Failed to persistent theme state:', err);
+});
+
+// ✅ async 函数调用 + .catch
+loadConfig().catch(console.error);
+```
+
+### 5.4 ErrorBoundary
+
+在应用顶层使用 `ErrorBoundary` 组件捕获子组件树异常：
+
+```typescript
+import ErrorBoundary from '@/components/ErrorBoundary';
+
+<ErrorBoundary>
+  <RouterContainer />
+</ErrorBoundary>
+```
+
+---
+
+## 6. 命名规范
+
+### 6.1 文件命名
+
+| 类型        | 命名模式                   | 示例                                                     |
+| ----------- | -------------------------- | -------------------------------------------------------- |
+| 页面目录    | PascalCase                 | `Timestamp/`, `Base64Converter/`, `StorageCleaner/`      |
+| 页面入口    | `index.tsx`                | `pages/Timestamp/index.tsx`                              |
+| 组件文件    | PascalCase `.tsx`          | `TopBar.tsx`, `LiveClock.tsx`, `ResultView.tsx`          |
+| 自定义 Hook | camelCase `.ts`            | `useTimestampConverter.ts`, `useStorageCleaner.ts`       |
+| 工具函数    | camelCase `.ts`            | `chromeStorage.ts`, `base64Converter.ts`, `clipboard.ts` |
+| 测试文件    | 与源文件同名 `.test.ts(x)` | `jwt.test.ts`, `SwitchButtonGroup.test.tsx`              |
+| 类型文件    | camelCase `.d.ts`          | `storage.d.ts`                                           |
+| 常量文件    | camelCase `.ts`            | `constants.ts`                                           |
+
+### 6.2 变量 / 函数命名
+
+```typescript
+// ✅ camelCase — 变量、函数、Hook
+const conversionPipeline = useMemo(...);
+const handleUseNow = useCallback(...);
+export function useTimestampConverter(): UseTimestampConverterReturn { ... }
+export function textToBase64(text: string): TextToBase64Result { ... }
+
+// ✅ PascalCase — 组件、类型、接口
+const LiveClock = React.memo(...);
+export interface GlobalSnackbarProps { ... }
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+// ✅ SCREAMING_SNAKE_CASE — 常量
+const SEARCH_HISTORY_LIMIT = 10;
+const THEME_MODE_KEY = 'app/themeMode' as const;
+export const MAX_FILE_SIZE = 10 * 1024 * 1024;
+export const SUPPORTED_IMAGE_TYPES = [...] as const;
+
+// ✅ 布尔值 — is/has/should 前缀
+const isControlled = controlledValue !== undefined;
+const isDashboard = currentPage === 'dashboard';
+const hasError = true;
+```
+
+### 6.3 事件处理函数
+
+使用 `handle` 前缀命名组件内事件处理函数：
+
+```typescript
+const handleUseNow = useCallback((now: number) => { ... }, []);
+const handleSelectFeature = (feature: FeatureConfig) => { ... };
+const handleFileChange = useCallback((file: File) => { ... }, []);
+const handleClean = useCallback(async () => { ... }, []);
+```
+
+---
+
+## 7. 测试规范
+
+### 7.1 文件组织
+
+测试文件放在源代码同级的 `__tests__/` 目录下：
+
+```
+utils/__tests__/jwt.test.ts
+utils/__tests__/base64Converter.test.ts
+utils/__tests__/useStorageState.test.ts
+components/__tests__/SwitchButtonGroup.test.tsx
+components/__tests__/ErrorBoundary.test.tsx
+pages/Timestamp/__tests__/index.test.tsx
+```
+
+### 7.2 describe / it 命名
+
+`describe` 使用模块/函数名，`it` 使用中文描述行为（"应该..."）：
+
+```typescript
+// ✅ 中文 describe + 中文 it
+describe('textToBase64', () => {
+  it('应该编码 ASCII 文本', () => { ... });
+  it('应该编码中文文本', () => { ... });
+  it('应该编码空字符串', () => { ... });
+});
+
+// ✅ 中文 describe + 中文 it（组件测试）
+describe('SwitchButtonGroup 组件', () => {
+  it('应渲染所有选项按钮', () => { ... });
+  it('应高亮当前选中的按钮', () => { ... });
+  it('点击未选中按钮时应触发 onChange 并传入选中值', () => { ... });
+});
+```
+
+### 7.3 Mock 模式
+
+- 使用 `vi.mock()` 进行模块级 Mock
+- 使用 `vi.fn()` 进行函数级 Mock
+- 使用 `vi.useFakeTimers()` 控制时间
+- **避免重复 mock `vitest.setup.ts` 中已有的内容**（chrome API、i18n、matchMedia 等）
+
+```typescript
+// ✅ 模块级 Mock
+vi.mock('@/utils/chromeStorage', () => ({
+  storageUtil: {
+    get: vi.fn(),
+    set: vi.fn(() => Promise.resolve()),
+  },
+}));
+
+// ✅ 函数级 Mock + 断言
+const handleChange = vi.fn();
+render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
+fireEvent.click(screen.getByRole('button', { name: /选项B/i }));
+expect(handleChange).toHaveBeenCalledTimes(1);
+expect(handleChange).toHaveBeenCalledWith('b');
+
+// ✅ 定时器 Mock
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.clearAllMocks();
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+```
+
+### 7.4 断言模式
+
+使用 Testing Library 的 DOM 查询 + Vitest 匹配器：
+
+```typescript
+// ✅ 语义化查询
+expect(screen.getByRole('button', { name: /选项A/i })).toBeInTheDocument();
+expect(screen.getByTestId('normal-content')).toHaveTextContent('正常内容');
+expect(screen.queryByText('糟糕，出了点问题')).not.toBeInTheDocument();
+
+// ✅ CSS 类断言
+expect(button).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
+
+// ✅ 异步断言
+await waitFor(() => {
+  expect(result.current[0]).toBe(false);
+  expect(result.current[2]).toBe(true);
+});
+
+// ✅ renderHook 测试自定义 Hook
+const { result } = renderHook(() => useStorageState('qrCode/urlExpanded', true));
+expect(result.current[0]).toBe(true);
+```
+
+---
+
+## 8. 自定义 Hook 规范
+
+### 8.1 命名和结构
+
+- 使用 `use` 前缀命名
+- 定义返回值接口类型
+- 添加 JSDoc 注释
+
+```typescript
+// ✅ 完整的 Hook 结构
+/**
+ * 自定义 Hook：处理右键菜单传递的数据
+ *
+ * @param options - 配置选项
+ * @example
+ * useContextMenuData({ featureKey: 'jwt', onData: handlePayload });
+ */
+export function useContextMenuData({ featureKey, onData }: UseContextMenuDataOptions): void {
+  const checkAndConsumeData = useCallback(async () => { ... }, [featureKey, onData]);
+  useEffect(() => { checkAndConsumeData(); }, [checkAndConsumeData]);
+}
+
+// ✅ 返回值接口定义
+export interface UseTimestampConverterReturn {
+  mode: 'ts2dt' | 'dt2ts';
+  input: string;
+  result: string;
+  error: string;
+  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setInput: (value: string) => void;
+  handleUseNow: (now: number) => void;
+}
+
+export function useTimestampConverter(): UseTimestampConverterReturn { ... }
+```
+
+### 8.2 Hook 存放位置
+
+- **全局通用 Hook**：放在 `utils/` 目录下
+- **页面专属 Hook**：与页面组件同目录
+
+```
+utils/useStorageState.ts          — Chrome Storage 状态持久化
+utils/useLazyTranslation.ts       — i18n 懒加载
+utils/useContextMenuData.ts       — 右键菜单数据
+utils/useDebounce.ts              — 防抖
+pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
+pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
+```
+
+---
+
+## 9. 国际化规范
+
+### 9.1 翻译键格式
+
+- 命名空间：`common`（默认）、`features`
+- 翻译键格式：`namespace:key`（如 `features:timestamp.title`）
+- 语言：`zh`（默认）、`en`
+
+### 9.2 翻译文件结构
+
+```
+i18n/locales/{zh,en}/common.json           — 全局通用翻译
+i18n/locales/{zh,en}/features.json         — 功能模块标题和描述
+i18n/locales/{zh,en}/{功能名}.json         — 各功能独立翻译
+```
+
+### 9.3 使用方式
+
+```typescript
+// ✅ 页面组件 — 使用 useLazyTranslation
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
+
+export default function Index() {
+  const { t } = useLazyTranslation('timestamp');
+  return <h1>{t('timestamp:title')}</h1>;
+}
+
+// ✅ 全局组件 — 使用 useTranslation
+import { useTranslation } from 'react-i18next';
+
+export function TopBar() {
+  const { t } = useTranslation(['common', 'features']);
+  return <span>{t('common:settings')}</span>;
+}
+```
+
+### 9.4 添加新翻译
+
+1. 在 `i18n/locales/{zh,en}/features.json` 添加功能标题和描述
+2. 创建 `i18n/locales/{zh,en}/{功能名}.json` 添加功能专属翻译
+3. 在 `utils/useLazyTranslation.ts` 的 `localeModules` 中注册新命名空间
+
+---
+
+## 10. 存储规范
+
+### 10.1 StorageSchema
+
+所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中声明：
+
+```typescript
+export interface StorageSchema {
+  'app/currentRoute': PageType;
+  'app/popupRoute': PageType;
+  'app/theme': string;
+  'app/themeMode': 'light' | 'dark' | 'system';
+  'storageCleaner/preferences': StorageCleanerPreferences;
+  // ...
+}
+```
+
+### 10.2 存储操作
+
+使用 `utils/chromeStorage.ts` 的类型安全封装：
+
+```typescript
+import { storageUtil } from '@/utils/chromeStorage';
+import type { StorageSchema } from '@/types/storage';
+
+// ✅ 读取
+const theme = await storageUtil.get('app/theme', 'default');
+
+// ✅ 写入
+await storageUtil.set('app/theme', 'dark');
+
+// ✅ 删除
+await storageUtil.remove('app/theme');
+```
+
+### 10.3 持久化状态 Hook
+
+使用 `useStorageState` 自动同步 Chrome Storage：
+
+```typescript
+import { useStorageState } from '@/utils/useStorageState';
+
+const [themeMode, setThemeMode, isInitialized] = useStorageState(
+  'app/themeMode',
+  'system',
+  isValidMode, // 可选的类型守卫
+);
+```
+
+---
+
+## 11. 文件组织
+
+### 11.1 页面组件结构
+
+```
+pages/FeatureName/
+├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
+├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
+├── constants.ts           # 常量定义（可选）
+├── LiveClock.tsx          # 子组件（可选）
+├── ResultView.tsx         # 子组件（可选）
+└── __tests__/             # 测试文件
+    └── index.test.tsx
+```
+
+### 11.2 目录职责
+
+| 目录             | 职责                                                         |
+| ---------------- | ------------------------------------------------------------ |
+| `config/`        | 应用配置（功能定义、路由映射）                               |
+| `entrypoints/`   | 扩展入口点（popup、options、sidepanel、background、content） |
+| `pages/`         | 功能页面组件（懒加载）                                       |
+| `components/`    | 可复用 UI 组件                                               |
+| `components/ui/` | shadcn/ui 基础组件（button、dialog、select 等）              |
+| `providers/`     | React Context（Router、Theme 等）                            |
+| `hooks/`         | 自定义 React Hooks                                           |
+| `utils/`         | 工具函数与服务抽象                                           |
+| `types/`         | TypeScript 类型声明                                          |
+| `lib/`           | 通用工具函数（cn、utils）                                    |
+| `i18n/`          | 国际化资源                                                   |
+| `public/`        | 静态资源                                                     |
+
+---
+
+## 12. 代码风格
+
+### 12.1 Prettier 配置
+
+- 行宽：100 字符
+- 引号：单引号
+- 尾逗号：all
+- 换行符：LF
+- 分号：是
+
+### 12.2 ESLint 规则
+
+- 禁止使用 `any`（测试文件除外）
+- 未使用变量/参数：使用 `_` 前缀（如 `_unused`）
+- React 19 JSX Runtime：无需手动导入 React
+- 使用 `typescript-eslint` 的 `projectService: true`
+
+### 12.3 注释规范
+
+- **文件级注释**：使用 JSDoc `@module` 格式（如 `GlobalSnackbar.tsx`）
+- **函数注释**：使用 JSDoc，包含 `@param`、`@returns`、`@example`
+- **行内注释**：仅在需要澄清复杂逻辑时使用
+- **禁止注释显而易见的代码**
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..ff35225
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,141 @@
+# 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 分离** 模式：
+
+```
+pages/FeatureName/
+├── index.tsx              # UI 组件（纯展示，使用 shadcn/ui 组件）
+├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
+└── constants.ts           # 常量定义（可选）
+```
+
+- 页面组件调用 `useLazyTranslation('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、vendor-markdown），无需手动配置。
+
+### 代码风格
+
+- 禁止使用 `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`
diff --git a/AGENTS.md b/AGENTS.md
index f28e8bd..bdf1672 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -47,6 +47,7 @@ config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源
 entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
 pages/                 # 功能页面组件 (懒加载)
 components/            # 可复用 UI 组件
+components/ui/         # shadcn/ui 基础组件 (button, dialog, select 等)
 providers/             # React Context (Router, Theme 等)
 hooks/                 # 自定义 React Hooks
 utils/                 # 工具函数与服务抽象
@@ -54,11 +55,26 @@ types/                 # TypeScript 类型声明
 i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功能独立 JSON)
 ```
 
+### 页面组件模式
+
+典型功能页面遵循 **UI + Hook 分离** 模式：
+
+```
+pages/FeatureName/
+├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
+├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
+└── constants.ts           # 常量定义
+```
+
+- 页面组件调用 `useLazyTranslation('featureName')` 获取翻译函数
+- Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
+- 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
+
 ## 关键架构决策
 
 **路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
 渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
-每种模式有独立的路由和可见页面配置。
+每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
 
 **存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
 使用 `utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
@@ -70,6 +86,8 @@ i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功
 
 **浏览器兼容**: 优先使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API。
 
+**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-i18n、vendor-qr 等），无需手动配置。
+
 ## 测试环境
 
 - 环境: jsdom
@@ -99,8 +117,11 @@ i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功
 ## 新功能开发清单
 
 1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
-2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
-3. 在 `pages/` 创建页面组件 (懒加载)
+2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
+3. 在 `pages/` 创建页面组件 (懒加载)：
+   - `index.tsx` — UI 组件，使用 `useLazyTranslation` 获取翻译
+   - `useFeatureName.ts` — 业务逻辑 Hook
+   - `constants.ts` — 常量（可选）
 4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON）
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
@@ -115,15 +136,11 @@ i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
 
-## 技术栈版本
+## 关键外部库（非显而易见的）
 
-- WXT: ^0.20.26
-- React: ^19.2.6
-- Tailwind CSS: ^3.4.19
-- shadcn/ui (基于 Radix UI + class-variance-authority)
-- TypeScript: ^5.9.3
-- Vitest: ^4.1.7
-- i18next: ^26.2.0
-- @dnd-kit (拖拽排序)
-- marked (Markdown 解析)
-- qrious + qr-scanner (二维码生成与解析)
+- `@webext-core/messaging` — 扩展消息通信
+- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
+- `marked` — Markdown 解析
+- `qrious` + `qr-scanner` — 二维码生成与解析
+- `dayjs` — 日期处理（时间戳转换）
+- `sonner` — Toast 通知（替代传统 snackbar）
diff --git a/components/README.md b/components/README.md
new file mode 100644
index 0000000..abd1286
--- /dev/null
+++ b/components/README.md
@@ -0,0 +1,27 @@
+# components/
+
+通用业务组件目录，存放跨页面复用的 UI 组件，与具体工具页面解耦。
+
+## 组件列表
+
+| 组件                    | 用途                                                                           |
+| ----------------------- | ------------------------------------------------------------------------------ |
+| `TopBar.tsx`            | 顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航               |
+| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
+| `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
+| `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
+| `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
+| `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |
+| `QrCodePreview.tsx`     | 二维码预览组件，展示生成的二维码图片，提供复制和下载操作                       |
+| `DecodeResultPaper.tsx` | Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮        |
+| `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式        |
+| `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                 |
+| `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                 |
+| `PageSkeleton.tsx`      | 页面骨架屏，提供 `dashboard` 和 `tool` 两种变体，用于 Suspense fallback        |
+
+## 使用约定
+
+- 优先使用 `components/ui/` 下的 shadcn/ui 基础组件
+- 组件使用 `cn()` 合并 Tailwind 类名，支持 `className` 透传
+- 需要 memo 优化的组件使用 `React.memo` + `displayName`
+- 需要 ref 转发的组件使用 `React.forwardRef` + `displayName`
diff --git a/components/ui/README.md b/components/ui/README.md
new file mode 100644
index 0000000..72420ba
--- /dev/null
+++ b/components/ui/README.md
@@ -0,0 +1,40 @@
+# components/ui/
+
+shadcn/ui 基础原子组件目录，基于 Radix UI 原语 + Tailwind CSS 实现。
+
+## 组件列表
+
+| 组件           | 用途                                                                                               |
+| -------------- | -------------------------------------------------------------------------------------------------- |
+| `button.tsx`   | 按钮组件，支持 `default/destructive/outline/secondary/ghost/link` 变体和 `default/sm/lg/icon` 尺寸 |
+| `input.tsx`    | 标准输入框，统一的 ring/focus 样式                                                                 |
+| `select.tsx`   | 下拉选择组件，包含 Trigger、Content、Item 等子组件                                                 |
+| `dialog.tsx`   | 对话框组件，包含 Overlay、Content、Header、Footer、Title、Description                              |
+| `checkbox.tsx` | 复选框组件                                                                                         |
+| `label.tsx`    | 标签组件                                                                                           |
+| `switch.tsx`   | 开关组件                                                                                           |
+| `badge.tsx`    | 徽章组件，支持 `default/secondary/destructive/outline` 变体                                        |
+
+## 使用方式
+
+```tsx
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+```
+
+## 添加新组件
+
+使用 shadcn/ui CLI 添加新组件：
+
+```bash
+npx shadcn-ui@latest add <component-name>
+```
+
+组件配置在项目根目录的 `components.json` 中定义。
diff --git a/config/README.md b/config/README.md
new file mode 100644
index 0000000..ced4dcb
--- /dev/null
+++ b/config/README.md
@@ -0,0 +1,44 @@
+# config/
+
+应用级配置目录，存放功能特性的注册中心。
+
+## 文件说明
+
+| 文件           | 用途                                     |
+| -------------- | ---------------------------------------- |
+| `features.tsx` | 核心配置文件，定义所有工具功能的注册信息 |
+
+## features.tsx
+
+`FEATURES` 数组是路由和功能元数据的**单一事实来源**，每个功能定义包含：
+
+- `key`：页面类型标识（`PageType`）
+- `labelKey` / `descriptionKey`：i18n 翻译键
+- `themeColorKey`：主题色（`primary/success/warning/error/secondary/info`）
+- `icon`：lucide-react 图标组件
+- `defaultVisible`：默认是否可见
+- `components`：三种渲染模式的懒加载组件（`popup`、`sidepanel`、`tab`）
+
+## 已注册功能（11 个）
+
+| key                  | 图标              | 说明              |
+| -------------------- | ----------------- | ----------------- |
+| `dashboard`          | —                 | 仪表盘首页        |
+| `timestamp`          | Clock             | 时间戳转换工具    |
+| `storageCleaner`     | Database          | 存储清理工具      |
+| `qrCode`             | QrCode            | 二维码工具        |
+| `textStatistics`     | FileText          | 文本统计工具      |
+| `jwt`                | Key               | JWT 解析工具      |
+| `jsonDiff`           | GitCompareArrows  | JSON 差异比较工具 |
+| `base64Converter`    | ArrowLeftRight    | Base64 转换器     |
+| `markdownToHtml`     | Code              | Markdown 转 HTML  |
+| `htmlToMarkdown`     | File              | HTML 转 Markdown  |
+| `rightClickRestorer` | MousePointerClick | 右键菜单恢复工具  |
+
+## 导出函数
+
+- `getFeatureByKey(key)` — 根据 key 获取功能配置
+- `getDefaultVisibleFeatureKeys()` — 获取默认可见的功能 key 列表
+- `getAllFeatureKeys()` — 获取所有功能 key 列表
+- `getDefaultPageOrder()` — 获取默认页面排序（不含 dashboard）
+- `getEntryPointType()` — 判断当前入口类型（popup/sidepanel/tab）
diff --git a/entrypoints/README.md b/entrypoints/README.md
new file mode 100644
index 0000000..47982f0
--- /dev/null
+++ b/entrypoints/README.md
@@ -0,0 +1,51 @@
+# entrypoints/
+
+WXT 框架要求的扩展生命周期入口点，对应 Chrome Extension 的各个上下文。
+
+## 入口文件
+
+| 文件                            | 用途                                                                                          |
+| ------------------------------- | --------------------------------------------------------------------------------------------- |
+| `background.ts`                 | Service Worker 入口：注册右键菜单、监听菜单点击、处理消息通信、管理侧边栏状态、注入主环境脚本 |
+| `content.ts`                    | Content Script 入口：注入所有页面（`<all_urls>`），在 `document_end` 时初始化消息处理器       |
+| `rightClickRestorer.content.ts` | 专用 Content Script：处理右键菜单恢复功能，注入浮动状态徽章                                   |
+
+## 子目录
+
+### popup/
+
+Popup 弹窗页面（点击扩展图标弹出）。
+
+| 文件         | 用途                                                                           |
+| ------------ | ------------------------------------------------------------------------------ |
+| `index.html` | HTML 入口                                                                      |
+| `main.tsx`   | React 挂载点                                                                   |
+| `App.tsx`    | 根组件，组装 `RouterProvider` + `TopBar` + `ErrorBoundary` + `RouterContainer` |
+
+### sidepanel/
+
+侧边栏页面，结构与 popup 类似，额外通知 background 侧边栏开启/关闭状态。
+
+### options/
+
+设置页面，支持：
+
+- 拖拽排序功能顺序（`@dnd-kit`）
+- 功能可见性管理（显示/隐藏）
+- Popup/Sidepanel/Tab 三种模式独立配置
+
+### content/
+
+Content Script 内部分模块：
+
+| 文件                    | 用途                                                                |
+| ----------------------- | ------------------------------------------------------------------- |
+| `messageHandler.ts`     | 消息处理器初始化入口                                                |
+| `contextMenuHandler.ts` | 右键菜单点击事件处理，执行时间戳转换/文本统计并通过 UI Popover 展示 |
+| `uiPopover.ts`          | 在页面中注入浮层 Popover UI，展示右键菜单操作结果                   |
+
+## 架构说明
+
+- `background.ts` 是扩展的核心协调者，处理跨上下文通信
+- `content.ts` 注入到所有页面，负责接收和处理来自 background 的消息
+- `popup/`、`sidepanel/`、`options/` 共享同一套页面组件（来自 `pages/`），通过 `RouterProvider` 的不同配置实现独立路由
diff --git a/i18n/README.md b/i18n/README.md
new file mode 100644
index 0000000..dcaa52b
--- /dev/null
+++ b/i18n/README.md
@@ -0,0 +1,61 @@
+# i18n/
+
+国际化资源目录，管理多语言翻译和 i18next 初始化配置。
+
+## 目录结构
+
+```
+i18n/
+├── index.ts                    # i18next 初始化配置
+└── locales/
+    ├── zh/                     # 中文翻译（默认语言）
+    │   ├── common.json         # 通用文案
+    │   ├── features.json       # 功能模块标题和描述
+    │   ├── timestamp.json      # 时间戳工具翻译
+    │   ├── storageCleaner.json # 存储清理工具翻译
+    │   ├── qrCode.json         # 二维码工具翻译
+    │   ├── textStatistics.json # 文本统计工具翻译
+    │   ├── jwt.json            # JWT 工具翻译
+    │   ├── jsonDiff.json       # JSON 差异工具翻译
+    │   ├── jsonFormat.json     # JSON 格式化工具翻译
+    │   ├── base64Converter.json
+    │   ├── markdownToHtml.json
+    │   ├── htmlToMarkdown.json
+    │   └── rightClickRestorer.json
+    └── en/                     # 英文翻译（结构同上）
+        └── ...
+```
+
+## index.ts
+
+i18next 初始化配置：
+
+- 同步加载 `common` 和 `features` 核心命名空间
+- 自定义 `chromeStorage` 语言检测器，从 Chrome Storage 读取语言偏好
+- `normalizeLanguage()` 将任意语言标识归一化为 `zh` 或 `en`
+- 语言变更时同步更新 Day.js 本地化和 localStorage 快照
+
+## 翻译键格式
+
+- 命名空间：`common`（默认）、`features`、各功能独立命名空间
+- 键格式：`namespace:key`（如 `features:timestamp.title`、`timestamp:unitMs`）
+
+## 使用方式
+
+```tsx
+// 页面组件 — 懒加载翻译
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
+const { t } = useLazyTranslation('timestamp');
+t('timestamp:title');
+
+// 全局组件 — 直接使用
+import { useTranslation } from 'react-i18next';
+const { t } = useTranslation(['common', 'features']);
+t('common:settings');
+```
+
+## 添加新翻译
+
+1. 在 `locales/{zh,en}/features.json` 添加功能标题和描述
+2. 创建 `locales/{zh,en}/{功能名}.json` 添加功能专属翻译
+3. 在 `utils/useLazyTranslation.ts` 的 `localeModules` 中注册新命名空间
diff --git a/lib/README.md b/lib/README.md
new file mode 100644
index 0000000..4616805
--- /dev/null
+++ b/lib/README.md
@@ -0,0 +1,26 @@
+# lib/
+
+通用库工具目录，存放与业务无关的底层工具函数。
+
+## 文件说明
+
+| 文件       | 用途                                 |
+| ---------- | ------------------------------------ |
+| `utils.ts` | `cn()` 函数 — shadcn/ui 标准工具函数 |
+
+## cn()
+
+组合 `clsx` + `tailwind-merge`，用于合并和去重 Tailwind CSS 类名：
+
+```typescript
+import { cn } from '@/lib/utils';
+
+// 条件类名 + 合并外部 className
+<div className={cn(
+  'flex items-center gap-3 px-3',
+  isActive && 'bg-primary text-primary-foreground',
+  className,
+)}>
+```
+
+所有需要动态合并 Tailwind 类名的场景都应使用 `cn()`，而非手动拼接字符串。
diff --git a/pages/README.md b/pages/README.md
new file mode 100644
index 0000000..7cb5080
--- /dev/null
+++ b/pages/README.md
@@ -0,0 +1,142 @@
+# pages/
+
+功能页面组件目录，每个子目录对应一个工具页面。
+
+## 目录结构约定
+
+典型页面遵循 **UI + Hook 分离** 模式：
+
+```
+pages/FeatureName/
+├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
+├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
+├── constants.ts           # 常量定义（可选）
+├── SubComponent.tsx       # 子组件（可选）
+└── __tests__/             # 测试文件
+    └── index.test.tsx
+```
+
+## 页面列表
+
+### Dashboard/
+
+仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
+
+| 文件           | 用途                                         |
+| -------------- | -------------------------------------------- |
+| `index.tsx`    | 页面组件，渲染工具卡片网格                   |
+| `ToolCard.tsx` | 工具卡片组件，展示图标、标题、描述和实时数据 |
+
+### Timestamp/
+
+时间戳转换工具，支持秒/毫秒级互转、多时区选择、实时时钟。
+
+| 文件                       | 用途                                                              |
+| -------------------------- | ----------------------------------------------------------------- |
+| `index.tsx`                | 页面 UI                                                           |
+| `useTimestampConverter.ts` | 业务逻辑 Hook，包含转换模式、输入、单位、时区状态和响应式计算管线 |
+| `LiveClock.tsx`            | 实时时钟子组件，`React.memo` 优化                                 |
+| `ResultView.tsx`           | 转换结果展示子组件                                                |
+| `constants.ts`             | 时区列表等常量                                                    |
+
+### StorageCleaner/
+
+浏览器存储清理工具，支持 Cookie/LocalStorage/SessionStorage/IndexedDB/Cache/SW 清理。
+
+| 文件                        | 用途           |
+| --------------------------- | -------------- |
+| `index.tsx`                 | 页面 UI        |
+| `useStorageCleaner.ts`      | 业务逻辑 Hook  |
+| `StorageOptionsGrid.tsx`    | 清理选项网格   |
+| `StorageCleanerConfirm.tsx` | 清理确认对话框 |
+| `AutoRefreshToggle.tsx`     | 自动刷新开关   |
+| `ErrorDisplay.tsx`          | 错误展示组件   |
+| `CleaningResult.tsx`        | 清理结果展示   |
+| `OptionItem.tsx`            | 单个选项组件   |
+
+### QrCode/
+
+二维码工具，支持生成（URL→QR）和解析（QR→URL）。
+
+| 文件/目录     | 用途             |
+| ------------- | ---------------- |
+| `index.tsx`   | 页面 UI          |
+| `types.ts`    | 类型定义         |
+| `contexts/`   | Context Provider |
+| `hooks/`      | 业务逻辑 Hooks   |
+| `components/` | 子组件           |
+
+### TextStatistics/
+
+文本统计工具，实时计算字符数、单词数、行数、字节大小。
+
+| 文件        | 用途                                          |
+| ----------- | --------------------------------------------- |
+| `index.tsx` | 页面组件，集成 `TextInputArea` 和统计结果展示 |
+
+### Jwt/
+
+JWT 解析工具，解码 Header/Payload/Signature。
+
+| 文件/目录     | 用途             |
+| ------------- | ---------------- |
+| `index.tsx`   | 页面 UI          |
+| `types.ts`    | 类型定义         |
+| `contexts/`   | Context Provider |
+| `hooks/`      | 业务逻辑 Hooks   |
+| `components/` | 子组件           |
+
+### JsonTools/
+
+JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
+
+| 文件                     | 用途                         |
+| ------------------------ | ---------------------------- |
+| `index.tsx`              | 页面入口，子模式切换         |
+| `types.ts`               | 类型定义                     |
+| `diffEngine.ts`          | 差异比较引擎                 |
+| `JsonDiffInput.tsx`      | JSON 输入组件                |
+| `DiffResult.tsx`         | 差异结果展示                 |
+| `DiffNavigator.tsx`      | 差异导航器                   |
+| `JsonFormatSection.tsx`  | 格式化区域                   |
+| `JsonConvertSection.tsx` | 转换区域（YAML/TOML/Minify） |
+| `JsonTree.tsx`           | JSON 树形展示                |
+
+### Base64Converter/
+
+Base64 编解码工具，支持文本/文件/图片三种模式。
+
+| 文件                         | 用途                 |
+| ---------------------------- | -------------------- |
+| `index.tsx`                  | 页面入口，子模式切换 |
+| `useBase64Converter.ts`      | 业务逻辑 Hook        |
+| `TextMode.tsx`               | 文本模式             |
+| `FileMode.tsx`               | 文件模式             |
+| `ImageMode.tsx`              | 图片模式             |
+| `Base64ConverterSection.tsx` | 通用转换区域         |
+
+### MarkdownToHtml/
+
+Markdown 转 HTML 工具，支持分栏/预览/源码三种视图模式。
+
+### HtmlToMarkdown/
+
+HTML 转 Markdown 工具，支持分栏/预览/Markdown 三种视图模式。
+
+### RightClickRestorer/
+
+右键菜单恢复工具，解除网站对右键的限制。
+
+| 文件                       | 用途          |
+| -------------------------- | ------------- |
+| `index.tsx`                | 页面 UI       |
+| `useRightClickRestorer.ts` | 业务逻辑 Hook |
+
+## 新增页面
+
+1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型成员
+2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
+3. 在 `pages/` 创建页面目录（遵循上述结构）
+4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译
+5. 如需新权限，更新 `wxt.config.ts`
+6. 添加对应的单元测试
diff --git a/providers/README.md b/providers/README.md
new file mode 100644
index 0000000..22d2209
--- /dev/null
+++ b/providers/README.md
@@ -0,0 +1,63 @@
+# providers/
+
+React Context Provider 目录，为整个应用提供全局共享状态。
+
+## 文件说明
+
+| 文件                    | 用途                   |
+| ----------------------- | ---------------------- |
+| `AppRoot.tsx`           | 应用根 Provider 组合器 |
+| `RouterProvider.tsx`    | 路由 Context Provider  |
+| `ThemeModeProvider.tsx` | 主题模式 Provider      |
+
+## AppRoot.tsx
+
+应用根 Provider 组合器，按顺序包裹：
+
+```
+React.StrictMode
+  └── ThemeModeProvider
+        └── RouterProvider
+              └── children
+```
+
+## RouterProvider.tsx
+
+路由 Context Provider，管理：
+
+- **当前页面**：`currentPage`（`PageType`）
+- **可见页面列表**：`visiblePages`
+- **页面排序**：`pageOrder`
+- **加载状态**：`isLoaded`
+
+核心特性：
+
+- 通过 `chrome.storage` 持久化路由状态
+- 使用 `localStorage` 快照实现首屏 0 闪烁
+- 支持 popup/sidepanel/tab 三种入口的独立路由同步（通过 `syncKey`、`visiblePagesKey`、`pageOrderKey` 配置）
+- 处理右键菜单待处理数据的路由跳转
+- 监听 `chrome.storage.onChanged` 实现跨端同步
+
+导出：
+
+- `RouterProvider` 组件
+- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goBack` 等
+
+## ThemeModeProvider.tsx
+
+主题模式 Provider，管理：
+
+- **主题模式**：`light` / `dark` / `system`
+- **解析后的主题**：`resolvedTheme`（`light` / `dark`）
+
+核心特性：
+
+- 使用 `localStorage` 快照实现首屏 0 闪烁
+- 监听系统级暗色模式变化（`matchMedia`）
+- 通过 `chrome.storage` 跨端同步主题偏好
+- 自动在 `document.documentElement` 上切换 `dark` class
+
+导出：
+
+- `ThemeModeProvider` 组件
+- `useThemeMode()` Hook — 获取 `themeMode`、`resolvedTheme`、`setThemeMode`
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000..b7b3f2f
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,20 @@
+# public/
+
+静态资源目录，存放无需构建处理的文件，会被直接复制到输出目录。
+
+## 文件说明
+
+| 文件/目录      | 用途                             |
+| -------------- | -------------------------------- |
+| `icon/`        | 扩展图标，提供多种尺寸           |
+| `icon/16.png`  | 16×16 图标（工具栏）             |
+| `icon/32.png`  | 32×32 图标                       |
+| `icon/48.png`  | 48×48 图标（扩展管理页）         |
+| `icon/96.png`  | 96×96 图标                       |
+| `icon/128.png` | 128×128 图标（Chrome Web Store） |
+| `wxt.svg`      | WXT 框架标志 SVG 图标            |
+
+## 注意事项
+
+- 修改图标后需同步更新 `wxt.config.ts` 中的 manifest 配置
+- 图标格式推荐使用 PNG，确保透明背景
diff --git a/src/README.md b/src/README.md
new file mode 100644
index 0000000..5bb0402
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,24 @@
+# src/
+
+源码目录，存放全局样式定义。
+
+## 文件说明
+
+| 文件        | 用途              |
+| ----------- | ----------------- |
+| `index.css` | 全局 CSS 入口文件 |
+
+## index.css
+
+全局样式入口，包含：
+
+- **Tailwind 指令**：`@tailwind base/components/utilities`
+- **shadcn/ui CSS 变量**：定义 `--background`、`--primary`、`--destructive`、`--card`、`--muted`、`--accent`、`--border`、`--ring` 等语义化颜色变量
+- **主题色值**：`:root`（亮色）和 `.dark`（暗色）两套完整的颜色定义
+- **圆角变量**：`--radius` 定义全局圆角大小
+
+## 修改注意事项
+
+- 修改 CSS 变量会影响所有使用 shadcn/ui 语义化 token 的组件
+- 新增颜色变量需同时在 `:root` 和 `.dark` 中定义
+- 避免在组件中硬编码颜色值，应使用 CSS 变量或 Tailwind 的语义化类名
diff --git a/types/README.md b/types/README.md
new file mode 100644
index 0000000..67fbff4
--- /dev/null
+++ b/types/README.md
@@ -0,0 +1,42 @@
+# types/
+
+全局共享的 TypeScript 类型声明文件目录。
+
+## 文件说明
+
+### storage.d.ts
+
+核心类型定义文件，包含：
+
+**页面类型：**
+
+- `PageType` — 所有页面类型的联合类型（`dashboard` | `timestamp` | `storageCleaner` | ...）
+- `JsonToolsPageMode` — JSON 工具子模式（`diff` | `format` | `yaml` | `toml` | `minify`）
+- `Base64ConverterPageMode` — Base64 子模式（`text` | `file` | `image`）
+- `Base64ConvertDirection` — 编解码方向（`encode` | `decode`）
+- `MarkdownToHtmlPreviewMode` — Markdown 预览模式（`split` | `preview` | `html`）
+- `HtmlToMarkdownPreviewMode` — HTML 预览模式（`split` | `preview` | `markdown`）
+
+**存储 Schema：**
+
+- `StorageSchema` — Chrome Storage 完整数据结构定义，所有存储键必须在此声明
+  - 键名使用 kebab-case 格式（如 `app/currentRoute`）
+  - 包含路由、主题、工具偏好、搜索历史等所有持久化数据
+
+**其他类型：**
+
+- `FormMapEntry` — 表单映射条目定义
+- `ContextMenuPendingData` — 右键菜单待处理数据
+- `StorageCleanerPreferences` / `StorageCleanerOptions` — 存储清理偏好
+- `CleaningResult` / `StorageCleanResult` — 清理结果类型
+
+### qrious.d.ts
+
+`qrious` 库的类型声明，定义 QR 码生成选项和 `QRious` 类。
+
+## 修改 StorageSchema 的注意事项
+
+修改 `StorageSchema` 时，必须：
+
+1. 在 `utils/chromeStorage.ts` 添加版本迁移函数
+2. 在测试中覆盖迁移场景
diff --git a/utils/README.md b/utils/README.md
new file mode 100644
index 0000000..a3f8d04
--- /dev/null
+++ b/utils/README.md
@@ -0,0 +1,42 @@
+# utils/
+
+通用工具函数和 React 自定义 Hooks 目录，与具体页面解耦。
+
+## 工具函数
+
+| 文件                 | 用途                                                                                                |
+| -------------------- | --------------------------------------------------------------------------------------------------- |
+| `chromeStorage.ts`   | Chrome Storage API 封装：类型安全的 `StorageUtils` 类，提供 `get/set/remove` 方法                   |
+| `chromeTabs.ts`      | Chrome Tabs API 封装：获取活动标签页、获取域名、在新标签页打开扩展页面                              |
+| `clipboard.ts`       | 剪贴板操作：`copyTextToClipboard`（文本）、`copyImageToClipboard`（图片）                           |
+| `messages.ts`        | 扩展消息通信：基于 `@webext-core/messaging`，定义 `MessageAction` 枚举和 `ProtocolMap` 类型安全映射 |
+| `contextMenu.ts`     | 右键菜单配置与操作：定义菜单项、创建菜单、解析点击事件、ID→PageType 映射                            |
+| `base64Converter.ts` | Base64 编解码：文本↔Base64、文件↔Base64、图片预览，定义文件大小限制和图像 MIME 类型                 |
+| `jwt.ts`             | JWT 解析：Base64URL 解码、解析 Header/Payload/Signature、JSON 格式化输出                            |
+| `jsonFormatter.ts`   | JSON 格式化/压缩：支持缩进、按键排序、minify                                                        |
+| `jsonToYaml.ts`      | JSON→YAML 转换                                                                                      |
+| `jsonToToml.ts`      | JSON→TOML 转换                                                                                      |
+| `markdownToHtml.ts`  | Markdown→HTML 转换：基于 `marked` 库，支持 GFM 和换行转换                                           |
+| `htmlToMarkdown.ts`  | HTML→Markdown 转换：基于 DOMParser 解析                                                             |
+| `qrCodeParser.ts`    | 二维码解析：基于 `qr-scanner` 库从文件中解析二维码                                                  |
+| `storageCleaner.ts`  | 存储清理：获取当前标签页、检测受限 URL、计算 Cookie/Storage 大小、清理操作                          |
+| `textStatistics.ts`  | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
+| `format.ts`          | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
+| `dayjs.ts`           | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
+
+## 自定义 Hooks
+
+| 文件                    | 用途                                                                                                           |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `useStorageState.ts`    | Chrome Storage 状态 Hook：类似 `useState`，值自动同步到 `chrome.storage`，使用 `localStorage` 快照消除首屏闪烁 |
+| `useLazyTranslation.ts` | 懒加载翻译 Hook：按需动态导入 i18n 命名空间，支持预加载和缓存                                                  |
+| `useContextMenuData.ts` | 右键菜单数据 Hook：从 storage 读取待处理数据，匹配 featureKey 后消费并触发回调                                 |
+| `useDebounce.ts`        | 防抖 Hook：对值进行延迟更新，避免频繁触发                                                                      |
+
+## 使用约定
+
+- 工具函数使用**命名导出**（`export function xxx()`）
+- 工具函数**不抛异常**，返回包含 `hasError` 和 `error` 字段的结果对象
+- Hook 使用 `use` 前缀命名，定义返回值接口类型
+- 存储操作使用 `chromeStorage.ts` 的 `storageUtil` 封装，不要直接调用 `chrome.storage`
+- 消息通信使用 `messages.ts` 的 `sendMessage`/`onMessage`，不要使用原生 `chrome.runtime.sendMessage`

From 601260797ea0473b4b954635b44650d118f74cde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:48:02 +0800
Subject: [PATCH 08/71] fix(CopyButton): use shadcn buttonVariants instead of
 duplicated variant classes

Remove hand-written variantClasses/sizeClasses that duplicated shadcn's
buttonVariants. Now extends ButtonProps and imports buttonVariants from
components/ui/button for consistent styling.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/CopyButton.tsx | 43 ++++++++++-----------------------------
 1 file changed, 11 insertions(+), 32 deletions(-)

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 77c89b9..cf06fce 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -1,23 +1,20 @@
 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
+import { cn } from '@/lib/utils';
+import { buttonVariants, type ButtonProps } from '@/components/ui/button';
+import { toast } from 'sonner';
 
-// 3. 继承原生按钮属性，允许外部自由扩展 className、variant 等
-interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
   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',
+  size = 'sm',
   className,
   ...props
 }) => {
@@ -31,7 +28,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   }, []);
 
   const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation(); // 基础组件防冒泡，避免触发父级点击事件
+    e.stopPropagation();
 
     if (!text) {
       toast.error('无内容可复制');
@@ -49,35 +46,17 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
     }
   };
 
-  // 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 等覆盖样式
+        buttonVariants({ variant, size }),
+        'h-8 w-8',
+        copied &&
+          'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
+        className,
       )}
       {...props}
     >

From e005d4d95df77a00714a6871f50f304991a3e66c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:48:30 +0800
Subject: [PATCH 09/71] fix(ErrorBoundary): use shadcn destructive tokens
 instead of hardcoded red colors

Replace hardcoded red-200/red-50/red-600 with border-destructive,
bg-destructive/5, text-destructive. Use variant='destructive' on
Button. Align error log styling with PageErrorBoundary.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/ErrorBoundary.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
index 259dc8d..3789b0e 100644
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -41,24 +41,26 @@ export class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="mt-16 mx-auto max-w-md">
-          <div className="p-6 text-center rounded-xl border border-red-200 bg-red-50">
-            <AlertCircle className="h-16 w-16 text-red-500 mx-auto mb-4" />
-            <h2 className="text-xl font-extrabold text-red-600 mb-2">糟糕，出了点问题</h2>
+        <div className="flex flex-col items-center justify-center 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="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
+              <AlertCircle className="h-8 w-8" />
+            </div>
+            <h2 className="text-xl font-extrabold text-destructive mb-2">糟糕，出了点问题</h2>
             <p className="text-sm text-muted-foreground mb-6">
               应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
             </p>
             {this.state.error && (
-              <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-red-700">
+              <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">
+                <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
                   {this.state.error.toString()}
                 </pre>
               </div>
             )}
             <Button
-              variant="default"
+              variant="destructive"
               onClick={this.handleReset}
-              className="rounded-lg font-bold bg-red-600 hover:bg-red-700 text-white"
+              className="rounded-lg font-bold shadow-sm"
             >
               <RefreshCw className="mr-2 h-4 w-4" />
               刷新应用

From e0de152645981472a53a6e266bb4dd40d7eed139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:49:31 +0800
Subject: [PATCH 10/71] fix(TextInputArea): replace hardcoded Chinese strings
 with i18n t() calls

Use existing translation keys for clear success, copy success, and
copy error messages instead of hardcoded Chinese text.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/TextInputArea.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/TextInputArea.tsx b/components/TextInputArea.tsx
index 1cd441c..f0b32e3 100644
--- a/components/TextInputArea.tsx
+++ b/components/TextInputArea.tsx
@@ -183,19 +183,19 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     onChange?.('');
     setError('');
     internalRef.current?.focus();
-    toast.success('已清空内容');
+    toast.success(t('textInputArea.cleared'));
     onClear?.();
-  }, [isControlled, onChange, onClear]);
+  }, [isControlled, onChange, onClear, t]);
 
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(value);
-      toast.success('复制成功');
+      toast.success(t('messages.copySuccess'));
     } catch {
-      setError('复制失败');
-      toast.error('复制失败');
+      setError(t('messages.copyError'));
+      toast.error(t('messages.copyError'));
     }
-  }, [value]);
+  }, [value, t]);
 
   const handleAction = useCallback(
     (action: ToolbarAction) => {

From fae8dea971ed3b19b74fbcf175e32e29f3048eff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:50:36 +0800
Subject: [PATCH 11/71] fix(QrCodePreview): use shadcn Button instead of manual
 button styles

Replace hand-written button class strings with shadcn Button component
using outline and default variants. Removes ~15 lines of duplicated
Tailwind classes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/QrCodePreview.tsx | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/components/QrCodePreview.tsx b/components/QrCodePreview.tsx
index 5640f03..82864f1 100644
--- a/components/QrCodePreview.tsx
+++ b/components/QrCodePreview.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 // 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
 interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -59,27 +60,16 @@ const QrCodePreview = ({
           />
         </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"
-          >
+          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
             <Download className="w-4 h-4 text-muted-foreground" />
             <span className="truncate">{t('qrCode:downloadButton')}</span>
-          </button>
+          </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"
-          >
+          <Button variant="default" size="sm" onClick={onCopy} className="flex-1">
             <Copy className="w-4 h-4" />
             <span className="truncate">{t('qrCode:copyQrButton')}</span>
-          </button>
+          </Button>
         </div>
       </div>
     </div>

From cdad9bda682b28ad7c4b225e2e0d58b56ca20465 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:51:30 +0800
Subject: [PATCH 12/71] docs(GlobalSnackbar): clarify relationship with sonner
 toast

Add note explaining when to use GlobalSnackbar (provider context,
severity levels, custom positioning) vs sonner toast (simple one-off
messages).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/GlobalSnackbar.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/GlobalSnackbar.tsx b/components/GlobalSnackbar.tsx
index f663106..096dee8 100644
--- a/components/GlobalSnackbar.tsx
+++ b/components/GlobalSnackbar.tsx
@@ -6,6 +6,10 @@
  * 2. 通过 useSnackbarState Hook 使用：在组件内部自动管理状态
  * 3. 通过 SnackbarProvider 和 useSnackbar Hook 使用：全局单例模式
  *
+ * NOTE: 项目同时使用 sonner 的 toast 进行简单的一次性提示。
+ * 本组件适用于需要 severity 级别、Provider 上下文、自定义定位等高级场景。
+ * 简单场景（如复制成功、操作提示）优先使用 `import { toast } from 'sonner'`。
+ *
  * @module GlobalSnackbar
  * @version 1.1.0
  *

From 2e2f6e983583501ab29b979f41fe1db6ba38f565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:52:11 +0800
Subject: [PATCH 13/71] fix(ImageUploader): wrap handleClearFile with
 useCallback

Prevents unnecessary re-renders by memoizing the callback, consistent
with handleFileChange which already uses useCallback.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/ImageUploader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index 6aba860..4744764 100644
--- a/components/ImageUploader.tsx
+++ b/components/ImageUploader.tsx
@@ -41,7 +41,7 @@ const ImageUploader = ({
     [onFileChange, onPreviewUrlChange],
   );
 
-  const handleClearFile = () => {
+  const handleClearFile = useCallback(() => {
     if (previewUrl) {
       URL.revokeObjectURL(previewUrl);
     }
@@ -50,7 +50,7 @@ const ImageUploader = ({
       severity: 'success',
       autoHideDuration: 1000,
     });
-  };
+  }, [previewUrl, onClearFile, showMessage, t]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {

From 8b58dcf02e19139a249f69a9ea8b74adca4b1c35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:53:11 +0800
Subject: [PATCH 14/71] fix(SwitchButtonGroup): remove redundant
 containerPadding conditional

Both branches of the ternary returned 'p-1'. Inline the constant
directly into the className string.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/SwitchButtonGroup.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/SwitchButtonGroup.tsx b/components/SwitchButtonGroup.tsx
index cf4c8ee..831ad7a 100644
--- a/components/SwitchButtonGroup.tsx
+++ b/components/SwitchButtonGroup.tsx
@@ -34,14 +34,10 @@ export default function SwitchButtonGroup<T extends string | number = string>({
     large: 'text-base h-11 px-4 py-2 rounded-lg',
   };
 
-  const containerPadding = size === 'large' ? 'p-1' : 'p-1';
-
   return (
     <div
       className={cn(
-        // 将默认布局设计得更为通用（去掉一刀切的 mb-4，由外部控制布局空间）
-        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground',
-        containerPadding,
+        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
         className,
       )}
       {...props}

From 67629263f913af0cd43d060a2edf2314723314b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:53:48 +0800
Subject: [PATCH 15/71] fix(TopBar): add missing openExtensionPage import

The function was called in handleOpenInTab but never imported from
utils/chromeTabs.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/TopBar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 94327d1..b69c22f 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -15,6 +15,7 @@ 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 { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
 import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数

From 27d3360f9d523c275ca0eda55b7a27bcb672ba45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:54:38 +0800
Subject: [PATCH 16/71] fix(TopBar): add selectedIndex boundary protection in
 keyboard nav

Guard against out-of-bounds access when search results change during
keyboard navigation. Check selectedIndex < totalItems before accessing
arrays.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/TopBar.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index b69c22f..bad30ac 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -126,17 +126,19 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
     } else if (e.key === 'Enter') {
       e.preventDefault();
-      if (selectedIndex >= 0) {
+      if (selectedIndex >= 0 && selectedIndex < totalItems) {
         if (searchQuery.trim()) {
           handleSelectFeature(searchResults[selectedIndex]);
         } else {
           const selectedQuery = displayedHistory[selectedIndex];
-          setSearchQuery(selectedQuery);
-          setSelectedIndex(-1);
-          const matched = FEATURES.find(
-            (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
-          );
-          if (matched) handleSelectFeature(matched);
+          if (selectedQuery) {
+            setSearchQuery(selectedQuery);
+            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]);

From 003dad5d8b9d16a5b310acba500a3abce5e3a180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 13:55:54 +0800
Subject: [PATCH 17/71] fix(RouterContainer): remove unnecessary empty-dep
 useMemo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

getEntryPointType() is a simple config getter. Replace useMemo(() => ..., [])
with a direct call — the empty dep array made the memo pointless.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/RouterContainer.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/RouterContainer.tsx b/components/RouterContainer.tsx
index fbcb3ce..f38db58 100644
--- a/components/RouterContainer.tsx
+++ b/components/RouterContainer.tsx
@@ -14,9 +14,7 @@ export default function RouterContainer() {
     return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
   }, [currentPage]);
 
-  const entryPointType = useMemo(() => {
-    return getEntryPointType();
-  }, []);
+  const entryPointType = getEntryPointType();
 
   // 骨架屏加载状态守卫
   if (!isLoaded) {

From a3f89d07ea049c03a0fc6c280cb4dcdd933d3ef3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 14:06:19 +0800
Subject: [PATCH 18/71] feat(i18n): add missing translation keys for error
 boundaries and copy messages

Add keys for errorBoundary, pageErrorBoundary, router, and
messages.copyEmpty in both zh and en locales.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 i18n/locales/en/common.json | 17 ++++++++++++++++-
 i18n/locales/zh/common.json | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
index 4ddd562..7e26906 100644
--- a/i18n/locales/en/common.json
+++ b/i18n/locales/en/common.json
@@ -24,7 +24,22 @@
   },
   "messages": {
     "copySuccess": "Copied to clipboard",
-    "copyError": "Copy failed"
+    "copyError": "Copy failed",
+    "copyEmpty": "Nothing to copy"
+  },
+  "errorBoundary": {
+    "title": "Oops, something went wrong",
+    "description": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
+    "refresh": "Refresh App",
+    "retry": "Retry"
+  },
+  "pageErrorBoundary": {
+    "title": "This feature has encountered an error",
+    "description": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu."
+  },
+  "router": {
+    "notFound": "Page Not Found",
+    "notFoundDescription": "This feature is not available or has been removed in the current runtime ({{entryPointType}})."
   },
   "textInputArea": {
     "clear": "Clear",
diff --git a/i18n/locales/zh/common.json b/i18n/locales/zh/common.json
index cd26eca..ef5dcf3 100644
--- a/i18n/locales/zh/common.json
+++ b/i18n/locales/zh/common.json
@@ -24,7 +24,22 @@
   },
   "messages": {
     "copySuccess": "已复制到剪贴板",
-    "copyError": "复制失败"
+    "copyError": "复制失败",
+    "copyEmpty": "无内容可复制"
+  },
+  "errorBoundary": {
+    "title": "糟糕，出了点问题",
+    "description": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
+    "refresh": "刷新应用",
+    "retry": "重新尝试"
+  },
+  "pageErrorBoundary": {
+    "title": "该功能运行异常",
+    "description": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
+  },
+  "router": {
+    "notFound": "页面未找到",
+    "notFoundDescription": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。"
   },
   "textInputArea": {
     "clear": "清空",

From 0908358f978f238129ec3c329763367cc96a21e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 14:08:10 +0800
Subject: [PATCH 19/71] fix(CopyButton): replace hardcoded Chinese strings with
 i18n t() calls

Use useTranslation('common') for tooltip, copy empty/success/error
toast messages.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/CopyButton.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index cf06fce..99570de 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -4,6 +4,7 @@ import { copyTextToClipboard } from '@/utils/clipboard';
 import { cn } from '@/lib/utils';
 import { buttonVariants, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
   text: string;
@@ -12,12 +13,13 @@ interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
 
 export const CopyButton: React.FC<CopyButtonProps> = ({
   text,
-  tooltip = '复制',
+  tooltip,
   variant = 'ghost',
   size = 'sm',
   className,
   ...props
 }) => {
+  const { t } = useTranslation('common');
   const [copied, setCopied] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -31,18 +33,18 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
     e.stopPropagation();
 
     if (!text) {
-      toast.error('无内容可复制');
+      toast.error(t('messages.copyEmpty'));
       return;
     }
 
     const success = await copyTextToClipboard(text);
     if (success) {
-      toast.success('复制成功');
+      toast.success(t('messages.copySuccess'));
       setCopied(true);
       if (timerRef.current) clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => setCopied(false), 1500);
     } else {
-      toast.error('复制失败');
+      toast.error(t('messages.copyError'));
     }
   };
 
@@ -50,7 +52,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
     <button
       type="button"
       onClick={handleCopy}
-      title={tooltip}
+      title={tooltip ?? t('buttons.copy')}
       className={cn(
         buttonVariants({ variant, size }),
         'h-8 w-8',

From f40485e2dc27e56da311ebedcd50169df0d657ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 14:10:11 +0800
Subject: [PATCH 20/71] fix(ErrorBoundary): replace hardcoded Chinese with i18n
 via withTranslation HOC

Use react-i18next withTranslation HOC for class component to translate
title, description, and refresh button text.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/ErrorBoundary.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
index 3789b0e..c74e7a6 100644
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -1,8 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
+import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
-interface Props {
+interface Props extends WithTranslation {
   children: ReactNode;
 }
 
@@ -11,10 +12,7 @@ interface State {
   error: Error | null;
 }
 
-/**
- * 错误边界组件：捕获子组件树中的 JavaScript 错误
- */
-export class ErrorBoundary extends Component<Props, State> {
+class ErrorBoundaryBase extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -39,6 +37,7 @@ export class ErrorBoundary extends Component<Props, State> {
   };
 
   render() {
+    const { t } = this.props;
     if (this.state.hasError) {
       return (
         <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
@@ -46,10 +45,10 @@ export class ErrorBoundary extends Component<Props, State> {
             <div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
               <AlertCircle className="h-8 w-8" />
             </div>
-            <h2 className="text-xl font-extrabold text-destructive mb-2">糟糕，出了点问题</h2>
-            <p className="text-sm text-muted-foreground mb-6">
-              应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
-            </p>
+            <h2 className="text-xl font-extrabold text-destructive mb-2">
+              {t('errorBoundary.title')}
+            </h2>
+            <p className="text-sm text-muted-foreground mb-6">{t('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">
                 <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
@@ -63,7 +62,7 @@ export class ErrorBoundary extends Component<Props, State> {
               className="rounded-lg font-bold shadow-sm"
             >
               <RefreshCw className="mr-2 h-4 w-4" />
-              刷新应用
+              {t('errorBoundary.refresh')}
             </Button>
           </div>
         </div>
@@ -74,4 +73,5 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 }
 
+export const ErrorBoundary = withTranslation('common')(ErrorBoundaryBase);
 export default ErrorBoundary;

From 4316bb57d2bc096074807652df15150ede9fa20c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 14:11:44 +0800
Subject: [PATCH 21/71] fix(PageErrorBoundary): replace hardcoded Chinese with
 i18n via withTranslation HOC

Use react-i18next withTranslation HOC for class component to translate
title, description, and retry button text.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/PageErrorBoundary.tsx | 31 ++++++++++---------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/components/PageErrorBoundary.tsx b/components/PageErrorBoundary.tsx
index 6bb511e..bb1cc12 100644
--- a/components/PageErrorBoundary.tsx
+++ b/components/PageErrorBoundary.tsx
@@ -1,8 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
+import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
-interface Props {
+interface Props extends WithTranslation {
   children: ReactNode;
   resetKey?: string | number;
 }
@@ -12,11 +13,7 @@ interface State {
   error: Error | null;
 }
 
-/**
- * 页面级错误边界组件：捕获子组件树中的 JavaScript 错误
- * 完美适配 shadcn/ui 语义化主题与暗黑模式
- */
-export class PageErrorBoundary extends Component<Props, State> {
+class PageErrorBoundaryBase extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -41,26 +38,22 @@ export class PageErrorBoundary extends Component<Props, State> {
   };
 
   render() {
+    const { t } = this.props;
     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>
+            <h3 className="text-base font-semibold text-foreground mb-1.5">
+              {t('pageErrorBoundary.title')}
+            </h3>
             <p className="text-xs text-muted-foreground mb-5">
-              该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。
+              {t('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">
@@ -69,11 +62,6 @@ export class PageErrorBoundary extends Component<Props, State> {
               </div>
             )}
 
-            {/*
-              4. 严谨调用 shadcn 原子 Button：
-              去掉全部手动指定的红底白字类名，直接启用 variant="destructive"。
-              它会自动处理 hover 颜色变化、暗黑模式切换以及无障碍高亮边框。
-            */}
             <Button
               variant="destructive"
               size="sm"
@@ -81,7 +69,7 @@ export class PageErrorBoundary extends Component<Props, State> {
               className="font-medium shadow-sm"
             >
               <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-              重新尝试
+              {t('errorBoundary.retry')}
             </Button>
           </div>
         </div>
@@ -92,4 +80,5 @@ export class PageErrorBoundary extends Component<Props, State> {
   }
 }
 
+export const PageErrorBoundary = withTranslation('common')(PageErrorBoundaryBase);
 export default PageErrorBoundary;

From 1e4b6eddc79aea542637fd8a77b1abaada2558c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 14:14:19 +0800
Subject: [PATCH 22/71] fix(RouterContainer): replace hardcoded Chinese with
 i18n t() calls

Use useTranslation('common') for 404 page title and description with
entryPointType interpolation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/RouterContainer.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/RouterContainer.tsx b/components/RouterContainer.tsx
index f38db58..2689f41 100644
--- a/components/RouterContainer.tsx
+++ b/components/RouterContainer.tsx
@@ -1,6 +1,7 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
 import { Suspense, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
@@ -8,6 +9,7 @@ import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展
 
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();
+  const { t } = useTranslation('common');
 
   // 2. 稳定的动态动画类名映射
   const animationClass = useMemo(() => {
@@ -50,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">页面未找到</h3>
+              <h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
               <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-                该功能在当前运行环境（{entryPointType}）下不可用或已被移除。
+                {t('router.notFoundDescription', { entryPointType })}
               </p>
             </div>
           )}

From e263b63ced939d4dfb9adc4e8ff43b6867be8aa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 16:56:27 +0800
Subject: [PATCH 23/71] =?UTF-8?q?fix(pages):=20=E4=BF=AE=E5=A4=8D=20TypeSc?=
 =?UTF-8?q?ript=20=E9=94=99=E8=AF=AF=E3=80=81=E7=A1=AC=E7=BC=96=E7=A0=81?=
 =?UTF-8?q?=E5=AD=97=E7=AC=A6=E4=B8=B2=EF=BC=8C=E7=A7=BB=E9=99=A4=E6=AD=BB?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复 LiveClock.tsx CopyButton size 属性类型错误 (small → sm)
- 修复 ToolCard.tsx 紫色 RGB 值拼写错误 (147,51,2 purple → 147,51,232)
- 替换 4 处硬编码中文为 i18n 调用 (StorageCleaner, JsonTools)
- MarkdownToHtml 预览链接色改为 CSS 变量以支持暗黑模式
- 移除 Base64Converter 中已被 Base64ConverterSection 替代的死代码
  (FileMode.tsx, ImageMode.tsx 及其测试文件)
- 更新 README.md 移除对已删除文件的引用

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 i18n/locales/en/jsonDiff.json                 |   1 +
 i18n/locales/en/jsonFormat.json               |   1 +
 i18n/locales/en/storageCleaner.json           |   1 +
 i18n/locales/zh/jsonDiff.json                 |   1 +
 i18n/locales/zh/jsonFormat.json               |   1 +
 i18n/locales/zh/storageCleaner.json           |   1 +
 pages/Base64Converter/FileMode.tsx            | 220 ---------------
 pages/Base64Converter/ImageMode.tsx           | 259 ------------------
 .../__tests__/FileMode.test.tsx               | 235 ----------------
 .../__tests__/ImageMode.test.tsx              | 182 ------------
 pages/Dashboard/ToolCard.tsx                  |   2 +-
 pages/JsonTools/JsonConvertSection.tsx        |   2 +-
 pages/JsonTools/JsonFormatSection.tsx         |   2 +-
 pages/JsonTools/index.tsx                     |   4 +-
 pages/MarkdownToHtml/index.tsx                |   4 +-
 pages/README.md                               |  14 +-
 pages/StorageCleaner/index.tsx                |   2 +-
 pages/Timestamp/LiveClock.tsx                 |   2 +-
 18 files changed, 21 insertions(+), 913 deletions(-)
 delete mode 100644 pages/Base64Converter/FileMode.tsx
 delete mode 100644 pages/Base64Converter/ImageMode.tsx
 delete mode 100644 pages/Base64Converter/__tests__/FileMode.test.tsx
 delete mode 100644 pages/Base64Converter/__tests__/ImageMode.test.tsx

diff --git a/i18n/locales/en/jsonDiff.json b/i18n/locales/en/jsonDiff.json
index 316a062..41cb13f 100644
--- a/i18n/locales/en/jsonDiff.json
+++ b/i18n/locales/en/jsonDiff.json
@@ -15,6 +15,7 @@
   "diffCount": "{{count}} differences",
   "invalidJson": "Invalid JSON format",
   "emptyHint": "Enter JSON on both sides and click Compare",
+  "fixErrorHint": "Fix the JSON syntax errors above to enable live comparison",
   "added": "Added",
   "removed": "Removed",
   "modified": "Modified"
diff --git a/i18n/locales/en/jsonFormat.json b/i18n/locales/en/jsonFormat.json
index 9b8421b..05aeb97 100644
--- a/i18n/locales/en/jsonFormat.json
+++ b/i18n/locales/en/jsonFormat.json
@@ -14,6 +14,7 @@
   "noContent": "Nothing to copy",
   "invalidJson": "Invalid JSON format",
   "emptyHint": "Enter JSON and click Format",
+  "fixErrorHint": "Fix the JSON syntax errors above to enable live formatting",
   "originalSize": "Original size",
   "formattedSize": "Formatted size",
   "diffMode": "Diff",
diff --git a/i18n/locales/en/storageCleaner.json b/i18n/locales/en/storageCleaner.json
index 17d0a95..6679b99 100644
--- a/i18n/locales/en/storageCleaner.json
+++ b/i18n/locales/en/storageCleaner.json
@@ -2,6 +2,7 @@
   "pageTitle": "Storage Cleaner",
   "pageSubtitle": "Clear cache, cookies, and local storage",
   "loading": "Loading...",
+  "initializing": "Reading site data...",
   "occupied": "Occupied {{size}}",
   "cleaning": "Cleaning...",
   "cleanNow": "Clean Now",
diff --git a/i18n/locales/zh/jsonDiff.json b/i18n/locales/zh/jsonDiff.json
index 6fbe180..bc10e13 100644
--- a/i18n/locales/zh/jsonDiff.json
+++ b/i18n/locales/zh/jsonDiff.json
@@ -15,6 +15,7 @@
   "diffCount": "{{count}} 处差异",
   "invalidJson": "无效的 JSON 格式",
   "emptyHint": "输入两侧 JSON 后点击比较",
+  "fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式比对",
   "added": "新增",
   "removed": "删除",
   "modified": "修改"
diff --git a/i18n/locales/zh/jsonFormat.json b/i18n/locales/zh/jsonFormat.json
index d5d2f95..2f0b584 100644
--- a/i18n/locales/zh/jsonFormat.json
+++ b/i18n/locales/zh/jsonFormat.json
@@ -14,6 +14,7 @@
   "noContent": "无内容可复制",
   "invalidJson": "无效的 JSON 格式",
   "emptyHint": "输入 JSON 后点击格式化",
+  "fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式格式化",
   "originalSize": "原始大小",
   "formattedSize": "格式化后大小",
   "diffMode": "差异比较",
diff --git a/i18n/locales/zh/storageCleaner.json b/i18n/locales/zh/storageCleaner.json
index d17fb7b..6265097 100644
--- a/i18n/locales/zh/storageCleaner.json
+++ b/i18n/locales/zh/storageCleaner.json
@@ -2,6 +2,7 @@
   "pageTitle": "存储清理",
   "pageSubtitle": "清理缓存、Cookies 及本地存储",
   "loading": "加载中...",
+  "initializing": "正在读取站点数据...",
   "occupied": "已占用 {{size}}",
   "cleaning": "正在清理...",
   "cleanNow": "立即清理",
diff --git a/pages/Base64Converter/FileMode.tsx b/pages/Base64Converter/FileMode.tsx
deleted file mode 100644
index d40fd41..0000000
--- a/pages/Base64Converter/FileMode.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-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">
-      <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',
-              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" />
-                <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>
-  );
-}
diff --git a/pages/Base64Converter/ImageMode.tsx b/pages/Base64Converter/ImageMode.tsx
deleted file mode 100644
index eafb0c3..0000000
--- a/pages/Base64Converter/ImageMode.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-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">
-      <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',
-              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 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>
-              <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>
-  );
-}
diff --git a/pages/Base64Converter/__tests__/FileMode.test.tsx b/pages/Base64Converter/__tests__/FileMode.test.tsx
deleted file mode 100644
index 4af2760..0000000
--- a/pages/Base64Converter/__tests__/FileMode.test.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-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();
-    });
-  });
-});
diff --git a/pages/Base64Converter/__tests__/ImageMode.test.tsx b/pages/Base64Converter/__tests__/ImageMode.test.tsx
deleted file mode 100644
index 440dbe7..0000000
--- a/pages/Base64Converter/__tests__/ImageMode.test.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import ImageMode from '../ImageMode';
-
-// 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();
-});
-
-const waitForStorageReady = () => act(() => Promise.resolve());
-
-describe('ImageMode', () => {
-  it('应该渲染图像上传区域', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-    expect(screen.getByText('base64Converter:clickOrDropToImage')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:supportedFormats')).toBeInTheDocument();
-  });
-
-  it('应该接受有效的图像文件', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-
-    const file = new File(['fake-image-data'], 'test.png', { type: 'image/png' });
-    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    fireEvent.change(hiddenInput, { target: { files: [file] } });
-
-    await waitFor(() => {
-      expect(screen.getByText('test.png')).toBeInTheDocument();
-      expect(screen.getByText('base64Converter:base64Output')).toBeInTheDocument();
-    });
-  });
-
-  it('应该拒绝非图像文件', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-
-    const file = new File(['not an image'], 'test.txt', { type: 'text/plain' });
-    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    fireEvent.change(hiddenInput, { target: { files: [file] } });
-
-    await waitFor(() => {
-      expect(screen.getByRole('alert')).toHaveTextContent('base64Converter:unsupportedImageType');
-    });
-  });
-
-  it('应该拒绝超出大小限制的图像', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-
-    const largeContent = new Uint8Array(11 * 1024 * 1024);
-    const file = new File([largeContent], 'large.png', { type: 'image/png' });
-
-    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(<ImageMode />);
-    await waitForStorageReady();
-
-    // 没有 MIME 类型但有正确扩展名
-    const file = new File(['fake'], 'test.jpg');
-    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    fireEvent.change(hiddenInput, { target: { files: [file] } });
-
-    await waitFor(() => {
-      expect(screen.getByText('test.jpg')).toBeInTheDocument();
-    });
-  });
-
-  it('点击清除按钮应该清空图像状态', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-
-    const file = new File(['fake'], 'test.png', { type: 'image/png' });
-    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    fireEvent.change(hiddenInput, { target: { files: [file] } });
-
-    await waitFor(() => {
-      expect(screen.getByText('test.png')).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByText('base64Converter:clear'));
-
-    await waitFor(() => {
-      expect(screen.queryByText('test.png')).not.toBeInTheDocument();
-      expect(screen.getByText('base64Converter:clickOrDropToImage')).toBeInTheDocument();
-    });
-  });
-
-  it('应该显示图像预览', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-
-    const file = new File(['fake-image'], 'test.png', { type: 'image/png' });
-    const hiddenInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    fireEvent.change(hiddenInput, { target: { files: [file] } });
-
-    await waitFor(() => {
-      const img = screen.getByAltText('preview');
-      expect(img).toBeInTheDocument();
-      expect(img.tagName.toLowerCase()).toBe('img');
-    });
-  });
-
-  it('应该渲染 encode/decode 切换按钮', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-    expect(screen.getByText('base64Converter:encode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:decode')).toBeInTheDocument();
-  });
-
-  it('解码 PNG Base64 后应该显示图像预览', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-    fireEvent.click(screen.getByText('base64Converter:decode'));
-
-    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
-    fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
-
-    act(() => {
-      vi.advanceTimersByTime(250);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('base64Converter:decodedImageOutput')).toBeInTheDocument();
-      const img = screen.getByAltText('decoded preview');
-      expect(img).toBeInTheDocument();
-      expect(img.tagName.toLowerCase()).toBe('img');
-    });
-  });
-
-  it('解码后默认文件名应该为 decoded.png', async () => {
-    render(<ImageMode />);
-    await waitForStorageReady();
-    fireEvent.click(screen.getByText('base64Converter:decode'));
-
-    const input = await screen.findByPlaceholderText('base64Converter:decodeBase64Placeholder');
-    fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
-
-    act(() => {
-      vi.advanceTimersByTime(250);
-    });
-
-    expect(await screen.findByDisplayValue('decoded.png')).toBeInTheDocument();
-  });
-
-  it('解码非法 Base64 应该显示 invalidBase64 错误', async () => {
-    render(<ImageMode />);
-    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();
-    });
-  });
-});
diff --git a/pages/Dashboard/ToolCard.tsx b/pages/Dashboard/ToolCard.tsx
index 08b4819..e8f6379 100644
--- a/pages/Dashboard/ToolCard.tsx
+++ b/pages/Dashboard/ToolCard.tsx
@@ -10,7 +10,7 @@ const PALETTE_COLORS: Record<PaletteColorKey, string> = {
   success: '22, 163, 74', // green
   warning: '217, 119, 6', // amber (存储清理的橙色轴)
   error: '220, 38, 38', // red
-  secondary: '147, 51, 2 purple',
+  secondary: '147, 51, 232',
   info: '37, 99, 235', // blue
 };
 
diff --git a/pages/JsonTools/JsonConvertSection.tsx b/pages/JsonTools/JsonConvertSection.tsx
index 8abd951..46eca77 100644
--- a/pages/JsonTools/JsonConvertSection.tsx
+++ b/pages/JsonTools/JsonConvertSection.tsx
@@ -133,7 +133,7 @@ export default function JsonConvertSection({
         /* 5. 空状态提示容器：完美的中性虚线引导，不喧宾夺主 */
         <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
           <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
-            {error ? '请修正上方 JSON 的语法错误以激活流式转换' : t(`jsonFormat:${pk}EmptyHint`)}
+            {error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
           </p>
         </div>
       )}
diff --git a/pages/JsonTools/JsonFormatSection.tsx b/pages/JsonTools/JsonFormatSection.tsx
index bc4b091..bcd8076 100644
--- a/pages/JsonTools/JsonFormatSection.tsx
+++ b/pages/JsonTools/JsonFormatSection.tsx
@@ -160,7 +160,7 @@ export default function JsonFormatSection() {
         /* 空状态指示引导区 */
         <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
           <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
-            {error ? '请修正上方 JSON 语法错误以开启实时流式格式化' : t('jsonFormat:emptyHint')}
+            {error ? t('jsonFormat:fixErrorHint') : t('jsonFormat:emptyHint')}
           </p>
         </div>
       )}
diff --git a/pages/JsonTools/index.tsx b/pages/JsonTools/index.tsx
index c5f7079..0b58ff0 100644
--- a/pages/JsonTools/index.tsx
+++ b/pages/JsonTools/index.tsx
@@ -182,9 +182,7 @@ export default function Index() {
           ) : (
             <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
               <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
-                {leftError || rightError
-                  ? '请修正上方 JSON 的语法错误以开启实时流式比对'
-                  : t('jsonDiff:emptyHint')}
+                {leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
               </p>
             </div>
           )}
diff --git a/pages/MarkdownToHtml/index.tsx b/pages/MarkdownToHtml/index.tsx
index a43eda3..cf9e6e5 100644
--- a/pages/MarkdownToHtml/index.tsx
+++ b/pages/MarkdownToHtml/index.tsx
@@ -37,7 +37,7 @@ const PREVIEW_STYLES = `
   .markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
   .markdown-body h2 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.35em; }
   .markdown-body p { margin-top: 0; margin-bottom: 16px; }
-  .markdown-body a { color: #3b82f6; text-decoration: none; }
+  .markdown-body a { color: var(--md-link-color); text-decoration: none; }
   .markdown-body a:hover { text-decoration: underline; }
   .markdown-body code {
     background-color: var(--md-code-bg);
@@ -110,6 +110,7 @@ export default function MarkdownToHtmlPage() {
           --md-pre-bg: rgba(255,255,255,0.04); 
           --md-muted: #8b949e;
           --md-quote-line: rgba(255,255,255,0.25);
+          --md-link-color: #58a6ff;
         }`
       : `:root { 
           --md-bg: #ffffff;
@@ -119,6 +120,7 @@ export default function MarkdownToHtmlPage() {
           --md-pre-bg: rgba(128,128,128,0.03); 
           --md-muted: #4b5563;
           --md-quote-line: rgba(128,128,128,0.3);
+          --md-link-color: #3b82f6;
         }`;
 
     // 💡 3. 核心大清洗：将全局基础树（html, body）与派生样式完全独立硬编码，杜绝任何语法踩踏
diff --git a/pages/README.md b/pages/README.md
index 7cb5080..c3a15a2 100644
--- a/pages/README.md
+++ b/pages/README.md
@@ -106,14 +106,12 @@ JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
 
 Base64 编解码工具，支持文本/文件/图片三种模式。
 
-| 文件                         | 用途                 |
-| ---------------------------- | -------------------- |
-| `index.tsx`                  | 页面入口，子模式切换 |
-| `useBase64Converter.ts`      | 业务逻辑 Hook        |
-| `TextMode.tsx`               | 文本模式             |
-| `FileMode.tsx`               | 文件模式             |
-| `ImageMode.tsx`              | 图片模式             |
-| `Base64ConverterSection.tsx` | 通用转换区域         |
+| 文件                         | 用途                  |
+| ---------------------------- | --------------------- |
+| `index.tsx`                  | 页面入口，子模式切换  |
+| `useBase64Converter.ts`      | 业务逻辑 Hook         |
+| `TextMode.tsx`               | 文本模式              |
+| `Base64ConverterSection.tsx` | 文件/图片通用转换区域 |
 
 ### MarkdownToHtml/
 
diff --git a/pages/StorageCleaner/index.tsx b/pages/StorageCleaner/index.tsx
index 8cf82af..02ddd2d 100644
--- a/pages/StorageCleaner/index.tsx
+++ b/pages/StorageCleaner/index.tsx
@@ -36,7 +36,7 @@ export default function Index() {
       <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
         <Loader2 className="h-6 w-6 text-muted-foreground/80" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          正在读取站点数据...
+          {t('storageCleaner:initializing')}
         </span>
       </div>
     );
diff --git a/pages/Timestamp/LiveClock.tsx b/pages/Timestamp/LiveClock.tsx
index a809183..736e7c5 100644
--- a/pages/Timestamp/LiveClock.tsx
+++ b/pages/Timestamp/LiveClock.tsx
@@ -88,7 +88,7 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
       <CopyButton
         text={currentDisplay.text}
         tooltip={t('timestamp:copyTsTooltip')}
-        size="small"
+        size="sm"
         className="h-7 w-7 rounded-md border" // 移除了硬编码的颜色配置表，完全交由组件的内置 Class 渲染
       />
     </div>

From 62c880b0a835125520d480c46d8439262c5826ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 17:07:39 +0800
Subject: [PATCH 24/71] =?UTF-8?q?fix(CopyButton,=20LiveClock):=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=8C=89=E9=92=AE=E5=A4=A7=E5=B0=8F=E4=B8=BA=20'icon'?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=E7=A1=AC=E7=BC=96=E7=A0=81=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CopyButton.tsx     | 3 +--
 pages/Timestamp/LiveClock.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 99570de..608edf7 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -15,7 +15,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   text,
   tooltip,
   variant = 'ghost',
-  size = 'sm',
+  size = 'icon',
   className,
   ...props
 }) => {
@@ -55,7 +55,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       title={tooltip ?? t('buttons.copy')}
       className={cn(
         buttonVariants({ variant, size }),
-        'h-8 w-8',
         copied &&
           'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
         className,
diff --git a/pages/Timestamp/LiveClock.tsx b/pages/Timestamp/LiveClock.tsx
index 736e7c5..a503e87 100644
--- a/pages/Timestamp/LiveClock.tsx
+++ b/pages/Timestamp/LiveClock.tsx
@@ -88,8 +88,7 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
       <CopyButton
         text={currentDisplay.text}
         tooltip={t('timestamp:copyTsTooltip')}
-        size="sm"
-        className="h-7 w-7 rounded-md border" // 移除了硬编码的颜色配置表，完全交由组件的内置 Class 渲染
+        className="h-7 w-7 rounded-md border"
       />
     </div>
   );

From c735a0aa1a4b626004087edf3e5095b442ee190a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 22:55:28 +0800
Subject: [PATCH 25/71] =?UTF-8?q?refactor(TextInputArea):=20=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8=20CopyButton=20=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E5=86=85=E8=81=94=E5=A4=8D=E5=88=B6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/TextInputArea.tsx |  27 ++---
 package-lock.json            | 198 +++++++++++++++++++++++++----------
 2 files changed, 152 insertions(+), 73 deletions(-)

diff --git a/components/TextInputArea.tsx b/components/TextInputArea.tsx
index f0b32e3..a41c188 100644
--- a/components/TextInputArea.tsx
+++ b/components/TextInputArea.tsx
@@ -1,8 +1,9 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
-import { Copy, X } from 'lucide-react';
+import { X } from 'lucide-react';
 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;
@@ -187,16 +188,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     onClear?.();
   }, [isControlled, onChange, onClear, t]);
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(value);
-      toast.success(t('messages.copySuccess'));
-    } catch {
-      setError(t('messages.copyError'));
-      toast.error(t('messages.copyError'));
-    }
-  }, [value, t]);
-
   const handleAction = useCallback(
     (action: ToolbarAction) => {
       const isDisabled =
@@ -284,14 +275,12 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
             {/* 右侧系统按钮组 */}
             <div className="flex items-center gap-1.5 ml-auto shrink-0">
               {allowCopy && value && (
-                <button
-                  type="button"
-                  onClick={handleCopy}
-                  aria-label={t('textInputArea.copyContent')}
-                  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>
+                <CopyButton
+                  text={value}
+                  tooltip={t('textInputArea.copyContent')}
+                  size="sm"
+                  className="h-7 w-7 p-1"
+                />
               )}
               {showClear && value && !disabled && !readOnly && (
                 <button
diff --git a/package-lock.json b/package-lock.json
index 7c106be..73195ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -215,7 +215,7 @@
       "version": "5.1.11",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
       "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/generational-cache": "^1.0.1",
@@ -232,7 +232,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
       "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/generational-cache": "^1.0.1",
@@ -249,7 +249,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
       "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
@@ -259,7 +259,7 @@
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
       "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@babel/code-frame": {
@@ -546,7 +546,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
       "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "css-tree": "^3.0.0"
@@ -559,7 +559,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
       "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -579,7 +579,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
       "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -603,7 +603,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.1.tgz",
       "integrity": "sha512-eZ5XOtyhK+mggRafYUWzA0tvaYOFgdY8AkgQiCJF9qNAePnUo/zmsqqYubBBb3sQ8uNUaSKTY9s9klfRaAXL0g==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -631,7 +631,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
       "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -654,7 +654,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.4.tgz",
       "integrity": "sha512-wgsqt92b7C7tQhIdPNxj0n9zuUbQlvAuI1exyzeNrOKOi62SD7ren8zqszmpVREjAOqg8cD2FqYhQfAuKjk4sw==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -679,7 +679,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
       "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -822,6 +822,7 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
       "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -833,6 +834,7 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
       "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -843,6 +845,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
       "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -856,6 +859,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -872,6 +876,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -888,6 +893,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -904,6 +910,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -920,6 +927,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -936,6 +944,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -952,6 +961,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -968,6 +978,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -984,6 +995,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1000,6 +1012,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1016,6 +1029,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1032,6 +1046,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1048,6 +1063,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1064,6 +1080,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1080,6 +1097,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1096,6 +1114,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1112,6 +1131,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1128,6 +1148,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1144,6 +1165,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1160,6 +1182,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1176,6 +1199,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1192,6 +1216,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1208,6 +1233,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1224,6 +1250,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1240,6 +1267,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1256,6 +1284,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1485,7 +1514,7 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
       "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
@@ -1605,7 +1634,7 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1636,7 +1665,7 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1663,6 +1692,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
       "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -1719,6 +1749,7 @@
       "version": "0.132.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.132.0.tgz",
       "integrity": "sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
@@ -2507,6 +2538,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2523,6 +2555,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2539,6 +2572,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2555,6 +2589,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2571,6 +2606,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2587,6 +2623,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2603,6 +2640,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2619,6 +2657,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2635,6 +2674,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2651,6 +2691,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2667,6 +2708,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2683,6 +2725,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2699,6 +2742,7 @@
       "cpu": [
         "wasm32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2717,6 +2761,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2733,6 +2778,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2746,12 +2792,14 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
       "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
       "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@testing-library/dom": {
@@ -2846,6 +2894,7 @@
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
       "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2862,6 +2911,7 @@
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
       "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/deep-eql": "*",
@@ -2883,6 +2933,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
       "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/estree": {
@@ -2933,7 +2984,7 @@
       "version": "25.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
       "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
@@ -2949,7 +3000,7 @@
       "version": "19.2.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz",
       "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -2959,7 +3010,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -3265,6 +3316,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.7.tgz",
       "integrity": "sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
@@ -3282,6 +3334,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.7.tgz",
       "integrity": "sha512-vY7nuamKgfvpA1Koa3oYIw/k7D6kZnpGyNMZW8loow2bsBYla1TFdqTaXncWdRn4pgwNs+90RhnXhJScDwQeJA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/spy": "4.1.7",
@@ -3320,6 +3373,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.7.tgz",
       "integrity": "sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/utils": "4.1.7",
@@ -3333,6 +3387,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.7.tgz",
       "integrity": "sha512-ZacLzja+TmJeZ1h14xW2FB/WpeimUD3haBXQPyJqxvo8jQTmfeA8zv58mtjN2C7EHXZDYVcVYdYmAxjkWVvKCw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/pretty-format": "4.1.7",
@@ -3348,6 +3403,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.7.tgz",
       "integrity": "sha512-kbkI5LMWakyuTIvs6fUJ5qdIVb1XVKsYJAT4OJ938cHMROYMSfmoQdZy0aaAnjbbc8F61vkoTqz/Az+/HiIu5Q==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -3465,7 +3521,7 @@
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -3837,6 +3893,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
       "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3987,7 +4044,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
       "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "require-from-string": "^2.0.2"
@@ -4183,7 +4240,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/bundle-name": {
@@ -4349,6 +4406,7 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
       "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -4620,7 +4678,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/concat-map": {
@@ -4743,7 +4801,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
       "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.27.1",
@@ -4797,14 +4855,14 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
       "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "whatwg-mimetype": "^5.0.0",
@@ -4903,7 +4961,7 @@
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
       "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/deep-extend": {
@@ -5029,6 +5087,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -5246,7 +5305,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
       "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=20.19.0"
@@ -5399,6 +5458,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
       "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
@@ -5472,7 +5532,7 @@
       "version": "0.27.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
       "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -5905,6 +5965,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
       "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=12.0.0"
@@ -5992,6 +6053,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -6168,6 +6230,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -6628,7 +6691,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
       "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@exodus/bytes": "^1.6.0"
@@ -7255,7 +7318,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-primitive": {
@@ -7520,7 +7583,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
       "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -7549,7 +7612,7 @@
       "version": "29.1.1",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
       "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/css-color": "^5.1.11",
@@ -7590,7 +7653,7 @@
       "version": "11.5.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.0.tgz",
       "integrity": "sha512-5YgH9UJd7wVb9hIouI2adWpgqrrICkt070Dnj8EUY1+B4B2P9eRLPAkAAo6NICA7CEhOIeBHl46u9zSNpNu7zA==",
-      "devOptional": true,
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": "20 || >=22"
@@ -7819,6 +7882,7 @@
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
       "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -7851,6 +7915,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7871,6 +7936,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7891,6 +7957,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7911,6 +7978,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7931,6 +7999,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7951,6 +8020,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7971,6 +8041,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7991,6 +8062,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8011,6 +8083,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8031,6 +8104,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8051,6 +8125,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8386,6 +8461,7 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -8470,7 +8546,7 @@
       "version": "2.27.1",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
       "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "CC0-1.0"
     },
     "node_modules/merge2": {
@@ -8677,6 +8753,7 @@
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
       "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9163,7 +9240,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
       "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^8.0.0"
@@ -9203,6 +9280,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/perfect-debounce": {
@@ -9222,6 +9300,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9316,6 +9395,7 @@
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
       "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -9660,7 +9740,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -10068,7 +10148,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10145,6 +10225,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.2.tgz",
       "integrity": "sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@oxc-project/types": "=0.132.0",
@@ -10311,7 +10392,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "xmlchars": "^2.2.0"
@@ -10537,6 +10618,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/signal-exit": {
@@ -10622,7 +10704,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -10633,7 +10715,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -10678,6 +10760,7 @@
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/std-env": {
@@ -11009,7 +11092,7 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
@@ -11138,7 +11221,7 @@
       "version": "5.47.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.47.1.tgz",
       "integrity": "sha512-tPbLXTI6ohPASb/1YViL428oEHu6/qv1OxqYnfaonVCFHqx4+wCd95pHrQWsL5X4pl90CTyW9piSAsS2L0VoMw==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -11197,12 +11280,14 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
       "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tinyexec": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.2.tgz",
       "integrity": "sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -11212,6 +11297,7 @@
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
       "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -11237,7 +11323,7 @@
       "version": "7.0.30",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.30.tgz",
       "integrity": "sha512-ELrFxuqsDdHUwoh0XxDbxuLD3Wnz49Z57IFvTtvWy1hJdcMZjXLIuonjilCiWHlT2GbE4Wlv1wKVTzDFnXH1aw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tldts-core": "^7.0.30"
@@ -11250,7 +11336,7 @@
       "version": "7.0.30",
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.30.tgz",
       "integrity": "sha512-uiHN8PIB1VmWyS98eZYja4xzlYqeFZVjb4OuYlJQnZAuJhMw4PbKQOKgHKhBdJR3FE/t5mUQ1Kd80++B+qhD1Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tmp": {
@@ -11280,7 +11366,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
       "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "tldts": "^7.0.5"
@@ -11293,7 +11379,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
       "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.3.1"
@@ -11443,7 +11529,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -11514,7 +11600,7 @@
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
       "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=20.18.1"
@@ -11524,7 +11610,7 @@
       "version": "7.24.6",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
       "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unimport": {
@@ -11773,6 +11859,7 @@
       "version": "8.0.14",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
       "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
@@ -11873,6 +11960,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.7.tgz",
       "integrity": "sha512-flYyaFd2CgoCoU+0UKt3pxksgC+S02iTDN0n3LtqaMeXsI9SBcdNujc2k0DeFLzUn/0k538yNjOSdwgCqcrwJA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/expect": "4.1.7",
@@ -11971,7 +12059,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "xml-name-validator": "^5.0.0"
@@ -12113,7 +12201,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
       "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=20"
@@ -12130,7 +12218,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
       "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=20"
@@ -12140,7 +12228,7 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
       "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@exodus/bytes": "^1.11.0",
@@ -12274,6 +12362,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
       "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "siginfo": "^2.0.0",
@@ -12479,7 +12568,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18"
@@ -12513,7 +12602,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/y18n": {
@@ -12537,6 +12626,7 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
       "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
       "license": "ISC",
       "optional": true,
       "bin": {

From 64e23994a6f7960566456b3ce0cefc7a65ffd3bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 00:39:47 +0800
Subject: [PATCH 26/71] =?UTF-8?q?fix(test):=20=E4=BF=AE=E5=A4=8D=20CopyBut?=
 =?UTF-8?q?ton=20mock=20=E6=9C=AA=E6=8D=95=E8=8E=B7=20clipboard=20writeTex?=
 =?UTF-8?q?t=20=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vitest.setup.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/vitest.setup.ts b/vitest.setup.ts
index d20df79..6f4aaab 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -80,7 +80,11 @@ vi.mock('@/components/CopyButton', () => ({
         type: 'button',
         onClick: async (e: React.MouseEvent) => {
           if (text) {
-            await navigator.clipboard.writeText(text);
+            try {
+              await navigator.clipboard.writeText(text);
+            } catch {
+              // 与真实 CopyButton 行为一致：失败时静默处理
+            }
           }
           onClick?.(e);
         },

From aa23a263fe1f617f392bd40a55b38f12fd515198 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 19:21:54 +0800
Subject: [PATCH 27/71] =?UTF-8?q?refactor:=20=E8=BF=81=E7=A7=BB=20i18n=20?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E4=BB=8E=20react-i18next=20=E5=88=B0=20chrom?=
 =?UTF-8?q?e.i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/CopyButton.tsx                     |    4 +-
 components/DecodeResultPaper.tsx              |    4 +-
 components/ErrorBoundary.tsx                  |   17 +-
 components/ImageUploader.tsx                  |    4 +-
 components/PageErrorBoundary.tsx              |   15 +-
 components/QrCodePreview.tsx                  |    4 +-
 components/RouterContainer.tsx                |    4 +-
 components/TextInputArea.tsx                  |    4 +-
 components/TopBar.tsx                         |   14 +-
 .../__tests__/DecodeResultPaper.test.tsx      |    8 +-
 components/__tests__/ImageUploader.test.tsx   |   18 +-
 components/__tests__/QrCodePreview.test.tsx   |   30 +-
 .../__tests__/StorageCleanerConfirm.test.tsx  |   44 +-
 components/__tests__/TopBar.test.tsx          |   10 +-
 config/__tests__/features.test.ts             |    6 +-
 config/features.tsx                           |   42 +-
 entrypoints/options/App.tsx                   |    6 +-
 entrypoints/options/__tests__/App.test.tsx    |   17 +-
 entrypoints/options/main.tsx                  |    1 -
 entrypoints/popup/main.tsx                    |    1 -
 entrypoints/sidepanel/main.tsx                |    1 -
 i18n/README.md                                |   61 -
 i18n/index.ts                                 |  144 --
 i18n/locales/en/base64Converter.json          |   37 -
 i18n/locales/en/common.json                   |   50 -
 i18n/locales/en/features.json                 |   45 -
 i18n/locales/en/htmlToMarkdown.json           |   16 -
 i18n/locales/en/jsonDiff.json                 |   22 -
 i18n/locales/en/jsonFormat.json               |   42 -
 i18n/locales/en/jwt.json                      |   17 -
 i18n/locales/en/markdownToHtml.json           |   18 -
 i18n/locales/en/qrCode.json                   |   48 -
 i18n/locales/en/rightClickRestorer.json       |   13 -
 i18n/locales/en/storageCleaner.json           |   34 -
 i18n/locales/en/textStatistics.json           |    9 -
 i18n/locales/en/timestamp.json                |   27 -
 i18n/locales/zh/base64Converter.json          |   37 -
 i18n/locales/zh/common.json                   |   50 -
 i18n/locales/zh/features.json                 |   45 -
 i18n/locales/zh/htmlToMarkdown.json           |   16 -
 i18n/locales/zh/jsonDiff.json                 |   22 -
 i18n/locales/zh/jsonFormat.json               |   42 -
 i18n/locales/zh/jwt.json                      |   17 -
 i18n/locales/zh/markdownToHtml.json           |   18 -
 i18n/locales/zh/qrCode.json                   |   48 -
 i18n/locales/zh/rightClickRestorer.json       |   13 -
 i18n/locales/zh/storageCleaner.json           |   34 -
 i18n/locales/zh/textStatistics.json           |    9 -
 i18n/locales/zh/timestamp.json                |   27 -
 package-lock.json                             |  290 +---
 package.json                                  |    3 -
 .../Base64ConverterSection.tsx                |    4 +-
 pages/Base64Converter/TextMode.tsx            |    4 +-
 .../__tests__/TextMode.test.tsx               |   60 +-
 .../Base64Converter/__tests__/index.test.tsx  |   19 +-
 pages/Base64Converter/index.tsx               |    4 +-
 pages/Base64Converter/useBase64Converter.ts   |    4 +-
 pages/Dashboard/index.tsx                     |    4 +-
 pages/HtmlToMarkdown/index.tsx                |    4 +-
 pages/JsonTools/DiffNavigator.tsx             |    4 +-
 pages/JsonTools/DiffResult.tsx                |    4 +-
 pages/JsonTools/JsonConvertSection.tsx        |    4 +-
 pages/JsonTools/JsonFormatSection.tsx         |    4 +-
 pages/JsonTools/index.tsx                     |    4 +-
 pages/Jwt/index.tsx                           |    8 +-
 pages/MarkdownToHtml/index.tsx                |    4 +-
 pages/QrCode/__tests__/index.test.tsx         |   21 +-
 pages/QrCode/components/GeneratePanel.tsx     |    4 +-
 pages/QrCode/components/ParsePanel.tsx        |    4 +-
 pages/QrCode/hooks/useQrCode.ts               |    4 +-
 pages/QrCode/index.tsx                        |    4 +-
 .../__tests__/index.test.tsx                  |    2 +-
 pages/RightClickRestorer/index.tsx            |    4 +-
 pages/StorageCleaner/AutoRefreshToggle.tsx    |    4 +-
 pages/StorageCleaner/CleaningResult.tsx       |    4 +-
 pages/StorageCleaner/ErrorDisplay.tsx         |    4 +-
 pages/StorageCleaner/OptionItem.tsx           |    4 +-
 .../StorageCleaner/StorageCleanerConfirm.tsx  |    6 +-
 pages/StorageCleaner/StorageOptionsGrid.tsx   |    4 +-
 pages/StorageCleaner/index.tsx                |    4 +-
 pages/StorageCleaner/useStorageCleaner.ts     |    4 +-
 pages/TextStatistics/index.tsx                |    4 +-
 pages/Timestamp/LiveClock.tsx                 |    4 +-
 pages/Timestamp/ResultView.tsx                |    4 +-
 pages/Timestamp/index.tsx                     |    4 +-
 pages/Timestamp/useTimestampConverter.ts      |    4 +-
 public/_locales/en/messages.json              | 1290 +++++++++++++++++
 public/_locales/zh/messages.json              | 1290 +++++++++++++++++
 utils/__tests__/useLazyTranslation.test.ts    |  193 ---
 utils/chromeI18n.ts                           |  102 ++
 utils/jwt.ts                                  |   12 +-
 utils/useLazyTranslation.ts                   |  109 --
 vitest.setup.ts                               |   85 +-
 wxt.config.ts                                 |   10 +-
 94 files changed, 2987 insertions(+), 1844 deletions(-)
 delete mode 100644 i18n/README.md
 delete mode 100644 i18n/index.ts
 delete mode 100644 i18n/locales/en/base64Converter.json
 delete mode 100644 i18n/locales/en/common.json
 delete mode 100644 i18n/locales/en/features.json
 delete mode 100644 i18n/locales/en/htmlToMarkdown.json
 delete mode 100644 i18n/locales/en/jsonDiff.json
 delete mode 100644 i18n/locales/en/jsonFormat.json
 delete mode 100644 i18n/locales/en/jwt.json
 delete mode 100644 i18n/locales/en/markdownToHtml.json
 delete mode 100644 i18n/locales/en/qrCode.json
 delete mode 100644 i18n/locales/en/rightClickRestorer.json
 delete mode 100644 i18n/locales/en/storageCleaner.json
 delete mode 100644 i18n/locales/en/textStatistics.json
 delete mode 100644 i18n/locales/en/timestamp.json
 delete mode 100644 i18n/locales/zh/base64Converter.json
 delete mode 100644 i18n/locales/zh/common.json
 delete mode 100644 i18n/locales/zh/features.json
 delete mode 100644 i18n/locales/zh/htmlToMarkdown.json
 delete mode 100644 i18n/locales/zh/jsonDiff.json
 delete mode 100644 i18n/locales/zh/jsonFormat.json
 delete mode 100644 i18n/locales/zh/jwt.json
 delete mode 100644 i18n/locales/zh/markdownToHtml.json
 delete mode 100644 i18n/locales/zh/qrCode.json
 delete mode 100644 i18n/locales/zh/rightClickRestorer.json
 delete mode 100644 i18n/locales/zh/storageCleaner.json
 delete mode 100644 i18n/locales/zh/textStatistics.json
 delete mode 100644 i18n/locales/zh/timestamp.json
 create mode 100644 public/_locales/en/messages.json
 create mode 100644 public/_locales/zh/messages.json
 delete mode 100644 utils/__tests__/useLazyTranslation.test.ts
 create mode 100644 utils/chromeI18n.ts
 delete mode 100644 utils/useLazyTranslation.ts

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 608edf7..23f9bb3 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -4,7 +4,7 @@ import { copyTextToClipboard } from '@/utils/clipboard';
 import { cn } from '@/lib/utils';
 import { buttonVariants, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
   text: string;
@@ -19,7 +19,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   className,
   ...props
 }) => {
-  const { t } = useTranslation('common');
+  const { t } = useI18n('common');
   const [copied, setCopied] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
diff --git a/components/DecodeResultPaper.tsx b/components/DecodeResultPaper.tsx
index 5c20dca..3984b0f 100644
--- a/components/DecodeResultPaper.tsx
+++ b/components/DecodeResultPaper.tsx
@@ -10,7 +10,7 @@
 import { Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { formatFileSize } from '@/utils/base64Converter';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 interface DecodeResultPaperProps {
   /** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
@@ -38,7 +38,7 @@ export default function DecodeResultPaper({
   onDownload,
   children,
 }: DecodeResultPaperProps) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   return (
     <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
index c74e7a6..1c62b15 100644
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -1,9 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { getMessage } from '@/utils/chromeI18n';
 
-interface Props extends WithTranslation {
+interface Props {
   children: ReactNode;
 }
 
@@ -12,7 +12,7 @@ interface State {
   error: Error | null;
 }
 
-class ErrorBoundaryBase extends Component<Props, State> {
+class ErrorBoundary extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -37,7 +37,6 @@ class ErrorBoundaryBase extends Component<Props, State> {
   };
 
   render() {
-    const { t } = this.props;
     if (this.state.hasError) {
       return (
         <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
@@ -46,9 +45,11 @@ class ErrorBoundaryBase extends Component<Props, State> {
               <AlertCircle className="h-8 w-8" />
             </div>
             <h2 className="text-xl font-extrabold text-destructive mb-2">
-              {t('errorBoundary.title')}
+              {getMessage('errorBoundary_title')}
             </h2>
-            <p className="text-sm text-muted-foreground mb-6">{t('errorBoundary.description')}</p>
+            <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">
                 <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
@@ -62,7 +63,7 @@ class ErrorBoundaryBase extends Component<Props, State> {
               className="rounded-lg font-bold shadow-sm"
             >
               <RefreshCw className="mr-2 h-4 w-4" />
-              {t('errorBoundary.refresh')}
+              {getMessage('errorBoundary_refresh')}
             </Button>
           </div>
         </div>
@@ -73,5 +74,5 @@ class ErrorBoundaryBase extends Component<Props, State> {
   }
 }
 
-export const ErrorBoundary = withTranslation('common')(ErrorBoundaryBase);
+export { ErrorBoundary };
 export default ErrorBoundary;
diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index 4744764..0173353 100644
--- a/components/ImageUploader.tsx
+++ b/components/ImageUploader.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
 import { useSnackbar } from '@/components/GlobalSnackbar';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 interface ImageUploaderProps {
   /** 选中的文件 */
@@ -29,7 +29,7 @@ const ImageUploader = ({
   dragging,
   onDraggingChange,
 }: ImageUploaderProps) => {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { showMessage } = useSnackbar();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
diff --git a/components/PageErrorBoundary.tsx b/components/PageErrorBoundary.tsx
index bb1cc12..b483612 100644
--- a/components/PageErrorBoundary.tsx
+++ b/components/PageErrorBoundary.tsx
@@ -1,9 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { getMessage } from '@/utils/chromeI18n';
 
-interface Props extends WithTranslation {
+interface Props {
   children: ReactNode;
   resetKey?: string | number;
 }
@@ -13,7 +13,7 @@ interface State {
   error: Error | null;
 }
 
-class PageErrorBoundaryBase extends Component<Props, State> {
+class PageErrorBoundary extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -38,7 +38,6 @@ class PageErrorBoundaryBase extends Component<Props, State> {
   };
 
   render() {
-    const { t } = this.props;
     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">
@@ -48,10 +47,10 @@ class PageErrorBoundaryBase extends Component<Props, State> {
             </div>
 
             <h3 className="text-base font-semibold text-foreground mb-1.5">
-              {t('pageErrorBoundary.title')}
+              {getMessage('pageErrorBoundary_title')}
             </h3>
             <p className="text-xs text-muted-foreground mb-5">
-              {t('pageErrorBoundary.description')}
+              {getMessage('pageErrorBoundary_description')}
             </p>
 
             {this.state.error && (
@@ -69,7 +68,7 @@ class PageErrorBoundaryBase extends Component<Props, State> {
               className="font-medium shadow-sm"
             >
               <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-              {t('errorBoundary.retry')}
+              {getMessage('errorBoundary_retry')}
             </Button>
           </div>
         </div>
@@ -80,5 +79,5 @@ class PageErrorBoundaryBase extends Component<Props, State> {
   }
 }
 
-export const PageErrorBoundary = withTranslation('common')(PageErrorBoundaryBase);
+export { PageErrorBoundary };
 export default PageErrorBoundary;
diff --git a/components/QrCodePreview.tsx b/components/QrCodePreview.tsx
index 82864f1..35c43cb 100644
--- a/components/QrCodePreview.tsx
+++ b/components/QrCodePreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
@@ -21,7 +21,7 @@ const QrCodePreview = ({
   className,
   ...props
 }: QrCodePreviewProps) => {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
 
   // 空状态下的虚线骨架屏
   if (!qrCodeDataUrl) {
diff --git a/components/RouterContainer.tsx b/components/RouterContainer.tsx
index 2689f41..41bd145 100644
--- a/components/RouterContainer.tsx
+++ b/components/RouterContainer.tsx
@@ -1,7 +1,7 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
 import { Suspense, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
@@ -9,7 +9,7 @@ import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展
 
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();
-  const { t } = useTranslation('common');
+  const { t } = useI18n('common');
 
   // 2. 稳定的动态动画类名映射
   const animationClass = useMemo(() => {
diff --git a/components/TextInputArea.tsx b/components/TextInputArea.tsx
index a41c188..06666c7 100644
--- a/components/TextInputArea.tsx
+++ b/components/TextInputArea.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { X } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
 import { CopyButton } from '@/components/CopyButton';
@@ -114,7 +114,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [error, setError] = useState<string>('');
 
-  const { t } = useTranslation('common');
+  const { t } = useI18n('common');
   const placeholder = placeholderProp ?? t('textInputArea.placeholder');
 
   const isControlled = controlledValue !== undefined;
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index bad30ac..bd02c25 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -16,8 +16,8 @@ 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 { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
+import { useI18n } from '@/utils/chromeI18n';
+import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
 
 // 常量配置抽取（无需写在全局变量或 styles 对象里）
@@ -27,7 +27,7 @@ const SEARCH_HISTORY_DISPLAY = 5;
 export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
   const { currentPage, goBack, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
-  const { t, i18n } = useTranslation(['common', 'features']);
+  const { t, i18n } = useI18n(['common', 'features']);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [showResults, setShowResults] = useState(false);
@@ -159,7 +159,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           <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" />
@@ -174,7 +174,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           <input
             ref={inputRef}
             type="text"
-            placeholder={t('common:buttons.search')}
+            placeholder={t('common_buttons_search')}
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
@@ -183,7 +183,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
             }}
             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-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 && (
@@ -281,7 +281,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
         <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
           <ExternalLink className="h-4 w-4" />
         </IconButton>
-        <IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
+        <IconButton onClick={onOpenOptions} title={t('common_buttons_settings')}>
           <Settings className="h-4 w-4" />
         </IconButton>
       </div>
diff --git a/components/__tests__/DecodeResultPaper.test.tsx b/components/__tests__/DecodeResultPaper.test.tsx
index a999307..5d089e3 100644
--- a/components/__tests__/DecodeResultPaper.test.tsx
+++ b/components/__tests__/DecodeResultPaper.test.tsx
@@ -40,7 +40,7 @@ describe('DecodeResultPaper 组件', () => {
 
     it('应渲染下载按钮', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
     });
 
     it('应渲染 children 内容', () => {
@@ -64,7 +64,7 @@ describe('DecodeResultPaper 组件', () => {
 
     it('点击下载按钮时应调用 onDownload', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'base64Converter:download' }));
+      fireEvent.click(screen.getByRole('button', { name: '下载' }));
       expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
     });
   });
@@ -72,12 +72,12 @@ describe('DecodeResultPaper 组件', () => {
   describe('按钮状态', () => {
     it('文件名为空时下载按钮应禁用', () => {
       render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
-      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
     });
 
     it('文件名不为空时下载按钮应启用', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeEnabled();
+      expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
     });
   });
 });
diff --git a/components/__tests__/ImageUploader.test.tsx b/components/__tests__/ImageUploader.test.tsx
index c958ae5..f98bcea 100644
--- a/components/__tests__/ImageUploader.test.tsx
+++ b/components/__tests__/ImageUploader.test.tsx
@@ -7,18 +7,6 @@ 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();
@@ -62,8 +50,8 @@ describe('ImageUploader 组件', () => {
     it('当没有选中文件时应显示上传提示', () => {
       render(<ImageUploader {...defaultProps} />);
       // 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
-      expect(screen.getByText(/clickToUpload/)).toBeInTheDocument();
-      expect(screen.getByText(/supportFormats/)).toBeInTheDocument();
+      expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
+      expect(screen.getByText(/格式/)).toBeInTheDocument();
     });
 
     it('当没有选中文件时应显示 ImageIcon', () => {
@@ -78,7 +66,7 @@ describe('ImageUploader 组件', () => {
       );
       expect(screen.getByText('test.png')).toBeInTheDocument();
       // 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
-      expect(screen.getByText(/clickToChange/)).toBeInTheDocument();
+      expect(screen.getByText(/点击更换/)).toBeInTheDocument();
     });
 
     it('当选中文件时应显示预览图片', () => {
diff --git a/components/__tests__/QrCodePreview.test.tsx b/components/__tests__/QrCodePreview.test.tsx
index b8d0d85..ed5251c 100644
--- a/components/__tests__/QrCodePreview.test.tsx
+++ b/components/__tests__/QrCodePreview.test.tsx
@@ -2,19 +2,6 @@ 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();
@@ -32,7 +19,7 @@ describe('QrCodePreview 组件', () => {
     it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
       // 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
-      expect(screen.getByText(/qrCodeWillShow/)).toBeInTheDocument();
+      expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
@@ -58,7 +45,7 @@ describe('QrCodePreview 组件', () => {
         />,
       );
       // 💡 修复点 3：切换为正则，无缝过检
-      expect(screen.getByText(/downloadButton/)).toBeInTheDocument();
+      expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
@@ -69,14 +56,13 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 4：切换为正则，无缝过检
-      expect(screen.getByText(/copyQrButton/)).toBeInTheDocument();
+      expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
-      expect(screen.queryByText(/downloadButton/)).not.toBeInTheDocument();
-      expect(screen.queryByText(/copyQrButton/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
     });
   });
 
@@ -89,8 +75,7 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 5：点击行为同步更改为正则匹配定位，保障状态修改流一帧直达
-      fireEvent.click(screen.getByText(/downloadButton/));
+      fireEvent.click(screen.getByText(/下载二维码/));
       expect(mockOnDownload).toHaveBeenCalledTimes(1);
     });
 
@@ -102,8 +87,7 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 6：彻底修复第 88 行报错位置，改用正则解开死锁！
-      fireEvent.click(screen.getByText(/copyQrButton/));
+      fireEvent.click(screen.getByText(/复制二维码/));
       expect(mockOnCopy).toHaveBeenCalledTimes(1);
     });
   });
diff --git a/components/__tests__/StorageCleanerConfirm.test.tsx b/components/__tests__/StorageCleanerConfirm.test.tsx
index 36d42cc..b529a11 100644
--- a/components/__tests__/StorageCleanerConfirm.test.tsx
+++ b/components/__tests__/StorageCleanerConfirm.test.tsx
@@ -9,18 +9,6 @@ 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();
@@ -55,26 +43,26 @@ describe('StorageCleanerConfirm 组件', () => {
       renderComponent();
       // 💡 修复点 3：拥抱模糊正则断言。
       // 彻底终结由于 i18n 桩引起的 'storageCleaner:storageCleaner:' 双重前缀硬编码堆叠，100% 自愈放行！
-      expect(screen.getByText(/confirmTitle/)).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: /确认清理/ })).toBeInTheDocument();
     });
 
     it('应显示警告信息', () => {
       renderComponent();
-      expect(screen.getByText(/irreversible/i)).toBeInTheDocument();
+      expect(screen.getByText(/不可撤销/)).toBeInTheDocument();
     });
 
     it('应将选中的选项显示为标签', () => {
       renderComponent();
-      expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
+      expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/Cookies/)).toBeInTheDocument();
     });
 
     it('应显示取消和确认按钮', () => {
       renderComponent();
       // 💡 修复点 4：按钮的 Accessible Name 匹配同步切回高弹性正则模式，抵抗一切国际化双前缀污染
-      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /confirmAction/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /取消/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /确认清理/ })).toBeInTheDocument();
     });
   });
 
@@ -82,7 +70,7 @@ describe('StorageCleanerConfirm 组件', () => {
     it('点击取消时应调用 onClose', () => {
       renderComponent();
 
-      fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      fireEvent.click(screen.getByRole('button', { name: /取消/ }));
       expect(mockOnClose).toHaveBeenCalledTimes(1);
       expect(mockOnConfirm).not.toHaveBeenCalled();
     });
@@ -90,7 +78,7 @@ describe('StorageCleanerConfirm 组件', () => {
     it('点击确认时应调用 onConfirm', () => {
       renderComponent();
 
-      fireEvent.click(screen.getByRole('button', { name: /confirmAction/i }));
+      fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
       expect(mockOnConfirm).toHaveBeenCalledTimes(1);
       expect(mockOnClose).not.toHaveBeenCalled();
     });
@@ -109,10 +97,10 @@ describe('StorageCleanerConfirm 组件', () => {
 
       renderComponent({ options: partialOptions });
 
-      expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/options\.indexedDB/)).toBeInTheDocument();
-      expect(screen.queryByText(/options\.sessionStorage/)).not.toBeInTheDocument();
-      expect(screen.queryByText(/options\.cookies/)).not.toBeInTheDocument();
+      expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
+      expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
     });
 
     it('应处理空选项', () => {
@@ -135,7 +123,7 @@ describe('StorageCleanerConfirm 组件', () => {
   describe('对话框行为测试', () => {
     it('open 为 false 时不应渲染', () => {
       renderComponent({ open: false });
-      expect(screen.queryByText(/confirmTitle/)).not.toBeInTheDocument();
+      expect(screen.queryByRole('heading', { name: /确认清理/ })).not.toBeInTheDocument();
     });
 
     it('应使用不同选项渲染', () => {
@@ -150,8 +138,8 @@ describe('StorageCleanerConfirm 组件', () => {
 
       renderComponent({ options: customOptions });
 
-      expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
-      expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
+      expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
+      expect(screen.getByText(/Cookies/)).toBeInTheDocument();
     });
   });
 });
diff --git a/components/__tests__/TopBar.test.tsx b/components/__tests__/TopBar.test.tsx
index 38e10fa..a538fc5 100644
--- a/components/__tests__/TopBar.test.tsx
+++ b/components/__tests__/TopBar.test.tsx
@@ -55,18 +55,18 @@ describe('TopBar 组件', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByLabelText('common:buttons.back')).toBeInTheDocument();
+      expect(screen.getByLabelText('返回')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'dashboard';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.queryByLabelText('common:buttons.back')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
     });
 
     it('应渲染设置按钮', () => {
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByLabelText('common:buttons.settings')).toBeInTheDocument();
+      expect(screen.getByLabelText('设置')).toBeInTheDocument();
     });
   });
 
@@ -75,7 +75,7 @@ describe('TopBar 组件', () => {
       const handleOpenOptions = vi.fn();
       renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
 
-      fireEvent.click(screen.getByLabelText('common:buttons.settings'));
+      fireEvent.click(screen.getByLabelText('设置'));
       expect(handleOpenOptions).toHaveBeenCalledTimes(1);
     });
 
@@ -83,7 +83,7 @@ describe('TopBar 组件', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
 
-      fireEvent.click(screen.getByLabelText('common:buttons.back'));
+      fireEvent.click(screen.getByLabelText('返回'));
       expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
     });
   });
diff --git a/config/__tests__/features.test.ts b/config/__tests__/features.test.ts
index ac6e29a..cd273dd 100644
--- a/config/__tests__/features.test.ts
+++ b/config/__tests__/features.test.ts
@@ -50,14 +50,14 @@ describe('features', () => {
       const feature = getFeatureByKey('dashboard');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('dashboard');
-      expect(feature?.labelKey).toBe('features:dashboard.title');
+      expect(feature?.labelKey).toBe('dashboard_title');
     });
 
     it('should return timestamp feature', () => {
       const feature = getFeatureByKey('timestamp');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('timestamp');
-      expect(feature?.labelKey).toBe('features:timestamp.title');
+      expect(feature?.labelKey).toBe('timestamp_title');
       expect(feature?.themeColorKey).toBeDefined();
     });
 
@@ -65,7 +65,7 @@ describe('features', () => {
       const feature = getFeatureByKey('storageCleaner');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('storageCleaner');
-      expect(feature?.labelKey).toBe('features:storageCleaner.title');
+      expect(feature?.labelKey).toBe('storageCleaner_title');
     });
 
     it('should return undefined for invalid key', () => {
diff --git a/config/features.tsx b/config/features.tsx
index 3dc631e..ed0df11 100644
--- a/config/features.tsx
+++ b/config/features.tsx
@@ -46,7 +46,7 @@ export interface FeatureConfig {
 export const FEATURES: FeatureConfig[] = [
   {
     key: 'dashboard',
-    labelKey: 'features:dashboard.title',
+    labelKey: 'dashboard_title',
     descriptionKey: '',
     defaultVisible: true,
     components: {
@@ -57,8 +57,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'timestamp',
-    labelKey: 'features:timestamp.title',
-    descriptionKey: 'features:timestamp.description',
+    labelKey: 'timestamp_title',
+    descriptionKey: 'timestamp_description',
     themeColorKey: 'primary',
     icon: Clock,
     defaultVisible: true,
@@ -70,8 +70,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'storageCleaner',
-    labelKey: 'features:storageCleaner.title',
-    descriptionKey: 'features:storageCleaner.description',
+    labelKey: 'storageCleaner_title',
+    descriptionKey: 'storageCleaner_description',
     themeColorKey: 'warning',
     icon: Database,
     defaultVisible: true,
@@ -83,8 +83,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'qrCode',
-    labelKey: 'features:qrCode.title',
-    descriptionKey: 'features:qrCode.description',
+    labelKey: 'qrCode_title',
+    descriptionKey: 'qrCode_description',
     themeColorKey: 'success',
     icon: QrCode,
     defaultVisible: true,
@@ -96,8 +96,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'textStatistics',
-    labelKey: 'features:textStatistics.title',
-    descriptionKey: 'features:textStatistics.description',
+    labelKey: 'textStatistics_title',
+    descriptionKey: 'textStatistics_description',
     themeColorKey: 'secondary',
     icon: FileText,
     defaultVisible: true,
@@ -109,8 +109,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'jwt',
-    labelKey: 'features:jwt.title',
-    descriptionKey: 'features:jwt.description',
+    labelKey: 'jwt_title',
+    descriptionKey: 'jwt_description',
     themeColorKey: 'info',
     icon: Key,
     defaultVisible: true,
@@ -122,8 +122,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'jsonDiff',
-    labelKey: 'features:jsonDiff.title',
-    descriptionKey: 'features:jsonDiff.description',
+    labelKey: 'jsonDiff_title',
+    descriptionKey: 'jsonDiff_description',
     themeColorKey: 'primary',
     icon: GitCompareArrows,
     defaultVisible: true,
@@ -135,8 +135,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'base64Converter',
-    labelKey: 'features:base64Converter.title',
-    descriptionKey: 'features:base64Converter.description',
+    labelKey: 'base64Converter_title',
+    descriptionKey: 'base64Converter_description',
     themeColorKey: 'info',
     icon: ArrowLeftRight,
     defaultVisible: true,
@@ -148,8 +148,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'markdownToHtml',
-    labelKey: 'features:markdownToHtml.title',
-    descriptionKey: 'features:markdownToHtml.description',
+    labelKey: 'markdownToHtml_title',
+    descriptionKey: 'markdownToHtml_description',
     themeColorKey: 'secondary',
     icon: Code,
     defaultVisible: true,
@@ -161,8 +161,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'htmlToMarkdown',
-    labelKey: 'features:htmlToMarkdown.title',
-    descriptionKey: 'features:htmlToMarkdown.description',
+    labelKey: 'htmlToMarkdown_title',
+    descriptionKey: 'htmlToMarkdown_description',
     themeColorKey: 'secondary',
     icon: File,
     defaultVisible: true,
@@ -174,8 +174,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'rightClickRestorer',
-    labelKey: 'features:rightClickRestorer.title',
-    descriptionKey: 'features:rightClickRestorer.description',
+    labelKey: 'rightClickRestorer_title',
+    descriptionKey: 'rightClickRestorer_description',
     themeColorKey: 'success',
     icon: MousePointerClick,
     defaultVisible: true,
diff --git a/entrypoints/options/App.tsx b/entrypoints/options/App.tsx
index 346be9f..3850346 100644
--- a/entrypoints/options/App.tsx
+++ b/entrypoints/options/App.tsx
@@ -28,7 +28,7 @@ import {
 } from '@/config/features';
 import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 
 const PALETTE_COLORS: Record<PaletteColorKey, string> = {
   primary: '#1976d2',
@@ -66,7 +66,7 @@ function SortableFeatureRow({
   isDisabled,
   onToggle,
 }: SortableFeatureRowProps) {
-  const { t } = useTranslation(['features']);
+  const { t } = useI18n(['features']);
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: pageKey,
   });
@@ -154,7 +154,7 @@ function SortableFeatureRow({
 }
 
 export default function App() {
-  const { t } = useTranslation(['features', 'common']);
+  const { t } = useI18n(['features', 'common']);
 
   const initialWindowType = useMemo(() => {
     if (typeof window === 'undefined') return 'popup';
diff --git a/entrypoints/options/__tests__/App.test.tsx b/entrypoints/options/__tests__/App.test.tsx
index d627a0c..a1430fa 100644
--- a/entrypoints/options/__tests__/App.test.tsx
+++ b/entrypoints/options/__tests__/App.test.tsx
@@ -7,6 +7,7 @@ import {
   getDefaultPageOrder,
   getFeatureByKey,
 } from '@/config/features';
+import { getMessage } from '@/utils/chromeI18n';
 
 // Mock storageUtil
 vi.mock('@/utils/chromeStorage', () => ({
@@ -16,14 +17,6 @@ vi.mock('@/utils/chromeStorage', () => ({
   },
 }));
 
-// Mock i18next
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-  withTranslation: () => (Component: any) => Component,
-}));
-
 describe('Options App', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -47,7 +40,7 @@ describe('Options App', () => {
     for (const key of defaultOrder) {
       const feature = getFeatureByKey(key);
       if (feature) {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+        expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
       }
     }
   });
@@ -72,7 +65,7 @@ describe('Options App', () => {
     for (const key of defaultVisible) {
       const feature = getFeatureByKey(key);
       if (feature && key !== 'dashboard') {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+        expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
       }
     }
   });
@@ -97,7 +90,7 @@ describe('Options App', () => {
     for (const key of defaultOrder) {
       const feature = getFeatureByKey(key);
       if (feature) {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+        expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
       }
     }
   });
@@ -125,7 +118,7 @@ describe('Options App', () => {
     for (const key of defaultOrder) {
       const feature = getFeatureByKey(key);
       if (feature) {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
+        expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
       }
     }
   });
diff --git a/entrypoints/options/main.tsx b/entrypoints/options/main.tsx
index d423c3a..1571624 100644
--- a/entrypoints/options/main.tsx
+++ b/entrypoints/options/main.tsx
@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/i18n';
 import '@/src/index.css';
 import App from './App';
 
diff --git a/entrypoints/popup/main.tsx b/entrypoints/popup/main.tsx
index f3fe410..67f30b7 100644
--- a/entrypoints/popup/main.tsx
+++ b/entrypoints/popup/main.tsx
@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/i18n';
 import '@/src/index.css';
 import App from './App.tsx';
 
diff --git a/entrypoints/sidepanel/main.tsx b/entrypoints/sidepanel/main.tsx
index f3fe410..67f30b7 100644
--- a/entrypoints/sidepanel/main.tsx
+++ b/entrypoints/sidepanel/main.tsx
@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/i18n';
 import '@/src/index.css';
 import App from './App.tsx';
 
diff --git a/i18n/README.md b/i18n/README.md
deleted file mode 100644
index dcaa52b..0000000
--- a/i18n/README.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# i18n/
-
-国际化资源目录，管理多语言翻译和 i18next 初始化配置。
-
-## 目录结构
-
-```
-i18n/
-├── index.ts                    # i18next 初始化配置
-└── locales/
-    ├── zh/                     # 中文翻译（默认语言）
-    │   ├── common.json         # 通用文案
-    │   ├── features.json       # 功能模块标题和描述
-    │   ├── timestamp.json      # 时间戳工具翻译
-    │   ├── storageCleaner.json # 存储清理工具翻译
-    │   ├── qrCode.json         # 二维码工具翻译
-    │   ├── textStatistics.json # 文本统计工具翻译
-    │   ├── jwt.json            # JWT 工具翻译
-    │   ├── jsonDiff.json       # JSON 差异工具翻译
-    │   ├── jsonFormat.json     # JSON 格式化工具翻译
-    │   ├── base64Converter.json
-    │   ├── markdownToHtml.json
-    │   ├── htmlToMarkdown.json
-    │   └── rightClickRestorer.json
-    └── en/                     # 英文翻译（结构同上）
-        └── ...
-```
-
-## index.ts
-
-i18next 初始化配置：
-
-- 同步加载 `common` 和 `features` 核心命名空间
-- 自定义 `chromeStorage` 语言检测器，从 Chrome Storage 读取语言偏好
-- `normalizeLanguage()` 将任意语言标识归一化为 `zh` 或 `en`
-- 语言变更时同步更新 Day.js 本地化和 localStorage 快照
-
-## 翻译键格式
-
-- 命名空间：`common`（默认）、`features`、各功能独立命名空间
-- 键格式：`namespace:key`（如 `features:timestamp.title`、`timestamp:unitMs`）
-
-## 使用方式
-
-```tsx
-// 页面组件 — 懒加载翻译
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-const { t } = useLazyTranslation('timestamp');
-t('timestamp:title');
-
-// 全局组件 — 直接使用
-import { useTranslation } from 'react-i18next';
-const { t } = useTranslation(['common', 'features']);
-t('common:settings');
-```
-
-## 添加新翻译
-
-1. 在 `locales/{zh,en}/features.json` 添加功能标题和描述
-2. 创建 `locales/{zh,en}/{功能名}.json` 添加功能专属翻译
-3. 在 `utils/useLazyTranslation.ts` 的 `localeModules` 中注册新命名空间
diff --git a/i18n/index.ts b/i18n/index.ts
deleted file mode 100644
index e467f98..0000000
--- a/i18n/index.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-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;
diff --git a/i18n/locales/en/base64Converter.json b/i18n/locales/en/base64Converter.json
deleted file mode 100644
index 0a59008..0000000
--- a/i18n/locales/en/base64Converter.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "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"
-}
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
deleted file mode 100644
index 7e26906..0000000
--- a/i18n/locales/en/common.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "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",
-    "copyEmpty": "Nothing to copy"
-  },
-  "errorBoundary": {
-    "title": "Oops, something went wrong",
-    "description": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
-    "refresh": "Refresh App",
-    "retry": "Retry"
-  },
-  "pageErrorBoundary": {
-    "title": "This feature has encountered an error",
-    "description": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu."
-  },
-  "router": {
-    "notFound": "Page Not Found",
-    "notFoundDescription": "This feature is not available or has been removed in the current runtime ({{entryPointType}})."
-  },
-  "textInputArea": {
-    "clear": "Clear",
-    "copyContent": "Copy content",
-    "cleared": "Cleared",
-    "placeholder": "placeholder text"
-  }
-}
diff --git a/i18n/locales/en/features.json b/i18n/locales/en/features.json
deleted file mode 100644
index 96dc086..0000000
--- a/i18n/locales/en/features.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "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"
-  }
-}
diff --git a/i18n/locales/en/htmlToMarkdown.json b/i18n/locales/en/htmlToMarkdown.json
deleted file mode 100644
index f3d1660..0000000
--- a/i18n/locales/en/htmlToMarkdown.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "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"
-}
diff --git a/i18n/locales/en/jsonDiff.json b/i18n/locales/en/jsonDiff.json
deleted file mode 100644
index 41cb13f..0000000
--- a/i18n/locales/en/jsonDiff.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "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",
-  "fixErrorHint": "Fix the JSON syntax errors above to enable live comparison",
-  "added": "Added",
-  "removed": "Removed",
-  "modified": "Modified"
-}
diff --git a/i18n/locales/en/jsonFormat.json b/i18n/locales/en/jsonFormat.json
deleted file mode 100644
index 05aeb97..0000000
--- a/i18n/locales/en/jsonFormat.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "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",
-  "fixErrorHint": "Fix the JSON syntax errors above to enable live formatting",
-  "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"
-}
diff --git a/i18n/locales/en/jwt.json b/i18n/locales/en/jwt.json
deleted file mode 100644
index aec555f..0000000
--- a/i18n/locales/en/jwt.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "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: "
-  }
-}
diff --git a/i18n/locales/en/markdownToHtml.json b/i18n/locales/en/markdownToHtml.json
deleted file mode 100644
index e1147bb..0000000
--- a/i18n/locales/en/markdownToHtml.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "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"
-}
diff --git a/i18n/locales/en/qrCode.json b/i18n/locales/en/qrCode.json
deleted file mode 100644
index ac529b9..0000000
--- a/i18n/locales/en/qrCode.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "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"
-}
diff --git a/i18n/locales/en/rightClickRestorer.json b/i18n/locales/en/rightClickRestorer.json
deleted file mode 100644
index 897a416..0000000
--- a/i18n/locales/en/rightClickRestorer.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "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"
-}
diff --git a/i18n/locales/en/storageCleaner.json b/i18n/locales/en/storageCleaner.json
deleted file mode 100644
index 6679b99..0000000
--- a/i18n/locales/en/storageCleaner.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "pageTitle": "Storage Cleaner",
-  "pageSubtitle": "Clear cache, cookies, and local storage",
-  "loading": "Loading...",
-  "initializing": "Reading site data...",
-  "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"
-  }
-}
diff --git a/i18n/locales/en/textStatistics.json b/i18n/locales/en/textStatistics.json
deleted file mode 100644
index 7fb8f7d..0000000
--- a/i18n/locales/en/textStatistics.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "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"
-}
diff --git a/i18n/locales/en/timestamp.json b/i18n/locales/en/timestamp.json
deleted file mode 100644
index 2b2d4b8..0000000
--- a/i18n/locales/en/timestamp.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "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"
-  }
-}
diff --git a/i18n/locales/zh/base64Converter.json b/i18n/locales/zh/base64Converter.json
deleted file mode 100644
index 1b58f73..0000000
--- a/i18n/locales/zh/base64Converter.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "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": "解码大小"
-}
diff --git a/i18n/locales/zh/common.json b/i18n/locales/zh/common.json
deleted file mode 100644
index ef5dcf3..0000000
--- a/i18n/locales/zh/common.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "appName": "测试工具",
-  "buttons": {
-    "save": "保存",
-    "cancel": "取消",
-    "confirm": "确认",
-    "copy": "复制",
-    "clear": "清理",
-    "refresh": "刷新",
-    "toggleLanguage": "切换语言",
-    "toggleTheme": "切换主题",
-    "themeMode": {
-      "light": "切换到深色模式",
-      "dark": "切换到系统模式",
-      "system": "切换到浅色模式"
-    },
-    "search": "搜索工具...",
-    "back": "返回",
-    "clearSearch": "清除搜索",
-    "recentSearch": "最近搜索",
-    "noResults": "未找到相关工具",
-    "openInTab": "在标签页打开",
-    "settings": "设置"
-  },
-  "messages": {
-    "copySuccess": "已复制到剪贴板",
-    "copyError": "复制失败",
-    "copyEmpty": "无内容可复制"
-  },
-  "errorBoundary": {
-    "title": "糟糕，出了点问题",
-    "description": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
-    "refresh": "刷新应用",
-    "retry": "重新尝试"
-  },
-  "pageErrorBoundary": {
-    "title": "该功能运行异常",
-    "description": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
-  },
-  "router": {
-    "notFound": "页面未找到",
-    "notFoundDescription": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。"
-  },
-  "textInputArea": {
-    "clear": "清空",
-    "copyContent": "复制内容",
-    "cleared": "已清空",
-    "placeholder": "请输入文本"
-  }
-}
diff --git a/i18n/locales/zh/features.json b/i18n/locales/zh/features.json
deleted file mode 100644
index 3cbfe0b..0000000
--- a/i18n/locales/zh/features.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "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": "检测并恢复被网站禁用的浏览器右键菜单"
-  }
-}
diff --git a/i18n/locales/zh/htmlToMarkdown.json b/i18n/locales/zh/htmlToMarkdown.json
deleted file mode 100644
index 9f1e4ca..0000000
--- a/i18n/locales/zh/htmlToMarkdown.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "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 内容以查看转换结果"
-}
diff --git a/i18n/locales/zh/jsonDiff.json b/i18n/locales/zh/jsonDiff.json
deleted file mode 100644
index bc10e13..0000000
--- a/i18n/locales/zh/jsonDiff.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "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 后点击比较",
-  "fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式比对",
-  "added": "新增",
-  "removed": "删除",
-  "modified": "修改"
-}
diff --git a/i18n/locales/zh/jsonFormat.json b/i18n/locales/zh/jsonFormat.json
deleted file mode 100644
index 2f0b584..0000000
--- a/i18n/locales/zh/jsonFormat.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "formatTitle": "JSON 格式化",
-  "formatSubtitle": "美化和格式化 JSON 数据",
-  "inputPlaceholder": "输入需要格式化的 JSON...",
-  "formatButton": "格式化",
-  "clearButton": "清空",
-  "sortKeys": "键名排序",
-  "sortKeysTooltip": "按字母顺序对 JSON 对象键进行排序",
-  "indentSize": "缩进",
-  "indentSpaces": "{{count}} 个空格",
-  "outputLabel": "格式化结果",
-  "copySuccess": "复制成功",
-  "copyFail": "复制失败",
-  "noContent": "无内容可复制",
-  "invalidJson": "无效的 JSON 格式",
-  "emptyHint": "输入 JSON 后点击格式化",
-  "fixErrorHint": "请修正上方 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": "压缩"
-}
diff --git a/i18n/locales/zh/jwt.json b/i18n/locales/zh/jwt.json
deleted file mode 100644
index fed6481..0000000
--- a/i18n/locales/zh/jwt.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "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 失败："
-  }
-}
diff --git a/i18n/locales/zh/markdownToHtml.json b/i18n/locales/zh/markdownToHtml.json
deleted file mode 100644
index b754a56..0000000
--- a/i18n/locales/zh/markdownToHtml.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "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": "打印窗口已打开"
-}
diff --git a/i18n/locales/zh/qrCode.json b/i18n/locales/zh/qrCode.json
deleted file mode 100644
index 4a77e84..0000000
--- a/i18n/locales/zh/qrCode.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "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": "上传图片后将自动解析二维码"
-}
diff --git a/i18n/locales/zh/rightClickRestorer.json b/i18n/locales/zh/rightClickRestorer.json
deleted file mode 100644
index 4c6bd34..0000000
--- a/i18n/locales/zh/rightClickRestorer.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "title": "右键恢复",
-  "description": "检测并恢复被网站禁用的浏览器右键菜单",
-  "loading": "正在加载...",
-  "currentDomain": "当前域名",
-  "statusLocked": "未解锁",
-  "statusUnlocked": "已解锁",
-  "unsupported": "不支持",
-  "unsupportedDesc": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
-  "unlockDesc": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
-  "unlockBtn": "解锁当前网站右键",
-  "alreadyUnlocked": "右键已解锁"
-}
diff --git a/i18n/locales/zh/storageCleaner.json b/i18n/locales/zh/storageCleaner.json
deleted file mode 100644
index 6265097..0000000
--- a/i18n/locales/zh/storageCleaner.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "pageTitle": "存储清理",
-  "pageSubtitle": "清理缓存、Cookies 及本地存储",
-  "loading": "加载中...",
-  "initializing": "正在读取站点数据...",
-  "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"
-  }
-}
diff --git a/i18n/locales/zh/textStatistics.json b/i18n/locales/zh/textStatistics.json
deleted file mode 100644
index e8efba4..0000000
--- a/i18n/locales/zh/textStatistics.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "pageTitle": "文本统计",
-  "pageSubtitle": "实时分析文本的字符、单词、行数及字节大小",
-  "placeholder": "在此输入或粘贴文本...",
-  "characters": "字符数",
-  "words": "单词数",
-  "lines": "行数",
-  "bytes": "字节大小"
-}
diff --git a/i18n/locales/zh/timestamp.json b/i18n/locales/zh/timestamp.json
deleted file mode 100644
index e99b245..0000000
--- a/i18n/locales/zh/timestamp.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "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": "格式错误"
-  }
-}
diff --git a/package-lock.json b/package-lock.json
index 73195ad..68d015a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,15 +25,12 @@
         "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"
       },
@@ -215,7 +212,7 @@
       "version": "5.1.11",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
       "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/generational-cache": "^1.0.1",
@@ -232,7 +229,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
       "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/generational-cache": "^1.0.1",
@@ -249,7 +246,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
       "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
@@ -259,7 +256,7 @@
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
       "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@babel/code-frame": {
@@ -546,7 +543,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
       "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "css-tree": "^3.0.0"
@@ -559,7 +556,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
       "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -579,7 +576,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
       "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -603,7 +600,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.1.tgz",
       "integrity": "sha512-eZ5XOtyhK+mggRafYUWzA0tvaYOFgdY8AkgQiCJF9qNAePnUo/zmsqqYubBBb3sQ8uNUaSKTY9s9klfRaAXL0g==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -631,7 +628,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
       "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -654,7 +651,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.4.tgz",
       "integrity": "sha512-wgsqt92b7C7tQhIdPNxj0n9zuUbQlvAuI1exyzeNrOKOi62SD7ren8zqszmpVREjAOqg8cD2FqYhQfAuKjk4sw==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -679,7 +676,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
       "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -822,7 +819,6 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
       "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -834,7 +830,6 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
       "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -845,7 +840,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
       "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -859,7 +853,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -876,7 +869,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -893,7 +885,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -910,7 +901,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -927,7 +917,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -944,7 +933,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -961,7 +949,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -978,7 +965,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -995,7 +981,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1012,7 +997,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1029,7 +1013,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1046,7 +1029,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1063,7 +1045,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1080,7 +1061,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1097,7 +1077,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1114,7 +1093,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1131,7 +1109,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1148,7 +1125,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1165,7 +1141,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1182,7 +1157,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1199,7 +1173,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1216,7 +1189,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1233,7 +1205,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1250,7 +1221,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1267,7 +1237,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1284,7 +1253,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1514,7 +1482,7 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
       "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
@@ -1634,7 +1602,7 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1665,7 +1633,7 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1692,7 +1660,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
       "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -1749,7 +1716,6 @@
       "version": "0.132.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.132.0.tgz",
       "integrity": "sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
@@ -2538,7 +2504,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2555,7 +2520,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2572,7 +2536,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2589,7 +2552,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2606,7 +2568,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2623,7 +2584,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2640,7 +2600,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2657,7 +2616,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2674,7 +2632,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2691,7 +2648,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2708,7 +2664,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2725,7 +2680,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2742,7 +2696,6 @@
       "cpu": [
         "wasm32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2761,7 +2714,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2778,7 +2730,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2792,14 +2743,12 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
       "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
       "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@testing-library/dom": {
@@ -2894,7 +2843,6 @@
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
       "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2911,7 +2859,6 @@
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
       "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/deep-eql": "*",
@@ -2933,7 +2880,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
       "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/estree": {
@@ -2984,7 +2930,7 @@
       "version": "25.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
       "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
@@ -3000,7 +2946,7 @@
       "version": "19.2.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz",
       "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3010,7 +2956,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -3316,7 +3262,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.7.tgz",
       "integrity": "sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
@@ -3334,7 +3279,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.7.tgz",
       "integrity": "sha512-vY7nuamKgfvpA1Koa3oYIw/k7D6kZnpGyNMZW8loow2bsBYla1TFdqTaXncWdRn4pgwNs+90RhnXhJScDwQeJA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/spy": "4.1.7",
@@ -3373,7 +3317,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.7.tgz",
       "integrity": "sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/utils": "4.1.7",
@@ -3387,7 +3330,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.7.tgz",
       "integrity": "sha512-ZacLzja+TmJeZ1h14xW2FB/WpeimUD3haBXQPyJqxvo8jQTmfeA8zv58mtjN2C7EHXZDYVcVYdYmAxjkWVvKCw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/pretty-format": "4.1.7",
@@ -3403,7 +3345,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.7.tgz",
       "integrity": "sha512-kbkI5LMWakyuTIvs6fUJ5qdIVb1XVKsYJAT4OJ938cHMROYMSfmoQdZy0aaAnjbbc8F61vkoTqz/Az+/HiIu5Q==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -3521,7 +3462,7 @@
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -3893,7 +3834,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
       "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -4044,7 +3984,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
       "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "require-from-string": "^2.0.2"
@@ -4240,7 +4180,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/bundle-name": {
@@ -4406,7 +4346,6 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
       "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -4678,7 +4617,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/concat-map": {
@@ -4801,7 +4740,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
       "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.27.1",
@@ -4855,14 +4794,14 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
       "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "whatwg-mimetype": "^5.0.0",
@@ -4961,7 +4900,7 @@
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
       "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/deep-extend": {
@@ -5087,7 +5026,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -5305,7 +5243,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
       "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=20.19.0"
@@ -5458,7 +5396,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
       "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
@@ -5532,7 +5469,7 @@
       "version": "0.27.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
       "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -5965,7 +5902,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
       "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=12.0.0"
@@ -6053,7 +5989,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -6230,7 +6165,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -6691,7 +6625,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
       "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@exodus/bytes": "^1.6.0"
@@ -6706,15 +6640,6 @@
       "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",
@@ -6764,43 +6689,6 @@
         "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",
@@ -7318,7 +7206,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/is-primitive": {
@@ -7583,7 +7471,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
       "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -7612,7 +7500,7 @@
       "version": "29.1.1",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
       "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/css-color": "^5.1.11",
@@ -7653,7 +7541,7 @@
       "version": "11.5.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.0.tgz",
       "integrity": "sha512-5YgH9UJd7wVb9hIouI2adWpgqrrICkt070Dnj8EUY1+B4B2P9eRLPAkAAo6NICA7CEhOIeBHl46u9zSNpNu7zA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": "20 || >=22"
@@ -7882,7 +7770,6 @@
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
       "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
-      "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -7915,7 +7802,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7936,7 +7822,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7957,7 +7842,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7978,7 +7862,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7999,7 +7882,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8020,7 +7902,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8041,7 +7922,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8062,7 +7942,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8083,7 +7962,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8104,7 +7982,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8125,7 +8002,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -8461,7 +8337,6 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -8546,7 +8421,7 @@
       "version": "2.27.1",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
       "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "CC0-1.0"
     },
     "node_modules/merge2": {
@@ -8753,7 +8628,6 @@
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
       "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9240,7 +9114,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
       "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^8.0.0"
@@ -9280,7 +9154,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/perfect-debounce": {
@@ -9300,7 +9173,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9395,7 +9267,6 @@
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
       "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -9740,7 +9611,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -9887,33 +9758,6 @@
         "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",
@@ -10148,7 +9992,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10225,7 +10069,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.2.tgz",
       "integrity": "sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@oxc-project/types": "=0.132.0",
@@ -10392,7 +10235,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "xmlchars": "^2.2.0"
@@ -10618,7 +10461,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/signal-exit": {
@@ -10704,7 +10546,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -10715,7 +10557,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -10760,7 +10602,6 @@
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/std-env": {
@@ -11092,7 +10933,7 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
@@ -11221,7 +11062,7 @@
       "version": "5.47.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.47.1.tgz",
       "integrity": "sha512-tPbLXTI6ohPASb/1YViL428oEHu6/qv1OxqYnfaonVCFHqx4+wCd95pHrQWsL5X4pl90CTyW9piSAsS2L0VoMw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -11280,14 +11121,12 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
       "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/tinyexec": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.2.tgz",
       "integrity": "sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -11297,7 +11136,6 @@
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
       "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -11323,7 +11161,7 @@
       "version": "7.0.30",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.30.tgz",
       "integrity": "sha512-ELrFxuqsDdHUwoh0XxDbxuLD3Wnz49Z57IFvTtvWy1hJdcMZjXLIuonjilCiWHlT2GbE4Wlv1wKVTzDFnXH1aw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "tldts-core": "^7.0.30"
@@ -11336,7 +11174,7 @@
       "version": "7.0.30",
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.30.tgz",
       "integrity": "sha512-uiHN8PIB1VmWyS98eZYja4xzlYqeFZVjb4OuYlJQnZAuJhMw4PbKQOKgHKhBdJR3FE/t5mUQ1Kd80++B+qhD1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/tmp": {
@@ -11366,7 +11204,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
       "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "tldts": "^7.0.5"
@@ -11379,7 +11217,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
       "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.3.1"
@@ -11600,7 +11438,7 @@
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
       "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=20.18.1"
@@ -11610,7 +11448,7 @@
       "version": "7.24.6",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
       "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unimport": {
@@ -11828,15 +11666,6 @@
         }
       }
     },
-    "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",
@@ -11859,7 +11688,6 @@
       "version": "8.0.14",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
       "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
@@ -11960,7 +11788,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.7.tgz",
       "integrity": "sha512-flYyaFd2CgoCoU+0UKt3pxksgC+S02iTDN0n3LtqaMeXsI9SBcdNujc2k0DeFLzUn/0k538yNjOSdwgCqcrwJA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/expect": "4.1.7",
@@ -12046,20 +11873,11 @@
         }
       }
     },
-    "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",
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "xml-name-validator": "^5.0.0"
@@ -12201,7 +12019,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
       "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=20"
@@ -12218,7 +12036,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
       "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=20"
@@ -12228,7 +12046,7 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
       "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@exodus/bytes": "^1.11.0",
@@ -12362,7 +12180,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
       "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "siginfo": "^2.0.0",
@@ -12568,7 +12385,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18"
@@ -12602,7 +12419,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/y18n": {
@@ -12626,7 +12443,6 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
       "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "dev": true,
       "license": "ISC",
       "optional": true,
       "bin": {
diff --git a/package.json b/package.json
index cb87e44..576d168 100644
--- a/package.json
+++ b/package.json
@@ -36,15 +36,12 @@
     "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"
   },
diff --git a/pages/Base64Converter/Base64ConverterSection.tsx b/pages/Base64Converter/Base64ConverterSection.tsx
index 8639af9..06df626 100644
--- a/pages/Base64Converter/Base64ConverterSection.tsx
+++ b/pages/Base64Converter/Base64ConverterSection.tsx
@@ -1,6 +1,6 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import DecodeResultPaper from '@/components/DecodeResultPaper';
 import { Button } from '@/components/ui/button';
@@ -19,7 +19,7 @@ interface Base64ConverterSectionProps {
 }
 
 export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   const [direction, setDirection] = useStorageState(
     `base64Converter/${mode}Mode/direction`,
diff --git a/pages/Base64Converter/TextMode.tsx b/pages/Base64Converter/TextMode.tsx
index 015092a..47fcf27 100644
--- a/pages/Base64Converter/TextMode.tsx
+++ b/pages/Base64Converter/TextMode.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import { base64ToText, textToBase64 } from '@/utils/base64Converter';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
@@ -20,7 +20,7 @@ interface TextModeProps {
 }
 
 export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   // 1. 纯净的核心源状态机：只保留输入源和转换方向
   const [input, setInput] = useState('');
diff --git a/pages/Base64Converter/__tests__/TextMode.test.tsx b/pages/Base64Converter/__tests__/TextMode.test.tsx
index 7dc94bd..be2550c 100644
--- a/pages/Base64Converter/__tests__/TextMode.test.tsx
+++ b/pages/Base64Converter/__tests__/TextMode.test.tsx
@@ -19,18 +19,18 @@ describe('TextMode', () => {
 
   it('应该渲染编码/解码切换按钮', () => {
     render(<TextMode />);
-    expect(screen.getByText('base64Converter:encode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:decode')).toBeInTheDocument();
+    expect(screen.getByText('编码')).toBeInTheDocument();
+    expect(screen.getByText('解码')).toBeInTheDocument();
   });
 
   it('应该渲染输入框和转换按钮', () => {
     render(<TextMode />);
-    expect(screen.getByPlaceholderText('base64Converter:textInputPlaceholder')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('输入需要编码为 Base64 的文本...')).toBeInTheDocument();
   });
 
   it('应该将文本编码为 Base64', async () => {
     render(<TextMode />);
-    const input = screen.getByPlaceholderText('base64Converter:textInputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
     fireEvent.change(input, { target: { value: 'Hello' } });
 
     act(() => {
@@ -38,7 +38,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:base64Output')).toBeInTheDocument();
+      expect(screen.getByText('Base64 编码结果')).toBeInTheDocument();
     });
     expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
   });
@@ -47,9 +47,9 @@ describe('TextMode', () => {
     render(<TextMode />);
 
     // 切换到解码模式
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
 
     act(() => {
@@ -57,7 +57,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:textOutput')).toBeInTheDocument();
+      expect(screen.getByText('解码文本结果')).toBeInTheDocument();
     });
     expect(screen.getByRole('button', { name: 'Hello' })).toBeInTheDocument();
   });
@@ -66,9 +66,9 @@ describe('TextMode', () => {
     render(<TextMode />);
 
     // 切换到解码模式
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'invalid!!!' } });
 
     act(() => {
@@ -76,7 +76,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:invalidBase64')).toBeInTheDocument();
+      expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
     });
   });
 
@@ -84,7 +84,7 @@ describe('TextMode', () => {
     render(<TextMode />);
 
     // 先编码
-    const input = screen.getByPlaceholderText('base64Converter:textInputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
     fireEvent.change(input, { target: { value: 'Hello' } });
 
     act(() => {
@@ -96,7 +96,7 @@ describe('TextMode', () => {
     });
 
     // 切换方向
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
     // 输出应该被清除
     await waitFor(() => {
@@ -107,7 +107,7 @@ describe('TextMode', () => {
   it('点击清除按钮应该清空所有内容', async () => {
     render(<TextMode />);
 
-    const input = screen.getByPlaceholderText('base64Converter:textInputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
     fireEvent.change(input, { target: { value: 'Hello' } });
 
     act(() => {
@@ -129,48 +129,52 @@ describe('TextMode', () => {
   it('解码模式下粘贴图片 data URI 时应该显示切换图像模式的提示', () => {
     render(<TextMode />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, {
       target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
     });
 
-    expect(screen.getByText('base64Converter:imageDataUriHint')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:switchToImageMode')).toBeInTheDocument();
+    expect(
+      screen.getByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('切换到图像模式')).toBeInTheDocument();
   });
 
   it('粘贴非图片 data URI 时不应该显示图像模式提示', () => {
     render(<TextMode />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
 
-    expect(screen.queryByText('base64Converter:imageDataUriHint')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
+    ).not.toBeInTheDocument();
   });
 
   it('点击切换图像模式按钮应该调用 onSwitchToImageMode 回调', () => {
     const onSwitch = vi.fn();
     render(<TextMode onSwitchToImageMode={onSwitch} />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    fireEvent.click(screen.getByText('解码'));
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, {
       target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
     });
 
-    fireEvent.click(screen.getByText('base64Converter:switchToImageMode'));
+    fireEvent.click(screen.getByText('切换到图像模式'));
     expect(onSwitch).toHaveBeenCalledTimes(1);
   });
 
   it('解码模式下对二进制数据应该显示更清晰的错误', async () => {
     render(<TextMode />);
 
-    fireEvent.click(screen.getByText('base64Converter:decode'));
+    fireEvent.click(screen.getByText('解码'));
 
-    const input = screen.getByPlaceholderText('base64Converter:base64InputPlaceholder');
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
     fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
 
     act(() => {
@@ -178,7 +182,9 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('base64Converter:binaryDataDetected')).toBeInTheDocument();
+      expect(
+        screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
+      ).toBeInTheDocument();
     });
   });
 });
diff --git a/pages/Base64Converter/__tests__/index.test.tsx b/pages/Base64Converter/__tests__/index.test.tsx
index 2a79764..325dc50 100644
--- a/pages/Base64Converter/__tests__/index.test.tsx
+++ b/pages/Base64Converter/__tests__/index.test.tsx
@@ -2,15 +2,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Base64ConverterPage from '../index';
 
-// Mock useLazyTranslation
-vi.mock('@/utils/useLazyTranslation', () => ({
-  useLazyTranslation: () => ({
-    t: (key: string) => key,
-    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
-    isLoaded: true,
-  }),
-}));
-
 // Mock getEntryPointType
 vi.mock('@/config/features', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/config/features')>();
@@ -49,15 +40,15 @@ describe('Base64ConverterPage', () => {
   it('应该渲染模式切换按钮', async () => {
     render(<Base64ConverterPage />);
     await waitForStorageInit();
-    expect(screen.getByText('base64Converter:textMode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:fileMode')).toBeInTheDocument();
-    expect(screen.getByText('base64Converter:imageMode')).toBeInTheDocument();
+    expect(screen.getByText('文本')).toBeInTheDocument();
+    expect(screen.getByText('文件')).toBeInTheDocument();
+    expect(screen.getByText('图像')).toBeInTheDocument();
   });
 
   it('切换到文件模式应该渲染 FileMode', async () => {
     render(<Base64ConverterPage />);
     await waitForStorageInit();
-    fireEvent.click(screen.getByText('base64Converter:fileMode'));
+    fireEvent.click(screen.getByText('文件'));
     await waitFor(() => {
       expect(screen.getByTestId('file-mode')).toBeInTheDocument();
     });
@@ -67,7 +58,7 @@ describe('Base64ConverterPage', () => {
   it('切换到图像模式应该渲染 ImageMode', async () => {
     render(<Base64ConverterPage />);
     await waitForStorageInit();
-    fireEvent.click(screen.getByText('base64Converter:imageMode'));
+    fireEvent.click(screen.getByText('图像'));
     await waitFor(() => {
       expect(screen.getByTestId('image-mode')).toBeInTheDocument();
     });
diff --git a/pages/Base64Converter/index.tsx b/pages/Base64Converter/index.tsx
index dadb075..32435f0 100644
--- a/pages/Base64Converter/index.tsx
+++ b/pages/Base64Converter/index.tsx
@@ -1,4 +1,4 @@
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConverterPageMode } from '@/types/storage';
 import TextMode from './TextMode';
@@ -12,7 +12,7 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
 type PageMode = Base64ConverterPageMode;
 
 export default function Index() {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
   const [pageMode, setPageMode] = useStorageState(
     'base64Converter/pageMode',
     'text',
diff --git a/pages/Base64Converter/useBase64Converter.ts b/pages/Base64Converter/useBase64Converter.ts
index d341334..e71ad3a 100644
--- a/pages/Base64Converter/useBase64Converter.ts
+++ b/pages/Base64Converter/useBase64Converter.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import type { FileToBase64Result } from '@/utils/base64Converter';
 import {
   base64ToBlob,
@@ -21,7 +21,7 @@ interface UseBase64ConverterProps {
 }
 
 export function useBase64Converter({ mode }: UseBase64ConverterProps) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   const [result, setResult] = useState<FileToBase64Result | null>(null);
   const [info, setInfo] = useState<FileInfo | null>(null);
diff --git a/pages/Dashboard/index.tsx b/pages/Dashboard/index.tsx
index 8479dda..f843fef 100644
--- a/pages/Dashboard/index.tsx
+++ b/pages/Dashboard/index.tsx
@@ -3,12 +3,12 @@ import ToolCard from '@/pages/Dashboard/ToolCard';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 export default function DashboardPage() {
   const { navigateTo, visiblePages, pageOrder } = useRouter();
-  const { t } = useTranslation(['features']);
+  const { t } = useI18n(['features']);
 
   const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
 
diff --git a/pages/HtmlToMarkdown/index.tsx b/pages/HtmlToMarkdown/index.tsx
index f860989..4d0a00e 100644
--- a/pages/HtmlToMarkdown/index.tsx
+++ b/pages/HtmlToMarkdown/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Download, Trash2 } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
@@ -13,7 +13,7 @@ const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
   typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
 
 export default function HtmlToMarkdownPage() {
-  const { t } = useLazyTranslation('htmlToMarkdown');
+  const { t } = useI18n('htmlToMarkdown');
   const [previewMode, setPreviewMode] = useStorageState(
     'htmlToMarkdown/previewMode',
     'split' as HtmlToMarkdownPreviewMode,
diff --git a/pages/JsonTools/DiffNavigator.tsx b/pages/JsonTools/DiffNavigator.tsx
index 2ee84f3..ffbd496 100644
--- a/pages/JsonTools/DiffNavigator.tsx
+++ b/pages/JsonTools/DiffNavigator.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
 
 export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -19,7 +19,7 @@ export default function DiffNavigator({
   className,
   ...props
 }: DiffNavigatorProps) {
-  const { t } = useLazyTranslation('jsonDiff');
+  const { t } = useI18n('jsonDiff');
 
   // 计算当前的边界禁用状态守卫
   const isFirst = currentIndex <= 0;
diff --git a/pages/JsonTools/DiffResult.tsx b/pages/JsonTools/DiffResult.tsx
index 08ec54b..733d231 100644
--- a/pages/JsonTools/DiffResult.tsx
+++ b/pages/JsonTools/DiffResult.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import JsonTree from './JsonTree';
 import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
@@ -18,7 +18,7 @@ export default function DiffResult({
   className,
   ...props
 }: DiffResultProps) {
-  const { t } = useLazyTranslation('jsonDiff');
+  const { t } = useI18n('jsonDiff');
 
   if (viewMode === 'sideBySide') {
     return (
diff --git a/pages/JsonTools/JsonConvertSection.tsx b/pages/JsonTools/JsonConvertSection.tsx
index 46eca77..84007ee 100644
--- a/pages/JsonTools/JsonConvertSection.tsx
+++ b/pages/JsonTools/JsonConvertSection.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { formatByteSize } from '@/utils/textStatistics';
 import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
@@ -25,7 +25,7 @@ export default function JsonConvertSection({
   className,
   ...props
 }: JsonConvertSectionProps) {
-  const { t } = useLazyTranslation('jsonFormat');
+  const { t } = useI18n('jsonFormat');
 
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');
diff --git a/pages/JsonTools/JsonFormatSection.tsx b/pages/JsonTools/JsonFormatSection.tsx
index bcd8076..99d175e 100644
--- a/pages/JsonTools/JsonFormatSection.tsx
+++ b/pages/JsonTools/JsonFormatSection.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import {
   formatJson,
   type JsonFormatOptions,
@@ -14,7 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
 export default function JsonFormatSection() {
-  const { t } = useLazyTranslation('jsonFormat');
+  const { t } = useI18n('jsonFormat');
 
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');
diff --git a/pages/JsonTools/index.tsx b/pages/JsonTools/index.tsx
index 0b58ff0..5f105c2 100644
--- a/pages/JsonTools/index.tsx
+++ b/pages/JsonTools/index.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import JsonDiffInput from './JsonDiffInput';
 import DiffResult from './DiffResult';
 import DiffNavigator from './DiffNavigator';
@@ -37,7 +37,7 @@ const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
 type PageMode = JsonToolsPageMode;
 
 export default function Index() {
-  const { t } = useLazyTranslation(['jsonDiff', 'jsonFormat']);
+  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
   // 1. 受控原始输入源
diff --git a/pages/Jwt/index.tsx b/pages/Jwt/index.tsx
index 4c4604b..0300b10 100644
--- a/pages/Jwt/index.tsx
+++ b/pages/Jwt/index.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { parseJwt, stringifyJson } from '@/utils/jwt';
 import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { cn } from '@/lib/utils';
 
@@ -15,7 +15,7 @@ interface SectionProps {
 }
 
 const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
-  const { t } = useLazyTranslation('jwt');
+  const { t } = useI18n('jwt');
   return (
     <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
       <div className="flex justify-between items-center mb-2 select-none">
@@ -39,7 +39,7 @@ const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionPr
 };
 
 export default function Index() {
-  const { t } = useLazyTranslation(['jwt', 'jsonFormat']);
+  const { t } = useI18n(['jwt', 'jsonFormat']);
   const [jwtInput, setJwtInput] = useState('');
 
   // 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
@@ -74,7 +74,7 @@ export default function Index() {
         <TextInputArea
           minRows={5}
           maxRows={10}
-          placeholder={t('jwt:placeholder')}
+          placeholder={t('jwt_placeholder')}
           value={jwtInput}
           onChange={(val) => {
             const cleaned = val.replace(/^Bearer\s*/i, '').trim();
diff --git a/pages/MarkdownToHtml/index.tsx b/pages/MarkdownToHtml/index.tsx
index cf9e6e5..557ebcb 100644
--- a/pages/MarkdownToHtml/index.tsx
+++ b/pages/MarkdownToHtml/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Download, Printer, Trash2 } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { Button } from '@/components/ui/button';
@@ -82,7 +82,7 @@ const PREVIEW_STYLES = `
 `;
 
 export default function MarkdownToHtmlPage() {
-  const { t } = useLazyTranslation('markdownToHtml');
+  const { t } = useI18n('markdownToHtml');
   const [previewMode, setPreviewMode] = useStorageState(
     'markdownToHtml/previewMode',
     'split' as MarkdownToHtmlPreviewMode,
diff --git a/pages/QrCode/__tests__/index.test.tsx b/pages/QrCode/__tests__/index.test.tsx
index ff0145f..f4800d5 100644
--- a/pages/QrCode/__tests__/index.test.tsx
+++ b/pages/QrCode/__tests__/index.test.tsx
@@ -11,15 +11,6 @@ vi.mock('lucide-react', async (importOriginal) => {
   };
 });
 
-// Mock useLazyTranslation
-vi.mock('@/utils/useLazyTranslation', () => ({
-  useLazyTranslation: () => ({
-    t: (key: string) => key,
-    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
-    isLoaded: true,
-  }),
-}));
-
 // Mock useSnackbar
 vi.mock('@/components/GlobalSnackbar', () => ({
   useSnackbar: () => ({
@@ -64,13 +55,13 @@ describe('QrCodePage', () => {
 
   it('应该渲染模式切换按钮', () => {
     render(<QrCodePage />);
-    expect(screen.getByText('qrCode:urlToQr')).toBeInTheDocument();
-    expect(screen.getByText('qrCode:qrToUrl')).toBeInTheDocument();
+    expect(screen.getByText('文本转二维码')).toBeInTheDocument();
+    expect(screen.getByText('二维码转文本')).toBeInTheDocument();
   });
 
   it('切换到解析模式应该渲染 ImageUploader', () => {
     render(<QrCodePage />);
-    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
+    fireEvent.click(screen.getByText('二维码转文本'));
     expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
     expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
@@ -78,16 +69,16 @@ describe('QrCodePage', () => {
   it('切换回生成模式应该渲染 QrCodePreview', () => {
     render(<QrCodePage />);
     // 先切换到解析模式
-    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
+    fireEvent.click(screen.getByText('二维码转文本'));
     expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
     // 再切换回生成模式
-    fireEvent.click(screen.getByText('qrCode:urlToQr'));
+    fireEvent.click(screen.getByText('文本转二维码'));
     expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
   });
 
   it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
     render(<QrCodePage />);
-    expect(screen.getByText('qrCode:urlInputLabel')).toBeInTheDocument();
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
   });
 
   it('应该渲染双翼响应式卡片网格布局', () => {
diff --git a/pages/QrCode/components/GeneratePanel.tsx b/pages/QrCode/components/GeneratePanel.tsx
index e9f5243..8dfab73 100644
--- a/pages/QrCode/components/GeneratePanel.tsx
+++ b/pages/QrCode/components/GeneratePanel.tsx
@@ -1,12 +1,12 @@
 import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 export default function GeneratePanel() {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
 
   return (
diff --git a/pages/QrCode/components/ParsePanel.tsx b/pages/QrCode/components/ParsePanel.tsx
index cd97651..eb4b543 100644
--- a/pages/QrCode/components/ParsePanel.tsx
+++ b/pages/QrCode/components/ParsePanel.tsx
@@ -2,13 +2,13 @@ import { useCallback, useEffect } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
 import { useSnackbar } from '@/components/GlobalSnackbar';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 export default function ParsePanel() {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { showMessage } = useSnackbar();
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
diff --git a/pages/QrCode/hooks/useQrCode.ts b/pages/QrCode/hooks/useQrCode.ts
index 00440e5..f6c1308 100644
--- a/pages/QrCode/hooks/useQrCode.ts
+++ b/pages/QrCode/hooks/useQrCode.ts
@@ -3,13 +3,13 @@ import QRious from 'qrious';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useDebounce } from '@/utils/useDebounce';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
 export function useQrCode(): QrCodeContextValue {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const { showMessage } = useSnackbar();
 
   // 核心路由视图模式
diff --git a/pages/QrCode/index.tsx b/pages/QrCode/index.tsx
index 4c8d3ca..c63104f 100644
--- a/pages/QrCode/index.tsx
+++ b/pages/QrCode/index.tsx
@@ -1,6 +1,6 @@
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { QrCodeContext } from './contexts/QrCodeContext';
 import { useQrCode } from './hooks/useQrCode';
 import GeneratePanel from './components/GeneratePanel';
@@ -8,7 +8,7 @@ import ParsePanel from './components/ParsePanel';
 import type { QrCodeMode } from './types';
 
 export default function Index() {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
   const qrCode = useQrCode();
 
   // 模式选项驱动骨架
diff --git a/pages/RightClickRestorer/__tests__/index.test.tsx b/pages/RightClickRestorer/__tests__/index.test.tsx
index bc450b4..f74b947 100644
--- a/pages/RightClickRestorer/__tests__/index.test.tsx
+++ b/pages/RightClickRestorer/__tests__/index.test.tsx
@@ -26,7 +26,7 @@ describe('RightClickRestorerPage', () => {
 
   it('should render locked status', () => {
     render(<RightClickRestorerPage />);
-    expect(screen.getByText(/statusLocked/)).toBeInTheDocument();
+    expect(screen.getByText(/未解锁/)).toBeInTheDocument();
   });
 
   it('should call unlock when button clicked', () => {
diff --git a/pages/RightClickRestorer/index.tsx b/pages/RightClickRestorer/index.tsx
index bc1cbae..3b14f78 100644
--- a/pages/RightClickRestorer/index.tsx
+++ b/pages/RightClickRestorer/index.tsx
@@ -3,10 +3,10 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
 import { useRightClickRestorer } from './useRightClickRestorer';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 export default function RightClickRestorerPage() {
-  const { t } = useLazyTranslation('rightClickRestorer');
+  const { t } = useI18n('rightClickRestorer');
   const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
 
   if (isLoading) {
diff --git a/pages/StorageCleaner/AutoRefreshToggle.tsx b/pages/StorageCleaner/AutoRefreshToggle.tsx
index dec8af4..cc21293 100644
--- a/pages/StorageCleaner/AutoRefreshToggle.tsx
+++ b/pages/StorageCleaner/AutoRefreshToggle.tsx
@@ -14,7 +14,7 @@
  */
 
 import React from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
@@ -43,7 +43,7 @@ export default function AutoRefreshToggle({
   className,
   ...props
 }: AutoRefreshToggleProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   return (
     <div
diff --git a/pages/StorageCleaner/CleaningResult.tsx b/pages/StorageCleaner/CleaningResult.tsx
index d37c9e6..d6f658c 100644
--- a/pages/StorageCleaner/CleaningResult.tsx
+++ b/pages/StorageCleaner/CleaningResult.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CheckCircle, XCircle } from 'lucide-react';
 import type { CleaningResult as CleaningResultType } from '@/types/storage';
 import { formatCleaningResult } from '@/utils/storageCleaner';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
 
 interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,7 +10,7 @@ interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   if (!result) return null;
 
diff --git a/pages/StorageCleaner/ErrorDisplay.tsx b/pages/StorageCleaner/ErrorDisplay.tsx
index e653ada..1e9ac17 100644
--- a/pages/StorageCleaner/ErrorDisplay.tsx
+++ b/pages/StorageCleaner/ErrorDisplay.tsx
@@ -1,5 +1,5 @@
 import { AlertCircle } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -7,7 +7,7 @@ interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   return (
     // 1. 精简层级：单层外壳直接搞定居中、响应式高度与外部类名扩展
diff --git a/pages/StorageCleaner/OptionItem.tsx b/pages/StorageCleaner/OptionItem.tsx
index db4b12d..55f0f4b 100644
--- a/pages/StorageCleaner/OptionItem.tsx
+++ b/pages/StorageCleaner/OptionItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { formatSize } from '@/utils/storageCleaner';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 // 引入官方的 Checkbox 原子组件
 import { Checkbox } from '@/components/ui/checkbox';
@@ -22,7 +22,7 @@ export default function OptionItem({
   className,
   ...props
 }: OptionItemProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   return (
     <div
diff --git a/pages/StorageCleaner/StorageCleanerConfirm.tsx b/pages/StorageCleaner/StorageCleanerConfirm.tsx
index 190b405..452582c 100644
--- a/pages/StorageCleaner/StorageCleanerConfirm.tsx
+++ b/pages/StorageCleaner/StorageCleanerConfirm.tsx
@@ -10,7 +10,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
@@ -26,7 +26,7 @@ export function StorageCleanerConfirm({
   onConfirm,
   options,
 }: StorageCleanerConfirmProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   const selectedOptions = Object.entries(options)
     .filter(([_, value]) => value)
@@ -99,7 +99,7 @@ export function StorageCleanerConfirm({
             onClick={onClose}
             className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
           >
-            {t('common:buttons.cancel')}
+            {t('common_buttons_cancel')}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/pages/StorageCleaner/StorageOptionsGrid.tsx b/pages/StorageCleaner/StorageOptionsGrid.tsx
index 699913d..338e664 100644
--- a/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StorageCleanerOptions } from '@/types/storage';
 import OptionItem from './OptionItem';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 // 1. 引入官方标准的 Checkbox 原子组件
 import { Checkbox } from '@/components/ui/checkbox';
@@ -26,7 +26,7 @@ export default function StorageOptionsGrid({
   className,
   ...props
 }: StorageOptionsGridProps) {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
     { key: 'localStorage' },
diff --git a/pages/StorageCleaner/index.tsx b/pages/StorageCleaner/index.tsx
index 02ddd2d..7456dfb 100644
--- a/pages/StorageCleaner/index.tsx
+++ b/pages/StorageCleaner/index.tsx
@@ -6,10 +6,10 @@ import StorageOptionsGrid from './StorageOptionsGrid';
 import AutoRefreshToggle from './AutoRefreshToggle';
 import ErrorDisplay from './ErrorDisplay';
 import CleaningResult from './CleaningResult';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 export default function Index() {
-  const { t } = useLazyTranslation('storageCleaner');
+  const { t } = useI18n('storageCleaner');
 
   const {
     error,
diff --git a/pages/StorageCleaner/useStorageCleaner.ts b/pages/StorageCleaner/useStorageCleaner.ts
index 41a54aa..28dc5e1 100644
--- a/pages/StorageCleaner/useStorageCleaner.ts
+++ b/pages/StorageCleaner/useStorageCleaner.ts
@@ -17,7 +17,7 @@ import {
   isRestrictedUrl,
 } from '@/utils/storageCleaner';
 import { MessageAction, sendMessage } from '@/utils/messages';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { toast } from 'sonner'; // 1. 直接引用 shadcn 推荐的 Sonner 单例通知，踢出回调依赖
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
@@ -56,7 +56,7 @@ export interface UseStorageCleanerReturn {
 }
 
 export function useStorageCleaner(): UseStorageCleanerReturn {
-  const { t } = useLazyTranslation(['storageCleaner', 'common']);
+  const { t } = useI18n(['storageCleaner', 'common']);
   const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [isInitializing, setIsInitializing] = useState<boolean>(true);
diff --git a/pages/TextStatistics/index.tsx b/pages/TextStatistics/index.tsx
index 7d063c6..a78c55a 100644
--- a/pages/TextStatistics/index.tsx
+++ b/pages/TextStatistics/index.tsx
@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import { formatByteSize, getTextStats } from '@/utils/textStatistics';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { cn } from '@/lib/utils';
 
 export default function Index() {
-  const { t } = useLazyTranslation('textStatistics');
+  const { t } = useI18n('textStatistics');
   const [text, setText] = useState('');
 
   const handleContextMenuData = useCallback((payload: string) => {
diff --git a/pages/Timestamp/LiveClock.tsx b/pages/Timestamp/LiveClock.tsx
index a503e87..a82ae4b 100644
--- a/pages/Timestamp/LiveClock.tsx
+++ b/pages/Timestamp/LiveClock.tsx
@@ -3,7 +3,7 @@ import { Clock } from 'lucide-react';
 import CopyButton from '@/components/CopyButton';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import type { UnitType } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 引入标准的 shadcn 工具函数
 
 interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,7 +12,7 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
-  const { t } = useLazyTranslation('timestamp');
+  const { t } = useI18n('timestamp');
   const { showMessage } = useSnackbar();
   const onUseNowRef = useRef(onUseNow);
 
diff --git a/pages/Timestamp/ResultView.tsx b/pages/Timestamp/ResultView.tsx
index 536d138..00981fa 100644
--- a/pages/Timestamp/ResultView.tsx
+++ b/pages/Timestamp/ResultView.tsx
@@ -3,7 +3,7 @@ import dayjs from '@/utils/dayjs';
 import CopyButton from '@/components/CopyButton';
 import type { UnitType } from './constants';
 import { DATE_FORMAT } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // shadcn 核心类名合并工具
 
 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,7 +25,7 @@ const ResultView = React.memo(
     className,
     ...props
   }: ResultViewProps) => {
-    const { t } = useLazyTranslation('timestamp');
+    const { t } = useI18n('timestamp');
 
     // 严谨计算时间衍生的附加时区/相对时间状态
     const extraInfo = useMemo(() => {
diff --git a/pages/Timestamp/index.tsx b/pages/Timestamp/index.tsx
index d362db2..eb215a3 100644
--- a/pages/Timestamp/index.tsx
+++ b/pages/Timestamp/index.tsx
@@ -3,7 +3,7 @@ import { ZONES } from './constants';
 import LiveClock from './LiveClock';
 import ResultView from './ResultView';
 import { useTimestampConverter } from './useTimestampConverter';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 // 1. 引入标准的 shadcn/ui 原子表单组件（代替原生的原生 Input 和 Select）
@@ -17,7 +17,7 @@ import {
 } from '@/components/ui/select';
 
 export default function Index() {
-  const { t } = useLazyTranslation('timestamp');
+  const { t } = useI18n('timestamp');
 
   // 2. 完美对接全新重构后的统一单源响应式 Hook
   const {
diff --git a/pages/Timestamp/useTimestampConverter.ts b/pages/Timestamp/useTimestampConverter.ts
index da3c771..4a67f56 100644
--- a/pages/Timestamp/useTimestampConverter.ts
+++ b/pages/Timestamp/useTimestampConverter.ts
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType } from './constants';
 import { DATE_FORMAT } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -26,7 +26,7 @@ function isTimestampLike(input: string): boolean {
 }
 
 export function useTimestampConverter(): UseTimestampConverterReturn {
-  const { t } = useLazyTranslation('timestamp');
+  const { t } = useI18n('timestamp');
   const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
   const [unit, setUnit] = useState<UnitType>('ms');
   const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
new file mode 100644
index 0000000..b45c9fe
--- /dev/null
+++ b/public/_locales/en/messages.json
@@ -0,0 +1,1290 @@
+{
+  "appName": {
+    "message": "Testing Tools",
+    "description": "Translation key: appName"
+  },
+  "buttons_save": {
+    "message": "Save",
+    "description": "Translation key: buttons_save"
+  },
+  "buttons_cancel": {
+    "message": "Cancel",
+    "description": "Translation key: buttons_cancel"
+  },
+  "buttons_confirm": {
+    "message": "Confirm",
+    "description": "Translation key: buttons_confirm"
+  },
+  "buttons_copy": {
+    "message": "Copy",
+    "description": "Translation key: buttons_copy"
+  },
+  "buttons_clear": {
+    "message": "Clear",
+    "description": "Translation key: buttons_clear"
+  },
+  "buttons_refresh": {
+    "message": "Refresh",
+    "description": "Translation key: buttons_refresh"
+  },
+  "buttons_toggleLanguage": {
+    "message": "Switch Language",
+    "description": "Translation key: buttons_toggleLanguage"
+  },
+  "buttons_toggleTheme": {
+    "message": "Toggle theme",
+    "description": "Translation key: buttons_toggleTheme"
+  },
+  "buttons_themeMode_light": {
+    "message": "Switch to dark mode",
+    "description": "Translation key: buttons_themeMode_light"
+  },
+  "buttons_themeMode_dark": {
+    "message": "Switch to system mode",
+    "description": "Translation key: buttons_themeMode_dark"
+  },
+  "buttons_themeMode_system": {
+    "message": "Switch to light mode",
+    "description": "Translation key: buttons_themeMode_system"
+  },
+  "buttons_search": {
+    "message": "Search tools...",
+    "description": "Translation key: buttons_search"
+  },
+  "buttons_back": {
+    "message": "Back",
+    "description": "Translation key: buttons_back"
+  },
+  "buttons_clearSearch": {
+    "message": "Clear search",
+    "description": "Translation key: buttons_clearSearch"
+  },
+  "buttons_recentSearch": {
+    "message": "Recent search",
+    "description": "Translation key: buttons_recentSearch"
+  },
+  "buttons_noResults": {
+    "message": "No tools found",
+    "description": "Translation key: buttons_noResults"
+  },
+  "buttons_openInTab": {
+    "message": "Open in tab",
+    "description": "Translation key: buttons_openInTab"
+  },
+  "buttons_settings": {
+    "message": "Settings",
+    "description": "Translation key: buttons_settings"
+  },
+  "messages_copySuccess": {
+    "message": "Copied to clipboard",
+    "description": "Translation key: messages_copySuccess"
+  },
+  "messages_copyError": {
+    "message": "Copy failed",
+    "description": "Translation key: messages_copyError"
+  },
+  "messages_copyEmpty": {
+    "message": "Nothing to copy",
+    "description": "Translation key: messages_copyEmpty"
+  },
+  "errorBoundary_title": {
+    "message": "Oops, something went wrong",
+    "description": "Translation key: errorBoundary_title"
+  },
+  "errorBoundary_description": {
+    "message": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
+    "description": "Translation key: errorBoundary_description"
+  },
+  "errorBoundary_refresh": {
+    "message": "Refresh App",
+    "description": "Translation key: errorBoundary_refresh"
+  },
+  "errorBoundary_retry": {
+    "message": "Retry",
+    "description": "Translation key: errorBoundary_retry"
+  },
+  "pageErrorBoundary_title": {
+    "message": "This feature has encountered an error",
+    "description": "Translation key: pageErrorBoundary_title"
+  },
+  "pageErrorBoundary_description": {
+    "message": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu.",
+    "description": "Translation key: pageErrorBoundary_description"
+  },
+  "router_notFound": {
+    "message": "Page Not Found",
+    "description": "Translation key: router_notFound"
+  },
+  "router_notFoundDescription": {
+    "message": "This feature is not available or has been removed in the current runtime ({{entryPointType}}).",
+    "description": "Translation key: router_notFoundDescription"
+  },
+  "textInputArea_clear": {
+    "message": "Clear",
+    "description": "Translation key: textInputArea_clear"
+  },
+  "textInputArea_copyContent": {
+    "message": "Copy content",
+    "description": "Translation key: textInputArea_copyContent"
+  },
+  "textInputArea_cleared": {
+    "message": "Cleared",
+    "description": "Translation key: textInputArea_cleared"
+  },
+  "textInputArea_placeholder": {
+    "message": "placeholder text",
+    "description": "Translation key: textInputArea_placeholder"
+  },
+  "dashboard_title": {
+    "message": "Dashboard",
+    "description": "Translation key: dashboard_title"
+  },
+  "timestamp_title": {
+    "message": "Timestamp",
+    "description": "Translation key: timestamp_title"
+  },
+  "timestamp_description": {
+    "message": "Unix millisecond conversion and formatting",
+    "description": "Translation key: timestamp_description"
+  },
+  "storageCleaner_title": {
+    "message": "Storage Cleaner",
+    "description": "Translation key: storageCleaner_title"
+  },
+  "storageCleaner_description": {
+    "message": "Clean cache, cookies, and local storage",
+    "description": "Translation key: storageCleaner_description"
+  },
+  "qrCode_title": {
+    "message": "QR Code Tools",
+    "description": "Translation key: qrCode_title"
+  },
+  "qrCode_description": {
+    "message": "Generate QR code for the selected URL",
+    "description": "Translation key: qrCode_description"
+  },
+  "textStatistics_title": {
+    "message": "Text Statistics",
+    "description": "Translation key: textStatistics_title"
+  },
+  "textStatistics_description": {
+    "message": "Real-time analysis of text characters, words, and bytes",
+    "description": "Translation key: textStatistics_description"
+  },
+  "jwt_title": {
+    "message": "JWT Parser",
+    "description": "Translation key: jwt_title"
+  },
+  "jwt_description": {
+    "message": "JSON Web Token decoding and viewing",
+    "description": "Translation key: jwt_description"
+  },
+  "jsonDiff_title": {
+    "message": "JSON Tools",
+    "description": "Translation key: jsonDiff_title"
+  },
+  "jsonDiff_description": {
+    "message": "Diff, format, YAML/TOML conversion, and minify",
+    "description": "Translation key: jsonDiff_description"
+  },
+  "base64Converter_title": {
+    "message": "Base64 Converter",
+    "description": "Translation key: base64Converter_title"
+  },
+  "base64Converter_description": {
+    "message": "Encode text, files, and images to Base64",
+    "description": "Translation key: base64Converter_description"
+  },
+  "markdownToHtml_title": {
+    "message": "Markdown to HTML",
+    "description": "Translation key: markdownToHtml_title"
+  },
+  "markdownToHtml_description": {
+    "message": "Real-time Markdown conversion and HTML preview",
+    "description": "Translation key: markdownToHtml_description"
+  },
+  "htmlToMarkdown_title": {
+    "message": "HTML to Markdown",
+    "description": "Translation key: htmlToMarkdown_title"
+  },
+  "htmlToMarkdown_description": {
+    "message": "Real-time HTML conversion and Markdown preview",
+    "description": "Translation key: htmlToMarkdown_description"
+  },
+  "rightClickRestorer_title": {
+    "message": "Right Click Restorer",
+    "description": "Translation key: rightClickRestorer_title"
+  },
+  "rightClickRestorer_description": {
+    "message": "Detect and restore disabled browser right-click menus",
+    "description": "Translation key: rightClickRestorer_description"
+  },
+  "base64Converter_pageTitle": {
+    "message": "Base64 Converter",
+    "description": "Translation key: base64Converter_pageTitle"
+  },
+  "base64Converter_pageSubtitle": {
+    "message": "Encode and decode text, files, and images with Base64",
+    "description": "Translation key: base64Converter_pageSubtitle"
+  },
+  "base64Converter_textMode": {
+    "message": "Text",
+    "description": "Translation key: base64Converter_textMode"
+  },
+  "base64Converter_fileMode": {
+    "message": "File",
+    "description": "Translation key: base64Converter_fileMode"
+  },
+  "base64Converter_imageMode": {
+    "message": "Image",
+    "description": "Translation key: base64Converter_imageMode"
+  },
+  "base64Converter_encode": {
+    "message": "Encode",
+    "description": "Translation key: base64Converter_encode"
+  },
+  "base64Converter_decode": {
+    "message": "Decode",
+    "description": "Translation key: base64Converter_decode"
+  },
+  "base64Converter_clear": {
+    "message": "Clear",
+    "description": "Translation key: base64Converter_clear"
+  },
+  "base64Converter_textInputPlaceholder": {
+    "message": "Enter text to encode to Base64...",
+    "description": "Translation key: base64Converter_textInputPlaceholder"
+  },
+  "base64Converter_base64InputPlaceholder": {
+    "message": "Enter Base64 string to decode...",
+    "description": "Translation key: base64Converter_base64InputPlaceholder"
+  },
+  "base64Converter_base64Output": {
+    "message": "Base64 Output",
+    "description": "Translation key: base64Converter_base64Output"
+  },
+  "base64Converter_textOutput": {
+    "message": "Decoded Text Output",
+    "description": "Translation key: base64Converter_textOutput"
+  },
+  "base64Converter_copyRaw": {
+    "message": "Copy Raw Base64",
+    "description": "Translation key: base64Converter_copyRaw"
+  },
+  "base64Converter_copyDataUri": {
+    "message": "Copy Data URI",
+    "description": "Translation key: base64Converter_copyDataUri"
+  },
+  "base64Converter_clickOrDropToFile": {
+    "message": "Click or drop a file here",
+    "description": "Translation key: base64Converter_clickOrDropToFile"
+  },
+  "base64Converter_clickOrDropToImage": {
+    "message": "Click or drop an image here",
+    "description": "Translation key: base64Converter_clickOrDropToImage"
+  },
+  "base64Converter_clickOrDropToReplace": {
+    "message": "Click or drop to replace the file",
+    "description": "Translation key: base64Converter_clickOrDropToReplace"
+  },
+  "base64Converter_maxFileSize": {
+    "message": "Maximum file size: {{max}}",
+    "description": "Translation key: base64Converter_maxFileSize"
+  },
+  "base64Converter_supportedFormats": {
+    "message": "Supports PNG, JPG, WEBP, GIF, BMP, SVG, etc.",
+    "description": "Translation key: base64Converter_supportedFormats"
+  },
+  "base64Converter_fileSizeExceeded": {
+    "message": "File size exceeds the limit (max {{max}})",
+    "description": "Translation key: base64Converter_fileSizeExceeded"
+  },
+  "base64Converter_unsupportedImageType": {
+    "message": "Unsupported image format",
+    "description": "Translation key: base64Converter_unsupportedImageType"
+  },
+  "base64Converter_conversionFailed": {
+    "message": "Conversion failed",
+    "description": "Translation key: base64Converter_conversionFailed"
+  },
+  "base64Converter_originalSize": {
+    "message": "Original Size",
+    "description": "Translation key: base64Converter_originalSize"
+  },
+  "base64Converter_encodedSize": {
+    "message": "Encoded Size",
+    "description": "Translation key: base64Converter_encodedSize"
+  },
+  "base64Converter_invalidBase64": {
+    "message": "Invalid Base64 string",
+    "description": "Translation key: base64Converter_invalidBase64"
+  },
+  "base64Converter_binaryDataDetected": {
+    "message": "Input appears to be binary data (e.g. an image). Please switch to the Image tab.",
+    "description": "Translation key: base64Converter_binaryDataDetected"
+  },
+  "base64Converter_imageDataUriHint": {
+    "message": "Detected an image data URI — please use the Image tab to decode it.",
+    "description": "Translation key: base64Converter_imageDataUriHint"
+  },
+  "base64Converter_switchToImageMode": {
+    "message": "Switch to Image mode",
+    "description": "Translation key: base64Converter_switchToImageMode"
+  },
+  "base64Converter_download": {
+    "message": "Download",
+    "description": "Translation key: base64Converter_download"
+  },
+  "base64Converter_decodedFileName": {
+    "message": "Decoded file name",
+    "description": "Translation key: base64Converter_decodedFileName"
+  },
+  "base64Converter_decodeBase64Placeholder": {
+    "message": "Enter Base64 or data URI to decode...",
+    "description": "Translation key: base64Converter_decodeBase64Placeholder"
+  },
+  "base64Converter_decodedFileOutput": {
+    "message": "Decoded File",
+    "description": "Translation key: base64Converter_decodedFileOutput"
+  },
+  "base64Converter_decodedImageOutput": {
+    "message": "Decoded Image",
+    "description": "Translation key: base64Converter_decodedImageOutput"
+  },
+  "base64Converter_inferredMimeType": {
+    "message": "Inferred MIME type",
+    "description": "Translation key: base64Converter_inferredMimeType"
+  },
+  "base64Converter_decodedSize": {
+    "message": "Decoded size",
+    "description": "Translation key: base64Converter_decodedSize"
+  },
+  "htmlToMarkdown_pageTitle": {
+    "message": "HTML to Markdown",
+    "description": "Translation key: htmlToMarkdown_pageTitle"
+  },
+  "htmlToMarkdown_pageSubtitle": {
+    "message": "Convert HTML to Markdown in real-time",
+    "description": "Translation key: htmlToMarkdown_pageSubtitle"
+  },
+  "htmlToMarkdown_splitMode": {
+    "message": "Split",
+    "description": "Translation key: htmlToMarkdown_splitMode"
+  },
+  "htmlToMarkdown_previewMode": {
+    "message": "Preview",
+    "description": "Translation key: htmlToMarkdown_previewMode"
+  },
+  "htmlToMarkdown_markdownMode": {
+    "message": "Markdown",
+    "description": "Translation key: htmlToMarkdown_markdownMode"
+  },
+  "htmlToMarkdown_clear": {
+    "message": "Clear",
+    "description": "Translation key: htmlToMarkdown_clear"
+  },
+  "htmlToMarkdown_inputLabel": {
+    "message": "HTML Input",
+    "description": "Translation key: htmlToMarkdown_inputLabel"
+  },
+  "htmlToMarkdown_previewLabel": {
+    "message": "Markdown Preview",
+    "description": "Translation key: htmlToMarkdown_previewLabel"
+  },
+  "htmlToMarkdown_markdownOutputLabel": {
+    "message": "Markdown Output",
+    "description": "Translation key: htmlToMarkdown_markdownOutputLabel"
+  },
+  "htmlToMarkdown_inputPlaceholder": {
+    "message": "Enter your HTML content here...",
+    "description": "Translation key: htmlToMarkdown_inputPlaceholder"
+  },
+  "htmlToMarkdown_charCount": {
+    "message": "{{count}} chars",
+    "description": "Translation key: htmlToMarkdown_charCount"
+  },
+  "htmlToMarkdown_copyMarkdown": {
+    "message": "Copy Markdown",
+    "description": "Translation key: htmlToMarkdown_copyMarkdown"
+  },
+  "htmlToMarkdown_download": {
+    "message": "Download",
+    "description": "Translation key: htmlToMarkdown_download"
+  },
+  "htmlToMarkdown_emptyHint": {
+    "message": "Enter HTML content to see the conversion result",
+    "description": "Translation key: htmlToMarkdown_emptyHint"
+  },
+  "jsonDiff_pageTitle": {
+    "message": "JSON Diff",
+    "description": "Translation key: jsonDiff_pageTitle"
+  },
+  "jsonDiff_pageSubtitle": {
+    "message": "Compare differences between two JSON values",
+    "description": "Translation key: jsonDiff_pageSubtitle"
+  },
+  "jsonDiff_leftPlaceholder": {
+    "message": "Enter the original JSON...",
+    "description": "Translation key: jsonDiff_leftPlaceholder"
+  },
+  "jsonDiff_rightPlaceholder": {
+    "message": "Enter the target JSON...",
+    "description": "Translation key: jsonDiff_rightPlaceholder"
+  },
+  "jsonDiff_leftLabel": {
+    "message": "Original JSON",
+    "description": "Translation key: jsonDiff_leftLabel"
+  },
+  "jsonDiff_rightLabel": {
+    "message": "Target JSON",
+    "description": "Translation key: jsonDiff_rightLabel"
+  },
+  "jsonDiff_compareButton": {
+    "message": "Compare",
+    "description": "Translation key: jsonDiff_compareButton"
+  },
+  "jsonDiff_clearButton": {
+    "message": "Clear",
+    "description": "Translation key: jsonDiff_clearButton"
+  },
+  "jsonDiff_sideBySideMode": {
+    "message": "Side by side",
+    "description": "Translation key: jsonDiff_sideBySideMode"
+  },
+  "jsonDiff_unifiedMode": {
+    "message": "Unified",
+    "description": "Translation key: jsonDiff_unifiedMode"
+  },
+  "jsonDiff_previousDiff": {
+    "message": "Previous",
+    "description": "Translation key: jsonDiff_previousDiff"
+  },
+  "jsonDiff_nextDiff": {
+    "message": "Next",
+    "description": "Translation key: jsonDiff_nextDiff"
+  },
+  "jsonDiff_noDiffs": {
+    "message": "No differences",
+    "description": "Translation key: jsonDiff_noDiffs"
+  },
+  "jsonDiff_diffCount": {
+    "message": "{{count}} differences",
+    "description": "Translation key: jsonDiff_diffCount"
+  },
+  "jsonDiff_invalidJson": {
+    "message": "Invalid JSON format",
+    "description": "Translation key: jsonDiff_invalidJson"
+  },
+  "jsonDiff_emptyHint": {
+    "message": "Enter JSON on both sides and click Compare",
+    "description": "Translation key: jsonDiff_emptyHint"
+  },
+  "jsonDiff_fixErrorHint": {
+    "message": "Fix the JSON syntax errors above to enable live comparison",
+    "description": "Translation key: jsonDiff_fixErrorHint"
+  },
+  "jsonDiff_added": {
+    "message": "Added",
+    "description": "Translation key: jsonDiff_added"
+  },
+  "jsonDiff_removed": {
+    "message": "Removed",
+    "description": "Translation key: jsonDiff_removed"
+  },
+  "jsonDiff_modified": {
+    "message": "Modified",
+    "description": "Translation key: jsonDiff_modified"
+  },
+  "jsonFormat_formatTitle": {
+    "message": "JSON Formatter",
+    "description": "Translation key: jsonFormat_formatTitle"
+  },
+  "jsonFormat_formatSubtitle": {
+    "message": "Beautify and format JSON data",
+    "description": "Translation key: jsonFormat_formatSubtitle"
+  },
+  "jsonFormat_inputPlaceholder": {
+    "message": "Enter JSON to format...",
+    "description": "Translation key: jsonFormat_inputPlaceholder"
+  },
+  "jsonFormat_formatButton": {
+    "message": "Format",
+    "description": "Translation key: jsonFormat_formatButton"
+  },
+  "jsonFormat_clearButton": {
+    "message": "Clear",
+    "description": "Translation key: jsonFormat_clearButton"
+  },
+  "jsonFormat_sortKeys": {
+    "message": "Sort Keys",
+    "description": "Translation key: jsonFormat_sortKeys"
+  },
+  "jsonFormat_sortKeysTooltip": {
+    "message": "Sort JSON object keys in alphabetical order",
+    "description": "Translation key: jsonFormat_sortKeysTooltip"
+  },
+  "jsonFormat_indentSize": {
+    "message": "Indent",
+    "description": "Translation key: jsonFormat_indentSize"
+  },
+  "jsonFormat_indentSpaces": {
+    "message": "{{count}} spaces",
+    "description": "Translation key: jsonFormat_indentSpaces"
+  },
+  "jsonFormat_outputLabel": {
+    "message": "Formatted Result",
+    "description": "Translation key: jsonFormat_outputLabel"
+  },
+  "jsonFormat_copySuccess": {
+    "message": "Copied",
+    "description": "Translation key: jsonFormat_copySuccess"
+  },
+  "jsonFormat_copyFail": {
+    "message": "Copy failed",
+    "description": "Translation key: jsonFormat_copyFail"
+  },
+  "jsonFormat_noContent": {
+    "message": "Nothing to copy",
+    "description": "Translation key: jsonFormat_noContent"
+  },
+  "jsonFormat_invalidJson": {
+    "message": "Invalid JSON format",
+    "description": "Translation key: jsonFormat_invalidJson"
+  },
+  "jsonFormat_emptyHint": {
+    "message": "Enter JSON and click Format",
+    "description": "Translation key: jsonFormat_emptyHint"
+  },
+  "jsonFormat_fixErrorHint": {
+    "message": "Fix the JSON syntax errors above to enable live formatting",
+    "description": "Translation key: jsonFormat_fixErrorHint"
+  },
+  "jsonFormat_originalSize": {
+    "message": "Original size",
+    "description": "Translation key: jsonFormat_originalSize"
+  },
+  "jsonFormat_formattedSize": {
+    "message": "Formatted size",
+    "description": "Translation key: jsonFormat_formattedSize"
+  },
+  "jsonFormat_diffMode": {
+    "message": "Diff",
+    "description": "Translation key: jsonFormat_diffMode"
+  },
+  "jsonFormat_formatMode": {
+    "message": "Format",
+    "description": "Translation key: jsonFormat_formatMode"
+  },
+  "jsonFormat_yamlMode": {
+    "message": "YAML",
+    "description": "Translation key: jsonFormat_yamlMode"
+  },
+  "jsonFormat_tomlMode": {
+    "message": "TOML",
+    "description": "Translation key: jsonFormat_tomlMode"
+  },
+  "jsonFormat_minifyMode": {
+    "message": "Minify",
+    "description": "Translation key: jsonFormat_minifyMode"
+  },
+  "jsonFormat_yamlTitle": {
+    "message": "JSON to YAML",
+    "description": "Translation key: jsonFormat_yamlTitle"
+  },
+  "jsonFormat_yamlSubtitle": {
+    "message": "Convert JSON data to YAML format",
+    "description": "Translation key: jsonFormat_yamlSubtitle"
+  },
+  "jsonFormat_yamlModeInputPlaceholder": {
+    "message": "Enter JSON to convert...",
+    "description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
+  },
+  "jsonFormat_yamlModeOutputLabel": {
+    "message": "YAML Result",
+    "description": "Translation key: jsonFormat_yamlModeOutputLabel"
+  },
+  "jsonFormat_yamlModeEmptyHint": {
+    "message": "Enter JSON and click Convert",
+    "description": "Translation key: jsonFormat_yamlModeEmptyHint"
+  },
+  "jsonFormat_convertButton": {
+    "message": "Convert",
+    "description": "Translation key: jsonFormat_convertButton"
+  },
+  "jsonFormat_tomlTitle": {
+    "message": "JSON to TOML",
+    "description": "Translation key: jsonFormat_tomlTitle"
+  },
+  "jsonFormat_tomlSubtitle": {
+    "message": "Convert JSON data to TOML format",
+    "description": "Translation key: jsonFormat_tomlSubtitle"
+  },
+  "jsonFormat_tomlModeInputPlaceholder": {
+    "message": "Enter JSON to convert...",
+    "description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
+  },
+  "jsonFormat_tomlModeOutputLabel": {
+    "message": "TOML Result",
+    "description": "Translation key: jsonFormat_tomlModeOutputLabel"
+  },
+  "jsonFormat_tomlModeEmptyHint": {
+    "message": "Enter JSON and click Convert",
+    "description": "Translation key: jsonFormat_tomlModeEmptyHint"
+  },
+  "jsonFormat_minifyTitle": {
+    "message": "JSON Minifier",
+    "description": "Translation key: jsonFormat_minifyTitle"
+  },
+  "jsonFormat_minifySubtitle": {
+    "message": "Compress JSON into a compact single-line format",
+    "description": "Translation key: jsonFormat_minifySubtitle"
+  },
+  "jsonFormat_minifyModeInputPlaceholder": {
+    "message": "Enter JSON to minify...",
+    "description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
+  },
+  "jsonFormat_minifyModeOutputLabel": {
+    "message": "Minified Result",
+    "description": "Translation key: jsonFormat_minifyModeOutputLabel"
+  },
+  "jsonFormat_minifyModeEmptyHint": {
+    "message": "Enter JSON and click Minify",
+    "description": "Translation key: jsonFormat_minifyModeEmptyHint"
+  },
+  "jsonFormat_minifyButton": {
+    "message": "Minify",
+    "description": "Translation key: jsonFormat_minifyButton"
+  },
+  "jwt_pageTitle": {
+    "message": "JWT Parser",
+    "description": "Translation key: jwt_pageTitle"
+  },
+  "jwt_pageSubtitle": {
+    "message": "JSON Web Token decoding and viewing",
+    "description": "Translation key: jwt_pageSubtitle"
+  },
+  "jwt_placeholder": {
+    "message": "Paste Encoded JWT here...",
+    "description": "Translation key: jwt_placeholder"
+  },
+  "jwt_headerTitle": {
+    "message": "HEADER: Algorithm & Token Type",
+    "description": "Translation key: jwt_headerTitle"
+  },
+  "jwt_payloadTitle": {
+    "message": "PAYLOAD: Data",
+    "description": "Translation key: jwt_payloadTitle"
+  },
+  "jwt_signatureTitle": {
+    "message": "Signature",
+    "description": "Translation key: jwt_signatureTitle"
+  },
+  "jwt_noSignature": {
+    "message": "No Signature",
+    "description": "Translation key: jwt_noSignature"
+  },
+  "jwt_invalidFormat": {
+    "message": "Unable to parse",
+    "description": "Translation key: jwt_invalidFormat"
+  },
+  "jwt_errors_invalidBase64String": {
+    "message": "Invalid base64url string",
+    "description": "Translation key: jwt_errors_invalidBase64String"
+  },
+  "jwt_errors_failedToDecode": {
+    "message": "Failed to decode base64url: ",
+    "description": "Translation key: jwt_errors_failedToDecode"
+  },
+  "jwt_errors_invalidFormat": {
+    "message": "Invalid JWT format: expected 3 parts separated by .",
+    "description": "Translation key: jwt_errors_invalidFormat"
+  },
+  "jwt_errors_parseHeaderFailed": {
+    "message": "Failed to parse Header: ",
+    "description": "Translation key: jwt_errors_parseHeaderFailed"
+  },
+  "jwt_errors_parsePayloadFailed": {
+    "message": "Failed to parse Payload: ",
+    "description": "Translation key: jwt_errors_parsePayloadFailed"
+  },
+  "markdownToHtml_pageTitle": {
+    "message": "Markdown to HTML",
+    "description": "Translation key: markdownToHtml_pageTitle"
+  },
+  "markdownToHtml_pageSubtitle": {
+    "message": "Convert Markdown to HTML in real-time with preview",
+    "description": "Translation key: markdownToHtml_pageSubtitle"
+  },
+  "markdownToHtml_splitMode": {
+    "message": "Split",
+    "description": "Translation key: markdownToHtml_splitMode"
+  },
+  "markdownToHtml_previewMode": {
+    "message": "Preview",
+    "description": "Translation key: markdownToHtml_previewMode"
+  },
+  "markdownToHtml_htmlMode": {
+    "message": "HTML",
+    "description": "Translation key: markdownToHtml_htmlMode"
+  },
+  "markdownToHtml_clear": {
+    "message": "Clear",
+    "description": "Translation key: markdownToHtml_clear"
+  },
+  "markdownToHtml_print": {
+    "message": "Print",
+    "description": "Translation key: markdownToHtml_print"
+  },
+  "markdownToHtml_download": {
+    "message": "Download",
+    "description": "Translation key: markdownToHtml_download"
+  },
+  "markdownToHtml_inputLabel": {
+    "message": "Markdown Input",
+    "description": "Translation key: markdownToHtml_inputLabel"
+  },
+  "markdownToHtml_previewLabel": {
+    "message": "Live Preview",
+    "description": "Translation key: markdownToHtml_previewLabel"
+  },
+  "markdownToHtml_htmlOutputLabel": {
+    "message": "HTML Output",
+    "description": "Translation key: markdownToHtml_htmlOutputLabel"
+  },
+  "markdownToHtml_inputPlaceholder": {
+    "message": "Enter your Markdown content here...",
+    "description": "Translation key: markdownToHtml_inputPlaceholder"
+  },
+  "markdownToHtml_charCount": {
+    "message": "{{count}} chars",
+    "description": "Translation key: markdownToHtml_charCount"
+  },
+  "markdownToHtml_copyHtml": {
+    "message": "Copy HTML",
+    "description": "Translation key: markdownToHtml_copyHtml"
+  },
+  "markdownToHtml_downloadSuccess": {
+    "message": "File downloaded successfully",
+    "description": "Translation key: markdownToHtml_downloadSuccess"
+  },
+  "markdownToHtml_printSuccess": {
+    "message": "Print window opened",
+    "description": "Translation key: markdownToHtml_printSuccess"
+  },
+  "qrCode_pageTitle": {
+    "message": "QR Code Tools",
+    "description": "Translation key: qrCode_pageTitle"
+  },
+  "qrCode_pageSubtitle": {
+    "message": "Generate and parse QR codes",
+    "description": "Translation key: qrCode_pageSubtitle"
+  },
+  "qrCode_generateMode": {
+    "message": "Generate QR Code",
+    "description": "Translation key: qrCode_generateMode"
+  },
+  "qrCode_parseMode": {
+    "message": "Parse QR Code",
+    "description": "Translation key: qrCode_parseMode"
+  },
+  "qrCode_urlToQr": {
+    "message": "Text to QR Code",
+    "description": "Translation key: qrCode_urlToQr"
+  },
+  "qrCode_qrToUrl": {
+    "message": "QR Code to Text",
+    "description": "Translation key: qrCode_qrToUrl"
+  },
+  "qrCode_urlInputLabel": {
+    "message": "Enter URL or Text",
+    "description": "Translation key: qrCode_urlInputLabel"
+  },
+  "qrCode_urlInputPlaceholder": {
+    "message": "Enter URL or text content, QR code will be generated automatically",
+    "description": "Translation key: qrCode_urlInputPlaceholder"
+  },
+  "qrCode_generateButton": {
+    "message": "Generate QR Code",
+    "description": "Translation key: qrCode_generateButton"
+  },
+  "qrCode_generating": {
+    "message": "Generating...",
+    "description": "Translation key: qrCode_generating"
+  },
+  "qrCode_qrCodeWillShow": {
+    "message": "QR code will be shown here",
+    "description": "Translation key: qrCode_qrCodeWillShow"
+  },
+  "qrCode_downloadButton": {
+    "message": "Download QR Code",
+    "description": "Translation key: qrCode_downloadButton"
+  },
+  "qrCode_copyQrButton": {
+    "message": "Copy QR Code Image",
+    "description": "Translation key: qrCode_copyQrButton"
+  },
+  "qrCode_qrCodeSuccess": {
+    "message": "QR code generated successfully",
+    "description": "Translation key: qrCode_qrCodeSuccess"
+  },
+  "qrCode_qrCodeDownloadSuccess": {
+    "message": "QR code downloaded successfully",
+    "description": "Translation key: qrCode_qrCodeDownloadSuccess"
+  },
+  "qrCode_qrCodeCopySuccess": {
+    "message": "QR code copied to clipboard",
+    "description": "Translation key: qrCode_qrCodeCopySuccess"
+  },
+  "qrCode_selectImage": {
+    "message": "Please select a QR code image",
+    "description": "Translation key: qrCode_selectImage"
+  },
+  "qrCode_parseSuccess": {
+    "message": "QR code parsed successfully",
+    "description": "Translation key: qrCode_parseSuccess"
+  },
+  "qrCode_noQrDetected": {
+    "message": "No QR code detected, please ensure the image is clear and contains a QR code",
+    "description": "Translation key: qrCode_noQrDetected"
+  },
+  "qrCode_parseError": {
+    "message": "Failed to parse QR code, please try again",
+    "description": "Translation key: qrCode_parseError"
+  },
+  "qrCode_generateError": {
+    "message": "Failed to generate QR code, please check the input",
+    "description": "Translation key: qrCode_generateError"
+  },
+  "qrCode_copyError": {
+    "message": "Copy failed, please try again",
+    "description": "Translation key: qrCode_copyError"
+  },
+  "qrCode_imagePasted": {
+    "message": "Image pasted, parsing...",
+    "description": "Translation key: qrCode_imagePasted"
+  },
+  "qrCode_imagePasteError": {
+    "message": "Failed to paste image, please try again",
+    "description": "Translation key: qrCode_imagePasteError"
+  },
+  "qrCode_imageCleared": {
+    "message": "Image cleared",
+    "description": "Translation key: qrCode_imageCleared"
+  },
+  "qrCode_clickToUpload": {
+    "message": "Click, drag, or paste to upload QR code image",
+    "description": "Translation key: qrCode_clickToUpload"
+  },
+  "qrCode_supportFormats": {
+    "message": "Supports PNG, JPG, WEBP, Base64 formats",
+    "description": "Translation key: qrCode_supportFormats"
+  },
+  "qrCode_parseButton": {
+    "message": "Parse QR Code",
+    "description": "Translation key: qrCode_parseButton"
+  },
+  "qrCode_parsing": {
+    "message": "Parsing...",
+    "description": "Translation key: qrCode_parsing"
+  },
+  "qrCode_resultLabel": {
+    "message": "Parsing Result",
+    "description": "Translation key: qrCode_resultLabel"
+  },
+  "qrCode_copyTooltip": {
+    "message": "Copy",
+    "description": "Translation key: qrCode_copyTooltip"
+  },
+  "qrCode_enterUrlError": {
+    "message": "Please enter URL or text",
+    "description": "Translation key: qrCode_enterUrlError"
+  },
+  "qrCode_clickToChange": {
+    "message": "Click to change image",
+    "description": "Translation key: qrCode_clickToChange"
+  },
+  "qrCode_pasteHint": {
+    "message": "Supports Ctrl+V to paste images or Base64 strings",
+    "description": "Translation key: qrCode_pasteHint"
+  },
+  "qrCode_autoGenerateHint": {
+    "message": "QR code will be generated automatically after input",
+    "description": "Translation key: qrCode_autoGenerateHint"
+  },
+  "qrCode_autoParseHint": {
+    "message": "QR code will be parsed automatically after upload",
+    "description": "Translation key: qrCode_autoParseHint"
+  },
+  "rightClickRestorer_loading": {
+    "message": "Loading...",
+    "description": "Translation key: rightClickRestorer_loading"
+  },
+  "rightClickRestorer_currentDomain": {
+    "message": "Current Domain",
+    "description": "Translation key: rightClickRestorer_currentDomain"
+  },
+  "rightClickRestorer_statusLocked": {
+    "message": "Locked",
+    "description": "Translation key: rightClickRestorer_statusLocked"
+  },
+  "rightClickRestorer_statusUnlocked": {
+    "message": "Unlocked",
+    "description": "Translation key: rightClickRestorer_statusUnlocked"
+  },
+  "rightClickRestorer_unsupported": {
+    "message": "Unsupported",
+    "description": "Translation key: rightClickRestorer_unsupported"
+  },
+  "rightClickRestorer_unsupportedDesc": {
+    "message": "The current page is a browser internal or extension page. Right-click unlock is not available. Please switch to a regular webpage.",
+    "description": "Translation key: rightClickRestorer_unsupportedDesc"
+  },
+  "rightClickRestorer_unlockDesc": {
+    "message": "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.",
+    "description": "Translation key: rightClickRestorer_unlockDesc"
+  },
+  "rightClickRestorer_unlockBtn": {
+    "message": "Unlock Right Click",
+    "description": "Translation key: rightClickRestorer_unlockBtn"
+  },
+  "rightClickRestorer_alreadyUnlocked": {
+    "message": "Right Click Unlocked",
+    "description": "Translation key: rightClickRestorer_alreadyUnlocked"
+  },
+  "storageCleaner_pageTitle": {
+    "message": "Storage Cleaner",
+    "description": "Translation key: storageCleaner_pageTitle"
+  },
+  "storageCleaner_pageSubtitle": {
+    "message": "Clear cache, cookies, and local storage",
+    "description": "Translation key: storageCleaner_pageSubtitle"
+  },
+  "storageCleaner_loading": {
+    "message": "Loading...",
+    "description": "Translation key: storageCleaner_loading"
+  },
+  "storageCleaner_initializing": {
+    "message": "Reading site data...",
+    "description": "Translation key: storageCleaner_initializing"
+  },
+  "storageCleaner_occupied": {
+    "message": "Occupied {{size}}",
+    "description": "Translation key: storageCleaner_occupied"
+  },
+  "storageCleaner_cleaning": {
+    "message": "Cleaning...",
+    "description": "Translation key: storageCleaner_cleaning"
+  },
+  "storageCleaner_cleanNow": {
+    "message": "Clean Now",
+    "description": "Translation key: storageCleaner_cleanNow"
+  },
+  "storageCleaner_autoRefresh": {
+    "message": "Auto refresh page after cleaning",
+    "description": "Translation key: storageCleaner_autoRefresh"
+  },
+  "storageCleaner_selectAll": {
+    "message": "Select all items",
+    "description": "Translation key: storageCleaner_selectAll"
+  },
+  "storageCleaner_cleanSuccess": {
+    "message": "Cleaning complete",
+    "description": "Translation key: storageCleaner_cleanSuccess"
+  },
+  "storageCleaner_cleanError": {
+    "message": "Cleaning failed",
+    "description": "Translation key: storageCleaner_cleanError"
+  },
+  "storageCleaner_noData": {
+    "message": "No data",
+    "description": "Translation key: storageCleaner_noData"
+  },
+  "storageCleaner_countUnit": {
+    "message": "items",
+    "description": "Translation key: storageCleaner_countUnit"
+  },
+  "storageCleaner_errorNoTab": {
+    "message": "Unable to get current tab",
+    "description": "Translation key: storageCleaner_errorNoTab"
+  },
+  "storageCleaner_errorRestricted": {
+    "message": "Storage cleaning is not supported on this page",
+    "description": "Translation key: storageCleaner_errorRestricted"
+  },
+  "storageCleaner_cleanSuccessReload": {
+    "message": "Cleaning successful, reloading page...",
+    "description": "Translation key: storageCleaner_cleanSuccessReload"
+  },
+  "storageCleaner_errorStandardOnly": {
+    "message": "Storage cleaning only works on standard web pages",
+    "description": "Translation key: storageCleaner_errorStandardOnly"
+  },
+  "storageCleaner_confirmTitle": {
+    "message": "Confirm Clear Data?",
+    "description": "Translation key: storageCleaner_confirmTitle"
+  },
+  "storageCleaner_confirmDesc": {
+    "message": "You are about to permanently delete the following selected storage items from the current page.",
+    "description": "Translation key: storageCleaner_confirmDesc"
+  },
+  "storageCleaner_irreversible": {
+    "message": "This action is irreversible",
+    "description": "Translation key: storageCleaner_irreversible"
+  },
+  "storageCleaner_confirmAction": {
+    "message": "Confirm Clear",
+    "description": "Translation key: storageCleaner_confirmAction"
+  },
+  "storageCleaner_cleanedSummary": {
+    "message": "Cleaned {{items}}",
+    "description": "Translation key: storageCleaner_cleanedSummary"
+  },
+  "storageCleaner_noDataToClean": {
+    "message": "No storage data found to clean",
+    "description": "Translation key: storageCleaner_noDataToClean"
+  },
+  "storageCleaner_partialFailure": {
+    "message": "Some items failed to clean",
+    "description": "Translation key: storageCleaner_partialFailure"
+  },
+  "storageCleaner_options_localStorage": {
+    "message": "Local Storage",
+    "description": "Translation key: storageCleaner_options_localStorage"
+  },
+  "storageCleaner_options_sessionStorage": {
+    "message": "Session Storage",
+    "description": "Translation key: storageCleaner_options_sessionStorage"
+  },
+  "storageCleaner_options_indexedDB": {
+    "message": "IndexedDB",
+    "description": "Translation key: storageCleaner_options_indexedDB"
+  },
+  "storageCleaner_options_cookies": {
+    "message": "Cookies",
+    "description": "Translation key: storageCleaner_options_cookies"
+  },
+  "storageCleaner_options_cacheStorage": {
+    "message": "Cache Storage",
+    "description": "Translation key: storageCleaner_options_cacheStorage"
+  },
+  "storageCleaner_options_serviceWorkers": {
+    "message": "Service Workers",
+    "description": "Translation key: storageCleaner_options_serviceWorkers"
+  },
+  "textStatistics_pageTitle": {
+    "message": "Text Statistics",
+    "description": "Translation key: textStatistics_pageTitle"
+  },
+  "textStatistics_pageSubtitle": {
+    "message": "Real-time analysis of characters, words, lines, and byte size",
+    "description": "Translation key: textStatistics_pageSubtitle"
+  },
+  "textStatistics_placeholder": {
+    "message": "Type or paste text here...",
+    "description": "Translation key: textStatistics_placeholder"
+  },
+  "textStatistics_characters": {
+    "message": "Characters",
+    "description": "Translation key: textStatistics_characters"
+  },
+  "textStatistics_words": {
+    "message": "Words",
+    "description": "Translation key: textStatistics_words"
+  },
+  "textStatistics_lines": {
+    "message": "Lines",
+    "description": "Translation key: textStatistics_lines"
+  },
+  "textStatistics_bytes": {
+    "message": "Byte Size",
+    "description": "Translation key: textStatistics_bytes"
+  },
+  "timestamp_pageTitle": {
+    "message": "Timestamp Conversion",
+    "description": "Translation key: timestamp_pageTitle"
+  },
+  "timestamp_pageSubtitle": {
+    "message": "Unix millisecond conversion and formatting",
+    "description": "Translation key: timestamp_pageSubtitle"
+  },
+  "timestamp_tsToDate": {
+    "message": "Timestamp → Date",
+    "description": "Translation key: timestamp_tsToDate"
+  },
+  "timestamp_dateToTs": {
+    "message": "Date → Timestamp",
+    "description": "Translation key: timestamp_dateToTs"
+  },
+  "timestamp_placeholderTs": {
+    "message": "Enter timestamp...",
+    "description": "Translation key: timestamp_placeholderTs"
+  },
+  "timestamp_placeholderDate": {
+    "message": "YYYY-MM-DD HH:mm:ss",
+    "description": "Translation key: timestamp_placeholderDate"
+  },
+  "timestamp_unitMs": {
+    "message": "Millisecond (ms)",
+    "description": "Translation key: timestamp_unitMs"
+  },
+  "timestamp_unitS": {
+    "message": "Second (s)",
+    "description": "Translation key: timestamp_unitS"
+  },
+  "timestamp_convertButton": {
+    "message": "Convert Now",
+    "description": "Translation key: timestamp_convertButton"
+  },
+  "timestamp_currentTs": {
+    "message": "Current Timestamp",
+    "description": "Translation key: timestamp_currentTs"
+  },
+  "timestamp_useNowTooltip": {
+    "message": "Use this value",
+    "description": "Translation key: timestamp_useNowTooltip"
+  },
+  "timestamp_copyTsTooltip": {
+    "message": "Copy timestamp",
+    "description": "Translation key: timestamp_copyTsTooltip"
+  },
+  "timestamp_usedSuccess": {
+    "message": "Using current timestamp",
+    "description": "Translation key: timestamp_usedSuccess"
+  },
+  "timestamp_resultLabel": {
+    "message": "Conversion Result",
+    "description": "Translation key: timestamp_resultLabel"
+  },
+  "timestamp_copyResultTooltip": {
+    "message": "Copy result",
+    "description": "Translation key: timestamp_copyResultTooltip"
+  },
+  "timestamp_relativeTime": {
+    "message": "Relative Time",
+    "description": "Translation key: timestamp_relativeTime"
+  },
+  "timestamp_iso8601": {
+    "message": "ISO 8601",
+    "description": "Translation key: timestamp_iso8601"
+  },
+  "timestamp_utcTime": {
+    "message": "UTC Time",
+    "description": "Translation key: timestamp_utcTime"
+  },
+  "timestamp_copyTooltip": {
+    "message": "Copy",
+    "description": "Translation key: timestamp_copyTooltip"
+  },
+  "timestamp_resultEmpty": {
+    "message": "Enter a value and click convert",
+    "description": "Translation key: timestamp_resultEmpty"
+  },
+  "timestamp_errors_invalidNumber": {
+    "message": "Invalid number",
+    "description": "Translation key: timestamp_errors_invalidNumber"
+  },
+  "timestamp_errors_invalidTimestamp": {
+    "message": "Invalid timestamp",
+    "description": "Translation key: timestamp_errors_invalidTimestamp"
+  },
+  "timestamp_errors_invalidFormat": {
+    "message": "Format error",
+    "description": "Translation key: timestamp_errors_invalidFormat"
+  },
+  "common_buttons_save": {
+    "message": "Save",
+    "description": "Translation key: buttons_save"
+  },
+  "common_buttons_cancel": {
+    "message": "Cancel",
+    "description": "Translation key: buttons_cancel"
+  },
+  "common_buttons_confirm": {
+    "message": "Confirm",
+    "description": "Translation key: buttons_confirm"
+  },
+  "common_buttons_copy": {
+    "message": "Copy",
+    "description": "Translation key: buttons_copy"
+  },
+  "common_buttons_clear": {
+    "message": "Clear",
+    "description": "Translation key: buttons_clear"
+  },
+  "common_buttons_refresh": {
+    "message": "Refresh",
+    "description": "Translation key: buttons_refresh"
+  },
+  "common_buttons_toggleLanguage": {
+    "message": "Switch Language",
+    "description": "Translation key: buttons_toggleLanguage"
+  },
+  "common_buttons_toggleTheme": {
+    "message": "Toggle theme",
+    "description": "Translation key: buttons_toggleTheme"
+  },
+  "common_buttons_themeMode_light": {
+    "message": "Switch to dark mode",
+    "description": "Translation key: buttons_themeMode_light"
+  },
+  "common_buttons_themeMode_dark": {
+    "message": "Switch to system mode",
+    "description": "Translation key: buttons_themeMode_dark"
+  },
+  "common_buttons_themeMode_system": {
+    "message": "Switch to light mode",
+    "description": "Translation key: buttons_themeMode_system"
+  },
+  "common_buttons_search": {
+    "message": "Search tools...",
+    "description": "Translation key: buttons_search"
+  },
+  "common_buttons_back": {
+    "message": "Back",
+    "description": "Translation key: buttons_back"
+  },
+  "common_buttons_clearSearch": {
+    "message": "Clear search",
+    "description": "Translation key: buttons_clearSearch"
+  },
+  "common_buttons_recentSearch": {
+    "message": "Recent search",
+    "description": "Translation key: buttons_recentSearch"
+  },
+  "common_buttons_noResults": {
+    "message": "No tools found",
+    "description": "Translation key: buttons_noResults"
+  },
+  "common_buttons_openInTab": {
+    "message": "Open in tab",
+    "description": "Translation key: buttons_openInTab"
+  },
+  "common_buttons_settings": {
+    "message": "Settings",
+    "description": "Translation key: buttons_settings"
+  },
+  "common_errorBoundary_title": {
+    "message": "Oops, something went wrong",
+    "description": "Translation key: errorBoundary_title"
+  },
+  "common_errorBoundary_description": {
+    "message": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
+    "description": "Translation key: errorBoundary_description"
+  },
+  "common_errorBoundary_refresh": {
+    "message": "Refresh App",
+    "description": "Translation key: errorBoundary_refresh"
+  },
+  "common_errorBoundary_retry": {
+    "message": "Retry",
+    "description": "Translation key: errorBoundary_retry"
+  },
+  "common_pageErrorBoundary_title": {
+    "message": "This feature has encountered an error",
+    "description": "Translation key: pageErrorBoundary_title"
+  },
+  "common_pageErrorBoundary_description": {
+    "message": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu.",
+    "description": "Translation key: pageErrorBoundary_description"
+  }
+}
diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
new file mode 100644
index 0000000..a0386d2
--- /dev/null
+++ b/public/_locales/zh/messages.json
@@ -0,0 +1,1290 @@
+{
+  "appName": {
+    "message": "测试工具",
+    "description": "Translation key: appName"
+  },
+  "buttons_save": {
+    "message": "保存",
+    "description": "Translation key: buttons_save"
+  },
+  "buttons_cancel": {
+    "message": "取消",
+    "description": "Translation key: buttons_cancel"
+  },
+  "buttons_confirm": {
+    "message": "确认",
+    "description": "Translation key: buttons_confirm"
+  },
+  "buttons_copy": {
+    "message": "复制",
+    "description": "Translation key: buttons_copy"
+  },
+  "buttons_clear": {
+    "message": "清理",
+    "description": "Translation key: buttons_clear"
+  },
+  "buttons_refresh": {
+    "message": "刷新",
+    "description": "Translation key: buttons_refresh"
+  },
+  "buttons_toggleLanguage": {
+    "message": "切换语言",
+    "description": "Translation key: buttons_toggleLanguage"
+  },
+  "buttons_toggleTheme": {
+    "message": "切换主题",
+    "description": "Translation key: buttons_toggleTheme"
+  },
+  "buttons_themeMode_light": {
+    "message": "切换到深色模式",
+    "description": "Translation key: buttons_themeMode_light"
+  },
+  "buttons_themeMode_dark": {
+    "message": "切换到系统模式",
+    "description": "Translation key: buttons_themeMode_dark"
+  },
+  "buttons_themeMode_system": {
+    "message": "切换到浅色模式",
+    "description": "Translation key: buttons_themeMode_system"
+  },
+  "buttons_search": {
+    "message": "搜索工具...",
+    "description": "Translation key: buttons_search"
+  },
+  "buttons_back": {
+    "message": "返回",
+    "description": "Translation key: buttons_back"
+  },
+  "buttons_clearSearch": {
+    "message": "清除搜索",
+    "description": "Translation key: buttons_clearSearch"
+  },
+  "buttons_recentSearch": {
+    "message": "最近搜索",
+    "description": "Translation key: buttons_recentSearch"
+  },
+  "buttons_noResults": {
+    "message": "未找到相关工具",
+    "description": "Translation key: buttons_noResults"
+  },
+  "buttons_openInTab": {
+    "message": "在标签页打开",
+    "description": "Translation key: buttons_openInTab"
+  },
+  "buttons_settings": {
+    "message": "设置",
+    "description": "Translation key: buttons_settings"
+  },
+  "messages_copySuccess": {
+    "message": "已复制到剪贴板",
+    "description": "Translation key: messages_copySuccess"
+  },
+  "messages_copyError": {
+    "message": "复制失败",
+    "description": "Translation key: messages_copyError"
+  },
+  "messages_copyEmpty": {
+    "message": "无内容可复制",
+    "description": "Translation key: messages_copyEmpty"
+  },
+  "errorBoundary_title": {
+    "message": "糟糕，出了点问题",
+    "description": "Translation key: errorBoundary_title"
+  },
+  "errorBoundary_description": {
+    "message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
+    "description": "Translation key: errorBoundary_description"
+  },
+  "errorBoundary_refresh": {
+    "message": "刷新应用",
+    "description": "Translation key: errorBoundary_refresh"
+  },
+  "errorBoundary_retry": {
+    "message": "重新尝试",
+    "description": "Translation key: errorBoundary_retry"
+  },
+  "pageErrorBoundary_title": {
+    "message": "该功能运行异常",
+    "description": "Translation key: pageErrorBoundary_title"
+  },
+  "pageErrorBoundary_description": {
+    "message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
+    "description": "Translation key: pageErrorBoundary_description"
+  },
+  "router_notFound": {
+    "message": "页面未找到",
+    "description": "Translation key: router_notFound"
+  },
+  "router_notFoundDescription": {
+    "message": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。",
+    "description": "Translation key: router_notFoundDescription"
+  },
+  "textInputArea_clear": {
+    "message": "清空",
+    "description": "Translation key: textInputArea_clear"
+  },
+  "textInputArea_copyContent": {
+    "message": "复制内容",
+    "description": "Translation key: textInputArea_copyContent"
+  },
+  "textInputArea_cleared": {
+    "message": "已清空",
+    "description": "Translation key: textInputArea_cleared"
+  },
+  "textInputArea_placeholder": {
+    "message": "请输入文本",
+    "description": "Translation key: textInputArea_placeholder"
+  },
+  "dashboard_title": {
+    "message": "仪表盘",
+    "description": "Translation key: dashboard_title"
+  },
+  "timestamp_title": {
+    "message": "时间戳",
+    "description": "Translation key: timestamp_title"
+  },
+  "timestamp_description": {
+    "message": "Unix 毫秒数转换与格式化",
+    "description": "Translation key: timestamp_description"
+  },
+  "storageCleaner_title": {
+    "message": "存储清理",
+    "description": "Translation key: storageCleaner_title"
+  },
+  "storageCleaner_description": {
+    "message": "清理缓存、Cookies 及本地存储",
+    "description": "Translation key: storageCleaner_description"
+  },
+  "qrCode_title": {
+    "message": "二维码工具",
+    "description": "Translation key: qrCode_title"
+  },
+  "qrCode_description": {
+    "message": "生成当前选中的 URL 的二维码",
+    "description": "Translation key: qrCode_description"
+  },
+  "textStatistics_title": {
+    "message": "文本统计",
+    "description": "Translation key: textStatistics_title"
+  },
+  "textStatistics_description": {
+    "message": "实时分析文本字符、单词及字节",
+    "description": "Translation key: textStatistics_description"
+  },
+  "jwt_title": {
+    "message": "JWT 解析",
+    "description": "Translation key: jwt_title"
+  },
+  "jwt_description": {
+    "message": "JSON Web Token 解码与查看",
+    "description": "Translation key: jwt_description"
+  },
+  "jsonDiff_title": {
+    "message": "JSON 工具",
+    "description": "Translation key: jsonDiff_title"
+  },
+  "jsonDiff_description": {
+    "message": "差异比较、格式化、YAML/TOML 转换及压缩",
+    "description": "Translation key: jsonDiff_description"
+  },
+  "base64Converter_title": {
+    "message": "Base64 转换器",
+    "description": "Translation key: base64Converter_title"
+  },
+  "base64Converter_description": {
+    "message": "文本、文件与图像的 Base64 编码转换",
+    "description": "Translation key: base64Converter_description"
+  },
+  "markdownToHtml_title": {
+    "message": "Markdown 转 HTML",
+    "description": "Translation key: markdownToHtml_title"
+  },
+  "markdownToHtml_description": {
+    "message": "实时 Markdown 转换与 HTML 预览",
+    "description": "Translation key: markdownToHtml_description"
+  },
+  "htmlToMarkdown_title": {
+    "message": "HTML 转 Markdown",
+    "description": "Translation key: htmlToMarkdown_title"
+  },
+  "htmlToMarkdown_description": {
+    "message": "实时 HTML 转换与 Markdown 预览",
+    "description": "Translation key: htmlToMarkdown_description"
+  },
+  "rightClickRestorer_title": {
+    "message": "右键恢复",
+    "description": "Translation key: rightClickRestorer_title"
+  },
+  "rightClickRestorer_description": {
+    "message": "检测并恢复被网站禁用的浏览器右键菜单",
+    "description": "Translation key: rightClickRestorer_description"
+  },
+  "base64Converter_pageTitle": {
+    "message": "Base64 转换器",
+    "description": "Translation key: base64Converter_pageTitle"
+  },
+  "base64Converter_pageSubtitle": {
+    "message": "文本、文件与图像的 Base64 编码与解码",
+    "description": "Translation key: base64Converter_pageSubtitle"
+  },
+  "base64Converter_textMode": {
+    "message": "文本",
+    "description": "Translation key: base64Converter_textMode"
+  },
+  "base64Converter_fileMode": {
+    "message": "文件",
+    "description": "Translation key: base64Converter_fileMode"
+  },
+  "base64Converter_imageMode": {
+    "message": "图像",
+    "description": "Translation key: base64Converter_imageMode"
+  },
+  "base64Converter_encode": {
+    "message": "编码",
+    "description": "Translation key: base64Converter_encode"
+  },
+  "base64Converter_decode": {
+    "message": "解码",
+    "description": "Translation key: base64Converter_decode"
+  },
+  "base64Converter_clear": {
+    "message": "清空",
+    "description": "Translation key: base64Converter_clear"
+  },
+  "base64Converter_textInputPlaceholder": {
+    "message": "输入需要编码为 Base64 的文本...",
+    "description": "Translation key: base64Converter_textInputPlaceholder"
+  },
+  "base64Converter_base64InputPlaceholder": {
+    "message": "输入需要解码的 Base64 字符串...",
+    "description": "Translation key: base64Converter_base64InputPlaceholder"
+  },
+  "base64Converter_base64Output": {
+    "message": "Base64 编码结果",
+    "description": "Translation key: base64Converter_base64Output"
+  },
+  "base64Converter_textOutput": {
+    "message": "解码文本结果",
+    "description": "Translation key: base64Converter_textOutput"
+  },
+  "base64Converter_copyRaw": {
+    "message": "复制纯 Base64",
+    "description": "Translation key: base64Converter_copyRaw"
+  },
+  "base64Converter_copyDataUri": {
+    "message": "复制 Data URI",
+    "description": "Translation key: base64Converter_copyDataUri"
+  },
+  "base64Converter_clickOrDropToFile": {
+    "message": "点击或拖拽文件到此处",
+    "description": "Translation key: base64Converter_clickOrDropToFile"
+  },
+  "base64Converter_clickOrDropToImage": {
+    "message": "点击或拖拽图像到此处",
+    "description": "Translation key: base64Converter_clickOrDropToImage"
+  },
+  "base64Converter_clickOrDropToReplace": {
+    "message": "点击或拖拽以替换文件",
+    "description": "Translation key: base64Converter_clickOrDropToReplace"
+  },
+  "base64Converter_maxFileSize": {
+    "message": "最大文件大小：{{max}}",
+    "description": "Translation key: base64Converter_maxFileSize"
+  },
+  "base64Converter_supportedFormats": {
+    "message": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
+    "description": "Translation key: base64Converter_supportedFormats"
+  },
+  "base64Converter_fileSizeExceeded": {
+    "message": "文件大小超出限制（最大 {{max}}）",
+    "description": "Translation key: base64Converter_fileSizeExceeded"
+  },
+  "base64Converter_unsupportedImageType": {
+    "message": "不支持的图像格式",
+    "description": "Translation key: base64Converter_unsupportedImageType"
+  },
+  "base64Converter_conversionFailed": {
+    "message": "转换失败",
+    "description": "Translation key: base64Converter_conversionFailed"
+  },
+  "base64Converter_originalSize": {
+    "message": "原始大小",
+    "description": "Translation key: base64Converter_originalSize"
+  },
+  "base64Converter_encodedSize": {
+    "message": "编码大小",
+    "description": "Translation key: base64Converter_encodedSize"
+  },
+  "base64Converter_invalidBase64": {
+    "message": "Base64 字符串无效",
+    "description": "Translation key: base64Converter_invalidBase64"
+  },
+  "base64Converter_binaryDataDetected": {
+    "message": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
+    "description": "Translation key: base64Converter_binaryDataDetected"
+  },
+  "base64Converter_imageDataUriHint": {
+    "message": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
+    "description": "Translation key: base64Converter_imageDataUriHint"
+  },
+  "base64Converter_switchToImageMode": {
+    "message": "切换到图像模式",
+    "description": "Translation key: base64Converter_switchToImageMode"
+  },
+  "base64Converter_download": {
+    "message": "下载",
+    "description": "Translation key: base64Converter_download"
+  },
+  "base64Converter_decodedFileName": {
+    "message": "解码后文件名",
+    "description": "Translation key: base64Converter_decodedFileName"
+  },
+  "base64Converter_decodeBase64Placeholder": {
+    "message": "输入需要解码的 Base64 或 data URI...",
+    "description": "Translation key: base64Converter_decodeBase64Placeholder"
+  },
+  "base64Converter_decodedFileOutput": {
+    "message": "解码文件",
+    "description": "Translation key: base64Converter_decodedFileOutput"
+  },
+  "base64Converter_decodedImageOutput": {
+    "message": "解码图像",
+    "description": "Translation key: base64Converter_decodedImageOutput"
+  },
+  "base64Converter_inferredMimeType": {
+    "message": "推断的 MIME 类型",
+    "description": "Translation key: base64Converter_inferredMimeType"
+  },
+  "base64Converter_decodedSize": {
+    "message": "解码大小",
+    "description": "Translation key: base64Converter_decodedSize"
+  },
+  "htmlToMarkdown_pageTitle": {
+    "message": "HTML 转 Markdown",
+    "description": "Translation key: htmlToMarkdown_pageTitle"
+  },
+  "htmlToMarkdown_pageSubtitle": {
+    "message": "实时将 HTML 转换为 Markdown 格式",
+    "description": "Translation key: htmlToMarkdown_pageSubtitle"
+  },
+  "htmlToMarkdown_splitMode": {
+    "message": "分屏",
+    "description": "Translation key: htmlToMarkdown_splitMode"
+  },
+  "htmlToMarkdown_previewMode": {
+    "message": "预览",
+    "description": "Translation key: htmlToMarkdown_previewMode"
+  },
+  "htmlToMarkdown_markdownMode": {
+    "message": "Markdown",
+    "description": "Translation key: htmlToMarkdown_markdownMode"
+  },
+  "htmlToMarkdown_clear": {
+    "message": "清空",
+    "description": "Translation key: htmlToMarkdown_clear"
+  },
+  "htmlToMarkdown_inputLabel": {
+    "message": "HTML 输入",
+    "description": "Translation key: htmlToMarkdown_inputLabel"
+  },
+  "htmlToMarkdown_previewLabel": {
+    "message": "Markdown 预览",
+    "description": "Translation key: htmlToMarkdown_previewLabel"
+  },
+  "htmlToMarkdown_markdownOutputLabel": {
+    "message": "Markdown 输出",
+    "description": "Translation key: htmlToMarkdown_markdownOutputLabel"
+  },
+  "htmlToMarkdown_inputPlaceholder": {
+    "message": "在此输入 HTML 内容...",
+    "description": "Translation key: htmlToMarkdown_inputPlaceholder"
+  },
+  "htmlToMarkdown_charCount": {
+    "message": "{{count}} 字符",
+    "description": "Translation key: htmlToMarkdown_charCount"
+  },
+  "htmlToMarkdown_copyMarkdown": {
+    "message": "复制 Markdown",
+    "description": "Translation key: htmlToMarkdown_copyMarkdown"
+  },
+  "htmlToMarkdown_download": {
+    "message": "下载",
+    "description": "Translation key: htmlToMarkdown_download"
+  },
+  "htmlToMarkdown_emptyHint": {
+    "message": "输入 HTML 内容以查看转换结果",
+    "description": "Translation key: htmlToMarkdown_emptyHint"
+  },
+  "jsonDiff_pageTitle": {
+    "message": "JSON 差异比较",
+    "description": "Translation key: jsonDiff_pageTitle"
+  },
+  "jsonDiff_pageSubtitle": {
+    "message": "对比两个 JSON 数据的差异",
+    "description": "Translation key: jsonDiff_pageSubtitle"
+  },
+  "jsonDiff_leftPlaceholder": {
+    "message": "输入原始 JSON...",
+    "description": "Translation key: jsonDiff_leftPlaceholder"
+  },
+  "jsonDiff_rightPlaceholder": {
+    "message": "输入目标 JSON...",
+    "description": "Translation key: jsonDiff_rightPlaceholder"
+  },
+  "jsonDiff_leftLabel": {
+    "message": "原始 JSON",
+    "description": "Translation key: jsonDiff_leftLabel"
+  },
+  "jsonDiff_rightLabel": {
+    "message": "目标 JSON",
+    "description": "Translation key: jsonDiff_rightLabel"
+  },
+  "jsonDiff_compareButton": {
+    "message": "比较",
+    "description": "Translation key: jsonDiff_compareButton"
+  },
+  "jsonDiff_clearButton": {
+    "message": "清空",
+    "description": "Translation key: jsonDiff_clearButton"
+  },
+  "jsonDiff_sideBySideMode": {
+    "message": "并排",
+    "description": "Translation key: jsonDiff_sideBySideMode"
+  },
+  "jsonDiff_unifiedMode": {
+    "message": "统一",
+    "description": "Translation key: jsonDiff_unifiedMode"
+  },
+  "jsonDiff_previousDiff": {
+    "message": "上一个",
+    "description": "Translation key: jsonDiff_previousDiff"
+  },
+  "jsonDiff_nextDiff": {
+    "message": "下一个",
+    "description": "Translation key: jsonDiff_nextDiff"
+  },
+  "jsonDiff_noDiffs": {
+    "message": "无差异",
+    "description": "Translation key: jsonDiff_noDiffs"
+  },
+  "jsonDiff_diffCount": {
+    "message": "{{count}} 处差异",
+    "description": "Translation key: jsonDiff_diffCount"
+  },
+  "jsonDiff_invalidJson": {
+    "message": "无效的 JSON 格式",
+    "description": "Translation key: jsonDiff_invalidJson"
+  },
+  "jsonDiff_emptyHint": {
+    "message": "输入两侧 JSON 后点击比较",
+    "description": "Translation key: jsonDiff_emptyHint"
+  },
+  "jsonDiff_fixErrorHint": {
+    "message": "请修正上方 JSON 的语法错误以开启实时流式比对",
+    "description": "Translation key: jsonDiff_fixErrorHint"
+  },
+  "jsonDiff_added": {
+    "message": "新增",
+    "description": "Translation key: jsonDiff_added"
+  },
+  "jsonDiff_removed": {
+    "message": "删除",
+    "description": "Translation key: jsonDiff_removed"
+  },
+  "jsonDiff_modified": {
+    "message": "修改",
+    "description": "Translation key: jsonDiff_modified"
+  },
+  "jsonFormat_formatTitle": {
+    "message": "JSON 格式化",
+    "description": "Translation key: jsonFormat_formatTitle"
+  },
+  "jsonFormat_formatSubtitle": {
+    "message": "美化和格式化 JSON 数据",
+    "description": "Translation key: jsonFormat_formatSubtitle"
+  },
+  "jsonFormat_inputPlaceholder": {
+    "message": "输入需要格式化的 JSON...",
+    "description": "Translation key: jsonFormat_inputPlaceholder"
+  },
+  "jsonFormat_formatButton": {
+    "message": "格式化",
+    "description": "Translation key: jsonFormat_formatButton"
+  },
+  "jsonFormat_clearButton": {
+    "message": "清空",
+    "description": "Translation key: jsonFormat_clearButton"
+  },
+  "jsonFormat_sortKeys": {
+    "message": "键名排序",
+    "description": "Translation key: jsonFormat_sortKeys"
+  },
+  "jsonFormat_sortKeysTooltip": {
+    "message": "按字母顺序对 JSON 对象键进行排序",
+    "description": "Translation key: jsonFormat_sortKeysTooltip"
+  },
+  "jsonFormat_indentSize": {
+    "message": "缩进",
+    "description": "Translation key: jsonFormat_indentSize"
+  },
+  "jsonFormat_indentSpaces": {
+    "message": "{{count}} 个空格",
+    "description": "Translation key: jsonFormat_indentSpaces"
+  },
+  "jsonFormat_outputLabel": {
+    "message": "格式化结果",
+    "description": "Translation key: jsonFormat_outputLabel"
+  },
+  "jsonFormat_copySuccess": {
+    "message": "复制成功",
+    "description": "Translation key: jsonFormat_copySuccess"
+  },
+  "jsonFormat_copyFail": {
+    "message": "复制失败",
+    "description": "Translation key: jsonFormat_copyFail"
+  },
+  "jsonFormat_noContent": {
+    "message": "无内容可复制",
+    "description": "Translation key: jsonFormat_noContent"
+  },
+  "jsonFormat_invalidJson": {
+    "message": "无效的 JSON 格式",
+    "description": "Translation key: jsonFormat_invalidJson"
+  },
+  "jsonFormat_emptyHint": {
+    "message": "输入 JSON 后点击格式化",
+    "description": "Translation key: jsonFormat_emptyHint"
+  },
+  "jsonFormat_fixErrorHint": {
+    "message": "请修正上方 JSON 的语法错误以开启实时流式格式化",
+    "description": "Translation key: jsonFormat_fixErrorHint"
+  },
+  "jsonFormat_originalSize": {
+    "message": "原始大小",
+    "description": "Translation key: jsonFormat_originalSize"
+  },
+  "jsonFormat_formattedSize": {
+    "message": "格式化后大小",
+    "description": "Translation key: jsonFormat_formattedSize"
+  },
+  "jsonFormat_diffMode": {
+    "message": "差异比较",
+    "description": "Translation key: jsonFormat_diffMode"
+  },
+  "jsonFormat_formatMode": {
+    "message": "格式化",
+    "description": "Translation key: jsonFormat_formatMode"
+  },
+  "jsonFormat_yamlMode": {
+    "message": "YAML",
+    "description": "Translation key: jsonFormat_yamlMode"
+  },
+  "jsonFormat_tomlMode": {
+    "message": "TOML",
+    "description": "Translation key: jsonFormat_tomlMode"
+  },
+  "jsonFormat_minifyMode": {
+    "message": "压缩",
+    "description": "Translation key: jsonFormat_minifyMode"
+  },
+  "jsonFormat_yamlTitle": {
+    "message": "JSON 转 YAML",
+    "description": "Translation key: jsonFormat_yamlTitle"
+  },
+  "jsonFormat_yamlSubtitle": {
+    "message": "将 JSON 数据转换为 YAML 格式",
+    "description": "Translation key: jsonFormat_yamlSubtitle"
+  },
+  "jsonFormat_yamlModeInputPlaceholder": {
+    "message": "输入需要转换的 JSON...",
+    "description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
+  },
+  "jsonFormat_yamlModeOutputLabel": {
+    "message": "YAML 结果",
+    "description": "Translation key: jsonFormat_yamlModeOutputLabel"
+  },
+  "jsonFormat_yamlModeEmptyHint": {
+    "message": "输入 JSON 后点击转换",
+    "description": "Translation key: jsonFormat_yamlModeEmptyHint"
+  },
+  "jsonFormat_convertButton": {
+    "message": "转换",
+    "description": "Translation key: jsonFormat_convertButton"
+  },
+  "jsonFormat_tomlTitle": {
+    "message": "JSON 转 TOML",
+    "description": "Translation key: jsonFormat_tomlTitle"
+  },
+  "jsonFormat_tomlSubtitle": {
+    "message": "将 JSON 数据转换为 TOML 格式",
+    "description": "Translation key: jsonFormat_tomlSubtitle"
+  },
+  "jsonFormat_tomlModeInputPlaceholder": {
+    "message": "输入需要转换的 JSON...",
+    "description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
+  },
+  "jsonFormat_tomlModeOutputLabel": {
+    "message": "TOML 结果",
+    "description": "Translation key: jsonFormat_tomlModeOutputLabel"
+  },
+  "jsonFormat_tomlModeEmptyHint": {
+    "message": "输入 JSON 后点击转换",
+    "description": "Translation key: jsonFormat_tomlModeEmptyHint"
+  },
+  "jsonFormat_minifyTitle": {
+    "message": "JSON 压缩",
+    "description": "Translation key: jsonFormat_minifyTitle"
+  },
+  "jsonFormat_minifySubtitle": {
+    "message": "将 JSON 压缩为紧凑的单行格式",
+    "description": "Translation key: jsonFormat_minifySubtitle"
+  },
+  "jsonFormat_minifyModeInputPlaceholder": {
+    "message": "输入需要压缩的 JSON...",
+    "description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
+  },
+  "jsonFormat_minifyModeOutputLabel": {
+    "message": "压缩结果",
+    "description": "Translation key: jsonFormat_minifyModeOutputLabel"
+  },
+  "jsonFormat_minifyModeEmptyHint": {
+    "message": "输入 JSON 后点击压缩",
+    "description": "Translation key: jsonFormat_minifyModeEmptyHint"
+  },
+  "jsonFormat_minifyButton": {
+    "message": "压缩",
+    "description": "Translation key: jsonFormat_minifyButton"
+  },
+  "jwt_pageTitle": {
+    "message": "JWT 解析",
+    "description": "Translation key: jwt_pageTitle"
+  },
+  "jwt_pageSubtitle": {
+    "message": "JSON Web Token 解码与查看",
+    "description": "Translation key: jwt_pageSubtitle"
+  },
+  "jwt_placeholder": {
+    "message": "在此粘贴 JWT 令牌 (Encoded JWT)...",
+    "description": "Translation key: jwt_placeholder"
+  },
+  "jwt_headerTitle": {
+    "message": "HEADER: 算法 & 令牌类型",
+    "description": "Translation key: jwt_headerTitle"
+  },
+  "jwt_payloadTitle": {
+    "message": "PAYLOAD: 数据",
+    "description": "Translation key: jwt_payloadTitle"
+  },
+  "jwt_signatureTitle": {
+    "message": "签名",
+    "description": "Translation key: jwt_signatureTitle"
+  },
+  "jwt_noSignature": {
+    "message": "无签名",
+    "description": "Translation key: jwt_noSignature"
+  },
+  "jwt_invalidFormat": {
+    "message": "无法解析",
+    "description": "Translation key: jwt_invalidFormat"
+  },
+  "jwt_errors_invalidBase64String": {
+    "message": "无效的 Base64URL 字符串",
+    "description": "Translation key: jwt_errors_invalidBase64String"
+  },
+  "jwt_errors_failedToDecode": {
+    "message": "Base64URL 解码失败：",
+    "description": "Translation key: jwt_errors_failedToDecode"
+  },
+  "jwt_errors_invalidFormat": {
+    "message": "JWT 格式错误：必须包含三个由 . 分隔的部分",
+    "description": "Translation key: jwt_errors_invalidFormat"
+  },
+  "jwt_errors_parseHeaderFailed": {
+    "message": "解析 Header 失败：",
+    "description": "Translation key: jwt_errors_parseHeaderFailed"
+  },
+  "jwt_errors_parsePayloadFailed": {
+    "message": "解析 Payload 失败：",
+    "description": "Translation key: jwt_errors_parsePayloadFailed"
+  },
+  "markdownToHtml_pageTitle": {
+    "message": "Markdown 转 HTML",
+    "description": "Translation key: markdownToHtml_pageTitle"
+  },
+  "markdownToHtml_pageSubtitle": {
+    "message": "实时将 Markdown 转换为 HTML 并预览",
+    "description": "Translation key: markdownToHtml_pageSubtitle"
+  },
+  "markdownToHtml_splitMode": {
+    "message": "分屏",
+    "description": "Translation key: markdownToHtml_splitMode"
+  },
+  "markdownToHtml_previewMode": {
+    "message": "预览",
+    "description": "Translation key: markdownToHtml_previewMode"
+  },
+  "markdownToHtml_htmlMode": {
+    "message": "HTML",
+    "description": "Translation key: markdownToHtml_htmlMode"
+  },
+  "markdownToHtml_clear": {
+    "message": "清空",
+    "description": "Translation key: markdownToHtml_clear"
+  },
+  "markdownToHtml_print": {
+    "message": "打印",
+    "description": "Translation key: markdownToHtml_print"
+  },
+  "markdownToHtml_download": {
+    "message": "下载",
+    "description": "Translation key: markdownToHtml_download"
+  },
+  "markdownToHtml_inputLabel": {
+    "message": "Markdown 输入",
+    "description": "Translation key: markdownToHtml_inputLabel"
+  },
+  "markdownToHtml_previewLabel": {
+    "message": "实时预览",
+    "description": "Translation key: markdownToHtml_previewLabel"
+  },
+  "markdownToHtml_htmlOutputLabel": {
+    "message": "HTML 输出",
+    "description": "Translation key: markdownToHtml_htmlOutputLabel"
+  },
+  "markdownToHtml_inputPlaceholder": {
+    "message": "在此输入 Markdown 内容...",
+    "description": "Translation key: markdownToHtml_inputPlaceholder"
+  },
+  "markdownToHtml_charCount": {
+    "message": "{{count}} 字符",
+    "description": "Translation key: markdownToHtml_charCount"
+  },
+  "markdownToHtml_copyHtml": {
+    "message": "复制 HTML",
+    "description": "Translation key: markdownToHtml_copyHtml"
+  },
+  "markdownToHtml_downloadSuccess": {
+    "message": "文件下载成功",
+    "description": "Translation key: markdownToHtml_downloadSuccess"
+  },
+  "markdownToHtml_printSuccess": {
+    "message": "打印窗口已打开",
+    "description": "Translation key: markdownToHtml_printSuccess"
+  },
+  "qrCode_pageTitle": {
+    "message": "二维码工具",
+    "description": "Translation key: qrCode_pageTitle"
+  },
+  "qrCode_pageSubtitle": {
+    "message": "生成和解析二维码",
+    "description": "Translation key: qrCode_pageSubtitle"
+  },
+  "qrCode_generateMode": {
+    "message": "生成二维码",
+    "description": "Translation key: qrCode_generateMode"
+  },
+  "qrCode_parseMode": {
+    "message": "解析二维码",
+    "description": "Translation key: qrCode_parseMode"
+  },
+  "qrCode_urlToQr": {
+    "message": "文本转二维码",
+    "description": "Translation key: qrCode_urlToQr"
+  },
+  "qrCode_qrToUrl": {
+    "message": "二维码转文本",
+    "description": "Translation key: qrCode_qrToUrl"
+  },
+  "qrCode_urlInputLabel": {
+    "message": "输入 URL 或文本",
+    "description": "Translation key: qrCode_urlInputLabel"
+  },
+  "qrCode_urlInputPlaceholder": {
+    "message": "请输入 URL 或文本内容，将自动生成二维码",
+    "description": "Translation key: qrCode_urlInputPlaceholder"
+  },
+  "qrCode_generateButton": {
+    "message": "生成二维码",
+    "description": "Translation key: qrCode_generateButton"
+  },
+  "qrCode_generating": {
+    "message": "生成中...",
+    "description": "Translation key: qrCode_generating"
+  },
+  "qrCode_qrCodeWillShow": {
+    "message": "二维码将显示在这里",
+    "description": "Translation key: qrCode_qrCodeWillShow"
+  },
+  "qrCode_downloadButton": {
+    "message": "下载二维码",
+    "description": "Translation key: qrCode_downloadButton"
+  },
+  "qrCode_copyQrButton": {
+    "message": "复制二维码",
+    "description": "Translation key: qrCode_copyQrButton"
+  },
+  "qrCode_qrCodeSuccess": {
+    "message": "二维码生成成功",
+    "description": "Translation key: qrCode_qrCodeSuccess"
+  },
+  "qrCode_qrCodeDownloadSuccess": {
+    "message": "二维码下载成功",
+    "description": "Translation key: qrCode_qrCodeDownloadSuccess"
+  },
+  "qrCode_qrCodeCopySuccess": {
+    "message": "二维码已复制到剪贴板",
+    "description": "Translation key: qrCode_qrCodeCopySuccess"
+  },
+  "qrCode_selectImage": {
+    "message": "请选择二维码图片",
+    "description": "Translation key: qrCode_selectImage"
+  },
+  "qrCode_parseSuccess": {
+    "message": "二维码解析成功",
+    "description": "Translation key: qrCode_parseSuccess"
+  },
+  "qrCode_noQrDetected": {
+    "message": "未检测到二维码，请确保图片清晰且包含二维码",
+    "description": "Translation key: qrCode_noQrDetected"
+  },
+  "qrCode_parseError": {
+    "message": "解析二维码失败，请重试",
+    "description": "Translation key: qrCode_parseError"
+  },
+  "qrCode_generateError": {
+    "message": "生成二维码失败，请检查输入内容",
+    "description": "Translation key: qrCode_generateError"
+  },
+  "qrCode_copyError": {
+    "message": "复制失败，请重试",
+    "description": "Translation key: qrCode_copyError"
+  },
+  "qrCode_imagePasted": {
+    "message": "图片粘贴成功，正在解析...",
+    "description": "Translation key: qrCode_imagePasted"
+  },
+  "qrCode_imagePasteError": {
+    "message": "粘贴图片失败，请重试",
+    "description": "Translation key: qrCode_imagePasteError"
+  },
+  "qrCode_imageCleared": {
+    "message": "图片已清除",
+    "description": "Translation key: qrCode_imageCleared"
+  },
+  "qrCode_clickToUpload": {
+    "message": "点击、拖拽或粘贴上传二维码图片",
+    "description": "Translation key: qrCode_clickToUpload"
+  },
+  "qrCode_supportFormats": {
+    "message": "支持 PNG、JPG、WEBP、Base64 格式",
+    "description": "Translation key: qrCode_supportFormats"
+  },
+  "qrCode_parseButton": {
+    "message": "解析二维码",
+    "description": "Translation key: qrCode_parseButton"
+  },
+  "qrCode_parsing": {
+    "message": "解析中...",
+    "description": "Translation key: qrCode_parsing"
+  },
+  "qrCode_resultLabel": {
+    "message": "解析结果",
+    "description": "Translation key: qrCode_resultLabel"
+  },
+  "qrCode_copyTooltip": {
+    "message": "复制",
+    "description": "Translation key: qrCode_copyTooltip"
+  },
+  "qrCode_enterUrlError": {
+    "message": "请输入 URL 或文本",
+    "description": "Translation key: qrCode_enterUrlError"
+  },
+  "qrCode_clickToChange": {
+    "message": "点击更换图片",
+    "description": "Translation key: qrCode_clickToChange"
+  },
+  "qrCode_pasteHint": {
+    "message": "支持 Ctrl+V 粘贴图片或 Base64 字符串",
+    "description": "Translation key: qrCode_pasteHint"
+  },
+  "qrCode_autoGenerateHint": {
+    "message": "输入内容后将自动生成二维码",
+    "description": "Translation key: qrCode_autoGenerateHint"
+  },
+  "qrCode_autoParseHint": {
+    "message": "上传图片后将自动解析二维码",
+    "description": "Translation key: qrCode_autoParseHint"
+  },
+  "rightClickRestorer_loading": {
+    "message": "正在加载...",
+    "description": "Translation key: rightClickRestorer_loading"
+  },
+  "rightClickRestorer_currentDomain": {
+    "message": "当前域名",
+    "description": "Translation key: rightClickRestorer_currentDomain"
+  },
+  "rightClickRestorer_statusLocked": {
+    "message": "未解锁",
+    "description": "Translation key: rightClickRestorer_statusLocked"
+  },
+  "rightClickRestorer_statusUnlocked": {
+    "message": "已解锁",
+    "description": "Translation key: rightClickRestorer_statusUnlocked"
+  },
+  "rightClickRestorer_unsupported": {
+    "message": "不支持",
+    "description": "Translation key: rightClickRestorer_unsupported"
+  },
+  "rightClickRestorer_unsupportedDesc": {
+    "message": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
+    "description": "Translation key: rightClickRestorer_unsupportedDesc"
+  },
+  "rightClickRestorer_unlockDesc": {
+    "message": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
+    "description": "Translation key: rightClickRestorer_unlockDesc"
+  },
+  "rightClickRestorer_unlockBtn": {
+    "message": "解锁当前网站右键",
+    "description": "Translation key: rightClickRestorer_unlockBtn"
+  },
+  "rightClickRestorer_alreadyUnlocked": {
+    "message": "右键已解锁",
+    "description": "Translation key: rightClickRestorer_alreadyUnlocked"
+  },
+  "storageCleaner_pageTitle": {
+    "message": "存储清理",
+    "description": "Translation key: storageCleaner_pageTitle"
+  },
+  "storageCleaner_pageSubtitle": {
+    "message": "清理缓存、Cookies 及本地存储",
+    "description": "Translation key: storageCleaner_pageSubtitle"
+  },
+  "storageCleaner_loading": {
+    "message": "加载中...",
+    "description": "Translation key: storageCleaner_loading"
+  },
+  "storageCleaner_initializing": {
+    "message": "正在读取站点数据...",
+    "description": "Translation key: storageCleaner_initializing"
+  },
+  "storageCleaner_occupied": {
+    "message": "已占用 {{size}}",
+    "description": "Translation key: storageCleaner_occupied"
+  },
+  "storageCleaner_cleaning": {
+    "message": "正在清理...",
+    "description": "Translation key: storageCleaner_cleaning"
+  },
+  "storageCleaner_cleanNow": {
+    "message": "立即清理",
+    "description": "Translation key: storageCleaner_cleanNow"
+  },
+  "storageCleaner_autoRefresh": {
+    "message": "清理后自动刷新页面",
+    "description": "Translation key: storageCleaner_autoRefresh"
+  },
+  "storageCleaner_selectAll": {
+    "message": "全选所有项",
+    "description": "Translation key: storageCleaner_selectAll"
+  },
+  "storageCleaner_cleanSuccess": {
+    "message": "清理完成",
+    "description": "Translation key: storageCleaner_cleanSuccess"
+  },
+  "storageCleaner_cleanError": {
+    "message": "清理失败",
+    "description": "Translation key: storageCleaner_cleanError"
+  },
+  "storageCleaner_noData": {
+    "message": "无数据",
+    "description": "Translation key: storageCleaner_noData"
+  },
+  "storageCleaner_countUnit": {
+    "message": "个",
+    "description": "Translation key: storageCleaner_countUnit"
+  },
+  "storageCleaner_errorNoTab": {
+    "message": "无法获取当前标签页",
+    "description": "Translation key: storageCleaner_errorNoTab"
+  },
+  "storageCleaner_errorRestricted": {
+    "message": "存储清理功能不支持此页面",
+    "description": "Translation key: storageCleaner_errorRestricted"
+  },
+  "storageCleaner_cleanSuccessReload": {
+    "message": "清理成功，即将刷新页面",
+    "description": "Translation key: storageCleaner_cleanSuccessReload"
+  },
+  "storageCleaner_errorStandardOnly": {
+    "message": "存储清理功能仅适用于标准网页",
+    "description": "Translation key: storageCleaner_errorStandardOnly"
+  },
+  "storageCleaner_confirmTitle": {
+    "message": "确认清理数据？",
+    "description": "Translation key: storageCleaner_confirmTitle"
+  },
+  "storageCleaner_confirmDesc": {
+    "message": "您将永久删除当前页面的以下选定存储项。",
+    "description": "Translation key: storageCleaner_confirmDesc"
+  },
+  "storageCleaner_irreversible": {
+    "message": "此操作不可撤销",
+    "description": "Translation key: storageCleaner_irreversible"
+  },
+  "storageCleaner_confirmAction": {
+    "message": "确认清理",
+    "description": "Translation key: storageCleaner_confirmAction"
+  },
+  "storageCleaner_cleanedSummary": {
+    "message": "清理了 {{items}}",
+    "description": "Translation key: storageCleaner_cleanedSummary"
+  },
+  "storageCleaner_noDataToClean": {
+    "message": "该页面没有可清理的存储数据",
+    "description": "Translation key: storageCleaner_noDataToClean"
+  },
+  "storageCleaner_partialFailure": {
+    "message": "部分清理失败",
+    "description": "Translation key: storageCleaner_partialFailure"
+  },
+  "storageCleaner_options_localStorage": {
+    "message": "Local Storage",
+    "description": "Translation key: storageCleaner_options_localStorage"
+  },
+  "storageCleaner_options_sessionStorage": {
+    "message": "Session Storage",
+    "description": "Translation key: storageCleaner_options_sessionStorage"
+  },
+  "storageCleaner_options_indexedDB": {
+    "message": "IndexedDB",
+    "description": "Translation key: storageCleaner_options_indexedDB"
+  },
+  "storageCleaner_options_cookies": {
+    "message": "Cookies",
+    "description": "Translation key: storageCleaner_options_cookies"
+  },
+  "storageCleaner_options_cacheStorage": {
+    "message": "Cache Storage",
+    "description": "Translation key: storageCleaner_options_cacheStorage"
+  },
+  "storageCleaner_options_serviceWorkers": {
+    "message": "Service Workers",
+    "description": "Translation key: storageCleaner_options_serviceWorkers"
+  },
+  "textStatistics_pageTitle": {
+    "message": "文本统计",
+    "description": "Translation key: textStatistics_pageTitle"
+  },
+  "textStatistics_pageSubtitle": {
+    "message": "实时分析文本的字符、单词、行数及字节大小",
+    "description": "Translation key: textStatistics_pageSubtitle"
+  },
+  "textStatistics_placeholder": {
+    "message": "在此输入或粘贴文本...",
+    "description": "Translation key: textStatistics_placeholder"
+  },
+  "textStatistics_characters": {
+    "message": "字符数",
+    "description": "Translation key: textStatistics_characters"
+  },
+  "textStatistics_words": {
+    "message": "单词数",
+    "description": "Translation key: textStatistics_words"
+  },
+  "textStatistics_lines": {
+    "message": "行数",
+    "description": "Translation key: textStatistics_lines"
+  },
+  "textStatistics_bytes": {
+    "message": "字节大小",
+    "description": "Translation key: textStatistics_bytes"
+  },
+  "timestamp_pageTitle": {
+    "message": "时间戳转换",
+    "description": "Translation key: timestamp_pageTitle"
+  },
+  "timestamp_pageSubtitle": {
+    "message": "Unix 毫秒数转换与格式化",
+    "description": "Translation key: timestamp_pageSubtitle"
+  },
+  "timestamp_tsToDate": {
+    "message": "时间戳 → 日期",
+    "description": "Translation key: timestamp_tsToDate"
+  },
+  "timestamp_dateToTs": {
+    "message": "日期 → 时间戳",
+    "description": "Translation key: timestamp_dateToTs"
+  },
+  "timestamp_placeholderTs": {
+    "message": "输入时间戳...",
+    "description": "Translation key: timestamp_placeholderTs"
+  },
+  "timestamp_placeholderDate": {
+    "message": "YYYY-MM-DD HH:mm:ss",
+    "description": "Translation key: timestamp_placeholderDate"
+  },
+  "timestamp_unitMs": {
+    "message": "毫秒 (ms)",
+    "description": "Translation key: timestamp_unitMs"
+  },
+  "timestamp_unitS": {
+    "message": "秒 (s)",
+    "description": "Translation key: timestamp_unitS"
+  },
+  "timestamp_convertButton": {
+    "message": "立即转换",
+    "description": "Translation key: timestamp_convertButton"
+  },
+  "timestamp_currentTs": {
+    "message": "当前时间戳",
+    "description": "Translation key: timestamp_currentTs"
+  },
+  "timestamp_useNowTooltip": {
+    "message": "填充到下方",
+    "description": "Translation key: timestamp_useNowTooltip"
+  },
+  "timestamp_copyTsTooltip": {
+    "message": "复制时间戳",
+    "description": "Translation key: timestamp_copyTsTooltip"
+  },
+  "timestamp_usedSuccess": {
+    "message": "已使用当前时间戳",
+    "description": "Translation key: timestamp_usedSuccess"
+  },
+  "timestamp_resultLabel": {
+    "message": "转换结果",
+    "description": "Translation key: timestamp_resultLabel"
+  },
+  "timestamp_copyResultTooltip": {
+    "message": "复制结果",
+    "description": "Translation key: timestamp_copyResultTooltip"
+  },
+  "timestamp_relativeTime": {
+    "message": "相对时间",
+    "description": "Translation key: timestamp_relativeTime"
+  },
+  "timestamp_iso8601": {
+    "message": "ISO 8601",
+    "description": "Translation key: timestamp_iso8601"
+  },
+  "timestamp_utcTime": {
+    "message": "UTC 时间",
+    "description": "Translation key: timestamp_utcTime"
+  },
+  "timestamp_copyTooltip": {
+    "message": "复制",
+    "description": "Translation key: timestamp_copyTooltip"
+  },
+  "timestamp_resultEmpty": {
+    "message": "请输入并点击转换",
+    "description": "Translation key: timestamp_resultEmpty"
+  },
+  "timestamp_errors_invalidNumber": {
+    "message": "无效数字",
+    "description": "Translation key: timestamp_errors_invalidNumber"
+  },
+  "timestamp_errors_invalidTimestamp": {
+    "message": "无效时间戳",
+    "description": "Translation key: timestamp_errors_invalidTimestamp"
+  },
+  "timestamp_errors_invalidFormat": {
+    "message": "格式错误",
+    "description": "Translation key: timestamp_errors_invalidFormat"
+  },
+  "common_buttons_save": {
+    "message": "保存",
+    "description": "Translation key: buttons_save"
+  },
+  "common_buttons_cancel": {
+    "message": "取消",
+    "description": "Translation key: buttons_cancel"
+  },
+  "common_buttons_confirm": {
+    "message": "确认",
+    "description": "Translation key: buttons_confirm"
+  },
+  "common_buttons_copy": {
+    "message": "复制",
+    "description": "Translation key: buttons_copy"
+  },
+  "common_buttons_clear": {
+    "message": "清理",
+    "description": "Translation key: buttons_clear"
+  },
+  "common_buttons_refresh": {
+    "message": "刷新",
+    "description": "Translation key: buttons_refresh"
+  },
+  "common_buttons_toggleLanguage": {
+    "message": "切换语言",
+    "description": "Translation key: buttons_toggleLanguage"
+  },
+  "common_buttons_toggleTheme": {
+    "message": "切换主题",
+    "description": "Translation key: buttons_toggleTheme"
+  },
+  "common_buttons_themeMode_light": {
+    "message": "切换到深色模式",
+    "description": "Translation key: buttons_themeMode_light"
+  },
+  "common_buttons_themeMode_dark": {
+    "message": "切换到系统模式",
+    "description": "Translation key: buttons_themeMode_dark"
+  },
+  "common_buttons_themeMode_system": {
+    "message": "切换到浅色模式",
+    "description": "Translation key: buttons_themeMode_system"
+  },
+  "common_buttons_search": {
+    "message": "搜索工具...",
+    "description": "Translation key: buttons_search"
+  },
+  "common_buttons_back": {
+    "message": "返回",
+    "description": "Translation key: buttons_back"
+  },
+  "common_buttons_clearSearch": {
+    "message": "清除搜索",
+    "description": "Translation key: buttons_clearSearch"
+  },
+  "common_buttons_recentSearch": {
+    "message": "最近搜索",
+    "description": "Translation key: buttons_recentSearch"
+  },
+  "common_buttons_noResults": {
+    "message": "未找到相关工具",
+    "description": "Translation key: buttons_noResults"
+  },
+  "common_buttons_openInTab": {
+    "message": "在标签页打开",
+    "description": "Translation key: buttons_openInTab"
+  },
+  "common_buttons_settings": {
+    "message": "设置",
+    "description": "Translation key: buttons_settings"
+  },
+  "common_errorBoundary_title": {
+    "message": "糟糕，出了点问题",
+    "description": "Translation key: errorBoundary_title"
+  },
+  "common_errorBoundary_description": {
+    "message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
+    "description": "Translation key: errorBoundary_description"
+  },
+  "common_errorBoundary_refresh": {
+    "message": "刷新应用",
+    "description": "Translation key: errorBoundary_refresh"
+  },
+  "common_errorBoundary_retry": {
+    "message": "重新尝试",
+    "description": "Translation key: errorBoundary_retry"
+  },
+  "common_pageErrorBoundary_title": {
+    "message": "该功能运行异常",
+    "description": "Translation key: pageErrorBoundary_title"
+  },
+  "common_pageErrorBoundary_description": {
+    "message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
+    "description": "Translation key: pageErrorBoundary_description"
+  }
+}
diff --git a/utils/__tests__/useLazyTranslation.test.ts b/utils/__tests__/useLazyTranslation.test.ts
deleted file mode 100644
index 04b251d..0000000
--- a/utils/__tests__/useLazyTranslation.test.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { renderHook, waitFor } from '@testing-library/react';
-
-// 强行砸碎当前模块的 Mock 封锁链，拉取真实的源码进行满血硬核测试
-vi.unmock('@/utils/useLazyTranslation');
-
-// 满血配置多端一致性常驻桩（WXT 规范）
-const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
-(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
-(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
-
-// Mock 基础 i18n 底座
-vi.mock('@/i18n', () => ({
-  default: {
-    language: 'en',
-    addResourceBundle: vi.fn(),
-  },
-}));
-
-// Mock 核心 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,
-    };
-  }),
-}));
-
-// Mock 动态本地化语言包 JSON 实体隔离区
-const mockTimestampModule = { default: { 'timestamp.key': 'Timestamp Value' } };
-const mockJwtModule = { default: { 'jwt.key': 'JWT Value' } };
-const mockZhTimestampModule = { default: { 'timestamp.key': '时间戳值' } };
-
-vi.mock('@/i18n/locales/en/timestamp.json', () => mockTimestampModule);
-vi.mock('@/i18n/locales/en/jwt.json', () => mockJwtModule);
-vi.mock('@/i18n/locales/zh/timestamp.json', () => mockZhTimestampModule);
-
-// 💡 1. 核心修复点：将 i18nMock 提升至【全域最高生存空间】！
-// 确保下方所有的 describe 块和测试用例在词法作用域上均能 100% 自由消费。
-let i18nMock: { language: string; addResourceBundle: ReturnType<typeof vi.fn> };
-
-/**
- * 💡 2. 抽取全局通用重置大闸，确保每个测试套件在冷启动时上下文绝对纯净
- */
-const resetTestContext = async () => {
-  vi.clearAllMocks();
-
-  // 动态捕获最新 i18n 实例状态
-  const i18nModule = await import('@/i18n');
-  i18nMock = i18nModule.default as any;
-  i18nMock.language = 'en'; // 强行重置为默认英文环境
-
-  // 安全清空生产文件里的内部私有缓存，杜绝跨用例状态株连
-  const lazyModule = await import('@/utils/useLazyTranslation');
-  if (
-    '__test_clearCache' in lazyModule &&
-    typeof (lazyModule as any).__test_clearCache === 'function'
-  ) {
-    (lazyModule as any).__test_clearCache();
-  }
-};
-
-describe('preloadNamespaces', () => {
-  beforeEach(async () => {
-    await resetTestContext();
-  });
-
-  it('应该加载指定的命名空间', async () => {
-    const { preloadNamespaces } = await import('@/utils/useLazyTranslation');
-    await preloadNamespaces(['timestamp']);
-
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledWith(
-      'en',
-      'timestamp',
-      mockTimestampModule.default,
-      true,
-      true,
-    );
-  });
-
-  it('应该并行加载多个命名空间', async () => {
-    const { preloadNamespaces } = await import('@/utils/useLazyTranslation');
-    await preloadNamespaces(['timestamp', 'jwt']);
-
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledTimes(2);
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledWith(
-      'en',
-      'timestamp',
-      mockTimestampModule.default,
-      true,
-      true,
-    );
-  });
-
-  it('应该缓存已加载的命名空间，避免重复加载', async () => {
-    const { preloadNamespaces } = await import('@/utils/useLazyTranslation');
-    await preloadNamespaces(['timestamp']);
-    await preloadNamespaces(['timestamp']);
-
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledTimes(1);
-  });
-
-  it('应该使用当前语言（中文）', async () => {
-    const { preloadNamespaces } = await import('@/utils/useLazyTranslation');
-    i18nMock.language = 'zh-CN';
-
-    await preloadNamespaces(['timestamp']);
-
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledWith(
-      'zh',
-      'timestamp',
-      mockZhTimestampModule.default,
-      true,
-      true,
-    );
-  });
-
-  it('应该跳过不存在的命名空间', async () => {
-    const { preloadNamespaces } = await import('@/utils/useLazyTranslation');
-    await preloadNamespaces(['nonExistentNamespace']);
-
-    expect(i18nMock.addResourceBundle).not.toHaveBeenCalled();
-  });
-});
-
-describe('useLazyTranslation', () => {
-  beforeEach(async () => {
-    // 💡 3. 修复点：共享全局重置中枢，让第二个测试块在冷启动时也能合法刷新并拥有 i18nMock 实体
-    await resetTestContext();
-  });
-
-  it('应该在挂载时加载命名空间', async () => {
-    const { useLazyTranslation } = await import('@/utils/useLazyTranslation');
-
-    const { result } = renderHook(() => useLazyTranslation('timestamp'));
-
-    expect(result.current.isLoaded).toBe(false);
-
-    await waitFor(() => {
-      expect(result.current.isLoaded).toBe(true);
-    });
-
-    // 💡 此时 i18nMock 在全域可读，彻底治愈 ReferenceError 报错！
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledWith(
-      'en',
-      'timestamp',
-      mockTimestampModule.default,
-      true,
-      true,
-    );
-  });
-
-  it('应该返回 useTranslation 的结果', async () => {
-    const { useLazyTranslation } = await import('@/utils/useLazyTranslation');
-
-    const { result } = renderHook(() => useLazyTranslation('timestamp'));
-
-    await waitFor(() => {
-      expect(result.current.isLoaded).toBe(true);
-    });
-
-    expect(result.current.t('key')).toBe('timestamp:key');
-    expect(result.current.ready).toBe(true);
-  });
-
-  it('应该支持多个命名空间', async () => {
-    const { useLazyTranslation } = await import('@/utils/useLazyTranslation');
-
-    const { result } = renderHook(() => useLazyTranslation(['timestamp', 'jwt']));
-
-    await waitFor(() => {
-      expect(result.current.isLoaded).toBe(true);
-    });
-
-    expect(i18nMock.addResourceBundle).toHaveBeenCalledTimes(2);
-    expect(result.current.t('key')).toBe('timestamp,jwt:key');
-  });
-
-  it('应该支持字符串形式的单个命名空间', async () => {
-    const { useLazyTranslation } = await import('@/utils/useLazyTranslation');
-
-    const { result } = renderHook(() => useLazyTranslation('timestamp'));
-
-    await waitFor(() => {
-      expect(result.current.isLoaded).toBe(true);
-    });
-
-    expect(result.current.t('key')).toBe('timestamp:key');
-  });
-});
diff --git a/utils/chromeI18n.ts b/utils/chromeI18n.ts
new file mode 100644
index 0000000..e40f6da
--- /dev/null
+++ b/utils/chromeI18n.ts
@@ -0,0 +1,102 @@
+/**
+ * chrome.i18n 类型安全 wrapper
+ * 提供与 react-i18next 兼容的接口
+ */
+
+/**
+ * 获取翻译文本
+ * @param msgId 翻译 key（如 'timestamp_pageTitle'）
+ * @param substitutions 占位符替换值（可选）
+ * @returns 翻译后的文本
+ */
+export function getMessage(msgId: string, substitutions?: string[]): string {
+  try {
+    return chrome.i18n.getMessage(msgId, substitutions);
+  } catch (error) {
+    console.warn(`[chrome.i18n] 无法获取翻译: ${msgId}`, error);
+    return msgId; // 回退到 key 本身
+  }
+}
+
+/**
+ * 获取当前浏览器语言
+ * @returns 语言代码（如 'zh', 'en'）
+ */
+export function getLanguage(): string {
+  const lang = chrome.i18n.getUILanguage();
+  return lang.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+}
+
+/**
+ * 支持的语言列表
+ */
+export const SUPPORTED_LANGUAGES: readonly ('zh' | 'en')[] = ['zh', 'en'] as const;
+
+/**
+ * 规范化语言代码
+ */
+export function normalizeLanguage(lng: string): 'zh' | 'en' {
+  return lng.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+}
+
+/**
+ * react-i18next 兼容的 Hook
+ * 返回 t 函数和相关信息
+ */
+export function useI18n(namespace?: string | string[]) {
+  const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
+
+  const t = (key: string, options?: Record<string, unknown>): string => {
+    let msgId = key;
+
+    // 处理 namespace:key 格式（兼容原 i18next 用法）
+    if (key.includes(':')) {
+      msgId = key.replace(':', '_').replace(/\./g, '_');
+    }
+
+    // 先尝试直接查找 key
+    let message = getMessage(msgId);
+
+    // 如果直接查找未命中，尝试命名空间前缀（使用转换后的 msgId）
+    if (message === msgId && namespaces.length > 0) {
+      for (const ns of namespaces) {
+        const candidate = `${ns}_${msgId}`;
+        const result = getMessage(candidate);
+        if (result !== candidate) {
+          message = result;
+          break;
+        }
+      }
+    }
+
+    // 处理插值
+    if (options) {
+      for (const [placeholder, value] of Object.entries(options)) {
+        message = message.replace(`{{${placeholder}}}`, String(value));
+      }
+    }
+
+    return message;
+  };
+
+  return {
+    t,
+    i18n: {
+      language: getLanguage(),
+      changeLanguage: (_lng?: string) => {
+        // chrome.i18n 无法动态切换语言，需要刷新页面
+        console.warn('[chrome.i18n] 无法动态切换语言，需要刷新页面');
+        return Promise.resolve();
+      },
+    },
+    isLoaded: true,
+  };
+}
+
+/**
+ * 预加载命名空间（无操作，兼容 useLazyTranslation）
+ */
+export async function preloadNamespaces(_namespaces: string[]): Promise<void> {
+  // chrome.i18n 是同步的，无需预加载
+  return Promise.resolve();
+}
diff --git a/utils/jwt.ts b/utils/jwt.ts
index 8ab4a46..bb9f677 100644
--- a/utils/jwt.ts
+++ b/utils/jwt.ts
@@ -2,7 +2,7 @@
  * JWT 解析工具
  */
 
-import i18n from '@/i18n';
+import { getMessage } from '@/utils/chromeI18n';
 
 export interface JwtHeader {
   alg: string;
@@ -43,7 +43,7 @@ export function decodeBase64Url(str: string): string {
   const pad = base64.length % 4;
   if (pad) {
     if (pad === 1) {
-      throw new Error(i18n.t('jwt:errors.invalidBase64String'));
+      throw new Error(getMessage('jwt_errors_invalidBase64String'));
     }
     base64 += new Array(5 - pad).join('=');
   }
@@ -59,7 +59,7 @@ export function decodeBase64Url(str: string): string {
     return decoder.decode(bytes);
   } catch (e) {
     throw new Error(
-      i18n.t('jwt:errors.failedToDecode') + (e instanceof Error ? e.message : String(e)),
+      getMessage('jwt_errors_failedToDecode') + (e instanceof Error ? e.message : String(e)),
       { cause: e },
     );
   }
@@ -78,7 +78,7 @@ export function parseJwt(token: string): JwtResult {
       payload: null,
       signature: '',
       raw: { header: '', payload: '', signature: '' },
-      error: i18n.t('jwt:errors.invalidFormat'),
+      error: getMessage('jwt_errors_invalidFormat'),
     };
   }
 
@@ -99,7 +99,7 @@ export function parseJwt(token: string): JwtResult {
     result.header = JSON.parse(headerJson);
   } catch (e) {
     result.error =
-      i18n.t('jwt:errors.parseHeaderFailed') + (e instanceof Error ? e.message : String(e));
+      getMessage('jwt_errors_parseHeaderFailed') + (e instanceof Error ? e.message : String(e));
     return result;
   }
 
@@ -108,7 +108,7 @@ export function parseJwt(token: string): JwtResult {
     result.payload = JSON.parse(payloadJson);
   } catch (e) {
     result.error =
-      i18n.t('jwt:errors.parsePayloadFailed') + (e instanceof Error ? e.message : String(e));
+      getMessage('jwt_errors_parsePayloadFailed') + (e instanceof Error ? e.message : String(e));
     return result;
   }
 
diff --git a/utils/useLazyTranslation.ts b/utils/useLazyTranslation.ts
deleted file mode 100644
index 1ef60e0..0000000
--- a/utils/useLazyTranslation.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import i18n from '@/i18n';
-
-// 语言包动态导入映射
-const localeModules: Record<
-  string,
-  Record<string, () => Promise<{ default: Record<string, unknown> }>>
-> = {
-  zh: {
-    timestamp: () => import('@/i18n/locales/zh/timestamp.json'),
-    storageCleaner: () => import('@/i18n/locales/zh/storageCleaner.json'),
-    qrCode: () => import('@/i18n/locales/zh/qrCode.json'),
-    textStatistics: () => import('@/i18n/locales/zh/textStatistics.json'),
-    jwt: () => import('@/i18n/locales/zh/jwt.json'),
-    jsonDiff: () => import('@/i18n/locales/zh/jsonDiff.json'),
-    jsonFormat: () => import('@/i18n/locales/zh/jsonFormat.json'),
-    base64Converter: () => import('@/i18n/locales/zh/base64Converter.json'),
-    markdownToHtml: () => import('@/i18n/locales/zh/markdownToHtml.json'),
-    htmlToMarkdown: () => import('@/i18n/locales/zh/htmlToMarkdown.json'),
-    rightClickRestorer: () => import('@/i18n/locales/zh/rightClickRestorer.json'),
-  },
-  en: {
-    timestamp: () => import('@/i18n/locales/en/timestamp.json'),
-    storageCleaner: () => import('@/i18n/locales/en/storageCleaner.json'),
-    qrCode: () => import('@/i18n/locales/en/qrCode.json'),
-    textStatistics: () => import('@/i18n/locales/en/textStatistics.json'),
-    jwt: () => import('@/i18n/locales/en/jwt.json'),
-    jsonDiff: () => import('@/i18n/locales/en/jsonDiff.json'),
-    jsonFormat: () => import('@/i18n/locales/en/jsonFormat.json'),
-    base64Converter: () => import('@/i18n/locales/en/base64Converter.json'),
-    markdownToHtml: () => import('@/i18n/locales/en/markdownToHtml.json'),
-    htmlToMarkdown: () => import('@/i18n/locales/en/htmlToMarkdown.json'),
-    rightClickRestorer: () => import('@/i18n/locales/en/rightClickRestorer.json'),
-  },
-};
-
-// 已加载的命名空间缓存
-const loadedNamespaces = new Set<string>();
-
-/**
- * 清除已加载命名空间的缓存（仅用于测试）
- * @internal
- */
-export function __test_clearCache(): void {
-  loadedNamespaces.clear();
-}
-
-/**
- * 动态加载 i18n 命名空间
- */
-async function loadNamespace(ns: string, lng: string): Promise<void> {
-  const cacheKey = `${lng}:${ns}`;
-
-  if (loadedNamespaces.has(cacheKey)) {
-    return;
-  }
-
-  const langModules = localeModules[lng];
-  if (!langModules?.[ns]) {
-    return;
-  }
-
-  try {
-    const module = await langModules[ns]();
-    i18n.addResourceBundle(lng, ns, module.default, true, true);
-    loadedNamespaces.add(cacheKey);
-  } catch (error) {
-    console.error(`Failed to load namespace "${ns}" for language "${lng}":`, error);
-  }
-}
-
-/**
- * 预加载指定命名空间（可在路由切换时调用）
- */
-export async function preloadNamespaces(namespaces: string[]): Promise<void> {
-  const lng = i18n.language || 'en';
-  const normalizedLng = lng.startsWith('zh') ? 'zh' : 'en';
-
-  await Promise.all(namespaces.map((ns) => loadNamespace(ns, normalizedLng)));
-}
-
-/**
- * 懒加载翻译 Hook
- *
- * 与 useTranslation 类似，但会在组件挂载时动态加载指定的命名空间
- *
- * @param ns - 命名空间或命名空间数组
- * @returns useTranslation 的返回值
- */
-export function useLazyTranslation(ns: string | string[]) {
-  const namespaces = useMemo(() => (Array.isArray(ns) ? ns : [ns]), [ns]);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const translation = useTranslation(namespaces);
-
-  useEffect(() => {
-    const loadAll = async () => {
-      await preloadNamespaces(namespaces);
-      setIsLoaded(true);
-    };
-
-    loadAll();
-  }, [namespaces]);
-
-  return {
-    ...translation,
-    isLoaded,
-  };
-}
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 6f4aaab..638cd37 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,66 +1,45 @@
 import '@testing-library/jest-dom';
 import { afterEach, beforeEach, vi } from 'vitest';
-import { readFileSync } from 'fs';
-import { resolve } from 'path';
 import React from 'react';
 
-// 读取中文翻译文件用于 withTranslation mock
-const zhCommon = JSON.parse(
-  readFileSync(resolve(__dirname, 'i18n/locales/zh/common.json'), 'utf-8'),
-);
+// Load actual zh translations for getMessage mock
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const zhMessages: Record<
+  string,
+  { message: string }
+> = require('./public/_locales/zh/messages.json');
 
-// 支持嵌套 key 查找，如 "errorBoundary.title" → zhCommon.errorBoundary.title
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function nestedLookup(obj: Record<string, any>, key: string): string | undefined {
-  const parts = key.split('.');
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let current: any = obj;
-  for (const part of parts) {
-    if (current == null || typeof current !== 'object') return undefined;
-    current = current[part];
-  }
-  return typeof current === 'string' ? current : undefined;
-}
-
-vi.mock('@/utils/useLazyTranslation', () => ({
-  useLazyTranslation: (ns?: string) => ({
-    // 自动承接命名空间前缀过滤，100% 模拟真实多语种直出
-    t: (key: string) => (ns ? `${ns}:${key}` : key),
+vi.mock('@/utils/chromeI18n', () => ({
+  useI18n: (ns?: string | string[]) => ({
+    t: (key: string) => {
+      let msgId = key;
+      // Handle namespace:key format
+      if (key.includes(':')) {
+        msgId = key.replace(':', '_').replace(/\./g, '_');
+      }
+      // Try direct key first
+      if (zhMessages[msgId]) return zhMessages[msgId].message;
+      // Try namespace prefix (using converted msgId)
+      if (ns) {
+        const namespaces = Array.isArray(ns) ? ns : [ns];
+        for (const n of namespaces) {
+          const candidate = `${n}_${msgId}`;
+          if (zhMessages[candidate]) return zhMessages[candidate].message;
+        }
+      }
+      return msgId;
+    },
     i18n: {
       changeLanguage: vi.fn().mockResolvedValue(undefined),
-      language: 'zh-CN',
+      language: 'zh',
     },
     isLoaded: true,
   }),
-}));
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-    i18n: {
-      changeLanguage: vi.fn().mockResolvedValue(undefined),
-      language: 'zh-CN',
-    },
-  }),
-  withTranslation: (ns?: string) => {
-    const translations = ns === 'common' ? zhCommon : {};
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (Component: React.ComponentType<any>) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const Wrapped = (props: any) =>
-        React.createElement(Component, {
-          ...props,
-          t: (key: string) => nestedLookup(translations, key) || key,
-          i18n: { language: 'zh-CN', changeLanguage: vi.fn() },
-        });
-      Wrapped.displayName = `withTranslation(${Component.displayName || Component.name || 'Component'})`;
-      return Wrapped;
-    };
-  },
-  initReactI18next: {
-    type: '3rdParty',
-    init: vi.fn().mockResolvedValue(undefined),
-  },
+  getMessage: (msgId: string) => zhMessages[msgId]?.message ?? msgId,
+  getLanguage: () => 'zh',
+  normalizeLanguage: (lng: string) => (lng.startsWith('zh') ? 'zh' : 'en'),
+  SUPPORTED_LANGUAGES: ['zh', 'en'],
+  preloadNamespaces: vi.fn().mockResolvedValue(undefined),
 }));
 
 vi.mock('@/components/CopyButton', () => ({
diff --git a/wxt.config.ts b/wxt.config.ts
index 407ddf0..a3bf45f 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -22,13 +22,6 @@ function manualChunksForHtmlOnly(): Plugin {
           ) {
             return 'vendor-react';
           }
-          if (
-            id.includes('i18next') ||
-            id.includes('react-i18next') ||
-            id.includes('intl-messageformat')
-          ) {
-            return 'vendor-i18n';
-          }
           // 二维码活态感知依赖分流
           if (id.includes('qr-scanner') || id.includes('qrious')) {
             return 'vendor-qr';
@@ -55,6 +48,7 @@ export default defineConfig({
     name: 'Testing Tool',
     description: 'A tool for testing web applications.',
     version_name: undefined,
+    default_locale: 'zh',
     permissions: [
       'storage',
       'unlimitedStorage',
@@ -69,7 +63,7 @@ export default defineConfig({
     ],
     host_permissions: ['<all_urls>'],
     action: {
-      default_title: '__MSG_extName__',
+      default_title: '__MSG_appName__',
     },
     side_panel: {
       default_path: 'entrypoints/sidepanel/index.html',

From 8b6bac9f2c8316cb4a7ceab5bf0e5d0b1751e053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 19:23:57 +0800
Subject: [PATCH 28/71] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chrome.i18n 语言由浏览器设置决定，不支持运行时切换，移除 TopBar 中的语言切换按钮及相关逻辑。

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/TopBar.tsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index bd02c25..dcf1e6e 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   ArrowLeft,
   ExternalLink,
-  Globe,
   History,
   Monitor,
   Moon,
@@ -17,7 +16,6 @@ import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
 import { openExtensionPage } from '@/utils/chromeTabs';
 import { useI18n } from '@/utils/chromeI18n';
-import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
 
 // 常量配置抽取（无需写在全局变量或 styles 对象里）
@@ -27,7 +25,7 @@ const SEARCH_HISTORY_DISPLAY = 5;
 export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
   const { currentPage, goBack, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
-  const { t, i18n } = useI18n(['common', 'features']);
+  const { t } = useI18n(['common', 'features']);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [showResults, setShowResults] = useState(false);
@@ -99,14 +97,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     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]);
@@ -272,9 +262,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
       {/* 右侧：操作区 */}
       <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>

From 1daf0497370902afe1cbc3f697a363995c436534 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 19:27:15 +0800
Subject: [PATCH 29/71] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E8=8B=B1?=
 =?UTF-8?q?=E6=96=87=E7=BF=BB=E8=AF=91=EF=BC=8C=E4=BB=85=E4=BF=9D=E7=95=99?=
 =?UTF-8?q?=E4=B8=AD=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除 public/_locales/en/ 目录，清理 chromeI18n.ts 中未使用的语言切换相关导出。

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 public/_locales/en/messages.json | 1290 ------------------------------
 utils/chromeI18n.ts              |   23 +-
 vitest.setup.ts                  |   10 +-
 3 files changed, 4 insertions(+), 1319 deletions(-)
 delete mode 100644 public/_locales/en/messages.json

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
deleted file mode 100644
index b45c9fe..0000000
--- a/public/_locales/en/messages.json
+++ /dev/null
@@ -1,1290 +0,0 @@
-{
-  "appName": {
-    "message": "Testing Tools",
-    "description": "Translation key: appName"
-  },
-  "buttons_save": {
-    "message": "Save",
-    "description": "Translation key: buttons_save"
-  },
-  "buttons_cancel": {
-    "message": "Cancel",
-    "description": "Translation key: buttons_cancel"
-  },
-  "buttons_confirm": {
-    "message": "Confirm",
-    "description": "Translation key: buttons_confirm"
-  },
-  "buttons_copy": {
-    "message": "Copy",
-    "description": "Translation key: buttons_copy"
-  },
-  "buttons_clear": {
-    "message": "Clear",
-    "description": "Translation key: buttons_clear"
-  },
-  "buttons_refresh": {
-    "message": "Refresh",
-    "description": "Translation key: buttons_refresh"
-  },
-  "buttons_toggleLanguage": {
-    "message": "Switch Language",
-    "description": "Translation key: buttons_toggleLanguage"
-  },
-  "buttons_toggleTheme": {
-    "message": "Toggle theme",
-    "description": "Translation key: buttons_toggleTheme"
-  },
-  "buttons_themeMode_light": {
-    "message": "Switch to dark mode",
-    "description": "Translation key: buttons_themeMode_light"
-  },
-  "buttons_themeMode_dark": {
-    "message": "Switch to system mode",
-    "description": "Translation key: buttons_themeMode_dark"
-  },
-  "buttons_themeMode_system": {
-    "message": "Switch to light mode",
-    "description": "Translation key: buttons_themeMode_system"
-  },
-  "buttons_search": {
-    "message": "Search tools...",
-    "description": "Translation key: buttons_search"
-  },
-  "buttons_back": {
-    "message": "Back",
-    "description": "Translation key: buttons_back"
-  },
-  "buttons_clearSearch": {
-    "message": "Clear search",
-    "description": "Translation key: buttons_clearSearch"
-  },
-  "buttons_recentSearch": {
-    "message": "Recent search",
-    "description": "Translation key: buttons_recentSearch"
-  },
-  "buttons_noResults": {
-    "message": "No tools found",
-    "description": "Translation key: buttons_noResults"
-  },
-  "buttons_openInTab": {
-    "message": "Open in tab",
-    "description": "Translation key: buttons_openInTab"
-  },
-  "buttons_settings": {
-    "message": "Settings",
-    "description": "Translation key: buttons_settings"
-  },
-  "messages_copySuccess": {
-    "message": "Copied to clipboard",
-    "description": "Translation key: messages_copySuccess"
-  },
-  "messages_copyError": {
-    "message": "Copy failed",
-    "description": "Translation key: messages_copyError"
-  },
-  "messages_copyEmpty": {
-    "message": "Nothing to copy",
-    "description": "Translation key: messages_copyEmpty"
-  },
-  "errorBoundary_title": {
-    "message": "Oops, something went wrong",
-    "description": "Translation key: errorBoundary_title"
-  },
-  "errorBoundary_description": {
-    "message": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
-    "description": "Translation key: errorBoundary_description"
-  },
-  "errorBoundary_refresh": {
-    "message": "Refresh App",
-    "description": "Translation key: errorBoundary_refresh"
-  },
-  "errorBoundary_retry": {
-    "message": "Retry",
-    "description": "Translation key: errorBoundary_retry"
-  },
-  "pageErrorBoundary_title": {
-    "message": "This feature has encountered an error",
-    "description": "Translation key: pageErrorBoundary_title"
-  },
-  "pageErrorBoundary_description": {
-    "message": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu.",
-    "description": "Translation key: pageErrorBoundary_description"
-  },
-  "router_notFound": {
-    "message": "Page Not Found",
-    "description": "Translation key: router_notFound"
-  },
-  "router_notFoundDescription": {
-    "message": "This feature is not available or has been removed in the current runtime ({{entryPointType}}).",
-    "description": "Translation key: router_notFoundDescription"
-  },
-  "textInputArea_clear": {
-    "message": "Clear",
-    "description": "Translation key: textInputArea_clear"
-  },
-  "textInputArea_copyContent": {
-    "message": "Copy content",
-    "description": "Translation key: textInputArea_copyContent"
-  },
-  "textInputArea_cleared": {
-    "message": "Cleared",
-    "description": "Translation key: textInputArea_cleared"
-  },
-  "textInputArea_placeholder": {
-    "message": "placeholder text",
-    "description": "Translation key: textInputArea_placeholder"
-  },
-  "dashboard_title": {
-    "message": "Dashboard",
-    "description": "Translation key: dashboard_title"
-  },
-  "timestamp_title": {
-    "message": "Timestamp",
-    "description": "Translation key: timestamp_title"
-  },
-  "timestamp_description": {
-    "message": "Unix millisecond conversion and formatting",
-    "description": "Translation key: timestamp_description"
-  },
-  "storageCleaner_title": {
-    "message": "Storage Cleaner",
-    "description": "Translation key: storageCleaner_title"
-  },
-  "storageCleaner_description": {
-    "message": "Clean cache, cookies, and local storage",
-    "description": "Translation key: storageCleaner_description"
-  },
-  "qrCode_title": {
-    "message": "QR Code Tools",
-    "description": "Translation key: qrCode_title"
-  },
-  "qrCode_description": {
-    "message": "Generate QR code for the selected URL",
-    "description": "Translation key: qrCode_description"
-  },
-  "textStatistics_title": {
-    "message": "Text Statistics",
-    "description": "Translation key: textStatistics_title"
-  },
-  "textStatistics_description": {
-    "message": "Real-time analysis of text characters, words, and bytes",
-    "description": "Translation key: textStatistics_description"
-  },
-  "jwt_title": {
-    "message": "JWT Parser",
-    "description": "Translation key: jwt_title"
-  },
-  "jwt_description": {
-    "message": "JSON Web Token decoding and viewing",
-    "description": "Translation key: jwt_description"
-  },
-  "jsonDiff_title": {
-    "message": "JSON Tools",
-    "description": "Translation key: jsonDiff_title"
-  },
-  "jsonDiff_description": {
-    "message": "Diff, format, YAML/TOML conversion, and minify",
-    "description": "Translation key: jsonDiff_description"
-  },
-  "base64Converter_title": {
-    "message": "Base64 Converter",
-    "description": "Translation key: base64Converter_title"
-  },
-  "base64Converter_description": {
-    "message": "Encode text, files, and images to Base64",
-    "description": "Translation key: base64Converter_description"
-  },
-  "markdownToHtml_title": {
-    "message": "Markdown to HTML",
-    "description": "Translation key: markdownToHtml_title"
-  },
-  "markdownToHtml_description": {
-    "message": "Real-time Markdown conversion and HTML preview",
-    "description": "Translation key: markdownToHtml_description"
-  },
-  "htmlToMarkdown_title": {
-    "message": "HTML to Markdown",
-    "description": "Translation key: htmlToMarkdown_title"
-  },
-  "htmlToMarkdown_description": {
-    "message": "Real-time HTML conversion and Markdown preview",
-    "description": "Translation key: htmlToMarkdown_description"
-  },
-  "rightClickRestorer_title": {
-    "message": "Right Click Restorer",
-    "description": "Translation key: rightClickRestorer_title"
-  },
-  "rightClickRestorer_description": {
-    "message": "Detect and restore disabled browser right-click menus",
-    "description": "Translation key: rightClickRestorer_description"
-  },
-  "base64Converter_pageTitle": {
-    "message": "Base64 Converter",
-    "description": "Translation key: base64Converter_pageTitle"
-  },
-  "base64Converter_pageSubtitle": {
-    "message": "Encode and decode text, files, and images with Base64",
-    "description": "Translation key: base64Converter_pageSubtitle"
-  },
-  "base64Converter_textMode": {
-    "message": "Text",
-    "description": "Translation key: base64Converter_textMode"
-  },
-  "base64Converter_fileMode": {
-    "message": "File",
-    "description": "Translation key: base64Converter_fileMode"
-  },
-  "base64Converter_imageMode": {
-    "message": "Image",
-    "description": "Translation key: base64Converter_imageMode"
-  },
-  "base64Converter_encode": {
-    "message": "Encode",
-    "description": "Translation key: base64Converter_encode"
-  },
-  "base64Converter_decode": {
-    "message": "Decode",
-    "description": "Translation key: base64Converter_decode"
-  },
-  "base64Converter_clear": {
-    "message": "Clear",
-    "description": "Translation key: base64Converter_clear"
-  },
-  "base64Converter_textInputPlaceholder": {
-    "message": "Enter text to encode to Base64...",
-    "description": "Translation key: base64Converter_textInputPlaceholder"
-  },
-  "base64Converter_base64InputPlaceholder": {
-    "message": "Enter Base64 string to decode...",
-    "description": "Translation key: base64Converter_base64InputPlaceholder"
-  },
-  "base64Converter_base64Output": {
-    "message": "Base64 Output",
-    "description": "Translation key: base64Converter_base64Output"
-  },
-  "base64Converter_textOutput": {
-    "message": "Decoded Text Output",
-    "description": "Translation key: base64Converter_textOutput"
-  },
-  "base64Converter_copyRaw": {
-    "message": "Copy Raw Base64",
-    "description": "Translation key: base64Converter_copyRaw"
-  },
-  "base64Converter_copyDataUri": {
-    "message": "Copy Data URI",
-    "description": "Translation key: base64Converter_copyDataUri"
-  },
-  "base64Converter_clickOrDropToFile": {
-    "message": "Click or drop a file here",
-    "description": "Translation key: base64Converter_clickOrDropToFile"
-  },
-  "base64Converter_clickOrDropToImage": {
-    "message": "Click or drop an image here",
-    "description": "Translation key: base64Converter_clickOrDropToImage"
-  },
-  "base64Converter_clickOrDropToReplace": {
-    "message": "Click or drop to replace the file",
-    "description": "Translation key: base64Converter_clickOrDropToReplace"
-  },
-  "base64Converter_maxFileSize": {
-    "message": "Maximum file size: {{max}}",
-    "description": "Translation key: base64Converter_maxFileSize"
-  },
-  "base64Converter_supportedFormats": {
-    "message": "Supports PNG, JPG, WEBP, GIF, BMP, SVG, etc.",
-    "description": "Translation key: base64Converter_supportedFormats"
-  },
-  "base64Converter_fileSizeExceeded": {
-    "message": "File size exceeds the limit (max {{max}})",
-    "description": "Translation key: base64Converter_fileSizeExceeded"
-  },
-  "base64Converter_unsupportedImageType": {
-    "message": "Unsupported image format",
-    "description": "Translation key: base64Converter_unsupportedImageType"
-  },
-  "base64Converter_conversionFailed": {
-    "message": "Conversion failed",
-    "description": "Translation key: base64Converter_conversionFailed"
-  },
-  "base64Converter_originalSize": {
-    "message": "Original Size",
-    "description": "Translation key: base64Converter_originalSize"
-  },
-  "base64Converter_encodedSize": {
-    "message": "Encoded Size",
-    "description": "Translation key: base64Converter_encodedSize"
-  },
-  "base64Converter_invalidBase64": {
-    "message": "Invalid Base64 string",
-    "description": "Translation key: base64Converter_invalidBase64"
-  },
-  "base64Converter_binaryDataDetected": {
-    "message": "Input appears to be binary data (e.g. an image). Please switch to the Image tab.",
-    "description": "Translation key: base64Converter_binaryDataDetected"
-  },
-  "base64Converter_imageDataUriHint": {
-    "message": "Detected an image data URI — please use the Image tab to decode it.",
-    "description": "Translation key: base64Converter_imageDataUriHint"
-  },
-  "base64Converter_switchToImageMode": {
-    "message": "Switch to Image mode",
-    "description": "Translation key: base64Converter_switchToImageMode"
-  },
-  "base64Converter_download": {
-    "message": "Download",
-    "description": "Translation key: base64Converter_download"
-  },
-  "base64Converter_decodedFileName": {
-    "message": "Decoded file name",
-    "description": "Translation key: base64Converter_decodedFileName"
-  },
-  "base64Converter_decodeBase64Placeholder": {
-    "message": "Enter Base64 or data URI to decode...",
-    "description": "Translation key: base64Converter_decodeBase64Placeholder"
-  },
-  "base64Converter_decodedFileOutput": {
-    "message": "Decoded File",
-    "description": "Translation key: base64Converter_decodedFileOutput"
-  },
-  "base64Converter_decodedImageOutput": {
-    "message": "Decoded Image",
-    "description": "Translation key: base64Converter_decodedImageOutput"
-  },
-  "base64Converter_inferredMimeType": {
-    "message": "Inferred MIME type",
-    "description": "Translation key: base64Converter_inferredMimeType"
-  },
-  "base64Converter_decodedSize": {
-    "message": "Decoded size",
-    "description": "Translation key: base64Converter_decodedSize"
-  },
-  "htmlToMarkdown_pageTitle": {
-    "message": "HTML to Markdown",
-    "description": "Translation key: htmlToMarkdown_pageTitle"
-  },
-  "htmlToMarkdown_pageSubtitle": {
-    "message": "Convert HTML to Markdown in real-time",
-    "description": "Translation key: htmlToMarkdown_pageSubtitle"
-  },
-  "htmlToMarkdown_splitMode": {
-    "message": "Split",
-    "description": "Translation key: htmlToMarkdown_splitMode"
-  },
-  "htmlToMarkdown_previewMode": {
-    "message": "Preview",
-    "description": "Translation key: htmlToMarkdown_previewMode"
-  },
-  "htmlToMarkdown_markdownMode": {
-    "message": "Markdown",
-    "description": "Translation key: htmlToMarkdown_markdownMode"
-  },
-  "htmlToMarkdown_clear": {
-    "message": "Clear",
-    "description": "Translation key: htmlToMarkdown_clear"
-  },
-  "htmlToMarkdown_inputLabel": {
-    "message": "HTML Input",
-    "description": "Translation key: htmlToMarkdown_inputLabel"
-  },
-  "htmlToMarkdown_previewLabel": {
-    "message": "Markdown Preview",
-    "description": "Translation key: htmlToMarkdown_previewLabel"
-  },
-  "htmlToMarkdown_markdownOutputLabel": {
-    "message": "Markdown Output",
-    "description": "Translation key: htmlToMarkdown_markdownOutputLabel"
-  },
-  "htmlToMarkdown_inputPlaceholder": {
-    "message": "Enter your HTML content here...",
-    "description": "Translation key: htmlToMarkdown_inputPlaceholder"
-  },
-  "htmlToMarkdown_charCount": {
-    "message": "{{count}} chars",
-    "description": "Translation key: htmlToMarkdown_charCount"
-  },
-  "htmlToMarkdown_copyMarkdown": {
-    "message": "Copy Markdown",
-    "description": "Translation key: htmlToMarkdown_copyMarkdown"
-  },
-  "htmlToMarkdown_download": {
-    "message": "Download",
-    "description": "Translation key: htmlToMarkdown_download"
-  },
-  "htmlToMarkdown_emptyHint": {
-    "message": "Enter HTML content to see the conversion result",
-    "description": "Translation key: htmlToMarkdown_emptyHint"
-  },
-  "jsonDiff_pageTitle": {
-    "message": "JSON Diff",
-    "description": "Translation key: jsonDiff_pageTitle"
-  },
-  "jsonDiff_pageSubtitle": {
-    "message": "Compare differences between two JSON values",
-    "description": "Translation key: jsonDiff_pageSubtitle"
-  },
-  "jsonDiff_leftPlaceholder": {
-    "message": "Enter the original JSON...",
-    "description": "Translation key: jsonDiff_leftPlaceholder"
-  },
-  "jsonDiff_rightPlaceholder": {
-    "message": "Enter the target JSON...",
-    "description": "Translation key: jsonDiff_rightPlaceholder"
-  },
-  "jsonDiff_leftLabel": {
-    "message": "Original JSON",
-    "description": "Translation key: jsonDiff_leftLabel"
-  },
-  "jsonDiff_rightLabel": {
-    "message": "Target JSON",
-    "description": "Translation key: jsonDiff_rightLabel"
-  },
-  "jsonDiff_compareButton": {
-    "message": "Compare",
-    "description": "Translation key: jsonDiff_compareButton"
-  },
-  "jsonDiff_clearButton": {
-    "message": "Clear",
-    "description": "Translation key: jsonDiff_clearButton"
-  },
-  "jsonDiff_sideBySideMode": {
-    "message": "Side by side",
-    "description": "Translation key: jsonDiff_sideBySideMode"
-  },
-  "jsonDiff_unifiedMode": {
-    "message": "Unified",
-    "description": "Translation key: jsonDiff_unifiedMode"
-  },
-  "jsonDiff_previousDiff": {
-    "message": "Previous",
-    "description": "Translation key: jsonDiff_previousDiff"
-  },
-  "jsonDiff_nextDiff": {
-    "message": "Next",
-    "description": "Translation key: jsonDiff_nextDiff"
-  },
-  "jsonDiff_noDiffs": {
-    "message": "No differences",
-    "description": "Translation key: jsonDiff_noDiffs"
-  },
-  "jsonDiff_diffCount": {
-    "message": "{{count}} differences",
-    "description": "Translation key: jsonDiff_diffCount"
-  },
-  "jsonDiff_invalidJson": {
-    "message": "Invalid JSON format",
-    "description": "Translation key: jsonDiff_invalidJson"
-  },
-  "jsonDiff_emptyHint": {
-    "message": "Enter JSON on both sides and click Compare",
-    "description": "Translation key: jsonDiff_emptyHint"
-  },
-  "jsonDiff_fixErrorHint": {
-    "message": "Fix the JSON syntax errors above to enable live comparison",
-    "description": "Translation key: jsonDiff_fixErrorHint"
-  },
-  "jsonDiff_added": {
-    "message": "Added",
-    "description": "Translation key: jsonDiff_added"
-  },
-  "jsonDiff_removed": {
-    "message": "Removed",
-    "description": "Translation key: jsonDiff_removed"
-  },
-  "jsonDiff_modified": {
-    "message": "Modified",
-    "description": "Translation key: jsonDiff_modified"
-  },
-  "jsonFormat_formatTitle": {
-    "message": "JSON Formatter",
-    "description": "Translation key: jsonFormat_formatTitle"
-  },
-  "jsonFormat_formatSubtitle": {
-    "message": "Beautify and format JSON data",
-    "description": "Translation key: jsonFormat_formatSubtitle"
-  },
-  "jsonFormat_inputPlaceholder": {
-    "message": "Enter JSON to format...",
-    "description": "Translation key: jsonFormat_inputPlaceholder"
-  },
-  "jsonFormat_formatButton": {
-    "message": "Format",
-    "description": "Translation key: jsonFormat_formatButton"
-  },
-  "jsonFormat_clearButton": {
-    "message": "Clear",
-    "description": "Translation key: jsonFormat_clearButton"
-  },
-  "jsonFormat_sortKeys": {
-    "message": "Sort Keys",
-    "description": "Translation key: jsonFormat_sortKeys"
-  },
-  "jsonFormat_sortKeysTooltip": {
-    "message": "Sort JSON object keys in alphabetical order",
-    "description": "Translation key: jsonFormat_sortKeysTooltip"
-  },
-  "jsonFormat_indentSize": {
-    "message": "Indent",
-    "description": "Translation key: jsonFormat_indentSize"
-  },
-  "jsonFormat_indentSpaces": {
-    "message": "{{count}} spaces",
-    "description": "Translation key: jsonFormat_indentSpaces"
-  },
-  "jsonFormat_outputLabel": {
-    "message": "Formatted Result",
-    "description": "Translation key: jsonFormat_outputLabel"
-  },
-  "jsonFormat_copySuccess": {
-    "message": "Copied",
-    "description": "Translation key: jsonFormat_copySuccess"
-  },
-  "jsonFormat_copyFail": {
-    "message": "Copy failed",
-    "description": "Translation key: jsonFormat_copyFail"
-  },
-  "jsonFormat_noContent": {
-    "message": "Nothing to copy",
-    "description": "Translation key: jsonFormat_noContent"
-  },
-  "jsonFormat_invalidJson": {
-    "message": "Invalid JSON format",
-    "description": "Translation key: jsonFormat_invalidJson"
-  },
-  "jsonFormat_emptyHint": {
-    "message": "Enter JSON and click Format",
-    "description": "Translation key: jsonFormat_emptyHint"
-  },
-  "jsonFormat_fixErrorHint": {
-    "message": "Fix the JSON syntax errors above to enable live formatting",
-    "description": "Translation key: jsonFormat_fixErrorHint"
-  },
-  "jsonFormat_originalSize": {
-    "message": "Original size",
-    "description": "Translation key: jsonFormat_originalSize"
-  },
-  "jsonFormat_formattedSize": {
-    "message": "Formatted size",
-    "description": "Translation key: jsonFormat_formattedSize"
-  },
-  "jsonFormat_diffMode": {
-    "message": "Diff",
-    "description": "Translation key: jsonFormat_diffMode"
-  },
-  "jsonFormat_formatMode": {
-    "message": "Format",
-    "description": "Translation key: jsonFormat_formatMode"
-  },
-  "jsonFormat_yamlMode": {
-    "message": "YAML",
-    "description": "Translation key: jsonFormat_yamlMode"
-  },
-  "jsonFormat_tomlMode": {
-    "message": "TOML",
-    "description": "Translation key: jsonFormat_tomlMode"
-  },
-  "jsonFormat_minifyMode": {
-    "message": "Minify",
-    "description": "Translation key: jsonFormat_minifyMode"
-  },
-  "jsonFormat_yamlTitle": {
-    "message": "JSON to YAML",
-    "description": "Translation key: jsonFormat_yamlTitle"
-  },
-  "jsonFormat_yamlSubtitle": {
-    "message": "Convert JSON data to YAML format",
-    "description": "Translation key: jsonFormat_yamlSubtitle"
-  },
-  "jsonFormat_yamlModeInputPlaceholder": {
-    "message": "Enter JSON to convert...",
-    "description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
-  },
-  "jsonFormat_yamlModeOutputLabel": {
-    "message": "YAML Result",
-    "description": "Translation key: jsonFormat_yamlModeOutputLabel"
-  },
-  "jsonFormat_yamlModeEmptyHint": {
-    "message": "Enter JSON and click Convert",
-    "description": "Translation key: jsonFormat_yamlModeEmptyHint"
-  },
-  "jsonFormat_convertButton": {
-    "message": "Convert",
-    "description": "Translation key: jsonFormat_convertButton"
-  },
-  "jsonFormat_tomlTitle": {
-    "message": "JSON to TOML",
-    "description": "Translation key: jsonFormat_tomlTitle"
-  },
-  "jsonFormat_tomlSubtitle": {
-    "message": "Convert JSON data to TOML format",
-    "description": "Translation key: jsonFormat_tomlSubtitle"
-  },
-  "jsonFormat_tomlModeInputPlaceholder": {
-    "message": "Enter JSON to convert...",
-    "description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
-  },
-  "jsonFormat_tomlModeOutputLabel": {
-    "message": "TOML Result",
-    "description": "Translation key: jsonFormat_tomlModeOutputLabel"
-  },
-  "jsonFormat_tomlModeEmptyHint": {
-    "message": "Enter JSON and click Convert",
-    "description": "Translation key: jsonFormat_tomlModeEmptyHint"
-  },
-  "jsonFormat_minifyTitle": {
-    "message": "JSON Minifier",
-    "description": "Translation key: jsonFormat_minifyTitle"
-  },
-  "jsonFormat_minifySubtitle": {
-    "message": "Compress JSON into a compact single-line format",
-    "description": "Translation key: jsonFormat_minifySubtitle"
-  },
-  "jsonFormat_minifyModeInputPlaceholder": {
-    "message": "Enter JSON to minify...",
-    "description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
-  },
-  "jsonFormat_minifyModeOutputLabel": {
-    "message": "Minified Result",
-    "description": "Translation key: jsonFormat_minifyModeOutputLabel"
-  },
-  "jsonFormat_minifyModeEmptyHint": {
-    "message": "Enter JSON and click Minify",
-    "description": "Translation key: jsonFormat_minifyModeEmptyHint"
-  },
-  "jsonFormat_minifyButton": {
-    "message": "Minify",
-    "description": "Translation key: jsonFormat_minifyButton"
-  },
-  "jwt_pageTitle": {
-    "message": "JWT Parser",
-    "description": "Translation key: jwt_pageTitle"
-  },
-  "jwt_pageSubtitle": {
-    "message": "JSON Web Token decoding and viewing",
-    "description": "Translation key: jwt_pageSubtitle"
-  },
-  "jwt_placeholder": {
-    "message": "Paste Encoded JWT here...",
-    "description": "Translation key: jwt_placeholder"
-  },
-  "jwt_headerTitle": {
-    "message": "HEADER: Algorithm & Token Type",
-    "description": "Translation key: jwt_headerTitle"
-  },
-  "jwt_payloadTitle": {
-    "message": "PAYLOAD: Data",
-    "description": "Translation key: jwt_payloadTitle"
-  },
-  "jwt_signatureTitle": {
-    "message": "Signature",
-    "description": "Translation key: jwt_signatureTitle"
-  },
-  "jwt_noSignature": {
-    "message": "No Signature",
-    "description": "Translation key: jwt_noSignature"
-  },
-  "jwt_invalidFormat": {
-    "message": "Unable to parse",
-    "description": "Translation key: jwt_invalidFormat"
-  },
-  "jwt_errors_invalidBase64String": {
-    "message": "Invalid base64url string",
-    "description": "Translation key: jwt_errors_invalidBase64String"
-  },
-  "jwt_errors_failedToDecode": {
-    "message": "Failed to decode base64url: ",
-    "description": "Translation key: jwt_errors_failedToDecode"
-  },
-  "jwt_errors_invalidFormat": {
-    "message": "Invalid JWT format: expected 3 parts separated by .",
-    "description": "Translation key: jwt_errors_invalidFormat"
-  },
-  "jwt_errors_parseHeaderFailed": {
-    "message": "Failed to parse Header: ",
-    "description": "Translation key: jwt_errors_parseHeaderFailed"
-  },
-  "jwt_errors_parsePayloadFailed": {
-    "message": "Failed to parse Payload: ",
-    "description": "Translation key: jwt_errors_parsePayloadFailed"
-  },
-  "markdownToHtml_pageTitle": {
-    "message": "Markdown to HTML",
-    "description": "Translation key: markdownToHtml_pageTitle"
-  },
-  "markdownToHtml_pageSubtitle": {
-    "message": "Convert Markdown to HTML in real-time with preview",
-    "description": "Translation key: markdownToHtml_pageSubtitle"
-  },
-  "markdownToHtml_splitMode": {
-    "message": "Split",
-    "description": "Translation key: markdownToHtml_splitMode"
-  },
-  "markdownToHtml_previewMode": {
-    "message": "Preview",
-    "description": "Translation key: markdownToHtml_previewMode"
-  },
-  "markdownToHtml_htmlMode": {
-    "message": "HTML",
-    "description": "Translation key: markdownToHtml_htmlMode"
-  },
-  "markdownToHtml_clear": {
-    "message": "Clear",
-    "description": "Translation key: markdownToHtml_clear"
-  },
-  "markdownToHtml_print": {
-    "message": "Print",
-    "description": "Translation key: markdownToHtml_print"
-  },
-  "markdownToHtml_download": {
-    "message": "Download",
-    "description": "Translation key: markdownToHtml_download"
-  },
-  "markdownToHtml_inputLabel": {
-    "message": "Markdown Input",
-    "description": "Translation key: markdownToHtml_inputLabel"
-  },
-  "markdownToHtml_previewLabel": {
-    "message": "Live Preview",
-    "description": "Translation key: markdownToHtml_previewLabel"
-  },
-  "markdownToHtml_htmlOutputLabel": {
-    "message": "HTML Output",
-    "description": "Translation key: markdownToHtml_htmlOutputLabel"
-  },
-  "markdownToHtml_inputPlaceholder": {
-    "message": "Enter your Markdown content here...",
-    "description": "Translation key: markdownToHtml_inputPlaceholder"
-  },
-  "markdownToHtml_charCount": {
-    "message": "{{count}} chars",
-    "description": "Translation key: markdownToHtml_charCount"
-  },
-  "markdownToHtml_copyHtml": {
-    "message": "Copy HTML",
-    "description": "Translation key: markdownToHtml_copyHtml"
-  },
-  "markdownToHtml_downloadSuccess": {
-    "message": "File downloaded successfully",
-    "description": "Translation key: markdownToHtml_downloadSuccess"
-  },
-  "markdownToHtml_printSuccess": {
-    "message": "Print window opened",
-    "description": "Translation key: markdownToHtml_printSuccess"
-  },
-  "qrCode_pageTitle": {
-    "message": "QR Code Tools",
-    "description": "Translation key: qrCode_pageTitle"
-  },
-  "qrCode_pageSubtitle": {
-    "message": "Generate and parse QR codes",
-    "description": "Translation key: qrCode_pageSubtitle"
-  },
-  "qrCode_generateMode": {
-    "message": "Generate QR Code",
-    "description": "Translation key: qrCode_generateMode"
-  },
-  "qrCode_parseMode": {
-    "message": "Parse QR Code",
-    "description": "Translation key: qrCode_parseMode"
-  },
-  "qrCode_urlToQr": {
-    "message": "Text to QR Code",
-    "description": "Translation key: qrCode_urlToQr"
-  },
-  "qrCode_qrToUrl": {
-    "message": "QR Code to Text",
-    "description": "Translation key: qrCode_qrToUrl"
-  },
-  "qrCode_urlInputLabel": {
-    "message": "Enter URL or Text",
-    "description": "Translation key: qrCode_urlInputLabel"
-  },
-  "qrCode_urlInputPlaceholder": {
-    "message": "Enter URL or text content, QR code will be generated automatically",
-    "description": "Translation key: qrCode_urlInputPlaceholder"
-  },
-  "qrCode_generateButton": {
-    "message": "Generate QR Code",
-    "description": "Translation key: qrCode_generateButton"
-  },
-  "qrCode_generating": {
-    "message": "Generating...",
-    "description": "Translation key: qrCode_generating"
-  },
-  "qrCode_qrCodeWillShow": {
-    "message": "QR code will be shown here",
-    "description": "Translation key: qrCode_qrCodeWillShow"
-  },
-  "qrCode_downloadButton": {
-    "message": "Download QR Code",
-    "description": "Translation key: qrCode_downloadButton"
-  },
-  "qrCode_copyQrButton": {
-    "message": "Copy QR Code Image",
-    "description": "Translation key: qrCode_copyQrButton"
-  },
-  "qrCode_qrCodeSuccess": {
-    "message": "QR code generated successfully",
-    "description": "Translation key: qrCode_qrCodeSuccess"
-  },
-  "qrCode_qrCodeDownloadSuccess": {
-    "message": "QR code downloaded successfully",
-    "description": "Translation key: qrCode_qrCodeDownloadSuccess"
-  },
-  "qrCode_qrCodeCopySuccess": {
-    "message": "QR code copied to clipboard",
-    "description": "Translation key: qrCode_qrCodeCopySuccess"
-  },
-  "qrCode_selectImage": {
-    "message": "Please select a QR code image",
-    "description": "Translation key: qrCode_selectImage"
-  },
-  "qrCode_parseSuccess": {
-    "message": "QR code parsed successfully",
-    "description": "Translation key: qrCode_parseSuccess"
-  },
-  "qrCode_noQrDetected": {
-    "message": "No QR code detected, please ensure the image is clear and contains a QR code",
-    "description": "Translation key: qrCode_noQrDetected"
-  },
-  "qrCode_parseError": {
-    "message": "Failed to parse QR code, please try again",
-    "description": "Translation key: qrCode_parseError"
-  },
-  "qrCode_generateError": {
-    "message": "Failed to generate QR code, please check the input",
-    "description": "Translation key: qrCode_generateError"
-  },
-  "qrCode_copyError": {
-    "message": "Copy failed, please try again",
-    "description": "Translation key: qrCode_copyError"
-  },
-  "qrCode_imagePasted": {
-    "message": "Image pasted, parsing...",
-    "description": "Translation key: qrCode_imagePasted"
-  },
-  "qrCode_imagePasteError": {
-    "message": "Failed to paste image, please try again",
-    "description": "Translation key: qrCode_imagePasteError"
-  },
-  "qrCode_imageCleared": {
-    "message": "Image cleared",
-    "description": "Translation key: qrCode_imageCleared"
-  },
-  "qrCode_clickToUpload": {
-    "message": "Click, drag, or paste to upload QR code image",
-    "description": "Translation key: qrCode_clickToUpload"
-  },
-  "qrCode_supportFormats": {
-    "message": "Supports PNG, JPG, WEBP, Base64 formats",
-    "description": "Translation key: qrCode_supportFormats"
-  },
-  "qrCode_parseButton": {
-    "message": "Parse QR Code",
-    "description": "Translation key: qrCode_parseButton"
-  },
-  "qrCode_parsing": {
-    "message": "Parsing...",
-    "description": "Translation key: qrCode_parsing"
-  },
-  "qrCode_resultLabel": {
-    "message": "Parsing Result",
-    "description": "Translation key: qrCode_resultLabel"
-  },
-  "qrCode_copyTooltip": {
-    "message": "Copy",
-    "description": "Translation key: qrCode_copyTooltip"
-  },
-  "qrCode_enterUrlError": {
-    "message": "Please enter URL or text",
-    "description": "Translation key: qrCode_enterUrlError"
-  },
-  "qrCode_clickToChange": {
-    "message": "Click to change image",
-    "description": "Translation key: qrCode_clickToChange"
-  },
-  "qrCode_pasteHint": {
-    "message": "Supports Ctrl+V to paste images or Base64 strings",
-    "description": "Translation key: qrCode_pasteHint"
-  },
-  "qrCode_autoGenerateHint": {
-    "message": "QR code will be generated automatically after input",
-    "description": "Translation key: qrCode_autoGenerateHint"
-  },
-  "qrCode_autoParseHint": {
-    "message": "QR code will be parsed automatically after upload",
-    "description": "Translation key: qrCode_autoParseHint"
-  },
-  "rightClickRestorer_loading": {
-    "message": "Loading...",
-    "description": "Translation key: rightClickRestorer_loading"
-  },
-  "rightClickRestorer_currentDomain": {
-    "message": "Current Domain",
-    "description": "Translation key: rightClickRestorer_currentDomain"
-  },
-  "rightClickRestorer_statusLocked": {
-    "message": "Locked",
-    "description": "Translation key: rightClickRestorer_statusLocked"
-  },
-  "rightClickRestorer_statusUnlocked": {
-    "message": "Unlocked",
-    "description": "Translation key: rightClickRestorer_statusUnlocked"
-  },
-  "rightClickRestorer_unsupported": {
-    "message": "Unsupported",
-    "description": "Translation key: rightClickRestorer_unsupported"
-  },
-  "rightClickRestorer_unsupportedDesc": {
-    "message": "The current page is a browser internal or extension page. Right-click unlock is not available. Please switch to a regular webpage.",
-    "description": "Translation key: rightClickRestorer_unsupportedDesc"
-  },
-  "rightClickRestorer_unlockDesc": {
-    "message": "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.",
-    "description": "Translation key: rightClickRestorer_unlockDesc"
-  },
-  "rightClickRestorer_unlockBtn": {
-    "message": "Unlock Right Click",
-    "description": "Translation key: rightClickRestorer_unlockBtn"
-  },
-  "rightClickRestorer_alreadyUnlocked": {
-    "message": "Right Click Unlocked",
-    "description": "Translation key: rightClickRestorer_alreadyUnlocked"
-  },
-  "storageCleaner_pageTitle": {
-    "message": "Storage Cleaner",
-    "description": "Translation key: storageCleaner_pageTitle"
-  },
-  "storageCleaner_pageSubtitle": {
-    "message": "Clear cache, cookies, and local storage",
-    "description": "Translation key: storageCleaner_pageSubtitle"
-  },
-  "storageCleaner_loading": {
-    "message": "Loading...",
-    "description": "Translation key: storageCleaner_loading"
-  },
-  "storageCleaner_initializing": {
-    "message": "Reading site data...",
-    "description": "Translation key: storageCleaner_initializing"
-  },
-  "storageCleaner_occupied": {
-    "message": "Occupied {{size}}",
-    "description": "Translation key: storageCleaner_occupied"
-  },
-  "storageCleaner_cleaning": {
-    "message": "Cleaning...",
-    "description": "Translation key: storageCleaner_cleaning"
-  },
-  "storageCleaner_cleanNow": {
-    "message": "Clean Now",
-    "description": "Translation key: storageCleaner_cleanNow"
-  },
-  "storageCleaner_autoRefresh": {
-    "message": "Auto refresh page after cleaning",
-    "description": "Translation key: storageCleaner_autoRefresh"
-  },
-  "storageCleaner_selectAll": {
-    "message": "Select all items",
-    "description": "Translation key: storageCleaner_selectAll"
-  },
-  "storageCleaner_cleanSuccess": {
-    "message": "Cleaning complete",
-    "description": "Translation key: storageCleaner_cleanSuccess"
-  },
-  "storageCleaner_cleanError": {
-    "message": "Cleaning failed",
-    "description": "Translation key: storageCleaner_cleanError"
-  },
-  "storageCleaner_noData": {
-    "message": "No data",
-    "description": "Translation key: storageCleaner_noData"
-  },
-  "storageCleaner_countUnit": {
-    "message": "items",
-    "description": "Translation key: storageCleaner_countUnit"
-  },
-  "storageCleaner_errorNoTab": {
-    "message": "Unable to get current tab",
-    "description": "Translation key: storageCleaner_errorNoTab"
-  },
-  "storageCleaner_errorRestricted": {
-    "message": "Storage cleaning is not supported on this page",
-    "description": "Translation key: storageCleaner_errorRestricted"
-  },
-  "storageCleaner_cleanSuccessReload": {
-    "message": "Cleaning successful, reloading page...",
-    "description": "Translation key: storageCleaner_cleanSuccessReload"
-  },
-  "storageCleaner_errorStandardOnly": {
-    "message": "Storage cleaning only works on standard web pages",
-    "description": "Translation key: storageCleaner_errorStandardOnly"
-  },
-  "storageCleaner_confirmTitle": {
-    "message": "Confirm Clear Data?",
-    "description": "Translation key: storageCleaner_confirmTitle"
-  },
-  "storageCleaner_confirmDesc": {
-    "message": "You are about to permanently delete the following selected storage items from the current page.",
-    "description": "Translation key: storageCleaner_confirmDesc"
-  },
-  "storageCleaner_irreversible": {
-    "message": "This action is irreversible",
-    "description": "Translation key: storageCleaner_irreversible"
-  },
-  "storageCleaner_confirmAction": {
-    "message": "Confirm Clear",
-    "description": "Translation key: storageCleaner_confirmAction"
-  },
-  "storageCleaner_cleanedSummary": {
-    "message": "Cleaned {{items}}",
-    "description": "Translation key: storageCleaner_cleanedSummary"
-  },
-  "storageCleaner_noDataToClean": {
-    "message": "No storage data found to clean",
-    "description": "Translation key: storageCleaner_noDataToClean"
-  },
-  "storageCleaner_partialFailure": {
-    "message": "Some items failed to clean",
-    "description": "Translation key: storageCleaner_partialFailure"
-  },
-  "storageCleaner_options_localStorage": {
-    "message": "Local Storage",
-    "description": "Translation key: storageCleaner_options_localStorage"
-  },
-  "storageCleaner_options_sessionStorage": {
-    "message": "Session Storage",
-    "description": "Translation key: storageCleaner_options_sessionStorage"
-  },
-  "storageCleaner_options_indexedDB": {
-    "message": "IndexedDB",
-    "description": "Translation key: storageCleaner_options_indexedDB"
-  },
-  "storageCleaner_options_cookies": {
-    "message": "Cookies",
-    "description": "Translation key: storageCleaner_options_cookies"
-  },
-  "storageCleaner_options_cacheStorage": {
-    "message": "Cache Storage",
-    "description": "Translation key: storageCleaner_options_cacheStorage"
-  },
-  "storageCleaner_options_serviceWorkers": {
-    "message": "Service Workers",
-    "description": "Translation key: storageCleaner_options_serviceWorkers"
-  },
-  "textStatistics_pageTitle": {
-    "message": "Text Statistics",
-    "description": "Translation key: textStatistics_pageTitle"
-  },
-  "textStatistics_pageSubtitle": {
-    "message": "Real-time analysis of characters, words, lines, and byte size",
-    "description": "Translation key: textStatistics_pageSubtitle"
-  },
-  "textStatistics_placeholder": {
-    "message": "Type or paste text here...",
-    "description": "Translation key: textStatistics_placeholder"
-  },
-  "textStatistics_characters": {
-    "message": "Characters",
-    "description": "Translation key: textStatistics_characters"
-  },
-  "textStatistics_words": {
-    "message": "Words",
-    "description": "Translation key: textStatistics_words"
-  },
-  "textStatistics_lines": {
-    "message": "Lines",
-    "description": "Translation key: textStatistics_lines"
-  },
-  "textStatistics_bytes": {
-    "message": "Byte Size",
-    "description": "Translation key: textStatistics_bytes"
-  },
-  "timestamp_pageTitle": {
-    "message": "Timestamp Conversion",
-    "description": "Translation key: timestamp_pageTitle"
-  },
-  "timestamp_pageSubtitle": {
-    "message": "Unix millisecond conversion and formatting",
-    "description": "Translation key: timestamp_pageSubtitle"
-  },
-  "timestamp_tsToDate": {
-    "message": "Timestamp → Date",
-    "description": "Translation key: timestamp_tsToDate"
-  },
-  "timestamp_dateToTs": {
-    "message": "Date → Timestamp",
-    "description": "Translation key: timestamp_dateToTs"
-  },
-  "timestamp_placeholderTs": {
-    "message": "Enter timestamp...",
-    "description": "Translation key: timestamp_placeholderTs"
-  },
-  "timestamp_placeholderDate": {
-    "message": "YYYY-MM-DD HH:mm:ss",
-    "description": "Translation key: timestamp_placeholderDate"
-  },
-  "timestamp_unitMs": {
-    "message": "Millisecond (ms)",
-    "description": "Translation key: timestamp_unitMs"
-  },
-  "timestamp_unitS": {
-    "message": "Second (s)",
-    "description": "Translation key: timestamp_unitS"
-  },
-  "timestamp_convertButton": {
-    "message": "Convert Now",
-    "description": "Translation key: timestamp_convertButton"
-  },
-  "timestamp_currentTs": {
-    "message": "Current Timestamp",
-    "description": "Translation key: timestamp_currentTs"
-  },
-  "timestamp_useNowTooltip": {
-    "message": "Use this value",
-    "description": "Translation key: timestamp_useNowTooltip"
-  },
-  "timestamp_copyTsTooltip": {
-    "message": "Copy timestamp",
-    "description": "Translation key: timestamp_copyTsTooltip"
-  },
-  "timestamp_usedSuccess": {
-    "message": "Using current timestamp",
-    "description": "Translation key: timestamp_usedSuccess"
-  },
-  "timestamp_resultLabel": {
-    "message": "Conversion Result",
-    "description": "Translation key: timestamp_resultLabel"
-  },
-  "timestamp_copyResultTooltip": {
-    "message": "Copy result",
-    "description": "Translation key: timestamp_copyResultTooltip"
-  },
-  "timestamp_relativeTime": {
-    "message": "Relative Time",
-    "description": "Translation key: timestamp_relativeTime"
-  },
-  "timestamp_iso8601": {
-    "message": "ISO 8601",
-    "description": "Translation key: timestamp_iso8601"
-  },
-  "timestamp_utcTime": {
-    "message": "UTC Time",
-    "description": "Translation key: timestamp_utcTime"
-  },
-  "timestamp_copyTooltip": {
-    "message": "Copy",
-    "description": "Translation key: timestamp_copyTooltip"
-  },
-  "timestamp_resultEmpty": {
-    "message": "Enter a value and click convert",
-    "description": "Translation key: timestamp_resultEmpty"
-  },
-  "timestamp_errors_invalidNumber": {
-    "message": "Invalid number",
-    "description": "Translation key: timestamp_errors_invalidNumber"
-  },
-  "timestamp_errors_invalidTimestamp": {
-    "message": "Invalid timestamp",
-    "description": "Translation key: timestamp_errors_invalidTimestamp"
-  },
-  "timestamp_errors_invalidFormat": {
-    "message": "Format error",
-    "description": "Translation key: timestamp_errors_invalidFormat"
-  },
-  "common_buttons_save": {
-    "message": "Save",
-    "description": "Translation key: buttons_save"
-  },
-  "common_buttons_cancel": {
-    "message": "Cancel",
-    "description": "Translation key: buttons_cancel"
-  },
-  "common_buttons_confirm": {
-    "message": "Confirm",
-    "description": "Translation key: buttons_confirm"
-  },
-  "common_buttons_copy": {
-    "message": "Copy",
-    "description": "Translation key: buttons_copy"
-  },
-  "common_buttons_clear": {
-    "message": "Clear",
-    "description": "Translation key: buttons_clear"
-  },
-  "common_buttons_refresh": {
-    "message": "Refresh",
-    "description": "Translation key: buttons_refresh"
-  },
-  "common_buttons_toggleLanguage": {
-    "message": "Switch Language",
-    "description": "Translation key: buttons_toggleLanguage"
-  },
-  "common_buttons_toggleTheme": {
-    "message": "Toggle theme",
-    "description": "Translation key: buttons_toggleTheme"
-  },
-  "common_buttons_themeMode_light": {
-    "message": "Switch to dark mode",
-    "description": "Translation key: buttons_themeMode_light"
-  },
-  "common_buttons_themeMode_dark": {
-    "message": "Switch to system mode",
-    "description": "Translation key: buttons_themeMode_dark"
-  },
-  "common_buttons_themeMode_system": {
-    "message": "Switch to light mode",
-    "description": "Translation key: buttons_themeMode_system"
-  },
-  "common_buttons_search": {
-    "message": "Search tools...",
-    "description": "Translation key: buttons_search"
-  },
-  "common_buttons_back": {
-    "message": "Back",
-    "description": "Translation key: buttons_back"
-  },
-  "common_buttons_clearSearch": {
-    "message": "Clear search",
-    "description": "Translation key: buttons_clearSearch"
-  },
-  "common_buttons_recentSearch": {
-    "message": "Recent search",
-    "description": "Translation key: buttons_recentSearch"
-  },
-  "common_buttons_noResults": {
-    "message": "No tools found",
-    "description": "Translation key: buttons_noResults"
-  },
-  "common_buttons_openInTab": {
-    "message": "Open in tab",
-    "description": "Translation key: buttons_openInTab"
-  },
-  "common_buttons_settings": {
-    "message": "Settings",
-    "description": "Translation key: buttons_settings"
-  },
-  "common_errorBoundary_title": {
-    "message": "Oops, something went wrong",
-    "description": "Translation key: errorBoundary_title"
-  },
-  "common_errorBoundary_description": {
-    "message": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
-    "description": "Translation key: errorBoundary_description"
-  },
-  "common_errorBoundary_refresh": {
-    "message": "Refresh App",
-    "description": "Translation key: errorBoundary_refresh"
-  },
-  "common_errorBoundary_retry": {
-    "message": "Retry",
-    "description": "Translation key: errorBoundary_retry"
-  },
-  "common_pageErrorBoundary_title": {
-    "message": "This feature has encountered an error",
-    "description": "Translation key: pageErrorBoundary_title"
-  },
-  "common_pageErrorBoundary_description": {
-    "message": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu.",
-    "description": "Translation key: pageErrorBoundary_description"
-  }
-}
diff --git a/utils/chromeI18n.ts b/utils/chromeI18n.ts
index e40f6da..d275b01 100644
--- a/utils/chromeI18n.ts
+++ b/utils/chromeI18n.ts
@@ -18,27 +18,6 @@ export function getMessage(msgId: string, substitutions?: string[]): string {
   }
 }
 
-/**
- * 获取当前浏览器语言
- * @returns 语言代码（如 'zh', 'en'）
- */
-export function getLanguage(): string {
-  const lang = chrome.i18n.getUILanguage();
-  return lang.toLowerCase().startsWith('zh') ? 'zh' : 'en';
-}
-
-/**
- * 支持的语言列表
- */
-export const SUPPORTED_LANGUAGES: readonly ('zh' | 'en')[] = ['zh', 'en'] as const;
-
-/**
- * 规范化语言代码
- */
-export function normalizeLanguage(lng: string): 'zh' | 'en' {
-  return lng.toLowerCase().startsWith('zh') ? 'zh' : 'en';
-}
-
 /**
  * react-i18next 兼容的 Hook
  * 返回 t 函数和相关信息
@@ -82,7 +61,7 @@ export function useI18n(namespace?: string | string[]) {
   return {
     t,
     i18n: {
-      language: getLanguage(),
+      language: 'zh',
       changeLanguage: (_lng?: string) => {
         // chrome.i18n 无法动态切换语言，需要刷新页面
         console.warn('[chrome.i18n] 无法动态切换语言，需要刷新页面');
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 638cd37..abe63e7 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -3,11 +3,9 @@ import { afterEach, beforeEach, vi } from 'vitest';
 import React from 'react';
 
 // Load actual zh translations for getMessage mock
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const zhMessages: Record<
-  string,
-  { message: string }
-> = require('./public/_locales/zh/messages.json');
+const zhMessages: Record<string, { message: string }> =
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  require('./public/_locales/zh/messages.json');
 
 vi.mock('@/utils/chromeI18n', () => ({
   useI18n: (ns?: string | string[]) => ({
@@ -37,8 +35,6 @@ vi.mock('@/utils/chromeI18n', () => ({
   }),
   getMessage: (msgId: string) => zhMessages[msgId]?.message ?? msgId,
   getLanguage: () => 'zh',
-  normalizeLanguage: (lng: string) => (lng.startsWith('zh') ? 'zh' : 'en'),
-  SUPPORTED_LANGUAGES: ['zh', 'en'],
   preloadNamespaces: vi.fn().mockResolvedValue(undefined),
 }));
 

From 08911d4cbad184b05094eb78b79c3360318e0091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 19:48:38 +0800
Subject: [PATCH 30/71] =?UTF-8?q?chore:=20=E6=B8=85=E7=90=86=E6=9C=AA?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=20i18n=20key=EF=BC=88322=20?=
 =?UTF-8?q?=E2=86=92=20245=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除 77 个未被源码引用的翻译 key，包括：
- jsonFormat_* (17): 未接入的子模式标题和按钮
- buttons_* (15): 代码使用 common: 命名空间格式，直接 key 未引用
- qrCode_* (14): 未使用的页面标题和状态提示
- timestamp/common/storageCleaner/jsonDiff 等零散未用 key

保留了通过模板字面量动态引用的 key（storageCleaner_options_*、common_buttons_themeMode_*、jsonFormat_*InputPlaceholder 等）。

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 public/_locales/zh/messages.json | 308 -------------------------------
 1 file changed, 308 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index a0386d2..9063a45 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -1,20 +1,4 @@
 {
-  "appName": {
-    "message": "测试工具",
-    "description": "Translation key: appName"
-  },
-  "buttons_save": {
-    "message": "保存",
-    "description": "Translation key: buttons_save"
-  },
-  "buttons_cancel": {
-    "message": "取消",
-    "description": "Translation key: buttons_cancel"
-  },
-  "buttons_confirm": {
-    "message": "确认",
-    "description": "Translation key: buttons_confirm"
-  },
   "buttons_copy": {
     "message": "复制",
     "description": "Translation key: buttons_copy"
@@ -23,54 +7,6 @@
     "message": "清理",
     "description": "Translation key: buttons_clear"
   },
-  "buttons_refresh": {
-    "message": "刷新",
-    "description": "Translation key: buttons_refresh"
-  },
-  "buttons_toggleLanguage": {
-    "message": "切换语言",
-    "description": "Translation key: buttons_toggleLanguage"
-  },
-  "buttons_toggleTheme": {
-    "message": "切换主题",
-    "description": "Translation key: buttons_toggleTheme"
-  },
-  "buttons_themeMode_light": {
-    "message": "切换到深色模式",
-    "description": "Translation key: buttons_themeMode_light"
-  },
-  "buttons_themeMode_dark": {
-    "message": "切换到系统模式",
-    "description": "Translation key: buttons_themeMode_dark"
-  },
-  "buttons_themeMode_system": {
-    "message": "切换到浅色模式",
-    "description": "Translation key: buttons_themeMode_system"
-  },
-  "buttons_search": {
-    "message": "搜索工具...",
-    "description": "Translation key: buttons_search"
-  },
-  "buttons_back": {
-    "message": "返回",
-    "description": "Translation key: buttons_back"
-  },
-  "buttons_clearSearch": {
-    "message": "清除搜索",
-    "description": "Translation key: buttons_clearSearch"
-  },
-  "buttons_recentSearch": {
-    "message": "最近搜索",
-    "description": "Translation key: buttons_recentSearch"
-  },
-  "buttons_noResults": {
-    "message": "未找到相关工具",
-    "description": "Translation key: buttons_noResults"
-  },
-  "buttons_openInTab": {
-    "message": "在标签页打开",
-    "description": "Translation key: buttons_openInTab"
-  },
   "buttons_settings": {
     "message": "设置",
     "description": "Translation key: buttons_settings"
@@ -223,10 +159,6 @@
     "message": "Base64 转换器",
     "description": "Translation key: base64Converter_pageTitle"
   },
-  "base64Converter_pageSubtitle": {
-    "message": "文本、文件与图像的 Base64 编码与解码",
-    "description": "Translation key: base64Converter_pageSubtitle"
-  },
   "base64Converter_textMode": {
     "message": "文本",
     "description": "Translation key: base64Converter_textMode"
@@ -363,10 +295,6 @@
     "message": "HTML 转 Markdown",
     "description": "Translation key: htmlToMarkdown_pageTitle"
   },
-  "htmlToMarkdown_pageSubtitle": {
-    "message": "实时将 HTML 转换为 Markdown 格式",
-    "description": "Translation key: htmlToMarkdown_pageSubtitle"
-  },
   "htmlToMarkdown_splitMode": {
     "message": "分屏",
     "description": "Translation key: htmlToMarkdown_splitMode"
@@ -403,10 +331,6 @@
     "message": "{{count}} 字符",
     "description": "Translation key: htmlToMarkdown_charCount"
   },
-  "htmlToMarkdown_copyMarkdown": {
-    "message": "复制 Markdown",
-    "description": "Translation key: htmlToMarkdown_copyMarkdown"
-  },
   "htmlToMarkdown_download": {
     "message": "下载",
     "description": "Translation key: htmlToMarkdown_download"
@@ -419,10 +343,6 @@
     "message": "JSON 差异比较",
     "description": "Translation key: jsonDiff_pageTitle"
   },
-  "jsonDiff_pageSubtitle": {
-    "message": "对比两个 JSON 数据的差异",
-    "description": "Translation key: jsonDiff_pageSubtitle"
-  },
   "jsonDiff_leftPlaceholder": {
     "message": "输入原始 JSON...",
     "description": "Translation key: jsonDiff_leftPlaceholder"
@@ -439,14 +359,6 @@
     "message": "目标 JSON",
     "description": "Translation key: jsonDiff_rightLabel"
   },
-  "jsonDiff_compareButton": {
-    "message": "比较",
-    "description": "Translation key: jsonDiff_compareButton"
-  },
-  "jsonDiff_clearButton": {
-    "message": "清空",
-    "description": "Translation key: jsonDiff_clearButton"
-  },
   "jsonDiff_sideBySideMode": {
     "message": "并排",
     "description": "Translation key: jsonDiff_sideBySideMode"
@@ -467,10 +379,6 @@
     "message": "无差异",
     "description": "Translation key: jsonDiff_noDiffs"
   },
-  "jsonDiff_diffCount": {
-    "message": "{{count}} 处差异",
-    "description": "Translation key: jsonDiff_diffCount"
-  },
   "jsonDiff_invalidJson": {
     "message": "无效的 JSON 格式",
     "description": "Translation key: jsonDiff_invalidJson"
@@ -495,58 +403,22 @@
     "message": "修改",
     "description": "Translation key: jsonDiff_modified"
   },
-  "jsonFormat_formatTitle": {
-    "message": "JSON 格式化",
-    "description": "Translation key: jsonFormat_formatTitle"
-  },
-  "jsonFormat_formatSubtitle": {
-    "message": "美化和格式化 JSON 数据",
-    "description": "Translation key: jsonFormat_formatSubtitle"
-  },
   "jsonFormat_inputPlaceholder": {
     "message": "输入需要格式化的 JSON...",
     "description": "Translation key: jsonFormat_inputPlaceholder"
   },
-  "jsonFormat_formatButton": {
-    "message": "格式化",
-    "description": "Translation key: jsonFormat_formatButton"
-  },
-  "jsonFormat_clearButton": {
-    "message": "清空",
-    "description": "Translation key: jsonFormat_clearButton"
-  },
   "jsonFormat_sortKeys": {
     "message": "键名排序",
     "description": "Translation key: jsonFormat_sortKeys"
   },
-  "jsonFormat_sortKeysTooltip": {
-    "message": "按字母顺序对 JSON 对象键进行排序",
-    "description": "Translation key: jsonFormat_sortKeysTooltip"
-  },
   "jsonFormat_indentSize": {
     "message": "缩进",
     "description": "Translation key: jsonFormat_indentSize"
   },
-  "jsonFormat_indentSpaces": {
-    "message": "{{count}} 个空格",
-    "description": "Translation key: jsonFormat_indentSpaces"
-  },
   "jsonFormat_outputLabel": {
     "message": "格式化结果",
     "description": "Translation key: jsonFormat_outputLabel"
   },
-  "jsonFormat_copySuccess": {
-    "message": "复制成功",
-    "description": "Translation key: jsonFormat_copySuccess"
-  },
-  "jsonFormat_copyFail": {
-    "message": "复制失败",
-    "description": "Translation key: jsonFormat_copyFail"
-  },
-  "jsonFormat_noContent": {
-    "message": "无内容可复制",
-    "description": "Translation key: jsonFormat_noContent"
-  },
   "jsonFormat_invalidJson": {
     "message": "无效的 JSON 格式",
     "description": "Translation key: jsonFormat_invalidJson"
@@ -587,14 +459,6 @@
     "message": "压缩",
     "description": "Translation key: jsonFormat_minifyMode"
   },
-  "jsonFormat_yamlTitle": {
-    "message": "JSON 转 YAML",
-    "description": "Translation key: jsonFormat_yamlTitle"
-  },
-  "jsonFormat_yamlSubtitle": {
-    "message": "将 JSON 数据转换为 YAML 格式",
-    "description": "Translation key: jsonFormat_yamlSubtitle"
-  },
   "jsonFormat_yamlModeInputPlaceholder": {
     "message": "输入需要转换的 JSON...",
     "description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
@@ -607,18 +471,6 @@
     "message": "输入 JSON 后点击转换",
     "description": "Translation key: jsonFormat_yamlModeEmptyHint"
   },
-  "jsonFormat_convertButton": {
-    "message": "转换",
-    "description": "Translation key: jsonFormat_convertButton"
-  },
-  "jsonFormat_tomlTitle": {
-    "message": "JSON 转 TOML",
-    "description": "Translation key: jsonFormat_tomlTitle"
-  },
-  "jsonFormat_tomlSubtitle": {
-    "message": "将 JSON 数据转换为 TOML 格式",
-    "description": "Translation key: jsonFormat_tomlSubtitle"
-  },
   "jsonFormat_tomlModeInputPlaceholder": {
     "message": "输入需要转换的 JSON...",
     "description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
@@ -631,14 +483,6 @@
     "message": "输入 JSON 后点击转换",
     "description": "Translation key: jsonFormat_tomlModeEmptyHint"
   },
-  "jsonFormat_minifyTitle": {
-    "message": "JSON 压缩",
-    "description": "Translation key: jsonFormat_minifyTitle"
-  },
-  "jsonFormat_minifySubtitle": {
-    "message": "将 JSON 压缩为紧凑的单行格式",
-    "description": "Translation key: jsonFormat_minifySubtitle"
-  },
   "jsonFormat_minifyModeInputPlaceholder": {
     "message": "输入需要压缩的 JSON...",
     "description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
@@ -651,18 +495,10 @@
     "message": "输入 JSON 后点击压缩",
     "description": "Translation key: jsonFormat_minifyModeEmptyHint"
   },
-  "jsonFormat_minifyButton": {
-    "message": "压缩",
-    "description": "Translation key: jsonFormat_minifyButton"
-  },
   "jwt_pageTitle": {
     "message": "JWT 解析",
     "description": "Translation key: jwt_pageTitle"
   },
-  "jwt_pageSubtitle": {
-    "message": "JSON Web Token 解码与查看",
-    "description": "Translation key: jwt_pageSubtitle"
-  },
   "jwt_placeholder": {
     "message": "在此粘贴 JWT 令牌 (Encoded JWT)...",
     "description": "Translation key: jwt_placeholder"
@@ -711,10 +547,6 @@
     "message": "Markdown 转 HTML",
     "description": "Translation key: markdownToHtml_pageTitle"
   },
-  "markdownToHtml_pageSubtitle": {
-    "message": "实时将 Markdown 转换为 HTML 并预览",
-    "description": "Translation key: markdownToHtml_pageSubtitle"
-  },
   "markdownToHtml_splitMode": {
     "message": "分屏",
     "description": "Translation key: markdownToHtml_splitMode"
@@ -759,34 +591,10 @@
     "message": "{{count}} 字符",
     "description": "Translation key: markdownToHtml_charCount"
   },
-  "markdownToHtml_copyHtml": {
-    "message": "复制 HTML",
-    "description": "Translation key: markdownToHtml_copyHtml"
-  },
-  "markdownToHtml_downloadSuccess": {
-    "message": "文件下载成功",
-    "description": "Translation key: markdownToHtml_downloadSuccess"
-  },
-  "markdownToHtml_printSuccess": {
-    "message": "打印窗口已打开",
-    "description": "Translation key: markdownToHtml_printSuccess"
-  },
   "qrCode_pageTitle": {
     "message": "二维码工具",
     "description": "Translation key: qrCode_pageTitle"
   },
-  "qrCode_pageSubtitle": {
-    "message": "生成和解析二维码",
-    "description": "Translation key: qrCode_pageSubtitle"
-  },
-  "qrCode_generateMode": {
-    "message": "生成二维码",
-    "description": "Translation key: qrCode_generateMode"
-  },
-  "qrCode_parseMode": {
-    "message": "解析二维码",
-    "description": "Translation key: qrCode_parseMode"
-  },
   "qrCode_urlToQr": {
     "message": "文本转二维码",
     "description": "Translation key: qrCode_urlToQr"
@@ -803,10 +611,6 @@
     "message": "请输入 URL 或文本内容，将自动生成二维码",
     "description": "Translation key: qrCode_urlInputPlaceholder"
   },
-  "qrCode_generateButton": {
-    "message": "生成二维码",
-    "description": "Translation key: qrCode_generateButton"
-  },
   "qrCode_generating": {
     "message": "生成中...",
     "description": "Translation key: qrCode_generating"
@@ -823,10 +627,6 @@
     "message": "复制二维码",
     "description": "Translation key: qrCode_copyQrButton"
   },
-  "qrCode_qrCodeSuccess": {
-    "message": "二维码生成成功",
-    "description": "Translation key: qrCode_qrCodeSuccess"
-  },
   "qrCode_qrCodeDownloadSuccess": {
     "message": "二维码下载成功",
     "description": "Translation key: qrCode_qrCodeDownloadSuccess"
@@ -835,10 +635,6 @@
     "message": "二维码已复制到剪贴板",
     "description": "Translation key: qrCode_qrCodeCopySuccess"
   },
-  "qrCode_selectImage": {
-    "message": "请选择二维码图片",
-    "description": "Translation key: qrCode_selectImage"
-  },
   "qrCode_parseSuccess": {
     "message": "二维码解析成功",
     "description": "Translation key: qrCode_parseSuccess"
@@ -851,10 +647,6 @@
     "message": "解析二维码失败，请重试",
     "description": "Translation key: qrCode_parseError"
   },
-  "qrCode_generateError": {
-    "message": "生成二维码失败，请检查输入内容",
-    "description": "Translation key: qrCode_generateError"
-  },
   "qrCode_copyError": {
     "message": "复制失败，请重试",
     "description": "Translation key: qrCode_copyError"
@@ -879,42 +671,14 @@
     "message": "支持 PNG、JPG、WEBP、Base64 格式",
     "description": "Translation key: qrCode_supportFormats"
   },
-  "qrCode_parseButton": {
-    "message": "解析二维码",
-    "description": "Translation key: qrCode_parseButton"
-  },
-  "qrCode_parsing": {
-    "message": "解析中...",
-    "description": "Translation key: qrCode_parsing"
-  },
   "qrCode_resultLabel": {
     "message": "解析结果",
     "description": "Translation key: qrCode_resultLabel"
   },
-  "qrCode_copyTooltip": {
-    "message": "复制",
-    "description": "Translation key: qrCode_copyTooltip"
-  },
-  "qrCode_enterUrlError": {
-    "message": "请输入 URL 或文本",
-    "description": "Translation key: qrCode_enterUrlError"
-  },
   "qrCode_clickToChange": {
     "message": "点击更换图片",
     "description": "Translation key: qrCode_clickToChange"
   },
-  "qrCode_pasteHint": {
-    "message": "支持 Ctrl+V 粘贴图片或 Base64 字符串",
-    "description": "Translation key: qrCode_pasteHint"
-  },
-  "qrCode_autoGenerateHint": {
-    "message": "输入内容后将自动生成二维码",
-    "description": "Translation key: qrCode_autoGenerateHint"
-  },
-  "qrCode_autoParseHint": {
-    "message": "上传图片后将自动解析二维码",
-    "description": "Translation key: qrCode_autoParseHint"
-  },
   "rightClickRestorer_loading": {
     "message": "正在加载...",
     "description": "Translation key: rightClickRestorer_loading"
@@ -955,10 +719,6 @@
     "message": "存储清理",
     "description": "Translation key: storageCleaner_pageTitle"
   },
-  "storageCleaner_pageSubtitle": {
-    "message": "清理缓存、Cookies 及本地存储",
-    "description": "Translation key: storageCleaner_pageSubtitle"
-  },
   "storageCleaner_loading": {
     "message": "加载中...",
     "description": "Translation key: storageCleaner_loading"
@@ -967,10 +727,6 @@
     "message": "正在读取站点数据...",
     "description": "Translation key: storageCleaner_initializing"
   },
-  "storageCleaner_occupied": {
-    "message": "已占用 {{size}}",
-    "description": "Translation key: storageCleaner_occupied"
-  },
   "storageCleaner_cleaning": {
     "message": "正在清理...",
     "description": "Translation key: storageCleaner_cleaning"
@@ -987,22 +743,10 @@
     "message": "全选所有项",
     "description": "Translation key: storageCleaner_selectAll"
   },
-  "storageCleaner_cleanSuccess": {
-    "message": "清理完成",
-    "description": "Translation key: storageCleaner_cleanSuccess"
-  },
-  "storageCleaner_cleanError": {
-    "message": "清理失败",
-    "description": "Translation key: storageCleaner_cleanError"
-  },
   "storageCleaner_noData": {
     "message": "无数据",
     "description": "Translation key: storageCleaner_noData"
   },
-  "storageCleaner_countUnit": {
-    "message": "个",
-    "description": "Translation key: storageCleaner_countUnit"
-  },
   "storageCleaner_errorNoTab": {
     "message": "无法获取当前标签页",
     "description": "Translation key: storageCleaner_errorNoTab"
@@ -1075,10 +819,6 @@
     "message": "文本统计",
     "description": "Translation key: textStatistics_pageTitle"
   },
-  "textStatistics_pageSubtitle": {
-    "message": "实时分析文本的字符、单词、行数及字节大小",
-    "description": "Translation key: textStatistics_pageSubtitle"
-  },
   "textStatistics_placeholder": {
     "message": "在此输入或粘贴文本...",
     "description": "Translation key: textStatistics_placeholder"
@@ -1103,10 +843,6 @@
     "message": "时间戳转换",
     "description": "Translation key: timestamp_pageTitle"
   },
-  "timestamp_pageSubtitle": {
-    "message": "Unix 毫秒数转换与格式化",
-    "description": "Translation key: timestamp_pageSubtitle"
-  },
   "timestamp_tsToDate": {
     "message": "时间戳 → 日期",
     "description": "Translation key: timestamp_tsToDate"
@@ -1127,14 +863,6 @@
     "message": "毫秒 (ms)",
     "description": "Translation key: timestamp_unitMs"
   },
-  "timestamp_unitS": {
-    "message": "秒 (s)",
-    "description": "Translation key: timestamp_unitS"
-  },
-  "timestamp_convertButton": {
-    "message": "立即转换",
-    "description": "Translation key: timestamp_convertButton"
-  },
   "timestamp_currentTs": {
     "message": "当前时间戳",
     "description": "Translation key: timestamp_currentTs"
@@ -1179,50 +907,14 @@
     "message": "请输入并点击转换",
     "description": "Translation key: timestamp_resultEmpty"
   },
-  "timestamp_errors_invalidNumber": {
-    "message": "无效数字",
-    "description": "Translation key: timestamp_errors_invalidNumber"
-  },
-  "timestamp_errors_invalidTimestamp": {
-    "message": "无效时间戳",
-    "description": "Translation key: timestamp_errors_invalidTimestamp"
-  },
-  "timestamp_errors_invalidFormat": {
-    "message": "格式错误",
-    "description": "Translation key: timestamp_errors_invalidFormat"
-  },
-  "common_buttons_save": {
-    "message": "保存",
-    "description": "Translation key: buttons_save"
-  },
   "common_buttons_cancel": {
     "message": "取消",
     "description": "Translation key: buttons_cancel"
   },
-  "common_buttons_confirm": {
-    "message": "确认",
-    "description": "Translation key: buttons_confirm"
-  },
   "common_buttons_copy": {
     "message": "复制",
     "description": "Translation key: buttons_copy"
   },
-  "common_buttons_clear": {
-    "message": "清理",
-    "description": "Translation key: buttons_clear"
-  },
-  "common_buttons_refresh": {
-    "message": "刷新",
-    "description": "Translation key: buttons_refresh"
-  },
-  "common_buttons_toggleLanguage": {
-    "message": "切换语言",
-    "description": "Translation key: buttons_toggleLanguage"
-  },
-  "common_buttons_toggleTheme": {
-    "message": "切换主题",
-    "description": "Translation key: buttons_toggleTheme"
-  },
   "common_buttons_themeMode_light": {
     "message": "切换到深色模式",
     "description": "Translation key: buttons_themeMode_light"

From b79fe7dd497a7bb6d54c13ab21ea3749a0106abd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 20:20:45 +0800
Subject: [PATCH 31/71] refactor: reorganize directory structure into src/
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move all source code directories into src/ for cleaner project structure:
- pages/, components/, utils/, config/, providers/, types/, lib/, assets/, entrypoints/ → src/
- Use WXT srcDir config to resolve @/ alias to src/
- Update tsconfig, vitest, eslint, tailwind configs
- Remove scattered README.md files from subdirectories
- Update documentation (AGENTS.md, CODING_STANDARDS.md, README.md)
- Fix pre-existing lint error in RouterProvider.tsx

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/CODING_STANDARDS.md                   |  67 +++++----
 AGENTS.md                                     |  42 +++---
 README.md                                     |  38 ++---
 components/README.md                          |  27 ----
 components/ui/README.md                       |  40 -----
 config/README.md                              |  44 ------
 entrypoints/README.md                         |  51 -------
 eslint.config.ts                              |   9 +-
 lib/README.md                                 |  26 ----
 pages/README.md                               | 140 ------------------
 providers/README.md                           |  63 --------
 public/README.md                              |  20 ---
 src/README.md                                 |  24 ---
 {assets => src/assets}/react.svg              |   0
 {components => src/components}/CopyButton.tsx |   0
 .../components}/DecodeResultPaper.tsx         |   0
 .../components}/ErrorBoundary.tsx             |   0
 .../components}/GlobalSnackbar.tsx            |   0
 .../components}/ImageUploader.tsx             |   0
 .../components}/PageErrorBoundary.tsx         |   0
 .../components}/PageSkeleton.tsx              |   0
 .../components}/QrCodePreview.tsx             |   0
 .../components}/RouterContainer.tsx           |   0
 .../components}/SwitchButtonGroup.tsx         |   0
 .../components}/TextInputArea.tsx             |   0
 {components => src/components}/TopBar.tsx     |   0
 .../__tests__/DecodeResultPaper.test.tsx      |   0
 .../__tests__/ErrorBoundary.test.tsx          |   0
 .../__tests__/GlobalSnackbar.test.tsx         |   0
 .../__tests__/ImageUploader.test.tsx          |   0
 .../__tests__/PageErrorBoundary.test.tsx      |   0
 .../__tests__/PageSkeleton.test.tsx           |   0
 .../__tests__/QrCodePreview.test.tsx          |   0
 .../__tests__/RouterContainer.test.tsx        |   0
 .../__tests__/StorageCleanerConfirm.test.tsx  |   0
 .../__tests__/SwitchButtonGroup.test.tsx      |   0
 .../__tests__/TextInputArea.test.tsx          |   0
 .../components}/__tests__/ToolCard.test.tsx   |   0
 .../components}/__tests__/TopBar.test.tsx     |   0
 {components => src/components}/ui/badge.tsx   |   0
 {components => src/components}/ui/button.tsx  |   0
 .../components}/ui/checkbox.tsx               |   0
 {components => src/components}/ui/dialog.tsx  |   0
 {components => src/components}/ui/input.tsx   |   0
 {components => src/components}/ui/label.tsx   |   0
 {components => src/components}/ui/select.tsx  |   0
 {components => src/components}/ui/switch.tsx  |   0
 .../config}/__tests__/features.test.ts        |   0
 {config => src/config}/features.tsx           |   0
 .../entrypoints}/__tests__/background.test.ts |   0
 .../entrypoints}/background.ts                |   2 +-
 {entrypoints => src/entrypoints}/content.ts   |   2 +-
 .../content/contextMenuHandler.ts             |   0
 .../entrypoints}/content/messageHandler.ts    |   0
 .../entrypoints}/content/uiPopover.ts         |   0
 .../entrypoints}/options/App.tsx              |   0
 .../options/__tests__/App.test.tsx            |   0
 .../entrypoints}/options/index.html           |   0
 .../entrypoints}/options/main.tsx             |   2 +-
 .../entrypoints}/popup/App.tsx                |   0
 .../entrypoints}/popup/index.html             |   0
 .../entrypoints}/popup/main.tsx               |   2 +-
 .../rightClickRestorer.content.ts             |   0
 .../entrypoints}/sidepanel/App.tsx            |   0
 .../entrypoints}/sidepanel/index.html         |   0
 .../entrypoints}/sidepanel/main.tsx           |   2 +-
 {lib => src/lib}/utils.ts                     |   0
 .../Base64ConverterSection.tsx                |   0
 .../pages}/Base64Converter/TextMode.tsx       |   0
 .../__tests__/TextMode.test.tsx               |   0
 .../Base64Converter/__tests__/index.test.tsx  |   0
 .../pages}/Base64Converter/index.tsx          |   0
 .../Base64Converter/useBase64Converter.ts     |   0
 {pages => src/pages}/Dashboard/ToolCard.tsx   |   0
 {pages => src/pages}/Dashboard/index.tsx      |   0
 {pages => src/pages}/HtmlToMarkdown/index.tsx |   0
 .../pages}/JsonTools/DiffNavigator.tsx        |   0
 {pages => src/pages}/JsonTools/DiffResult.tsx |   0
 .../pages}/JsonTools/JsonConvertSection.tsx   |   0
 .../pages}/JsonTools/JsonDiffInput.tsx        |   0
 .../pages}/JsonTools/JsonFormatSection.tsx    |   0
 {pages => src/pages}/JsonTools/JsonTree.tsx   |   0
 {pages => src/pages}/JsonTools/diffEngine.ts  |   0
 {pages => src/pages}/JsonTools/index.tsx      |   0
 {pages => src/pages}/JsonTools/types.ts       |   0
 {pages => src/pages}/Jwt/index.tsx            |   0
 {pages => src/pages}/MarkdownToHtml/index.tsx |   0
 .../pages}/QrCode/__tests__/index.test.tsx    |   0
 .../QrCode/components/GeneratePanel.tsx       |   0
 .../pages}/QrCode/components/ParsePanel.tsx   |   0
 .../pages}/QrCode/contexts/QrCodeContext.ts   |   0
 .../pages}/QrCode/hooks/useQrCode.ts          |   0
 {pages => src/pages}/QrCode/index.tsx         |   0
 {pages => src/pages}/QrCode/types.ts          |   0
 .../__tests__/index.test.tsx                  |   0
 .../__tests__/useRightClickRestorer.test.ts   |   0
 .../pages}/RightClickRestorer/index.tsx       |   0
 .../useRightClickRestorer.ts                  |   0
 .../StorageCleaner/AutoRefreshToggle.tsx      |   0
 .../pages}/StorageCleaner/CleaningResult.tsx  |   0
 .../pages}/StorageCleaner/ErrorDisplay.tsx    |   0
 .../pages}/StorageCleaner/OptionItem.tsx      |   0
 .../StorageCleaner/StorageCleanerConfirm.tsx  |   0
 .../StorageCleaner/StorageOptionsGrid.tsx     |   0
 {pages => src/pages}/StorageCleaner/index.tsx |   0
 .../StorageCleaner/useStorageCleaner.ts       |   0
 {pages => src/pages}/TextStatistics/index.tsx |   0
 {pages => src/pages}/Timestamp/LiveClock.tsx  |   0
 {pages => src/pages}/Timestamp/ResultView.tsx |   0
 {pages => src/pages}/Timestamp/constants.ts   |   0
 {pages => src/pages}/Timestamp/index.tsx      |   0
 .../pages}/Timestamp/useTimestampConverter.ts |   0
 {providers => src/providers}/AppRoot.tsx      |   0
 .../providers}/RouterProvider.tsx             |   3 +-
 .../providers}/ThemeModeProvider.tsx          |   0
 .../__tests__/RouterProvider.test.tsx         |   0
 {types => src/types}/qrious.d.ts              |   0
 {types => src/types}/storage.d.ts             |   0
 .../utils}/__tests__/base64Converter.test.ts  |   0
 .../utils}/__tests__/chromeStorage.test.ts    |   0
 .../utils}/__tests__/chromeTabs.test.ts       |   0
 .../utils}/__tests__/clipboard.test.ts        |   0
 .../utils}/__tests__/contextMenu.test.ts      |   0
 {utils => src/utils}/__tests__/dayjs.test.ts  |   0
 .../utils}/__tests__/diffEngine.test.ts       |   0
 {utils => src/utils}/__tests__/format.test.ts |   0
 .../utils}/__tests__/htmlToMarkdown.test.ts   |   0
 .../utils}/__tests__/jsonFormatter.test.ts    |   0
 .../utils}/__tests__/jsonMinify.test.ts       |   0
 .../utils}/__tests__/jsonToToml.test.ts       |   0
 .../utils}/__tests__/jsonToYaml.test.ts       |   0
 {utils => src/utils}/__tests__/jwt.test.ts    |   0
 .../utils}/__tests__/markdownToHtml.test.ts   |   0
 .../utils}/__tests__/messages.test.ts         |   0
 .../utils}/__tests__/qrCodeParser.test.ts     |   0
 .../utils}/__tests__/storageCleaner.test.ts   |   0
 .../utils}/__tests__/textStatistics.test.ts   |   0
 .../__tests__/useContextMenuData.test.ts      |   0
 .../utils}/__tests__/useStorageState.test.ts  |   0
 {utils => src/utils}/base64Converter.ts       |   0
 {utils => src/utils}/chromeI18n.ts            |   0
 {utils => src/utils}/chromeStorage.ts         |   0
 {utils => src/utils}/chromeTabs.ts            |   0
 {utils => src/utils}/clipboard.ts             |   0
 {utils => src/utils}/contextMenu.ts           |   0
 {utils => src/utils}/dayjs.ts                 |   0
 {utils => src/utils}/format.ts                |   0
 {utils => src/utils}/htmlToMarkdown.ts        |   0
 {utils => src/utils}/jsonFormatter.ts         |   0
 {utils => src/utils}/jsonToToml.ts            |   0
 {utils => src/utils}/jsonToYaml.ts            |   0
 {utils => src/utils}/jwt.ts                   |   0
 {utils => src/utils}/markdownToHtml.ts        |   0
 {utils => src/utils}/messages.ts              |   0
 {utils => src/utils}/qrCodeParser.ts          |   0
 {utils => src/utils}/storageCleaner.ts        |   0
 {utils => src/utils}/textStatistics.ts        |   0
 {utils => src/utils}/useContextMenuData.ts    |   0
 {utils => src/utils}/useDebounce.ts           |   0
 {utils => src/utils}/useStorageState.ts       |   0
 tailwind.config.js                            |   9 +-
 tsconfig.json                                 |  17 +--
 types/README.md                               |  42 ------
 utils/README.md                               |  42 ------
 vitest.config.ts                              |   2 +-
 wxt.config.ts                                 |   1 +
 166 files changed, 86 insertions(+), 631 deletions(-)
 delete mode 100644 components/README.md
 delete mode 100644 components/ui/README.md
 delete mode 100644 config/README.md
 delete mode 100644 entrypoints/README.md
 delete mode 100644 lib/README.md
 delete mode 100644 pages/README.md
 delete mode 100644 providers/README.md
 delete mode 100644 public/README.md
 delete mode 100644 src/README.md
 rename {assets => src/assets}/react.svg (100%)
 rename {components => src/components}/CopyButton.tsx (100%)
 rename {components => src/components}/DecodeResultPaper.tsx (100%)
 rename {components => src/components}/ErrorBoundary.tsx (100%)
 rename {components => src/components}/GlobalSnackbar.tsx (100%)
 rename {components => src/components}/ImageUploader.tsx (100%)
 rename {components => src/components}/PageErrorBoundary.tsx (100%)
 rename {components => src/components}/PageSkeleton.tsx (100%)
 rename {components => src/components}/QrCodePreview.tsx (100%)
 rename {components => src/components}/RouterContainer.tsx (100%)
 rename {components => src/components}/SwitchButtonGroup.tsx (100%)
 rename {components => src/components}/TextInputArea.tsx (100%)
 rename {components => src/components}/TopBar.tsx (100%)
 rename {components => src/components}/__tests__/DecodeResultPaper.test.tsx (100%)
 rename {components => src/components}/__tests__/ErrorBoundary.test.tsx (100%)
 rename {components => src/components}/__tests__/GlobalSnackbar.test.tsx (100%)
 rename {components => src/components}/__tests__/ImageUploader.test.tsx (100%)
 rename {components => src/components}/__tests__/PageErrorBoundary.test.tsx (100%)
 rename {components => src/components}/__tests__/PageSkeleton.test.tsx (100%)
 rename {components => src/components}/__tests__/QrCodePreview.test.tsx (100%)
 rename {components => src/components}/__tests__/RouterContainer.test.tsx (100%)
 rename {components => src/components}/__tests__/StorageCleanerConfirm.test.tsx (100%)
 rename {components => src/components}/__tests__/SwitchButtonGroup.test.tsx (100%)
 rename {components => src/components}/__tests__/TextInputArea.test.tsx (100%)
 rename {components => src/components}/__tests__/ToolCard.test.tsx (100%)
 rename {components => src/components}/__tests__/TopBar.test.tsx (100%)
 rename {components => src/components}/ui/badge.tsx (100%)
 rename {components => src/components}/ui/button.tsx (100%)
 rename {components => src/components}/ui/checkbox.tsx (100%)
 rename {components => src/components}/ui/dialog.tsx (100%)
 rename {components => src/components}/ui/input.tsx (100%)
 rename {components => src/components}/ui/label.tsx (100%)
 rename {components => src/components}/ui/select.tsx (100%)
 rename {components => src/components}/ui/switch.tsx (100%)
 rename {config => src/config}/__tests__/features.test.ts (100%)
 rename {config => src/config}/features.tsx (100%)
 rename {entrypoints => src/entrypoints}/__tests__/background.test.ts (100%)
 rename {entrypoints => src/entrypoints}/background.ts (99%)
 rename {entrypoints => src/entrypoints}/content.ts (83%)
 rename {entrypoints => src/entrypoints}/content/contextMenuHandler.ts (100%)
 rename {entrypoints => src/entrypoints}/content/messageHandler.ts (100%)
 rename {entrypoints => src/entrypoints}/content/uiPopover.ts (100%)
 rename {entrypoints => src/entrypoints}/options/App.tsx (100%)
 rename {entrypoints => src/entrypoints}/options/__tests__/App.test.tsx (100%)
 rename {entrypoints => src/entrypoints}/options/index.html (100%)
 rename {entrypoints => src/entrypoints}/options/main.tsx (89%)
 rename {entrypoints => src/entrypoints}/popup/App.tsx (100%)
 rename {entrypoints => src/entrypoints}/popup/index.html (100%)
 rename {entrypoints => src/entrypoints}/popup/main.tsx (89%)
 rename {entrypoints => src/entrypoints}/rightClickRestorer.content.ts (100%)
 rename {entrypoints => src/entrypoints}/sidepanel/App.tsx (100%)
 rename {entrypoints => src/entrypoints}/sidepanel/index.html (100%)
 rename {entrypoints => src/entrypoints}/sidepanel/main.tsx (89%)
 rename {lib => src/lib}/utils.ts (100%)
 rename {pages => src/pages}/Base64Converter/Base64ConverterSection.tsx (100%)
 rename {pages => src/pages}/Base64Converter/TextMode.tsx (100%)
 rename {pages => src/pages}/Base64Converter/__tests__/TextMode.test.tsx (100%)
 rename {pages => src/pages}/Base64Converter/__tests__/index.test.tsx (100%)
 rename {pages => src/pages}/Base64Converter/index.tsx (100%)
 rename {pages => src/pages}/Base64Converter/useBase64Converter.ts (100%)
 rename {pages => src/pages}/Dashboard/ToolCard.tsx (100%)
 rename {pages => src/pages}/Dashboard/index.tsx (100%)
 rename {pages => src/pages}/HtmlToMarkdown/index.tsx (100%)
 rename {pages => src/pages}/JsonTools/DiffNavigator.tsx (100%)
 rename {pages => src/pages}/JsonTools/DiffResult.tsx (100%)
 rename {pages => src/pages}/JsonTools/JsonConvertSection.tsx (100%)
 rename {pages => src/pages}/JsonTools/JsonDiffInput.tsx (100%)
 rename {pages => src/pages}/JsonTools/JsonFormatSection.tsx (100%)
 rename {pages => src/pages}/JsonTools/JsonTree.tsx (100%)
 rename {pages => src/pages}/JsonTools/diffEngine.ts (100%)
 rename {pages => src/pages}/JsonTools/index.tsx (100%)
 rename {pages => src/pages}/JsonTools/types.ts (100%)
 rename {pages => src/pages}/Jwt/index.tsx (100%)
 rename {pages => src/pages}/MarkdownToHtml/index.tsx (100%)
 rename {pages => src/pages}/QrCode/__tests__/index.test.tsx (100%)
 rename {pages => src/pages}/QrCode/components/GeneratePanel.tsx (100%)
 rename {pages => src/pages}/QrCode/components/ParsePanel.tsx (100%)
 rename {pages => src/pages}/QrCode/contexts/QrCodeContext.ts (100%)
 rename {pages => src/pages}/QrCode/hooks/useQrCode.ts (100%)
 rename {pages => src/pages}/QrCode/index.tsx (100%)
 rename {pages => src/pages}/QrCode/types.ts (100%)
 rename {pages => src/pages}/RightClickRestorer/__tests__/index.test.tsx (100%)
 rename {pages => src/pages}/RightClickRestorer/__tests__/useRightClickRestorer.test.ts (100%)
 rename {pages => src/pages}/RightClickRestorer/index.tsx (100%)
 rename {pages => src/pages}/RightClickRestorer/useRightClickRestorer.ts (100%)
 rename {pages => src/pages}/StorageCleaner/AutoRefreshToggle.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/CleaningResult.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/ErrorDisplay.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/OptionItem.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/StorageCleanerConfirm.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/StorageOptionsGrid.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/index.tsx (100%)
 rename {pages => src/pages}/StorageCleaner/useStorageCleaner.ts (100%)
 rename {pages => src/pages}/TextStatistics/index.tsx (100%)
 rename {pages => src/pages}/Timestamp/LiveClock.tsx (100%)
 rename {pages => src/pages}/Timestamp/ResultView.tsx (100%)
 rename {pages => src/pages}/Timestamp/constants.ts (100%)
 rename {pages => src/pages}/Timestamp/index.tsx (100%)
 rename {pages => src/pages}/Timestamp/useTimestampConverter.ts (100%)
 rename {providers => src/providers}/AppRoot.tsx (100%)
 rename {providers => src/providers}/RouterProvider.tsx (98%)
 rename {providers => src/providers}/ThemeModeProvider.tsx (100%)
 rename {providers => src/providers}/__tests__/RouterProvider.test.tsx (100%)
 rename {types => src/types}/qrious.d.ts (100%)
 rename {types => src/types}/storage.d.ts (100%)
 rename {utils => src/utils}/__tests__/base64Converter.test.ts (100%)
 rename {utils => src/utils}/__tests__/chromeStorage.test.ts (100%)
 rename {utils => src/utils}/__tests__/chromeTabs.test.ts (100%)
 rename {utils => src/utils}/__tests__/clipboard.test.ts (100%)
 rename {utils => src/utils}/__tests__/contextMenu.test.ts (100%)
 rename {utils => src/utils}/__tests__/dayjs.test.ts (100%)
 rename {utils => src/utils}/__tests__/diffEngine.test.ts (100%)
 rename {utils => src/utils}/__tests__/format.test.ts (100%)
 rename {utils => src/utils}/__tests__/htmlToMarkdown.test.ts (100%)
 rename {utils => src/utils}/__tests__/jsonFormatter.test.ts (100%)
 rename {utils => src/utils}/__tests__/jsonMinify.test.ts (100%)
 rename {utils => src/utils}/__tests__/jsonToToml.test.ts (100%)
 rename {utils => src/utils}/__tests__/jsonToYaml.test.ts (100%)
 rename {utils => src/utils}/__tests__/jwt.test.ts (100%)
 rename {utils => src/utils}/__tests__/markdownToHtml.test.ts (100%)
 rename {utils => src/utils}/__tests__/messages.test.ts (100%)
 rename {utils => src/utils}/__tests__/qrCodeParser.test.ts (100%)
 rename {utils => src/utils}/__tests__/storageCleaner.test.ts (100%)
 rename {utils => src/utils}/__tests__/textStatistics.test.ts (100%)
 rename {utils => src/utils}/__tests__/useContextMenuData.test.ts (100%)
 rename {utils => src/utils}/__tests__/useStorageState.test.ts (100%)
 rename {utils => src/utils}/base64Converter.ts (100%)
 rename {utils => src/utils}/chromeI18n.ts (100%)
 rename {utils => src/utils}/chromeStorage.ts (100%)
 rename {utils => src/utils}/chromeTabs.ts (100%)
 rename {utils => src/utils}/clipboard.ts (100%)
 rename {utils => src/utils}/contextMenu.ts (100%)
 rename {utils => src/utils}/dayjs.ts (100%)
 rename {utils => src/utils}/format.ts (100%)
 rename {utils => src/utils}/htmlToMarkdown.ts (100%)
 rename {utils => src/utils}/jsonFormatter.ts (100%)
 rename {utils => src/utils}/jsonToToml.ts (100%)
 rename {utils => src/utils}/jsonToYaml.ts (100%)
 rename {utils => src/utils}/jwt.ts (100%)
 rename {utils => src/utils}/markdownToHtml.ts (100%)
 rename {utils => src/utils}/messages.ts (100%)
 rename {utils => src/utils}/qrCodeParser.ts (100%)
 rename {utils => src/utils}/storageCleaner.ts (100%)
 rename {utils => src/utils}/textStatistics.ts (100%)
 rename {utils => src/utils}/useContextMenuData.ts (100%)
 rename {utils => src/utils}/useDebounce.ts (100%)
 rename {utils => src/utils}/useStorageState.ts (100%)
 delete mode 100644 types/README.md
 delete mode 100644 utils/README.md

diff --git a/.github/CODING_STANDARDS.md b/.github/CODING_STANDARDS.md
index 8e36816..46c6bee 100644
--- a/.github/CODING_STANDARDS.md
+++ b/.github/CODING_STANDARDS.md
@@ -79,12 +79,12 @@ export function isSupportedImageType(mimeType: string): boolean {
 
 | 场景        | 导出方式                                         | 示例                              |
 | ----------- | ------------------------------------------------ | --------------------------------- |
-| 页面组件    | `export default function ComponentName()`        | `pages/Timestamp/index.tsx`       |
+| 页面组件    | `export default function ComponentName()`        | `src/pages/Timestamp/index.tsx`   |
 | 业务组件    | `const X = React.memo(...)` + `export default X` | `LiveClock.tsx`, `ResultView.tsx` |
-| UI 原子组件 | `React.forwardRef(...)` + `export { X }`         | `components/ui/button.tsx`        |
-| 工具函数    | `export function xxx()`                          | `utils/clipboard.ts`              |
-| 自定义 Hook | `export function useXxx()`                       | `utils/useStorageState.ts`        |
-| 类型/接口   | `export interface` / `export type`               | `types/storage.d.ts`              |
+| UI 原子组件 | `React.forwardRef(...)` + `export { X }`         | `src/components/ui/button.tsx`    |
+| 工具函数    | `export function xxx()`                          | `src/utils/clipboard.ts`          |
+| 自定义 Hook | `export function useXxx()`                       | `src/utils/useStorageState.ts`    |
+| 类型/接口   | `export interface` / `export type`               | `src/types/storage.d.ts`          |
 
 ```typescript
 // ✅ 页面组件 — default export
@@ -473,7 +473,7 @@ import ErrorBoundary from '@/components/ErrorBoundary';
 | 类型        | 命名模式                   | 示例                                                     |
 | ----------- | -------------------------- | -------------------------------------------------------- |
 | 页面目录    | PascalCase                 | `Timestamp/`, `Base64Converter/`, `StorageCleaner/`      |
-| 页面入口    | `index.tsx`                | `pages/Timestamp/index.tsx`                              |
+| 页面入口    | `index.tsx`                | `src/pages/Timestamp/index.tsx`                          |
 | 组件文件    | PascalCase `.tsx`          | `TopBar.tsx`, `LiveClock.tsx`, `ResultView.tsx`          |
 | 自定义 Hook | camelCase `.ts`            | `useTimestampConverter.ts`, `useStorageCleaner.ts`       |
 | 工具函数    | camelCase `.ts`            | `chromeStorage.ts`, `base64Converter.ts`, `clipboard.ts` |
@@ -527,12 +527,12 @@ const handleClean = useCallback(async () => { ... }, []);
 测试文件放在源代码同级的 `__tests__/` 目录下：
 
 ```
-utils/__tests__/jwt.test.ts
-utils/__tests__/base64Converter.test.ts
-utils/__tests__/useStorageState.test.ts
-components/__tests__/SwitchButtonGroup.test.tsx
-components/__tests__/ErrorBoundary.test.tsx
-pages/Timestamp/__tests__/index.test.tsx
+src/utils/__tests__/jwt.test.ts
+src/utils/__tests__/base64Converter.test.ts
+src/utils/__tests__/useStorageState.test.ts
+src/components/__tests__/SwitchButtonGroup.test.tsx
+src/components/__tests__/ErrorBoundary.test.tsx
+src/pages/Timestamp/__tests__/index.test.tsx
 ```
 
 ### 7.2 describe / it 命名
@@ -653,16 +653,16 @@ export function useTimestampConverter(): UseTimestampConverterReturn { ... }
 
 ### 8.2 Hook 存放位置
 
-- **全局通用 Hook**：放在 `utils/` 目录下
+- **全局通用 Hook**：放在 `src/utils/` 目录下
 - **页面专属 Hook**：与页面组件同目录
 
 ```
-utils/useStorageState.ts          — Chrome Storage 状态持久化
-utils/useLazyTranslation.ts       — i18n 懒加载
-utils/useContextMenuData.ts       — 右键菜单数据
-utils/useDebounce.ts              — 防抖
-pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
-pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
+src/utils/useStorageState.ts          — Chrome Storage 状态持久化
+src/utils/useLazyTranslation.ts       — i18n 懒加载
+src/utils/useContextMenuData.ts       — 右键菜单数据
+src/utils/useDebounce.ts              — 防抖
+src/pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
+src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 ```
 
 ---
@@ -767,7 +767,7 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
 ### 11.1 页面组件结构
 
 ```
-pages/FeatureName/
+src/pages/FeatureName/
 ├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
 ├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
 ├── constants.ts           # 常量定义（可选）
@@ -779,20 +779,19 @@ pages/FeatureName/
 
 ### 11.2 目录职责
 
-| 目录             | 职责                                                         |
-| ---------------- | ------------------------------------------------------------ |
-| `config/`        | 应用配置（功能定义、路由映射）                               |
-| `entrypoints/`   | 扩展入口点（popup、options、sidepanel、background、content） |
-| `pages/`         | 功能页面组件（懒加载）                                       |
-| `components/`    | 可复用 UI 组件                                               |
-| `components/ui/` | shadcn/ui 基础组件（button、dialog、select 等）              |
-| `providers/`     | React Context（Router、Theme 等）                            |
-| `hooks/`         | 自定义 React Hooks                                           |
-| `utils/`         | 工具函数与服务抽象                                           |
-| `types/`         | TypeScript 类型声明                                          |
-| `lib/`           | 通用工具函数（cn、utils）                                    |
-| `i18n/`          | 国际化资源                                                   |
-| `public/`        | 静态资源                                                     |
+| 目录                 | 职责                                                         |
+| -------------------- | ------------------------------------------------------------ |
+| `src/config/`        | 应用配置（功能定义、路由映射）                               |
+| `src/entrypoints/`   | 扩展入口点（popup、options、sidepanel、background、content） |
+| `src/pages/`         | 功能页面组件（懒加载）                                       |
+| `src/components/`    | 可复用 UI 组件                                               |
+| `src/components/ui/` | shadcn/ui 基础组件（button、dialog、select 等）              |
+| `src/providers/`     | React Context（Router、Theme 等）                            |
+| `src/hooks/`         | 自定义 React Hooks                                           |
+| `src/utils/`         | 工具函数与服务抽象                                           |
+| `src/types/`         | TypeScript 类型声明                                          |
+| `src/lib/`           | 通用工具函数（cn、utils）                                    |
+| `public/`            | 静态资源                                                     |
 
 ---
 
diff --git a/AGENTS.md b/AGENTS.md
index bdf1672..568c80b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -43,16 +43,18 @@ Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回
 ## 项目结构
 
 ```
-config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
-entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
-pages/                 # 功能页面组件 (懒加载)
-components/            # 可复用 UI 组件
-components/ui/         # shadcn/ui 基础组件 (button, dialog, select 等)
-providers/             # React Context (Router, Theme 等)
-hooks/                 # 自定义 React Hooks
-utils/                 # 工具函数与服务抽象
-types/                 # TypeScript 类型声明
-i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功能独立 JSON)
+src/                   # 源代码根目录
+  config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
+  entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
+  pages/                 # 功能页面组件 (懒加载)
+  components/            # 可复用 UI 组件
+  components/ui/         # shadcn/ui 基础组件 (button, dialog, select 等)
+  providers/             # React Context (Router, Theme 等)
+  hooks/                 # 自定义 React Hooks
+  utils/                 # 工具函数与服务抽象
+  types/                 # TypeScript 类型声明
+  lib/                   # 通用工具函数（cn、utils）
+public/                # 静态资源（图标、_locales 等）
 ```
 
 ### 页面组件模式
@@ -60,7 +62,7 @@ i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功
 典型功能页面遵循 **UI + Hook 分离** 模式：
 
 ```
-pages/FeatureName/
+src/pages/FeatureName/
 ├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
 ├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
 └── constants.ts           # 常量定义
@@ -72,15 +74,15 @@ pages/FeatureName/
 
 ## 关键架构决策
 
-**路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
+**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
 渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
 每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
 
-**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
-使用 `utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
-修改 StorageSchema 时，必须在 `utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
+**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
+使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
+修改 StorageSchema 时，必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
 
-**通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
+**通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
 
 **路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
 
@@ -116,9 +118,9 @@ pages/FeatureName/
 
 ## 新功能开发清单
 
-1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
-2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
-3. 在 `pages/` 创建页面组件 (懒加载)：
+1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
+2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
+3. 在 `src/pages/` 创建页面组件 (懒加载)：
    - `index.tsx` — UI 组件，使用 `useLazyTranslation` 获取翻译
    - `useFeatureName.ts` — 业务逻辑 Hook
    - `constants.ts` — 常量（可选）
@@ -131,7 +133,7 @@ pages/FeatureName/
 - 禁止使用 `any` (测试文件除外)
 - 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
 - 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
-- UI 组件: 优先使用 `components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
+- UI 组件: 优先使用 `src/components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
 - 图标: 使用 `lucide-react` 图标库
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
diff --git a/README.md b/README.md
index 4c56054..8ec821e 100644
--- a/README.md
+++ b/README.md
@@ -84,25 +84,25 @@
 ## 项目结构
 
 ```text
-├── components/           # 可复用 React 组件
-├── config/              # 应用配置
-│   └── features.tsx     # 功能定义与路由映射
-├── entrypoints/         # 扩展程序入口点
-│   ├── popup/           # 点击图标弹出的主界面
-│   ├── options/         # 扩展程序设置页面
-│   ├── sidepanel/       # 浏览器侧边栏集成
-│   ├── background.ts    # 后台 Service Worker
-│   └── content.ts       # 网页注入脚本
-├── pages/               # 各功能模块的页面组件
-├── providers/           # 全局状态提供者 (Router, Theme 等)
-├── hooks/               # 自定义 React Hooks
-├── utils/               # 工具函数与服务抽象
-├── types/               # TypeScript 类型声明
-├── lib/                 # 通用工具函数 (cn, utils 等)
-├── i18n/                # 国际化资源
-├── public/              # 静态资源 (图标、manifest 资源等)
-├── wxt.config.ts        # WXT 框架核心配置
-└── package.json         # 项目元数据与依赖管理
+├── src/                   # 源代码根目录
+│   ├── components/        # 可复用 React 组件
+│   ├── config/            # 应用配置
+│   │   └── features.tsx   # 功能定义与路由映射
+│   ├── entrypoints/       # 扩展程序入口点
+│   │   ├── popup/         # 点击图标弹出的主界面
+│   │   ├── options/       # 扩展程序设置页面
+│   │   ├── sidepanel/     # 浏览器侧边栏集成
+│   │   ├── background.ts  # 后台 Service Worker
+│   │   └── content.ts     # 网页注入脚本
+│   ├── pages/             # 各功能模块的页面组件
+│   ├── providers/         # 全局状态提供者 (Router, Theme 等)
+│   ├── hooks/             # 自定义 React Hooks
+│   ├── utils/             # 工具函数与服务抽象
+│   ├── types/             # TypeScript 类型声明
+│   └── lib/               # 通用工具函数 (cn, utils 等)
+├── public/                # 静态资源 (图标、manifest 资源等)
+├── wxt.config.ts          # WXT 框架核心配置
+└── package.json           # 项目元数据与依赖管理
 ```
 
 ## 开发与部署
diff --git a/components/README.md b/components/README.md
deleted file mode 100644
index abd1286..0000000
--- a/components/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# components/
-
-通用业务组件目录，存放跨页面复用的 UI 组件，与具体工具页面解耦。
-
-## 组件列表
-
-| 组件                    | 用途                                                                           |
-| ----------------------- | ------------------------------------------------------------------------------ |
-| `TopBar.tsx`            | 顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航               |
-| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
-| `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
-| `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
-| `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
-| `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |
-| `QrCodePreview.tsx`     | 二维码预览组件，展示生成的二维码图片，提供复制和下载操作                       |
-| `DecodeResultPaper.tsx` | Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮        |
-| `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式        |
-| `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                 |
-| `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                 |
-| `PageSkeleton.tsx`      | 页面骨架屏，提供 `dashboard` 和 `tool` 两种变体，用于 Suspense fallback        |
-
-## 使用约定
-
-- 优先使用 `components/ui/` 下的 shadcn/ui 基础组件
-- 组件使用 `cn()` 合并 Tailwind 类名，支持 `className` 透传
-- 需要 memo 优化的组件使用 `React.memo` + `displayName`
-- 需要 ref 转发的组件使用 `React.forwardRef` + `displayName`
diff --git a/components/ui/README.md b/components/ui/README.md
deleted file mode 100644
index 72420ba..0000000
--- a/components/ui/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# components/ui/
-
-shadcn/ui 基础原子组件目录，基于 Radix UI 原语 + Tailwind CSS 实现。
-
-## 组件列表
-
-| 组件           | 用途                                                                                               |
-| -------------- | -------------------------------------------------------------------------------------------------- |
-| `button.tsx`   | 按钮组件，支持 `default/destructive/outline/secondary/ghost/link` 变体和 `default/sm/lg/icon` 尺寸 |
-| `input.tsx`    | 标准输入框，统一的 ring/focus 样式                                                                 |
-| `select.tsx`   | 下拉选择组件，包含 Trigger、Content、Item 等子组件                                                 |
-| `dialog.tsx`   | 对话框组件，包含 Overlay、Content、Header、Footer、Title、Description                              |
-| `checkbox.tsx` | 复选框组件                                                                                         |
-| `label.tsx`    | 标签组件                                                                                           |
-| `switch.tsx`   | 开关组件                                                                                           |
-| `badge.tsx`    | 徽章组件，支持 `default/secondary/destructive/outline` 变体                                        |
-
-## 使用方式
-
-```tsx
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-```
-
-## 添加新组件
-
-使用 shadcn/ui CLI 添加新组件：
-
-```bash
-npx shadcn-ui@latest add <component-name>
-```
-
-组件配置在项目根目录的 `components.json` 中定义。
diff --git a/config/README.md b/config/README.md
deleted file mode 100644
index ced4dcb..0000000
--- a/config/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# config/
-
-应用级配置目录，存放功能特性的注册中心。
-
-## 文件说明
-
-| 文件           | 用途                                     |
-| -------------- | ---------------------------------------- |
-| `features.tsx` | 核心配置文件，定义所有工具功能的注册信息 |
-
-## features.tsx
-
-`FEATURES` 数组是路由和功能元数据的**单一事实来源**，每个功能定义包含：
-
-- `key`：页面类型标识（`PageType`）
-- `labelKey` / `descriptionKey`：i18n 翻译键
-- `themeColorKey`：主题色（`primary/success/warning/error/secondary/info`）
-- `icon`：lucide-react 图标组件
-- `defaultVisible`：默认是否可见
-- `components`：三种渲染模式的懒加载组件（`popup`、`sidepanel`、`tab`）
-
-## 已注册功能（11 个）
-
-| key                  | 图标              | 说明              |
-| -------------------- | ----------------- | ----------------- |
-| `dashboard`          | —                 | 仪表盘首页        |
-| `timestamp`          | Clock             | 时间戳转换工具    |
-| `storageCleaner`     | Database          | 存储清理工具      |
-| `qrCode`             | QrCode            | 二维码工具        |
-| `textStatistics`     | FileText          | 文本统计工具      |
-| `jwt`                | Key               | JWT 解析工具      |
-| `jsonDiff`           | GitCompareArrows  | JSON 差异比较工具 |
-| `base64Converter`    | ArrowLeftRight    | Base64 转换器     |
-| `markdownToHtml`     | Code              | Markdown 转 HTML  |
-| `htmlToMarkdown`     | File              | HTML 转 Markdown  |
-| `rightClickRestorer` | MousePointerClick | 右键菜单恢复工具  |
-
-## 导出函数
-
-- `getFeatureByKey(key)` — 根据 key 获取功能配置
-- `getDefaultVisibleFeatureKeys()` — 获取默认可见的功能 key 列表
-- `getAllFeatureKeys()` — 获取所有功能 key 列表
-- `getDefaultPageOrder()` — 获取默认页面排序（不含 dashboard）
-- `getEntryPointType()` — 判断当前入口类型（popup/sidepanel/tab）
diff --git a/entrypoints/README.md b/entrypoints/README.md
deleted file mode 100644
index 47982f0..0000000
--- a/entrypoints/README.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# entrypoints/
-
-WXT 框架要求的扩展生命周期入口点，对应 Chrome Extension 的各个上下文。
-
-## 入口文件
-
-| 文件                            | 用途                                                                                          |
-| ------------------------------- | --------------------------------------------------------------------------------------------- |
-| `background.ts`                 | Service Worker 入口：注册右键菜单、监听菜单点击、处理消息通信、管理侧边栏状态、注入主环境脚本 |
-| `content.ts`                    | Content Script 入口：注入所有页面（`<all_urls>`），在 `document_end` 时初始化消息处理器       |
-| `rightClickRestorer.content.ts` | 专用 Content Script：处理右键菜单恢复功能，注入浮动状态徽章                                   |
-
-## 子目录
-
-### popup/
-
-Popup 弹窗页面（点击扩展图标弹出）。
-
-| 文件         | 用途                                                                           |
-| ------------ | ------------------------------------------------------------------------------ |
-| `index.html` | HTML 入口                                                                      |
-| `main.tsx`   | React 挂载点                                                                   |
-| `App.tsx`    | 根组件，组装 `RouterProvider` + `TopBar` + `ErrorBoundary` + `RouterContainer` |
-
-### sidepanel/
-
-侧边栏页面，结构与 popup 类似，额外通知 background 侧边栏开启/关闭状态。
-
-### options/
-
-设置页面，支持：
-
-- 拖拽排序功能顺序（`@dnd-kit`）
-- 功能可见性管理（显示/隐藏）
-- Popup/Sidepanel/Tab 三种模式独立配置
-
-### content/
-
-Content Script 内部分模块：
-
-| 文件                    | 用途                                                                |
-| ----------------------- | ------------------------------------------------------------------- |
-| `messageHandler.ts`     | 消息处理器初始化入口                                                |
-| `contextMenuHandler.ts` | 右键菜单点击事件处理，执行时间戳转换/文本统计并通过 UI Popover 展示 |
-| `uiPopover.ts`          | 在页面中注入浮层 Popover UI，展示右键菜单操作结果                   |
-
-## 架构说明
-
-- `background.ts` 是扩展的核心协调者，处理跨上下文通信
-- `content.ts` 注入到所有页面，负责接收和处理来自 background 的消息
-- `popup/`、`sidepanel/`、`options/` 共享同一套页面组件（来自 `pages/`），通过 `RouterProvider` 的不同配置实现独立路由
diff --git a/eslint.config.ts b/eslint.config.ts
index db7eb21..fd0db65 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -28,14 +28,7 @@ export default tseslint.config(
 
   // 4. 核心业务全受控大管线（Hooks, Entrypoints, Components 统一护航）
   {
-    files: [
-      'hooks/**/*.{ts,tsx}',
-      'entrypoints/**/*.{ts,tsx}',
-      'pages/**/*.{ts,tsx}',
-      'utils/**/*.{ts,tsx}',
-      'components/**/*.{ts,tsx}',
-      'services/**/*.{ts,tsx}',
-    ],
+    files: ['src/**/*.{ts,tsx}'],
     ignores: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
 
     languageOptions: {
diff --git a/lib/README.md b/lib/README.md
deleted file mode 100644
index 4616805..0000000
--- a/lib/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# lib/
-
-通用库工具目录，存放与业务无关的底层工具函数。
-
-## 文件说明
-
-| 文件       | 用途                                 |
-| ---------- | ------------------------------------ |
-| `utils.ts` | `cn()` 函数 — shadcn/ui 标准工具函数 |
-
-## cn()
-
-组合 `clsx` + `tailwind-merge`，用于合并和去重 Tailwind CSS 类名：
-
-```typescript
-import { cn } from '@/lib/utils';
-
-// 条件类名 + 合并外部 className
-<div className={cn(
-  'flex items-center gap-3 px-3',
-  isActive && 'bg-primary text-primary-foreground',
-  className,
-)}>
-```
-
-所有需要动态合并 Tailwind 类名的场景都应使用 `cn()`，而非手动拼接字符串。
diff --git a/pages/README.md b/pages/README.md
deleted file mode 100644
index c3a15a2..0000000
--- a/pages/README.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# pages/
-
-功能页面组件目录，每个子目录对应一个工具页面。
-
-## 目录结构约定
-
-典型页面遵循 **UI + Hook 分离** 模式：
-
-```
-pages/FeatureName/
-├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
-├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-├── constants.ts           # 常量定义（可选）
-├── SubComponent.tsx       # 子组件（可选）
-└── __tests__/             # 测试文件
-    └── index.test.tsx
-```
-
-## 页面列表
-
-### Dashboard/
-
-仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
-
-| 文件           | 用途                                         |
-| -------------- | -------------------------------------------- |
-| `index.tsx`    | 页面组件，渲染工具卡片网格                   |
-| `ToolCard.tsx` | 工具卡片组件，展示图标、标题、描述和实时数据 |
-
-### Timestamp/
-
-时间戳转换工具，支持秒/毫秒级互转、多时区选择、实时时钟。
-
-| 文件                       | 用途                                                              |
-| -------------------------- | ----------------------------------------------------------------- |
-| `index.tsx`                | 页面 UI                                                           |
-| `useTimestampConverter.ts` | 业务逻辑 Hook，包含转换模式、输入、单位、时区状态和响应式计算管线 |
-| `LiveClock.tsx`            | 实时时钟子组件，`React.memo` 优化                                 |
-| `ResultView.tsx`           | 转换结果展示子组件                                                |
-| `constants.ts`             | 时区列表等常量                                                    |
-
-### StorageCleaner/
-
-浏览器存储清理工具，支持 Cookie/LocalStorage/SessionStorage/IndexedDB/Cache/SW 清理。
-
-| 文件                        | 用途           |
-| --------------------------- | -------------- |
-| `index.tsx`                 | 页面 UI        |
-| `useStorageCleaner.ts`      | 业务逻辑 Hook  |
-| `StorageOptionsGrid.tsx`    | 清理选项网格   |
-| `StorageCleanerConfirm.tsx` | 清理确认对话框 |
-| `AutoRefreshToggle.tsx`     | 自动刷新开关   |
-| `ErrorDisplay.tsx`          | 错误展示组件   |
-| `CleaningResult.tsx`        | 清理结果展示   |
-| `OptionItem.tsx`            | 单个选项组件   |
-
-### QrCode/
-
-二维码工具，支持生成（URL→QR）和解析（QR→URL）。
-
-| 文件/目录     | 用途             |
-| ------------- | ---------------- |
-| `index.tsx`   | 页面 UI          |
-| `types.ts`    | 类型定义         |
-| `contexts/`   | Context Provider |
-| `hooks/`      | 业务逻辑 Hooks   |
-| `components/` | 子组件           |
-
-### TextStatistics/
-
-文本统计工具，实时计算字符数、单词数、行数、字节大小。
-
-| 文件        | 用途                                          |
-| ----------- | --------------------------------------------- |
-| `index.tsx` | 页面组件，集成 `TextInputArea` 和统计结果展示 |
-
-### Jwt/
-
-JWT 解析工具，解码 Header/Payload/Signature。
-
-| 文件/目录     | 用途             |
-| ------------- | ---------------- |
-| `index.tsx`   | 页面 UI          |
-| `types.ts`    | 类型定义         |
-| `contexts/`   | Context Provider |
-| `hooks/`      | 业务逻辑 Hooks   |
-| `components/` | 子组件           |
-
-### JsonTools/
-
-JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
-
-| 文件                     | 用途                         |
-| ------------------------ | ---------------------------- |
-| `index.tsx`              | 页面入口，子模式切换         |
-| `types.ts`               | 类型定义                     |
-| `diffEngine.ts`          | 差异比较引擎                 |
-| `JsonDiffInput.tsx`      | JSON 输入组件                |
-| `DiffResult.tsx`         | 差异结果展示                 |
-| `DiffNavigator.tsx`      | 差异导航器                   |
-| `JsonFormatSection.tsx`  | 格式化区域                   |
-| `JsonConvertSection.tsx` | 转换区域（YAML/TOML/Minify） |
-| `JsonTree.tsx`           | JSON 树形展示                |
-
-### Base64Converter/
-
-Base64 编解码工具，支持文本/文件/图片三种模式。
-
-| 文件                         | 用途                  |
-| ---------------------------- | --------------------- |
-| `index.tsx`                  | 页面入口，子模式切换  |
-| `useBase64Converter.ts`      | 业务逻辑 Hook         |
-| `TextMode.tsx`               | 文本模式              |
-| `Base64ConverterSection.tsx` | 文件/图片通用转换区域 |
-
-### MarkdownToHtml/
-
-Markdown 转 HTML 工具，支持分栏/预览/源码三种视图模式。
-
-### HtmlToMarkdown/
-
-HTML 转 Markdown 工具，支持分栏/预览/Markdown 三种视图模式。
-
-### RightClickRestorer/
-
-右键菜单恢复工具，解除网站对右键的限制。
-
-| 文件                       | 用途          |
-| -------------------------- | ------------- |
-| `index.tsx`                | 页面 UI       |
-| `useRightClickRestorer.ts` | 业务逻辑 Hook |
-
-## 新增页面
-
-1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型成员
-2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
-3. 在 `pages/` 创建页面目录（遵循上述结构）
-4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译
-5. 如需新权限，更新 `wxt.config.ts`
-6. 添加对应的单元测试
diff --git a/providers/README.md b/providers/README.md
deleted file mode 100644
index 22d2209..0000000
--- a/providers/README.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# providers/
-
-React Context Provider 目录，为整个应用提供全局共享状态。
-
-## 文件说明
-
-| 文件                    | 用途                   |
-| ----------------------- | ---------------------- |
-| `AppRoot.tsx`           | 应用根 Provider 组合器 |
-| `RouterProvider.tsx`    | 路由 Context Provider  |
-| `ThemeModeProvider.tsx` | 主题模式 Provider      |
-
-## AppRoot.tsx
-
-应用根 Provider 组合器，按顺序包裹：
-
-```
-React.StrictMode
-  └── ThemeModeProvider
-        └── RouterProvider
-              └── children
-```
-
-## RouterProvider.tsx
-
-路由 Context Provider，管理：
-
-- **当前页面**：`currentPage`（`PageType`）
-- **可见页面列表**：`visiblePages`
-- **页面排序**：`pageOrder`
-- **加载状态**：`isLoaded`
-
-核心特性：
-
-- 通过 `chrome.storage` 持久化路由状态
-- 使用 `localStorage` 快照实现首屏 0 闪烁
-- 支持 popup/sidepanel/tab 三种入口的独立路由同步（通过 `syncKey`、`visiblePagesKey`、`pageOrderKey` 配置）
-- 处理右键菜单待处理数据的路由跳转
-- 监听 `chrome.storage.onChanged` 实现跨端同步
-
-导出：
-
-- `RouterProvider` 组件
-- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goBack` 等
-
-## ThemeModeProvider.tsx
-
-主题模式 Provider，管理：
-
-- **主题模式**：`light` / `dark` / `system`
-- **解析后的主题**：`resolvedTheme`（`light` / `dark`）
-
-核心特性：
-
-- 使用 `localStorage` 快照实现首屏 0 闪烁
-- 监听系统级暗色模式变化（`matchMedia`）
-- 通过 `chrome.storage` 跨端同步主题偏好
-- 自动在 `document.documentElement` 上切换 `dark` class
-
-导出：
-
-- `ThemeModeProvider` 组件
-- `useThemeMode()` Hook — 获取 `themeMode`、`resolvedTheme`、`setThemeMode`
diff --git a/public/README.md b/public/README.md
deleted file mode 100644
index b7b3f2f..0000000
--- a/public/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# public/
-
-静态资源目录，存放无需构建处理的文件，会被直接复制到输出目录。
-
-## 文件说明
-
-| 文件/目录      | 用途                             |
-| -------------- | -------------------------------- |
-| `icon/`        | 扩展图标，提供多种尺寸           |
-| `icon/16.png`  | 16×16 图标（工具栏）             |
-| `icon/32.png`  | 32×32 图标                       |
-| `icon/48.png`  | 48×48 图标（扩展管理页）         |
-| `icon/96.png`  | 96×96 图标                       |
-| `icon/128.png` | 128×128 图标（Chrome Web Store） |
-| `wxt.svg`      | WXT 框架标志 SVG 图标            |
-
-## 注意事项
-
-- 修改图标后需同步更新 `wxt.config.ts` 中的 manifest 配置
-- 图标格式推荐使用 PNG，确保透明背景
diff --git a/src/README.md b/src/README.md
deleted file mode 100644
index 5bb0402..0000000
--- a/src/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# src/
-
-源码目录，存放全局样式定义。
-
-## 文件说明
-
-| 文件        | 用途              |
-| ----------- | ----------------- |
-| `index.css` | 全局 CSS 入口文件 |
-
-## index.css
-
-全局样式入口，包含：
-
-- **Tailwind 指令**：`@tailwind base/components/utilities`
-- **shadcn/ui CSS 变量**：定义 `--background`、`--primary`、`--destructive`、`--card`、`--muted`、`--accent`、`--border`、`--ring` 等语义化颜色变量
-- **主题色值**：`:root`（亮色）和 `.dark`（暗色）两套完整的颜色定义
-- **圆角变量**：`--radius` 定义全局圆角大小
-
-## 修改注意事项
-
-- 修改 CSS 变量会影响所有使用 shadcn/ui 语义化 token 的组件
-- 新增颜色变量需同时在 `:root` 和 `.dark` 中定义
-- 避免在组件中硬编码颜色值，应使用 CSS 变量或 Tailwind 的语义化类名
diff --git a/assets/react.svg b/src/assets/react.svg
similarity index 100%
rename from assets/react.svg
rename to src/assets/react.svg
diff --git a/components/CopyButton.tsx b/src/components/CopyButton.tsx
similarity index 100%
rename from components/CopyButton.tsx
rename to src/components/CopyButton.tsx
diff --git a/components/DecodeResultPaper.tsx b/src/components/DecodeResultPaper.tsx
similarity index 100%
rename from components/DecodeResultPaper.tsx
rename to src/components/DecodeResultPaper.tsx
diff --git a/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
similarity index 100%
rename from components/ErrorBoundary.tsx
rename to src/components/ErrorBoundary.tsx
diff --git a/components/GlobalSnackbar.tsx b/src/components/GlobalSnackbar.tsx
similarity index 100%
rename from components/GlobalSnackbar.tsx
rename to src/components/GlobalSnackbar.tsx
diff --git a/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
similarity index 100%
rename from components/ImageUploader.tsx
rename to src/components/ImageUploader.tsx
diff --git a/components/PageErrorBoundary.tsx b/src/components/PageErrorBoundary.tsx
similarity index 100%
rename from components/PageErrorBoundary.tsx
rename to src/components/PageErrorBoundary.tsx
diff --git a/components/PageSkeleton.tsx b/src/components/PageSkeleton.tsx
similarity index 100%
rename from components/PageSkeleton.tsx
rename to src/components/PageSkeleton.tsx
diff --git a/components/QrCodePreview.tsx b/src/components/QrCodePreview.tsx
similarity index 100%
rename from components/QrCodePreview.tsx
rename to src/components/QrCodePreview.tsx
diff --git a/components/RouterContainer.tsx b/src/components/RouterContainer.tsx
similarity index 100%
rename from components/RouterContainer.tsx
rename to src/components/RouterContainer.tsx
diff --git a/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx
similarity index 100%
rename from components/SwitchButtonGroup.tsx
rename to src/components/SwitchButtonGroup.tsx
diff --git a/components/TextInputArea.tsx b/src/components/TextInputArea.tsx
similarity index 100%
rename from components/TextInputArea.tsx
rename to src/components/TextInputArea.tsx
diff --git a/components/TopBar.tsx b/src/components/TopBar.tsx
similarity index 100%
rename from components/TopBar.tsx
rename to src/components/TopBar.tsx
diff --git a/components/__tests__/DecodeResultPaper.test.tsx b/src/components/__tests__/DecodeResultPaper.test.tsx
similarity index 100%
rename from components/__tests__/DecodeResultPaper.test.tsx
rename to src/components/__tests__/DecodeResultPaper.test.tsx
diff --git a/components/__tests__/ErrorBoundary.test.tsx b/src/components/__tests__/ErrorBoundary.test.tsx
similarity index 100%
rename from components/__tests__/ErrorBoundary.test.tsx
rename to src/components/__tests__/ErrorBoundary.test.tsx
diff --git a/components/__tests__/GlobalSnackbar.test.tsx b/src/components/__tests__/GlobalSnackbar.test.tsx
similarity index 100%
rename from components/__tests__/GlobalSnackbar.test.tsx
rename to src/components/__tests__/GlobalSnackbar.test.tsx
diff --git a/components/__tests__/ImageUploader.test.tsx b/src/components/__tests__/ImageUploader.test.tsx
similarity index 100%
rename from components/__tests__/ImageUploader.test.tsx
rename to src/components/__tests__/ImageUploader.test.tsx
diff --git a/components/__tests__/PageErrorBoundary.test.tsx b/src/components/__tests__/PageErrorBoundary.test.tsx
similarity index 100%
rename from components/__tests__/PageErrorBoundary.test.tsx
rename to src/components/__tests__/PageErrorBoundary.test.tsx
diff --git a/components/__tests__/PageSkeleton.test.tsx b/src/components/__tests__/PageSkeleton.test.tsx
similarity index 100%
rename from components/__tests__/PageSkeleton.test.tsx
rename to src/components/__tests__/PageSkeleton.test.tsx
diff --git a/components/__tests__/QrCodePreview.test.tsx b/src/components/__tests__/QrCodePreview.test.tsx
similarity index 100%
rename from components/__tests__/QrCodePreview.test.tsx
rename to src/components/__tests__/QrCodePreview.test.tsx
diff --git a/components/__tests__/RouterContainer.test.tsx b/src/components/__tests__/RouterContainer.test.tsx
similarity index 100%
rename from components/__tests__/RouterContainer.test.tsx
rename to src/components/__tests__/RouterContainer.test.tsx
diff --git a/components/__tests__/StorageCleanerConfirm.test.tsx b/src/components/__tests__/StorageCleanerConfirm.test.tsx
similarity index 100%
rename from components/__tests__/StorageCleanerConfirm.test.tsx
rename to src/components/__tests__/StorageCleanerConfirm.test.tsx
diff --git a/components/__tests__/SwitchButtonGroup.test.tsx b/src/components/__tests__/SwitchButtonGroup.test.tsx
similarity index 100%
rename from components/__tests__/SwitchButtonGroup.test.tsx
rename to src/components/__tests__/SwitchButtonGroup.test.tsx
diff --git a/components/__tests__/TextInputArea.test.tsx b/src/components/__tests__/TextInputArea.test.tsx
similarity index 100%
rename from components/__tests__/TextInputArea.test.tsx
rename to src/components/__tests__/TextInputArea.test.tsx
diff --git a/components/__tests__/ToolCard.test.tsx b/src/components/__tests__/ToolCard.test.tsx
similarity index 100%
rename from components/__tests__/ToolCard.test.tsx
rename to src/components/__tests__/ToolCard.test.tsx
diff --git a/components/__tests__/TopBar.test.tsx b/src/components/__tests__/TopBar.test.tsx
similarity index 100%
rename from components/__tests__/TopBar.test.tsx
rename to src/components/__tests__/TopBar.test.tsx
diff --git a/components/ui/badge.tsx b/src/components/ui/badge.tsx
similarity index 100%
rename from components/ui/badge.tsx
rename to src/components/ui/badge.tsx
diff --git a/components/ui/button.tsx b/src/components/ui/button.tsx
similarity index 100%
rename from components/ui/button.tsx
rename to src/components/ui/button.tsx
diff --git a/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
similarity index 100%
rename from components/ui/checkbox.tsx
rename to src/components/ui/checkbox.tsx
diff --git a/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
similarity index 100%
rename from components/ui/dialog.tsx
rename to src/components/ui/dialog.tsx
diff --git a/components/ui/input.tsx b/src/components/ui/input.tsx
similarity index 100%
rename from components/ui/input.tsx
rename to src/components/ui/input.tsx
diff --git a/components/ui/label.tsx b/src/components/ui/label.tsx
similarity index 100%
rename from components/ui/label.tsx
rename to src/components/ui/label.tsx
diff --git a/components/ui/select.tsx b/src/components/ui/select.tsx
similarity index 100%
rename from components/ui/select.tsx
rename to src/components/ui/select.tsx
diff --git a/components/ui/switch.tsx b/src/components/ui/switch.tsx
similarity index 100%
rename from components/ui/switch.tsx
rename to src/components/ui/switch.tsx
diff --git a/config/__tests__/features.test.ts b/src/config/__tests__/features.test.ts
similarity index 100%
rename from config/__tests__/features.test.ts
rename to src/config/__tests__/features.test.ts
diff --git a/config/features.tsx b/src/config/features.tsx
similarity index 100%
rename from config/features.tsx
rename to src/config/features.tsx
diff --git a/entrypoints/__tests__/background.test.ts b/src/entrypoints/__tests__/background.test.ts
similarity index 100%
rename from entrypoints/__tests__/background.test.ts
rename to src/entrypoints/__tests__/background.test.ts
diff --git a/entrypoints/background.ts b/src/entrypoints/background.ts
similarity index 99%
rename from entrypoints/background.ts
rename to src/entrypoints/background.ts
index fcfe6eb..e2b5e63 100644
--- a/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -1,4 +1,4 @@
-import '../.wxt/types/imports.d.ts';
+import '../../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
 import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
 import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
diff --git a/entrypoints/content.ts b/src/entrypoints/content.ts
similarity index 83%
rename from entrypoints/content.ts
rename to src/entrypoints/content.ts
index c6e8255..de742e7 100644
--- a/entrypoints/content.ts
+++ b/src/entrypoints/content.ts
@@ -1,4 +1,4 @@
-import '../.wxt/types/imports.d.ts';
+import '../../.wxt/types/imports.d.ts';
 import { initMessageHandler } from './content/messageHandler';
 
 export default defineContentScript({
diff --git a/entrypoints/content/contextMenuHandler.ts b/src/entrypoints/content/contextMenuHandler.ts
similarity index 100%
rename from entrypoints/content/contextMenuHandler.ts
rename to src/entrypoints/content/contextMenuHandler.ts
diff --git a/entrypoints/content/messageHandler.ts b/src/entrypoints/content/messageHandler.ts
similarity index 100%
rename from entrypoints/content/messageHandler.ts
rename to src/entrypoints/content/messageHandler.ts
diff --git a/entrypoints/content/uiPopover.ts b/src/entrypoints/content/uiPopover.ts
similarity index 100%
rename from entrypoints/content/uiPopover.ts
rename to src/entrypoints/content/uiPopover.ts
diff --git a/entrypoints/options/App.tsx b/src/entrypoints/options/App.tsx
similarity index 100%
rename from entrypoints/options/App.tsx
rename to src/entrypoints/options/App.tsx
diff --git a/entrypoints/options/__tests__/App.test.tsx b/src/entrypoints/options/__tests__/App.test.tsx
similarity index 100%
rename from entrypoints/options/__tests__/App.test.tsx
rename to src/entrypoints/options/__tests__/App.test.tsx
diff --git a/entrypoints/options/index.html b/src/entrypoints/options/index.html
similarity index 100%
rename from entrypoints/options/index.html
rename to src/entrypoints/options/index.html
diff --git a/entrypoints/options/main.tsx b/src/entrypoints/options/main.tsx
similarity index 89%
rename from entrypoints/options/main.tsx
rename to src/entrypoints/options/main.tsx
index 1571624..ea46171 100644
--- a/entrypoints/options/main.tsx
+++ b/src/entrypoints/options/main.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/src/index.css';
+import '@/index.css';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
similarity index 100%
rename from entrypoints/popup/App.tsx
rename to src/entrypoints/popup/App.tsx
diff --git a/entrypoints/popup/index.html b/src/entrypoints/popup/index.html
similarity index 100%
rename from entrypoints/popup/index.html
rename to src/entrypoints/popup/index.html
diff --git a/entrypoints/popup/main.tsx b/src/entrypoints/popup/main.tsx
similarity index 89%
rename from entrypoints/popup/main.tsx
rename to src/entrypoints/popup/main.tsx
index 67f30b7..6f602b5 100644
--- a/entrypoints/popup/main.tsx
+++ b/src/entrypoints/popup/main.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/src/index.css';
+import '@/index.css';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/entrypoints/rightClickRestorer.content.ts b/src/entrypoints/rightClickRestorer.content.ts
similarity index 100%
rename from entrypoints/rightClickRestorer.content.ts
rename to src/entrypoints/rightClickRestorer.content.ts
diff --git a/entrypoints/sidepanel/App.tsx b/src/entrypoints/sidepanel/App.tsx
similarity index 100%
rename from entrypoints/sidepanel/App.tsx
rename to src/entrypoints/sidepanel/App.tsx
diff --git a/entrypoints/sidepanel/index.html b/src/entrypoints/sidepanel/index.html
similarity index 100%
rename from entrypoints/sidepanel/index.html
rename to src/entrypoints/sidepanel/index.html
diff --git a/entrypoints/sidepanel/main.tsx b/src/entrypoints/sidepanel/main.tsx
similarity index 89%
rename from entrypoints/sidepanel/main.tsx
rename to src/entrypoints/sidepanel/main.tsx
index 67f30b7..6f602b5 100644
--- a/entrypoints/sidepanel/main.tsx
+++ b/src/entrypoints/sidepanel/main.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/src/index.css';
+import '@/index.css';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/lib/utils.ts b/src/lib/utils.ts
similarity index 100%
rename from lib/utils.ts
rename to src/lib/utils.ts
diff --git a/pages/Base64Converter/Base64ConverterSection.tsx b/src/pages/Base64Converter/Base64ConverterSection.tsx
similarity index 100%
rename from pages/Base64Converter/Base64ConverterSection.tsx
rename to src/pages/Base64Converter/Base64ConverterSection.tsx
diff --git a/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx
similarity index 100%
rename from pages/Base64Converter/TextMode.tsx
rename to src/pages/Base64Converter/TextMode.tsx
diff --git a/pages/Base64Converter/__tests__/TextMode.test.tsx b/src/pages/Base64Converter/__tests__/TextMode.test.tsx
similarity index 100%
rename from pages/Base64Converter/__tests__/TextMode.test.tsx
rename to src/pages/Base64Converter/__tests__/TextMode.test.tsx
diff --git a/pages/Base64Converter/__tests__/index.test.tsx b/src/pages/Base64Converter/__tests__/index.test.tsx
similarity index 100%
rename from pages/Base64Converter/__tests__/index.test.tsx
rename to src/pages/Base64Converter/__tests__/index.test.tsx
diff --git a/pages/Base64Converter/index.tsx b/src/pages/Base64Converter/index.tsx
similarity index 100%
rename from pages/Base64Converter/index.tsx
rename to src/pages/Base64Converter/index.tsx
diff --git a/pages/Base64Converter/useBase64Converter.ts b/src/pages/Base64Converter/useBase64Converter.ts
similarity index 100%
rename from pages/Base64Converter/useBase64Converter.ts
rename to src/pages/Base64Converter/useBase64Converter.ts
diff --git a/pages/Dashboard/ToolCard.tsx b/src/pages/Dashboard/ToolCard.tsx
similarity index 100%
rename from pages/Dashboard/ToolCard.tsx
rename to src/pages/Dashboard/ToolCard.tsx
diff --git a/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
similarity index 100%
rename from pages/Dashboard/index.tsx
rename to src/pages/Dashboard/index.tsx
diff --git a/pages/HtmlToMarkdown/index.tsx b/src/pages/HtmlToMarkdown/index.tsx
similarity index 100%
rename from pages/HtmlToMarkdown/index.tsx
rename to src/pages/HtmlToMarkdown/index.tsx
diff --git a/pages/JsonTools/DiffNavigator.tsx b/src/pages/JsonTools/DiffNavigator.tsx
similarity index 100%
rename from pages/JsonTools/DiffNavigator.tsx
rename to src/pages/JsonTools/DiffNavigator.tsx
diff --git a/pages/JsonTools/DiffResult.tsx b/src/pages/JsonTools/DiffResult.tsx
similarity index 100%
rename from pages/JsonTools/DiffResult.tsx
rename to src/pages/JsonTools/DiffResult.tsx
diff --git a/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx
similarity index 100%
rename from pages/JsonTools/JsonConvertSection.tsx
rename to src/pages/JsonTools/JsonConvertSection.tsx
diff --git a/pages/JsonTools/JsonDiffInput.tsx b/src/pages/JsonTools/JsonDiffInput.tsx
similarity index 100%
rename from pages/JsonTools/JsonDiffInput.tsx
rename to src/pages/JsonTools/JsonDiffInput.tsx
diff --git a/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/JsonFormatSection.tsx
similarity index 100%
rename from pages/JsonTools/JsonFormatSection.tsx
rename to src/pages/JsonTools/JsonFormatSection.tsx
diff --git a/pages/JsonTools/JsonTree.tsx b/src/pages/JsonTools/JsonTree.tsx
similarity index 100%
rename from pages/JsonTools/JsonTree.tsx
rename to src/pages/JsonTools/JsonTree.tsx
diff --git a/pages/JsonTools/diffEngine.ts b/src/pages/JsonTools/diffEngine.ts
similarity index 100%
rename from pages/JsonTools/diffEngine.ts
rename to src/pages/JsonTools/diffEngine.ts
diff --git a/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
similarity index 100%
rename from pages/JsonTools/index.tsx
rename to src/pages/JsonTools/index.tsx
diff --git a/pages/JsonTools/types.ts b/src/pages/JsonTools/types.ts
similarity index 100%
rename from pages/JsonTools/types.ts
rename to src/pages/JsonTools/types.ts
diff --git a/pages/Jwt/index.tsx b/src/pages/Jwt/index.tsx
similarity index 100%
rename from pages/Jwt/index.tsx
rename to src/pages/Jwt/index.tsx
diff --git a/pages/MarkdownToHtml/index.tsx b/src/pages/MarkdownToHtml/index.tsx
similarity index 100%
rename from pages/MarkdownToHtml/index.tsx
rename to src/pages/MarkdownToHtml/index.tsx
diff --git a/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
similarity index 100%
rename from pages/QrCode/__tests__/index.test.tsx
rename to src/pages/QrCode/__tests__/index.test.tsx
diff --git a/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
similarity index 100%
rename from pages/QrCode/components/GeneratePanel.tsx
rename to src/pages/QrCode/components/GeneratePanel.tsx
diff --git a/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
similarity index 100%
rename from pages/QrCode/components/ParsePanel.tsx
rename to src/pages/QrCode/components/ParsePanel.tsx
diff --git a/pages/QrCode/contexts/QrCodeContext.ts b/src/pages/QrCode/contexts/QrCodeContext.ts
similarity index 100%
rename from pages/QrCode/contexts/QrCodeContext.ts
rename to src/pages/QrCode/contexts/QrCodeContext.ts
diff --git a/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
similarity index 100%
rename from pages/QrCode/hooks/useQrCode.ts
rename to src/pages/QrCode/hooks/useQrCode.ts
diff --git a/pages/QrCode/index.tsx b/src/pages/QrCode/index.tsx
similarity index 100%
rename from pages/QrCode/index.tsx
rename to src/pages/QrCode/index.tsx
diff --git a/pages/QrCode/types.ts b/src/pages/QrCode/types.ts
similarity index 100%
rename from pages/QrCode/types.ts
rename to src/pages/QrCode/types.ts
diff --git a/pages/RightClickRestorer/__tests__/index.test.tsx b/src/pages/RightClickRestorer/__tests__/index.test.tsx
similarity index 100%
rename from pages/RightClickRestorer/__tests__/index.test.tsx
rename to src/pages/RightClickRestorer/__tests__/index.test.tsx
diff --git a/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts b/src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts
similarity index 100%
rename from pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts
rename to src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts
diff --git a/pages/RightClickRestorer/index.tsx b/src/pages/RightClickRestorer/index.tsx
similarity index 100%
rename from pages/RightClickRestorer/index.tsx
rename to src/pages/RightClickRestorer/index.tsx
diff --git a/pages/RightClickRestorer/useRightClickRestorer.ts b/src/pages/RightClickRestorer/useRightClickRestorer.ts
similarity index 100%
rename from pages/RightClickRestorer/useRightClickRestorer.ts
rename to src/pages/RightClickRestorer/useRightClickRestorer.ts
diff --git a/pages/StorageCleaner/AutoRefreshToggle.tsx b/src/pages/StorageCleaner/AutoRefreshToggle.tsx
similarity index 100%
rename from pages/StorageCleaner/AutoRefreshToggle.tsx
rename to src/pages/StorageCleaner/AutoRefreshToggle.tsx
diff --git a/pages/StorageCleaner/CleaningResult.tsx b/src/pages/StorageCleaner/CleaningResult.tsx
similarity index 100%
rename from pages/StorageCleaner/CleaningResult.tsx
rename to src/pages/StorageCleaner/CleaningResult.tsx
diff --git a/pages/StorageCleaner/ErrorDisplay.tsx b/src/pages/StorageCleaner/ErrorDisplay.tsx
similarity index 100%
rename from pages/StorageCleaner/ErrorDisplay.tsx
rename to src/pages/StorageCleaner/ErrorDisplay.tsx
diff --git a/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/OptionItem.tsx
similarity index 100%
rename from pages/StorageCleaner/OptionItem.tsx
rename to src/pages/StorageCleaner/OptionItem.tsx
diff --git a/pages/StorageCleaner/StorageCleanerConfirm.tsx b/src/pages/StorageCleaner/StorageCleanerConfirm.tsx
similarity index 100%
rename from pages/StorageCleaner/StorageCleanerConfirm.tsx
rename to src/pages/StorageCleaner/StorageCleanerConfirm.tsx
diff --git a/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
similarity index 100%
rename from pages/StorageCleaner/StorageOptionsGrid.tsx
rename to src/pages/StorageCleaner/StorageOptionsGrid.tsx
diff --git a/pages/StorageCleaner/index.tsx b/src/pages/StorageCleaner/index.tsx
similarity index 100%
rename from pages/StorageCleaner/index.tsx
rename to src/pages/StorageCleaner/index.tsx
diff --git a/pages/StorageCleaner/useStorageCleaner.ts b/src/pages/StorageCleaner/useStorageCleaner.ts
similarity index 100%
rename from pages/StorageCleaner/useStorageCleaner.ts
rename to src/pages/StorageCleaner/useStorageCleaner.ts
diff --git a/pages/TextStatistics/index.tsx b/src/pages/TextStatistics/index.tsx
similarity index 100%
rename from pages/TextStatistics/index.tsx
rename to src/pages/TextStatistics/index.tsx
diff --git a/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/LiveClock.tsx
similarity index 100%
rename from pages/Timestamp/LiveClock.tsx
rename to src/pages/Timestamp/LiveClock.tsx
diff --git a/pages/Timestamp/ResultView.tsx b/src/pages/Timestamp/ResultView.tsx
similarity index 100%
rename from pages/Timestamp/ResultView.tsx
rename to src/pages/Timestamp/ResultView.tsx
diff --git a/pages/Timestamp/constants.ts b/src/pages/Timestamp/constants.ts
similarity index 100%
rename from pages/Timestamp/constants.ts
rename to src/pages/Timestamp/constants.ts
diff --git a/pages/Timestamp/index.tsx b/src/pages/Timestamp/index.tsx
similarity index 100%
rename from pages/Timestamp/index.tsx
rename to src/pages/Timestamp/index.tsx
diff --git a/pages/Timestamp/useTimestampConverter.ts b/src/pages/Timestamp/useTimestampConverter.ts
similarity index 100%
rename from pages/Timestamp/useTimestampConverter.ts
rename to src/pages/Timestamp/useTimestampConverter.ts
diff --git a/providers/AppRoot.tsx b/src/providers/AppRoot.tsx
similarity index 100%
rename from providers/AppRoot.tsx
rename to src/providers/AppRoot.tsx
diff --git a/providers/RouterProvider.tsx b/src/providers/RouterProvider.tsx
similarity index 98%
rename from providers/RouterProvider.tsx
rename to src/providers/RouterProvider.tsx
index 9285a40..5f04c43 100644
--- a/providers/RouterProvider.tsx
+++ b/src/providers/RouterProvider.tsx
@@ -147,6 +147,7 @@ export function RouterProvider({
       if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
         setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
       }
+      setIsLoaded(true);
     } catch (error) {
       console.error('[Router Init Error] Core data fetch failed:', error);
     }
@@ -156,10 +157,10 @@ export function RouterProvider({
   useEffect(() => {
     let cancelled = false;
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Valid async data loading pattern on mount
     loadInitialData()
       .then(() => {
         if (cancelled) return;
-        setIsLoaded(true);
 
         // 检查 URL 参数中的右键菜单高阶中转数据
         if (typeof window !== 'undefined') {
diff --git a/providers/ThemeModeProvider.tsx b/src/providers/ThemeModeProvider.tsx
similarity index 100%
rename from providers/ThemeModeProvider.tsx
rename to src/providers/ThemeModeProvider.tsx
diff --git a/providers/__tests__/RouterProvider.test.tsx b/src/providers/__tests__/RouterProvider.test.tsx
similarity index 100%
rename from providers/__tests__/RouterProvider.test.tsx
rename to src/providers/__tests__/RouterProvider.test.tsx
diff --git a/types/qrious.d.ts b/src/types/qrious.d.ts
similarity index 100%
rename from types/qrious.d.ts
rename to src/types/qrious.d.ts
diff --git a/types/storage.d.ts b/src/types/storage.d.ts
similarity index 100%
rename from types/storage.d.ts
rename to src/types/storage.d.ts
diff --git a/utils/__tests__/base64Converter.test.ts b/src/utils/__tests__/base64Converter.test.ts
similarity index 100%
rename from utils/__tests__/base64Converter.test.ts
rename to src/utils/__tests__/base64Converter.test.ts
diff --git a/utils/__tests__/chromeStorage.test.ts b/src/utils/__tests__/chromeStorage.test.ts
similarity index 100%
rename from utils/__tests__/chromeStorage.test.ts
rename to src/utils/__tests__/chromeStorage.test.ts
diff --git a/utils/__tests__/chromeTabs.test.ts b/src/utils/__tests__/chromeTabs.test.ts
similarity index 100%
rename from utils/__tests__/chromeTabs.test.ts
rename to src/utils/__tests__/chromeTabs.test.ts
diff --git a/utils/__tests__/clipboard.test.ts b/src/utils/__tests__/clipboard.test.ts
similarity index 100%
rename from utils/__tests__/clipboard.test.ts
rename to src/utils/__tests__/clipboard.test.ts
diff --git a/utils/__tests__/contextMenu.test.ts b/src/utils/__tests__/contextMenu.test.ts
similarity index 100%
rename from utils/__tests__/contextMenu.test.ts
rename to src/utils/__tests__/contextMenu.test.ts
diff --git a/utils/__tests__/dayjs.test.ts b/src/utils/__tests__/dayjs.test.ts
similarity index 100%
rename from utils/__tests__/dayjs.test.ts
rename to src/utils/__tests__/dayjs.test.ts
diff --git a/utils/__tests__/diffEngine.test.ts b/src/utils/__tests__/diffEngine.test.ts
similarity index 100%
rename from utils/__tests__/diffEngine.test.ts
rename to src/utils/__tests__/diffEngine.test.ts
diff --git a/utils/__tests__/format.test.ts b/src/utils/__tests__/format.test.ts
similarity index 100%
rename from utils/__tests__/format.test.ts
rename to src/utils/__tests__/format.test.ts
diff --git a/utils/__tests__/htmlToMarkdown.test.ts b/src/utils/__tests__/htmlToMarkdown.test.ts
similarity index 100%
rename from utils/__tests__/htmlToMarkdown.test.ts
rename to src/utils/__tests__/htmlToMarkdown.test.ts
diff --git a/utils/__tests__/jsonFormatter.test.ts b/src/utils/__tests__/jsonFormatter.test.ts
similarity index 100%
rename from utils/__tests__/jsonFormatter.test.ts
rename to src/utils/__tests__/jsonFormatter.test.ts
diff --git a/utils/__tests__/jsonMinify.test.ts b/src/utils/__tests__/jsonMinify.test.ts
similarity index 100%
rename from utils/__tests__/jsonMinify.test.ts
rename to src/utils/__tests__/jsonMinify.test.ts
diff --git a/utils/__tests__/jsonToToml.test.ts b/src/utils/__tests__/jsonToToml.test.ts
similarity index 100%
rename from utils/__tests__/jsonToToml.test.ts
rename to src/utils/__tests__/jsonToToml.test.ts
diff --git a/utils/__tests__/jsonToYaml.test.ts b/src/utils/__tests__/jsonToYaml.test.ts
similarity index 100%
rename from utils/__tests__/jsonToYaml.test.ts
rename to src/utils/__tests__/jsonToYaml.test.ts
diff --git a/utils/__tests__/jwt.test.ts b/src/utils/__tests__/jwt.test.ts
similarity index 100%
rename from utils/__tests__/jwt.test.ts
rename to src/utils/__tests__/jwt.test.ts
diff --git a/utils/__tests__/markdownToHtml.test.ts b/src/utils/__tests__/markdownToHtml.test.ts
similarity index 100%
rename from utils/__tests__/markdownToHtml.test.ts
rename to src/utils/__tests__/markdownToHtml.test.ts
diff --git a/utils/__tests__/messages.test.ts b/src/utils/__tests__/messages.test.ts
similarity index 100%
rename from utils/__tests__/messages.test.ts
rename to src/utils/__tests__/messages.test.ts
diff --git a/utils/__tests__/qrCodeParser.test.ts b/src/utils/__tests__/qrCodeParser.test.ts
similarity index 100%
rename from utils/__tests__/qrCodeParser.test.ts
rename to src/utils/__tests__/qrCodeParser.test.ts
diff --git a/utils/__tests__/storageCleaner.test.ts b/src/utils/__tests__/storageCleaner.test.ts
similarity index 100%
rename from utils/__tests__/storageCleaner.test.ts
rename to src/utils/__tests__/storageCleaner.test.ts
diff --git a/utils/__tests__/textStatistics.test.ts b/src/utils/__tests__/textStatistics.test.ts
similarity index 100%
rename from utils/__tests__/textStatistics.test.ts
rename to src/utils/__tests__/textStatistics.test.ts
diff --git a/utils/__tests__/useContextMenuData.test.ts b/src/utils/__tests__/useContextMenuData.test.ts
similarity index 100%
rename from utils/__tests__/useContextMenuData.test.ts
rename to src/utils/__tests__/useContextMenuData.test.ts
diff --git a/utils/__tests__/useStorageState.test.ts b/src/utils/__tests__/useStorageState.test.ts
similarity index 100%
rename from utils/__tests__/useStorageState.test.ts
rename to src/utils/__tests__/useStorageState.test.ts
diff --git a/utils/base64Converter.ts b/src/utils/base64Converter.ts
similarity index 100%
rename from utils/base64Converter.ts
rename to src/utils/base64Converter.ts
diff --git a/utils/chromeI18n.ts b/src/utils/chromeI18n.ts
similarity index 100%
rename from utils/chromeI18n.ts
rename to src/utils/chromeI18n.ts
diff --git a/utils/chromeStorage.ts b/src/utils/chromeStorage.ts
similarity index 100%
rename from utils/chromeStorage.ts
rename to src/utils/chromeStorage.ts
diff --git a/utils/chromeTabs.ts b/src/utils/chromeTabs.ts
similarity index 100%
rename from utils/chromeTabs.ts
rename to src/utils/chromeTabs.ts
diff --git a/utils/clipboard.ts b/src/utils/clipboard.ts
similarity index 100%
rename from utils/clipboard.ts
rename to src/utils/clipboard.ts
diff --git a/utils/contextMenu.ts b/src/utils/contextMenu.ts
similarity index 100%
rename from utils/contextMenu.ts
rename to src/utils/contextMenu.ts
diff --git a/utils/dayjs.ts b/src/utils/dayjs.ts
similarity index 100%
rename from utils/dayjs.ts
rename to src/utils/dayjs.ts
diff --git a/utils/format.ts b/src/utils/format.ts
similarity index 100%
rename from utils/format.ts
rename to src/utils/format.ts
diff --git a/utils/htmlToMarkdown.ts b/src/utils/htmlToMarkdown.ts
similarity index 100%
rename from utils/htmlToMarkdown.ts
rename to src/utils/htmlToMarkdown.ts
diff --git a/utils/jsonFormatter.ts b/src/utils/jsonFormatter.ts
similarity index 100%
rename from utils/jsonFormatter.ts
rename to src/utils/jsonFormatter.ts
diff --git a/utils/jsonToToml.ts b/src/utils/jsonToToml.ts
similarity index 100%
rename from utils/jsonToToml.ts
rename to src/utils/jsonToToml.ts
diff --git a/utils/jsonToYaml.ts b/src/utils/jsonToYaml.ts
similarity index 100%
rename from utils/jsonToYaml.ts
rename to src/utils/jsonToYaml.ts
diff --git a/utils/jwt.ts b/src/utils/jwt.ts
similarity index 100%
rename from utils/jwt.ts
rename to src/utils/jwt.ts
diff --git a/utils/markdownToHtml.ts b/src/utils/markdownToHtml.ts
similarity index 100%
rename from utils/markdownToHtml.ts
rename to src/utils/markdownToHtml.ts
diff --git a/utils/messages.ts b/src/utils/messages.ts
similarity index 100%
rename from utils/messages.ts
rename to src/utils/messages.ts
diff --git a/utils/qrCodeParser.ts b/src/utils/qrCodeParser.ts
similarity index 100%
rename from utils/qrCodeParser.ts
rename to src/utils/qrCodeParser.ts
diff --git a/utils/storageCleaner.ts b/src/utils/storageCleaner.ts
similarity index 100%
rename from utils/storageCleaner.ts
rename to src/utils/storageCleaner.ts
diff --git a/utils/textStatistics.ts b/src/utils/textStatistics.ts
similarity index 100%
rename from utils/textStatistics.ts
rename to src/utils/textStatistics.ts
diff --git a/utils/useContextMenuData.ts b/src/utils/useContextMenuData.ts
similarity index 100%
rename from utils/useContextMenuData.ts
rename to src/utils/useContextMenuData.ts
diff --git a/utils/useDebounce.ts b/src/utils/useDebounce.ts
similarity index 100%
rename from utils/useDebounce.ts
rename to src/utils/useDebounce.ts
diff --git a/utils/useStorageState.ts b/src/utils/useStorageState.ts
similarity index 100%
rename from utils/useStorageState.ts
rename to src/utils/useStorageState.ts
diff --git a/tailwind.config.js b/tailwind.config.js
index 7710cb5..ed91354 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: 'class',
-  content: [
-    './entrypoints/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './providers/**/*.{js,ts,jsx,tsx}',
-    './utils/**/*.{js,ts,jsx,tsx}',
-    './config/**/*.{js,ts,jsx,tsx}',
-  ],
+  content: ['./entrypoints/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       colors: {
diff --git a/tsconfig.json b/tsconfig.json
index 82e1037..987cf9b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,21 +29,6 @@
     "noImplicitAny": true
   },
   // 确保包含你的源代码目录
-  "include": [
-    "entrypoints/**/*",
-    "pages/**/*",
-    "components/**/*",
-    "providers/**/*",
-    "utils/**/*",
-    "config/**/*",
-    "types/**/*",
-    "assets/**/*",
-    "hooks/**/*",
-    "lib/**/*",
-    "src/**/*",
-    ".wxt/types/**/*.ts",
-    ".wxt/types/*.d.ts",
-    "eslint.config.ts"
-  ],
+  "include": ["src/**/*", ".wxt/types/**/*.ts", ".wxt/types/*.d.ts", "eslint.config.ts"],
   "exclude": ["node_modules", ".wxt", "dist"]
 }
diff --git a/types/README.md b/types/README.md
deleted file mode 100644
index 67fbff4..0000000
--- a/types/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# types/
-
-全局共享的 TypeScript 类型声明文件目录。
-
-## 文件说明
-
-### storage.d.ts
-
-核心类型定义文件，包含：
-
-**页面类型：**
-
-- `PageType` — 所有页面类型的联合类型（`dashboard` | `timestamp` | `storageCleaner` | ...）
-- `JsonToolsPageMode` — JSON 工具子模式（`diff` | `format` | `yaml` | `toml` | `minify`）
-- `Base64ConverterPageMode` — Base64 子模式（`text` | `file` | `image`）
-- `Base64ConvertDirection` — 编解码方向（`encode` | `decode`）
-- `MarkdownToHtmlPreviewMode` — Markdown 预览模式（`split` | `preview` | `html`）
-- `HtmlToMarkdownPreviewMode` — HTML 预览模式（`split` | `preview` | `markdown`）
-
-**存储 Schema：**
-
-- `StorageSchema` — Chrome Storage 完整数据结构定义，所有存储键必须在此声明
-  - 键名使用 kebab-case 格式（如 `app/currentRoute`）
-  - 包含路由、主题、工具偏好、搜索历史等所有持久化数据
-
-**其他类型：**
-
-- `FormMapEntry` — 表单映射条目定义
-- `ContextMenuPendingData` — 右键菜单待处理数据
-- `StorageCleanerPreferences` / `StorageCleanerOptions` — 存储清理偏好
-- `CleaningResult` / `StorageCleanResult` — 清理结果类型
-
-### qrious.d.ts
-
-`qrious` 库的类型声明，定义 QR 码生成选项和 `QRious` 类。
-
-## 修改 StorageSchema 的注意事项
-
-修改 `StorageSchema` 时，必须：
-
-1. 在 `utils/chromeStorage.ts` 添加版本迁移函数
-2. 在测试中覆盖迁移场景
diff --git a/utils/README.md b/utils/README.md
deleted file mode 100644
index a3f8d04..0000000
--- a/utils/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# utils/
-
-通用工具函数和 React 自定义 Hooks 目录，与具体页面解耦。
-
-## 工具函数
-
-| 文件                 | 用途                                                                                                |
-| -------------------- | --------------------------------------------------------------------------------------------------- |
-| `chromeStorage.ts`   | Chrome Storage API 封装：类型安全的 `StorageUtils` 类，提供 `get/set/remove` 方法                   |
-| `chromeTabs.ts`      | Chrome Tabs API 封装：获取活动标签页、获取域名、在新标签页打开扩展页面                              |
-| `clipboard.ts`       | 剪贴板操作：`copyTextToClipboard`（文本）、`copyImageToClipboard`（图片）                           |
-| `messages.ts`        | 扩展消息通信：基于 `@webext-core/messaging`，定义 `MessageAction` 枚举和 `ProtocolMap` 类型安全映射 |
-| `contextMenu.ts`     | 右键菜单配置与操作：定义菜单项、创建菜单、解析点击事件、ID→PageType 映射                            |
-| `base64Converter.ts` | Base64 编解码：文本↔Base64、文件↔Base64、图片预览，定义文件大小限制和图像 MIME 类型                 |
-| `jwt.ts`             | JWT 解析：Base64URL 解码、解析 Header/Payload/Signature、JSON 格式化输出                            |
-| `jsonFormatter.ts`   | JSON 格式化/压缩：支持缩进、按键排序、minify                                                        |
-| `jsonToYaml.ts`      | JSON→YAML 转换                                                                                      |
-| `jsonToToml.ts`      | JSON→TOML 转换                                                                                      |
-| `markdownToHtml.ts`  | Markdown→HTML 转换：基于 `marked` 库，支持 GFM 和换行转换                                           |
-| `htmlToMarkdown.ts`  | HTML→Markdown 转换：基于 DOMParser 解析                                                             |
-| `qrCodeParser.ts`    | 二维码解析：基于 `qr-scanner` 库从文件中解析二维码                                                  |
-| `storageCleaner.ts`  | 存储清理：获取当前标签页、检测受限 URL、计算 Cookie/Storage 大小、清理操作                          |
-| `textStatistics.ts`  | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
-| `format.ts`          | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
-| `dayjs.ts`           | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
-
-## 自定义 Hooks
-
-| 文件                    | 用途                                                                                                           |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `useStorageState.ts`    | Chrome Storage 状态 Hook：类似 `useState`，值自动同步到 `chrome.storage`，使用 `localStorage` 快照消除首屏闪烁 |
-| `useLazyTranslation.ts` | 懒加载翻译 Hook：按需动态导入 i18n 命名空间，支持预加载和缓存                                                  |
-| `useContextMenuData.ts` | 右键菜单数据 Hook：从 storage 读取待处理数据，匹配 featureKey 后消费并触发回调                                 |
-| `useDebounce.ts`        | 防抖 Hook：对值进行延迟更新，避免频繁触发                                                                      |
-
-## 使用约定
-
-- 工具函数使用**命名导出**（`export function xxx()`）
-- 工具函数**不抛异常**，返回包含 `hasError` 和 `error` 字段的结果对象
-- Hook 使用 `use` 前缀命名，定义返回值接口类型
-- 存储操作使用 `chromeStorage.ts` 的 `storageUtil` 封装，不要直接调用 `chrome.storage`
-- 消息通信使用 `messages.ts` 的 `sendMessage`/`onMessage`，不要使用原生 `chrome.runtime.sendMessage`
diff --git a/vitest.config.ts b/vitest.config.ts
index dd54924..ad42e97 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -24,7 +24,7 @@ export default defineConfig({
       ],
     },
     alias: {
-      '@': resolve(__dirname, './'),
+      '@': resolve(__dirname, './src'),
     },
   },
 });
diff --git a/wxt.config.ts b/wxt.config.ts
index a3bf45f..27e02cb 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -44,6 +44,7 @@ function manualChunksForHtmlOnly(): Plugin {
 
 export default defineConfig({
   modules: ['@wxt-dev/module-react'],
+  srcDir: 'src',
   manifest: {
     name: 'Testing Tool',
     description: 'A tool for testing web applications.',

From e140af76981bedf3409df01e6e4f6397cd343e89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 20:37:52 +0800
Subject: [PATCH 32/71] refactor: remove meaningless comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove 50+ noise comments across the codebase:
- AI-generated verbose prose (💡 emoji, '超进化', '大闸', etc.)
- Comments that restate what the code obviously does
- Comments about deleted code
- Import-level noise comments
- Overly verbose Chinese section markers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/SwitchButtonGroup.tsx          |  1 -
 src/entrypoints/content/uiPopover.ts          |  2 --
 src/pages/Base64Converter/TextMode.tsx        |  4 +---
 .../Base64Converter/useBase64Converter.ts     |  1 -
 src/pages/HtmlToMarkdown/index.tsx            |  2 +-
 src/pages/JsonTools/DiffNavigator.tsx         | 12 +++-------
 src/pages/JsonTools/DiffResult.tsx            | 11 ---------
 src/pages/JsonTools/JsonConvertSection.tsx    | 11 +++------
 src/pages/JsonTools/JsonDiffInput.tsx         |  2 --
 src/pages/JsonTools/JsonFormatSection.tsx     | 10 ++------
 src/pages/JsonTools/JsonTree.tsx              |  7 ------
 src/pages/JsonTools/diffEngine.ts             |  6 ++---
 src/pages/JsonTools/index.tsx                 | 11 ++++-----
 src/pages/Jwt/index.tsx                       |  7 +-----
 src/pages/MarkdownToHtml/index.tsx            |  3 ---
 src/pages/QrCode/components/GeneratePanel.tsx |  6 -----
 src/pages/QrCode/components/ParsePanel.tsx    |  9 -------
 src/pages/QrCode/contexts/QrCodeContext.ts    | 11 +++------
 src/pages/QrCode/hooks/useQrCode.ts           | 15 ------------
 src/pages/QrCode/index.tsx                    |  9 -------
 src/pages/StorageCleaner/CleaningResult.tsx   |  9 +------
 src/pages/StorageCleaner/ErrorDisplay.tsx     |  8 -------
 src/pages/StorageCleaner/OptionItem.tsx       | 11 ---------
 .../StorageCleaner/StorageCleanerConfirm.tsx  | 10 --------
 .../StorageCleaner/StorageOptionsGrid.tsx     | 13 ----------
 src/pages/Timestamp/LiveClock.tsx             | 10 --------
 src/pages/Timestamp/ResultView.tsx            | 10 --------
 src/pages/Timestamp/index.tsx                 | 24 -------------------
 src/pages/Timestamp/useTimestampConverter.ts  |  6 -----
 src/providers/AppRoot.tsx                     |  2 +-
 src/providers/RouterProvider.tsx              | 11 ++++-----
 src/providers/ThemeModeProvider.tsx           | 17 ++++---------
 src/utils/chromeI18n.ts                       |  1 -
 src/utils/htmlToMarkdown.ts                   |  2 --
 34 files changed, 32 insertions(+), 242 deletions(-)

diff --git a/src/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx
index 831ad7a..aee922f 100644
--- a/src/components/SwitchButtonGroup.tsx
+++ b/src/components/SwitchButtonGroup.tsx
@@ -51,7 +51,6 @@ 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',
diff --git a/src/entrypoints/content/uiPopover.ts b/src/entrypoints/content/uiPopover.ts
index a56511a..254df53 100644
--- a/src/entrypoints/content/uiPopover.ts
+++ b/src/entrypoints/content/uiPopover.ts
@@ -125,7 +125,6 @@ function getOrCreatePopover(): HTMLElement {
   return popover;
 }
 
-// 💡 2. 安全防线：字符实体转义沙箱，彻底掐灭任意恶意脚本的执行通道
 function escapeHtml(text: string): string {
   const map: Record<string, string> = {
     '&': '&amp;',
@@ -171,7 +170,6 @@ export function showPopover(
 ): void {
   const popover = getOrCreatePopover();
 
-  // 💡 3. 坚固的无障碍绑定：废除违规的行内 inline onclick，改用标准原生节点监听
   popover.innerHTML = '';
 
   if (title) {
diff --git a/src/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx
index 47fcf27..1079fc2 100644
--- a/src/pages/Base64Converter/TextMode.tsx
+++ b/src/pages/Base64Converter/TextMode.tsx
@@ -44,8 +44,6 @@ 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 };
@@ -112,7 +110,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}
diff --git a/src/pages/Base64Converter/useBase64Converter.ts b/src/pages/Base64Converter/useBase64Converter.ts
index e71ad3a..9701cc8 100644
--- a/src/pages/Base64Converter/useBase64Converter.ts
+++ b/src/pages/Base64Converter/useBase64Converter.ts
@@ -130,7 +130,6 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
     return '';
   }, [customFileName, decoded]);
 
-  // 💡 托管最大文件体积字符串算子，清除下游引入风险
   const maxFileSizeStr = `${MAX_FILE_SIZE / 1024 / 1024} MB`;
 
   return {
diff --git a/src/pages/HtmlToMarkdown/index.tsx b/src/pages/HtmlToMarkdown/index.tsx
index 4d0a00e..bf62a08 100644
--- a/src/pages/HtmlToMarkdown/index.tsx
+++ b/src/pages/HtmlToMarkdown/index.tsx
@@ -3,7 +3,7 @@ import { Download, Trash2 } from 'lucide-react';
 import { useI18n } from '@/utils/chromeI18n';
 import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
+import { Button } from '@/components/ui/button';
 import { useStorageState } from '@/utils/useStorageState';
 import type { HtmlToMarkdownPreviewMode } from '@/types/storage';
 import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
diff --git a/src/pages/JsonTools/DiffNavigator.tsx b/src/pages/JsonTools/DiffNavigator.tsx
index ffbd496..9298b39 100644
--- a/src/pages/JsonTools/DiffNavigator.tsx
+++ b/src/pages/JsonTools/DiffNavigator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+import { cn } from '@/lib/utils';
 
 export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
   total: number;
@@ -21,11 +21,9 @@ export default function DiffNavigator({
 }: DiffNavigatorProps) {
   const { t } = useI18n('jsonDiff');
 
-  // 计算当前的边界禁用状态守卫
   const isFirst = currentIndex <= 0;
   const isLast = currentIndex >= total - 1;
 
-  // 2. 空状态面板：对齐 shadcn 规范的中性低调卡片
   if (total === 0) {
     return (
       <div
@@ -45,9 +43,6 @@ export default function DiffNavigator({
   return (
     <div
       className={cn(
-        // 3. 完美适配暗黑模式：
-        // 废除 bg-primary/10，采用标准的低阻尼中性色 bg-secondary/60 配合 border-border/80，
-        // 在任何主题皮肤下都能呈现出高级的暗钛金控制栏质感。
         'inline-flex items-center justify-center gap-3 px-3 h-9 rounded-md border border-border/80 bg-secondary/60 shadow-sm',
         className,
       )}
@@ -62,13 +57,12 @@ export default function DiffNavigator({
         className={cn(
           'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-          'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截：触顶时优雅淡化并锁死点击
+          'disabled:pointer-events-none disabled:opacity-30',
         )}
       >
         <ChevronLeft className="h-4 w-4" />
       </button>
 
-      {/* 计数看板：强制等宽防止数字长短不一时产生宽度挤压跳动 */}
       <span className="text-xs font-bold font-mono min-w-[54px] text-center text-foreground/90 tabular-nums select-none">
         {currentIndex + 1} <span className="text-muted-foreground/60 font-sans mx-0.5">/</span>{' '}
         {total}
@@ -83,7 +77,7 @@ export default function DiffNavigator({
         className={cn(
           'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-          'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截：触底时优雅淡化并锁死点击
+          'disabled:pointer-events-none disabled:opacity-30',
         )}
       >
         <ChevronRight className="h-4 w-4" />
diff --git a/src/pages/JsonTools/DiffResult.tsx b/src/pages/JsonTools/DiffResult.tsx
index 733d231..7fb4fbd 100644
--- a/src/pages/JsonTools/DiffResult.tsx
+++ b/src/pages/JsonTools/DiffResult.tsx
@@ -4,7 +4,6 @@ import { cn } from '@/lib/utils';
 import JsonTree from './JsonTree';
 import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
 
-// 💡 顶层 Interface 继承原生 HTML 容器属性，扩展灵活性
 export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
   result: DiffResultType;
   viewMode: ViewMode;
@@ -39,10 +38,6 @@ export default function DiffResult({
   }
 
   return (
-    /* 1. 单栏拍平视图容器：
-      - 对齐 shadcn 规范，使用 bg-card、border-border 隔离。
-      - 注入 tabular-nums 配合 font-mono，消灭任何行高和字符抖动。
-    */
     <div
       className={cn(
         'rounded-xl border border-border bg-card font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-1.5',
@@ -79,8 +74,6 @@ const prefixForType = (type: DiffType): string => {
   return ' ';
 };
 
-// 2. 状态色彩超进化：
-// 拒绝硬编码实色系，全部换用高度安全的语义色变体与暗黑模式自适应。
 const typeThemeMap = {
   added: {
     text: 'text-emerald-600 dark:text-emerald-400',
@@ -191,7 +184,6 @@ interface UnifiedRowProps {
 }
 
 const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) => {
-  // 3. 高精度提取状态样式映射
   const currentTheme = typeThemeMap[type] || typeThemeMap.unchanged;
 
   return (
@@ -200,17 +192,14 @@ const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) =
         'flex items-start w-full font-mono py-0.5 select-text group',
         currentTheme.bg,
         currentTheme.text,
-        // 4. 高亮定位条：不再使用生硬的蓝圆环，改为现代编辑器的“侧边左高亮带”设计，质感直接拉满
         active &&
           'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500',
       )}
       style={{
-        // 维持高精度的 Padding 基线缩进
         paddingLeft: `${Math.max(0.5, depth * 1.25)}rem`,
         paddingRight: '0.5rem',
       }}
     >
-      {/* 5. 前缀标识：等宽锁定，强行占据 w-5 并让符号居中对齐，达成 VSCode 般的整洁排版 */}
       <span className="font-bold w-5 shrink-0 text-center select-none opacity-70 tabular-nums">
         {prefixForType(type)}
       </span>
diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx
index 84007ee..e2458bb 100644
--- a/src/pages/JsonTools/JsonConvertSection.tsx
+++ b/src/pages/JsonTools/JsonConvertSection.tsx
@@ -32,7 +32,7 @@ export default function JsonConvertSection({
 
   const pk = translationPrefix;
 
-  // 1. 高阶性能调优：将文本变化收拢进行 250ms 极速防抖落盘，避免每一次敲击键盘都触发底层的复杂序列化算法
+  // Debounce input
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedInput(input);
@@ -40,14 +40,10 @@ export default function JsonConvertSection({
     return () => clearTimeout(handle);
   }, [input]);
 
-  // 💡 2. 贯彻方案 A（衍生变量超进化）：
-  // 彻底删掉 error 状态和对应的受控 useEffect 节点。
-  // 语法错误由防抖文本在内存中同步推导，彻底斩断二次级联渲染链条，ESLint 警告自愈！
   const error = useMemo(() => {
     return validateJson(debouncedInput);
   }, [debouncedInput]);
 
-  // 3. 核心魔法：纯净的即时流式转换转换管线 (Live Compilation Pipeline)
   const conversionPipeline = useMemo(() => {
     const trimmed = debouncedInput.trim();
     if (!trimmed || error) return null;
@@ -63,7 +59,6 @@ export default function JsonConvertSection({
     }
   }, [debouncedInput, error, convertFunction]);
 
-  // 判定运行时异常
   const runtimeError =
     conversionPipeline && 'isRuntimeError' in conversionPipeline
       ? conversionPipeline.errorMessage
@@ -88,7 +83,7 @@ export default function JsonConvertSection({
         onClear={() => setInput('')}
       />
 
-      {/* 4. 结果展示或状态引导卡片区 */}
+      {/* Result display */}
       {result && result.output ? (
         <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
           {/* 结果栏精致头部 */}
@@ -130,7 +125,7 @@ export default function JsonConvertSection({
           </div>
         </div>
       ) : (
-        /* 5. 空状态提示容器：完美的中性虚线引导，不喧宾夺主 */
+        /* Empty state */
         <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
           <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
             {error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
diff --git a/src/pages/JsonTools/JsonDiffInput.tsx b/src/pages/JsonTools/JsonDiffInput.tsx
index 254cd15..2e0adca 100644
--- a/src/pages/JsonTools/JsonDiffInput.tsx
+++ b/src/pages/JsonTools/JsonDiffInput.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import { cn } from '@/lib/utils';
 
-// 💡 核心修复：使用 Omit<..., 'onChange'> 强行挖掉原生的 onChange 签名
-// 这样我们自定义的 (value: string) => void 就能独占鳌头，彻底消灭 TS2430 接口冲突！
 export interface JsonDiffInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: string;
   placeholder: string;
diff --git a/src/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/JsonFormatSection.tsx
index 99d175e..6c2ea44 100644
--- a/src/pages/JsonTools/JsonFormatSection.tsx
+++ b/src/pages/JsonTools/JsonFormatSection.tsx
@@ -21,7 +21,7 @@ export default function JsonFormatSection() {
   const [indentSize, setIndentSize] = useState<number>(2);
   const [sortKeys, setSortKeys] = useState(false);
 
-  // 1. 高频打字防抖落盘：防止大体积 JSON 在高频输入时发生卡顿
+  // Debounce input
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedInput(input);
@@ -29,14 +29,11 @@ export default function JsonFormatSection() {
     return () => clearTimeout(handle);
   }, [input]);
 
-  // 💡 2. 贯彻方案 A（衍生变量超进化）：
-  // 彻底删除原有的 setError 状态和相关的 useEffect。
-  // 语法错误由防抖文本在内存中同步推导，彻底斩断二次级联渲染链条，ESLint 警告瞬间消亡！
   const error = useMemo(() => {
     return validateJson(debouncedInput);
   }, [debouncedInput]);
 
-  // 3. 实时流式格式化管线
+  // Real-time formatting pipeline
   const formattedPipeline = useMemo(() => {
     const trimmed = debouncedInput.trim();
     if (!trimmed || error) return null;
@@ -149,9 +146,6 @@ export default function JsonFormatSection() {
             />
           </div>
 
-          {/* 核心格式化数据面板：
-            💡 修复点：移除了互相打架的 select-all 类名，仅保留纯正的代码高亮可选样式 select-text
-          */}
           <div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[420px] overflow-y-auto leading-relaxed select-text">
             {result.formatted}
           </div>
diff --git a/src/pages/JsonTools/JsonTree.tsx b/src/pages/JsonTools/JsonTree.tsx
index 597791d..ac510d0 100644
--- a/src/pages/JsonTools/JsonTree.tsx
+++ b/src/pages/JsonTools/JsonTree.tsx
@@ -38,7 +38,6 @@ const getValueForSide = (node: DiffNode, side: TreeSide): unknown => {
   return side === 'left' ? node.oldValue : node.newValue;
 };
 
-// 1. 核心状态色彩映射调色盘：完美自适应双色模式
 const typeThemeMap = {
   added: {
     text: 'text-emerald-600 dark:text-emerald-400',
@@ -62,10 +61,6 @@ const isContainerValue = (v: unknown): boolean => {
   return (typeof v === 'object' && v !== null) || Array.isArray(v);
 };
 
-/**
- * 💡 性能调优大闸：将 NodeRow 抽离为顶层独立组件并裹上 React.memo。
- * 配合精准的 Props Diff，使得某一行的展开闭合绝对不会连累到其他平级和上级节点。
- */
 const NodeRow = React.memo(
   ({ node, side, depth, defaultExpandDepth, activePath, isLastChild }: NodeRowProps) => {
     const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto');
@@ -113,8 +108,6 @@ const NodeRow = React.memo(
     const isActive = activePath === node.path;
     const isRoot = depth === 0;
 
-    // 缩进样式封装：
-    // 💡 视觉魔法：通过在左侧追加 before 细线，在每一层级下自动垂下一条优雅的 IDE 级“缩进指引线”
     const indentStyle = {
       paddingLeft: `${Math.max(0.25, depth * 1.15)}rem`,
     };
diff --git a/src/pages/JsonTools/diffEngine.ts b/src/pages/JsonTools/diffEngine.ts
index 78c1889..cb4b720 100644
--- a/src/pages/JsonTools/diffEngine.ts
+++ b/src/pages/JsonTools/diffEngine.ts
@@ -43,7 +43,7 @@ const diffNode = (
     return {
       key,
       type: 'added',
-      oldValue: undefined, // 💡 补齐：对齐移除 ? 后的类型规范
+      oldValue: undefined,
       newValue: right,
       path,
       isLeaf: !isObject(right) && !isArray(right),
@@ -58,7 +58,7 @@ const diffNode = (
       key,
       type: 'removed',
       oldValue: left,
-      newValue: undefined, // 💡 补齐：对齐移除 ? 后的类型规范
+      newValue: undefined,
       path,
       isLeaf: !isObject(left) && !isArray(left),
       hasDiffInChildren: false, // 自身即是删除，子树无需向下检索
@@ -87,7 +87,6 @@ const diffNode = (
       children.push(diffNode(l, r, k, childPath, diffPaths));
     });
 
-    // 💡 核心改良：判定子节点中是否存在任何变动
     const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
 
     return {
@@ -115,7 +114,6 @@ const diffNode = (
       children[i] = diffNode(l, r, k, childPath, diffPaths);
     }
 
-    // 💡 核心改良：判定子项中是否存在任何变动
     const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
 
     return {
diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
index 5f105c2..e30e4d5 100644
--- a/src/pages/JsonTools/index.tsx
+++ b/src/pages/JsonTools/index.tsx
@@ -40,11 +40,11 @@ export default function Index() {
   const { t } = useI18n(['jsonDiff', 'jsonFormat']);
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
-  // 1. 受控原始输入源
+  // Debounce input
   const [leftInput, setLeftInput] = useState('');
   const [rightInput, setRightInput] = useState('');
 
-  // 2. 纯净的异步防抖管道：仅负责切断高频打字开销
+  // Debounced values
   const [debouncedLeft, setDebouncedLeft] = useState('');
   const [debouncedRight, setDebouncedRight] = useState('');
 
@@ -56,7 +56,7 @@ export default function Index() {
     return () => clearTimeout(handle);
   }, [leftInput, rightInput]);
 
-  // 3. 贯彻方案A：利用 useMemo 将防抖文本同步转化为解析树和错误提示
+  // Parse debounced inputs
   const parseState = useMemo(() => {
     const invalidMsg = t('jsonDiff:invalidJson');
     return {
@@ -71,7 +71,7 @@ export default function Index() {
   const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
   const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
 
-  // 4. 实时比对流式计算
+  // Real-time diff computation
   const diffResult = useMemo(() => {
     const { left, right } = parseState;
     if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
@@ -80,9 +80,6 @@ export default function Index() {
     return diffJson(left.value, right.value);
   }, [parseState, debouncedLeft, debouncedRight]);
 
-  // 💡 彻底删除了原本在此处的侦听 [diffResult] 的 useEffect。
-  // 状态重置已完全委托给事件源头，级联更新警告从根源上永久自愈！
-
   const total = diffResult?.diffPaths.length ?? 0;
 
   const handlePrev = useCallback(() => {
diff --git a/src/pages/Jwt/index.tsx b/src/pages/Jwt/index.tsx
index 0300b10..6e37771 100644
--- a/src/pages/Jwt/index.tsx
+++ b/src/pages/Jwt/index.tsx
@@ -9,7 +9,7 @@ import { cn } from '@/lib/utils';
 interface SectionProps {
   title: string;
   content: unknown;
-  colorClass: string; // 💡 1. 废除硬编码十六进制色值，改用语义化的 Tailwind 类名
+  colorClass: string;
   bgClass: string;
   borderClass: string;
 }
@@ -27,10 +27,6 @@ const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionPr
           className="h-6 w-6 rounded-md border text-muted-foreground"
         />
       </div>
-      {/* 💡 排版微距精雕：
-        - 彻底移除 border-black/5 这种非暗黑模式友好的硬隔离。
-        - 统一收拢为标准的 bg-muted/40 配合 font-mono text-xs
-      */}
       <pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
         {content ? stringifyJson(content) : t('jwt:invalidFormat')}
       </pre>
@@ -59,7 +55,6 @@ export default function Index() {
 
   useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
 
-  // 3. 贯彻方案 A：衍生变量流。直接消费防抖后的文本
   const result = useMemo(() => {
     if (!debouncedInput.trim()) {
       return null;
diff --git a/src/pages/MarkdownToHtml/index.tsx b/src/pages/MarkdownToHtml/index.tsx
index 557ebcb..74a0418 100644
--- a/src/pages/MarkdownToHtml/index.tsx
+++ b/src/pages/MarkdownToHtml/index.tsx
@@ -18,7 +18,6 @@ import { cn } from '@/lib/utils';
 const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
   typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
 
-// 💡 规范回归：保持最纯净的通用选择器集合，内部变量全部交由全局 :root 驱动
 const PREVIEW_STYLES = `
   .markdown-body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -94,7 +93,6 @@ export default function MarkdownToHtmlPage() {
   const result = useMemo(() => markdownToHtml(markdown), [markdown]);
   const error = result.hasError ? (result.error ?? null) : null;
 
-  // 💡 自适应大总管：以极高严谨度拼装明暗大闸，用标准换行切断粘连风险
   useEffect(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -123,7 +121,6 @@ export default function MarkdownToHtmlPage() {
           --md-link-color: #3b82f6;
         }`;
 
-    // 💡 3. 核心大清洗：将全局基础树（html, body）与派生样式完全独立硬编码，杜绝任何语法踩踏
     const baseGlobalStyles = `
       html, body { 
         margin: 0; 
diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
index 8dfab73..22cf88c 100644
--- a/src/pages/QrCode/components/GeneratePanel.tsx
+++ b/src/pages/QrCode/components/GeneratePanel.tsx
@@ -11,17 +11,12 @@ export default function GeneratePanel() {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
-      {/* 左翼：高性能受控输入翼终端 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
           'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
         )}
       >
-        {/* 💡 2. 独立外置标签架（A11y 无障碍对齐）：
-           - 彻底删掉 TextInputArea 上引发崩溃的违规属性。
-           - 改用正统的 <Label />，并注入标准的高度无障碍样式，间距比例极度平滑。
-        */}
         <div className="flex flex-col space-y-2.5 h-full">
           <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
             {t('qrCode:urlInputLabel')}
@@ -44,7 +39,6 @@ export default function GeneratePanel() {
         </div>
       </div>
 
-      {/* 右翼：活态二维码高精生成区 */}
       <div className="flex flex-col h-full">
         <QrCodePreview
           qrCodeDataUrl={generatorState.qrCodeDataUrl}
diff --git a/src/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
index eb4b543..bd84c56 100644
--- a/src/pages/QrCode/components/ParsePanel.tsx
+++ b/src/pages/QrCode/components/ParsePanel.tsx
@@ -18,7 +18,6 @@ export default function ParsePanel() {
       const items = e.clipboardData?.items;
       if (!items) return;
 
-      // 检查是否有图片
       for (let i = 0; i < items.length; i++) {
         if (items[i].type.startsWith('image/')) {
           e.preventDefault();
@@ -31,7 +30,6 @@ export default function ParsePanel() {
         }
       }
 
-      // 检查是否有 Base64 字符串
       const text = e.clipboardData?.getData('text/plain');
       if (text && text.startsWith('data:image/')) {
         e.preventDefault();
@@ -58,11 +56,7 @@ export default function ParsePanel() {
   }, [handlePaste]);
 
   return (
-    /* 💡 统一大视觉轴：
-       - 追加 p-0.5 微隔离，配合 gap-6 建立与生成面板（GeneratePanel）绝对像素对齐的网格天平。
-    */
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
-      {/* 左翼：图片接收/拖拽/剪贴板上传终端 */}
       <div className="flex flex-col h-full">
         <ImageUploader
           selectedFile={parserState.selectedFile}
@@ -75,16 +69,13 @@ export default function ParsePanel() {
         />
       </div>
 
-      {/* 右翼：高阶解析出码只读终端 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
-          // 💡 视觉对称增强：加入相同的聚焦变量环联动，使双翼权重达成完美绝对平衡
           'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
         )}
       >
         <div className="flex flex-col space-y-2.5 h-full">
-          {/* 💡 修复点：物理剔除 TextInputArea 上的违规 title，改用符合 Vercel 美学的极致大写极细原子标签 */}
           <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
             {t('qrCode:resultLabel')}
           </Label>
diff --git a/src/pages/QrCode/contexts/QrCodeContext.ts b/src/pages/QrCode/contexts/QrCodeContext.ts
index 3e1b4ef..fe6d02f 100644
--- a/src/pages/QrCode/contexts/QrCodeContext.ts
+++ b/src/pages/QrCode/contexts/QrCodeContext.ts
@@ -1,23 +1,19 @@
-import type { Dispatch, SetStateAction } from 'react'; // 💡 1. 显式解构导入类型，彻底掐灭 TS2304 报错
+import type { Dispatch, SetStateAction } from 'react';
 import { createContext, useContext } from 'react';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
 export interface QrCodeContextValue {
-  // 核心主视图路由模式切换卡
   mode: QrCodeMode;
   setMode: (mode: QrCodeMode) => void;
 
-  // 1. 流式生成器终端状态机驱动
   generatorState: QrCodeGeneratorState;
   setTextToEncode: (text: string) => void;
-  // 💡 架构纯净化：物理剔除暴露给外部的命令式 generateQrCode 算子。
-  // 外部面板只需 setTextToEncode 驱动源文本更新，生成动作由内部流式管线全自动自发自愈完成！
+
   downloadQrCode: () => void;
   copyQrCode: () => Promise<void>;
 
-  // 2. 活态反向解析器终端状态机驱动
   parserState: QrCodeParserState;
-  setParserState: Dispatch<SetStateAction<QrCodeParserState>>; // 💡 规整为纯净的直接类型使用
+  setParserState: Dispatch<SetStateAction<QrCodeParserState>>;
   parseQrCode: (file: File) => Promise<void>;
   handleFileChange: (file: File) => void;
   handleClearFile: () => void;
@@ -28,7 +24,6 @@ export const QrCodeContext = createContext<QrCodeContextValue | null>(null);
 export function useQrCodeContext() {
   const context = useContext(QrCodeContext);
   if (!context) {
-    // 边界鲁棒性防护大闸
     throw new Error('useQrCodeContext must be used within a valid QrCodeProvider container');
   }
   return context;
diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index f6c1308..706cefd 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -12,10 +12,8 @@ export function useQrCode(): QrCodeContextValue {
   const { t } = useI18n('qrCode');
   const { showMessage } = useSnackbar();
 
-  // 核心路由视图模式
   const [mode, setMode] = useState<QrCodeMode>('generate');
 
-  // 1. 生成器状态流（大幅瘦身：剔除 generating 状态）
   const [generatorState, setGeneratorState] = useState<
     Omit<QrCodeGeneratorState, 'generating' | 'qrCodeDataUrl'>
   >({
@@ -23,7 +21,6 @@ export function useQrCode(): QrCodeContextValue {
     inputError: '',
   });
 
-  // 2. 解析器状态流
   const [parserState, setParserState] = useState<QrCodeParserState>({
     decodedResult: '',
     parsing: false,
@@ -33,12 +30,8 @@ export function useQrCode(): QrCodeContextValue {
     dragging: false,
   });
 
-  // 3. 高频打字极速防抖
   const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
 
-  // 💡 4. 贯彻方案 A（无副作用超导管线）：
-  // 彻底删除原有的 generateQrCodeRef、3个 useEffect、1个 useRef 以及相关的复杂状态机。
-  // 二维码画布纯粹作为防抖文本的派生变量同步算出，0重绘死循环风险，体验平滑如镜！
   const qrCodeDataUrl = useMemo(() => {
     const text = debouncedTextToEncode.trim();
     if (!text) return '';
@@ -49,14 +42,12 @@ export function useQrCode(): QrCodeContextValue {
         url = 'https://' + url;
       }
 
-      // 💡 暗黑模式自适应大闸：实时嗅探系统 DOM 阶度
       const isDark = document.documentElement.classList.contains('dark');
 
       const qr = new QRious({
         value: url,
         size: 260,
         level: 'H',
-        // 暗黑模式下使用透明底、月白前景色；白天模式下使用标准现代黑白配
         foreground: isDark ? '#f3f4f6' : '#0f172a',
         background: isDark ? 'transparent' : '#ffffff',
       });
@@ -68,7 +59,6 @@ export function useQrCode(): QrCodeContextValue {
     }
   }, [debouncedTextToEncode]);
 
-  // 融合派生数据至完整状态体，满足外部组件强类型契合
   const fullGeneratorState = useMemo<QrCodeGeneratorState>(
     () => ({
       ...generatorState,
@@ -78,12 +68,10 @@ export function useQrCode(): QrCodeContextValue {
     [generatorState, qrCodeDataUrl],
   );
 
-  // 设置输入文本
   const setTextToEncode = useCallback((text: string) => {
     setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
   }, []);
 
-  // 处理右键菜单数据上下文
   const handleContextMenuData = useCallback((payload: string) => {
     setMode('generate');
     setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
@@ -119,7 +107,6 @@ export function useQrCode(): QrCodeContextValue {
     [t, showMessage],
   );
 
-  // 下载二维码
   const downloadQrCode = useCallback(() => {
     if (!qrCodeDataUrl) return;
 
@@ -130,7 +117,6 @@ export function useQrCode(): QrCodeContextValue {
     showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
   }, [qrCodeDataUrl, showMessage, t]);
 
-  // 复制二维码至剪贴板
   const copyQrCode = useCallback(async () => {
     if (!qrCodeDataUrl) return;
 
@@ -151,7 +137,6 @@ export function useQrCode(): QrCodeContextValue {
     }
   }, [qrCodeDataUrl, showMessage, t]);
 
-  // 处理文件选择
   const handleFileChange = useCallback(
     (file: File) => {
       setParserState((prev) => {
diff --git a/src/pages/QrCode/index.tsx b/src/pages/QrCode/index.tsx
index c63104f..8591e04 100644
--- a/src/pages/QrCode/index.tsx
+++ b/src/pages/QrCode/index.tsx
@@ -19,12 +19,7 @@ export default function Index() {
 
   return (
     <QrCodeContext.Provider value={qrCode}>
-      {/* 💡 统一视觉规范大超进化：
-         - 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁，开启标准的 w-full 全自适应包裹。
-         - 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4，接管系统级重排！
-      */}
       <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
-        {/* 流式中央控制切流卡：注入 sm 断点防御，防范单栏状态下发生变形 */}
         <div className="w-full sm:w-fit pt-0.5">
           <SwitchButtonGroup
             value={qrCode.mode}
@@ -34,10 +29,6 @@ export default function Index() {
           />
         </div>
 
-        {/* 💡 面板渲染沙箱：
-            - 在切流渲染时，利用独立的 mt-2 增加纵深边界线。
-            - 配合内部自带的双翼 Flex 聚焦大边框，形成坚固如铁的架构闭环！
-        */}
         <div className="w-full pt-1.5">
           {qrCode.mode === 'generate' ? (
             <div>
diff --git a/src/pages/StorageCleaner/CleaningResult.tsx b/src/pages/StorageCleaner/CleaningResult.tsx
index d6f658c..d546d09 100644
--- a/src/pages/StorageCleaner/CleaningResult.tsx
+++ b/src/pages/StorageCleaner/CleaningResult.tsx
@@ -3,7 +3,7 @@ import { CheckCircle, XCircle } from 'lucide-react';
 import type { CleaningResult as CleaningResultType } from '@/types/storage';
 import { formatCleaningResult } from '@/utils/storageCleaner';
 import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
+import { cn } from '@/lib/utils';
 
 interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
   result: CleaningResultType | null;
@@ -18,11 +18,6 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
 
   return (
     <div className={cn('w-full', className)} {...props}>
-      {/* 2. 彻底重构容器类名结构：
-        - 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
-        - 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
-        - 这样在明暗双色模式切换时，色彩会自动与背景完美融为一体。
-      */}
       <div
         className={cn(
           'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
@@ -31,14 +26,12 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
             : 'bg-destructive/5 border-destructive/20 text-destructive',
         )}
       >
-        {/* 3. 图标样式向系统语义全面对齐 */}
         {isSuccess ? (
           <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
         ) : (
           <XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
         )}
 
-        {/* 4. 文本排版细节微调 */}
         <span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
           {isSuccess
             ? formatCleaningResult(result, t)
diff --git a/src/pages/StorageCleaner/ErrorDisplay.tsx b/src/pages/StorageCleaner/ErrorDisplay.tsx
index 1e9ac17..2568831 100644
--- a/src/pages/StorageCleaner/ErrorDisplay.tsx
+++ b/src/pages/StorageCleaner/ErrorDisplay.tsx
@@ -10,7 +10,6 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
   const { t } = useI18n('storageCleaner');
 
   return (
-    // 1. 精简层级：单层外壳直接搞定居中、响应式高度与外部类名扩展
     <div
       className={cn(
         'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
@@ -18,13 +17,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
       )}
       {...props}
     >
-      {/* 2. 核心卡片容器：
-        - 彻底放弃 bg-red-50，改用标准的 bg-destructive/5（3%~5% 透明度的系统危险色）。
-        - 边框改为 border-destructive/20。
-        - 这样在黑夜模式下会自动完美混色，绝不刺眼。
-      */}
       <div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
-        {/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */}
         <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
           <AlertCircle className="h-5 w-5" />
         </div>
@@ -33,7 +26,6 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
           {error}
         </p>
 
-        {/* 次要提示文本维持柔和的中性高级灰 */}
         <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
           {t('storageCleaner:errorStandardOnly')}
         </p>
diff --git a/src/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/OptionItem.tsx
index 55f0f4b..18c7fe6 100644
--- a/src/pages/StorageCleaner/OptionItem.tsx
+++ b/src/pages/StorageCleaner/OptionItem.tsx
@@ -26,14 +26,9 @@ export default function OptionItem({
 
   return (
     <div
-      // 3. 跨越级交互升级：将外部容器升级为一个高度敏感的可点击 Tab 热区
       onClick={onChange}
       className={cn(
         'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
-        // 4. 彻底抛弃硬编码黄底：
-        // - 选中时：使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
-        // - 未选中时：保持透明 border-transparent，悬停呈现 bg-muted。
-        // 这样在暗黑模式下会自动无缝混色，极为深邃、高级。
         checked
           ? 'bg-primary/5 border-primary/30 shadow-sm'
           : 'bg-transparent border-transparent hover:bg-muted/70',
@@ -64,14 +59,8 @@ export default function OptionItem({
         )}
       </div>
 
-      {/* 5. 超进化：全面替换原生 input 标签
-        完美调用 shadcn 的 Checkbox 组件。它自带全站统一的主色（Primary）、
-        打钩选中时的平滑微放大缩放动效（Scale Animation），
-        并且阻止冒泡，防范与外层的全局覆盖点击事件产生双重冲突。
-      */}
       <Checkbox
         checked={checked}
-        // 阻止 Checkbox 自身的点击事件冒泡，因为外层 div 已经代理了点击逻辑
         onClick={(e) => e.stopPropagation()}
         onCheckedChange={onChange}
         className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
diff --git a/src/pages/StorageCleaner/StorageCleanerConfirm.tsx b/src/pages/StorageCleaner/StorageCleanerConfirm.tsx
index 452582c..b3397cc 100644
--- a/src/pages/StorageCleaner/StorageCleanerConfirm.tsx
+++ b/src/pages/StorageCleaner/StorageCleanerConfirm.tsx
@@ -34,11 +34,6 @@ export function StorageCleanerConfirm({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      {/* 💡 终极修复秘诀：
-        - 移除原来的 sm:max-w-[360px]，改用 max-w-[calc(100%-32px)] 或者是 w-[88%]。
-        - 这样无论插件弹窗多窄，它的左右两侧都必然会被强制挤出至少 16px 的完美空白护边！
-        - 将 p-5 转换为明确的 p-6，增大弹窗内部的呼吸感。
-      */}
       <DialogContent
         className={cn(
           'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
@@ -79,11 +74,6 @@ export function StorageCleanerConfirm({
           </div>
         </div>
 
-        {/* 底部操作按钮区：
-          💡 修复要点：
-          - 增加 pt-2 隔开上方危险条。
-          - 显式通过 w-full 配合 flex-col 铺满，在移动端/窄插件下垂直堆叠，最符合小屏直觉。
-        */}
         <DialogFooter className="flex flex-col gap-2 w-full pt-2">
           <Button
             variant="destructive"
diff --git a/src/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
index 338e664..6f2dfd9 100644
--- a/src/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -3,7 +3,6 @@ import type { StorageCleanerOptions } from '@/types/storage';
 import OptionItem from './OptionItem';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-// 1. 引入官方标准的 Checkbox 原子组件
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
@@ -51,12 +50,9 @@ export default function StorageOptionsGrid({
       )}
       {...props}
     >
-      {/* 核心网格区 */}
       <div className="p-3">
-        {/* 💡 优化点：加入 items-stretch，确保左右卡片高度绝对对齐 */}
         <div className="grid grid-cols-2 gap-2.5 items-stretch">
           {optionKeys.map(({ key, isCount }) => (
-            /* 💡 终极修复：直接把 key 挂在 OptionItem 上，移除了无意义的包裹 div */
             <OptionItem
               key={key}
               labelKey={`storageCleaner:options.${key}`}
@@ -69,10 +65,6 @@ export default function StorageOptionsGrid({
         </div>
       </div>
 
-      {/* 3. 全选功能底护栏超进化：
-        - 整体赋予 cursor-pointer 和 onClick，点击一整行都能触发全选。
-        - 悬停时自动变色提示可点击 (hover:bg-muted/50)。
-      */}
       <div
         onClick={handleToggleAll}
         className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
@@ -81,11 +73,6 @@ export default function StorageOptionsGrid({
           {t('storageCleaner:selectAll')}
         </Label>
 
-        {/* 4. 降维打击：调用标准的 shadcn/ui Checkbox
-          - 阻止冒泡：防止事件重复触发。
-          - 完美注入半选逻辑：当 allSelected 为 false 但 someSelected 为 true 时，
-            组件会自动呈现优雅的 "—" (减号) 半选视觉状态，向主流系统控制台高标准看齐！
-        */}
         <Checkbox
           checked={allSelected ? true : someSelected ? 'indeterminate' : false}
           onClick={(e) => e.stopPropagation()}
diff --git a/src/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/LiveClock.tsx
index a82ae4b..5e5e7b9 100644
--- a/src/pages/Timestamp/LiveClock.tsx
+++ b/src/pages/Timestamp/LiveClock.tsx
@@ -16,7 +16,6 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
   const { showMessage } = useSnackbar();
   const onUseNowRef = useRef(onUseNow);
 
-  // 1. 采用毫秒/秒的双态原子计数，避免无意义的重绘
   const [currentDisplay, setCurrentDisplay] = useState(() => {
     const initNow = Date.now();
     return {
@@ -36,21 +35,17 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
       const rightNow = Date.now();
       const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
 
-      // 性能核心：只有当生成的文本内容发生变化时，才触发 React 的 State 更新。
-      // 在“秒(s)”单位下，这可以让组件的渲染频率暴跌 90%，做到极度省电和高性能。
       setCurrentDisplay((prev) => {
         if (prev.text === nextText) return prev;
         return { rawTime: rightNow, text: nextText };
       });
     };
 
-    // 200ms 的高速低延迟轮询，比 1000ms 更具响应灵敏度，且因为上面有过滤，完全不用担心引发性能损耗
     const tickId = setInterval(tick, 200);
     return () => clearInterval(tickId);
   }, [unit]);
 
   const handleUseNow = useCallback(() => {
-    // 捕获真实极其精准的绝对时间戳
     onUseNowRef.current(currentDisplay.rawTime);
     showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
   }, [currentDisplay.rawTime, showMessage, t]);
@@ -58,9 +53,6 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
   return (
     <div
       className={cn(
-        // 3. 完美适配 shadcn 暗黑模式：
-        // 不再写死 bg-primary/10，改用更高级的 bg-secondary/50 和中性边框，
-        // 在任何主题色下都能表现得低调且极具质感。
         'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
         className,
       )}
@@ -70,12 +62,10 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
         {t('timestamp:currentTs')}
       </span>
 
-      {/* 4. tabular-nums 强制使用等宽数字布局，彻底消灭数字跳动时字符宽度不同带来的抖动颤噪感 */}
       <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
         {currentDisplay.text}
       </span>
 
-      {/* 5. 按钮重构成精巧的 shadcn 原子微动效风格 */}
       <button
         type="button"
         onClick={handleUseNow}
diff --git a/src/pages/Timestamp/ResultView.tsx b/src/pages/Timestamp/ResultView.tsx
index 00981fa..c43be42 100644
--- a/src/pages/Timestamp/ResultView.tsx
+++ b/src/pages/Timestamp/ResultView.tsx
@@ -67,11 +67,6 @@ const ResultView = React.memo(
           {t('timestamp:resultLabel')}
         </span>
 
-        {/*
-          2. 核心结果大卡片：
-          对齐 shadcn 官方卡片风格，使用 bg-card、border-border 构筑多层级阴影。
-          核心数值直接拉粗为 text-foreground (在黑夜模式下会自动转为大气的纯白，完美避开刺眼强光)
-        */}
         <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
           <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
             {result}
@@ -83,11 +78,6 @@ const ResultView = React.memo(
           />
         </div>
 
-        {/*
-          3. 衍生的附加参考数据区：
-          背景改为低饱和度的 bg-muted/40 隔离带。
-          内部数值降级为 text-muted-foreground，建立教科书般的完美“视觉权重层级”。
-        */}
         <div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
           {[
             { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
diff --git a/src/pages/Timestamp/index.tsx b/src/pages/Timestamp/index.tsx
index eb215a3..0fc6ad5 100644
--- a/src/pages/Timestamp/index.tsx
+++ b/src/pages/Timestamp/index.tsx
@@ -6,7 +6,6 @@ import { useTimestampConverter } from './useTimestampConverter';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
-// 1. 引入标准的 shadcn/ui 原子表单组件（代替原生的原生 Input 和 Select）
 import { Input } from '@/components/ui/input';
 import {
   Select,
@@ -19,7 +18,6 @@ import {
 export default function Index() {
   const { t } = useI18n('timestamp');
 
-  // 2. 完美对接全新重构后的统一单源响应式 Hook
   const {
     mode,
     input,
@@ -37,15 +35,11 @@ export default function Index() {
   return (
     <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
       <div className="max-w-7xl mx-auto p-4 sm:p-6 space-y-4">
-        {/* 动态参考信息时钟条 */}
         <LiveClock unit={unit} onUseNow={handleUseNow} />
 
-        {/* 核心工作台网格：桌面端 md+ 左右等宽分栏；移动端单栏堆叠 */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
-          {/* 左栏：转换工作台 */}
           <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
             <div className="flex flex-col gap-4">
-              {/* 模式选择切换组 */}
               <SwitchButtonGroup
                 value={mode}
                 options={[
@@ -56,12 +50,7 @@ export default function Index() {
                 size="small"
               />
 
-              {/* 输入交互区 */}
               <div className="flex flex-col gap-1.5">
-                {/*
-                  3. 替换为标准的 shadcn <Input /> 组件：
-                  享受原生高水准的 focus-visible 环形动画响应。
-                */}
                 <Input
                   type="text"
                   placeholder={
@@ -75,13 +64,10 @@ export default function Index() {
                   )}
                 />
 
-                {/* 错误自愈提示 */}
                 {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
               </div>
 
-              {/* 核心配置群：单位切换 + 时区选择紧凑横排 */}
               <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
-                {/* 时间精度单位选择 */}
                 <SwitchButtonGroup
                   value={unit}
                   options={[
@@ -93,10 +79,6 @@ export default function Index() {
                   className="sm:w-auto shrink-0" // 窄屏下全宽，宽屏下自适应收缩
                 />
 
-                {/*
-                  4. 降维打击：将原生 <select> 强行超进化为标准的 shadcn <Select>：
-                  全操作系统的样式绝对一致，完美融合暗黑模式，悬浮弹窗自带微距磨砂玻璃阻尼动效。
-                */}
                 <Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
                   <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
                     <SelectValue placeholder="选择时区" />
@@ -115,14 +97,8 @@ export default function Index() {
                 </Select>
               </div>
             </div>
-
-            {/*
-              5. 彻底移除了原先丑陋的手动 convert 按钮！
-              在响应式 Hook 的加持下，此处留白或由排版自然撑开，界面视觉极其干净。
-            */}
           </div>
 
-          {/* 右栏：结果实时流展示卡片 */}
           <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
             <ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
           </div>
diff --git a/src/pages/Timestamp/useTimestampConverter.ts b/src/pages/Timestamp/useTimestampConverter.ts
index 4a67f56..16508e9 100644
--- a/src/pages/Timestamp/useTimestampConverter.ts
+++ b/src/pages/Timestamp/useTimestampConverter.ts
@@ -31,11 +31,8 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
   const [unit, setUnit] = useState<UnitType>('ms');
   const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
 
-  // 1. 唯一受控源：不再区分 ts/dt，输入框在当前模式下展现的就是它的值
   const [input, setInput] = useState(() => String(Date.now()));
 
-  // 2. 核心魔法：利用 useMemo 达成 0 延迟响应式转换 (Reactive Pipeline)
-  // 只要 input, mode, unit, zone 任何一个发生改变，结果和错误信息自动流出，废除 convert 按钮
   const conversionPipeline = useMemo(() => {
     const rawInput = input.trim();
     if (!rawInput) return { result: '', error: '' };
@@ -63,7 +60,6 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
 
   const { result, error } = conversionPipeline;
 
-  // 3. 处理右键菜单联动（直接修改唯一的 input，衍生转换自动触发）
   const handleContextMenuData = useCallback((payload: string) => {
     const trimmed = payload.trim();
     if (isTimestampLike(trimmed)) {
@@ -96,8 +92,6 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     [mode, unit, zone],
   );
 
-  // 4. 尊享级连贯交互：切换 Mode 时，自动把上一个模式计算出的结果喂进输入框
-  // 比如：输入时间戳 -> 得到日期 -> 切换模式 -> 日期直接进入输入框，方便用户进行微调反向转换
   const handleSetMode = useCallback(
     (newMode: 'ts2dt' | 'dt2ts') => {
       setMode(newMode);
diff --git a/src/providers/AppRoot.tsx b/src/providers/AppRoot.tsx
index d22b99c..ac52fad 100644
--- a/src/providers/AppRoot.tsx
+++ b/src/providers/AppRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeModeProvider } from './ThemeModeProvider';
-import { RouterProvider } from './RouterProvider'; // 💡 1. 全局合龙：引入满血重构的路由中枢
+import { RouterProvider } from './RouterProvider';
 
 interface AppRootProps {
   children: React.ReactNode;
diff --git a/src/providers/RouterProvider.tsx b/src/providers/RouterProvider.tsx
index 5f04c43..33763e2 100644
--- a/src/providers/RouterProvider.tsx
+++ b/src/providers/RouterProvider.tsx
@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { browser } from 'wxt/browser'; // 💡 1. 规范回归：引入 WXT 标准多端一致性代理空间
+import { browser } from 'wxt/browser';
 import type { ContextMenuPendingData, PageType, StorageSchema } from '@/types/storage';
 import { storageUtil } from '@/utils/chromeStorage';
 import {
@@ -96,7 +96,7 @@ export function RouterProvider({
   visiblePagesKey = 'app/visiblePages',
   pageOrderKey = 'app/pageOrder',
 }: RouterProviderProps) {
-  // 1. 初始化派生状态流（0 延迟快照同步）
+  // 1. Initialize state with sync snapshot
   const [currentPage, setCurrentPage] = useState<PageType>(() =>
     getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
   );
@@ -153,7 +153,7 @@ export function RouterProvider({
     }
   }, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
 
-  // 副作用 1：组件挂载时，激活初始路由校验与右键菜单传递载荷（Context Payload）的嗅探
+  // Load initial data from async storage on mount
   useEffect(() => {
     let cancelled = false;
 
@@ -162,7 +162,7 @@ export function RouterProvider({
       .then(() => {
         if (cancelled) return;
 
-        // 检查 URL 参数中的右键菜单高阶中转数据
+        // Check URL params for context menu data
         if (typeof window !== 'undefined') {
           const params = new URLSearchParams(window.location.search);
           const feature = params.get('feature') as PageType | null;
@@ -182,7 +182,7 @@ export function RouterProvider({
           }
         }
 
-        // 检查 storage 中的右键菜单待处理数据（针对 openPopup 的闭环场景）
+        // Check storage for pending context menu data
         storageUtil
           .get('contextMenu/pendingData', undefined)
           .then((pendingData) => {
@@ -276,7 +276,6 @@ export function RouterProvider({
       }
     };
 
-    // 💡 修复点：全域绑定 WXT 跨浏览器代理监听器，彻底闭环多端多进程广播
     browser.storage.onChanged.addListener(handleStorageChange);
     return () => {
       browser.storage.onChanged.removeListener(handleStorageChange);
diff --git a/src/providers/ThemeModeProvider.tsx b/src/providers/ThemeModeProvider.tsx
index 2f4d98b..7a7b75c 100644
--- a/src/providers/ThemeModeProvider.tsx
+++ b/src/providers/ThemeModeProvider.tsx
@@ -7,7 +7,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { browser } from 'wxt/browser'; // 💡 1. 规范回归：引入 WXT 标准多端一致性代理，消灭裸奔的 chrome 空间
+import { browser } from 'wxt/browser';
 import { storageUtil } from '@/utils/chromeStorage';
 
 export type ThemeMode = 'light' | 'dark' | 'system';
@@ -59,18 +59,15 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     mode === 'system' ? getSystemMode() : mode,
   );
 
-  // 统一的实态转换调度中枢
   const updateResolved = useCallback((nextMode: ThemeMode) => {
     setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode);
   }, []);
 
-  // 主动切流触发大闸
   const setMode = useCallback(
     (next: ThemeMode) => {
       setModeState(next);
       updateResolved(next);
 
-      // 💡 修复点：对异步微任务链追加标准的显式 void 断链安全隔离，彻底净化 Linter 悬空 Promise 警告
       void storageUtil.set(THEME_MODE_KEY, next).catch((err) => {
         console.error('[Theme Storage Error] Failed to persistent theme state:', err);
       });
@@ -84,7 +81,7 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     [updateResolved],
   );
 
-  // 副作用 1：冷启动时异步对齐来自长期存储的权威配置，自愈快照偏差
+  // Sync theme from storage on mount
   useEffect(() => {
     let cancelled = false;
     storageUtil
@@ -104,7 +101,7 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     };
   }, [updateResolved]);
 
-  // 副作用 2：当处于跟随系统模式下，动态监听操作系统级别的高级霓虹换色
+  // Listen for system theme changes when in system mode
   useEffect(() => {
     if (mode !== 'system') return;
     const mq = window.matchMedia('(prefers-color-scheme: dark)');
@@ -115,15 +112,12 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     return () => mq.removeEventListener('change', handler);
   }, [mode]);
 
-  // 副作用 3：跨上下文广播事件同步大闸（Popup <-> Sidepanel 联动核心）
+  // Sync theme across extension contexts (popup <-> sidepanel)
   useEffect(() => {
-    // 💡 2. 强类型对齐修复：对齐标准的 browser.storage.onChanged.addListener 签名规范
     const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
       if (changes[THEME_MODE_KEY]) {
         const next = changes[THEME_MODE_KEY].newValue;
         if (isValidMode(next)) {
-          // 💡 3. 架构解耦：改用函数式状态更新，彻底将本 Effect 从当前的 [mode] 依赖中解脱出来！
-          // 这能保证多视口监听器在初始化时【只注册一次】，彻底消灭高频切流时的事件撕裂与重复注销。
           setModeState((currentMode) => {
             if (next !== currentMode) {
               updateResolved(next);
@@ -139,9 +133,8 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     return () => {
       browser.storage.onChanged.removeListener(handleStorageChange);
     };
-  }, [updateResolved]); // 👈 完美剔除 mode 脏依赖！
+  }, [updateResolved]);
 
-  // 副作用 4：宿主 DOM 的 class 样式原子映射注入（一帧直出）
   useEffect(() => {
     if (typeof document !== 'undefined') {
       document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
diff --git a/src/utils/chromeI18n.ts b/src/utils/chromeI18n.ts
index d275b01..bca3a99 100644
--- a/src/utils/chromeI18n.ts
+++ b/src/utils/chromeI18n.ts
@@ -48,7 +48,6 @@ export function useI18n(namespace?: string | string[]) {
       }
     }
 
-    // 处理插值
     if (options) {
       for (const [placeholder, value] of Object.entries(options)) {
         message = message.replace(`{{${placeholder}}}`, String(value));
diff --git a/src/utils/htmlToMarkdown.ts b/src/utils/htmlToMarkdown.ts
index 716b29d..bdcf358 100644
--- a/src/utils/htmlToMarkdown.ts
+++ b/src/utils/htmlToMarkdown.ts
@@ -41,7 +41,6 @@ export function htmlToMarkdown(html: string): HtmlToMarkdownResult {
     const parser = new DOMParser();
     const doc = parser.parseFromString(trimmed, 'text/html');
 
-    // 检查解析错误
     const parserError = doc.querySelector('parsererror');
     if (parserError) {
       return {
@@ -225,7 +224,6 @@ function convertTable(table: HTMLElement): string {
 
   const lines: string[] = [];
 
-  // 处理表头
   const headerRow = rows[0];
   const headerCells = Array.from(headerRow.querySelectorAll('th, td'));
   const headers = headerCells.map((cell) => (cell.textContent ?? '').trim());

From ca4bfc33fd5f9a11a8fdfd90eac38bce976780de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 20:57:08 +0800
Subject: [PATCH 33/71] refactor: clean up unused code and simplify imports

- Remove unused imports and variables across 35 files
- Simplify component logic and remove dead code
- Clean up test files by removing unnecessary setup
- Streamline CI workflow configuration

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/workflows/ci.yml                         | 11 -----------
 eslint.config.ts                                 | 15 +--------------
 src/components/RouterContainer.tsx               | 16 ++++------------
 src/components/SwitchButtonGroup.tsx             |  6 ++----
 src/components/TextInputArea.tsx                 |  5 +----
 src/components/TopBar.tsx                        |  8 +-------
 src/components/__tests__/ImageUploader.test.tsx  |  3 ---
 src/components/__tests__/QrCodePreview.test.tsx  |  2 --
 .../__tests__/StorageCleanerConfirm.test.tsx     |  4 ----
 .../__tests__/SwitchButtonGroup.test.tsx         |  3 ---
 src/components/__tests__/TextInputArea.test.tsx  |  1 -
 src/components/__tests__/TopBar.test.tsx         |  1 -
 src/entrypoints/background.ts                    |  6 ------
 src/entrypoints/content/uiPopover.ts             |  2 +-
 src/pages/Base64Converter/TextMode.tsx           |  3 ---
 src/pages/Base64Converter/index.tsx              |  2 +-
 src/pages/JsonTools/DiffResult.tsx               |  2 --
 src/pages/JsonTools/JsonConvertSection.tsx       |  8 +-------
 src/pages/JsonTools/index.tsx                    |  4 ++--
 src/pages/QrCode/__tests__/index.test.tsx        |  5 -----
 src/pages/StorageCleaner/StorageOptionsGrid.tsx  |  4 +---
 src/pages/StorageCleaner/index.tsx               |  2 +-
 src/pages/StorageCleaner/useStorageCleaner.ts    |  2 +-
 src/pages/TextStatistics/index.tsx               |  1 -
 src/pages/Timestamp/LiveClock.tsx                |  4 +---
 src/pages/Timestamp/ResultView.tsx               |  8 +++-----
 src/pages/Timestamp/index.tsx                    |  2 +-
 src/pages/Timestamp/useTimestampConverter.ts     |  2 +-
 src/providers/RouterProvider.tsx                 |  2 --
 src/providers/__tests__/RouterProvider.test.tsx  |  8 --------
 src/utils/__tests__/jwt.test.ts                  | 12 ------------
 src/utils/__tests__/useStorageState.test.ts      |  5 ++---
 src/utils/chromeTabs.ts                          |  4 ----
 src/utils/qrCodeParser.ts                        |  4 ----
 src/utils/storageCleaner.ts                      |  5 +----
 35 files changed, 26 insertions(+), 146 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ae16e93..c494b8a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,8 +13,6 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  # 💡 1. 提速核心：前置基建节点（Infrastructure Initialization）
-  # 专门负责锁死环境、同步下载并缓存 node_modules，下游节点直接满血复用！
   setup:
     name: Prepare Dependencies
     runs-on: ubuntu-latest
@@ -29,7 +27,6 @@ jobs:
         with:
           node-version: '22'
 
-      # 建立基于 package-lock.json 唯一哈希的缓存大闸
       - name: Cache Node Modules
         id: cache-nodemodules
         uses: actions/cache@v4
@@ -47,7 +44,6 @@ 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
@@ -70,7 +66,6 @@ jobs:
       - name: Run ESLint
         run: npm run lint
 
-  # 💡 3. 强类型守卫节点（2秒瞬时恢复，开箱即查）
   typecheck:
     name: TypeScript Check
     runs-on: ubuntu-latest
@@ -96,7 +91,6 @@ jobs:
       - name: Run TypeScript type check
         run: npm run typecheck
 
-  # 💡 4. 单元测试节点（无缝运行你刚刚修复完的 setupTests.ts 套件）
   test:
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -122,16 +116,12 @@ 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:
@@ -149,7 +139,6 @@ jobs:
           path: node_modules
           key: ${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}
 
-      # 💡 动态代理编译指令：完美匹配 WXT / 各类多端打包器的标准构建命令
       - name: Generate WXT types
         run: npx wxt prepare
 
diff --git a/eslint.config.ts b/eslint.config.ts
index fd0db65..28b8cab 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,16 +5,13 @@ 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: {
@@ -26,7 +23,6 @@ export default tseslint.config(
     },
   },
 
-  // 4. 核心业务全受控大管线（Hooks, Entrypoints, Components 统一护航）
   {
     files: ['src/**/*.{ts,tsx}'],
     ignores: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
@@ -37,17 +33,13 @@ 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,
@@ -59,24 +51,19 @@ 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',
     },
   },
diff --git a/src/components/RouterContainer.tsx b/src/components/RouterContainer.tsx
index 41bd145..179ebf8 100644
--- a/src/components/RouterContainer.tsx
+++ b/src/components/RouterContainer.tsx
@@ -4,35 +4,32 @@ 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'; // 1. 引入标准的 shadcn 工具函数
-import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示
+import { cn } from '@/lib/utils';
+import { AlertTriangle } from 'lucide-react';
 
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();
   const { t } = useI18n('common');
 
-  // 2. 稳定的动态动画类名映射
   const animationClass = useMemo(() => {
     return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
   }, [currentPage]);
 
   const entryPointType = 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,
       )}
     >
@@ -40,11 +37,6 @@ export default function RouterContainer() {
         fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
       >
         <PageErrorBoundary resetKey={currentPage}>
-          {/*
-            4. 路由防御拦截：
-            如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
-            渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
-          */}
           {MatchedComponent ? (
             <MatchedComponent />
           ) : (
diff --git a/src/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx
index aee922f..77368d1 100644
--- a/src/components/SwitchButtonGroup.tsx
+++ b/src/components/SwitchButtonGroup.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+import { cn } from '@/lib/utils';
 
 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'
@@ -15,7 +14,7 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
   options: SwitchOption<T>[];
   onChange: (value: T) => void;
   size?: 'small' | 'medium' | 'large';
-  buttonClassName?: string; // 替换原有的 buttonSx
+  buttonClassName?: string;
 }
 
 export default function SwitchButtonGroup<T extends string | number = string>({
@@ -27,7 +26,6 @@ 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',
diff --git a/src/components/TextInputArea.tsx b/src/components/TextInputArea.tsx
index 06666c7..fa79fab 100644
--- a/src/components/TextInputArea.tsx
+++ b/src/components/TextInputArea.tsx
@@ -121,10 +121,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   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;
@@ -132,14 +130,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     // 重置高度计算
     textArea.style.height = 'auto';
 
-    const computedMin = minRows * 24; // 每行粗略按 24px 计算
+    const computedMin = minRows * 24;
     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]);
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index dcf1e6e..e9cdba9 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -16,9 +16,8 @@ import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
 import { openExtensionPage } from '@/utils/chromeTabs';
 import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
+import { cn } from '@/lib/utils';
 
-// 常量配置抽取（无需写在全局变量或 styles 对象里）
 const SEARCH_HISTORY_LIMIT = 10;
 const SEARCH_HISTORY_DISPLAY = 5;
 
@@ -40,7 +39,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     window.close();
   };
 
-  // 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
@@ -51,7 +49,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // 从 Chrome Storage 异步初始化历史记录
   useEffect(() => {
     storageUtil
       .get('app/searchHistory', [])
@@ -61,7 +58,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       .catch((err) => console.error('加载搜索历史失败:', err));
   }, []);
 
-  // 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
   const searchResults = useMemo(() => {
     const query = searchQuery.trim().toLowerCase();
     if (!query) return [];
@@ -79,7 +75,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
   }, [searchHistory, searchQuery]);
 
-  // 新增/持久化历史记录
   const saveToHistory = async (query: string) => {
     if (!query.trim()) return;
     const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
@@ -104,7 +99,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
   const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
 
-  // 4. 健壮的键盘导航交互
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
 
diff --git a/src/components/__tests__/ImageUploader.test.tsx b/src/components/__tests__/ImageUploader.test.tsx
index f98bcea..fcf48c0 100644
--- a/src/components/__tests__/ImageUploader.test.tsx
+++ b/src/components/__tests__/ImageUploader.test.tsx
@@ -13,7 +13,6 @@ const mockRevokeObjectURL = vi.fn();
 Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
 Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
 
-// 模拟 showMessage
 vi.mock('@/components/GlobalSnackbar', () => ({
   useSnackbar: () => ({
     showMessage: vi.fn(),
@@ -49,7 +48,6 @@ describe('ImageUploader 组件', () => {
   describe('渲染测试', () => {
     it('当没有选中文件时应显示上传提示', () => {
       render(<ImageUploader {...defaultProps} />);
-      // 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
       expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
       expect(screen.getByText(/格式/)).toBeInTheDocument();
     });
@@ -65,7 +63,6 @@ describe('ImageUploader 组件', () => {
         <ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
       );
       expect(screen.getByText('test.png')).toBeInTheDocument();
-      // 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
       expect(screen.getByText(/点击更换/)).toBeInTheDocument();
     });
 
diff --git a/src/components/__tests__/QrCodePreview.test.tsx b/src/components/__tests__/QrCodePreview.test.tsx
index ed5251c..2c6c8fc 100644
--- a/src/components/__tests__/QrCodePreview.test.tsx
+++ b/src/components/__tests__/QrCodePreview.test.tsx
@@ -18,7 +18,6 @@ describe('QrCodePreview 组件', () => {
   describe('渲染测试', () => {
     it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
-      // 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
       expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
     });
 
@@ -44,7 +43,6 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 3：切换为正则，无缝过检
       expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
     });
 
diff --git a/src/components/__tests__/StorageCleanerConfirm.test.tsx b/src/components/__tests__/StorageCleanerConfirm.test.tsx
index b529a11..3fd0bc7 100644
--- a/src/components/__tests__/StorageCleanerConfirm.test.tsx
+++ b/src/components/__tests__/StorageCleanerConfirm.test.tsx
@@ -4,7 +4,6 @@ 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 } };
@@ -41,8 +40,6 @@ describe('StorageCleanerConfirm 组件', () => {
   describe('渲染测试', () => {
     it('open 为 true 时应渲染对话框', () => {
       renderComponent();
-      // 💡 修复点 3：拥抱模糊正则断言。
-      // 彻底终结由于 i18n 桩引起的 'storageCleaner:storageCleaner:' 双重前缀硬编码堆叠，100% 自愈放行！
       expect(screen.getByRole('heading', { name: /确认清理/ })).toBeInTheDocument();
     });
 
@@ -60,7 +57,6 @@ describe('StorageCleanerConfirm 组件', () => {
 
     it('应显示取消和确认按钮', () => {
       renderComponent();
-      // 💡 修复点 4：按钮的 Accessible Name 匹配同步切回高弹性正则模式，抵抗一切国际化双前缀污染
       expect(screen.getByRole('button', { name: /取消/ })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: /确认清理/ })).toBeInTheDocument();
     });
diff --git a/src/components/__tests__/SwitchButtonGroup.test.tsx b/src/components/__tests__/SwitchButtonGroup.test.tsx
index cc108ac..de0492b 100644
--- a/src/components/__tests__/SwitchButtonGroup.test.tsx
+++ b/src/components/__tests__/SwitchButtonGroup.test.tsx
@@ -21,9 +21,7 @@ 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');
   });
 
@@ -41,7 +39,6 @@ describe('SwitchButtonGroup 组件', () => {
     render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
 
     fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
-    // 新组件每次点击都会触发 onChange
     expect(handleChange).toHaveBeenCalledWith('a');
   });
 
diff --git a/src/components/__tests__/TextInputArea.test.tsx b/src/components/__tests__/TextInputArea.test.tsx
index 9603148..1e10a8e 100644
--- a/src/components/__tests__/TextInputArea.test.tsx
+++ b/src/components/__tests__/TextInputArea.test.tsx
@@ -353,7 +353,6 @@ describe('TextInputArea 组件', () => {
 
     it('readOnly 时输入框应只读', () => {
       render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
-      // MUI TextField 的 readOnly 通过 inputProps 设置，textarea 不会被禁用
       expect(screen.getByRole('textbox')).not.toBeDisabled();
     });
   });
diff --git a/src/components/__tests__/TopBar.test.tsx b/src/components/__tests__/TopBar.test.tsx
index a538fc5..e3b9460 100644
--- a/src/components/__tests__/TopBar.test.tsx
+++ b/src/components/__tests__/TopBar.test.tsx
@@ -6,7 +6,6 @@ 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) => ({
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index e2b5e63..4e05ad4 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -79,7 +79,6 @@ export default defineBackground(() => {
 
           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) {
@@ -93,7 +92,6 @@ export default defineBackground(() => {
             configurable: true,
           });
 
-          /* 2. 屏蔽 Event.prototype.stopPropagation / stopImmediatePropagation */
           const _origStopPropagation = Event.prototype.stopPropagation;
           Object.defineProperty(Event.prototype, 'stopPropagation', {
             value: function (this: Event) {
@@ -114,7 +112,6 @@ export default defineBackground(() => {
             configurable: true,
           });
 
-          /* 3. 拦截 document.oncontextmenu（处理 return false 方式） */
           let _docOnContextMenu: unknown = null;
           Object.defineProperty(document, 'oncontextmenu', {
             get() {
@@ -147,7 +144,6 @@ export default defineBackground(() => {
     }
   });
 
-  // 4. 异步刷新请求监听（统一使用 alarms API，避免 MV3 Service Worker 被销毁导致任务丢失）
   onMessage(MessageAction.RELOAD_TAB, async (message) => {
     const { tabId, delay = 0 } = message.data;
 
@@ -164,10 +160,8 @@ export default defineBackground(() => {
 
     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(() => {});
diff --git a/src/entrypoints/content/uiPopover.ts b/src/entrypoints/content/uiPopover.ts
index 254df53..1a6bafb 100644
--- a/src/entrypoints/content/uiPopover.ts
+++ b/src/entrypoints/content/uiPopover.ts
@@ -22,7 +22,7 @@ function injectStyles(): void {
       font-size: 13px;
       line-height: 1.5;
       opacity: 0;
-      visibility: hidden; /* 💡 1. 规整隐藏状态：允许排版引擎计算尺寸，同时阻断视觉呈现 */
+      visibility: hidden;
       transform: translateY(-8px);
       transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
       pointer-events: none;
diff --git a/src/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx
index 1079fc2..41f4d1b 100644
--- a/src/pages/Base64Converter/TextMode.tsx
+++ b/src/pages/Base64Converter/TextMode.tsx
@@ -22,12 +22,10 @@ interface TextModeProps {
 export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
   const { t } = useI18n('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);
@@ -35,7 +33,6 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
     return () => clearTimeout(handle);
   }, [input]);
 
-  // 3. 右键联动数据上下文：优雅原地合并受控状态
   const handleContextMenuData = useCallback((payload: string) => {
     setInput(payload);
     setDebouncedInput(payload);
diff --git a/src/pages/Base64Converter/index.tsx b/src/pages/Base64Converter/index.tsx
index 32435f0..5dbd5a6 100644
--- a/src/pages/Base64Converter/index.tsx
+++ b/src/pages/Base64Converter/index.tsx
@@ -2,7 +2,7 @@ import { useI18n } from '@/utils/chromeI18n';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConverterPageMode } from '@/types/storage';
 import TextMode from './TextMode';
-import Base64ConverterSection from './Base64ConverterSection'; // ✅ 正确对接全新的一体化大组件
+import Base64ConverterSection from './Base64ConverterSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 
 const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
diff --git a/src/pages/JsonTools/DiffResult.tsx b/src/pages/JsonTools/DiffResult.tsx
index 7fb4fbd..58cc318 100644
--- a/src/pages/JsonTools/DiffResult.tsx
+++ b/src/pages/JsonTools/DiffResult.tsx
@@ -229,5 +229,3 @@ const stringifyMultiline = (v: unknown, depth: number): string => {
     return formatPrimitive(v);
   }
 };
-
-// 💡 彻底移除了文件底部引发 TS2484 冲突的 export type { DiffResultProps } 声明
diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx
index e2458bb..e35c76b 100644
--- a/src/pages/JsonTools/JsonConvertSection.tsx
+++ b/src/pages/JsonTools/JsonConvertSection.tsx
@@ -75,7 +75,7 @@ export default function JsonConvertSection({
         placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
         value={input}
         onChange={setInput}
-        externalError={error || runtimeError || undefined} // 融合语法错误与运行时转换错误
+        externalError={error || runtimeError || undefined}
         showClear={true}
         allowCopy={true}
         minRows={7}
@@ -86,14 +86,12 @@ export default function JsonConvertSection({
       {/* Result display */}
       {result && result.output ? (
         <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
-          {/* 结果栏精致头部 */}
           <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
             <div className="flex gap-4 items-center">
               <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
                 {t(`jsonFormat:${pk}OutputLabel`)}
               </span>
 
-              {/* 字节比对注入 tabular-nums font-mono，防止容量大小变动时字符横向抽搐 */}
               <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
                 <span>
                   {t('jsonFormat:originalSize')}:{' '}
@@ -117,15 +115,11 @@ export default function JsonConvertSection({
             />
           </div>
 
-          {/* 转换出的数据流承载区：
-            💡 修复点：移除了互相冲突打架的 select-all 类名，仅保留纯净、支持自由划线选中的 select-text 样式 
-          */}
           <div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[380px] overflow-y-auto leading-relaxed select-text">
             {result.output}
           </div>
         </div>
       ) : (
-        /* Empty state */
         <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
           <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
             {error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
index e30e4d5..3b7fb2b 100644
--- a/src/pages/JsonTools/index.tsx
+++ b/src/pages/JsonTools/index.tsx
@@ -146,7 +146,7 @@ export default function Index() {
               value={leftInput}
               onChange={(val) => {
                 setLeftInput(val);
-                setCurrentDiffIndex(0); // 💡 在同一个用户键盘事件中打包批处理，0 副作用开销
+                setCurrentDiffIndex(0);
               }}
               error={leftError}
               minRows={9}
@@ -157,7 +157,7 @@ export default function Index() {
               value={rightInput}
               onChange={(val) => {
                 setRightInput(val);
-                setCurrentDiffIndex(0); // 💡 在同一个用户键盘事件中打包批处理，0 副作用开销
+                setCurrentDiffIndex(0);
               }}
               error={rightError}
               minRows={9}
diff --git a/src/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
index f4800d5..5c04ded 100644
--- a/src/pages/QrCode/__tests__/index.test.tsx
+++ b/src/pages/QrCode/__tests__/index.test.tsx
@@ -6,19 +6,16 @@ vi.mock('lucide-react', async (importOriginal) => {
   const actual = await importOriginal<typeof import('lucide-react')>();
   return {
     ...actual,
-    // 增量伪造需要高精嗅探的 QrCode 核心定位图标
     QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
   };
 });
 
-// Mock useSnackbar
 vi.mock('@/components/GlobalSnackbar', () => ({
   useSnackbar: () => ({
     showMessage: vi.fn(),
   }),
 }));
 
-// Mock getEntryPointType（保留原厂其他特征配置，仅模拟入口路由环境）
 vi.mock('@/config/features', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/config/features')>();
   return {
@@ -27,7 +24,6 @@ vi.mock('@/config/features', async (importOriginal) => {
   };
 });
 
-// Mock 高频变化的子组件，收拢断言边界
 vi.mock('@/components/QrCodePreview', () => ({
   default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
 }));
@@ -36,7 +32,6 @@ vi.mock('@/components/ImageUploader', () => ({
   default: () => <div data-testid="image-uploader">ImageUploader</div>,
 }));
 
-// Mock QRious 动态图像离屏生成引擎
 vi.mock('qrious', () => ({
   default: vi.fn().mockImplementation(() => ({
     toDataURL: () => 'data:image/png;base64,mock',
diff --git a/src/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
index 6f2dfd9..07a4334 100644
--- a/src/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -10,7 +10,7 @@ interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
   options: StorageCleanerOptions;
   sizes: Record<string, number>;
   allSelected: boolean;
-  someSelected: boolean; // 重新激活半选状态
+  someSelected: boolean;
   onOptionChange: (key: keyof StorageCleanerOptions) => void;
   onSelectAll: (checked: boolean) => void;
 }
@@ -36,9 +36,7 @@ export default function StorageOptionsGrid({
     { key: 'serviceWorkers', isCount: true },
   ];
 
-  // 2. 处理全选栏点击事件：包裹整个栏变成超级热区
   const handleToggleAll = () => {
-    // 如果当前已经是全选，点击则取消全选；否则，点击就是全选
     onSelectAll(!allSelected);
   };
 
diff --git a/src/pages/StorageCleaner/index.tsx b/src/pages/StorageCleaner/index.tsx
index 7456dfb..b582639 100644
--- a/src/pages/StorageCleaner/index.tsx
+++ b/src/pages/StorageCleaner/index.tsx
@@ -1,4 +1,4 @@
-import { Loader2 } from 'lucide-react'; // 引入标准的高级阻尼 Spinner 图标
+import { Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
 import { useStorageCleaner } from './useStorageCleaner';
diff --git a/src/pages/StorageCleaner/useStorageCleaner.ts b/src/pages/StorageCleaner/useStorageCleaner.ts
index 28dc5e1..5910df4 100644
--- a/src/pages/StorageCleaner/useStorageCleaner.ts
+++ b/src/pages/StorageCleaner/useStorageCleaner.ts
@@ -18,7 +18,7 @@ import {
 } from '@/utils/storageCleaner';
 import { MessageAction, sendMessage } from '@/utils/messages';
 import { useI18n } from '@/utils/chromeI18n';
-import { toast } from 'sonner'; // 1. 直接引用 shadcn 推荐的 Sonner 单例通知，踢出回调依赖
+import { toast } from 'sonner';
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
   localStorage: true,
diff --git a/src/pages/TextStatistics/index.tsx b/src/pages/TextStatistics/index.tsx
index a78c55a..ef96961 100644
--- a/src/pages/TextStatistics/index.tsx
+++ b/src/pages/TextStatistics/index.tsx
@@ -15,7 +15,6 @@ export default function Index() {
 
   useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
 
-  // 实时计算统计信息，由 useMemo 拦截非必要计算
   const stats = useMemo(() => getTextStats(text), [text]);
 
   const statItems = [
diff --git a/src/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/LiveClock.tsx
index 5e5e7b9..a314758 100644
--- a/src/pages/Timestamp/LiveClock.tsx
+++ b/src/pages/Timestamp/LiveClock.tsx
@@ -4,7 +4,7 @@ import CopyButton from '@/components/CopyButton';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import type { UnitType } from './constants';
 import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils'; // 引入标准的 shadcn 工具函数
+import { cn } from '@/lib/utils';
 
 interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
   unit: UnitType;
@@ -24,12 +24,10 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
     };
   });
 
-  // 始终保持外部回调指针最新
   useEffect(() => {
     onUseNowRef.current = onUseNow;
   }, [onUseNow]);
 
-  // 2. 高频高灵敏度计时器 (200ms 刷新率)
   useEffect(() => {
     const tick = () => {
       const rightNow = Date.now();
diff --git a/src/pages/Timestamp/ResultView.tsx b/src/pages/Timestamp/ResultView.tsx
index c43be42..71087a7 100644
--- a/src/pages/Timestamp/ResultView.tsx
+++ b/src/pages/Timestamp/ResultView.tsx
@@ -4,14 +4,14 @@ import CopyButton from '@/components/CopyButton';
 import type { UnitType } from './constants';
 import { DATE_FORMAT } from './constants';
 import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils'; // shadcn 核心类名合并工具
+import { cn } from '@/lib/utils';
 
 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
   result: string;
   mode: 'ts2dt' | 'dt2ts';
   unit: UnitType;
   zone: string;
-  /** 无结果时是否渲染占位（桌面端右栏使用），默认 false */
+
   showEmptyPlaceholder?: boolean;
 }
 
@@ -27,7 +27,6 @@ const ResultView = React.memo(
   }: ResultViewProps) => {
     const { t } = useI18n('timestamp');
 
-    // 严谨计算时间衍生的附加时区/相对时间状态
     const extraInfo = useMemo(() => {
       if (!result) return null;
       const d =
@@ -44,7 +43,6 @@ const ResultView = React.memo(
       };
     }, [result, mode, zone, unit]);
 
-    // 1. 空状态骨架面板：优雅匹配 shadcn 的中性灰色居中占位
     if (!result) {
       if (!showEmptyPlaceholder) return null;
       return (
@@ -95,7 +93,7 @@ const ResultView = React.memo(
                 <span
                   className={cn(
                     'text-xs text-foreground/90 font-medium break-all text-left sm:text-right tabular-nums',
-                    item.isMono && 'font-mono text-[11px]', // ISO/UTC 等机器时间使用精细化等宽代码体
+                    item.isMono && 'font-mono text-[11px]',
                   )}
                 >
                   {item.value}
diff --git a/src/pages/Timestamp/index.tsx b/src/pages/Timestamp/index.tsx
index 0fc6ad5..e554860 100644
--- a/src/pages/Timestamp/index.tsx
+++ b/src/pages/Timestamp/index.tsx
@@ -76,7 +76,7 @@ export default function Index() {
                   ]}
                   onChange={(v) => setUnit(v as 'ms' | 's')}
                   size="small"
-                  className="sm:w-auto shrink-0" // 窄屏下全宽，宽屏下自适应收缩
+                  className="sm:w-auto shrink-0"
                 />
 
                 <Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
diff --git a/src/pages/Timestamp/useTimestampConverter.ts b/src/pages/Timestamp/useTimestampConverter.ts
index 16508e9..31d8be8 100644
--- a/src/pages/Timestamp/useTimestampConverter.ts
+++ b/src/pages/Timestamp/useTimestampConverter.ts
@@ -7,7 +7,7 @@ import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
   mode: 'ts2dt' | 'dt2ts';
-  input: string; // 统一为单一受控输入源
+  input: string;
   unit: UnitType;
   zone: ZoneType;
   result: string;
diff --git a/src/providers/RouterProvider.tsx b/src/providers/RouterProvider.tsx
index 33763e2..badd823 100644
--- a/src/providers/RouterProvider.tsx
+++ b/src/providers/RouterProvider.tsx
@@ -96,7 +96,6 @@ export function RouterProvider({
   visiblePagesKey = 'app/visiblePages',
   pageOrderKey = 'app/pageOrder',
 }: RouterProviderProps) {
-  // 1. Initialize state with sync snapshot
   const [currentPage, setCurrentPage] = useState<PageType>(() =>
     getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
   );
@@ -153,7 +152,6 @@ export function RouterProvider({
     }
   }, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
 
-  // Load initial data from async storage on mount
   useEffect(() => {
     let cancelled = false;
 
diff --git a/src/providers/__tests__/RouterProvider.test.tsx b/src/providers/__tests__/RouterProvider.test.tsx
index 7a2cffa..9f55b9d 100644
--- a/src/providers/__tests__/RouterProvider.test.tsx
+++ b/src/providers/__tests__/RouterProvider.test.tsx
@@ -3,7 +3,6 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { RouterProvider, useRouter } from '@/providers/RouterProvider';
 import { storageUtil } from '@/utils/chromeStorage';
 
-// Mock storageUtil
 vi.mock('@/utils/chromeStorage', () => ({
   storageUtil: {
     get: vi.fn(),
@@ -11,7 +10,6 @@ vi.mock('@/utils/chromeStorage', () => ({
   },
 }));
 
-// Helper 辅助受控组件：用于实时嗅探并映射 useRouter 上下文状态
 const TestComponent = () => {
   const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
   return (
@@ -31,10 +29,6 @@ describe('RouterProvider', () => {
     vi.clearAllMocks();
     localStorage.clear();
 
-    // 💡 1. 核心修复点：
-    // - 采用标准的通用大对象 globalThis 代理，彻底掐灭 TS2304 报错。
-    // - 物理让 chrome 空间和统一多端 browser 空间共享相同的事件监听桩，
-    // - 完美承接生产代码内部全新升级的 browser.storage.onChanged 大闸！
     const storageOnChangedMock = {
       addListener: vi.fn(),
       removeListener: vi.fn(),
@@ -100,8 +94,6 @@ describe('RouterProvider', () => {
 
     const btn = screen.getByTestId('navigate-btn');
 
-    // 💡 2. 交互进化：废除高风险的原生 btn.click()，改用 Testing Library 的标准事件投递，
-    // 在一帧之内顺畅闭环受控状态改流，完美抹平悬空微任务警告。
     await act(async () => {
       fireEvent.click(btn);
     });
diff --git a/src/utils/__tests__/jwt.test.ts b/src/utils/__tests__/jwt.test.ts
index 31538c6..7cee19f 100644
--- a/src/utils/__tests__/jwt.test.ts
+++ b/src/utils/__tests__/jwt.test.ts
@@ -4,27 +4,15 @@ import { decodeBase64Url, parseJwt } from '@/utils/jwt';
 describe('jwt utils', () => {
   describe('decodeBase64Url', () => {
     it('should decode standard base64url', () => {
-      // "test" -> "dGVzdA"
       expect(decodeBase64Url('dGVzdA')).toBe('test');
     });
 
     it('should handle padding correctly', () => {
-      // "a" -> "YQ" (needs ==)
       expect(decodeBase64Url('YQ')).toBe('a');
-      // "ab" -> "YWI" (needs =)
       expect(decodeBase64Url('YWI')).toBe('ab');
     });
 
     it('should handle - and _ correctly', () => {
-      // Validating base64url specific chars
-      // standard base64 of binary 0xFF 0xEF is "/+8="
-      // base64url should be "_-8"
-      // Wait, let's use a simpler one.
-      // 0xFB 0xFF -> "+/8=" in base64, "-_8=" in base64url? No.
-      // + -> -
-      // / -> _
-      // let's try to encode something that results in + and /
-      // binary 0xFB 0xFF 0xBE -> "+/++" in base64 -> "-_--" in base64url
       expect(decodeBase64Url('-_--')).toBeDefined();
     });
 
diff --git a/src/utils/__tests__/useStorageState.test.ts b/src/utils/__tests__/useStorageState.test.ts
index c518841..642bddf 100644
--- a/src/utils/__tests__/useStorageState.test.ts
+++ b/src/utils/__tests__/useStorageState.test.ts
@@ -55,7 +55,7 @@ describe('useStorageState', () => {
     await waitFor(() => {
       // 异步加载后应覆盖为存储值
       expect(result.current[0]).toBe(false);
-      expect(result.current[2]).toBe(true); // isInitialized
+      expect(result.current[2]).toBe(true);
     });
   });
 
@@ -67,7 +67,7 @@ describe('useStorageState', () => {
     const { result } = renderHook(() => useStorageState('qrCode/urlExpanded', true));
 
     await waitFor(() => {
-      expect(result.current[2]).toBe(true); // isInitialized
+      expect(result.current[2]).toBe(true);
     });
 
     await act(async () => {
@@ -77,7 +77,6 @@ describe('useStorageState', () => {
     expect(result.current[0]).toBe(false);
     expect(storageUtil.set).toHaveBeenCalledWith('qrCode/urlExpanded', false);
 
-    // 应同时写入 localStorage 快照
     expect(localStorage.getItem('snapshot/qrCode/urlExpanded')).toBe(JSON.stringify(false));
   });
 
diff --git a/src/utils/chromeTabs.ts b/src/utils/chromeTabs.ts
index 5270510..bf892f5 100644
--- a/src/utils/chromeTabs.ts
+++ b/src/utils/chromeTabs.ts
@@ -59,13 +59,9 @@ export async function ensureContentScriptInjected(): Promise<boolean> {
     const tab = await getActiveTab();
     if (!tab?.id) return false;
 
-    // 尝试发送一个简单的探测消息
     try {
-      // 这里可以根据实际情况发送一个简单的 Ping 消息
-      // 目前暂时保留原有注入逻辑，由调用方决定
       return true;
     } catch (e) {
-      // 如果报错，说明没注入，执行注入
       console.log('内容脚本未注入，尝试注入...');
       console.error('注入内容脚本失败:', e);
       await chrome.scripting.executeScript({
diff --git a/src/utils/qrCodeParser.ts b/src/utils/qrCodeParser.ts
index 0148c99..946f8ba 100644
--- a/src/utils/qrCodeParser.ts
+++ b/src/utils/qrCodeParser.ts
@@ -12,9 +12,6 @@ export interface QrCodeParseResult {
  */
 export async function parseQrCodeFromFile(file: File): Promise<QrCodeParseResult> {
   try {
-    // qr-scanner 的 scanImage 方法支持直接传入 File 对象
-    // 它会自动处理图片加载、Canvas 绘制和解析过程
-    // 并且在支持的浏览器中会优先使用原生的 BarcodeDetector API
     const result = await QrScanner.scanImage(file, {
       returnDetailedScanResult: true,
     });
@@ -25,7 +22,6 @@ export async function parseQrCodeFromFile(file: File): Promise<QrCodeParseResult
       return { success: false, error: '未检测到二维码' };
     }
   } catch (err) {
-    // qr-scanner 在未发现二维码时会抛出 "No QR code found"
     const errorMsg =
       err === 'No QR code found'
         ? '未检测到二维码'
diff --git a/src/utils/storageCleaner.ts b/src/utils/storageCleaner.ts
index 514d2e3..bf2591b 100644
--- a/src/utils/storageCleaner.ts
+++ b/src/utils/storageCleaner.ts
@@ -111,8 +111,6 @@ export async function getOriginStorageEstimate(tabId: number): Promise<number> {
       target: { tabId },
       func: async () => {
         try {
-          // 注意：navigator.storage.estimate() 返回的是整个 Origin 的估算值
-          // 包含 IndexedDB, CacheStorage, ServiceWorker 注册等
           if (navigator.storage && navigator.storage.estimate) {
             const estimate = await navigator.storage.estimate();
             return estimate.usage || 0;
@@ -138,7 +136,7 @@ export async function getCacheStorageSize(tabId: number): Promise<number> {
         try {
           if ('caches' in window) {
             const keys = await caches.keys();
-            return keys.length; // 对于 CacheStorage，我们先返回缓存库的数量
+            return keys.length;
           }
           return 0;
         } catch {
@@ -146,7 +144,6 @@ export async function getCacheStorageSize(tabId: number): Promise<number> {
         }
       },
     });
-    // 由于获取具体字节数较慢，这里返回的是缓存条目的数量标识，UI 上可以特殊处理
     return (result?.result as number) || 0;
   } catch (error) {
     console.error('Failed to get CacheStorage size:', error);

From 067a20fb0a8e83926fc3927a0b04d875644905ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:08:15 +0800
Subject: [PATCH 34/71] feat: remove HTML-Markdown conversion features
 (htmlToMarkdown & markdownToHtml)

Removed both conversion tools and all related code:
- Deleted page components: HtmlToMarkdown, MarkdownToHtml
- Deleted utility functions: htmlToMarkdown.ts, markdownToHtml.ts
- Deleted unit tests for both utilities
- Removed feature configs and PageType entries from storage.d.ts
- Removed preview mode types and StorageSchema keys
- Removed all i18n translation keys from messages.json
- Removed vendor-markdown chunk from wxt.config.ts
- Removed marked dependency from package.json
- Updated feature count in tests (11 -> 9, page order 10 -> 8)
- Updated README, AGENTS.md, and copilot-instructions.md

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/copilot-instructions.md            |   2 +-
 AGENTS.md                                  |   1 -
 README.md                                  |   5 -
 package-lock.json                          |  13 -
 package.json                               |   1 -
 public/_locales/zh/messages.json           | 112 --------
 src/config/__tests__/features.test.ts      |  12 +-
 src/config/features.tsx                    |  30 --
 src/pages/HtmlToMarkdown/index.tsx         | 177 ------------
 src/pages/MarkdownToHtml/index.tsx         | 302 --------------------
 src/types/storage.d.ts                     |  16 --
 src/utils/__tests__/htmlToMarkdown.test.ts | 265 -----------------
 src/utils/__tests__/markdownToHtml.test.ts | 177 ------------
 src/utils/htmlToMarkdown.ts                | 315 ---------------------
 src/utils/markdownToHtml.ts                | 287 -------------------
 wxt.config.ts                              |   4 -
 16 files changed, 6 insertions(+), 1713 deletions(-)
 delete mode 100644 src/pages/HtmlToMarkdown/index.tsx
 delete mode 100644 src/pages/MarkdownToHtml/index.tsx
 delete mode 100644 src/utils/__tests__/htmlToMarkdown.test.ts
 delete mode 100644 src/utils/__tests__/markdownToHtml.test.ts
 delete mode 100644 src/utils/htmlToMarkdown.ts
 delete mode 100644 src/utils/markdownToHtml.ts

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index ff35225..4fbef56 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -102,7 +102,7 @@ pages/FeatureName/
 
 ### 代码分割
 
-`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd、vendor-markdown），无需手动配置。
+`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd），无需手动配置。
 
 ### 代码风格
 
diff --git a/AGENTS.md b/AGENTS.md
index 568c80b..8a9b20d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -142,7 +142,6 @@ src/pages/FeatureName/
 
 - `@webext-core/messaging` — 扩展消息通信
 - `@dnd-kit` — 拖拽排序（用于页面顺序管理）
-- `marked` — Markdown 解析
 - `qrious` + `qr-scanner` — 二维码生成与解析
 - `dayjs` — 日期处理（时间戳转换）
 - `sonner` — Toast 通知（替代传统 snackbar）
diff --git a/README.md b/README.md
index 8ec821e..339b113 100644
--- a/README.md
+++ b/README.md
@@ -63,11 +63,6 @@
 - **文件转换**: 支持文件与 Base64 字符串互转.
 - **图像预览**: 支持图片 Base64 编码与实时预览.
 
-### 📝 Markdown ↔ HTML 转换
-
-- **Markdown 转 HTML**: 实时预览 Markdown 渲染结果，支持导出 HTML 源码.
-- **HTML 转 Markdown**: 将 HTML 内容转换为 Markdown 格式.
-
 ## 技术栈
 
 - **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
diff --git a/package-lock.json b/package-lock.json
index 68d015a..82265b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
         "clsx": "^2.1.1",
         "dayjs": "^1.11.20",
         "lucide-react": "^1.16.0",
-        "marked": "^18.0.4",
         "qr-scanner": "^1.4.2",
         "qrious": "^4.0.2",
         "react": "^19.2.6",
@@ -8388,18 +8387,6 @@
         "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",
diff --git a/package.json b/package.json
index 576d168..07dd898 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
     "lucide-react": "^1.16.0",
-    "marked": "^18.0.4",
     "qr-scanner": "^1.4.2",
     "qrious": "^4.0.2",
     "react": "^19.2.6",
diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 9063a45..48d5eb7 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -131,22 +131,6 @@
     "message": "文本、文件与图像的 Base64 编码转换",
     "description": "Translation key: base64Converter_description"
   },
-  "markdownToHtml_title": {
-    "message": "Markdown 转 HTML",
-    "description": "Translation key: markdownToHtml_title"
-  },
-  "markdownToHtml_description": {
-    "message": "实时 Markdown 转换与 HTML 预览",
-    "description": "Translation key: markdownToHtml_description"
-  },
-  "htmlToMarkdown_title": {
-    "message": "HTML 转 Markdown",
-    "description": "Translation key: htmlToMarkdown_title"
-  },
-  "htmlToMarkdown_description": {
-    "message": "实时 HTML 转换与 Markdown 预览",
-    "description": "Translation key: htmlToMarkdown_description"
-  },
   "rightClickRestorer_title": {
     "message": "右键恢复",
     "description": "Translation key: rightClickRestorer_title"
@@ -291,54 +275,6 @@
     "message": "解码大小",
     "description": "Translation key: base64Converter_decodedSize"
   },
-  "htmlToMarkdown_pageTitle": {
-    "message": "HTML 转 Markdown",
-    "description": "Translation key: htmlToMarkdown_pageTitle"
-  },
-  "htmlToMarkdown_splitMode": {
-    "message": "分屏",
-    "description": "Translation key: htmlToMarkdown_splitMode"
-  },
-  "htmlToMarkdown_previewMode": {
-    "message": "预览",
-    "description": "Translation key: htmlToMarkdown_previewMode"
-  },
-  "htmlToMarkdown_markdownMode": {
-    "message": "Markdown",
-    "description": "Translation key: htmlToMarkdown_markdownMode"
-  },
-  "htmlToMarkdown_clear": {
-    "message": "清空",
-    "description": "Translation key: htmlToMarkdown_clear"
-  },
-  "htmlToMarkdown_inputLabel": {
-    "message": "HTML 输入",
-    "description": "Translation key: htmlToMarkdown_inputLabel"
-  },
-  "htmlToMarkdown_previewLabel": {
-    "message": "Markdown 预览",
-    "description": "Translation key: htmlToMarkdown_previewLabel"
-  },
-  "htmlToMarkdown_markdownOutputLabel": {
-    "message": "Markdown 输出",
-    "description": "Translation key: htmlToMarkdown_markdownOutputLabel"
-  },
-  "htmlToMarkdown_inputPlaceholder": {
-    "message": "在此输入 HTML 内容...",
-    "description": "Translation key: htmlToMarkdown_inputPlaceholder"
-  },
-  "htmlToMarkdown_charCount": {
-    "message": "{{count}} 字符",
-    "description": "Translation key: htmlToMarkdown_charCount"
-  },
-  "htmlToMarkdown_download": {
-    "message": "下载",
-    "description": "Translation key: htmlToMarkdown_download"
-  },
-  "htmlToMarkdown_emptyHint": {
-    "message": "输入 HTML 内容以查看转换结果",
-    "description": "Translation key: htmlToMarkdown_emptyHint"
-  },
   "jsonDiff_pageTitle": {
     "message": "JSON 差异比较",
     "description": "Translation key: jsonDiff_pageTitle"
@@ -543,54 +479,6 @@
     "message": "解析 Payload 失败：",
     "description": "Translation key: jwt_errors_parsePayloadFailed"
   },
-  "markdownToHtml_pageTitle": {
-    "message": "Markdown 转 HTML",
-    "description": "Translation key: markdownToHtml_pageTitle"
-  },
-  "markdownToHtml_splitMode": {
-    "message": "分屏",
-    "description": "Translation key: markdownToHtml_splitMode"
-  },
-  "markdownToHtml_previewMode": {
-    "message": "预览",
-    "description": "Translation key: markdownToHtml_previewMode"
-  },
-  "markdownToHtml_htmlMode": {
-    "message": "HTML",
-    "description": "Translation key: markdownToHtml_htmlMode"
-  },
-  "markdownToHtml_clear": {
-    "message": "清空",
-    "description": "Translation key: markdownToHtml_clear"
-  },
-  "markdownToHtml_print": {
-    "message": "打印",
-    "description": "Translation key: markdownToHtml_print"
-  },
-  "markdownToHtml_download": {
-    "message": "下载",
-    "description": "Translation key: markdownToHtml_download"
-  },
-  "markdownToHtml_inputLabel": {
-    "message": "Markdown 输入",
-    "description": "Translation key: markdownToHtml_inputLabel"
-  },
-  "markdownToHtml_previewLabel": {
-    "message": "实时预览",
-    "description": "Translation key: markdownToHtml_previewLabel"
-  },
-  "markdownToHtml_htmlOutputLabel": {
-    "message": "HTML 输出",
-    "description": "Translation key: markdownToHtml_htmlOutputLabel"
-  },
-  "markdownToHtml_inputPlaceholder": {
-    "message": "在此输入 Markdown 内容...",
-    "description": "Translation key: markdownToHtml_inputPlaceholder"
-  },
-  "markdownToHtml_charCount": {
-    "message": "{{count}} 字符",
-    "description": "Translation key: markdownToHtml_charCount"
-  },
   "qrCode_pageTitle": {
     "message": "二维码工具",
     "description": "Translation key: qrCode_pageTitle"
diff --git a/src/config/__tests__/features.test.ts b/src/config/__tests__/features.test.ts
index cd273dd..ea1feda 100644
--- a/src/config/__tests__/features.test.ts
+++ b/src/config/__tests__/features.test.ts
@@ -9,8 +9,8 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 11 features defined', () => {
-      expect(FEATURES).toHaveLength(11);
+    it('should have 9 features defined', () => {
+      expect(FEATURES).toHaveLength(9);
     });
 
     it('should have all required properties for each feature', () => {
@@ -95,7 +95,7 @@ describe('features', () => {
   describe('getAllFeatureKeys', () => {
     it('should return all feature keys', () => {
       const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(11);
+      expect(allKeys).toHaveLength(9);
       expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
@@ -104,8 +104,6 @@ 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');
     });
   });
@@ -123,9 +121,9 @@ describe('features', () => {
       expect(pageOrder).toContain('qrCode');
     });
 
-    it('should have 10 items in page order', () => {
+    it('should have 8 items in page order', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(10);
+      expect(pageOrder).toHaveLength(8);
     });
   });
 });
diff --git a/src/config/features.tsx b/src/config/features.tsx
index ed0df11..c069717 100644
--- a/src/config/features.tsx
+++ b/src/config/features.tsx
@@ -9,8 +9,6 @@ import {
   Key,
   GitCompareArrows,
   ArrowLeftRight,
-  Code,
-  File,
   MousePointerClick,
 } from 'lucide-react';
 
@@ -25,8 +23,6 @@ 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 {
@@ -146,32 +142,6 @@ export const FEATURES: FeatureConfig[] = [
       tab: Base64ConverterPage,
     },
   },
-  {
-    key: 'markdownToHtml',
-    labelKey: 'markdownToHtml_title',
-    descriptionKey: 'markdownToHtml_description',
-    themeColorKey: 'secondary',
-    icon: Code,
-    defaultVisible: true,
-    components: {
-      popup: MarkdownToHtmlPage,
-      sidepanel: MarkdownToHtmlPage,
-      tab: MarkdownToHtmlPage,
-    },
-  },
-  {
-    key: 'htmlToMarkdown',
-    labelKey: 'htmlToMarkdown_title',
-    descriptionKey: 'htmlToMarkdown_description',
-    themeColorKey: 'secondary',
-    icon: File,
-    defaultVisible: true,
-    components: {
-      popup: HtmlToMarkdownPage,
-      sidepanel: HtmlToMarkdownPage,
-      tab: HtmlToMarkdownPage,
-    },
-  },
   {
     key: 'rightClickRestorer',
     labelKey: 'rightClickRestorer_title',
diff --git a/src/pages/HtmlToMarkdown/index.tsx b/src/pages/HtmlToMarkdown/index.tsx
deleted file mode 100644
index bf62a08..0000000
--- a/src/pages/HtmlToMarkdown/index.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Download, Trash2 } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
-import CopyButton from '@/components/CopyButton';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { Button } from '@/components/ui/button';
-import { useStorageState } from '@/utils/useStorageState';
-import type { HtmlToMarkdownPreviewMode } from '@/types/storage';
-import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
-import { cn } from '@/lib/utils';
-
-const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
-  typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
-
-export default function HtmlToMarkdownPage() {
-  const { t } = useI18n('htmlToMarkdown');
-  const [previewMode, setPreviewMode] = useStorageState(
-    'htmlToMarkdown/previewMode',
-    'split' as HtmlToMarkdownPreviewMode,
-    isValidPreviewMode,
-  );
-  const [html, setHtml] = useState(SAMPLE_HTML);
-
-  const result = useMemo(() => htmlToMarkdown(html), [html]);
-  const error = result.hasError ? (result.error ?? null) : null;
-
-  const handleModeChange = useCallback(
-    (newMode: HtmlToMarkdownPreviewMode) => {
-      setPreviewMode(newMode);
-    },
-    [setPreviewMode],
-  );
-
-  const handleClear = useCallback(() => {
-    setHtml('');
-  }, []);
-
-  const handleDownload = useCallback(() => {
-    if (result.markdown) {
-      downloadMarkdownFile(result.markdown, 'converted.md');
-    }
-  }, [result.markdown]);
-
-  const showInput = previewMode !== 'preview';
-  const showOutput = previewMode !== 'markdown';
-
-  return (
-    /* 💡 统一间距尺寸：
-      - 彻底清除多余的 container max-w-7xl 这种网页大边距，
-      - 统一收拢为我们先前在 Dashboard 页、JSON 工具箱制定的 p-4 space-y-4 标准极客桌面规格。
-    */
-    <div className="p-4 w-full flex flex-col space-y-4 select-none">
-      <div className="flex flex-col gap-4">
-        {/* 工具栏集成区 */}
-        <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
-          <SwitchButtonGroup
-            value={previewMode}
-            options={[
-              { value: 'split', label: t('splitMode') },
-              { value: 'preview', label: t('previewMode') },
-              { value: 'markdown', label: t('markdownMode') },
-            ]}
-            onChange={handleModeChange}
-            size="small"
-            className="w-full sm:w-auto"
-          />
-
-          <div className="flex gap-2 shrink-0">
-            {/* 2. 重塑下载按钮：接入受控 Button，追加 active 物理微缩放动效 */}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleDownload}
-              disabled={!result.markdown}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
-            >
-              <Download className="h-3.5 w-3.5" />
-              {t('download')}
-            </Button>
-
-            {/* 重塑清空按钮 */}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleClear}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-              {t('clear')}
-            </Button>
-          </div>
-        </div>
-
-        {/* 错误提示：
-          - 💡 核心修复点：将硬编码的 bg-red-50 实色，完美超进化为系统的全自适应透明色变体
-        */}
-        {error && (
-          <div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide">
-            {error}
-          </div>
-        )}
-
-        {/* 双翼/单栏联动面板展示区 */}
-        <div
-          className={cn(
-            'grid gap-4 min-h-[460px] w-full',
-            showInput && showOutput ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
-          )}
-        >
-          {/* HTML 输入端卡片面板 */}
-          {showInput && (
-            /* 3. 智能聚焦框联动（Focus Ring Clamping）：
-              - 外层容器追加 focus-within 变量追踪大闸。
-              - 只要用户用鼠标点击了内部的 textarea，外层整块精巧的圆角大边框会一帧内亮起 primary 系统的深色呼吸发光环，
-              - 这种“全外包裹层框聚焦”的体验极大模仿了本地原生 IDE 的硬核专业体验！
-            */
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
-              {/* 卡片头部：改用标准的灰色 bg-muted/50 */}
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {t('inputLabel')}
-                </span>
-                <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                  {t('charCount', { count: html.length })}
-                </span>
-              </div>
-              <textarea
-                value={html}
-                onChange={(e) => setHtml(e.target.value)}
-                placeholder={t('inputPlaceholder')}
-                className="flex-1 min-h-[380px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
-              />
-            </div>
-          )}
-
-          {/* Markdown 输出端卡片面板 */}
-          {showOutput && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {(previewMode as string) === 'markdown'
-                    ? t('markdownOutputLabel')
-                    : t('previewLabel')}
-                </span>
-                <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                    {t('charCount', { count: result.markdownLength })}
-                  </span>
-                  <CopyButton
-                    text={result.markdown}
-                    className="h-6 w-6 rounded-md border text-muted-foreground"
-                  />
-                </div>
-              </div>
-
-              {(previewMode as string) === 'markdown' ? (
-                <textarea
-                  value={result.markdown}
-                  readOnly
-                  className="flex-1 min-h-[380px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
-                />
-              ) : (
-                <div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent font-mono text-xs leading-relaxed whitespace-pre-wrap break-all text-foreground/90 select-text">
-                  {result.markdown || (
-                    <span className="text-muted-foreground/70 italic text-[11px] font-sans">
-                      {t('emptyHint')}
-                    </span>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/MarkdownToHtml/index.tsx b/src/pages/MarkdownToHtml/index.tsx
deleted file mode 100644
index 74a0418..0000000
--- a/src/pages/MarkdownToHtml/index.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Download, Printer, Trash2 } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
-import CopyButton from '@/components/CopyButton';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { Button } from '@/components/ui/button';
-import { useStorageState } from '@/utils/useStorageState';
-import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
-import {
-  downloadHtmlFile,
-  markdownToHtml,
-  printHtml,
-  SAMPLE_MARKDOWN,
-  wrapHtmlDocument,
-} from '@/utils/markdownToHtml';
-import { cn } from '@/lib/utils';
-
-const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
-  typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
-
-const PREVIEW_STYLES = `
-  .markdown-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    color: var(--md-foreground);
-    background-color: transparent;
-    font-size: 14px;
-  }
-  .markdown-body h1, .markdown-body h2, .markdown-body h3 {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-    color: var(--md-foreground);
-  }
-  .markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
-  .markdown-body h2 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.35em; }
-  .markdown-body p { margin-top: 0; margin-bottom: 16px; }
-  .markdown-body a { color: var(--md-link-color); text-decoration: none; }
-  .markdown-body a:hover { text-decoration: underline; }
-  .markdown-body code {
-    background-color: var(--md-code-bg);
-    border-radius: 4px;
-    font-size: 85%;
-    padding: 0.2em 0.4em;
-    font-family: Menlo, Consolas, monospace;
-  }
-  .markdown-body pre {
-    background-color: var(--md-pre-bg);
-    border-radius: 8px;
-    font-size: 85%;
-    line-height: 1.45;
-    overflow: auto;
-    padding: 16px;
-    margin: 0 0 16px;
-    border: 1px solid var(--md-border);
-  }
-  .markdown-body pre code {
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-  }
-  .markdown-body blockquote {
-    border-left: 0.25em solid var(--md-quote-line);
-    color: var(--md-muted);
-    margin: 0 0 16px;
-    padding: 0 1em;
-  }
-  .markdown-body table {
-    border-collapse: collapse;
-    width: 100%;
-    margin-bottom: 16px;
-    font-size: 13px;
-  }
-  .markdown-body table th, .markdown-body table td {
-    border: 1px solid var(--md-border);
-    padding: 6px 13px;
-  }
-  .markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg); }
-  .markdown-body table th { font-weight: 600; background-color: var(--md-code-bg); }
-`;
-
-export default function MarkdownToHtmlPage() {
-  const { t } = useI18n('markdownToHtml');
-  const [previewMode, setPreviewMode] = useStorageState(
-    'markdownToHtml/previewMode',
-    'split' as MarkdownToHtmlPreviewMode,
-    isValidPreviewMode,
-  );
-  const [markdown, setMarkdown] = useState(SAMPLE_MARKDOWN);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  const result = useMemo(() => markdownToHtml(markdown), [markdown]);
-  const error = result.hasError ? (result.error ?? null) : null;
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const isDarkMode = document.documentElement.classList.contains('dark');
-
-    const themeVariables = isDarkMode
-      ? `:root { 
-          --md-bg: #090d16;
-          --md-foreground: #e6edf3; 
-          --md-border: rgba(255,255,255,0.15); 
-          --md-code-bg: rgba(255,255,255,0.12); 
-          --md-pre-bg: rgba(255,255,255,0.04); 
-          --md-muted: #8b949e;
-          --md-quote-line: rgba(255,255,255,0.25);
-          --md-link-color: #58a6ff;
-        }`
-      : `:root { 
-          --md-bg: #ffffff;
-          --md-foreground: #1f2328; 
-          --md-border: rgba(128,128,128,0.2); 
-          --md-code-bg: rgba(128,128,128,0.08); 
-          --md-pre-bg: rgba(128,128,128,0.03); 
-          --md-muted: #4b5563;
-          --md-quote-line: rgba(128,128,128,0.3);
-          --md-link-color: #3b82f6;
-        }`;
-
-    const baseGlobalStyles = `
-      html, body { 
-        margin: 0; 
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--md-bg);
-        color: var(--md-foreground);
-      }
-      body {
-        padding: 16px;
-        box-sizing: border-box;
-      }
-    `;
-
-    iframe.srcdoc = `<!DOCTYPE html>
-<html lang="zh" style="background-color: ${isDarkMode ? '#090d16' : '#ffffff'};">
-<head>
-<meta charset="UTF-8">
-<style>
-  ${themeVariables}
-  ${PREVIEW_STYLES}
-  ${baseGlobalStyles}
-</style>
-</head>
-<body class="markdown-body">${result.html}</body>
-</html>`;
-  }, [result.html, previewMode]);
-
-  const handleModeChange = useCallback(
-    (newMode: MarkdownToHtmlPreviewMode) => {
-      setPreviewMode(newMode);
-    },
-    [setPreviewMode],
-  );
-
-  const handleClear = useCallback(() => {
-    setMarkdown('');
-  }, []);
-
-  const handlePrint = useCallback(() => {
-    printHtml(result.html, t('pageTitle'));
-  }, [result.html, t]);
-
-  const handleDownload = useCallback(() => {
-    const doc = wrapHtmlDocument(result.html, t('pageTitle'));
-    downloadHtmlFile(doc, 'markdown-export.html');
-  }, [result.html, t]);
-
-  const showInput = previewMode !== 'preview';
-  const showPreview = previewMode !== 'html';
-
-  return (
-    <div className="p-4 w-full flex flex-col space-y-4 select-none">
-      <div className="flex flex-col space-y-4">
-        {/* 工具集成控制中枢 */}
-        <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
-          <SwitchButtonGroup
-            value={previewMode}
-            options={[
-              { value: 'split', label: t('splitMode') },
-              { value: 'preview', label: t('previewMode') },
-              { value: 'html', label: t('htmlMode') },
-            ]}
-            onChange={handleModeChange}
-            size="small"
-            className="w-full sm:w-auto"
-          />
-
-          <div className="flex gap-2 shrink-0">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleClear}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-              {t('clear')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handlePrint}
-              disabled={!result.html}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
-            >
-              <Printer className="h-3.5 w-3.5" />
-              {t('print')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleDownload}
-              disabled={!result.html}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
-            >
-              <Download className="h-3.5 w-3.5" />
-              {t('download')}
-            </Button>
-          </div>
-        </div>
-
-        {/* 错误拦截提示框 */}
-        {error && (
-          <div
-            role="alert"
-            className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide"
-          >
-            {error}
-          </div>
-        )}
-
-        {/* 主框架多栏联动排版轴 */}
-        <div
-          className={cn(
-            'grid gap-4 min-h-[480px] w-full',
-            showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
-          )}
-        >
-          {/* Markdown 输入翼终端 */}
-          {showInput && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {t('inputLabel')}
-                </span>
-                <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                  {t('charCount', { count: markdown.length })}
-                </span>
-              </div>
-              <textarea
-                value={markdown}
-                onChange={(e) => setMarkdown(e.target.value)}
-                placeholder={t('inputPlaceholder')}
-                className="flex-1 min-h-[390px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
-              />
-            </div>
-          )}
-
-          {/* 实时 HTML/Iframe 预览翼终端 */}
-          {showPreview && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
-                </span>
-                <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                    {t('charCount', { count: result.htmlLength })}
-                  </span>
-                  <CopyButton
-                    text={result.html}
-                    className="h-6 w-6 rounded-md border text-muted-foreground"
-                  />
-                </div>
-              </div>
-
-              {(previewMode as string) === 'html' ? (
-                <textarea
-                  value={result.html}
-                  readOnly
-                  className="flex-1 min-h-[390px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
-                />
-              ) : (
-                <div className="flex-1 min-h-[390px] overflow-hidden bg-transparent">
-                  <iframe
-                    ref={iframeRef}
-                    title="markdown-preview"
-                    className="w-full h-full min-h-[360px] border-none bg-transparent"
-                  />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
index dc13b16..1743e9d 100644
--- a/src/types/storage.d.ts
+++ b/src/types/storage.d.ts
@@ -10,8 +10,6 @@ export type PageType =
   | 'jwt' // JWT 解析工具
   | 'jsonDiff' // JSON 差异比较工具
   | 'base64Converter' // Base64 转换器工具
-  | 'markdownToHtml' // Markdown 转 HTML 工具
-  | 'htmlToMarkdown' // HTML 转 Markdown 工具
   | 'rightClickRestorer'; // 右键菜单恢复工具
 
 /**
@@ -29,16 +27,6 @@ export type Base64ConverterPageMode = 'text' | 'file' | 'image';
  */
 export type Base64ConvertDirection = 'encode' | 'decode';
 
-/**
- * Markdown 转 HTML 页面预览模式类型定义
- */
-export type MarkdownToHtmlPreviewMode = 'split' | 'preview' | 'html';
-
-/**
- * HTML 转 Markdown 页面预览模式类型定义
- */
-export type HtmlToMarkdownPreviewMode = 'split' | 'preview' | 'markdown';
-
 /**
  * 表单映射条目定义
  */
@@ -121,10 +109,6 @@ export interface StorageSchema {
   'base64Converter/fileMode/direction': Base64ConvertDirection;
   /** Base64 转换器「图像」子模式当前方向 */
   'base64Converter/imageMode/direction': Base64ConvertDirection;
-  /** Markdown 转 HTML 页面当前预览模式 */
-  'markdownToHtml/previewMode': MarkdownToHtmlPreviewMode;
-  /** HTML 转 Markdown 页面当前预览模式 */
-  'htmlToMarkdown/previewMode': HtmlToMarkdownPreviewMode;
   /** 语言偏好设置 */
   'app/language': string;
   /** 右键菜单待处理数据 */
diff --git a/src/utils/__tests__/htmlToMarkdown.test.ts b/src/utils/__tests__/htmlToMarkdown.test.ts
deleted file mode 100644
index 8448dca..0000000
--- a/src/utils/__tests__/htmlToMarkdown.test.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { htmlToMarkdown, downloadMarkdownFile, SAMPLE_HTML } from '../htmlToMarkdown';
-
-describe('htmlToMarkdown', () => {
-  it('returns empty result for empty string', () => {
-    const result = htmlToMarkdown('');
-    expect(result.markdown).toBe('');
-    expect(result.originalLength).toBe(0);
-    expect(result.markdownLength).toBe(0);
-    expect(result.hasError).toBe(false);
-  });
-
-  it('returns empty result for whitespace-only string', () => {
-    const result = htmlToMarkdown('   \n  ');
-    expect(result.markdown).toBe('');
-    expect(result.hasError).toBe(false);
-  });
-
-  it('converts h1 heading', () => {
-    const result = htmlToMarkdown('<h1>Hello World</h1>');
-    expect(result.markdown).toContain('# Hello World');
-  });
-
-  it('converts h2-h6 headings', () => {
-    const result = htmlToMarkdown(
-      '<h2>Two</h2><h3>Three</h3><h4>Four</h4><h5>Five</h5><h6>Six</h6>',
-    );
-    expect(result.markdown).toContain('## Two');
-    expect(result.markdown).toContain('### Three');
-    expect(result.markdown).toContain('#### Four');
-    expect(result.markdown).toContain('##### Five');
-    expect(result.markdown).toContain('###### Six');
-  });
-
-  it('converts paragraph', () => {
-    const result = htmlToMarkdown('<p>This is a paragraph.</p>');
-    expect(result.markdown).toContain('This is a paragraph.');
-  });
-
-  it('converts strong and b tags', () => {
-    const result = htmlToMarkdown('<strong>bold</strong> and <b>also bold</b>');
-    expect(result.markdown).toContain('**bold**');
-    expect(result.markdown).toContain('**also bold**');
-  });
-
-  it('converts em and i tags', () => {
-    const result = htmlToMarkdown('<em>italic</em> and <i>also italic</i>');
-    expect(result.markdown).toContain('*italic*');
-    expect(result.markdown).toContain('*also italic*');
-  });
-
-  it('converts del and s tags', () => {
-    const result = htmlToMarkdown('<del>deleted</del> and <s>strikethrough</s>');
-    expect(result.markdown).toContain('~~deleted~~');
-    expect(result.markdown).toContain('~~strikethrough~~');
-  });
-
-  it('converts inline code', () => {
-    const result = htmlToMarkdown('<code>const x = 1;</code>');
-    expect(result.markdown).toContain('`const x = 1;`');
-  });
-
-  it('converts pre code block', () => {
-    const result = htmlToMarkdown('<pre><code>line1\nline2</code></pre>');
-    expect(result.markdown).toContain('```');
-    expect(result.markdown).toContain('line1');
-    expect(result.markdown).toContain('line2');
-  });
-
-  it('converts pre code block with language', () => {
-    const result = htmlToMarkdown(
-      '<pre><code class="language-javascript">const x = 1;</code></pre>',
-    );
-    expect(result.markdown).toContain('```javascript');
-    expect(result.markdown).toContain('const x = 1;');
-  });
-
-  it('converts anchor links', () => {
-    const result = htmlToMarkdown('<a href="https://example.com">Link text</a>');
-    expect(result.markdown).toContain('[Link text](https://example.com)');
-  });
-
-  it('converts anchor links with title', () => {
-    const result = htmlToMarkdown('<a href="https://example.com" title="Title">Link</a>');
-    expect(result.markdown).toContain('[Link](https://example.com "Title")');
-  });
-
-  it('converts images', () => {
-    const result = htmlToMarkdown('<img src="image.png" alt="desc" />');
-    expect(result.markdown).toContain('![desc](image.png)');
-  });
-
-  it('converts images with title', () => {
-    const result = htmlToMarkdown('<img src="image.png" alt="desc" title="Title" />');
-    expect(result.markdown).toContain('![desc](image.png "Title")');
-  });
-
-  it('converts unordered list', () => {
-    const result = htmlToMarkdown('<ul><li>Item 1</li><li>Item 2</li></ul>');
-    expect(result.markdown).toContain('- Item 1');
-    expect(result.markdown).toContain('- Item 2');
-  });
-
-  it('converts ordered list', () => {
-    const result = htmlToMarkdown('<ol><li>First</li><li>Second</li></ol>');
-    expect(result.markdown).toContain('1. First');
-    expect(result.markdown).toContain('2. Second');
-  });
-
-  it('converts ordered list with start attribute', () => {
-    const result = htmlToMarkdown('<ol start="5"><li>Item</li></ol>');
-    expect(result.markdown).toContain('5. Item');
-  });
-
-  it('converts blockquote', () => {
-    const result = htmlToMarkdown('<blockquote><p>Quote text</p></blockquote>');
-    expect(result.markdown).toContain('> Quote text');
-  });
-
-  it('converts horizontal rule', () => {
-    const result = htmlToMarkdown('<hr />');
-    expect(result.markdown).toContain('---');
-  });
-
-  it('converts line break', () => {
-    const result = htmlToMarkdown('Line 1<br />Line 2');
-    expect(result.markdown).toContain('\n');
-  });
-
-  it('converts table', () => {
-    const html =
-      '<table><tr><th>Name</th><th>Type</th></tr><tr><td>John</td><td>User</td></tr></table>';
-    const result = htmlToMarkdown(html);
-    expect(result.markdown).toContain('| Name | Type |');
-    expect(result.markdown).toContain('| --- | --- |');
-    expect(result.markdown).toContain('| John | User |');
-  });
-
-  it('ignores script and style tags', () => {
-    const result = htmlToMarkdown('<script>alert(1)</script><style>.x{}</style><p>text</p>');
-    expect(result.markdown).not.toContain('alert');
-    expect(result.markdown).not.toContain('.x{}');
-    expect(result.markdown).toContain('text');
-  });
-
-  it('handles nested elements', () => {
-    const result = htmlToMarkdown('<p><strong>bold</strong> and <em>italic</em></p>');
-    expect(result.markdown).toContain('**bold**');
-    expect(result.markdown).toContain('*italic*');
-  });
-
-  it('returns hasError false for valid HTML', () => {
-    const result = htmlToMarkdown('<p>Valid</p>');
-    expect(result.hasError).toBe(false);
-    expect(result.error).toBeUndefined();
-  });
-
-  it('returns correct length stats', () => {
-    const html = '<p>Hello</p>';
-    const result = htmlToMarkdown(html);
-    expect(result.originalLength).toBe(html.length);
-    expect(result.markdownLength).toBe(result.markdown.length);
-  });
-
-  it('handles full HTML document', () => {
-    const result = htmlToMarkdown(SAMPLE_HTML);
-    expect(result.hasError).toBe(false);
-    expect(result.markdown).toContain('# 欢迎使用 HTML 转 Markdown');
-    expect(result.markdown).toContain('**HTML**');
-    expect(result.markdown).toContain('*Markdown*');
-    expect(result.markdown).toContain('```javascript');
-    expect(result.markdown).toContain('| 名称 | 类型 |');
-    expect(result.markdown).toContain('> 这是一段引用文本');
-  });
-
-  it('handles plain text without tags', () => {
-    const result = htmlToMarkdown('Just plain text');
-    expect(result.markdown).toContain('Just plain text');
-    expect(result.hasError).toBe(false);
-  });
-
-  it('handles task list items', () => {
-    const result = htmlToMarkdown(
-      '<ul><li><input type="checkbox" checked /> Done</li><li><input type="checkbox" /> Todo</li></ul>',
-    );
-    expect(result.markdown).toContain('- [x] Done');
-    expect(result.markdown).toContain('- [ ] Todo');
-  });
-
-  it('handles div and span wrappers', () => {
-    const result = htmlToMarkdown('<div><span><p>Content</p></span></div>');
-    expect(result.markdown).toContain('Content');
-  });
-
-  it('handles empty anchor with no text', () => {
-    const result = htmlToMarkdown('<a href="https://example.com"></a>');
-    expect(result.markdown).not.toContain('[');
-  });
-
-  it('handles unknown tags gracefully', () => {
-    const result = htmlToMarkdown('<custom-tag>Content</custom-tag>');
-    expect(result.markdown).toContain('Content');
-  });
-});
-
-describe('downloadMarkdownFile', () => {
-  const originalURL = globalThis.URL;
-  let createObjectURLSpy: ReturnType<typeof vi.fn>;
-  let revokeObjectURLSpy: ReturnType<typeof vi.fn>;
-  let clickSpy: ReturnType<typeof vi.fn>;
-  let appendChildSpy: ReturnType<typeof vi.fn>;
-  let removeChildSpy: ReturnType<typeof vi.fn>;
-
-  beforeEach(() => {
-    createObjectURLSpy = vi.fn().mockReturnValue('blob:test-url');
-    revokeObjectURLSpy = vi.fn();
-    (globalThis as any).URL = {
-      createObjectURL: createObjectURLSpy,
-      revokeObjectURL: revokeObjectURLSpy,
-    };
-
-    clickSpy = vi.fn();
-    appendChildSpy = vi.fn();
-    removeChildSpy = vi.fn();
-
-    const mockLink = {
-      href: '',
-      download: '',
-      click: clickSpy,
-    };
-
-    vi.spyOn(document, 'createElement').mockReturnValue(mockLink as any);
-    vi.spyOn(document.body, 'appendChild').mockImplementation(appendChildSpy as any);
-    vi.spyOn(document.body, 'removeChild').mockImplementation(removeChildSpy as any);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    (globalThis as any).URL = originalURL;
-  });
-
-  it('should create a blob and trigger download', () => {
-    downloadMarkdownFile('# Hello', 'test.md');
-
-    expect(createObjectURLSpy).toHaveBeenCalledOnce();
-    expect(clickSpy).toHaveBeenCalledOnce();
-    expect(appendChildSpy).toHaveBeenCalledOnce();
-    expect(removeChildSpy).toHaveBeenCalledOnce();
-    expect(revokeObjectURLSpy).toHaveBeenCalledOnce();
-  });
-
-  it('should use default filename when not provided', () => {
-    downloadMarkdownFile('content');
-
-    const mockLink = (document.createElement as any).mock.results[0].value;
-    expect(mockLink.download).toBe('export.md');
-  });
-
-  it('should set correct MIME type', () => {
-    downloadMarkdownFile('content');
-
-    const blobArg = createObjectURLSpy.mock.calls[0][0] as Blob;
-    expect(blobArg.type).toBe('text/markdown;charset=utf-8');
-  });
-});
diff --git a/src/utils/__tests__/markdownToHtml.test.ts b/src/utils/__tests__/markdownToHtml.test.ts
deleted file mode 100644
index 71078a1..0000000
--- a/src/utils/__tests__/markdownToHtml.test.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import {
-  markdownToHtml,
-  wrapHtmlDocument,
-  downloadHtmlFile,
-  SAMPLE_MARKDOWN,
-} from '@/utils/markdownToHtml';
-
-describe('markdownToHtml', () => {
-  it('应该转换基础 Markdown 标题', () => {
-    const result = markdownToHtml('# Hello World');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<h1');
-    expect(result.html).toContain('Hello World');
-    expect(result.originalLength).toBe(13);
-    expect(result.htmlLength).toBeGreaterThan(0);
-  });
-
-  it('应该转换粗体和斜体', () => {
-    const result = markdownToHtml('**bold** and *italic*');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<strong>bold</strong>');
-    expect(result.html).toContain('<em>italic</em>');
-  });
-
-  it('应该转换链接', () => {
-    const result = markdownToHtml('[Google](https://google.com)');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<a');
-    expect(result.html).toContain('href="https://google.com"');
-    expect(result.html).toContain('Google');
-  });
-
-  it('应该转换无序列表', () => {
-    const result = markdownToHtml('- item 1\n- item 2');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<ul>');
-    expect(result.html).toContain('<li>item 1</li>');
-  });
-
-  it('应该转换有序列表', () => {
-    const result = markdownToHtml('1. first\n2. second');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<ol>');
-    expect(result.html).toContain('<li>first</li>');
-  });
-
-  it('应该转换代码块', () => {
-    const result = markdownToHtml('```js\nconst x = 1;\n```');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<pre>');
-    expect(result.html).toContain('<code');
-    expect(result.html).toContain('const x = 1;');
-  });
-
-  it('应该转换行内代码', () => {
-    const result = markdownToHtml('use `npm install` command');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<code>npm install</code>');
-  });
-
-  it('应该转换引用块', () => {
-    const result = markdownToHtml('> This is a quote');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<blockquote>');
-    expect(result.html).toContain('This is a quote');
-  });
-
-  it('应该转换表格', () => {
-    const md = '| A | B |\n|---|---|\n| 1 | 2 |';
-    const result = markdownToHtml(md);
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<table>');
-    expect(result.html).toContain('<th>A</th>');
-    expect(result.html).toContain('<td>1</td>');
-  });
-
-  it('应该转换任务列表', () => {
-    const result = markdownToHtml('- [x] done\n- [ ] todo');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<input');
-    expect(result.html).toContain('checked');
-  });
-
-  it('应该转换删除线', () => {
-    const result = markdownToHtml('~~deleted~~');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<del>deleted</del>');
-  });
-
-  it('应该处理空字符串', () => {
-    const result = markdownToHtml('');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toBe('');
-    expect(result.originalLength).toBe(0);
-    expect(result.htmlLength).toBe(0);
-  });
-
-  it('应该处理空白字符串', () => {
-    const result = markdownToHtml('   \n   ');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toBe('');
-  });
-
-  it('应该处理中文内容', () => {
-    const result = markdownToHtml('# 你好世界\n\n这是**中文**内容。');
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('你好世界');
-    expect(result.html).toContain('<strong>中文</strong>');
-  });
-
-  it('应该转换示例 Markdown', () => {
-    const result = markdownToHtml(SAMPLE_MARKDOWN);
-    expect(result.hasError).toBe(false);
-    expect(result.html).toContain('<h1');
-    expect(result.html).toContain('<h2');
-    expect(result.html).toContain('<table>');
-    expect(result.html).toContain('<code>');
-    expect(result.originalLength).toBe(SAMPLE_MARKDOWN.length);
-    expect(result.htmlLength).toBeGreaterThan(result.originalLength);
-  });
-});
-
-describe('wrapHtmlDocument', () => {
-  it('应该生成完整的 HTML 文档', () => {
-    const doc = wrapHtmlDocument('<p>Hello</p>', 'Test Title');
-    expect(doc).toContain('<!DOCTYPE html>');
-    expect(doc).toContain('<html');
-    expect(doc).toContain('<head>');
-    expect(doc).toContain('<title>Test Title</title>');
-    expect(doc).toContain('<body>');
-    expect(doc).toContain('<p>Hello</p>');
-    expect(doc).toContain('</html>');
-  });
-
-  it('应该转义标题中的特殊字符', () => {
-    const doc = wrapHtmlDocument('<p>test</p>', 'Title <script>');
-    expect(doc).toContain('Title &lt;script&gt;');
-    expect(doc).not.toContain('<script>');
-  });
-
-  it('应该使用默认标题', () => {
-    const doc = wrapHtmlDocument('<p>test</p>');
-    expect(doc).toContain('<title>Markdown Export</title>');
-  });
-});
-
-describe('downloadHtmlFile', () => {
-  it('应该创建下载链接并触发下载', () => {
-    const createObjectURLSpy = vi.fn(() => 'blob:test');
-    const revokeObjectURLSpy = vi.fn();
-    (globalThis as any).URL = {
-      createObjectURL: createObjectURLSpy,
-      revokeObjectURL: revokeObjectURLSpy,
-    };
-
-    const clickSpy = vi.fn();
-    const mockAnchor = document.createElement('a');
-    mockAnchor.click = clickSpy;
-
-    const createElementSpy = vi.spyOn(document, 'createElement').mockReturnValue(mockAnchor);
-    const appendChildSpy = vi.spyOn(document.body, 'appendChild').mockReturnValue(mockAnchor);
-    const removeChildSpy = vi.spyOn(document.body, 'removeChild').mockReturnValue(mockAnchor);
-
-    downloadHtmlFile('<p>test</p>', 'test.html');
-
-    expect(clickSpy).toHaveBeenCalled();
-    expect(appendChildSpy).toHaveBeenCalled();
-    expect(removeChildSpy).toHaveBeenCalled();
-    expect(createObjectURLSpy).toHaveBeenCalled();
-    expect(revokeObjectURLSpy).toHaveBeenCalled();
-
-    createElementSpy.mockRestore();
-    appendChildSpy.mockRestore();
-    removeChildSpy.mockRestore();
-  });
-});
diff --git a/src/utils/htmlToMarkdown.ts b/src/utils/htmlToMarkdown.ts
deleted file mode 100644
index bdcf358..0000000
--- a/src/utils/htmlToMarkdown.ts
+++ /dev/null
@@ -1,315 +0,0 @@
-/**
- * HTML 转 Markdown 转换器工具函数
- *
- * 基于 DOM 解析实现，支持常见 HTML 标签到 Markdown 的转换。
- */
-
-/**
- * HTML 转 Markdown 转换结果
- */
-export interface HtmlToMarkdownResult {
-  /** 转换后的 Markdown 字符串 */
-  markdown: string;
-  /** 原始 HTML 文本长度 */
-  originalLength: number;
-  /** 生成的 Markdown 长度 */
-  markdownLength: number;
-  /** 是否包含错误 */
-  hasError: boolean;
-  /** 错误信息（如果有） */
-  error?: string;
-}
-
-/**
- * 将 HTML 文本转换为 Markdown
- *
- * @param html - HTML 源文本
- * @returns HtmlToMarkdownResult 转换结果
- */
-export function htmlToMarkdown(html: string): HtmlToMarkdownResult {
-  try {
-    const trimmed = html.trim();
-    if (!trimmed) {
-      return {
-        markdown: '',
-        originalLength: 0,
-        markdownLength: 0,
-        hasError: false,
-      };
-    }
-
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(trimmed, 'text/html');
-
-    const parserError = doc.querySelector('parsererror');
-    if (parserError) {
-      return {
-        markdown: '',
-        originalLength: html.length,
-        markdownLength: 0,
-        hasError: true,
-        error: 'HTML 解析失败：无效的 HTML 结构',
-      };
-    }
-
-    const markdown = convertNode(doc.body).trim();
-
-    return {
-      markdown,
-      originalLength: html.length,
-      markdownLength: markdown.length,
-      hasError: false,
-    };
-  } catch (error) {
-    return {
-      markdown: '',
-      originalLength: html.length,
-      markdownLength: 0,
-      hasError: true,
-      error: error instanceof Error ? error.message : 'HTML 转换失败',
-    };
-  }
-}
-
-/**
- * 递归转换 DOM 节点为 Markdown
- */
-function convertNode(node: Node): string {
-  if (node.nodeType === Node.TEXT_NODE) {
-    return escapeMarkdownChars(node.textContent ?? '');
-  }
-
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    return '';
-  }
-
-  const element = node as HTMLElement;
-  const tagName = element.tagName.toLowerCase();
-  const children = Array.from(element.childNodes);
-  const inner = children.map(convertNode).join('');
-
-  switch (tagName) {
-    case 'h1':
-      return `\n# ${inner.trim()}\n\n`;
-    case 'h2':
-      return `\n## ${inner.trim()}\n\n`;
-    case 'h3':
-      return `\n### ${inner.trim()}\n\n`;
-    case 'h4':
-      return `\n#### ${inner.trim()}\n\n`;
-    case 'h5':
-      return `\n##### ${inner.trim()}\n\n`;
-    case 'h6':
-      return `\n###### ${inner.trim()}\n\n`;
-    case 'p':
-      return `\n${inner.trim()}\n\n`;
-    case 'br':
-      return '\n';
-    case 'hr':
-      return '\n---\n\n';
-    case 'strong':
-    case 'b':
-      return `**${inner.trim()}**`;
-    case 'em':
-    case 'i':
-      return `*${inner.trim()}*`;
-    case 'del':
-    case 's':
-    case 'strike':
-      return `~~${inner.trim()}~~`;
-    case 'code':
-      return `\`${inner.trim()}\``;
-    case 'pre': {
-      const code = element.querySelector('code');
-      if (code) {
-        const lang = code.getAttribute('class')?.replace(/^language-/, '') ?? '';
-        return `\n\`\`\`${lang}\n${code.textContent?.trim() ?? ''}\n\`\`\`\n\n`;
-      }
-      return `\n\`\`\`\n${inner.trim()}\n\`\`\`\n\n`;
-    }
-    case 'a': {
-      const href = element.getAttribute('href') ?? '';
-      const title = element.getAttribute('title');
-      const text = inner.trim();
-      if (!text) return '';
-      if (title) {
-        return `[${text}](${href} "${title}")`;
-      }
-      return `[${text}](${href})`;
-    }
-    case 'img': {
-      const src = element.getAttribute('src') ?? '';
-      const alt = element.getAttribute('alt') ?? '';
-      const imgTitle = element.getAttribute('title');
-      if (imgTitle) {
-        return `![${alt}](${src} "${imgTitle}")`;
-      }
-      return `![${alt}](${src})`;
-    }
-    case 'blockquote':
-      return `\n${inner
-        .trim()
-        .split('\n')
-        .map((line) => (line.trim() ? `> ${line}` : line))
-        .join('\n')}\n\n`;
-    case 'ul': {
-      const items = children
-        .filter((child) => (child as HTMLElement).tagName?.toLowerCase() === 'li')
-        .map((li) => {
-          const liElement = li as HTMLElement;
-          const task = liElement.querySelector('input[type="checkbox"]');
-          const liText = convertNode(li).trim();
-          if (task) {
-            const checked = (task as HTMLInputElement).checked;
-            return `- [${checked ? 'x' : ' '}] ${liText.replace(/^\[?[ x]\]?\s*/, '')}`;
-          }
-          return `- ${liText}`;
-        })
-        .join('\n');
-      return `\n${items}\n\n`;
-    }
-    case 'ol': {
-      let index = 1;
-      const start = element.getAttribute('start');
-      if (start) {
-        const parsed = parseInt(start, 10);
-        if (!isNaN(parsed)) index = parsed;
-      }
-      const items = children
-        .filter((child) => (child as HTMLElement).tagName?.toLowerCase() === 'li')
-        .map((li) => {
-          const liElement = li as HTMLElement;
-          const task = liElement.querySelector('input[type="checkbox"]');
-          const liText = convertNode(li).trim();
-          if (task) {
-            const checked = (task as HTMLInputElement).checked;
-            return `${index++}. [${checked ? 'x' : ' '}] ${liText.replace(/^\[?[ x]\]?\s*/, '')}`;
-          }
-          return `${index++}. ${liText}`;
-        })
-        .join('\n');
-      return `\n${items}\n\n`;
-    }
-    case 'li': {
-      // li 内容由 ul/ol 处理，这里只返回内部文本
-      return inner.trim();
-    }
-    case 'table': {
-      return convertTable(element);
-    }
-    case 'div':
-    case 'span':
-    case 'section':
-    case 'article':
-    case 'main':
-    case 'header':
-    case 'footer':
-    case 'aside':
-      return inner;
-    case 'script':
-    case 'style':
-    case 'noscript':
-      return '';
-    default:
-      return inner;
-  }
-}
-
-/**
- * 转换表格元素为 Markdown
- */
-function convertTable(table: HTMLElement): string {
-  const rows = Array.from(table.querySelectorAll('tr'));
-  if (rows.length === 0) return '';
-
-  const lines: string[] = [];
-
-  const headerRow = rows[0];
-  const headerCells = Array.from(headerRow.querySelectorAll('th, td'));
-  const headers = headerCells.map((cell) => (cell.textContent ?? '').trim());
-  lines.push('| ' + headers.join(' | ') + ' |');
-
-  // 分隔行
-  const aligns = headerCells.map((cell) => {
-    const style = (cell as HTMLElement).style.textAlign;
-    if (style === 'center') return ':---:';
-    if (style === 'right') return '---:';
-    return '---';
-  });
-  lines.push('| ' + aligns.join(' | ') + ' |');
-
-  // 数据行（从第二行开始）
-  for (let i = 1; i < rows.length; i++) {
-    const cells = Array.from(rows[i].querySelectorAll('td, th'));
-    const values = cells.map((cell) => (cell.textContent ?? '').trim());
-    lines.push('| ' + values.join(' | ') + ' |');
-  }
-
-  return '\n' + lines.join('\n') + '\n\n';
-}
-
-/**
- * 转义 Markdown 特殊字符（在行内文本中）
- */
-function escapeMarkdownChars(text: string): string {
-  // 仅在特定上下文中需要转义，这里简单处理
-  return text;
-}
-
-/**
- * 示例 HTML 文本（用于占位提示）
- */
-export const SAMPLE_HTML = `<!DOCTYPE html>
-<html>
-<head><title>示例</title></head>
-<body>
-  <h1>欢迎使用 HTML 转 Markdown</h1>
-  <p>这是一个 <strong>HTML</strong> 到 <em>Markdown</em> 转换器。</p>
-
-  <h2>支持的标签</h2>
-  <ul>
-    <li>标题：h1-h6</li>
-    <li>文本格式：strong、em、del、code</li>
-    <li>链接和图像</li>
-    <li>列表：ul、ol</li>
-    <li>表格：table</li>
-    <li>引用：blockquote</li>
-  </ul>
-
-  <h3>代码示例</h3>
-  <pre><code class="language-javascript">function hello() {
-  console.log('Hello, World!');
-}</code></pre>
-
-  <h3>表格示例</h3>
-  <table>
-    <tr><th>名称</th><th>类型</th></tr>
-    <tr><td>name</td><td>string</td></tr>
-    <tr><td>age</td><td>number</td></tr>
-  </table>
-
-  <blockquote>
-    <p>这是一段引用文本。</p>
-  </blockquote>
-
-  <p>开始转换你的 HTML 内容吧！</p>
-</body>
-</html>`;
-
-/**
- * 下载 Markdown 文件
- *
- * @param content - Markdown 内容
- * @param filename - 下载文件名
- */
-export function downloadMarkdownFile(content: string, filename: string = 'export.md'): void {
-  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
diff --git a/src/utils/markdownToHtml.ts b/src/utils/markdownToHtml.ts
deleted file mode 100644
index 50de09b..0000000
--- a/src/utils/markdownToHtml.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-import { marked, type MarkedOptions } from 'marked';
-
-/**
- * Markdown 转 HTML 转换结果
- */
-export interface MarkdownToHtmlResult {
-  /** 转换后的 HTML 字符串 */
-  html: string;
-  /** 原始 Markdown 文本长度 */
-  originalLength: number;
-  /** 生成的 HTML 长度 */
-  htmlLength: number;
-  /** 是否包含错误 */
-  hasError: boolean;
-  /** 错误信息（如果有） */
-  error?: string;
-}
-
-/**
- * 默认的 Markdown 渲染选项配置
- */
-const defaultMarkedOptions: MarkedOptions = {
-  gfm: true,
-  breaks: true,
-};
-
-/**
- * 将 Markdown 文本转换为 HTML
- *
- * @param markdown - Markdown 源文本
- * @returns MarkdownToHtmlResult 转换结果
- */
-export function markdownToHtml(markdown: string): MarkdownToHtmlResult {
-  try {
-    const trimmed = markdown.trim();
-    if (!trimmed) {
-      return {
-        html: '',
-        originalLength: 0,
-        htmlLength: 0,
-        hasError: false,
-      };
-    }
-
-    const html = marked.parse(trimmed, { ...defaultMarkedOptions, async: false });
-
-    return {
-      html: html.trim(),
-      originalLength: markdown.length,
-      htmlLength: html.length,
-      hasError: false,
-    };
-  } catch (error) {
-    return {
-      html: '',
-      originalLength: markdown.length,
-      htmlLength: 0,
-      hasError: true,
-      error: error instanceof Error ? error.message : 'Markdown 解析失败',
-    };
-  }
-}
-
-/**
- * 为 HTML 内容包装完整的文档结构（用于打印/下载）
- *
- * @param html - 主体 HTML 内容
- * @param title - 文档标题
- * @returns 完整的 HTML 文档字符串
- */
-export function wrapHtmlDocument(html: string, title: string = 'Markdown Export'): string {
-  return `<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHtml(title)}</title>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      line-height: 1.6;
-      color: #333;
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 20px;
-      background: #fff;
-    }
-    h1, h2, h3, h4, h5, h6 {
-      margin-top: 24px;
-      margin-bottom: 16px;
-      font-weight: 600;
-      line-height: 1.25;
-    }
-    h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
-    h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
-    h3 { font-size: 1.25em; }
-    p { margin-top: 0; margin-bottom: 16px; }
-    a { color: #0366d6; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-    code {
-      background-color: rgba(27, 31, 35, 0.05);
-      border-radius: 3px;
-      font-size: 85%;
-      margin: 0;
-      padding: 0.2em 0.4em;
-      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    }
-    pre {
-      background-color: #f6f8fa;
-      border-radius: 6px;
-      font-size: 85%;
-      line-height: 1.45;
-      overflow: auto;
-      padding: 16px;
-    }
-    pre code {
-      background-color: transparent;
-      border: 0;
-      display: inline;
-      line-height: inherit;
-      margin: 0;
-      overflow: visible;
-      padding: 0;
-      word-wrap: normal;
-    }
-    blockquote {
-      border-left: 0.25em solid #dfe2e5;
-      color: #6a737d;
-      margin: 0;
-      padding: 0 1em;
-    }
-    ul, ol { margin-top: 0; margin-bottom: 16px; padding-left: 2em; }
-    li + li { margin-top: 0.25em; }
-    img { max-width: 100%; box-sizing: content-box; }
-    table {
-      border-collapse: collapse;
-      border-spacing: 0;
-      display: block;
-      overflow: auto;
-      width: 100%;
-    }
-    table th, table td {
-      border: 1px solid #dfe2e5;
-      padding: 6px 13px;
-    }
-    table tr:nth-child(2n) { background-color: #f6f8fa; }
-    table th { font-weight: 600; background-color: #f6f8fa; }
-    hr {
-      background-color: #e1e4e8;
-      border: 0;
-      height: 0.25em;
-      margin: 24px 0;
-      padding: 0;
-    }
-    input[type="checkbox"] { margin-right: 0.5em; }
-  </style>
-</head>
-<body>
-${html}
-</body>
-</html>`;
-}
-
-/**
- * 转义 HTML 特殊字符
- */
-function escapeHtml(text: string): string {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
-
-/**
- * 下载 HTML 文件
- *
- * @param content - 文件内容
- * @param filename - 下载文件名
- */
-export function downloadHtmlFile(content: string, filename: string = 'export.html'): void {
-  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
-
-/**
- * 打印 HTML 内容
- *
- * @param html - 要打印的 HTML 内容
- * @param title - 打印窗口标题
- */
-export function printHtml(html: string, title: string = 'Markdown Preview'): void {
-  const doc = wrapHtmlDocument(html, title);
-  const blob = new Blob([doc], { type: 'text/html;charset=utf-8' });
-  const url = URL.createObjectURL(blob);
-
-  const printWindow = window.open(url, '_blank', 'width=800,height=600');
-  if (!printWindow) {
-    URL.revokeObjectURL(url);
-    console.error('无法打开打印窗口，请检查浏览器弹窗拦截设置');
-    return;
-  }
-
-  // 等待样式加载完成后打印
-  let printed = false;
-  printWindow.onload = () => {
-    if (!printed) {
-      printed = true;
-      printWindow.print();
-    }
-  };
-  // 部分浏览器 onload 不触发，使用延迟回退
-  setTimeout(() => {
-    if (!printed) {
-      printed = true;
-      printWindow.print();
-    }
-  }, 500);
-
-  // 打印完成后释放 Blob URL（浏览器标签页关闭后也会自动回收）
-  setTimeout(() => {
-    URL.revokeObjectURL(url);
-  }, 60000);
-}
-
-/**
- * 示例 Markdown 文本（用于占位提示）
- */
-export const SAMPLE_MARKDOWN = `# 欢迎使用 Markdown 转 HTML
-
-这是一个 **Markdown** 编辑器，支持实时预览。
-
-## 基础语法
-
-### 标题
-使用 \`#\` 符号表示不同级别的标题。
-
-### 列表
-- 无序列表项 1
-- 无序列表项 2
-  - 嵌套列表项
-
-1. 有序列表项 1
-2. 有序列表项 2
-
-### 文本样式
-- **粗体文本**
-- *斜体文本*
-- ~~删除线文本~~
-- \`行内代码\`
-
-### 链接与图片
-[访问 GitHub](https://github.com)
-
-### 代码块
-\`\`\`javascript
-function hello() {
-  console.log('Hello, World!');
-}
-\`\`\`
-
-## 扩展语法
-
-### 表格
-| 名称 | 类型 | 描述 |
-|------|------|------|
-| name | string | 用户名 |
-| age | number | 年龄 |
-
-### 任务列表
-- [x] 已完成任务
-- [ ] 待办任务
-
-### 引用
-> 这是一段引用文本。
-> 可以有多行。
-
-### 分割线
-
----
-
-*开始编辑你的 Markdown 内容吧！*`;
diff --git a/wxt.config.ts b/wxt.config.ts
index 27e02cb..abd383c 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -30,10 +30,6 @@ function manualChunksForHtmlOnly(): Plugin {
           if (id.includes('@dnd-kit')) {
             return 'vendor-dnd';
           }
-          // Markdown 高性能转换引擎分流
-          if (id.includes('marked')) {
-            return 'vendor-markdown';
-          }
 
           return undefined;
         },

From c6cadda95b5e2236409d534d3f5e313d599c8b60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:22:30 +0800
Subject: [PATCH 35/71] feat: redesign Dashboard layout with search and
 recently used tools

- Add search input at top to filter tools by name/description
- Add 'recently used' section showing last 3 used tools as compact chips
- Add 'all tools' section header for the tool card grid
- Track tool usage via new 'app/recentlyUsedTools' storage key
- Update navigateTo to record recently used tools (max 3, LRU order)
- Add i18n keys: dashboard_searchPlaceholder, dashboard_recentlyUsed, dashboard_allTools

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 public/_locales/zh/messages.json |  12 +++
 src/pages/Dashboard/index.tsx    | 121 +++++++++++++++++++++++++------
 src/providers/RouterProvider.tsx |  33 +++++++++
 src/types/storage.d.ts           |   2 +
 4 files changed, 145 insertions(+), 23 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 48d5eb7..b4ce328 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -75,6 +75,18 @@
     "message": "仪表盘",
     "description": "Translation key: dashboard_title"
   },
+  "dashboard_searchPlaceholder": {
+    "message": "搜索工具...",
+    "description": "Translation key: dashboard_searchPlaceholder"
+  },
+  "dashboard_recentlyUsed": {
+    "message": "最近使用",
+    "description": "Translation key: dashboard_recentlyUsed"
+  },
+  "dashboard_allTools": {
+    "message": "全部工具",
+    "description": "Translation key: dashboard_allTools"
+  },
   "timestamp_title": {
     "message": "时间戳",
     "description": "Translation key: timestamp_title"
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index f843fef..29220a1 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -2,40 +2,115 @@ import { useRouter } from '@/providers/RouterProvider';
 import ToolCard from '@/pages/Dashboard/ToolCard';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
+import { Search } from 'lucide-react';
 
 export default function DashboardPage() {
-  const { navigateTo, visiblePages, pageOrder } = useRouter();
+  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
   const { t } = useI18n(['features']);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
 
+  const visibleFeatures = useMemo(() => {
+    return pageOrder
+      .filter((key) => visibleSet.has(key))
+      .map((key) => ({ key, feature: getFeatureByKey(key) }))
+      .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
+  }, [pageOrder, visibleSet]);
+
+  const filteredFeatures = useMemo(() => {
+    if (!searchQuery.trim()) return visibleFeatures;
+    const query = searchQuery.toLowerCase();
+    return visibleFeatures.filter(
+      (item) =>
+        t(item.feature!.labelKey).toLowerCase().includes(query) ||
+        t(item.feature!.descriptionKey).toLowerCase().includes(query),
+    );
+  }, [visibleFeatures, searchQuery, t]);
+
+  const recentFeatures = useMemo(() => {
+    return recentlyUsedTools
+      .filter((key) => visibleSet.has(key))
+      .map((key) => ({ key, feature: getFeatureByKey(key) }))
+      .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
+  }, [recentlyUsedTools, visibleSet]);
+
+  const showRecent = !searchQuery.trim() && recentFeatures.length > 0;
+
   return (
-    <div
-      className={cn(
-        'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5 p-3.5 w-full h-auto',
-        'select-none',
+    <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
+      {/* 搜索栏 */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t('dashboard_searchPlaceholder')}
+          className={cn(
+            'w-full h-9 pl-9 pr-3 rounded-lg border border-border/70 bg-background text-sm',
+            'placeholder:text-muted-foreground/50 outline-none',
+            'focus:border-primary/50 focus:ring-1 focus:ring-primary/20',
+            'transition-colors',
+          )}
+        />
+      </div>
+
+      {/* 最近使用 */}
+      {showRecent && (
+        <div className="flex flex-col gap-2">
+          <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
+            {t('dashboard_recentlyUsed')}
+          </h3>
+          <div className="flex flex-wrap gap-2">
+            {recentFeatures.map(({ key, feature }) => {
+              const IconComponent = feature!.icon!;
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => navigateTo(key as PageType)}
+                  className={cn(
+                    'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
+                    'border border-border/60 bg-card text-card-foreground',
+                    'hover:bg-muted/40 hover:border-primary/30',
+                    'transition-colors cursor-pointer',
+                  )}
+                >
+                  <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
+                  {t(feature!.labelKey)}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       )}
-    >
-      {pageOrder.map((key) => {
-        if (!visibleSet.has(key)) return null;
 
-        const feature = getFeatureByKey(key);
-        if (!feature?.themeColorKey || feature.icon == null) return null;
-
-        return (
-          <ToolCard
-            key={key}
-            title={t(feature.labelKey)}
-            description={t(feature.descriptionKey)}
-            colorKey={feature.themeColorKey}
-            icon={feature.icon}
-            onNavigate={() => navigateTo(key as PageType)}
-          />
-        );
-      })}
+      {/* 全部工具 */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
+          {t('dashboard_allTools')}
+        </h3>
+        <div
+          className={cn(
+            'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5',
+          )}
+        >
+          {filteredFeatures.map(({ key, feature }) => (
+            <ToolCard
+              key={key}
+              title={t(feature!.labelKey)}
+              description={t(feature!.descriptionKey)}
+              colorKey={feature!.themeColorKey!}
+              icon={feature!.icon!}
+              onNavigate={() => navigateTo(key as PageType)}
+            />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/providers/RouterProvider.tsx b/src/providers/RouterProvider.tsx
index badd823..6c90a41 100644
--- a/src/providers/RouterProvider.tsx
+++ b/src/providers/RouterProvider.tsx
@@ -17,6 +17,8 @@ import {
 } from '@/config/features';
 import { CONTEXT_MENU_DATA_EXPIRY_MS, saveContextMenuData } from '@/utils/useContextMenuData';
 
+const MAX_RECENTLY_USED = 3;
+
 /**
  * 校验是否为合法的页面类型
  */
@@ -48,6 +50,7 @@ interface RouterContextType {
   currentPage: PageType;
   visiblePages: PageType[];
   pageOrder: PageType[];
+  recentlyUsedTools: PageType[];
   isLoaded: boolean;
   navigateTo: (page: PageType) => void;
   goBack: () => void;
@@ -118,6 +121,10 @@ export function RouterProvider({
     return mergeWithDefaults(snapshot, getDefaultPageOrder());
   });
 
+  const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(() =>
+    getSyncSnapshot('app/recentlyUsedTools', [], isValidPageList),
+  );
+
   const [isLoaded, setIsLoaded] = useState(() => {
     const snapshotKey = localStorage.getItem(`snapshot/${syncKey as string}`);
     const snapshotVisible = localStorage.getItem(`snapshot/${visiblePagesKey as string}`);
@@ -136,6 +143,7 @@ export function RouterProvider({
         getDefaultVisibleFeatureKeys(),
       );
       const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
+      const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
 
       if (isValidPage(savedRoute) && syncRoute) {
         setCurrentPage(savedRoute);
@@ -146,6 +154,9 @@ export function RouterProvider({
       if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
         setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
       }
+      if (isValidPageList(savedRecentTools)) {
+        setRecentlyUsedTools(savedRecentTools);
+      }
       setIsLoaded(true);
     } catch (error) {
       console.error('[Router Init Error] Core data fetch failed:', error);
@@ -234,6 +245,17 @@ export function RouterProvider({
     }
   }, [pageOrder, isLoaded, pageOrderKey]);
 
+  useEffect(() => {
+    if (isLoaded) {
+      void storageUtil.set('app/recentlyUsedTools', recentlyUsedTools).catch(console.error);
+      try {
+        localStorage.setItem('snapshot/app/recentlyUsedTools', JSON.stringify(recentlyUsedTools));
+      } catch (err) {
+        console.error('[Router LocalStorage Error]', err);
+      }
+    }
+  }, [recentlyUsedTools, isLoaded]);
+
   const currentPageRef = useRef(currentPage);
   useEffect(() => {
     currentPageRef.current = currentPage;
@@ -261,6 +283,12 @@ export function RouterProvider({
           setPageOrder(newOrder);
         }
       }
+      if (changes['app/recentlyUsedTools']) {
+        const newRecent = changes['app/recentlyUsedTools'].newValue;
+        if (isValidPageList(newRecent)) {
+          setRecentlyUsedTools(newRecent);
+        }
+      }
       if (changes['contextMenu/pendingData']) {
         const newData = changes['contextMenu/pendingData']
           .newValue as ContextMenuPendingData | null;
@@ -282,6 +310,10 @@ export function RouterProvider({
 
   const navigateTo = (page: PageType) => {
     setCurrentPage(page);
+    setRecentlyUsedTools((prev) => {
+      const filtered = prev.filter((p) => p !== page);
+      return [page, ...filtered].slice(0, MAX_RECENTLY_USED);
+    });
   };
 
   const goBack = () => {
@@ -294,6 +326,7 @@ export function RouterProvider({
         currentPage,
         visiblePages,
         pageOrder,
+        recentlyUsedTools,
         isLoaded,
         navigateTo,
         goBack,
diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
index 1743e9d..64fe134 100644
--- a/src/types/storage.d.ts
+++ b/src/types/storage.d.ts
@@ -113,6 +113,8 @@ export interface StorageSchema {
   'app/language': string;
   /** 右键菜单待处理数据 */
   'contextMenu/pendingData': ContextMenuPendingData;
+  /** 最近使用的工具列表（最多保留 3 个） */
+  'app/recentlyUsedTools': PageType[];
 }
 
 /**

From 2cb5b0c1e7048a68e5cbb82f82a139446dd3599c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:25:47 +0800
Subject: [PATCH 36/71] feat: replace ToolCard grid with compact icon+name grid
 on Dashboard

- Replace large ToolCard layout with dense grid (3-6 columns responsive)
- Each item shows icon + tool name in a compact tile
- Hover highlights icon and text with smooth transitions
- Remove ToolCard import from Dashboard (component retained for reuse)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/pages/Dashboard/index.tsx | 46 ++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 29220a1..15b8210 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,5 +1,4 @@
 import { useRouter } from '@/providers/RouterProvider';
-import ToolCard from '@/pages/Dashboard/ToolCard';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
 import { useMemo, useState } from 'react';
@@ -89,26 +88,39 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* 全部工具 */}
+      {/* 全部工具 — 紧凑 Grid */}
       <div className="flex flex-col gap-2">
         <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
           {t('dashboard_allTools')}
         </h3>
-        <div
-          className={cn(
-            'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5',
-          )}
-        >
-          {filteredFeatures.map(({ key, feature }) => (
-            <ToolCard
-              key={key}
-              title={t(feature!.labelKey)}
-              description={t(feature!.descriptionKey)}
-              colorKey={feature!.themeColorKey!}
-              icon={feature!.icon!}
-              onNavigate={() => navigateTo(key as PageType)}
-            />
-          ))}
+        <div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
+          {filteredFeatures.map(({ key, feature }) => {
+            const IconComponent = feature!.icon!;
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => navigateTo(key as PageType)}
+                className={cn(
+                  'group flex flex-col items-center justify-center gap-1.5',
+                  'py-3 px-2 rounded-xl border border-border/50 bg-card',
+                  'hover:bg-muted/40 hover:border-primary/30',
+                  'transition-colors cursor-pointer',
+                )}
+              >
+                <IconComponent
+                  className={cn(
+                    'h-5 w-5 text-muted-foreground/70',
+                    'group-hover:text-foreground',
+                    'transition-colors',
+                  )}
+                />
+                <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
+                  {t(feature!.labelKey)}
+                </span>
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>

From 4955f617ee29b0d36e677ec1aee4dc7463af1249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:28:52 +0800
Subject: [PATCH 37/71] fix: remove redundant search input from Dashboard
 (header already has one)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/pages/Dashboard/index.tsx | 35 +++--------------------------------
 1 file changed, 3 insertions(+), 32 deletions(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 15b8210..1d28102 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,15 +1,13 @@
 import { useRouter } from '@/providers/RouterProvider';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-import { Search } from 'lucide-react';
 
 export default function DashboardPage() {
   const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
   const { t } = useI18n(['features']);
-  const [searchQuery, setSearchQuery] = useState('');
 
   const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
 
@@ -20,16 +18,6 @@ export default function DashboardPage() {
       .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
   }, [pageOrder, visibleSet]);
 
-  const filteredFeatures = useMemo(() => {
-    if (!searchQuery.trim()) return visibleFeatures;
-    const query = searchQuery.toLowerCase();
-    return visibleFeatures.filter(
-      (item) =>
-        t(item.feature!.labelKey).toLowerCase().includes(query) ||
-        t(item.feature!.descriptionKey).toLowerCase().includes(query),
-    );
-  }, [visibleFeatures, searchQuery, t]);
-
   const recentFeatures = useMemo(() => {
     return recentlyUsedTools
       .filter((key) => visibleSet.has(key))
@@ -37,27 +25,10 @@ export default function DashboardPage() {
       .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
   }, [recentlyUsedTools, visibleSet]);
 
-  const showRecent = !searchQuery.trim() && recentFeatures.length > 0;
+  const showRecent = recentFeatures.length > 0;
 
   return (
     <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
-      {/* 搜索栏 */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60" />
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={t('dashboard_searchPlaceholder')}
-          className={cn(
-            'w-full h-9 pl-9 pr-3 rounded-lg border border-border/70 bg-background text-sm',
-            'placeholder:text-muted-foreground/50 outline-none',
-            'focus:border-primary/50 focus:ring-1 focus:ring-primary/20',
-            'transition-colors',
-          )}
-        />
-      </div>
-
       {/* 最近使用 */}
       {showRecent && (
         <div className="flex flex-col gap-2">
@@ -94,7 +65,7 @@ export default function DashboardPage() {
           {t('dashboard_allTools')}
         </h3>
         <div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
-          {filteredFeatures.map(({ key, feature }) => {
+          {visibleFeatures.map(({ key, feature }) => {
             const IconComponent = feature!.icon!;
             return (
               <button

From 3400ffc9dca5e7a8ddfa416006cb626f80a375fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:34:16 +0800
Subject: [PATCH 38/71] feat: optimize TopBar search with Cmd+K shortcut and
 improved styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add global Cmd/Ctrl+K keyboard shortcut to focus search input
- Show keyboard shortcut hint (⌘K) in search input when empty
- Improve input styling: rounded-lg, softer borders, focus transitions
- Improve dropdown: rounded-lg, larger shadow, better spacing
- Larger result icons (h-8 w-8) with rounded-lg containers
- Refined history section with uppercase label and muted icon
- Search icon fades in on focus via group-focus-within

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/TopBar.tsx | 45 +++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index e9cdba9..99f15c6 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -49,6 +49,19 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  // Cmd/Ctrl+K 快捷键聚焦搜索框
+  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', [])
@@ -153,8 +166,8 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
       {/* 中间：搜索容器 */}
       <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+        <div className="relative group">
+          <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" />
           <input
             ref={inputRef}
             type="text"
@@ -168,8 +181,13 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
             onFocus={() => setShowResults(true)}
             onKeyDown={handleKeyDown}
             aria-label={t('common_buttons_search')}
-            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"
+            className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
           />
+          {!searchQuery && (
+            <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"
@@ -187,8 +205,8 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
         {/* 动态联想结果卡片 */}
         {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-          <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">
+          <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">
+            <ul role="listbox" className="p-1.5">
               {searchQuery.trim() ? (
                 searchResults.length > 0 ? (
                   searchResults.map((feature, index) => (
@@ -198,20 +216,25 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                       aria-selected={selectedIndex === index}
                       onClick={() => handleSelectFeature(feature)}
                       className={cn(
-                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
+                        'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
                         selectedIndex === index
                           ? 'bg-accent text-accent-foreground'
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground">
+                      <div
+                        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">
+                        <p className="text-xs text-muted-foreground truncate mt-0.5">
                           {t(feature.descriptionKey)}
                         </p>
                       </div>
@@ -224,7 +247,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                 )
               ) : (
                 <>
-                  <div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
+                  <div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
                     {t('common:buttons.recentSearch')}
                   </div>
                   {displayedHistory.map((item, index) => (
@@ -237,13 +260,13 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                         setSelectedIndex(-1);
                       }}
                       className={cn(
-                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
+                        'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
                         selectedIndex === index
                           ? 'bg-accent text-accent-foreground'
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <History className="h-4 w-4 text-muted-foreground shrink-0" />
+                      <History className="h-4 w-4 text-muted-foreground/60 shrink-0" />
                       <span className="truncate">{item}</span>
                     </li>
                   ))}

From 5175677b248c86ea3fcffd9b5e7249e91b4f16aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:38:18 +0800
Subject: [PATCH 39/71] feat: improve search history to show recently used
 tools with direct navigation

- Store feature keys (PageType) in history instead of translated labels
- Show icon + name + description in history items (same as search results)
- Click or Enter on history item navigates directly to the tool page
- Remove History icon import (no longer needed)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/TopBar.tsx | 61 +++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 99f15c6..fc1adad 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,15 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  ArrowLeft,
-  ExternalLink,
-  History,
-  Monitor,
-  Moon,
-  Search,
-  Settings,
-  Sun,
-  X,
-} from 'lucide-react';
+import { ArrowLeft, ExternalLink, 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';
@@ -85,12 +75,15 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
   const displayedHistory = useMemo(() => {
     if (searchQuery.trim()) return [];
-    return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
+    return searchHistory
+      .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 (query: string) => {
-    if (!query.trim()) return;
-    const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
+  const saveToHistory = async (featureKey: string) => {
+    if (!featureKey.trim()) return;
+    const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
       0,
       SEARCH_HISTORY_LIMIT,
     );
@@ -100,7 +93,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
   const handleSelectFeature = (feature: FeatureConfig) => {
     navigateTo(feature.key);
-    saveToHistory(t(feature.labelKey));
+    saveToHistory(feature.key);
     setSearchQuery('');
     setShowResults(false);
   };
@@ -127,14 +120,9 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
         if (searchQuery.trim()) {
           handleSelectFeature(searchResults[selectedIndex]);
         } else {
-          const selectedQuery = displayedHistory[selectedIndex];
-          if (selectedQuery) {
-            setSearchQuery(selectedQuery);
-            setSelectedIndex(-1);
-            const matched = FEATURES.find(
-              (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
-            );
-            if (matched) handleSelectFeature(matched);
+          const selected = displayedHistory[selectedIndex];
+          if (selected?.feature) {
+            handleSelectFeature(selected.feature);
           }
         }
       } else if (searchQuery.trim() && searchResults.length > 0) {
@@ -252,13 +240,10 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                   </div>
                   {displayedHistory.map((item, index) => (
                     <li
-                      key={item}
+                      key={item.key}
                       role="option"
                       aria-selected={selectedIndex === index}
-                      onClick={() => {
-                        setSearchQuery(item);
-                        setSelectedIndex(-1);
-                      }}
+                      onClick={() => item.feature && handleSelectFeature(item.feature)}
                       className={cn(
                         'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
                         selectedIndex === index
@@ -266,8 +251,22 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <History className="h-4 w-4 text-muted-foreground/60 shrink-0" />
-                      <span className="truncate">{item}</span>
+                      <div
+                        className={cn(
+                          '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>
                   ))}
                 </>

From 97159cb799fa7ba55b1c6d8b0a1ed8bed8414a77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:53:35 +0800
Subject: [PATCH 40/71] fix: useI18n fallback for empty string translations
 from chrome.i18n

---
 src/utils/chromeI18n.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/chromeI18n.ts b/src/utils/chromeI18n.ts
index bca3a99..f7182f3 100644
--- a/src/utils/chromeI18n.ts
+++ b/src/utils/chromeI18n.ts
@@ -36,8 +36,8 @@ export function useI18n(namespace?: string | string[]) {
     // 先尝试直接查找 key
     let message = getMessage(msgId);
 
-    // 如果直接查找未命中，尝试命名空间前缀（使用转换后的 msgId）
-    if (message === msgId && namespaces.length > 0) {
+    // 如果直接查找未命中（空字符串或返回 key 本身），尝试命名空间前缀（使用转换后的 msgId）
+    if ((!message || message === msgId) && namespaces.length > 0) {
       for (const ns of namespaces) {
         const candidate = `${ns}_${msgId}`;
         const result = getMessage(candidate);

From 0054e97a0ad9db5c04da3390df205839ee676843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 22:15:56 +0800
Subject: [PATCH 41/71] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除 options 入口点目录及相关文件
- 移除 wxt.config.ts 中 options_ui 配置
- 移除 TopBar 组件中的设置按钮和 onOpenOptions prop
- 移除 popup/sidepanel App.tsx 中的 handleOpenOptions
- 移除相关测试中的设置页面引用
- 移除 messages.json 中设置相关翻译键
- 通过 lint、typecheck、test 验证
---
 public/_locales/zh/messages.json              |  10 +-
 src/components/TopBar.tsx                     |   7 +-
 src/components/__tests__/TopBar.test.tsx      |  19 +-
 src/entrypoints/options/App.tsx               | 383 ------------------
 .../options/__tests__/App.test.tsx            | 125 ------
 src/entrypoints/options/index.html            |  12 -
 src/entrypoints/options/main.tsx              |  10 -
 src/entrypoints/popup/App.tsx                 |   6 +-
 src/entrypoints/sidepanel/App.tsx             |   8 +-
 src/utils/__tests__/chromeTabs.test.ts        |   8 -
 wxt.config.ts                                 |   4 -
 11 files changed, 9 insertions(+), 583 deletions(-)
 delete mode 100644 src/entrypoints/options/App.tsx
 delete mode 100644 src/entrypoints/options/__tests__/App.test.tsx
 delete mode 100644 src/entrypoints/options/index.html
 delete mode 100644 src/entrypoints/options/main.tsx

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index b4ce328..720c853 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -7,10 +7,7 @@
     "message": "清理",
     "description": "Translation key: buttons_clear"
   },
-  "buttons_settings": {
-    "message": "设置",
-    "description": "Translation key: buttons_settings"
-  },
+
   "messages_copySuccess": {
     "message": "已复制到剪贴板",
     "description": "Translation key: messages_copySuccess"
@@ -851,10 +848,7 @@
     "message": "在标签页打开",
     "description": "Translation key: buttons_openInTab"
   },
-  "common_buttons_settings": {
-    "message": "设置",
-    "description": "Translation key: buttons_settings"
-  },
+
   "common_errorBoundary_title": {
     "message": "糟糕，出了点问题",
     "description": "Translation key: errorBoundary_title"
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index fc1adad..919c1a7 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Settings, Sun, X } from 'lucide-react';
+import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
 import { FeatureConfig, FEATURES } from '@/config/features';
@@ -11,7 +11,7 @@ import { cn } from '@/lib/utils';
 const SEARCH_HISTORY_LIMIT = 10;
 const SEARCH_HISTORY_DISPLAY = 5;
 
-export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
+export default function TopBar() {
   const { currentPage, goBack, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
   const { t } = useI18n(['common', 'features']);
@@ -284,9 +284,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
         <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>
   );
diff --git a/src/components/__tests__/TopBar.test.tsx b/src/components/__tests__/TopBar.test.tsx
index e3b9460..28366cc 100644
--- a/src/components/__tests__/TopBar.test.tsx
+++ b/src/components/__tests__/TopBar.test.tsx
@@ -53,34 +53,21 @@ describe('TopBar 组件', () => {
   describe('渲染测试', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      renderWithProvider(<TopBar />);
       expect(screen.getByLabelText('返回')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'dashboard';
-      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      renderWithProvider(<TopBar />);
       expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
     });
-
-    it('应渲染设置按钮', () => {
-      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByLabelText('设置')).toBeInTheDocument();
-    });
   });
 
   describe('交互测试', () => {
-    it('点击设置按钮时应调用 onOpenOptions', () => {
-      const handleOpenOptions = vi.fn();
-      renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
-
-      fireEvent.click(screen.getByLabelText('设置'));
-      expect(handleOpenOptions).toHaveBeenCalledTimes(1);
-    });
-
     it('点击返回按钮时应调用 goBack', () => {
       mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      renderWithProvider(<TopBar />);
 
       fireEvent.click(screen.getByLabelText('返回'));
       expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
diff --git a/src/entrypoints/options/App.tsx b/src/entrypoints/options/App.tsx
deleted file mode 100644
index 3850346..0000000
--- a/src/entrypoints/options/App.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-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 { useI18n } from '@/utils/chromeI18n';
-
-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 } = useI18n(['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 } = useI18n(['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>
-  );
-}
diff --git a/src/entrypoints/options/__tests__/App.test.tsx b/src/entrypoints/options/__tests__/App.test.tsx
deleted file mode 100644
index a1430fa..0000000
--- a/src/entrypoints/options/__tests__/App.test.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-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';
-import { getMessage } from '@/utils/chromeI18n';
-
-// Mock storageUtil
-vi.mock('@/utils/chromeStorage', () => ({
-  storageUtil: {
-    get: vi.fn(),
-    set: vi.fn(() => Promise.resolve()),
-  },
-}));
-
-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(getMessage(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(getMessage(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(getMessage(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(getMessage(feature.labelKey))).toBeInTheDocument();
-      }
-    }
-  });
-});
diff --git a/src/entrypoints/options/index.html b/src/entrypoints/options/index.html
deleted file mode 100644
index e74b0f1..0000000
--- a/src/entrypoints/options/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!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>
diff --git a/src/entrypoints/options/main.tsx b/src/entrypoints/options/main.tsx
deleted file mode 100644
index ea46171..0000000
--- a/src/entrypoints/options/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import ReactDOM from 'react-dom/client';
-import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <AppRoot>
-    <App />
-  </AppRoot>,
-);
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index bc5f22a..cdec377 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -7,10 +7,6 @@ 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(() => {
@@ -36,7 +32,7 @@ export default function App() {
     >
       <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} />
+          <TopBar />
           <ErrorBoundary>
             <RouterContainer />
           </ErrorBoundary>
diff --git a/src/entrypoints/sidepanel/App.tsx b/src/entrypoints/sidepanel/App.tsx
index ec3285a..9709e84 100644
--- a/src/entrypoints/sidepanel/App.tsx
+++ b/src/entrypoints/sidepanel/App.tsx
@@ -7,12 +7,6 @@ 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 () => {
@@ -24,7 +18,7 @@ export default function App() {
     <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
       <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
         <div className="app flex flex-col h-screen w-full overflow-hidden">
-          <TopBar onOpenOptions={handleOpenOptions} />
+          <TopBar />
           <ErrorBoundary>
             <RouterContainer />
           </ErrorBoundary>
diff --git a/src/utils/__tests__/chromeTabs.test.ts b/src/utils/__tests__/chromeTabs.test.ts
index 2f7e4f8..c992863 100644
--- a/src/utils/__tests__/chromeTabs.test.ts
+++ b/src/utils/__tests__/chromeTabs.test.ts
@@ -106,14 +106,6 @@ describe('chromeTabs', () => {
       });
     });
 
-    it('应该支持带查询参数的扩展页面', async () => {
-      await openExtensionPage('options.html', { tab: 'settings', id: '123' });
-
-      expect(chrome.tabs.create).toHaveBeenCalledWith({
-        url: 'chrome-extension://test-extension-id/options.html?tab=settings&id=123',
-      });
-    });
-
     it('当创建标签页失败时应记录错误', async () => {
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       (chrome.tabs.create as any).mockRejectedValue(new Error('Tab creation failed'));
diff --git a/wxt.config.ts b/wxt.config.ts
index abd383c..97afe7d 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -65,10 +65,6 @@ export default defineConfig({
     side_panel: {
       default_path: 'entrypoints/sidepanel/index.html',
     },
-    options_ui: {
-      page: 'entrypoints/options/index.html',
-      open_in_tab: true,
-    },
   },
   vite: () => ({
     plugins: [manualChunksForHtmlOnly()],

From 3df45f491c6b0aa0829e51056704132b83648f66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 22:20:16 +0800
Subject: [PATCH 42/71] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=EF=BC=8C=E7=A7=BB=E9=99=A4=E8=AE=BE=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- README.md: 移除 entrypoints/options/ 目录说明
- AGENTS.md: 更新项目结构描述，移除 options/ 入口点
---
 AGENTS.md | 2 +-
 README.md | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 8a9b20d..82efa64 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -45,7 +45,7 @@ Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回
 ```
 src/                   # 源代码根目录
   config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
-  entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
+  entrypoints/           # 扩展入口点 (popup/, sidepanel/, background.ts, content.ts)
   pages/                 # 功能页面组件 (懒加载)
   components/            # 可复用 UI 组件
   components/ui/         # shadcn/ui 基础组件 (button, dialog, select 等)
diff --git a/README.md b/README.md
index 339b113..bc99572 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,6 @@
 │   │   └── features.tsx   # 功能定义与路由映射
 │   ├── entrypoints/       # 扩展程序入口点
 │   │   ├── popup/         # 点击图标弹出的主界面
-│   │   ├── options/       # 扩展程序设置页面
 │   │   ├── sidepanel/     # 浏览器侧边栏集成
 │   │   ├── background.ts  # 后台 Service Worker
 │   │   └── content.ts     # 网页注入脚本

From e33761381deb846bb3d709dfa0edf52af8d5b083 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 23:09:14 +0800
Subject: [PATCH 43/71] =?UTF-8?q?docs:=20add=20comprehensive=20page=20deve?=
 =?UTF-8?q?lopment=20standards=20(CODING=5FSTANDARDS.md=20=C2=A711)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 §11 页面开发规范（10 个子节），覆盖目录结构分4级、入口组件命名统一为 Index、业务 Hook 内部结构顺序、常量/子组件/存储键/模式切换/布局约定等规范
- 新增 §11.9 页面开发检查清单（10 步逐项确认）
- 更新 AGENTS.md 和 copilot-instructions.md 同步引用新规范章节
- 修正 useLazyTranslation → useI18n 与实际代码保持一致
---
 .github/CODING_STANDARDS.md     | 333 +++++++++++++++++++++++++++++++-
 .github/copilot-instructions.md |   4 +-
 AGENTS.md                       |  14 +-
 3 files changed, 334 insertions(+), 17 deletions(-)

diff --git a/.github/CODING_STANDARDS.md b/.github/CODING_STANDARDS.md
index 46c6bee..6cacda1 100644
--- a/.github/CODING_STANDARDS.md
+++ b/.github/CODING_STANDARDS.md
@@ -762,22 +762,335 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
 
 ---
 
-## 11. 文件组织
+## 11. 页面开发规范
 
-### 11.1 页面组件结构
+### 11.1 目录结构（按复杂度分级）
+
+#### 简单页面（单一功能，无子模式）
+
+适用于 Timestamp、Jwt、TextStatistics、RightClickRestorer 等：
 
 ```
 src/pages/FeatureName/
-├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
-├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-├── constants.ts           # 常量定义（可选）
-├── LiveClock.tsx          # 子组件（可选）
-├── ResultView.tsx         # 子组件（可选）
-└── __tests__/             # 测试文件
-    └── index.test.tsx
+├── index.tsx              # 页面入口组件（default export）
+├── useFeatureName.ts      # 业务逻辑 Hook（命名导出）
+├── constants.ts           # 常量定义（可选，命名导出）
+├── SubComponent.tsx       # 子组件（可选，default export）
+└── __tests__/
+    └── index.test.tsx     # 页面集成测试
 ```
 
-### 11.2 目录职责
+#### 中等页面（含多个子模式/标签页切换）
+
+适用于 Base64Converter、StorageCleaner 等：
+
+```
+src/pages/FeatureName/
+├── index.tsx              # 页面入口（模式路由 + 顶层布局）
+├── useFeatureName.ts      # 业务逻辑 Hook（命名导出）
+├── SubModeA.tsx           # 子模式组件
+├── SubModeB.tsx           # 子模式组件
+├── SubComponent.tsx       # 可复用子组件
+└── __tests__/
+    ├── index.test.tsx
+    └── SubModeA.test.tsx
+```
+
+#### 复杂页面（Context + 多组件协作）
+
+适用于 QrCode、JsonTools 等：
+
+```
+src/pages/FeatureName/
+├── index.tsx              # 页面入口（Provider + 布局）
+├── types.ts               # 页面专属类型定义
+├── constants.ts           # 常量（可选）
+├── contexts/              # React Context 定义
+│   └── FeatureContext.ts
+├── hooks/                 # 页面专属 Hooks
+│   └── useFeature.ts
+├── components/            # 页面专属子组件
+│   ├── PanelA.tsx
+│   └── PanelB.tsx
+└── __tests__/
+    ├── index.test.tsx
+    └── useFeature.test.ts
+```
+
+#### 特殊情况（单个文件即可）
+
+功能极简的页面（如 Dashboard），仅需 `index.tsx` 一个文件。当 `index.tsx` 超过 **150 行**时，应拆分为 UI + Hook 模式。
+
+---
+
+### 11.2 页面入口组件（`index.tsx`）规范
+
+#### 组件命名
+
+- 页面入口组件**统一使用 `Index` 作为函数名**，通过 `export default` 导出
+- 使用 `export default function Index()` 而非匿名默认导出
+- **禁止**混用 `XxxPage` 命名（当前 `RightClickRestorerPage`、`DashboardPage` 不合规范，应统一为 `Index`）
+
+```typescript
+// ✅ 正确
+export default function Index() { ... }
+
+// ❌ 错误 — 命名不一致
+export default function RightClickRestorerPage() { ... }
+export default function DashboardPage() { ... }
+```
+
+#### 组件职责
+
+`index.tsx` 只负责三件事：
+
+1. **获取翻译函数**（`useI18n`）
+2. **调用业务 Hook** 获取状态和操作方法
+3. **渲染 UI 布局**（纯展示，无业务逻辑）
+
+```typescript
+// ✅ 标准页面入口模板
+import { useI18n } from '@/utils/chromeI18n';
+import { useFeatureName } from './useFeatureName';
+
+export default function Index() {
+  const { t } = useI18n('featureName');
+  const { state, actions } = useFeatureName();
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      {/* 纯 UI 渲染 */}
+    </div>
+  );
+}
+```
+
+#### 禁止在 `index.tsx` 中编写的内容
+
+- ❌ `useState` / `useMemo` / `useCallback`（应放在 Hook 中）
+- ❌ 数据转换/格式化逻辑
+- ❌ 异步请求/副作用
+- ❌ 超过 3 行的条件判断逻辑
+
+---
+
+### 11.3 业务 Hook 规范（`useFeatureName.ts`）
+
+#### 命名
+
+- 文件名：`useXxx.ts`（驼峰命名）
+- Hook 函数名：`useXxx()`
+- 返回值接口：`UseXxxReturn`
+
+```typescript
+// ✅ 标准 Hook 结构
+export interface UseTimestampConverterReturn {
+  mode: 'ts2dt' | 'dt2ts';
+  input: string;
+  result: string;
+  error: string;
+  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setInput: (value: string) => void;
+  handleUseNow: (now: number) => void;
+}
+
+export function useTimestampConverter(): UseTimestampConverterReturn {
+  // 所有业务逻辑在此
+}
+```
+
+#### Hook 内部结构（推荐顺序）
+
+```typescript
+export function useFeatureName(): UseFeatureNameReturn {
+  // 1. i18n
+  const { t } = useI18n('featureName');
+
+  // 2. 基础 state（useState）
+  const [mode, setMode] = useState<Mode>('default');
+  const [input, setInput] = useState('');
+
+  // 3. 持久化 state（useStorageState）
+  const [pageMode, setPageMode] = useStorageState('feature/pageMode', 'default', isValidMode);
+
+  // 4. 衍生数据（useMemo）— 响应式计算管线
+  const result = useMemo(() => {
+    // 自动计算，无需手动点击"转换"按钮
+  }, [input, mode]);
+
+  // 5. 事件处理（useCallback）
+  const handleAction = useCallback(() => { ... }, [deps]);
+
+  // 6. 副作用（useEffect）— 防抖、初始化、清理
+  useEffect(() => { ... }, [deps]);
+
+  // 7. 右键菜单数据（页面需要时）
+  useContextMenuData({ featureKey: 'featureName', onData: handleContextMenuData });
+
+  // 8. 返回
+  return { mode, input, result, setMode, setInput, handleAction };
+}
+```
+
+#### 防抖模式
+
+当输入框需要防抖时，在 Hook 中实现：
+
+```typescript
+// ✅ 防抖管道 — 在 useMemo 前定义
+const [input, setInput] = useState('');
+const [debouncedInput, setDebouncedInput] = useState('');
+
+useEffect(() => {
+  const handle = setTimeout(() => setDebouncedInput(input), 250);
+  return () => clearTimeout(handle);
+}, [input]);
+
+// 后续 useMemo 使用 debouncedInput 而非 input
+const result = useMemo(() => compute(debouncedInput), [debouncedInput]);
+```
+
+---
+
+### 11.4 常量文件规范（`constants.ts`）
+
+- 仅在常量超过 **3 个**或需要**导出类型**时创建
+- 使用 `as const` 确保字面量类型
+- 从 `as const` 数组派生联合类型
+
+```typescript
+// ✅ 标准常量文件
+export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+
+export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
+
+export type UnitType = 'ms' | 's';
+export type ZoneType = (typeof ZONES)[number];
+```
+
+---
+
+### 11.5 子组件规范
+
+#### 何时拆分子组件
+
+- `index.tsx` 超过 **150 行**
+- 存在可复用的 UI 片段（如卡片、面板、结果展示区）
+- 需要 `React.memo` 优化的高频渲染区域
+
+#### 子组件 Props 模式
+
+```typescript
+// ✅ 继承 HTML 属性 + 业务 Props
+interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  showEmptyPlaceholder?: boolean;
+}
+
+// ✅ 使用 React.memo + displayName
+const ResultView = React.memo(
+  ({ result, mode, showEmptyPlaceholder = false, className, ...props }: ResultViewProps) => {
+    const { t } = useI18n('featureName');
+    // ...
+  },
+);
+ResultView.displayName = 'ResultView';
+export default ResultView;
+```
+
+#### 子组件内可以使用 Hook
+
+子组件可以独立调用 `useI18n`、`useSnackbar` 等全局 Hook，**不需要**通过 props 从父组件传递翻译函数或 toast 方法。
+
+---
+
+### 11.6 存储键命名规范
+
+页面使用的 Storage 键必须遵循 kebab-case 格式：`{功能名}/{用途}`。
+
+```typescript
+// ✅ 正确
+'base64Converter/pageMode';
+'base64Converter/fileMode/direction';
+'jsonTools/pageMode';
+'qrCode/urlExpanded';
+
+// ❌ 错误
+'base64ConverterPageMode';
+'json_tools_page_mode';
+```
+
+在 `types/storage.d.ts` 的 `StorageSchema` 中声明所有键。
+
+---
+
+### 11.7 模式切换通用模式
+
+当页面有多个子模式（标签页切换），统一使用以下模式：
+
+```typescript
+// ✅ 标准模式切换
+const VALID_MODES = ['modeA', 'modeB'] as const;
+type PageMode = (typeof VALID_MODES)[number];
+
+const isValidMode = (val: unknown): val is PageMode =>
+  typeof val === 'string' && (VALID_MODES as readonly string[]).includes(val);
+
+export default function Index() {
+  const { t } = useI18n('featureName');
+  const [pageMode, setPageMode] = useStorageState('feature/pageMode', 'modeA', isValidMode);
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      <SwitchButtonGroup
+        value={pageMode}
+        options={[
+          { value: 'modeA', label: t('feature:modeA') },
+          { value: 'modeB', label: t('feature:modeB') },
+        ]}
+        onChange={(v: PageMode) => setPageMode(v)}
+        size="small"
+      />
+      {pageMode === 'modeA' ? <PanelA /> : <PanelB />}
+    </div>
+  );
+}
+```
+
+---
+
+### 11.8 页面布局约定
+
+- 所有页面根元素使用统一的外层容器：
+  ```
+  <div className="p-4 w-full flex flex-col space-y-4 select-none">
+  ```
+- 不需要 `<div className="min-h-screen bg-background ...">` — 该样式已由 `AppRoot` 提供
+- 不需要 `min-h-[500px]` 或固定高度（除非确有必要）
+- 卡片容器：`rounded-xl border border-border bg-card text-card-foreground shadow-sm`
+- 使用 `space-y-4` 管理纵向间距，不要手动 `mb-4`
+
+---
+
+### 11.9 页面开发检查清单
+
+新增功能页面时，逐项确认：
+
+1. ✅ 在 `types/storage.d.ts` 添加 `PageType` 联合类型
+2. ✅ 在 `config/features.tsx` 注册 `FEATURES` 配置（key、labelKey、icon、三种渲染模式组件）
+3. ✅ 创建页面目录，使用 `Index` 作为组件名
+4. ✅ 业务逻辑提取到 `useXxx.ts` Hook（index.tsx 不超过 150 行）
+5. ✅ 需要持久化的 UI 状态使用 `useStorageState`
+6. ✅ 常量 ≥3 个时提取到 `constants.ts`
+7. ✅ 在 `i18n/locales/{zh,en}/` 添加翻译
+8. ✅ 创建 `__tests__/index.test.tsx` 测试文件
+9. ✅ 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
+10. ✅ 运行 `npm run lint && npm run typecheck && npm run test` 全部通过
+
+---
+
+### 11.10 目录职责总览
 
 | 目录                 | 职责                                                         |
 | -------------------- | ------------------------------------------------------------ |
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 4fbef56..ad75f01 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -56,7 +56,7 @@ Router 同时使用 `chrome.storage.local` 持久化和 `localStorage` 快照来
 
 ### 页面组件模式
 
-功能页面遵循 **UI + Hook 分离** 模式：
+功能页面遵循 **UI + Hook 分离** 模式，详见 [CODING_STANDARDS.md § 11](./CODING_STANDARDS.md#11-页面开发规范)：
 
 ```
 pages/FeatureName/
@@ -65,7 +65,7 @@ pages/FeatureName/
 └── constants.ts           # 常量定义（可选）
 ```
 
-- 页面组件调用 `useLazyTranslation('featureName')` 获取翻译函数
+- 页面组件调用 `useI18n('featureName')` 获取翻译函数
 - Hook 负责所有状态管理，通过返回值暴露给页面
 - 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
 
diff --git a/AGENTS.md b/AGENTS.md
index 82efa64..739d438 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -59,18 +59,22 @@ public/                # 静态资源（图标、_locales 等）
 
 ### 页面组件模式
 
-典型功能页面遵循 **UI + Hook 分离** 模式：
+典型功能页面遵循 **UI + Hook 分离** 模式。详见 [CODING_STANDARDS.md § 11](./.github/CODING_STANDARDS.md#11-页面开发规范)。
 
 ```
 src/pages/FeatureName/
-├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
+├── index.tsx              # 页面 UI（纯展示，仅负责渲染布局）
 ├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-└── constants.ts           # 常量定义
+├── constants.ts           # 常量定义（可选，≥3 个常量时创建）
+└── __tests__/
+    └── index.test.tsx
 ```
 
-- 页面组件调用 `useLazyTranslation('featureName')` 获取翻译函数
+- 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
 - Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
-- 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
+- 子组件可以独立调用 `useI18n`、`useSnackbar` 等全局 Hook
+- 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
+- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
 
 ## 关键架构决策
 

From 4f7e402dba18b4c750dd2ce3710c6996d6ffb279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 23:18:58 +0800
Subject: [PATCH 44/71] refactor(pages): apply UI+Hook separation and unify
 component naming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dashboard, RightClickRestorer: rename page component to Index
- Jwt: extract useJwt.ts hook + JwtSection.tsx sub-component (127→76 lines)
- TextStatistics: extract useTextStatistics.ts hook (63→48 lines)
- JsonTools: extract useJsonTools.ts hook + constants.ts (199→109 lines)
- All pages now follow CODING_STANDARDS.md §11 pattern
---
 src/pages/Dashboard/index.tsx                 |   2 +-
 src/pages/JsonTools/constants.ts              |  27 ++++
 src/pages/JsonTools/index.tsx                 | 130 ++++-------------
 src/pages/JsonTools/useJsonTools.ts           | 137 ++++++++++++++++++
 src/pages/Jwt/JwtSection.tsx                  |  38 +++++
 src/pages/Jwt/index.tsx                       |  81 ++---------
 src/pages/Jwt/useJwt.ts                       |  43 ++++++
 src/pages/RightClickRestorer/index.tsx        |   2 +-
 src/pages/TextStatistics/index.tsx            |  17 +--
 src/pages/TextStatistics/useTextStatistics.ts |  23 +++
 10 files changed, 307 insertions(+), 193 deletions(-)
 create mode 100644 src/pages/JsonTools/constants.ts
 create mode 100644 src/pages/JsonTools/useJsonTools.ts
 create mode 100644 src/pages/Jwt/JwtSection.tsx
 create mode 100644 src/pages/Jwt/useJwt.ts
 create mode 100644 src/pages/TextStatistics/useTextStatistics.ts

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 1d28102..7d51ebd 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
-export default function DashboardPage() {
+export default function Index() {
   const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
   const { t } = useI18n(['features']);
 
diff --git a/src/pages/JsonTools/constants.ts b/src/pages/JsonTools/constants.ts
new file mode 100644
index 0000000..2fb1915
--- /dev/null
+++ b/src/pages/JsonTools/constants.ts
@@ -0,0 +1,27 @@
+import type { JsonToolsPageMode } from '@/types/storage';
+
+export const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = [
+  'diff',
+  'format',
+  'yaml',
+  'toml',
+  'minify',
+];
+
+export const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
+  typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
+
+export interface ParseState {
+  value: unknown;
+  error: string | null;
+}
+
+export const tryParse = (raw: string, invalidMsg: string): ParseState => {
+  const trimmed = raw.trim();
+  if (!trimmed) return { value: undefined, error: null };
+  try {
+    return { value: JSON.parse(trimmed), error: null };
+  } catch {
+    return { value: undefined, error: invalidMsg };
+  }
+};
diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
index 3b7fb2b..359b851 100644
--- a/src/pages/JsonTools/index.tsx
+++ b/src/pages/JsonTools/index.tsx
@@ -1,113 +1,39 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import JsonDiffInput from './JsonDiffInput';
 import DiffResult from './DiffResult';
 import DiffNavigator from './DiffNavigator';
 import JsonFormatSection from './JsonFormatSection';
-import type { ConvertFunction } from './JsonConvertSection';
 import JsonConvertSection from './JsonConvertSection';
-import { diffJson } from './diffEngine';
-import { jsonToYaml } from '@/utils/jsonToYaml';
-import { jsonToToml } from '@/utils/jsonToToml';
-import { minifyJson } from '@/utils/jsonFormatter';
-import { useStorageState } from '@/utils/useStorageState';
-import type { JsonToolsPageMode } from '@/types/storage';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { useJsonTools } from './useJsonTools';
+import type { JsonToolsPageMode } from '@/types/storage';
 import type { ViewMode } from './types';
 
-interface ParseState {
-  value: unknown;
-  error: string | null;
-}
-
-const tryParse = (raw: string, invalidMsg: string): ParseState => {
-  const trimmed = raw.trim();
-  if (!trimmed) return { value: undefined, error: null };
-  try {
-    return { value: JSON.parse(trimmed), error: null };
-  } catch {
-    return { value: undefined, error: invalidMsg };
-  }
-};
-
-const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = ['diff', 'format', 'yaml', 'toml', 'minify'];
-const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
-  typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
-
 type PageMode = JsonToolsPageMode;
 
 export default function Index() {
   const { t } = useI18n(['jsonDiff', 'jsonFormat']);
-  const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
-
-  // Debounce input
-  const [leftInput, setLeftInput] = useState('');
-  const [rightInput, setRightInput] = useState('');
-
-  // Debounced values
-  const [debouncedLeft, setDebouncedLeft] = useState('');
-  const [debouncedRight, setDebouncedRight] = useState('');
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedLeft(leftInput);
-      setDebouncedRight(rightInput);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [leftInput, rightInput]);
-
-  // Parse debounced inputs
-  const parseState = useMemo(() => {
-    const invalidMsg = t('jsonDiff:invalidJson');
-    return {
-      left: tryParse(debouncedLeft, invalidMsg),
-      right: tryParse(debouncedRight, invalidMsg),
-    };
-  }, [debouncedLeft, debouncedRight, t]);
-
-  const leftError = parseState.left.error;
-  const rightError = parseState.right.error;
-
-  const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
-  const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
-
-  // Real-time diff computation
-  const diffResult = useMemo(() => {
-    const { left, right } = parseState;
-    if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
-      return null;
-    }
-    return diffJson(left.value, right.value);
-  }, [parseState, debouncedLeft, debouncedRight]);
-
-  const total = diffResult?.diffPaths.length ?? 0;
-
-  const handlePrev = useCallback(() => {
-    if (total === 0) return;
-    setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
-  }, [total]);
-
-  const handleNext = useCallback(() => {
-    if (total === 0) return;
-    setCurrentDiffIndex((idx) => (idx + 1) % total);
-  }, [total]);
-
-  const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
-
-  const yamlConvert: ConvertFunction = useCallback((text: string) => {
-    const r = jsonToYaml(text);
-    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
-  }, []);
-
-  const tomlConvert: ConvertFunction = useCallback((text: string) => {
-    const r = jsonToToml(text);
-    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
-  }, []);
-
-  const minifyConvert: ConvertFunction = useCallback((text: string) => {
-    const r = minifyJson(text);
-    return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
-  }, []);
+  const {
+    pageMode,
+    setPageMode,
+    leftInput,
+    rightInput,
+    setLeftInput,
+    setRightInput,
+    leftError,
+    rightError,
+    viewMode,
+    setViewMode,
+    diffResult,
+    total,
+    currentDiffIndex,
+    handlePrev,
+    handleNext,
+    activePath,
+    yamlConvert,
+    tomlConvert,
+    minifyConvert,
+  } = useJsonTools();
 
   return (
     <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
@@ -144,10 +70,7 @@ export default function Index() {
               label={t('jsonDiff:leftLabel')}
               placeholder={t('jsonDiff:leftPlaceholder')}
               value={leftInput}
-              onChange={(val) => {
-                setLeftInput(val);
-                setCurrentDiffIndex(0);
-              }}
+              onChange={setLeftInput}
               error={leftError}
               minRows={9}
             />
@@ -155,10 +78,7 @@ export default function Index() {
               label={t('jsonDiff:rightLabel')}
               placeholder={t('jsonDiff:rightPlaceholder')}
               value={rightInput}
-              onChange={(val) => {
-                setRightInput(val);
-                setCurrentDiffIndex(0);
-              }}
+              onChange={setRightInput}
               error={rightError}
               minRows={9}
             />
diff --git a/src/pages/JsonTools/useJsonTools.ts b/src/pages/JsonTools/useJsonTools.ts
new file mode 100644
index 0000000..57d91e2
--- /dev/null
+++ b/src/pages/JsonTools/useJsonTools.ts
@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { useStorageState } from '@/utils/useStorageState';
+import { diffJson } from './diffEngine';
+import { jsonToYaml } from '@/utils/jsonToYaml';
+import { jsonToToml } from '@/utils/jsonToToml';
+import { minifyJson } from '@/utils/jsonFormatter';
+import { isValidPageMode, tryParse } from './constants';
+import type { JsonToolsPageMode } from '@/types/storage';
+import type { ConvertFunction } from './JsonConvertSection';
+import type { ViewMode } from './types';
+
+export interface UseJsonToolsReturn {
+  pageMode: JsonToolsPageMode;
+  setPageMode: (mode: JsonToolsPageMode) => void;
+  // Diff mode state
+  leftInput: string;
+  rightInput: string;
+  setLeftInput: (val: string) => void;
+  setRightInput: (val: string) => void;
+  leftError: string | null;
+  rightError: string | null;
+  viewMode: ViewMode;
+  setViewMode: (mode: ViewMode) => void;
+  diffResult: ReturnType<typeof diffJson> | null;
+  total: number;
+  currentDiffIndex: number;
+  handlePrev: () => void;
+  handleNext: () => void;
+  activePath: string | undefined;
+  // Convert functions
+  yamlConvert: ConvertFunction;
+  tomlConvert: ConvertFunction;
+  minifyConvert: ConvertFunction;
+}
+
+export function useJsonTools(): UseJsonToolsReturn {
+  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
+  const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
+
+  // Diff inputs
+  const [leftInput, setLeftInput] = useState('');
+  const [rightInput, setRightInput] = useState('');
+  const [debouncedLeft, setDebouncedLeft] = useState('');
+  const [debouncedRight, setDebouncedRight] = useState('');
+
+  // Debounce
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedLeft(leftInput);
+      setDebouncedRight(rightInput);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [leftInput, rightInput]);
+
+  // Parse debounced inputs
+  const parseState = useMemo(() => {
+    const invalidMsg = t('jsonDiff:invalidJson');
+    return {
+      left: tryParse(debouncedLeft, invalidMsg),
+      right: tryParse(debouncedRight, invalidMsg),
+    };
+  }, [debouncedLeft, debouncedRight, t]);
+
+  const leftError = parseState.left.error;
+  const rightError = parseState.right.error;
+
+  const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
+  const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
+
+  // Real-time diff computation
+  const diffResult = useMemo(() => {
+    const { left, right } = parseState;
+    if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
+      return null;
+    }
+    return diffJson(left.value, right.value);
+  }, [parseState, debouncedLeft, debouncedRight]);
+
+  const total = diffResult?.diffPaths.length ?? 0;
+
+  const handlePrev = useCallback(() => {
+    if (total === 0) return;
+    setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
+  }, [total]);
+
+  const handleNext = useCallback(() => {
+    if (total === 0) return;
+    setCurrentDiffIndex((idx) => (idx + 1) % total);
+  }, [total]);
+
+  const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
+
+  // Convert functions
+  const yamlConvert: ConvertFunction = useCallback((text: string) => {
+    const r = jsonToYaml(text);
+    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
+  }, []);
+
+  const tomlConvert: ConvertFunction = useCallback((text: string) => {
+    const r = jsonToToml(text);
+    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
+  }, []);
+
+  const minifyConvert: ConvertFunction = useCallback((text: string) => {
+    const r = minifyJson(text);
+    return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
+  }, []);
+
+  return {
+    pageMode,
+    setPageMode,
+    leftInput,
+    rightInput,
+    setLeftInput: (val: string) => {
+      setLeftInput(val);
+      setCurrentDiffIndex(0);
+    },
+    setRightInput: (val: string) => {
+      setRightInput(val);
+      setCurrentDiffIndex(0);
+    },
+    leftError,
+    rightError,
+    viewMode,
+    setViewMode,
+    diffResult,
+    total,
+    currentDiffIndex,
+    handlePrev,
+    handleNext,
+    activePath,
+    yamlConvert,
+    tomlConvert,
+    minifyConvert,
+  };
+}
diff --git a/src/pages/Jwt/JwtSection.tsx b/src/pages/Jwt/JwtSection.tsx
new file mode 100644
index 0000000..4a11e0f
--- /dev/null
+++ b/src/pages/Jwt/JwtSection.tsx
@@ -0,0 +1,38 @@
+import CopyButton from '@/components/CopyButton';
+import { useI18n } from '@/utils/chromeI18n';
+import { stringifyJson } from '@/utils/jwt';
+import { cn } from '@/lib/utils';
+
+interface JwtSectionProps {
+  title: string;
+  content: unknown;
+  colorClass: string;
+  bgClass: string;
+  borderClass: string;
+}
+
+export default function JwtSection({
+  title,
+  content,
+  colorClass,
+  bgClass,
+  borderClass,
+}: JwtSectionProps) {
+  const { t } = useI18n('jwt');
+  return (
+    <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
+      <div className="flex justify-between items-center mb-2 select-none">
+        <span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
+          {title}
+        </span>
+        <CopyButton
+          text={JSON.stringify(content)}
+          className="h-6 w-6 rounded-md border text-muted-foreground"
+        />
+      </div>
+      <pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
+        {content ? stringifyJson(content) : t('jwt:invalidFormat')}
+      </pre>
+    </div>
+  );
+}
diff --git a/src/pages/Jwt/index.tsx b/src/pages/Jwt/index.tsx
index 6e37771..07aa1cb 100644
--- a/src/pages/Jwt/index.tsx
+++ b/src/pages/Jwt/index.tsx
@@ -1,91 +1,31 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { parseJwt, stringifyJson } from '@/utils/jwt';
-import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
+import CopyButton from '@/components/CopyButton';
+import JwtSection from './JwtSection';
+import { useJwt } from './useJwt';
 import { useI18n } from '@/utils/chromeI18n';
-import { useContextMenuData } from '@/utils/useContextMenuData';
-import { cn } from '@/lib/utils';
-
-interface SectionProps {
-  title: string;
-  content: unknown;
-  colorClass: string;
-  bgClass: string;
-  borderClass: string;
-}
-
-const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
-  const { t } = useI18n('jwt');
-  return (
-    <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
-      <div className="flex justify-between items-center mb-2 select-none">
-        <span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
-          {title}
-        </span>
-        <CopyButton
-          text={JSON.stringify(content)}
-          className="h-6 w-6 rounded-md border text-muted-foreground"
-        />
-      </div>
-      <pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
-        {content ? stringifyJson(content) : t('jwt:invalidFormat')}
-      </pre>
-    </div>
-  );
-};
 
 export default function Index() {
   const { t } = useI18n(['jwt', 'jsonFormat']);
-  const [jwtInput, setJwtInput] = useState('');
-
-  // 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
-  const [debouncedInput, setDebouncedInput] = useState('');
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(jwtInput);
-    }, 200);
-    return () => clearTimeout(handle);
-  }, [jwtInput]);
-
-  const handleContextMenuData = useCallback((payload: string) => {
-    const cleaned = payload.replace(/^Bearer\s*/i, '').trim();
-    setJwtInput(cleaned);
-  }, []);
-
-  useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
-
-  const result = useMemo(() => {
-    if (!debouncedInput.trim()) {
-      return null;
-    }
-    return parseJwt(debouncedInput);
-  }, [debouncedInput]);
+  const { jwtInput, result, handleChange, handleClear } = useJwt();
 
   return (
     <div className="p-4 w-full flex flex-col space-y-4 select-none">
       <div className="flex flex-col gap-4">
-        {/* 输入终端 */}
         <TextInputArea
           minRows={5}
           maxRows={10}
           placeholder={t('jwt_placeholder')}
           value={jwtInput}
-          onChange={(val) => {
-            const cleaned = val.replace(/^Bearer\s*/i, '').trim();
-            setJwtInput(cleaned);
-          }}
+          onChange={handleChange}
           allowCopy={true}
           showClear={true}
           externalError={result?.error || undefined}
-          onClear={() => setJwtInput('')}
+          onClear={handleClear}
         />
 
-        {/* 解码看板结果展现 */}
         {result && !result.error && (
           <div className="flex flex-col gap-4">
-            {/* Header 分区：完美致敬 JWT.io 的鲜艳色彩，同时实现黑夜暗化自适应 */}
-            <Section
+            <JwtSection
               title={t('jwt:headerTitle')}
               content={result.header}
               colorClass="text-[#fb015b] dark:text-rose-400"
@@ -93,16 +33,14 @@ export default function Index() {
               bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
             />
 
-            {/* Payload 分区 */}
-            <Section
+            <JwtSection
               title={t('jwt:payloadTitle')}
               content={result.payload}
-              colorClass="text-[#a03aff] dark:text-purple-400" // 针对暗黑模式略微调高对比度
+              colorClass="text-[#a03aff] dark:text-purple-400"
               borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
               bgClass="bg-[#a03aff]/5 dark:bg-purple-500/5"
             />
 
-            {/* Signature 签名区：完全对齐标准的 shadcn 骨架阶度 */}
             <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
               <div className="flex justify-between items-center mb-2">
                 <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
@@ -120,7 +58,6 @@ export default function Index() {
           </div>
         )}
 
-        {/* 当解析错误时的干净中性引导拦截 */}
         {result?.error && (
           <div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
             <p className="text-xs font-semibold text-muted-foreground/80">
diff --git a/src/pages/Jwt/useJwt.ts b/src/pages/Jwt/useJwt.ts
new file mode 100644
index 0000000..5f65e3f
--- /dev/null
+++ b/src/pages/Jwt/useJwt.ts
@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+import { parseJwt } from '@/utils/jwt';
+import type { JwtResult } from '@/utils/jwt';
+
+export interface UseJwtReturn {
+  jwtInput: string;
+  result: JwtResult | null;
+  handleChange: (val: string) => void;
+  handleClear: () => void;
+}
+
+export function useJwt(): UseJwtReturn {
+  const [jwtInput, setJwtInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+
+  // 防抖管道
+  useEffect(() => {
+    const handle = setTimeout(() => setDebouncedInput(jwtInput), 200);
+    return () => clearTimeout(handle);
+  }, [jwtInput]);
+
+  // 右键菜单数据
+  const handleContextMenuData = useCallback((payload: string) => {
+    setJwtInput(payload.replace(/^Bearer\s*/i, '').trim());
+  }, []);
+
+  useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
+
+  // 响应式解析
+  const result = useMemo(() => {
+    if (!debouncedInput.trim()) return null;
+    return parseJwt(debouncedInput);
+  }, [debouncedInput]);
+
+  const handleChange = useCallback((val: string) => {
+    setJwtInput(val.replace(/^Bearer\s*/i, '').trim());
+  }, []);
+
+  const handleClear = useCallback(() => setJwtInput(''), []);
+
+  return { jwtInput, result, handleChange, handleClear };
+}
diff --git a/src/pages/RightClickRestorer/index.tsx b/src/pages/RightClickRestorer/index.tsx
index 3b14f78..35dec5f 100644
--- a/src/pages/RightClickRestorer/index.tsx
+++ b/src/pages/RightClickRestorer/index.tsx
@@ -5,7 +5,7 @@ import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-re
 import { useRightClickRestorer } from './useRightClickRestorer';
 import { useI18n } from '@/utils/chromeI18n';
 
-export default function RightClickRestorerPage() {
+export default function Index() {
   const { t } = useI18n('rightClickRestorer');
   const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
 
diff --git a/src/pages/TextStatistics/index.tsx b/src/pages/TextStatistics/index.tsx
index ef96961..438251e 100644
--- a/src/pages/TextStatistics/index.tsx
+++ b/src/pages/TextStatistics/index.tsx
@@ -1,21 +1,12 @@
-import { useCallback, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
-import { formatByteSize, getTextStats } from '@/utils/textStatistics';
+import { formatByteSize } from '@/utils/textStatistics';
 import { useI18n } from '@/utils/chromeI18n';
-import { useContextMenuData } from '@/utils/useContextMenuData';
+import { useTextStatistics } from './useTextStatistics';
 import { cn } from '@/lib/utils';
 
 export default function Index() {
   const { t } = useI18n('textStatistics');
-  const [text, setText] = useState('');
-
-  const handleContextMenuData = useCallback((payload: string) => {
-    setText(payload);
-  }, []);
-
-  useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
-
-  const stats = useMemo(() => getTextStats(text), [text]);
+  const { text, stats, setText } = useTextStatistics();
 
   const statItems = [
     { label: t('textStatistics:characters'), value: stats.characters },
@@ -26,7 +17,6 @@ export default function Index() {
 
   return (
     <div className="p-4 w-full space-y-4">
-      {/* 文本输入区域 */}
       <TextInputArea
         value={text}
         onChange={setText}
@@ -37,7 +27,6 @@ export default function Index() {
         allowCopy={true}
       />
 
-      {/* 统计结果展示区域 */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {statItems.map((item) => (
           <div
diff --git a/src/pages/TextStatistics/useTextStatistics.ts b/src/pages/TextStatistics/useTextStatistics.ts
new file mode 100644
index 0000000..78e5a1c
--- /dev/null
+++ b/src/pages/TextStatistics/useTextStatistics.ts
@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useState } from 'react';
+import { getTextStats, type TextStats } from '@/utils/textStatistics';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+
+export interface UseTextStatisticsReturn {
+  text: string;
+  stats: TextStats;
+  setText: (text: string) => void;
+}
+
+export function useTextStatistics(): UseTextStatisticsReturn {
+  const [text, setText] = useState('');
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    setText(payload);
+  }, []);
+
+  useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
+
+  const stats = useMemo(() => getTextStats(text), [text]);
+
+  return { text, stats, setText };
+}

From 77168e26524d17adfd79cf5fb3fa74fa163b99c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 23:43:02 +0800
Subject: [PATCH 45/71] refactor(StorageCleaner): improve style consistency and
 checkbox alignment

- Group storage options, auto-refresh toggle, and clean button into unified card
- Remove card wrappers from StorageOptionsGrid and AutoRefreshToggle (now sections within parent card)
- Align OptionItem and Select All checkboxes with consistent px-3.5 padding
- Distinguish indeterminate vs checked checkbox states visually
- Standardize spacing (space-y-4), add select-none to page root
- Fix import path for StorageCleanerConfirm to relative ./
---
 .../StorageCleaner/AutoRefreshToggle.tsx      | 11 ++--
 src/pages/StorageCleaner/OptionItem.tsx       | 21 +++---
 .../StorageCleaner/StorageOptionsGrid.tsx     | 18 ++---
 src/pages/StorageCleaner/index.tsx            | 65 ++++++++++---------
 4 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/src/pages/StorageCleaner/AutoRefreshToggle.tsx b/src/pages/StorageCleaner/AutoRefreshToggle.tsx
index cc21293..6b353fb 100644
--- a/src/pages/StorageCleaner/AutoRefreshToggle.tsx
+++ b/src/pages/StorageCleaner/AutoRefreshToggle.tsx
@@ -1,8 +1,8 @@
 /**
- * 自动刷新开关组件
+ * 自动刷新开关行
  *
- * 用于 StorageCleaner 页面，控制是否自动刷新存储数据列表。
- * 以卡片形式展示，左侧为标签文本，右侧为 shadcn/ui Switch 开关。
+ * 用于 StorageCleaner 页面的操作区域内（非独立卡片），
+ * 控制清理后是否自动刷新页面。左侧为标签文本，右侧为 shadcn/ui Switch 开关。
  *
  * @example
  * ```tsx
@@ -48,15 +48,14 @@ export default function AutoRefreshToggle({
   return (
     <div
       className={cn(
-        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
+        'w-full px-3.5 py-3 border-t border-border flex justify-between items-center',
         className,
       )}
       {...props}
     >
-      {/* Label 与 Switch 通过 htmlFor + id 关联，支持点击文字触发开关 */}
       <Label
         htmlFor="auto-refresh-switch"
-        className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
+        className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
       >
         {t('storageCleaner:autoRefresh')}
       </Label>
diff --git a/src/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/OptionItem.tsx
index 18c7fe6..88ba89f 100644
--- a/src/pages/StorageCleaner/OptionItem.tsx
+++ b/src/pages/StorageCleaner/OptionItem.tsx
@@ -28,32 +28,35 @@ export default function OptionItem({
     <div
       onClick={onChange}
       className={cn(
-        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
+        'flex justify-between items-center py-2.5 px-3.5 rounded-lg border cursor-pointer select-none transition-colors',
         checked
           ? 'bg-primary/5 border-primary/30 shadow-sm'
-          : 'bg-transparent border-transparent hover:bg-muted/70',
+          : 'bg-transparent border-transparent hover:bg-muted/50',
         className,
       )}
       {...props}
     >
-      {/* 左侧数据区域 */}
-      <div className="flex-1 min-w-0 mr-4">
+      <div className="flex-1 min-w-0 mr-3">
         <span
           className={cn(
-            'block text-xs font-semibold leading-tight truncate',
-            checked ? 'text-foreground font-bold' : 'text-foreground/80',
+            'block text-xs font-semibold leading-tight truncate transition-colors',
+            checked ? 'text-foreground' : 'text-foreground/75',
           )}
         >
           {t(labelKey)}
         </span>
 
-        {/* 底部容量大小或计数标识 */}
         {size !== undefined && size > 0 ? (
-          <span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
+          <span
+            className={cn(
+              'block text-[10px] font-mono font-medium mt-0.5 tabular-nums transition-colors',
+              checked ? 'text-primary/70' : 'text-muted-foreground/70',
+            )}
+          >
             {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
           </span>
         ) : (
-          <span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
+          <span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
             {t('storageCleaner:noData')}
           </span>
         )}
diff --git a/src/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
index 07a4334..3ded4e1 100644
--- a/src/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -41,15 +41,9 @@ export default function StorageOptionsGrid({
   };
 
   return (
-    <div
-      className={cn(
-        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
-        className,
-      )}
-      {...props}
-    >
-      <div className="p-3">
-        <div className="grid grid-cols-2 gap-2.5 items-stretch">
+    <div className={cn('w-full overflow-hidden', className)} {...props}>
+      <div className="px-0 pt-3.5 pb-2">
+        <div className="grid grid-cols-2 gap-2 items-stretch">
           {optionKeys.map(({ key, isCount }) => (
             <OptionItem
               key={key}
@@ -65,9 +59,9 @@ export default function StorageOptionsGrid({
 
       <div
         onClick={handleToggleAll}
-        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
+        className="border-t border-border flex justify-between items-center px-3.5 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
       >
-        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
+        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
           {t('storageCleaner:selectAll')}
         </Label>
 
@@ -75,7 +69,7 @@ export default function StorageOptionsGrid({
           checked={allSelected ? true : someSelected ? 'indeterminate' : false}
           onClick={(e) => e.stopPropagation()}
           onCheckedChange={(checked) => onSelectAll(checked === true)}
-          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary"
+          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-muted-foreground/40"
         />
       </div>
     </div>
diff --git a/src/pages/StorageCleaner/index.tsx b/src/pages/StorageCleaner/index.tsx
index b582639..63b1f28 100644
--- a/src/pages/StorageCleaner/index.tsx
+++ b/src/pages/StorageCleaner/index.tsx
@@ -1,6 +1,6 @@
 import { Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
+import StorageCleanerConfirm from './StorageCleanerConfirm';
 import { useStorageCleaner } from './useStorageCleaner';
 import StorageOptionsGrid from './StorageOptionsGrid';
 import AutoRefreshToggle from './AutoRefreshToggle';
@@ -47,37 +47,42 @@ export default function Index() {
   }
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-3.5">
-      <StorageOptionsGrid
-        options={options}
-        sizes={sizes}
-        allSelected={allSelected}
-        someSelected={someSelected}
-        onOptionChange={handleOptionChange}
-        onSelectAll={handleSelectAll}
-      />
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      {/* 操作区域卡片 */}
+      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+        <StorageOptionsGrid
+          options={options}
+          sizes={sizes}
+          allSelected={allSelected}
+          someSelected={someSelected}
+          onOptionChange={handleOptionChange}
+          onSelectAll={handleSelectAll}
+        />
 
-      <AutoRefreshToggle
-        reloadAfterClean={reloadAfterClean}
-        onChange={handleReloadAfterCleanChange}
-      />
+        <AutoRefreshToggle
+          reloadAfterClean={reloadAfterClean}
+          onChange={handleReloadAfterCleanChange}
+        />
 
-      <Button
-        variant="destructive"
-        size="default"
-        onClick={() => setShowConfirm(true)}
-        disabled={isButtonDisabled}
-        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
-      >
-        {loading ? (
-          <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            {t('storageCleaner:cleaning')}
-          </>
-        ) : (
-          t('storageCleaner:cleanNow')
-        )}
-      </Button>
+        <div className="px-3.5 pb-3.5 pt-1">
+          <Button
+            variant="destructive"
+            size="default"
+            onClick={() => setShowConfirm(true)}
+            disabled={isButtonDisabled}
+            className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t('storageCleaner:cleaning')}
+              </>
+            ) : (
+              t('storageCleaner:cleanNow')
+            )}
+          </Button>
+        </div>
+      </div>
 
       <CleaningResult result={result} />
 

From 98abe59731cdd313d5522e2ed8124c9465f88d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 19:38:28 +0800
Subject: [PATCH 46/71] fix(StorageCleaner, Base64Converter): fix layout
 padding and checkbox alignment

- StorageCleaner: add px-3.5 to grid container to prevent content sticking to border
- StorageCleaner: adjust select-all bar to pl-3.5 pr-7 for checkbox alignment with grid items
- Base64Converter: add px-2 to TextMode and Base64ConverterSection for consistent spacing

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/pages/Base64Converter/Base64ConverterSection.tsx | 2 +-
 src/pages/Base64Converter/TextMode.tsx               | 2 +-
 src/pages/StorageCleaner/StorageOptionsGrid.tsx      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Base64Converter/Base64ConverterSection.tsx b/src/pages/Base64Converter/Base64ConverterSection.tsx
index 06df626..ba4912c 100644
--- a/src/pages/Base64Converter/Base64ConverterSection.tsx
+++ b/src/pages/Base64Converter/Base64ConverterSection.tsx
@@ -57,7 +57,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4">
+    <div className="w-full flex flex-col space-y-4 px-2">
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
           value={direction}
diff --git a/src/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx
index 41f4d1b..7517cc5 100644
--- a/src/pages/Base64Converter/TextMode.tsx
+++ b/src/pages/Base64Converter/TextMode.tsx
@@ -88,7 +88,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
   };
 
   return (
-    <div className="w-full flex flex-col space-y-4">
+    <div className="w-full flex flex-col space-y-4 px-2">
       {/* 受控方向切流中枢 */}
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
         <SwitchButtonGroup
diff --git a/src/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
index 3ded4e1..352abaf 100644
--- a/src/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -42,7 +42,7 @@ export default function StorageOptionsGrid({
 
   return (
     <div className={cn('w-full overflow-hidden', className)} {...props}>
-      <div className="px-0 pt-3.5 pb-2">
+      <div className="px-3.5 pt-3.5 pb-2">
         <div className="grid grid-cols-2 gap-2 items-stretch">
           {optionKeys.map(({ key, isCount }) => (
             <OptionItem
@@ -59,7 +59,7 @@ export default function StorageOptionsGrid({
 
       <div
         onClick={handleToggleAll}
-        className="border-t border-border flex justify-between items-center px-3.5 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
+        className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
       >
         <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
           {t('storageCleaner:selectAll')}

From 488e2e8e49b4e0c012d4ea3ba546cd024795955a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 19:51:16 +0800
Subject: [PATCH 47/71] chore: add initial CLAUDE.md file with reference to
 @AGENT.md

---
 CLAUDE.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..39c76db
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+@AGENT.md

From f8c48a3047d2b906335f02352bf1ebc21c1bdef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 19:51:44 +0800
Subject: [PATCH 48/71] docs: add comprehensive visual style guide

Add VISUAL_STYLE_GUIDE.md to standardize UI development:
- Design principles and keywords
- Complete color system (CSS variables, semantic usage)
- Typography hierarchy and patterns
- Spacing, layout, and container specs
- Border radius and shadow system
- Component specs (Button, Input, Card, Dialog, etc.)
- Interaction and animation guidelines
- Dark mode implementation rules
- Tool color palette and assignment
- Code organization standards
- Anti-patterns checklist
- Quick reference appendix

Update .gitignore to allow tracking the style guide.
---
 .gitignore                 |   1 +
 docs/VISUAL_STYLE_GUIDE.md | 871 +++++++++++++++++++++++++++++++++++++
 2 files changed, 872 insertions(+)
 create mode 100644 docs/VISUAL_STYLE_GUIDE.md

diff --git a/.gitignore b/.gitignore
index d22059f..c5eb473 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,4 @@ stats-*.json
 dev/*
 
 docs/*
+!docs/VISUAL_STYLE_GUIDE.md
diff --git a/docs/VISUAL_STYLE_GUIDE.md b/docs/VISUAL_STYLE_GUIDE.md
new file mode 100644
index 0000000..ceb8169
--- /dev/null
+++ b/docs/VISUAL_STYLE_GUIDE.md
@@ -0,0 +1,871 @@
+# 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/)
+
+---
+
+_本文档随项目迭代更新。新增组件或修改视觉风格时，请同步更新此文档。_

From dff2705ef8d6995ecf855c029f05fd8d9f989c0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 19:56:52 +0800
Subject: [PATCH 49/71] docs(AGENTS): update i18n section to reflect
 chrome.i18n migration

- Replace react-i18next docs with chrome.i18n API documentation
- Update translation file paths from i18n/locales/ to public/_locales/
- Update test mock description for chromeI18n
- Remove references to useLazyTranslation, vendor-i18n chunk, and snackbar

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 AGENTS.md      | 36 +++++++++++++++--------------
 i18n/README.md | 61 --------------------------------------------------
 2 files changed, 19 insertions(+), 78 deletions(-)
 delete mode 100644 i18n/README.md

diff --git a/AGENTS.md b/AGENTS.md
index 739d438..34bd6ef 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -72,7 +72,7 @@ src/pages/FeatureName/
 
 - 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
 - Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
-- 子组件可以独立调用 `useI18n`、`useSnackbar` 等全局 Hook
+- 子组件可以独立调用 `useI18n` 等全局 Hook
 - 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
 - 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
 
@@ -92,7 +92,7 @@ src/pages/FeatureName/
 
 **浏览器兼容**: 优先使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API。
 
-**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-i18n、vendor-qr 等），无需手动配置。
+**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-qr、vendor-dnd 等），无需手动配置。
 
 ## 测试环境
 
@@ -100,35 +100,37 @@ src/pages/FeatureName/
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
   - `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
-  - `react-i18next` (返回 key 作为翻译)
-  - `@/utils/useLazyTranslation` (返回 `ns:key` 格式翻译)
+  - `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
   - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
 - Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
 - 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
 
-## i18n
+## i18n (chrome.i18n)
 
-- 命名空间: `common` (默认), `features`
-- 翻译键格式: `namespace:key` (如 `features:timestamp.title`)
-- 语言: `zh` (默认), `en`
-- 翻译文件结构:
-  - `i18n/locales/{zh,en}/common.json` - 全局通用翻译
-  - `i18n/locales/{zh,en}/features.json` - 功能模块标题和描述
-  - `i18n/locales/{zh,en}/{功能名}.json` - 各功能独立翻译（如 timestamp.json, storageCleaner.json 等）
-- 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json` 及对应功能独立 JSON
-- 使用 `useLazyTranslation` hook 加载功能独立翻译，返回 `ns:key` 格式
-- 回退策略: 当翻译 key 在目标语言缺失时，回退到默认语言 `zh`；若默认语言也缺失，返回占位格式 `namespace:key` 并在开发模式下记录 warning
+项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化，通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
+
+- **翻译文件**: `public/_locales/{zh,en}/messages.json`（Chrome 扩展标准格式）
+- **默认语言**: `zh`（在 `wxt.config.ts` 的 `manifest.default_locale` 中配置）
+- **使用方式**: `import { useI18n } from '@/utils/chromeI18n'`
+- **翻译键格式**:
+  - 直接 key: `t('dashboard_title')` → 查找 `dashboard_title`
+  - 命名空间格式（兼容旧用法）: `t('common:buttons.search')` → 查找 `common_buttons_search`
+  - 带命名空间参数: `useI18n(['common', 'features'])`，会自动尝试 `common_key`、`features_key`
+- **占位符支持**: `t('router_notFoundDescription', { entryPointType: 'popup' })`
+- **Hook 返回值**: `{ t, i18n: { language, changeLanguage }, isLoaded }`
+- **回退策略**: 当翻译 key 未命中时，返回 key 本身（开发模式下在控制台记录 warning）
+- **限制**: `chrome.i18n` 无法动态切换语言，语言跟随浏览器设置，切换后需刷新页面
 
 ## 新功能开发清单
 
 1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
 2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
 3. 在 `src/pages/` 创建页面组件 (懒加载)：
-   - `index.tsx` — UI 组件，使用 `useLazyTranslation` 获取翻译
+   - `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
    - `useFeatureName.ts` — 业务逻辑 Hook
    - `constants.ts` — 常量（可选）
-4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON）
+4. 在 `public/_locales/zh/messages.json`（及 `en/messages.json`）添加翻译
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
 
diff --git a/i18n/README.md b/i18n/README.md
deleted file mode 100644
index dcaa52b..0000000
--- a/i18n/README.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# i18n/
-
-国际化资源目录，管理多语言翻译和 i18next 初始化配置。
-
-## 目录结构
-
-```
-i18n/
-├── index.ts                    # i18next 初始化配置
-└── locales/
-    ├── zh/                     # 中文翻译（默认语言）
-    │   ├── common.json         # 通用文案
-    │   ├── features.json       # 功能模块标题和描述
-    │   ├── timestamp.json      # 时间戳工具翻译
-    │   ├── storageCleaner.json # 存储清理工具翻译
-    │   ├── qrCode.json         # 二维码工具翻译
-    │   ├── textStatistics.json # 文本统计工具翻译
-    │   ├── jwt.json            # JWT 工具翻译
-    │   ├── jsonDiff.json       # JSON 差异工具翻译
-    │   ├── jsonFormat.json     # JSON 格式化工具翻译
-    │   ├── base64Converter.json
-    │   ├── markdownToHtml.json
-    │   ├── htmlToMarkdown.json
-    │   └── rightClickRestorer.json
-    └── en/                     # 英文翻译（结构同上）
-        └── ...
-```
-
-## index.ts
-
-i18next 初始化配置：
-
-- 同步加载 `common` 和 `features` 核心命名空间
-- 自定义 `chromeStorage` 语言检测器，从 Chrome Storage 读取语言偏好
-- `normalizeLanguage()` 将任意语言标识归一化为 `zh` 或 `en`
-- 语言变更时同步更新 Day.js 本地化和 localStorage 快照
-
-## 翻译键格式
-
-- 命名空间：`common`（默认）、`features`、各功能独立命名空间
-- 键格式：`namespace:key`（如 `features:timestamp.title`、`timestamp:unitMs`）
-
-## 使用方式
-
-```tsx
-// 页面组件 — 懒加载翻译
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-const { t } = useLazyTranslation('timestamp');
-t('timestamp:title');
-
-// 全局组件 — 直接使用
-import { useTranslation } from 'react-i18next';
-const { t } = useTranslation(['common', 'features']);
-t('common:settings');
-```
-
-## 添加新翻译
-
-1. 在 `locales/{zh,en}/features.json` 添加功能标题和描述
-2. 创建 `locales/{zh,en}/{功能名}.json` 添加功能专属翻译
-3. 在 `utils/useLazyTranslation.ts` 的 `localeModules` 中注册新命名空间

From 21a6430f0d1c36d39a27d035e49e00278849054c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:10:45 +0800
Subject: [PATCH 50/71] refactor(content): simplify content script structure

- Remove messageHandler.ts (6-line pass-through facade)
- Import contextMenuHandler directly from content.ts
- Replace local getI18nText() with shared getMessage() from utils/chromeI18n

Reduces content script files from 3 to 2 and eliminates i18n logic duplication.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/entrypoints/content.ts                    |  4 ++--
 src/entrypoints/content/contextMenuHandler.ts | 10 ++--------
 src/entrypoints/content/messageHandler.ts     |  5 -----
 3 files changed, 4 insertions(+), 15 deletions(-)
 delete mode 100644 src/entrypoints/content/messageHandler.ts

diff --git a/src/entrypoints/content.ts b/src/entrypoints/content.ts
index de742e7..4cfbc44 100644
--- a/src/entrypoints/content.ts
+++ b/src/entrypoints/content.ts
@@ -1,10 +1,10 @@
 import '../../.wxt/types/imports.d.ts';
-import { initMessageHandler } from './content/messageHandler';
+import { initContextMenuHandler } from './content/contextMenuHandler';
 
 export default defineContentScript({
   matches: ['<all_urls>'],
   runAt: 'document_end',
   main() {
-    initMessageHandler();
+    initContextMenuHandler();
   },
 });
diff --git a/src/entrypoints/content/contextMenuHandler.ts b/src/entrypoints/content/contextMenuHandler.ts
index 651d0c0..cc9b940 100644
--- a/src/entrypoints/content/contextMenuHandler.ts
+++ b/src/entrypoints/content/contextMenuHandler.ts
@@ -1,17 +1,11 @@
 import type { ContextMenuClickedPayload } from '@/utils/messages';
 import { MessageAction, onMessage } from '@/utils/messages';
 import { getTextStats } from '@/utils/textStatistics';
+import { getMessage } from '@/utils/chromeI18n';
 import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
 
-function 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 = getI18nText('invalidTimestamp', 'Invalid Timestamp');
+  const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
   const num = Number(input.trim());
 
   if (isNaN(num)) {
diff --git a/src/entrypoints/content/messageHandler.ts b/src/entrypoints/content/messageHandler.ts
deleted file mode 100644
index 26b3743..0000000
--- a/src/entrypoints/content/messageHandler.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { initContextMenuHandler } from './contextMenuHandler';
-
-export function initMessageHandler(): void {
-  initContextMenuHandler();
-}

From e97f4cae9a6e755b6285d92e0f4af4fa6eb97d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:15:54 +0800
Subject: [PATCH 51/71] refactor(RightClickRestorer): simplify setDomain logic

Replace nested if/try/catch with a single ternary expression.
isUnsupportedPage() already handles invalid URLs, so new URL() is safe here.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/pages/RightClickRestorer/useRightClickRestorer.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/pages/RightClickRestorer/useRightClickRestorer.ts b/src/pages/RightClickRestorer/useRightClickRestorer.ts
index f7abeb4..d1ec990 100644
--- a/src/pages/RightClickRestorer/useRightClickRestorer.ts
+++ b/src/pages/RightClickRestorer/useRightClickRestorer.ts
@@ -39,13 +39,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
         const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
         const url = tab?.url;
 
-        if (url) {
-          try {
-            setDomain(new URL(url).hostname);
-          } catch {
-            setDomain('');
-          }
-        }
+        setDomain(url ? new URL(url).hostname : '');
 
         if (isUnsupportedPage(url)) {
           setIsUnsupported(true);

From c9fe27a26b20112236899c728b7a5c9d1bac3955 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:20:11 +0800
Subject: [PATCH 52/71] refactor(background): extract main world injection
 script

Move the 62-line inline main world injection function from background.ts
to a dedicated utils/rightClickInjection.ts file.

This separates the RightClickRestorer's DOM patching logic from the
service worker's message routing concerns.

- background.ts: -62 lines, now delegates to imported function
- utils/rightClickInjection.ts: new file with mainWorldInjectionScript()

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/entrypoints/background.ts    | 64 +---------------------------
 src/utils/rightClickInjection.ts | 71 ++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 62 deletions(-)
 create mode 100644 src/utils/rightClickInjection.ts

diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index 4e05ad4..781b530 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -3,6 +3,7 @@ import { browser } from 'wxt/browser';
 import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
 import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
 import { saveContextMenuData } from '@/utils/useContextMenuData';
+import { mainWorldInjectionScript } from '@/utils/rightClickInjection';
 
 export default defineBackground(() => {
   // 1. 扩展初次安装或更新时，注册右键上下文菜单
@@ -71,68 +72,7 @@ export default defineBackground(() => {
     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'];
-
-          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,
-          });
-
-          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,
-          });
-
-          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,
-          });
-        },
+        func: mainWorldInjectionScript,
         world: 'MAIN',
       });
 
diff --git a/src/utils/rightClickInjection.ts b/src/utils/rightClickInjection.ts
new file mode 100644
index 0000000..6645fa1
--- /dev/null
+++ b/src/utils/rightClickInjection.ts
@@ -0,0 +1,71 @@
+/**
+ * 右键解锁功能的主环境注入脚本
+ *
+ * 由于 content script 运行在 Isolated World，无法直接修改网页主环境的
+ * Event.prototype.preventDefault 等原生方法。需要通过 background
+ * 的 scripting.executeScript({ world: 'MAIN' }) 注入此脚本。
+ */
+
+/**
+ * 在网页主环境中执行的注入函数
+ * 注意：此函数会被序列化后通过 executeScript 注入，不能引用外部变量
+ */
+export function mainWorldInjectionScript(): void {
+  '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'];
+
+  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,
+  });
+
+  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,
+  });
+
+  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,
+  });
+}

From 7bd52bfc2bc66df4e29194b21d74472f6b4e9fea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:22:44 +0800
Subject: [PATCH 53/71] refactor(background): simplify RELOAD_TAB with
 setTimeout

Replace the 30-line chrome.alarms API implementation with a simple
setTimeout for delayed tab reloads.

Rationale: The only usage is a 1-second delay after storage cleaning.
Service workers don't go idle within 1 second, so alarms' persistence
benefit is unnecessary here.

- Removed: alarm naming, create/clear, listener register/unregister
- Added: 4-line setTimeout conditional

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/entrypoints/background.ts | 25 +++----------------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index 781b530..2a7ff00 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -93,31 +93,12 @@ export default defineBackground(() => {
       });
     };
 
-    if (delay <= 0) {
+    if (delay > 0) {
+      setTimeout(executeReload, delay);
+    } else {
       executeReload();
-      return { success: true };
     }
 
-    const alarmName = `reload-tab-${tabId}-${Date.now()}`;
-
-    await browser.alarms.create(alarmName, { when: Date.now() + delay });
-
-    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 };
   });
 });

From dbdec710ef046e4b2061a1879e191ed2bb6d67c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:32:58 +0800
Subject: [PATCH 54/71] refactor(storageCleaner): extract executeScript helpers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract two generic helpers to eliminate repetitive executeScript boilerplate:

- runScript<T>(): for size/query operations (5 functions)
- runCleanScript(): for cleanup operations (5 functions)

Also add CLEAN_OPTION_KEYS constant shared by formatCleaningResult
and isEmptyResult.

- 428 lines → 379 lines (-49 lines)
- Eliminates ~100 lines of duplicated try/catch/result parsing

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/utils/storageCleaner.ts | 432 ++++++++++++++++--------------------
 1 file changed, 192 insertions(+), 240 deletions(-)

diff --git a/src/utils/storageCleaner.ts b/src/utils/storageCleaner.ts
index bf2591b..53aef67 100644
--- a/src/utils/storageCleaner.ts
+++ b/src/utils/storageCleaner.ts
@@ -1,6 +1,11 @@
 import type { CleaningResult, StorageCleanerOptions, StorageCleanResult } from '@/types/storage';
 import { formatBytes } from './format';
 
+/** 格式化字节大小显示（兼容旧接口，内部委托给 formatBytes） */
+export function formatSize(bytes: number): string {
+  return formatBytes(bytes);
+}
+
 const RESTRICTED_PROTOCOLS = [
   'chrome:',
   'chrome-extension:',
@@ -11,6 +16,16 @@ const RESTRICTED_PROTOCOLS = [
   'data:',
 ] as const;
 
+/** 清理选项的 key 列表（用于遍历结果） */
+const CLEAN_OPTION_KEYS: (keyof StorageCleanerOptions)[] = [
+  'localStorage',
+  'sessionStorage',
+  'indexedDB',
+  'cookies',
+  'cacheStorage',
+  'serviceWorkers',
+];
+
 export async function getCurrentTab() {
   // For popup pages, we need to get the active tab from the browser window that triggered the popup.
   // We should ONLY care about the currently active tab in the last focused window.
@@ -59,129 +74,122 @@ export async function getCookieSize(url: string): Promise<number> {
   }
 }
 
-export async function getLocalStorageSize(tabId: number): Promise<number> {
+/**
+ * 通用辅助：在指定标签页中执行脚本并返回结果
+ *
+ * @param tabId 标签页 ID
+ * @param func 在页面上下文中执行的函数
+ * @param errorLabel 错误日志前缀
+ * @param fallback 执行失败时的回退值
+ */
+async function runScript<T>(
+  tabId: number,
+  func: () => T | Promise<T>,
+  errorLabel: string,
+  fallback: T,
+): Promise<T> {
   try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: () => {
-        try {
-          const encoder = new TextEncoder();
-          return Object.entries(localStorage).reduce(
-            (acc, [k, v]) => acc + encoder.encode(k).length + encoder.encode(v).length,
-            0,
-          );
-        } catch {
-          return 0;
-        }
-      },
-    });
-    return (result?.result as number) || 0;
+    const [result] = await chrome.scripting.executeScript({ target: { tabId }, func });
+    return (result?.result as T) ?? fallback;
   } catch (error) {
-    console.error('Failed to get LocalStorage size:', error);
-    return 0;
+    console.error(`Failed to ${errorLabel}:`, error);
+    return fallback;
   }
 }
 
+export async function getLocalStorageSize(tabId: number): Promise<number> {
+  return runScript(
+    tabId,
+    () => {
+      try {
+        const encoder = new TextEncoder();
+        return Object.entries(localStorage).reduce(
+          (acc, [k, v]) => acc + encoder.encode(k).length + encoder.encode(v).length,
+          0,
+        );
+      } catch {
+        return 0;
+      }
+    },
+    'get LocalStorage size',
+    0,
+  );
+}
+
 export async function getSessionStorageSize(tabId: number): Promise<number> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: () => {
-        try {
-          const encoder = new TextEncoder();
-          return Object.entries(sessionStorage).reduce(
-            (acc, [k, v]) => acc + encoder.encode(k).length + encoder.encode(v).length,
-            0,
-          );
-        } catch {
-          return 0;
-        }
-      },
-    });
-    return (result?.result as number) || 0;
-  } catch (error) {
-    console.error('Failed to get SessionStorage size:', error);
-    return 0;
-  }
+  return runScript(
+    tabId,
+    () => {
+      try {
+        const encoder = new TextEncoder();
+        return Object.entries(sessionStorage).reduce(
+          (acc, [k, v]) => acc + encoder.encode(k).length + encoder.encode(v).length,
+          0,
+        );
+      } catch {
+        return 0;
+      }
+    },
+    'get SessionStorage size',
+    0,
+  );
 }
 
 export async function getOriginStorageEstimate(tabId: number): Promise<number> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: async () => {
-        try {
-          if (navigator.storage && navigator.storage.estimate) {
-            const estimate = await navigator.storage.estimate();
-            return estimate.usage || 0;
-          }
-          return 0;
-        } catch {
-          return 0;
+  return runScript(
+    tabId,
+    async () => {
+      try {
+        if (navigator.storage && navigator.storage.estimate) {
+          const estimate = await navigator.storage.estimate();
+          return estimate.usage || 0;
         }
-      },
-    });
-    return (result?.result as number) || 0;
-  } catch (error) {
-    console.error('Failed to get origin storage estimate:', error);
-    return 0;
-  }
+        return 0;
+      } catch {
+        return 0;
+      }
+    },
+    'get origin storage estimate',
+    0,
+  );
 }
 
 export async function getCacheStorageSize(tabId: number): Promise<number> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: async () => {
-        try {
-          if ('caches' in window) {
-            const keys = await caches.keys();
-            return keys.length;
-          }
-          return 0;
-        } catch {
-          return 0;
+  return runScript(
+    tabId,
+    async () => {
+      try {
+        if ('caches' in window) {
+          const keys = await caches.keys();
+          return keys.length;
         }
-      },
-    });
-    return (result?.result as number) || 0;
-  } catch (error) {
-    console.error('Failed to get CacheStorage size:', error);
-    return 0;
-  }
+        return 0;
+      } catch {
+        return 0;
+      }
+    },
+    'get CacheStorage size',
+    0,
+  );
 }
 
 export async function getServiceWorkerCount(tabId: number): Promise<number> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: async () => {
-        try {
-          if ('serviceWorker' in navigator) {
-            const regs = await navigator.serviceWorker.getRegistrations();
-            return regs.length;
-          }
-          return 0;
-        } catch {
-          return 0;
+  return runScript(
+    tabId,
+    async () => {
+      try {
+        if ('serviceWorker' in navigator) {
+          const regs = await navigator.serviceWorker.getRegistrations();
+          return regs.length;
         }
-      },
-    });
-    return (result?.result as number) || 0;
-  } catch (error) {
-    console.error('Failed to get ServiceWorker count:', error);
-    return 0;
-  }
-}
-
-/**
- * 格式化字节大小显示（兼容旧接口，内部委托给 formatBytes）
- *
- * @param bytes 字节数
- * @returns 格式化后的字符串
- */
-export function formatSize(bytes: number): string {
-  return formatBytes(bytes);
+        return 0;
+      } catch {
+        return 0;
+      }
+    },
+    'get ServiceWorker count',
+    0,
+  );
 }
 
 export async function clearCookies(url: string): Promise<StorageCleanResult> {
@@ -203,16 +211,19 @@ export async function clearCookies(url: string): Promise<StorageCleanResult> {
   }
 }
 
-export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
+/**
+ * 通用辅助：执行清理脚本并解析结果
+ *
+ * @param tabId 标签页 ID
+ * @param func 在页面上下文中执行的清理函数
+ * @param errorLabel 错误日志前缀
+ */
+async function runCleanScript(
+  tabId: number,
+  func: () => { count: number } | Promise<{ count: number }>,
+): Promise<StorageCleanResult> {
   try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: () => {
-        const count = localStorage.length;
-        localStorage.clear();
-        return { count };
-      },
-    });
+    const [result] = await chrome.scripting.executeScript({ target: { tabId }, func });
     if (result?.result && typeof result.result === 'object' && 'count' in result.result) {
       return { success: true, count: result.result.count };
     }
@@ -222,129 +233,86 @@ export async function injectClearLocalStorage(tabId: number): Promise<StorageCle
   }
 }
 
+export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
+  return runCleanScript(tabId, () => {
+    const count = localStorage.length;
+    localStorage.clear();
+    return { count };
+  });
+}
+
 export async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: () => {
-        const count = sessionStorage.length;
-        sessionStorage.clear();
-        return { count };
-      },
-    });
-    if (result?.result && typeof result.result === 'object' && 'count' in result.result) {
-      return { success: true, count: result.result.count };
-    }
-    return { success: false, error: 'No result returned' };
-  } catch (error) {
-    return { success: false, error: String(error) };
-  }
+  return runCleanScript(tabId, () => {
+    const count = sessionStorage.length;
+    sessionStorage.clear();
+    return { count };
+  });
 }
 
 export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: async () => {
-        if (typeof indexedDB.databases === 'function') {
-          const databases = await indexedDB.databases();
-          let count = 0;
-          for (const db of databases) {
-            if (db.name) {
-              const dbName = db.name as string;
-              try {
-                await new Promise<void>((resolve, reject) => {
-                  const deleteReq = indexedDB.deleteDatabase(dbName);
-                  const timeout = setTimeout(() => {
-                    console.warn('IndexedDB delete timeout:', dbName);
-                    resolve(); // Timeout, move to next
-                  }, 5000);
-
-                  deleteReq.onblocked = () => {
-                    console.warn('IndexedDB delete blocked:', dbName);
-                    clearTimeout(timeout);
-                    resolve(); // Blocked, move to next
-                  };
-                  deleteReq.onsuccess = () => {
-                    clearTimeout(timeout);
-                    resolve();
-                  };
-                  deleteReq.onerror = () => {
-                    clearTimeout(timeout);
-                    reject(new Error(`Failed to delete ${dbName}`));
-                  };
-                });
-                count++;
-              } catch (e) {
-                console.error('Delete DB error:', e);
-              }
-            }
-          }
-          return { count };
-        }
-        return { error: 'databases_api_unavailable' };
-      },
-    });
-    if (result?.result && typeof result.result === 'object') {
-      if ('error' in result.result) {
-        return { success: false, error: String(result.result.error) };
-      }
-      if ('count' in result.result) {
-        return { success: true, count: result.result.count };
+  return runCleanScript(tabId, async () => {
+    if (typeof indexedDB.databases !== 'function') {
+      return { count: 0 };
+    }
+    const databases = await indexedDB.databases();
+    let count = 0;
+    for (const db of databases) {
+      if (!db.name) continue;
+      const dbName = db.name;
+      try {
+        await new Promise<void>((resolve, reject) => {
+          const deleteReq = indexedDB.deleteDatabase(dbName);
+          const timeout = setTimeout(() => {
+            console.warn('IndexedDB delete timeout:', dbName);
+            resolve();
+          }, 5000);
+          deleteReq.onblocked = () => {
+            console.warn('IndexedDB delete blocked:', dbName);
+            clearTimeout(timeout);
+            resolve();
+          };
+          deleteReq.onsuccess = () => {
+            clearTimeout(timeout);
+            resolve();
+          };
+          deleteReq.onerror = () => {
+            clearTimeout(timeout);
+            reject(new Error(`Failed to delete ${dbName}`));
+          };
+        });
+        count++;
+      } catch (e) {
+        console.error('Delete DB error:', e);
       }
     }
-    return { success: false, error: 'No result returned' };
-  } catch (error) {
-    return { success: false, error: String(error) };
-  }
+    return { count };
+  });
 }
 
 export async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: async () => {
-        if ('caches' in window) {
-          const cacheNames = await caches.keys();
-          for (const name of cacheNames) {
-            await caches.delete(name);
-          }
-          return { count: cacheNames.length };
-        }
-        return { count: 0 };
-      },
-    });
-    if (result?.result && typeof result.result === 'object' && 'count' in result.result) {
-      return { success: true, count: result.result.count };
+  return runCleanScript(tabId, async () => {
+    if ('caches' in window) {
+      const cacheNames = await caches.keys();
+      for (const name of cacheNames) {
+        await caches.delete(name);
+      }
+      return { count: cacheNames.length };
     }
-    return { success: false, error: 'No result returned' };
-  } catch (error) {
-    return { success: false, error: String(error) };
-  }
+    return { count: 0 };
+  });
 }
 
 export async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
-  try {
-    const [result] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: async () => {
-        if ('serviceWorker' in navigator) {
-          const registrations = await navigator.serviceWorker.getRegistrations();
-          for (const registration of registrations) {
-            await registration.unregister();
-          }
-          return { count: registrations.length };
-        }
-        return { count: 0 };
-      },
-    });
-    if (result?.result && typeof result.result === 'object' && 'count' in result.result) {
-      return { success: true, count: result.result.count };
+  return runCleanScript(tabId, async () => {
+    if ('serviceWorker' in navigator) {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      for (const registration of registrations) {
+        await registration.unregister();
+      }
+      return { count: registrations.length };
     }
-    return { success: false, error: 'No result returned' };
-  } catch (error) {
-    return { success: false, error: String(error) };
-  }
+    return { count: 0 };
+  });
 }
 
 export async function clearStorage(
@@ -357,32 +325,25 @@ export async function clearStorage(
   if (options.localStorage) {
     result.localStorage = await injectClearLocalStorage(tabId);
   }
-
   if (options.sessionStorage) {
     result.sessionStorage = await injectClearSessionStorage(tabId);
   }
-
   if (options.indexedDB) {
     result.indexedDB = await injectClearIndexedDB(tabId);
   }
-
   if (options.cookies) {
     result.cookies = await clearCookies(url);
   }
-
   if (options.cacheStorage) {
     result.cacheStorage = await injectClearCacheStorage(tabId);
   }
-
   if (options.serviceWorkers) {
     result.serviceWorkers = await injectUnregisterServiceWorkers(tabId);
   }
 
-  // Check if any operation failed
   const failures = Object.values(result).filter(
     (r): r is StorageCleanResult => r?.success === false,
   );
-
   if (failures.length > 0) {
     result.success = false;
   }
@@ -396,16 +357,7 @@ export function formatCleaningResult(
 ): string {
   const parts: string[] = [];
 
-  const optionKeys: (keyof StorageCleanerOptions)[] = [
-    'localStorage',
-    'sessionStorage',
-    'indexedDB',
-    'cookies',
-    'cacheStorage',
-    'serviceWorkers',
-  ];
-
-  for (const key of optionKeys) {
+  for (const key of CLEAN_OPTION_KEYS) {
     const r = result[key];
     if (r?.success && r.count > 0) {
       parts.push(`${r.count} ${t(`storageCleaner:options.${key}`)}`);

From c2e54b34cbb008491cdb45ff3af6789e4f81bf69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:38:06 +0800
Subject: [PATCH 55/71] refactor(base64Converter): simplify utility functions

- Mark formatFileSize() as @deprecated, delegate to formatBytes
- Replace manual for-loop in base64ToBytes() with Uint8Array.from()
- Replace nested loops in sniffMimeFromBytes() with Array.every()

5 insertions(+), 23 deletions(-)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/utils/base64Converter.ts | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/utils/base64Converter.ts b/src/utils/base64Converter.ts
index 7d1828e..54ee1f4 100644
--- a/src/utils/base64Converter.ts
+++ b/src/utils/base64Converter.ts
@@ -213,8 +213,9 @@ export function extractMimeTypeFromDataUri(dataUri: string): string {
 }
 
 /**
- * 格式化文件大小显示（兼容旧接口，内部委托给 formatBytes）
+ * 格式化文件大小显示
  *
+ * @deprecated 直接使用 {@link formatBytes} 代替
  * @param bytes 字节数
  * @returns 格式化后的字符串
  */
@@ -270,12 +271,7 @@ const MAGIC_BYTE_SIGNATURES: ReadonlyArray<{
  * @returns 字节序列
  */
 export function base64ToBytes(b64: string): Uint8Array {
-  const binary = atob(b64);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i += 1) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return bytes;
+  return Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
 }
 
 /**
@@ -287,25 +283,11 @@ export function base64ToBytes(b64: string): Uint8Array {
 export function sniffMimeFromBytes(bytes: Uint8Array): { mime: string; ext: string } | null {
   for (const sig of MAGIC_BYTE_SIGNATURES) {
     if (bytes.length < sig.bytes.length) continue;
-    let matched = true;
-    for (let i = 0; i < sig.bytes.length; i += 1) {
-      if (bytes[i] !== sig.bytes[i]) {
-        matched = false;
-        break;
-      }
-    }
-    if (!matched) continue;
+    if (!sig.bytes.every((b, i) => bytes[i] === b)) continue;
     if (sig.tail) {
       const { offset, bytes: tailBytes } = sig.tail;
       if (bytes.length < offset + tailBytes.length) continue;
-      let tailMatched = true;
-      for (let i = 0; i < tailBytes.length; i += 1) {
-        if (bytes[offset + i] !== tailBytes[i]) {
-          tailMatched = false;
-          break;
-        }
-      }
-      if (!tailMatched) continue;
+      if (!tailBytes.every((b, i) => bytes[offset + i] === b)) continue;
     }
     return { mime: sig.mime, ext: sig.ext };
   }

From 2727e60025155f3e5935136864a67d9e261af566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:47:16 +0800
Subject: [PATCH 56/71] refactor: replace GlobalSnackbar with sonner toast

Remove the custom 373-line GlobalSnackbar component and its Provider/Hook
in favor of the already-installed sonner library.

Changes:
- Delete src/components/GlobalSnackbar.tsx (+ tests)
- Remove SnackbarProvider from popup/App.tsx and sidepanel/App.tsx
- Replace useSnackbar() calls with toast.success()/toast.error() in:
  - ImageUploader.tsx
  - useQrCode.ts
  - ParsePanel.tsx
  - LiveClock.tsx
- Update test mocks to use sonner instead of GlobalSnackbar

-554 lines, +43 lines (net -511 lines)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/GlobalSnackbar.tsx             | 372 ------------------
 src/components/ImageUploader.tsx              |  19 +-
 .../__tests__/GlobalSnackbar.test.tsx         | 117 ------
 .../__tests__/ImageUploader.test.tsx          |   9 +-
 .../__tests__/RouterContainer.test.tsx        |  13 +-
 src/entrypoints/popup/App.tsx                 |  15 +-
 src/entrypoints/sidepanel/App.tsx             |  15 +-
 src/pages/QrCode/components/ParsePanel.tsx    |  11 +-
 src/pages/QrCode/hooks/useQrCode.ts           |  21 +-
 src/pages/Timestamp/LiveClock.tsx             |   7 +-
 10 files changed, 43 insertions(+), 556 deletions(-)
 delete mode 100644 src/components/GlobalSnackbar.tsx
 delete mode 100644 src/components/__tests__/GlobalSnackbar.test.tsx

diff --git a/src/components/GlobalSnackbar.tsx b/src/components/GlobalSnackbar.tsx
deleted file mode 100644
index 096dee8..0000000
--- a/src/components/GlobalSnackbar.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-/**
- * GlobalSnackbar - 全局 Snackbar 消息提示组件及 Provider
- *
- * 提供可复用的 Toast 消息提示功能，支持三种使用方式：
- * 1. 作为受控组件使用：通过 props 控制显示状态
- * 2. 通过 useSnackbarState Hook 使用：在组件内部自动管理状态
- * 3. 通过 SnackbarProvider 和 useSnackbar Hook 使用：全局单例模式
- *
- * NOTE: 项目同时使用 sonner 的 toast 进行简单的一次性提示。
- * 本组件适用于需要 severity 级别、Provider 上下文、自定义定位等高级场景。
- * 简单场景（如复制成功、操作提示）优先使用 `import { toast } from 'sonner'`。
- *
- * @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;
diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
index 0173353..6f3e1cc 100644
--- a/src/components/ImageUploader.tsx
+++ b/src/components/ImageUploader.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
-import { useSnackbar } from '@/components/GlobalSnackbar';
+import { toast } from 'sonner';
 import { useI18n } from '@/utils/chromeI18n';
 
 interface ImageUploaderProps {
@@ -30,7 +30,6 @@ const ImageUploader = ({
   onDraggingChange,
 }: ImageUploaderProps) => {
   const { t } = useI18n('qrCode');
-  const { showMessage } = useSnackbar();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileChange = useCallback(
@@ -46,11 +45,8 @@ const ImageUploader = ({
       URL.revokeObjectURL(previewUrl);
     }
     onClearFile();
-    showMessage(t('qrCode:imageCleared'), {
-      severity: 'success',
-      autoHideDuration: 1000,
-    });
-  }, [previewUrl, onClearFile, showMessage, t]);
+    toast.success(t('qrCode:imageCleared'));
+  }, [previewUrl, onClearFile, t]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
@@ -90,13 +86,10 @@ const ImageUploader = ({
           if (file) {
             try {
               handleFileChange(file);
-              showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+              toast.success(t('qrCode:imagePasted'));
             } catch (error) {
               console.error('处理粘贴图片失败:', error);
-              showMessage(t('qrCode:imagePasteError'), {
-                severity: 'error',
-                autoHideDuration: 3000,
-              });
+              toast.error(t('qrCode:imagePasteError'));
             }
           }
           break;
@@ -109,7 +102,7 @@ const ImageUploader = ({
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [showMessage, handleFileChange, t]);
+  }, [handleFileChange, t]);
 
   return (
     <div
diff --git a/src/components/__tests__/GlobalSnackbar.test.tsx b/src/components/__tests__/GlobalSnackbar.test.tsx
deleted file mode 100644
index 6357556..0000000
--- a/src/components/__tests__/GlobalSnackbar.test.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-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();
-    });
-  });
-});
diff --git a/src/components/__tests__/ImageUploader.test.tsx b/src/components/__tests__/ImageUploader.test.tsx
index fcf48c0..e85ef52 100644
--- a/src/components/__tests__/ImageUploader.test.tsx
+++ b/src/components/__tests__/ImageUploader.test.tsx
@@ -13,10 +13,11 @@ const mockRevokeObjectURL = vi.fn();
 Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
 Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
 
-vi.mock('@/components/GlobalSnackbar', () => ({
-  useSnackbar: () => ({
-    showMessage: vi.fn(),
-  }),
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
 }));
 
 describe('ImageUploader 组件', () => {
diff --git a/src/components/__tests__/RouterContainer.test.tsx b/src/components/__tests__/RouterContainer.test.tsx
index 86d50e4..4ab1e39 100644
--- a/src/components/__tests__/RouterContainer.test.tsx
+++ b/src/components/__tests__/RouterContainer.test.tsx
@@ -2,7 +2,6 @@ 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';
 
@@ -29,11 +28,7 @@ describe('RouterContainer 组件', () => {
   });
 
   const renderWithProvider = (ui: React.ReactElement) => {
-    return render(
-      <SnackbarProvider>
-        <RouterProvider>{ui}</RouterProvider>
-      </SnackbarProvider>,
-    );
+    return render(<RouterProvider>{ui}</RouterProvider>);
   };
 
   describe('渲染测试', () => {
@@ -74,11 +69,7 @@ describe('RouterContainer 组件', () => {
       const { rerender } = renderWithProvider(<RouterContainer />);
 
       mockRouterValue.currentPage = 'timestamp';
-      rerender(
-        <SnackbarProvider>
-          <RouterProvider>{<RouterContainer />}</RouterProvider>
-        </SnackbarProvider>,
-      );
+      rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
 
       const box = document.querySelector('.page-transition-enter');
       expect(box).toBeInTheDocument();
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index cdec377..a245d48 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -2,7 +2,6 @@ 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';
 
@@ -30,14 +29,12 @@ export default function App() {
       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 />
-          <ErrorBoundary>
-            <RouterContainer />
-          </ErrorBoundary>
-        </div>
-      </SnackbarProvider>
+      <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 />
+        <ErrorBoundary>
+          <RouterContainer />
+        </ErrorBoundary>
+      </div>
     </RouterProvider>
   );
 }
diff --git a/src/entrypoints/sidepanel/App.tsx b/src/entrypoints/sidepanel/App.tsx
index 9709e84..80d156b 100644
--- a/src/entrypoints/sidepanel/App.tsx
+++ b/src/entrypoints/sidepanel/App.tsx
@@ -3,7 +3,6 @@ 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() {
@@ -16,14 +15,12 @@ export default function App() {
 
   return (
     <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
-      <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
-        <div className="app flex flex-col h-screen w-full overflow-hidden">
-          <TopBar />
-          <ErrorBoundary>
-            <RouterContainer />
-          </ErrorBoundary>
-        </div>
-      </SnackbarProvider>
+      <div className="app flex flex-col h-screen w-full overflow-hidden">
+        <TopBar />
+        <ErrorBoundary>
+          <RouterContainer />
+        </ErrorBoundary>
+      </div>
     </RouterProvider>
   );
 }
diff --git a/src/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
index bd84c56..a0a2aa6 100644
--- a/src/pages/QrCode/components/ParsePanel.tsx
+++ b/src/pages/QrCode/components/ParsePanel.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
+import { toast } from 'sonner';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
-import { useSnackbar } from '@/components/GlobalSnackbar';
 import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Label } from '@/components/ui/label';
@@ -9,7 +9,6 @@ import { cn } from '@/lib/utils';
 
 export default function ParsePanel() {
   const { t } = useI18n('qrCode');
-  const { showMessage } = useSnackbar();
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
   // 全局粘贴事件监听
@@ -24,7 +23,7 @@ export default function ParsePanel() {
           const file = items[i].getAsFile();
           if (file) {
             handleFileChange(file);
-            showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+            toast.success(t('qrCode:imagePasted'));
           }
           return;
         }
@@ -38,14 +37,14 @@ export default function ParsePanel() {
           const blob = await response.blob();
           const file = new File([blob], 'pasted-image.png', { type: blob.type });
           handleFileChange(file);
-          showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+          toast.success(t('qrCode:imagePasted'));
         } catch (error) {
           console.error('处理 Base64 图片失败:', error);
-          showMessage(t('qrCode:imagePasteError'), { severity: 'error', autoHideDuration: 3000 });
+          toast.error(t('qrCode:imagePasteError'));
         }
       }
     },
-    [handleFileChange, showMessage, t],
+    [handleFileChange, t],
   );
 
   useEffect(() => {
diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index 706cefd..bedf5c3 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import QRious from 'qrious';
-import { useSnackbar } from '@/components/GlobalSnackbar';
+import { toast } from 'sonner';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { useI18n } from '@/utils/chromeI18n';
@@ -10,7 +10,6 @@ import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../typ
 
 export function useQrCode(): QrCodeContextValue {
   const { t } = useI18n('qrCode');
-  const { showMessage } = useSnackbar();
 
   const [mode, setMode] = useState<QrCodeMode>('generate');
 
@@ -89,22 +88,22 @@ export function useQrCode(): QrCodeContextValue {
 
         if (result.success && result.data) {
           setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
-          showMessage(t('qrCode:parseSuccess'), { severity: 'success', autoHideDuration: 1000 });
+          toast.success(t('qrCode:parseSuccess'));
         } else {
           const errorMsg = result.error || t('qrCode:noQrDetected');
           setParserState((prev) => ({ ...prev, parseError: errorMsg }));
-          showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
+          toast.error(errorMsg);
         }
       } catch (error) {
         console.error('解析二维码失败:', error);
         const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
         setParserState((prev) => ({ ...prev, parseError: errorMsg }));
-        showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
+        toast.error(errorMsg);
       } finally {
         setParserState((prev) => ({ ...prev, parsing: false }));
       }
     },
-    [t, showMessage],
+    [t],
   );
 
   const downloadQrCode = useCallback(() => {
@@ -114,8 +113,8 @@ export function useQrCode(): QrCodeContextValue {
     link.href = qrCodeDataUrl;
     link.download = 'qrcode.png';
     link.click();
-    showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
-  }, [qrCodeDataUrl, showMessage, t]);
+    toast.success(t('qrCode:qrCodeDownloadSuccess'));
+  }, [qrCodeDataUrl, t]);
 
   const copyQrCode = useCallback(async () => {
     if (!qrCodeDataUrl) return;
@@ -130,12 +129,12 @@ export function useQrCode(): QrCodeContextValue {
         }),
       ]);
 
-      showMessage(t('qrCode:qrCodeCopySuccess'), { severity: 'success', autoHideDuration: 1000 });
+      toast.success(t('qrCode:qrCodeCopySuccess'));
     } catch (error) {
       console.error('复制二维码失败:', error);
-      showMessage(t('qrCode:copyError'), { severity: 'error', autoHideDuration: 3000 });
+      toast.error(t('qrCode:copyError'));
     }
-  }, [qrCodeDataUrl, showMessage, t]);
+  }, [qrCodeDataUrl, t]);
 
   const handleFileChange = useCallback(
     (file: File) => {
diff --git a/src/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/LiveClock.tsx
index a314758..0ded535 100644
--- a/src/pages/Timestamp/LiveClock.tsx
+++ b/src/pages/Timestamp/LiveClock.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Clock } from 'lucide-react';
+import { toast } from 'sonner';
 import CopyButton from '@/components/CopyButton';
-import { useSnackbar } from '@/components/GlobalSnackbar';
 import type { UnitType } from './constants';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
@@ -13,7 +13,6 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
   const { t } = useI18n('timestamp');
-  const { showMessage } = useSnackbar();
   const onUseNowRef = useRef(onUseNow);
 
   const [currentDisplay, setCurrentDisplay] = useState(() => {
@@ -45,8 +44,8 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
 
   const handleUseNow = useCallback(() => {
     onUseNowRef.current(currentDisplay.rawTime);
-    showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
-  }, [currentDisplay.rawTime, showMessage, t]);
+    toast.success(t('timestamp:usedSuccess'));
+  }, [currentDisplay.rawTime, t]);
 
   return (
     <div

From 93019f56cf663749b0166fb7427d18f1d752dfd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:55:05 +0800
Subject: [PATCH 57/71] refactor(RouterContainer): remove unnecessary useMemo
 and hoist constant

- Replace useMemo with direct expression for animationClass
- Move entryPointType to module scope (value is fixed after mount)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/RouterContainer.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/RouterContainer.tsx b/src/components/RouterContainer.tsx
index 179ebf8..a8de5ce 100644
--- a/src/components/RouterContainer.tsx
+++ b/src/components/RouterContainer.tsx
@@ -1,21 +1,20 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
-import { Suspense, useMemo } from 'react';
+import { Suspense } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils';
 import { AlertTriangle } from 'lucide-react';
 
+const entryPointType = getEntryPointType();
+
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();
   const { t } = useI18n('common');
 
-  const animationClass = useMemo(() => {
-    return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
-  }, [currentPage]);
-
-  const entryPointType = getEntryPointType();
+  const animationClass =
+    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
 
   if (!isLoaded) {
     return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;

From b41cfb2a020e0a6fd5f4ba0a8f979b3759c46ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 20:59:03 +0800
Subject: [PATCH 58/71] refactor: remove unnecessary useMemo calls across
 components

Replace over-cached simple computations with direct expressions:

- popup/App.tsx: getEntryPointType() and routerConfig (values are stable)
- Dashboard/index.tsx: visibleSet, visibleFeatures, recentFeatures
  (Set creation + array filter/map are cheaper than useMemo overhead)
- useTextStatistics.ts: getTextStats(text) (simple string processing)
- ThemeModeProvider.tsx: contextValue object (setMode is stable via useCallback)

-39 lines, +28 lines (net -11 lines)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/entrypoints/popup/App.tsx                 | 30 ++++++++-----------
 src/pages/Dashboard/index.tsx                 | 23 ++++++--------
 src/pages/TextStatistics/useTextStatistics.ts |  4 +--
 src/providers/ThemeModeProvider.tsx           | 19 ++++--------
 4 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index a245d48..413568a 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -3,25 +3,21 @@ import TopBar from '@/components/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { getEntryPointType } from '@/config/features';
-import { useMemo } from 'react';
-
 export default function App() {
-  const entryType = useMemo(() => getEntryPointType(), []);
+  const entryType = 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]);
+  const routerConfig =
+    entryType === 'tab'
+      ? {
+          syncKey: 'app/tabRoute' as const,
+          visiblePagesKey: 'app/tabVisiblePages' as const,
+          pageOrderKey: 'app/tabPageOrder' as const,
+        }
+      : {
+          syncKey: 'app/popupRoute' as const,
+          visiblePagesKey: 'app/popupVisiblePages' as const,
+          pageOrderKey: 'app/popupPageOrder' as const,
+        };
 
   return (
     <RouterProvider
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 7d51ebd..dff8264 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from '@/providers/RouterProvider';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
-import { useMemo } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
@@ -9,21 +8,17 @@ export default function Index() {
   const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
   const { t } = useI18n(['features']);
 
-  const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
+  const visibleSet = new Set<string>(visiblePages);
 
-  const visibleFeatures = useMemo(() => {
-    return pageOrder
-      .filter((key) => visibleSet.has(key))
-      .map((key) => ({ key, feature: getFeatureByKey(key) }))
-      .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
-  }, [pageOrder, visibleSet]);
+  const visibleFeatures = pageOrder
+    .filter((key) => visibleSet.has(key))
+    .map((key) => ({ key, feature: getFeatureByKey(key) }))
+    .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
 
-  const recentFeatures = useMemo(() => {
-    return recentlyUsedTools
-      .filter((key) => visibleSet.has(key))
-      .map((key) => ({ key, feature: getFeatureByKey(key) }))
-      .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
-  }, [recentlyUsedTools, visibleSet]);
+  const recentFeatures = recentlyUsedTools
+    .filter((key) => visibleSet.has(key))
+    .map((key) => ({ key, feature: getFeatureByKey(key) }))
+    .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
 
   const showRecent = recentFeatures.length > 0;
 
diff --git a/src/pages/TextStatistics/useTextStatistics.ts b/src/pages/TextStatistics/useTextStatistics.ts
index 78e5a1c..2ca8339 100644
--- a/src/pages/TextStatistics/useTextStatistics.ts
+++ b/src/pages/TextStatistics/useTextStatistics.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { getTextStats, type TextStats } from '@/utils/textStatistics';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
@@ -17,7 +17,7 @@ export function useTextStatistics(): UseTextStatisticsReturn {
 
   useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
 
-  const stats = useMemo(() => getTextStats(text), [text]);
+  const stats = getTextStats(text);
 
   return { text, stats, setText };
 }
diff --git a/src/providers/ThemeModeProvider.tsx b/src/providers/ThemeModeProvider.tsx
index 7a7b75c..02b7997 100644
--- a/src/providers/ThemeModeProvider.tsx
+++ b/src/providers/ThemeModeProvider.tsx
@@ -1,12 +1,4 @@
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
 import { browser } from 'wxt/browser';
 import { storageUtil } from '@/utils/chromeStorage';
 
@@ -141,12 +133,11 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     }
   }, [resolvedMode]);
 
-  const contextValue = useMemo(
-    () => ({ mode, resolvedMode, setMode }),
-    [mode, resolvedMode, setMode],
+  return (
+    <ThemeModeContext.Provider value={{ mode, resolvedMode, setMode }}>
+      {children}
+    </ThemeModeContext.Provider>
   );
-
-  return <ThemeModeContext.Provider value={contextValue}>{children}</ThemeModeContext.Provider>;
 }
 
 export function useThemeMode(): ThemeModeContextType {

From 1b9f6d044d900b6082b092aaf51795364ec91cc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 21:08:27 +0800
Subject: [PATCH 59/71] refactor: unify formatBytes usage and simplify
 useContextMenuData

1. Remove formatSize/formatByteSize delegation functions:
   - storageCleaner.ts:formatSize (was just formatBytes wrapper)
   - textStatistics.ts:formatByteSize (was just formatBytes wrapper)
   - Update all callers to import formatBytes directly from @/utils/format

2. Simplify useContextMenuData hook:
   - Remove unnecessary useCallback wrapping
   - Inline checkAndConsumeData logic directly in useEffect
   - Eliminate callback->effect dependency cycle

-69 lines, +67 lines (net -2 lines, but removes 2 indirection layers)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/pages/JsonTools/JsonConvertSection.tsx |  4 +-
 src/pages/JsonTools/JsonFormatSection.tsx  |  4 +-
 src/pages/StorageCleaner/OptionItem.tsx    |  4 +-
 src/pages/TextStatistics/index.tsx         |  4 +-
 src/utils/__tests__/storageCleaner.test.ts | 31 +++++-----
 src/utils/__tests__/textStatistics.test.ts | 13 +++--
 src/utils/storageCleaner.ts                |  6 --
 src/utils/textStatistics.ts                | 16 +-----
 src/utils/useContextMenuData.ts            | 66 +++++++++++++---------
 9 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx
index e35c76b..05360c5 100644
--- a/src/pages/JsonTools/JsonConvertSection.tsx
+++ b/src/pages/JsonTools/JsonConvertSection.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
-import { formatByteSize } from '@/utils/textStatistics';
+import { formatBytes } from '@/utils/format';
 import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
 import { validateJson } from '@/utils/jsonFormatter';
@@ -96,7 +96,7 @@ export default function JsonConvertSection({
                 <span>
                   {t('jsonFormat:originalSize')}:{' '}
                   <span className="font-semibold text-foreground/80">
-                    {formatByteSize(result.originalBytes)}
+                    {formatBytes(result.originalBytes)}
                   </span>
                 </span>
                 <span className="text-border/60">|</span>
diff --git a/src/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/JsonFormatSection.tsx
index 6c2ea44..ee7d169 100644
--- a/src/pages/JsonTools/JsonFormatSection.tsx
+++ b/src/pages/JsonTools/JsonFormatSection.tsx
@@ -6,7 +6,7 @@ import {
   type JsonFormatResult,
   validateJson,
 } from '@/utils/jsonFormatter';
-import { formatByteSize } from '@/utils/textStatistics';
+import { formatBytes } from '@/utils/format';
 import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
@@ -127,7 +127,7 @@ export default function JsonFormatSection() {
                 <span>
                   {t('jsonFormat:originalSize')}:{' '}
                   <span className="font-semibold text-foreground/80">
-                    {formatByteSize(result.originalBytes)}
+                    {formatBytes(result.originalBytes)}
                   </span>
                 </span>
                 <span className="text-border/60">|</span>
diff --git a/src/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/OptionItem.tsx
index 88ba89f..f88ad8e 100644
--- a/src/pages/StorageCleaner/OptionItem.tsx
+++ b/src/pages/StorageCleaner/OptionItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatSize } from '@/utils/storageCleaner';
+import { formatBytes } from '@/utils/format';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 // 引入官方的 Checkbox 原子组件
@@ -53,7 +53,7 @@ export default function OptionItem({
               checked ? 'text-primary/70' : 'text-muted-foreground/70',
             )}
           >
-            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
+            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatBytes(size)}
           </span>
         ) : (
           <span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
diff --git a/src/pages/TextStatistics/index.tsx b/src/pages/TextStatistics/index.tsx
index 438251e..3661285 100644
--- a/src/pages/TextStatistics/index.tsx
+++ b/src/pages/TextStatistics/index.tsx
@@ -1,5 +1,5 @@
 import TextInputArea from '@/components/TextInputArea';
-import { formatByteSize } from '@/utils/textStatistics';
+import { formatBytes } from '@/utils/format';
 import { useI18n } from '@/utils/chromeI18n';
 import { useTextStatistics } from './useTextStatistics';
 import { cn } from '@/lib/utils';
@@ -12,7 +12,7 @@ export default function Index() {
     { label: t('textStatistics:characters'), value: stats.characters },
     { label: t('textStatistics:words'), value: stats.words },
     { label: t('textStatistics:lines'), value: stats.lines },
-    { label: t('textStatistics:bytes'), value: formatByteSize(stats.bytes) },
+    { label: t('textStatistics:bytes'), value: formatBytes(stats.bytes) },
   ];
 
   return (
diff --git a/src/utils/__tests__/storageCleaner.test.ts b/src/utils/__tests__/storageCleaner.test.ts
index 4b2d6c2..9137a38 100644
--- a/src/utils/__tests__/storageCleaner.test.ts
+++ b/src/utils/__tests__/storageCleaner.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
-import { clearCookies, formatSize, isRestrictedUrl } from '@/utils/storageCleaner';
+import { clearCookies, isRestrictedUrl } from '@/utils/storageCleaner';
+import { formatBytes } from '@/utils/format';
 
 describe('storageCleaner utils', () => {
   describe('isRestrictedUrl', () => {
@@ -48,36 +49,36 @@ describe('storageCleaner utils', () => {
     });
   });
 
-  describe('formatSize', () => {
+  describe('formatBytes', () => {
     it('should return "0 B" for 0 bytes', () => {
-      expect(formatSize(0)).toBe('0 B');
+      expect(formatBytes(0)).toBe('0 B');
     });
 
     it('should format bytes correctly', () => {
-      expect(formatSize(500)).toBe('500 B');
+      expect(formatBytes(500)).toBe('500 B');
     });
 
     it('should format kilobytes correctly', () => {
-      expect(formatSize(1024)).toBe('1.0 KB');
-      expect(formatSize(1536)).toBe('1.5 KB');
-      expect(formatSize(2048)).toBe('2.0 KB');
+      expect(formatBytes(1024)).toBe('1.0 KB');
+      expect(formatBytes(1536)).toBe('1.5 KB');
+      expect(formatBytes(2048)).toBe('2.0 KB');
     });
 
     it('should format megabytes correctly', () => {
-      expect(formatSize(1048576)).toBe('1.00 MB');
-      expect(formatSize(1572864)).toBe('1.50 MB');
-      expect(formatSize(5242880)).toBe('5.00 MB');
+      expect(formatBytes(1048576)).toBe('1.00 MB');
+      expect(formatBytes(1572864)).toBe('1.50 MB');
+      expect(formatBytes(5242880)).toBe('5.00 MB');
     });
 
     it('should format gigabytes correctly', () => {
-      expect(formatSize(1073741824)).toBe('1.00 GB');
-      expect(formatSize(2147483648)).toBe('2.00 GB');
+      expect(formatBytes(1073741824)).toBe('1.00 GB');
+      expect(formatBytes(2147483648)).toBe('2.00 GB');
     });
 
     it('should handle edge cases', () => {
-      expect(formatSize(1)).toBe('1 B');
-      expect(formatSize(1023)).toBe('1023 B');
-      expect(formatSize(1025)).toBe('1.0 KB');
+      expect(formatBytes(1)).toBe('1 B');
+      expect(formatBytes(1023)).toBe('1023 B');
+      expect(formatBytes(1025)).toBe('1.0 KB');
     });
   });
 
diff --git a/src/utils/__tests__/textStatistics.test.ts b/src/utils/__tests__/textStatistics.test.ts
index 308f348..81d4103 100644
--- a/src/utils/__tests__/textStatistics.test.ts
+++ b/src/utils/__tests__/textStatistics.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
-import { formatByteSize, getTextStats } from '@/utils/textStatistics';
+import { formatBytes } from '@/utils/format';
+import { getTextStats } from '@/utils/textStatistics';
 
 describe('textStatistics utils', () => {
   describe('getTextStats', () => {
@@ -49,12 +50,12 @@ describe('textStatistics utils', () => {
     });
   });
 
-  describe('formatByteSize', () => {
+  describe('formatBytes', () => {
     it('should format bytes correctly', () => {
-      expect(formatByteSize(100)).toBe('100 B');
-      expect(formatByteSize(0)).toBe('0 B');
-      expect(formatByteSize(1024)).toBe('1.0 KB');
-      expect(formatByteSize(1024 * 1024)).toBe('1.00 MB');
+      expect(formatBytes(100)).toBe('100 B');
+      expect(formatBytes(0)).toBe('0 B');
+      expect(formatBytes(1024)).toBe('1.0 KB');
+      expect(formatBytes(1024 * 1024)).toBe('1.00 MB');
     });
   });
 });
diff --git a/src/utils/storageCleaner.ts b/src/utils/storageCleaner.ts
index 53aef67..f40fea2 100644
--- a/src/utils/storageCleaner.ts
+++ b/src/utils/storageCleaner.ts
@@ -1,10 +1,4 @@
 import type { CleaningResult, StorageCleanerOptions, StorageCleanResult } from '@/types/storage';
-import { formatBytes } from './format';
-
-/** 格式化字节大小显示（兼容旧接口，内部委托给 formatBytes） */
-export function formatSize(bytes: number): string {
-  return formatBytes(bytes);
-}
 
 const RESTRICTED_PROTOCOLS = [
   'chrome:',
diff --git a/src/utils/textStatistics.ts b/src/utils/textStatistics.ts
index 4cb6f17..ece617b 100644
--- a/src/utils/textStatistics.ts
+++ b/src/utils/textStatistics.ts
@@ -1,5 +1,3 @@
-import { formatBytes } from './format';
-
 /**
  * 文本统计信息接口
  */
@@ -35,7 +33,7 @@ export function getTextStats(text: string): TextStats {
     const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' });
     const segments = segmenter.segment(text);
     for (const segment of segments) {
-      // isWordLike 为 true 表示该片段是“类词”的（非空格、非标点）
+      // isWordLike 为 true 表示该片段是"类词"的（非空格、非标点）
       if (segment.isWordLike) {
         words++;
       }
@@ -44,7 +42,7 @@ export function getTextStats(text: string): TextStats {
     // 降级方案：如果不支持 Intl.Segmenter，使用正则匹配英文单词
     // 但对中文支持较差
     const englishWords = text.match(/\b\w+\b/g) || [];
-    const chineseChars = text.match(/[\u4e00-\u9fa5]/g) || [];
+    const chineseChars = text.match(/[一-龥]/g) || [];
     words = englishWords.length + chineseChars.length;
   }
 
@@ -57,13 +55,3 @@ export function getTextStats(text: string): TextStats {
 
   return { characters, words, lines, bytes };
 }
-
-/**
- * 格式化字节大小显示（兼容旧接口，内部委托给 formatBytes）
- *
- * @param bytes 字节数
- * @returns 格式化后的字符串
- */
-export function formatByteSize(bytes: number): string {
-  return formatBytes(bytes);
-}
diff --git a/src/utils/useContextMenuData.ts b/src/utils/useContextMenuData.ts
index 71d353e..8c2b1c1 100644
--- a/src/utils/useContextMenuData.ts
+++ b/src/utils/useContextMenuData.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
 import type { ContextMenuPendingData, PageType } from '@/types/storage';
 
@@ -23,44 +23,58 @@ export interface UseContextMenuDataOptions {
  * 3. Hook 会自动从 storage 中读取并消费匹配的数据
  */
 export function useContextMenuData({ featureKey, onData }: UseContextMenuDataOptions): void {
-  const checkAndConsumeData = useCallback(async () => {
-    try {
-      const data = await storageUtil.get(STORAGE_KEY, undefined);
-
-      if (!data) return;
-
-      if (data.featureKey !== featureKey) return;
-
-      if (Date.now() - data.timestamp > CONTEXT_MENU_DATA_EXPIRY_MS) {
-        await storageUtil.remove(STORAGE_KEY);
-        return;
-      }
-
-      await storageUtil.remove(STORAGE_KEY);
-
-      onData(data.payload);
-    } catch (error) {
-      console.error('[useContextMenuData] 处理右键菜单数据失败:', error);
-    }
-  }, [featureKey, onData]);
-
   useEffect(() => {
-    checkAndConsumeData();
-  }, [checkAndConsumeData]);
+    const checkAndConsumeData = async () => {
+      try {
+        const data = await storageUtil.get(STORAGE_KEY, undefined);
+
+        if (!data) return;
+
+        if (data.featureKey !== featureKey) return;
+
+        if (Date.now() - data.timestamp > CONTEXT_MENU_DATA_EXPIRY_MS) {
+          await storageUtil.remove(STORAGE_KEY);
+          return;
+        }
+
+        await storageUtil.remove(STORAGE_KEY);
+
+        onData(data.payload);
+      } catch (error) {
+        console.error('[useContextMenuData] 处理右键菜单数据失败:', error);
+      }
+    };
+
+    void checkAndConsumeData();
+  }, [featureKey, onData]);
 
   useEffect(() => {
     const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => {
       if (changes[STORAGE_KEY]) {
         const newData = changes[STORAGE_KEY].newValue as ContextMenuPendingData | null;
         if (newData && newData.featureKey === featureKey) {
-          checkAndConsumeData();
+          void (async () => {
+            try {
+              const data = await storageUtil.get(STORAGE_KEY, undefined);
+              if (!data) return;
+              if (data.featureKey !== featureKey) return;
+              if (Date.now() - data.timestamp > CONTEXT_MENU_DATA_EXPIRY_MS) {
+                await storageUtil.remove(STORAGE_KEY);
+                return;
+              }
+              await storageUtil.remove(STORAGE_KEY);
+              onData(data.payload);
+            } catch (error) {
+              console.error('[useContextMenuData] 处理右键菜单数据失败:', error);
+            }
+          })();
         }
       }
     };
 
     chrome.storage.onChanged.addListener(handleStorageChange);
     return () => chrome.storage.onChanged.removeListener(handleStorageChange);
-  }, [featureKey, checkAndConsumeData]);
+  }, [featureKey, onData]);
 }
 
 /**

From f9fbc796129773bff9e8132f5c83cc52028682a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 21:59:54 +0800
Subject: [PATCH 60/71] refactor(storageCleaner): simplify architecture and
 improve type semantics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove RELOAD_TAB message chain, use chrome.tabs.reload() directly
- Rename IndexedDB label to '站点存储' for accuracy
- Introduce StorageSizeInfo type to distinguish bytes vs count
- Rename totalSize to totalBytes for clarity
- Merge runCleanScript into runScript to reduce duplication
- Rename CleaningResult.success to overallSuccess to avoid confusion
- Remove unused domain state and setDomain call

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/_locales/zh/messages.json              |   2 +-
 src/entrypoints/background.ts                 |  18 --
 src/pages/StorageCleaner/CleaningResult.tsx   |   2 +-
 src/pages/StorageCleaner/OptionItem.tsx       |  15 +-
 .../StorageCleaner/StorageOptionsGrid.tsx     |  22 +--
 src/pages/StorageCleaner/useStorageCleaner.ts |  45 +++--
 src/types/storage.d.ts                        |   2 +-
 src/utils/__tests__/messages.test.ts          |  24 +--
 src/utils/messages.ts                         |   2 -
 src/utils/storageCleaner.ts                   | 165 ++++++++++--------
 vitest.setup.ts                               |   3 +-
 11 files changed, 149 insertions(+), 151 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 720c853..fc9491f 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -697,7 +697,7 @@
     "description": "Translation key: storageCleaner_options_sessionStorage"
   },
   "storageCleaner_options_indexedDB": {
-    "message": "IndexedDB",
+    "message": "站点存储",
     "description": "Translation key: storageCleaner_options_indexedDB"
   },
   "storageCleaner_options_cookies": {
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index 2a7ff00..d1b177b 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -83,22 +83,4 @@ export default defineBackground(() => {
       return { success: false, message: errorMsg };
     }
   });
-
-  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) {
-      setTimeout(executeReload, delay);
-    } else {
-      executeReload();
-    }
-
-    return { success: true };
-  });
 });
diff --git a/src/pages/StorageCleaner/CleaningResult.tsx b/src/pages/StorageCleaner/CleaningResult.tsx
index d546d09..7025838 100644
--- a/src/pages/StorageCleaner/CleaningResult.tsx
+++ b/src/pages/StorageCleaner/CleaningResult.tsx
@@ -14,7 +14,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
 
   if (!result) return null;
 
-  const isSuccess = result.success;
+  const isSuccess = result.overallSuccess;
 
   return (
     <div className={cn('w-full', className)} {...props}>
diff --git a/src/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/OptionItem.tsx
index f88ad8e..a6c96ee 100644
--- a/src/pages/StorageCleaner/OptionItem.tsx
+++ b/src/pages/StorageCleaner/OptionItem.tsx
@@ -2,28 +2,29 @@ import React from 'react';
 import { formatBytes } from '@/utils/format';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-// 引入官方的 Checkbox 原子组件
+import type { StorageSizeInfo } from './useStorageCleaner';
 import { Checkbox } from '@/components/ui/checkbox';
 
 interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   labelKey: string;
   checked: boolean;
-  size?: number;
-  isCount?: boolean;
+  sizeInfo?: StorageSizeInfo;
   onChange: () => void;
 }
 
 export default function OptionItem({
   labelKey,
   checked,
-  size,
-  isCount = false,
+  sizeInfo,
   onChange,
   className,
   ...props
 }: OptionItemProps) {
   const { t } = useI18n('storageCleaner');
 
+  const sizeValue = sizeInfo?.value;
+  const isCount = sizeInfo?.displayType === 'count';
+
   return (
     <div
       onClick={onChange}
@@ -46,14 +47,14 @@ export default function OptionItem({
           {t(labelKey)}
         </span>
 
-        {size !== undefined && size > 0 ? (
+        {sizeValue !== undefined && sizeValue > 0 ? (
           <span
             className={cn(
               'block text-[10px] font-mono font-medium mt-0.5 tabular-nums transition-colors',
               checked ? 'text-primary/70' : 'text-muted-foreground/70',
             )}
           >
-            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatBytes(size)}
+            {isCount ? `${sizeValue} ${t('storageCleaner:countUnit')}` : formatBytes(sizeValue)}
           </span>
         ) : (
           <span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
diff --git a/src/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
index 352abaf..f19e36a 100644
--- a/src/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/src/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StorageCleanerOptions } from '@/types/storage';
+import type { StorageSizeInfo } from './useStorageCleaner';
 import OptionItem from './OptionItem';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
@@ -8,7 +9,7 @@ import { Label } from '@/components/ui/label';
 
 interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
   options: StorageCleanerOptions;
-  sizes: Record<string, number>;
+  sizes: Record<string, StorageSizeInfo>;
   allSelected: boolean;
   someSelected: boolean;
   onOptionChange: (key: keyof StorageCleanerOptions) => void;
@@ -27,13 +28,13 @@ export default function StorageOptionsGrid({
 }: StorageOptionsGridProps) {
   const { t } = useI18n('storageCleaner');
 
-  const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
-    { key: 'localStorage' },
-    { key: 'sessionStorage' },
-    { key: 'indexedDB' },
-    { key: 'cookies' },
-    { key: 'cacheStorage', isCount: true },
-    { key: 'serviceWorkers', isCount: true },
+  const optionKeys: (keyof StorageCleanerOptions)[] = [
+    'localStorage',
+    'sessionStorage',
+    'indexedDB',
+    'cookies',
+    'cacheStorage',
+    'serviceWorkers',
   ];
 
   const handleToggleAll = () => {
@@ -44,13 +45,12 @@ export default function StorageOptionsGrid({
     <div className={cn('w-full overflow-hidden', className)} {...props}>
       <div className="px-3.5 pt-3.5 pb-2">
         <div className="grid grid-cols-2 gap-2 items-stretch">
-          {optionKeys.map(({ key, isCount }) => (
+          {optionKeys.map((key) => (
             <OptionItem
               key={key}
               labelKey={`storageCleaner:options.${key}`}
               checked={options[key]}
-              size={sizes[key]}
-              isCount={isCount}
+              sizeInfo={sizes[key]}
               onChange={() => onOptionChange(key)}
             />
           ))}
diff --git a/src/pages/StorageCleaner/useStorageCleaner.ts b/src/pages/StorageCleaner/useStorageCleaner.ts
index 5910df4..9b46579 100644
--- a/src/pages/StorageCleaner/useStorageCleaner.ts
+++ b/src/pages/StorageCleaner/useStorageCleaner.ts
@@ -16,7 +16,6 @@ import {
   getSessionStorageSize,
   isRestrictedUrl,
 } from '@/utils/storageCleaner';
-import { MessageAction, sendMessage } from '@/utils/messages';
 import { useI18n } from '@/utils/chromeI18n';
 import { toast } from 'sonner';
 
@@ -34,18 +33,22 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
   selectedTypes: DEFAULT_OPTIONS,
 };
 
+export interface StorageSizeInfo {
+  value: number;
+  displayType: 'bytes' | 'count';
+}
+
 export interface UseStorageCleanerReturn {
-  domain: string;
   error: string;
   isInitializing: boolean;
   options: StorageCleanerOptions;
-  sizes: Record<string, number>;
+  sizes: Record<string, StorageSizeInfo>;
   reloadAfterClean: boolean;
   loading: boolean;
   result: CleaningResult | null;
   showConfirm: boolean;
   setShowConfirm: (show: boolean) => void;
-  totalSize: number;
+  totalBytes: number;
   allSelected: boolean;
   someSelected: boolean;
 
@@ -57,11 +60,10 @@ export interface UseStorageCleanerReturn {
 
 export function useStorageCleaner(): UseStorageCleanerReturn {
   const { t } = useI18n(['storageCleaner', 'common']);
-  const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [isInitializing, setIsInitializing] = useState<boolean>(true);
   const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
-  const [sizes, setSizes] = useState<Record<string, number>>({});
+  const [sizes, setSizes] = useState<Record<string, StorageSizeInfo>>({});
   const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
   const [loading, setLoading] = useState<boolean>(false);
   const [result, setResult] = useState<CleaningResult | null>(null);
@@ -102,7 +104,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       setError('');
       const url = tab.url;
       const tabId = tab.id!;
-      setDomain(new URL(url).hostname);
 
       const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
         storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
@@ -122,12 +123,12 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       }
 
       setSizes({
-        cookies: cSize,
-        localStorage: lsSize,
-        sessionStorage: ssSize,
-        indexedDB: idbSize,
-        cacheStorage: cacheCount,
-        serviceWorkers: swCount,
+        cookies: { value: cSize, displayType: 'bytes' },
+        localStorage: { value: lsSize, displayType: 'bytes' },
+        sessionStorage: { value: ssSize, displayType: 'bytes' },
+        indexedDB: { value: idbSize, displayType: 'bytes' },
+        cacheStorage: { value: cacheCount, displayType: 'count' },
+        serviceWorkers: { value: swCount, displayType: 'count' },
       });
     } finally {
       if (currentRequestId === requestIdRef.current) {
@@ -217,9 +218,9 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       const cleaningResult = await clearStorage(tab.id, tab.url, options);
       setResult(cleaningResult);
 
-      if (reloadAfterClean && cleaningResult.success) {
+      if (reloadAfterClean && cleaningResult.overallSuccess) {
         toast.success(t('storageCleaner:cleanSuccessReload'));
-        await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
+        await chrome.tabs.reload(tab.id);
       } else {
         await loadInfo();
       }
@@ -231,13 +232,10 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     }
   }, [options, reloadAfterClean, loadInfo, t]);
 
-  const totalSize = useMemo(() => {
-    return (
-      (sizes.cookies || 0) +
-      (sizes.localStorage || 0) +
-      (sizes.sessionStorage || 0) +
-      (sizes.indexedDB || 0)
-    );
+  const totalBytes = useMemo(() => {
+    return Object.values(sizes).reduce((acc, s) => {
+      return s.displayType === 'bytes' ? acc + (s.value || 0) : acc;
+    }, 0);
   }, [sizes]);
 
   const selectionMetrics = useMemo(() => {
@@ -248,7 +246,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
   }, [options]);
 
   return {
-    domain,
     error,
     isInitializing,
     options,
@@ -258,7 +255,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     result,
     showConfirm,
     setShowConfirm,
-    totalSize,
+    totalBytes,
     allSelected: selectionMetrics.all,
     someSelected: selectionMetrics.some,
     handleReloadAfterCleanChange,
diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
index 64fe134..f5ab210 100644
--- a/src/types/storage.d.ts
+++ b/src/types/storage.d.ts
@@ -189,7 +189,7 @@ export type StorageCleanResult =
  */
 export interface CleaningResult {
   /** 整体操作是否成功 */
-  success: boolean;
+  overallSuccess: boolean;
   /** 整体错误信息（如果有） */
   error?: string;
   /** 各项清理的具体结果 */
diff --git a/src/utils/__tests__/messages.test.ts b/src/utils/__tests__/messages.test.ts
index 7468edb..434361c 100644
--- a/src/utils/__tests__/messages.test.ts
+++ b/src/utils/__tests__/messages.test.ts
@@ -34,10 +34,14 @@ describe('messages', () => {
       const mockTab = { id: 123, url: 'https://example.com' };
       (chrome.tabs.query as any).mockResolvedValue([mockTab]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual(mockResponse);
-      expect(mockSendMessage).toHaveBeenCalledWith(MessageAction.RELOAD_TAB, { tabId: 123 }, 123);
+      expect(mockSendMessage).toHaveBeenCalledWith(
+        MessageAction.RESTORE_RIGHT_CLICK,
+        undefined,
+        123,
+      );
     });
 
     it('应该支持不带数据的消息发送', async () => {
@@ -60,11 +64,11 @@ describe('messages', () => {
       const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       (chrome.tabs.query as any).mockResolvedValue([]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({ success: false, message: '无法获取当前标签页' });
       expect(consoleSpy).toHaveBeenCalledWith(
-        '[Messaging] 无法获取当前标签页，无法发送动作: reloadTab',
+        '[Messaging] 无法获取当前标签页，无法发送动作: restoreRightClick',
       );
       consoleSpy.mockRestore();
     });
@@ -73,7 +77,7 @@ describe('messages', () => {
       const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       (chrome.tabs.query as any).mockResolvedValue([{ url: 'https://example.com' }]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({ success: false, message: '无法获取当前标签页' });
       consoleSpy.mockRestore();
@@ -87,7 +91,7 @@ describe('messages', () => {
       const mockTab = { id: 123, url: 'https://example.com' };
       (chrome.tabs.query as any).mockResolvedValue([mockTab]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({
         success: false,
@@ -104,7 +108,7 @@ describe('messages', () => {
       const mockTab = { id: 123, url: 'https://example.com' };
       (chrome.tabs.query as any).mockResolvedValue([mockTab]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({
         success: false,
@@ -121,7 +125,7 @@ describe('messages', () => {
       const mockTab = { id: 123, url: 'https://example.com' };
       (chrome.tabs.query as any).mockResolvedValue([mockTab]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({
         success: false,
@@ -138,7 +142,7 @@ describe('messages', () => {
       const mockTab = { id: 123, url: 'https://example.com' };
       (chrome.tabs.query as any).mockResolvedValue([mockTab]);
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({
         success: false,
@@ -151,7 +155,7 @@ describe('messages', () => {
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       (chrome.tabs.query as any).mockRejectedValue(new Error('Query failed'));
 
-      const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
+      const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
 
       expect(result).toEqual({
         success: false,
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
index 476c4bd..b1f9bcb 100644
--- a/src/utils/messages.ts
+++ b/src/utils/messages.ts
@@ -1,7 +1,6 @@
 import { defineExtensionMessaging } from '@webext-core/messaging';
 
 export enum MessageAction {
-  RELOAD_TAB = 'reloadTab',
   SIDE_PANEL_STATE_CHANGED = 'sidePanelStateChanged',
   CONTEXT_MENU_CLICKED = 'contextMenuClicked',
   RESTORE_RIGHT_CLICK = 'restoreRightClick',
@@ -21,7 +20,6 @@ export interface ContextMenuClickedPayload {
 }
 
 export interface ProtocolMap {
-  [MessageAction.RELOAD_TAB](data: { tabId: number; delay?: number }): MessageResponse;
   [MessageAction.SIDE_PANEL_STATE_CHANGED](data: { isOpen: boolean }): void;
   [MessageAction.CONTEXT_MENU_CLICKED](data: ContextMenuClickedPayload): void;
   [MessageAction.RESTORE_RIGHT_CLICK](data: undefined): MessageResponse & { restored: boolean };
diff --git a/src/utils/storageCleaner.ts b/src/utils/storageCleaner.ts
index f40fea2..1238e07 100644
--- a/src/utils/storageCleaner.ts
+++ b/src/utils/storageCleaner.ts
@@ -215,98 +215,115 @@ export async function clearCookies(url: string): Promise<StorageCleanResult> {
 async function runCleanScript(
   tabId: number,
   func: () => { count: number } | Promise<{ count: number }>,
+  errorLabel: string,
 ): Promise<StorageCleanResult> {
-  try {
-    const [result] = await chrome.scripting.executeScript({ target: { tabId }, func });
-    if (result?.result && typeof result.result === 'object' && 'count' in result.result) {
-      return { success: true, count: result.result.count };
-    }
-    return { success: false, error: 'No result returned' };
-  } catch (error) {
-    return { success: false, error: String(error) };
+  const raw = await runScript(tabId, func, errorLabel, { count: 0 });
+  if (raw && typeof raw === 'object' && 'count' in raw) {
+    return { success: true, count: raw.count };
   }
+  return { success: false, error: 'No result returned' };
 }
 
 export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
-  return runCleanScript(tabId, () => {
-    const count = localStorage.length;
-    localStorage.clear();
-    return { count };
-  });
+  return runCleanScript(
+    tabId,
+    () => {
+      const count = localStorage.length;
+      localStorage.clear();
+      return { count };
+    },
+    'clear LocalStorage',
+  );
 }
 
 export async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
-  return runCleanScript(tabId, () => {
-    const count = sessionStorage.length;
-    sessionStorage.clear();
-    return { count };
-  });
+  return runCleanScript(
+    tabId,
+    () => {
+      const count = sessionStorage.length;
+      sessionStorage.clear();
+      return { count };
+    },
+    'clear SessionStorage',
+  );
 }
 
 export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
-  return runCleanScript(tabId, async () => {
-    if (typeof indexedDB.databases !== 'function') {
-      return { count: 0 };
-    }
-    const databases = await indexedDB.databases();
-    let count = 0;
-    for (const db of databases) {
-      if (!db.name) continue;
-      const dbName = db.name;
-      try {
-        await new Promise<void>((resolve, reject) => {
-          const deleteReq = indexedDB.deleteDatabase(dbName);
-          const timeout = setTimeout(() => {
-            console.warn('IndexedDB delete timeout:', dbName);
-            resolve();
-          }, 5000);
-          deleteReq.onblocked = () => {
-            console.warn('IndexedDB delete blocked:', dbName);
-            clearTimeout(timeout);
-            resolve();
-          };
-          deleteReq.onsuccess = () => {
-            clearTimeout(timeout);
-            resolve();
-          };
-          deleteReq.onerror = () => {
-            clearTimeout(timeout);
-            reject(new Error(`Failed to delete ${dbName}`));
-          };
-        });
-        count++;
-      } catch (e) {
-        console.error('Delete DB error:', e);
+  return runCleanScript(
+    tabId,
+    async () => {
+      if (typeof indexedDB.databases !== 'function') {
+        return { count: 0 };
       }
-    }
-    return { count };
-  });
+      const databases = await indexedDB.databases();
+      let count = 0;
+      for (const db of databases) {
+        if (!db.name) continue;
+        const dbName = db.name;
+        try {
+          await new Promise<void>((resolve, reject) => {
+            const deleteReq = indexedDB.deleteDatabase(dbName);
+            const timeout = setTimeout(() => {
+              console.warn('IndexedDB delete timeout:', dbName);
+              resolve();
+            }, 5000);
+            deleteReq.onblocked = () => {
+              console.warn('IndexedDB delete blocked:', dbName);
+              clearTimeout(timeout);
+              resolve();
+            };
+            deleteReq.onsuccess = () => {
+              clearTimeout(timeout);
+              resolve();
+            };
+            deleteReq.onerror = () => {
+              clearTimeout(timeout);
+              reject(new Error(`Failed to delete ${dbName}`));
+            };
+          });
+          count++;
+        } catch (e) {
+          console.error('Delete DB error:', e);
+        }
+      }
+      return { count };
+    },
+    'clear IndexedDB',
+  );
 }
 
 export async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
-  return runCleanScript(tabId, async () => {
-    if ('caches' in window) {
-      const cacheNames = await caches.keys();
-      for (const name of cacheNames) {
-        await caches.delete(name);
+  return runCleanScript(
+    tabId,
+    async () => {
+      if ('caches' in window) {
+        const cacheNames = await caches.keys();
+        for (const name of cacheNames) {
+          await caches.delete(name);
+        }
+        return { count: cacheNames.length };
       }
-      return { count: cacheNames.length };
-    }
-    return { count: 0 };
-  });
+      return { count: 0 };
+    },
+    'clear CacheStorage',
+  );
 }
 
 export async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
-  return runCleanScript(tabId, async () => {
-    if ('serviceWorker' in navigator) {
-      const registrations = await navigator.serviceWorker.getRegistrations();
-      for (const registration of registrations) {
-        await registration.unregister();
+  return runCleanScript(
+    tabId,
+    async () => {
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        for (const registration of registrations) {
+          await registration.unregister();
+        }
+        return { count: registrations.length };
       }
-      return { count: registrations.length };
-    }
-    return { count: 0 };
-  });
+      return { count: 0 };
+    },
+    'unregister ServiceWorkers',
+  );
 }
 
 export async function clearStorage(
@@ -314,7 +331,7 @@ export async function clearStorage(
   url: string,
   options: StorageCleanerOptions,
 ): Promise<CleaningResult> {
-  const result: CleaningResult = { success: true };
+  const result: CleaningResult = { overallSuccess: true };
 
   if (options.localStorage) {
     result.localStorage = await injectClearLocalStorage(tabId);
@@ -339,7 +356,7 @@ export async function clearStorage(
     (r): r is StorageCleanResult => r?.success === false,
   );
   if (failures.length > 0) {
-    result.success = false;
+    result.overallSuccess = false;
   }
 
   return result;
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 97bef60..d4f262a 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -125,7 +125,7 @@ const webExtensionMock = {
     get: vi.fn().mockResolvedValue({}),
     sendMessage: vi.fn().mockResolvedValue(undefined),
     create: vi.fn().mockResolvedValue({}),
-    reload: vi.fn().mockResolvedValue(undefined), // ✅ 承接 MessageAction.RELOAD_TAB 刷新单元测试
+    reload: vi.fn().mockResolvedValue(undefined),
   },
   runtime: {
     id: 'test-extension-id',
@@ -202,7 +202,6 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-// 全局 matchMedia 极客级环境模拟（ThemeModeProvider 依赖）
 beforeEach(() => {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,

From 093bf278da500acb4c98b9a5f7d98b18d05d357a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 22:08:04 +0800
Subject: [PATCH 61/71] refactor: replace require with import for JSON module
 in vitest.setup.ts

---
 vitest.setup.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/vitest.setup.ts b/vitest.setup.ts
index d4f262a..a2bae5d 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,11 +1,10 @@
 import '@testing-library/jest-dom';
 import { afterEach, beforeEach, vi } from 'vitest';
 import React from 'react';
+import zhMessages from './public/_locales/zh/messages.json';
 
-// Load actual zh translations for getMessage mock
-const zhMessages: Record<string, { message: string }> =
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  require('./public/_locales/zh/messages.json');
+// Type assertion to allow string indexing
+const zhMessagesMap = zhMessages as Record<string, { message: string }>;
 
 vi.mock('@/utils/chromeI18n', () => ({
   useI18n: (ns?: string | string[]) => ({
@@ -16,13 +15,13 @@ vi.mock('@/utils/chromeI18n', () => ({
         msgId = key.replace(':', '_').replace(/\./g, '_');
       }
       // Try direct key first
-      if (zhMessages[msgId]) return zhMessages[msgId].message;
+      if (zhMessagesMap[msgId]) return zhMessagesMap[msgId].message;
       // Try namespace prefix (using converted msgId)
       if (ns) {
         const namespaces = Array.isArray(ns) ? ns : [ns];
         for (const n of namespaces) {
           const candidate = `${n}_${msgId}`;
-          if (zhMessages[candidate]) return zhMessages[candidate].message;
+          if (zhMessagesMap[candidate]) return zhMessagesMap[candidate].message;
         }
       }
       return msgId;
@@ -33,7 +32,7 @@ vi.mock('@/utils/chromeI18n', () => ({
     },
     isLoaded: true,
   }),
-  getMessage: (msgId: string) => zhMessages[msgId]?.message ?? msgId,
+  getMessage: (msgId: string) => zhMessagesMap[msgId]?.message ?? msgId,
   getLanguage: () => 'zh',
   preloadNamespaces: vi.fn().mockResolvedValue(undefined),
 }));

From 0d69695dbb9678ecca5a683c09f98243c67f79d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 22:40:11 +0800
Subject: [PATCH 62/71] refactor: simplify Timestamp and RightClickRestorer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Timestamp:
- Extract shared utilities (msToUnit, dayjsFromTimestamp, ModeType)
- Remove unnecessary useCallback/useMemo/React.memo
- Remove extra info section (relative time, ISO 8601, UTC)
- Fix missing translation key timestamp_unitS

RightClickRestorer:
- Remove website badge (右键已解锁 overlay)
- Remove mouse penetration logic for media elements
- Remove unnecessary useCallback
- Remove redundant setIsLoading call

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/_locales/zh/messages.json              |   4 +
 src/entrypoints/rightClickRestorer.content.ts | 115 --------------
 .../useRightClickRestorer.ts                  |   7 +-
 src/pages/Timestamp/LiveClock.tsx             |  47 ++----
 src/pages/Timestamp/ResultView.tsx            | 141 +++++-------------
 src/pages/Timestamp/constants.ts              |  16 ++
 src/pages/Timestamp/index.tsx                 |  31 ++--
 src/pages/Timestamp/useTimestampConverter.ts  |  65 ++++----
 8 files changed, 120 insertions(+), 306 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index fc9491f..b8b3a33 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -760,6 +760,10 @@
     "message": "毫秒 (ms)",
     "description": "Translation key: timestamp_unitMs"
   },
+  "timestamp_unitS": {
+    "message": "秒 (s)",
+    "description": "Translation key: timestamp_unitS"
+  },
   "timestamp_currentTs": {
     "message": "当前时间戳",
     "description": "Translation key: timestamp_currentTs"
diff --git a/src/entrypoints/rightClickRestorer.content.ts b/src/entrypoints/rightClickRestorer.content.ts
index 5d59201..8d860ff 100644
--- a/src/entrypoints/rightClickRestorer.content.ts
+++ b/src/entrypoints/rightClickRestorer.content.ts
@@ -1,57 +1,7 @@
 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> {
@@ -90,64 +40,6 @@ function installEventIntercepts(): void {
   );
 }
 
-/* ======================== 遮罩层穿透 ======================== */
-
-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> {
@@ -159,10 +51,8 @@ async function activateProtection(): Promise<void> {
   if (isRestored) return;
 
   installEventIntercepts();
-  initMousePenetration();
 
   isRestored = true;
-  updateBadge();
 }
 
 /* ======================== 消息通信 ======================== */
@@ -184,11 +74,6 @@ export default defineContentScript({
   matches: ['<all_urls>'],
   runAt: 'document_start',
   main() {
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', createBadge, { once: true });
-    } else {
-      createBadge();
-    }
     initMessaging();
   },
 });
diff --git a/src/pages/RightClickRestorer/useRightClickRestorer.ts b/src/pages/RightClickRestorer/useRightClickRestorer.ts
index d1ec990..b215743 100644
--- a/src/pages/RightClickRestorer/useRightClickRestorer.ts
+++ b/src/pages/RightClickRestorer/useRightClickRestorer.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { MessageAction, sendMessageToContent } from '@/utils/messages';
 
 const UNSUPPORTED_PROTOCOLS = new Set([
@@ -43,7 +43,6 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
 
         if (isUnsupportedPage(url)) {
           setIsUnsupported(true);
-          setIsLoading(false);
           return;
         }
 
@@ -61,7 +60,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
     void load();
   }, []);
 
-  const unlock = useCallback(async () => {
+  async function unlock() {
     if (isUnsupported) return;
 
     try {
@@ -72,7 +71,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
     } catch (err) {
       console.error('[RightClickRestorer] Failed to unlock:', err);
     }
-  }, [isUnsupported]);
+  }
 
   return {
     domain,
diff --git a/src/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/LiveClock.tsx
index 0ded535..a75b352 100644
--- a/src/pages/Timestamp/LiveClock.tsx
+++ b/src/pages/Timestamp/LiveClock.tsx
@@ -1,8 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import CopyButton from '@/components/CopyButton';
 import type { UnitType } from './constants';
+import { msToUnit } from './constants';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
@@ -11,41 +12,20 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
   onUseNow: (val: number) => void;
 }
 
-const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
+export default function LiveClock({ unit, onUseNow, className, ...props }: LiveClockProps) {
   const { t } = useI18n('timestamp');
-  const onUseNowRef = useRef(onUseNow);
 
-  const [currentDisplay, setCurrentDisplay] = useState(() => {
-    const initNow = Date.now();
-    return {
-      rawTime: initNow,
-      text: String(Math.floor(initNow / (unit === 'ms' ? 1 : 1000))),
-    };
-  });
-
-  useEffect(() => {
-    onUseNowRef.current = onUseNow;
-  }, [onUseNow]);
+  const [rawTime, setRawTime] = useState(() => Date.now());
 
   useEffect(() => {
     const tick = () => {
-      const rightNow = Date.now();
-      const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
-
-      setCurrentDisplay((prev) => {
-        if (prev.text === nextText) return prev;
-        return { rawTime: rightNow, text: nextText };
-      });
+      setRawTime(Date.now());
     };
-
     const tickId = setInterval(tick, 200);
     return () => clearInterval(tickId);
   }, [unit]);
 
-  const handleUseNow = useCallback(() => {
-    onUseNowRef.current(currentDisplay.rawTime);
-    toast.success(t('timestamp:usedSuccess'));
-  }, [currentDisplay.rawTime, t]);
+  const text = String(msToUnit(rawTime, unit));
 
   return (
     <div
@@ -60,12 +40,15 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
       </span>
 
       <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
-        {currentDisplay.text}
+        {text}
       </span>
 
       <button
         type="button"
-        onClick={handleUseNow}
+        onClick={() => {
+          onUseNow(rawTime);
+          toast.success(t('timestamp:usedSuccess'));
+        }}
         title={t('timestamp:useNowTooltip')}
         className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
       >
@@ -73,14 +56,10 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
       </button>
 
       <CopyButton
-        text={currentDisplay.text}
+        text={text}
         tooltip={t('timestamp:copyTsTooltip')}
         className="h-7 w-7 rounded-md border"
       />
     </div>
   );
-});
-
-LiveClock.displayName = 'LiveClock';
-
-export default LiveClock;
+}
diff --git a/src/pages/Timestamp/ResultView.tsx b/src/pages/Timestamp/ResultView.tsx
index 71087a7..076d01e 100644
--- a/src/pages/Timestamp/ResultView.tsx
+++ b/src/pages/Timestamp/ResultView.tsx
@@ -1,119 +1,52 @@
-import React, { useMemo } from 'react';
-import dayjs from '@/utils/dayjs';
+import React from 'react';
 import CopyButton from '@/components/CopyButton';
-import type { UnitType } from './constants';
-import { DATE_FORMAT } from './constants';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
   result: string;
-  mode: 'ts2dt' | 'dt2ts';
-  unit: UnitType;
-  zone: string;
-
   showEmptyPlaceholder?: boolean;
 }
 
-const ResultView = React.memo(
-  ({
-    result,
-    mode,
-    unit,
-    zone,
-    showEmptyPlaceholder = false,
-    className,
-    ...props
-  }: ResultViewProps) => {
-    const { t } = useI18n('timestamp');
-
-    const extraInfo = useMemo(() => {
-      if (!result) return null;
-      const d =
-        mode === 'ts2dt'
-          ? dayjs(result, DATE_FORMAT).tz(zone)
-          : unit === 'ms'
-            ? dayjs(Number(result))
-            : dayjs.unix(Number(result));
-
-      return {
-        relative: d.fromNow(),
-        iso: d.toISOString(),
-        utc: d.utc().format(DATE_FORMAT) + ' UTC',
-      };
-    }, [result, mode, zone, unit]);
-
-    if (!result) {
-      if (!showEmptyPlaceholder) return null;
-      return (
-        <div
-          className={cn(
-            'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
-            className,
-          )}
-          {...props}
-        >
-          {t('timestamp:resultEmpty')}
-        </div>
-      );
-    }
+export default function ResultView({
+  result,
+  showEmptyPlaceholder = false,
+  className,
+  ...props
+}: ResultViewProps) {
+  const { t } = useI18n('timestamp');
 
+  if (!result) {
+    if (!showEmptyPlaceholder) return null;
     return (
-      <div className={cn('flex flex-col w-full', className)} {...props}>
-        {/* 顶部小标签 */}
-        <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
-          {t('timestamp:resultLabel')}
-        </span>
-
-        <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
-          <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
-            {result}
-          </span>
-          <CopyButton
-            text={result}
-            tooltip={t('timestamp:copyResultTooltip')}
-            className="h-8 w-8 rounded-md shrink-0 border"
-          />
-        </div>
-
-        <div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
-          {[
-            { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
-            { label: t('timestamp:iso8601'), value: extraInfo?.iso, isMono: true },
-            { label: t('timestamp:utcTime'), value: extraInfo?.utc, isMono: true },
-          ].map((item) => (
-            <div
-              key={item.label}
-              className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1.5 py-0.5 border-b border-border/30 last:border-0 pb-2 sm:pb-0 last:pb-0"
-            >
-              <span className="text-muted-foreground font-semibold text-xs shrink-0 select-none">
-                {item.label}
-              </span>
-              <div className="flex items-center justify-between sm:justify-end gap-2 min-w-0 w-full sm:w-auto">
-                <span
-                  className={cn(
-                    'text-xs text-foreground/90 font-medium break-all text-left sm:text-right tabular-nums',
-                    item.isMono && 'font-mono text-[11px]',
-                  )}
-                >
-                  {item.value}
-                </span>
-                {item.value && (
-                  <CopyButton
-                    text={item.value}
-                    tooltip={t('timestamp:copyTooltip')}
-                    className="h-6 w-6 rounded-md border shrink-0 text-muted-foreground"
-                  />
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
+      <div
+        className={cn(
+          'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
+          className,
+        )}
+        {...props}
+      >
+        {t('timestamp:resultEmpty')}
       </div>
     );
-  },
-);
+  }
 
-ResultView.displayName = 'ResultView';
+  return (
+    <div className={cn('flex flex-col w-full', className)} {...props}>
+      <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
+        {t('timestamp:resultLabel')}
+      </span>
 
-export default ResultView;
+      <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
+        <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
+          {result}
+        </span>
+        <CopyButton
+          text={result}
+          tooltip={t('timestamp:copyResultTooltip')}
+          className="h-8 w-8 rounded-md shrink-0 border"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Timestamp/constants.ts b/src/pages/Timestamp/constants.ts
index ae08b00..6a84613 100644
--- a/src/pages/Timestamp/constants.ts
+++ b/src/pages/Timestamp/constants.ts
@@ -1,6 +1,22 @@
+import type { Dayjs } from 'dayjs';
+import dayjs from '@/utils/dayjs';
+
 export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
 
 export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
 
+export type ModeType = 'ts2dt' | 'dt2ts';
 export type UnitType = 'ms' | 's';
 export type ZoneType = (typeof ZONES)[number];
+
+const DIVISORS: Record<UnitType, number> = { ms: 1, s: 1000 };
+
+/** Convert milliseconds to display value based on unit. */
+export function msToUnit(ms: number, unit: UnitType): number {
+  return Math.floor(ms / DIVISORS[unit]);
+}
+
+/** Build a dayjs object from a numeric timestamp according to unit. */
+export function dayjsFromTimestamp(ts: number, unit: UnitType): Dayjs {
+  return unit === 'ms' ? dayjs(ts) : dayjs.unix(ts);
+}
diff --git a/src/pages/Timestamp/index.tsx b/src/pages/Timestamp/index.tsx
index e554860..2120708 100644
--- a/src/pages/Timestamp/index.tsx
+++ b/src/pages/Timestamp/index.tsx
@@ -1,5 +1,6 @@
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { ZONES } from './constants';
+import type { ModeType, UnitType, ZoneType } from './constants';
 import LiveClock from './LiveClock';
 import ResultView from './ResultView';
 import { useTimestampConverter } from './useTimestampConverter';
@@ -15,6 +16,16 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 
+const MODE_OPTIONS: { value: ModeType; label: string }[] = [
+  { value: 'ts2dt', label: 'timestamp:tsToDate' },
+  { value: 'dt2ts', label: 'timestamp:dateToTs' },
+];
+
+const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
+  { value: 'ms', label: 'timestamp:unitMs' },
+  { value: 's', label: 'timestamp:unitS' },
+];
+
 export default function Index() {
   const { t } = useI18n('timestamp');
 
@@ -42,11 +53,8 @@ export default function Index() {
             <div className="flex flex-col gap-4">
               <SwitchButtonGroup
                 value={mode}
-                options={[
-                  { value: 'ts2dt', label: t('timestamp:tsToDate') },
-                  { value: 'dt2ts', label: t('timestamp:dateToTs') },
-                ]}
-                onChange={(newMode) => setMode(newMode as 'ts2dt' | 'dt2ts')}
+                options={MODE_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
+                onChange={setMode}
                 size="small"
               />
 
@@ -57,7 +65,7 @@ export default function Index() {
                     mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
                   }
                   value={input}
-                  onChange={(e: { target: { value: string } }) => setInput(e.target.value)}
+                  onChange={(e) => setInput(e.target.value)}
                   className={cn(
                     'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
                     error && 'border-destructive focus-visible:ring-destructive',
@@ -70,16 +78,13 @@ export default function Index() {
               <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
                 <SwitchButtonGroup
                   value={unit}
-                  options={[
-                    { value: 'ms', label: t('timestamp:unitMs') },
-                    { value: 's', label: t('timestamp:unitS') },
-                  ]}
-                  onChange={(v) => setUnit(v as 'ms' | 's')}
+                  options={UNIT_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
+                  onChange={setUnit}
                   size="small"
                   className="sm:w-auto shrink-0"
                 />
 
-                <Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
+                <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
                   <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
                     <SelectValue placeholder="选择时区" />
                   </SelectTrigger>
@@ -100,7 +105,7 @@ export default function Index() {
           </div>
 
           <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
-            <ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
+            <ResultView result={result} showEmptyPlaceholder />
           </div>
         </div>
       </div>
diff --git a/src/pages/Timestamp/useTimestampConverter.ts b/src/pages/Timestamp/useTimestampConverter.ts
index 31d8be8..7562c85 100644
--- a/src/pages/Timestamp/useTimestampConverter.ts
+++ b/src/pages/Timestamp/useTimestampConverter.ts
@@ -1,39 +1,42 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
-import type { UnitType, ZoneType } from './constants';
-import { DATE_FORMAT } from './constants';
+import type { UnitType, ZoneType, ModeType } from './constants';
+import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
 import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
-  mode: 'ts2dt' | 'dt2ts';
+  mode: ModeType;
   input: string;
   unit: UnitType;
   zone: ZoneType;
   result: string;
   error: string;
 
-  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setMode: (mode: ModeType) => void;
   setInput: (value: string) => void;
   setUnit: (unit: UnitType) => void;
   setZone: (zone: ZoneType) => void;
   handleUseNow: (now: number) => void;
 }
 
+const TIMESTAMP_REGEX = /^\d+$/;
+const MS_TIMESTAMP_MIN_LENGTH = 13;
+
 function isTimestampLike(input: string): boolean {
   const trimmed = input.trim();
-  return /^\d+$/.test(trimmed) && trimmed.length >= 10;
+  return TIMESTAMP_REGEX.test(trimmed) && trimmed.length >= 10;
 }
 
 export function useTimestampConverter(): UseTimestampConverterReturn {
   const { t } = useI18n('timestamp');
-  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
+  const [mode, setMode] = useState<ModeType>('ts2dt');
   const [unit, setUnit] = useState<UnitType>('ms');
   const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
 
   const [input, setInput] = useState(() => String(Date.now()));
 
-  const conversionPipeline = useMemo(() => {
+  const { result, error } = useMemo(() => {
     const rawInput = input.trim();
     if (!rawInput) return { result: '', error: '' };
 
@@ -42,7 +45,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
       if (isNaN(num)) {
         return { result: '', error: t('timestamp:errors.invalidNumber') };
       }
-      const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
+      const d = dayjsFromTimestamp(num, unit);
       if (!d.isValid()) {
         return { result: '', error: t('timestamp:errors.invalidTimestamp') };
       }
@@ -53,19 +56,15 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
         return { result: '', error: t('timestamp:errors.invalidFormat') };
       }
       const ms = d.valueOf();
-      const outputTs = unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000));
-      return { result: outputTs, error: '' };
+      return { result: String(msToUnit(ms, unit)), error: '' };
     }
   }, [input, mode, unit, zone, t]);
 
-  const { result, error } = conversionPipeline;
-
-  const handleContextMenuData = useCallback((payload: string) => {
+  const handleContextMenuData = (payload: string) => {
     const trimmed = payload.trim();
     if (isTimestampLike(trimmed)) {
       setMode('ts2dt');
-      const detectedUnit: UnitType = trimmed.length >= 13 ? 'ms' : 's';
-      setUnit(detectedUnit);
+      setUnit(trimmed.length >= MS_TIMESTAMP_MIN_LENGTH ? 'ms' : 's');
       setInput(trimmed);
     } else {
       const d = dayjs(trimmed);
@@ -77,30 +76,24 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
         setInput(trimmed);
       }
     }
-  }, []);
+  };
 
   useContextMenuData({ featureKey: 'timestamp', onData: handleContextMenuData });
 
-  const handleUseNow = useCallback(
-    (now: number) => {
-      if (mode === 'ts2dt') {
-        setInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
-      } else {
-        setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
-      }
-    },
-    [mode, unit, zone],
-  );
+  const handleUseNow = (now: number) => {
+    if (mode === 'ts2dt') {
+      setInput(String(msToUnit(now, unit)));
+    } else {
+      setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
+    }
+  };
 
-  const handleSetMode = useCallback(
-    (newMode: 'ts2dt' | 'dt2ts') => {
-      setMode(newMode);
-      if (result && !error) {
-        setInput(result);
-      }
-    },
-    [result, error],
-  );
+  const handleSetMode = (newMode: ModeType) => {
+    setMode(newMode);
+    if (result && !error) {
+      setInput(result);
+    }
+  };
 
   return {
     mode,

From 13113f0ea2ac44bf828aaf4946a66b0d85c25b03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 29 May 2026 22:42:59 +0800
Subject: [PATCH 63/71] refactor(StorageCleanerConfirm.test.tsx): update
 IndexedDB label to Chinese translation

---
 src/components/__tests__/StorageCleanerConfirm.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/__tests__/StorageCleanerConfirm.test.tsx b/src/components/__tests__/StorageCleanerConfirm.test.tsx
index 3fd0bc7..490ffa4 100644
--- a/src/components/__tests__/StorageCleanerConfirm.test.tsx
+++ b/src/components/__tests__/StorageCleanerConfirm.test.tsx
@@ -94,7 +94,7 @@ describe('StorageCleanerConfirm 组件', () => {
       renderComponent({ options: partialOptions });
 
       expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
-      expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
+      expect(screen.getByText(/站点存储/)).toBeInTheDocument();
       expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
       expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
     });

From 6dca673a5a8e040194189f6267fe292ccaedd77c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:23:05 +0800
Subject: [PATCH 64/71] =?UTF-8?q?refactor(qrcode):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E8=BD=AC=E4=BA=8C=E7=BB=B4=E7=A0=81=E4=B8=BA?=
 =?UTF-8?q?=E4=B8=A4=E6=AD=A5=E6=93=8D=E4=BD=9C=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将实时预览改为显式触发生成，用户体验更清晰
- 新增输入态（input）和预览态（preview）两种状态
- 输入态：显示输入框和生成按钮，右侧显示占位提示
- 预览态：显示只读文本预览和编辑按钮，右侧显示二维码
- 保存上次输入内容，返回编辑态时自动回填
- 添加空输入校验和错误提示
- 更新国际化文案
- 完善单元测试覆盖新功能
---
 public/_locales/zh/messages.json              |  24 +++
 src/components/QrCodePreview.tsx              |   7 +-
 src/pages/QrCode/__tests__/index.test.tsx     | 112 +++++++++++++-
 src/pages/QrCode/components/GeneratePanel.tsx |  93 +++++++++--
 src/pages/QrCode/contexts/QrCodeContext.ts    |   4 +
 src/pages/QrCode/hooks/useQrCode.ts           | 146 ++++++++++++------
 src/pages/QrCode/types.ts                     |  15 +-
 7 files changed, 320 insertions(+), 81 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index b8b3a33..0addc30 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -576,6 +576,30 @@
     "message": "点击更换图片",
     "description": "Translation key: qrCode_clickToChange"
   },
+  "qrCode_generateButton": {
+    "message": "生成二维码",
+    "description": "Translation key: qrCode_generateButton"
+  },
+  "qrCode_editButton": {
+    "message": "编辑",
+    "description": "Translation key: qrCode_editButton"
+  },
+  "qrCode_textPreviewLabel": {
+    "message": "原始文本",
+    "description": "Translation key: qrCode_textPreviewLabel"
+  },
+  "qrCode_generateFirstHint": {
+    "message": "输入文本后点击「生成二维码」按钮",
+    "description": "Translation key: qrCode_generateFirstHint"
+  },
+  "qrCode_inputRequired": {
+    "message": "请输入内容",
+    "description": "Translation key: qrCode_inputRequired"
+  },
+  "qrCode_generateError": {
+    "message": "生成二维码失败，请重试",
+    "description": "Translation key: qrCode_generateError"
+  },
   "rightClickRestorer_loading": {
     "message": "正在加载...",
     "description": "Translation key: rightClickRestorer_loading"
diff --git a/src/components/QrCodePreview.tsx b/src/components/QrCodePreview.tsx
index 35c43cb..8c3da70 100644
--- a/src/components/QrCodePreview.tsx
+++ b/src/components/QrCodePreview.tsx
@@ -12,12 +12,15 @@ interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   onDownload: () => void;
   /** 复制回调 */
   onCopy: () => void;
+  /** 自定义占位文本，用于空状态提示 */
+  placeholderText?: string;
 }
 
 const QrCodePreview = ({
   qrCodeDataUrl,
   onDownload,
   onCopy,
+  placeholderText,
   className,
   ...props
 }: QrCodePreviewProps) => {
@@ -33,7 +36,9 @@ const QrCodePreview = ({
         )}
         {...props}
       >
-        <p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
+        <p className="text-sm text-muted-foreground text-center">
+          {placeholderText || t('qrCode:qrCodeWillShow')}
+        </p>
       </div>
     );
   }
diff --git a/src/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
index 5c04ded..1f52b3c 100644
--- a/src/pages/QrCode/__tests__/index.test.tsx
+++ b/src/pages/QrCode/__tests__/index.test.tsx
@@ -7,6 +7,8 @@ vi.mock('lucide-react', async (importOriginal) => {
   return {
     ...actual,
     QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
+    Pencil: () => <div data-testid="mock-lucide-pencil">Icon</div>,
+    Loader2: () => <div data-testid="mock-lucide-loader">Icon</div>,
   };
 });
 
@@ -25,26 +27,39 @@ vi.mock('@/config/features', async (importOriginal) => {
 });
 
 vi.mock('@/components/QrCodePreview', () => ({
-  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
+  default: ({ placeholderText }: { placeholderText?: string }) => (
+    <div data-testid="qr-code-preview">
+      QrCodePreview
+      {placeholderText && <span data-testid="placeholder-text">{placeholderText}</span>}
+    </div>
+  ),
 }));
 
 vi.mock('@/components/ImageUploader', () => ({
   default: () => <div data-testid="image-uploader">ImageUploader</div>,
 }));
 
-vi.mock('qrious', () => ({
-  default: vi.fn().mockImplementation(() => ({
-    toDataURL: () => 'data:image/png;base64,mock',
-  })),
-}));
+vi.mock('qrious', () => {
+  return {
+    default: class QRious {
+      constructor() {
+        return {
+          toDataURL: () => 'data:image/png;base64,mock',
+        };
+      }
+    },
+  };
+});
 
 describe('QrCodePage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it('应该默认渲染生成模式', () => {
+  it('应该默认渲染生成模式的输入态', () => {
     render(<QrCodePage />);
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+    expect(screen.getByText('生成二维码')).toBeInTheDocument();
     expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
   });
 
@@ -71,7 +86,7 @@ describe('QrCodePage', () => {
     expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
   });
 
-  it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
+  it('应该渲染输入区域的系统标签', () => {
     render(<QrCodePage />);
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
   });
@@ -81,4 +96,85 @@ describe('QrCodePage', () => {
     const gridContainer = container.querySelector('.grid');
     expect(gridContainer).toBeInTheDocument();
   });
+
+  it('输入态应该显示生成按钮', () => {
+    render(<QrCodePage />);
+    const generateButton = screen.getByText('生成二维码');
+    expect(generateButton).toBeInTheDocument();
+    expect(generateButton).toBeDisabled(); // 空输入时按钮应该禁用
+  });
+
+  it('有输入内容时生成按钮应该可用', () => {
+    render(<QrCodePage />);
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+
+    const generateButton = screen.getByText('生成二维码');
+    expect(generateButton).not.toBeDisabled();
+  });
+
+  it('点击生成按钮应该切换到预览态', () => {
+    render(<QrCodePage />);
+
+    // 输入文本
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+
+    // 点击生成按钮
+    const generateButton = screen.getByText('生成二维码');
+    fireEvent.click(generateButton);
+
+    // 验证切换到预览态
+    expect(screen.getByText('原始文本')).toBeInTheDocument();
+    expect(screen.getByText('编辑')).toBeInTheDocument();
+    expect(screen.queryByText('生成二维码')).not.toBeInTheDocument();
+  });
+
+  it('预览态应该显示保存的文本', () => {
+    render(<QrCodePage />);
+
+    // 输入文本
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+
+    // 点击生成按钮
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 验证显示保存的文本
+    expect(screen.getByText('https://example.com')).toBeInTheDocument();
+  });
+
+  it('点击编辑按钮应该返回输入态', () => {
+    render(<QrCodePage />);
+
+    // 输入文本并生成
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 点击编辑按钮
+    fireEvent.click(screen.getByText('编辑'));
+
+    // 验证返回输入态
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+    expect(screen.getByText('生成二维码')).toBeInTheDocument();
+    expect(screen.queryByText('编辑')).not.toBeInTheDocument();
+  });
+
+  it('返回编辑态应该保留上次输入的内容', () => {
+    render(<QrCodePage />);
+
+    // 输入文本并生成
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 点击编辑按钮
+    fireEvent.click(screen.getByText('编辑'));
+
+    // 验证输入框保留了上次的内容
+    const textareaAfterEdit =
+      screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    expect(textareaAfterEdit).toHaveValue('https://example.com');
+  });
 });
diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
index 22cf88c..76bfdca 100644
--- a/src/pages/QrCode/components/GeneratePanel.tsx
+++ b/src/pages/QrCode/components/GeneratePanel.tsx
@@ -1,49 +1,108 @@
+import { Loader2, Pencil, QrCode } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
 import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
+import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 export default function GeneratePanel() {
   const { t } = useI18n('qrCode');
-  const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
+  const {
+    generatorState,
+    setTextToEncode,
+    confirmGenerate,
+    backToEdit,
+    downloadQrCode,
+    copyQrCode,
+  } = useQrCodeContext();
+
+  const isInputStep = generatorState.step === 'input';
+  const hasText = generatorState.textToEncode.trim().length > 0;
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
+      {/* 左侧：输入态显示输入框，预览态显示文本预览 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
-          'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
+          isInputStep && 'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
         )}
       >
         <div className="flex flex-col space-y-2.5 h-full">
-          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-            {t('qrCode:urlInputLabel')}
-          </Label>
+          <div className="flex items-center justify-between">
+            <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
+              {isInputStep ? t('qrCode:urlInputLabel') : t('qrCode:textPreviewLabel')}
+            </Label>
+
+            {/* 预览态显示编辑按钮 */}
+            {!isInputStep && (
+              <Button variant="ghost" size="sm" onClick={backToEdit} className="h-7 px-2 text-xs">
+                <Pencil className="w-3 h-3 mr-1" />
+                {t('qrCode:editButton')}
+              </Button>
+            )}
+          </div>
 
           <div className="flex-1 min-h-0">
-            <TextInputArea
-              value={generatorState.textToEncode}
-              onChange={setTextToEncode}
-              placeholder={t('qrCode:urlInputPlaceholder')}
-              showCount={true}
-              showClear={true}
-              allowCopy={true}
-              minRows={6}
-              maxRows={12}
-              externalError={generatorState.inputError || undefined}
-              onClear={() => setTextToEncode('')}
-            />
+            {isInputStep ? (
+              /* 输入态：可编辑的输入框 */
+              <TextInputArea
+                value={generatorState.textToEncode}
+                onChange={setTextToEncode}
+                placeholder={t('qrCode:urlInputPlaceholder')}
+                showCount={true}
+                showClear={true}
+                allowCopy={false}
+                minRows={6}
+                maxRows={12}
+                externalError={generatorState.inputError || undefined}
+                onClear={() => setTextToEncode('')}
+              />
+            ) : (
+              /* 预览态：只读文本预览 */
+              <div
+                className="h-full min-h-[150px] p-3 rounded-md border border-input bg-muted/50 overflow-auto"
+                title={generatorState.savedText}
+              >
+                <p className="text-sm text-foreground whitespace-pre-wrap break-all">
+                  {generatorState.savedText}
+                </p>
+              </div>
+            )}
           </div>
+
+          {/* 输入态显示生成按钮 */}
+          {isInputStep && (
+            <Button
+              onClick={confirmGenerate}
+              disabled={!hasText || generatorState.generating}
+              className="w-full"
+            >
+              {generatorState.generating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  {t('qrCode:generating')}
+                </>
+              ) : (
+                <>
+                  <QrCode className="w-4 h-4 mr-2" />
+                  {t('qrCode:generateButton')}
+                </>
+              )}
+            </Button>
+          )}
         </div>
       </div>
 
+      {/* 右侧：二维码预览区域 */}
       <div className="flex flex-col h-full">
         <QrCodePreview
           qrCodeDataUrl={generatorState.qrCodeDataUrl}
           onDownload={downloadQrCode}
           onCopy={copyQrCode}
+          placeholderText={isInputStep ? t('qrCode:generateFirstHint') : undefined}
         />
       </div>
     </div>
diff --git a/src/pages/QrCode/contexts/QrCodeContext.ts b/src/pages/QrCode/contexts/QrCodeContext.ts
index fe6d02f..fbe4a30 100644
--- a/src/pages/QrCode/contexts/QrCodeContext.ts
+++ b/src/pages/QrCode/contexts/QrCodeContext.ts
@@ -8,6 +8,10 @@ export interface QrCodeContextValue {
 
   generatorState: QrCodeGeneratorState;
   setTextToEncode: (text: string) => void;
+  /** 显式触发生成二维码并切换到预览态 */
+  confirmGenerate: () => void;
+  /** 返回编辑态，保留上次输入内容 */
+  backToEdit: () => void;
 
   downloadQrCode: () => void;
   copyQrCode: () => Promise<void>;
diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index bedf5c3..f608575 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -1,22 +1,51 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import QRious from 'qrious';
 import { toast } from 'sonner';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { useI18n } from '@/utils/chromeI18n';
-import { useDebounce } from '@/utils/useDebounce';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
+/** 生成二维码的核心逻辑 */
+function generateQrCodeDataUrl(text: string): string {
+  const trimmedText = text.trim();
+  if (!trimmedText) return '';
+
+  try {
+    let url = trimmedText;
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      url = 'https://' + url;
+    }
+
+    const isDark = document.documentElement.classList.contains('dark');
+
+    const qr = new QRious({
+      value: url,
+      size: 260,
+      level: 'H',
+      foreground: isDark ? '#f3f4f6' : '#0f172a',
+      background: isDark ? 'transparent' : '#ffffff',
+    });
+
+    return qr.toDataURL();
+  } catch (error) {
+    console.error('QR code generation failed:', error);
+    return '';
+  }
+}
+
 export function useQrCode(): QrCodeContextValue {
   const { t } = useI18n('qrCode');
 
   const [mode, setMode] = useState<QrCodeMode>('generate');
 
-  const [generatorState, setGeneratorState] = useState<
-    Omit<QrCodeGeneratorState, 'generating' | 'qrCodeDataUrl'>
-  >({
+  const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
+    step: 'input',
     textToEncode: '',
+    savedText: '',
+    qrCodeDataUrl: '',
+    generating: false,
     inputError: '',
   });
 
@@ -29,51 +58,64 @@ export function useQrCode(): QrCodeContextValue {
     dragging: false,
   });
 
-  const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
-
-  const qrCodeDataUrl = useMemo(() => {
-    const text = debouncedTextToEncode.trim();
-    if (!text) return '';
-
-    try {
-      let url = text;
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        url = 'https://' + url;
-      }
-
-      const isDark = document.documentElement.classList.contains('dark');
-
-      const qr = new QRious({
-        value: url,
-        size: 260,
-        level: 'H',
-        foreground: isDark ? '#f3f4f6' : '#0f172a',
-        background: isDark ? 'transparent' : '#ffffff',
-      });
-
-      return qr.toDataURL();
-    } catch (error) {
-      console.error('QR code generation sync task failed:', error);
-      return '';
-    }
-  }, [debouncedTextToEncode]);
-
-  const fullGeneratorState = useMemo<QrCodeGeneratorState>(
-    () => ({
-      ...generatorState,
-      qrCodeDataUrl,
-      generating: false,
-    }),
-    [generatorState, qrCodeDataUrl],
-  );
-
   const setTextToEncode = useCallback((text: string) => {
     setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
   }, []);
 
+  /** 显式触发生成二维码并切换到预览态 */
+  const confirmGenerate = useCallback(() => {
+    const text = generatorState.textToEncode.trim();
+
+    if (!text) {
+      setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
+      toast.error(t('qrCode:inputRequired'));
+      return;
+    }
+
+    setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
+
+    const qrCodeDataUrl = generateQrCodeDataUrl(text);
+
+    if (!qrCodeDataUrl) {
+      setGeneratorState((prev) => ({
+        ...prev,
+        generating: false,
+        inputError: t('qrCode:generateError'),
+      }));
+      toast.error(t('qrCode:generateError'));
+      return;
+    }
+
+    setGeneratorState((prev) => ({
+      ...prev,
+      step: 'preview',
+      savedText: text,
+      qrCodeDataUrl,
+      generating: false,
+    }));
+  }, [generatorState.textToEncode, t]);
+
+  /** 返回编辑态，保留上次输入内容 */
+  const backToEdit = useCallback(() => {
+    setGeneratorState((prev) => ({
+      ...prev,
+      step: 'input',
+      textToEncode: prev.savedText,
+      qrCodeDataUrl: '',
+      inputError: '',
+    }));
+  }, []);
+
   const handleContextMenuData = useCallback((payload: string) => {
     setMode('generate');
-    setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
+    setGeneratorState((prev) => ({
+      ...prev,
+      step: 'input',
+      textToEncode: payload,
+      savedText: '',
+      qrCodeDataUrl: '',
+      inputError: '',
+    }));
   }, []);
 
   useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
@@ -107,20 +149,20 @@ export function useQrCode(): QrCodeContextValue {
   );
 
   const downloadQrCode = useCallback(() => {
-    if (!qrCodeDataUrl) return;
+    if (!generatorState.qrCodeDataUrl) return;
 
     const link = document.createElement('a');
-    link.href = qrCodeDataUrl;
+    link.href = generatorState.qrCodeDataUrl;
     link.download = 'qrcode.png';
     link.click();
     toast.success(t('qrCode:qrCodeDownloadSuccess'));
-  }, [qrCodeDataUrl, t]);
+  }, [generatorState.qrCodeDataUrl, t]);
 
   const copyQrCode = useCallback(async () => {
-    if (!qrCodeDataUrl) return;
+    if (!generatorState.qrCodeDataUrl) return;
 
     try {
-      const response = await fetch(qrCodeDataUrl);
+      const response = await fetch(generatorState.qrCodeDataUrl);
       const blob = await response.blob();
 
       await navigator.clipboard.write([
@@ -134,7 +176,7 @@ export function useQrCode(): QrCodeContextValue {
       console.error('复制二维码失败:', error);
       toast.error(t('qrCode:copyError'));
     }
-  }, [qrCodeDataUrl, t]);
+  }, [generatorState.qrCodeDataUrl, t]);
 
   const handleFileChange = useCallback(
     (file: File) => {
@@ -178,8 +220,10 @@ export function useQrCode(): QrCodeContextValue {
   return {
     mode,
     setMode,
-    generatorState: fullGeneratorState,
+    generatorState,
     setTextToEncode,
+    confirmGenerate,
+    backToEdit,
     parseQrCode,
     downloadQrCode,
     copyQrCode,
diff --git a/src/pages/QrCode/types.ts b/src/pages/QrCode/types.ts
index b2ab4d9..860fb16 100644
--- a/src/pages/QrCode/types.ts
+++ b/src/pages/QrCode/types.ts
@@ -5,16 +5,23 @@
 /** 二维码功能核心主路由模式 */
 export type QrCodeMode = 'generate' | 'parse';
 
+/** 生成器的操作步骤 */
+export type GeneratorStep = 'input' | 'preview';
+
 /** * 二维码生成器的状态
- * 💡 架构优化：保留与全局 Context 骨架契合的形态，
- * 外部依然可以流畅读取这些状态，但在新架构下运行效率和稳定性大幅提升！
+ * 💡 架构优化：采用两步操作模式（输入态 → 预览态），
+ * 用户显式点击生成按钮后才生成二维码，体验更清晰！
  */
 export interface QrCodeGeneratorState {
+  /** 当前操作步骤：输入态或预览态 */
+  step: GeneratorStep;
   /** 受控的输入源文本（支持 URL 或任意文本快照） */
   textToEncode: string;
-  /** 由防抖源文本流在单次渲染内存中同步派生出的二维码 Base64 Data URL */
+  /** 保存的文本快照，用于预览态展示和编辑态回填 */
+  savedText: string;
+  /** 由用户显式触发生成的二维码 Base64 Data URL */
   qrCodeDataUrl: string;
-  /** 是否正在生成（流式架构下已默认为恒定 false 的非阻塞快照，保留作为 UI 骨架兼容） */
+  /** 是否正在生成 */
   generating: boolean;
   /** 输入文本校验或底层画布崩溃的错误提示信息 */
   inputError: string;

From 5b26287cffc112de19afe954400180de258f9540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:29:12 +0800
Subject: [PATCH 65/71] =?UTF-8?q?refactor(qrcode):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=80=BB=E8=BE=91=EF=BC=8C=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=80=81=E9=9A=90=E8=97=8F=E9=A2=84=E8=A7=88=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 输入态：只显示输入框和生成按钮，隐藏二维码预览
- 预览态：上方显示文本预览（超长文本截断），下方显示二维码
- 点击编辑返回输入态，隐藏二维码预览
- 更新测试用例适配新布局
---
 src/pages/QrCode/__tests__/index.test.tsx     |  55 ++++----
 src/pages/QrCode/components/GeneratePanel.tsx | 124 +++++++++---------
 2 files changed, 97 insertions(+), 82 deletions(-)

diff --git a/src/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
index 1f52b3c..75eac20 100644
--- a/src/pages/QrCode/__tests__/index.test.tsx
+++ b/src/pages/QrCode/__tests__/index.test.tsx
@@ -27,12 +27,7 @@ vi.mock('@/config/features', async (importOriginal) => {
 });
 
 vi.mock('@/components/QrCodePreview', () => ({
-  default: ({ placeholderText }: { placeholderText?: string }) => (
-    <div data-testid="qr-code-preview">
-      QrCodePreview
-      {placeholderText && <span data-testid="placeholder-text">{placeholderText}</span>}
-    </div>
-  ),
+  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
 }));
 
 vi.mock('@/components/ImageUploader', () => ({
@@ -60,7 +55,8 @@ describe('QrCodePage', () => {
     render(<QrCodePage />);
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
     expect(screen.getByText('生成二维码')).toBeInTheDocument();
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+    // 输入态应该隐藏二维码预览
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
   it('应该渲染模式切换按钮', () => {
@@ -73,17 +69,16 @@ describe('QrCodePage', () => {
     render(<QrCodePage />);
     fireEvent.click(screen.getByText('二维码转文本'));
     expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
-    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
-  it('切换回生成模式应该渲染 QrCodePreview', () => {
+  it('切换回生成模式应该渲染输入态', () => {
     render(<QrCodePage />);
     // 先切换到解析模式
     fireEvent.click(screen.getByText('二维码转文本'));
-    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
     // 再切换回生成模式
     fireEvent.click(screen.getByText('文本转二维码'));
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+    expect(screen.getByText('生成二维码')).toBeInTheDocument();
   });
 
   it('应该渲染输入区域的系统标签', () => {
@@ -91,12 +86,6 @@ describe('QrCodePage', () => {
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
   });
 
-  it('应该渲染双翼响应式卡片网格布局', () => {
-    const { container } = render(<QrCodePage />);
-    const gridContainer = container.querySelector('.grid');
-    expect(gridContainer).toBeInTheDocument();
-  });
-
   it('输入态应该显示生成按钮', () => {
     render(<QrCodePage />);
     const generateButton = screen.getByText('生成二维码');
@@ -128,20 +117,40 @@ describe('QrCodePage', () => {
     expect(screen.getByText('原始文本')).toBeInTheDocument();
     expect(screen.getByText('编辑')).toBeInTheDocument();
     expect(screen.queryByText('生成二维码')).not.toBeInTheDocument();
+    // 预览态应该显示二维码
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
   });
 
-  it('预览态应该显示保存的文本', () => {
+  it('预览态应该显示截断的文本', () => {
     render(<QrCodePage />);
 
-    // 输入文本
+    // 输入长文本
+    const longText =
+      'https://example.com/very/long/path/that/should/be/truncated/in/the/preview/because/it/exceeds/the/maximum/length';
     const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
-    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+    fireEvent.change(textarea, { target: { value: longText } });
 
     // 点击生成按钮
     fireEvent.click(screen.getByText('生成二维码'));
 
-    // 验证显示保存的文本
-    expect(screen.getByText('https://example.com')).toBeInTheDocument();
+    // 验证显示截断的文本（100字符 + "..."）
+    const truncatedText = longText.slice(0, 100) + '...';
+    expect(screen.getByText(truncatedText)).toBeInTheDocument();
+  });
+
+  it('预览态应该显示完整的短文本', () => {
+    render(<QrCodePage />);
+
+    // 输入短文本
+    const shortText = 'https://example.com';
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: shortText } });
+
+    // 点击生成按钮
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 验证显示完整文本
+    expect(screen.getByText(shortText)).toBeInTheDocument();
   });
 
   it('点击编辑按钮应该返回输入态', () => {
@@ -159,6 +168,8 @@ describe('QrCodePage', () => {
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
     expect(screen.getByText('生成二维码')).toBeInTheDocument();
     expect(screen.queryByText('编辑')).not.toBeInTheDocument();
+    // 输入态应该隐藏二维码预览
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
   it('返回编辑态应该保留上次输入的内容', () => {
diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
index 76bfdca..a21b692 100644
--- a/src/pages/QrCode/components/GeneratePanel.tsx
+++ b/src/pages/QrCode/components/GeneratePanel.tsx
@@ -7,6 +7,9 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
+/** 文本预览的最大显示字符数 */
+const TEXT_PREVIEW_MAX_LENGTH = 100;
+
 export default function GeneratePanel() {
   const { t } = useI18n('qrCode');
   const {
@@ -21,60 +24,40 @@ export default function GeneratePanel() {
   const isInputStep = generatorState.step === 'input';
   const hasText = generatorState.textToEncode.trim().length > 0;
 
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
-      {/* 左侧：输入态显示输入框，预览态显示文本预览 */}
-      <div
-        className={cn(
-          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
-          isInputStep && 'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
-        )}
-      >
-        <div className="flex flex-col space-y-2.5 h-full">
-          <div className="flex items-center justify-between">
+  /** 截断文本用于预览显示 */
+  const getTruncatedText = (text: string) => {
+    if (text.length <= TEXT_PREVIEW_MAX_LENGTH) return text;
+    return text.slice(0, TEXT_PREVIEW_MAX_LENGTH) + '...';
+  };
+
+  // 输入态：只显示输入框和生成按钮
+  if (isInputStep) {
+    return (
+      <div className="w-full select-none p-0.5">
+        <div
+          className={cn(
+            'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
+            'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
+          )}
+        >
+          <div className="flex flex-col space-y-2.5">
             <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-              {isInputStep ? t('qrCode:urlInputLabel') : t('qrCode:textPreviewLabel')}
+              {t('qrCode:urlInputLabel')}
             </Label>
 
-            {/* 预览态显示编辑按钮 */}
-            {!isInputStep && (
-              <Button variant="ghost" size="sm" onClick={backToEdit} className="h-7 px-2 text-xs">
-                <Pencil className="w-3 h-3 mr-1" />
-                {t('qrCode:editButton')}
-              </Button>
-            )}
-          </div>
+            <TextInputArea
+              value={generatorState.textToEncode}
+              onChange={setTextToEncode}
+              placeholder={t('qrCode:urlInputPlaceholder')}
+              showCount={true}
+              showClear={true}
+              allowCopy={false}
+              minRows={6}
+              maxRows={12}
+              externalError={generatorState.inputError || undefined}
+              onClear={() => setTextToEncode('')}
+            />
 
-          <div className="flex-1 min-h-0">
-            {isInputStep ? (
-              /* 输入态：可编辑的输入框 */
-              <TextInputArea
-                value={generatorState.textToEncode}
-                onChange={setTextToEncode}
-                placeholder={t('qrCode:urlInputPlaceholder')}
-                showCount={true}
-                showClear={true}
-                allowCopy={false}
-                minRows={6}
-                maxRows={12}
-                externalError={generatorState.inputError || undefined}
-                onClear={() => setTextToEncode('')}
-              />
-            ) : (
-              /* 预览态：只读文本预览 */
-              <div
-                className="h-full min-h-[150px] p-3 rounded-md border border-input bg-muted/50 overflow-auto"
-                title={generatorState.savedText}
-              >
-                <p className="text-sm text-foreground whitespace-pre-wrap break-all">
-                  {generatorState.savedText}
-                </p>
-              </div>
-            )}
-          </div>
-
-          {/* 输入态显示生成按钮 */}
-          {isInputStep && (
             <Button
               onClick={confirmGenerate}
               disabled={!hasText || generatorState.generating}
@@ -92,19 +75,40 @@ export default function GeneratePanel() {
                 </>
               )}
             </Button>
-          )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 预览态：显示文本预览 + 二维码
+  return (
+    <div className="w-full select-none p-0.5 space-y-4">
+      {/* 文本预览区域 */}
+      <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-4">
+        <div className="flex items-center justify-between mb-2">
+          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
+            {t('qrCode:textPreviewLabel')}
+          </Label>
+          <Button variant="ghost" size="sm" onClick={backToEdit} className="h-7 px-2 text-xs">
+            <Pencil className="w-3 h-3 mr-1" />
+            {t('qrCode:editButton')}
+          </Button>
+        </div>
+        <div
+          className="text-sm text-foreground bg-muted/50 rounded-md p-3 cursor-default"
+          title={generatorState.savedText}
+        >
+          {getTruncatedText(generatorState.savedText)}
         </div>
       </div>
 
-      {/* 右侧：二维码预览区域 */}
-      <div className="flex flex-col h-full">
-        <QrCodePreview
-          qrCodeDataUrl={generatorState.qrCodeDataUrl}
-          onDownload={downloadQrCode}
-          onCopy={copyQrCode}
-          placeholderText={isInputStep ? t('qrCode:generateFirstHint') : undefined}
-        />
-      </div>
+      {/* 二维码预览区域 */}
+      <QrCodePreview
+        qrCodeDataUrl={generatorState.qrCodeDataUrl}
+        onDownload={downloadQrCode}
+        onCopy={copyQrCode}
+      />
     </div>
   );
 }

From 9458d62a99f8d81914246d1dcf6c1cfe9c8056f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:38:23 +0800
Subject: [PATCH 66/71] =?UTF-8?q?feat(qrcode):=20=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BC=A0=E5=85=A5URL=E6=97=B6=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E7=94=9F=E6=88=90=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 右键菜单传入URL时直接生成二维码，跳转到预览态
- 保留手动输入文本并点击生成按钮的功能
- 优化用户体验，简化操作流程
---
 src/pages/QrCode/hooks/useQrCode.ts | 116 +++++++++++++++++++++++++---
 1 file changed, 104 insertions(+), 12 deletions(-)

diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index f608575..aa5217b 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import QRious from 'qrious';
 import { toast } from 'sonner';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
@@ -7,6 +7,24 @@ import { useI18n } from '@/utils/chromeI18n';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
+/** 防抖延迟时间（毫秒） */
+const DEBOUNCE_DELAY = 500;
+
+/** 检测文本是否为URL格式 */
+function isUrl(text: string): boolean {
+  const trimmed = text.trim();
+  if (!trimmed) return false;
+
+  // 检查是否以 http:// 或 https:// 开头
+  if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+    return true;
+  }
+
+  // 检查是否为域名格式（包含.且不以特殊字符开头）
+  const domainPattern = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z]{2,})+([/:].*)?$/;
+  return domainPattern.test(trimmed);
+}
+
 /** 生成二维码的核心逻辑 */
 function generateQrCodeDataUrl(text: string): string {
   const trimmedText = text.trim();
@@ -58,11 +76,62 @@ export function useQrCode(): QrCodeContextValue {
     dragging: false,
   });
 
-  const setTextToEncode = useCallback((text: string) => {
-    setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // 清除防抖定时器
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
   }, []);
 
-  /** 显式触发生成二维码并切换到预览态 */
+  /** 自动检测URL并生成二维码 */
+  const autoGenerateIfUrl = useCallback(
+    (text: string) => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      if (!isUrl(text)) {
+        return;
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
+
+        const qrCodeDataUrl = generateQrCodeDataUrl(text);
+
+        if (qrCodeDataUrl) {
+          setGeneratorState((prev) => ({
+            ...prev,
+            step: 'preview',
+            savedText: text.trim(),
+            qrCodeDataUrl,
+            generating: false,
+          }));
+        } else {
+          setGeneratorState((prev) => ({
+            ...prev,
+            generating: false,
+            inputError: t('qrCode:generateError'),
+          }));
+        }
+      }, DEBOUNCE_DELAY);
+    },
+    [t],
+  );
+
+  const setTextToEncode = useCallback(
+    (text: string) => {
+      setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
+      autoGenerateIfUrl(text);
+    },
+    [autoGenerateIfUrl],
+  );
+
+  /** 手动触发生成二维码（用于非URL文本） */
   const confirmGenerate = useCallback(() => {
     const text = generatorState.textToEncode.trim();
 
@@ -97,6 +166,9 @@ export function useQrCode(): QrCodeContextValue {
 
   /** 返回编辑态，保留上次输入内容 */
   const backToEdit = useCallback(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
     setGeneratorState((prev) => ({
       ...prev,
       step: 'input',
@@ -106,16 +178,36 @@ export function useQrCode(): QrCodeContextValue {
     }));
   }, []);
 
+  /** 右键菜单传入URL时，自动生成二维码 */
   const handleContextMenuData = useCallback((payload: string) => {
     setMode('generate');
-    setGeneratorState((prev) => ({
-      ...prev,
-      step: 'input',
-      textToEncode: payload,
-      savedText: '',
-      qrCodeDataUrl: '',
-      inputError: '',
-    }));
+
+    // 直接生成二维码，无需等待
+    const qrCodeDataUrl = generateQrCodeDataUrl(payload);
+
+    if (qrCodeDataUrl) {
+      // 生成成功，直接跳转到预览态
+      setGeneratorState((prev) => ({
+        ...prev,
+        step: 'preview',
+        textToEncode: payload,
+        savedText: payload.trim(),
+        qrCodeDataUrl,
+        generating: false,
+        inputError: '',
+      }));
+    } else {
+      // 生成失败，停留在输入态，显示文本供用户编辑
+      setGeneratorState((prev) => ({
+        ...prev,
+        step: 'input',
+        textToEncode: payload,
+        savedText: '',
+        qrCodeDataUrl: '',
+        generating: false,
+        inputError: '',
+      }));
+    }
   }, []);
 
   useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });

From a0345b384df1725c2c8232983a6db7735c1f95ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:46:47 +0800
Subject: [PATCH 67/71] =?UTF-8?q?style(qrcode):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=80=81=E5=B8=83=E5=B1=80=E9=80=82=E9=85=8D?=
 =?UTF-8?q?popup=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整文本预览区域高度，单行显示截断文本
- 缩小二维码图片尺寸（56x56 -> 48x48）
- 减少内边距和间距，更紧凑的布局
- 确保完整显示在popup窗口中无需滚动
---
 src/components/QrCodePreview.tsx              | 24 +++++++++----------
 src/pages/QrCode/__tests__/index.test.tsx     |  4 ++--
 src/pages/QrCode/components/GeneratePanel.tsx | 18 +++++++-------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/QrCodePreview.tsx b/src/components/QrCodePreview.tsx
index 8c3da70..f96a8a0 100644
--- a/src/components/QrCodePreview.tsx
+++ b/src/components/QrCodePreview.tsx
@@ -46,34 +46,34 @@ const QrCodePreview = ({
   return (
     <div
       className={cn(
-        'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
+        'flex flex-col justify-center items-center border border-input rounded-xl p-4 bg-muted/40',
         className,
       )}
       {...props}
     >
       <div className="flex flex-col items-center w-full max-w-xs">
         {/*
-          2. 二维码容器适配：
+          二维码容器适配：
           在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
-          通过裹一层 bg-white 和 p-3，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
+          通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
         */}
-        <div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
+        <div className="p-2 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"
+            className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
           />
         </div>
 
-        <div className="flex w-full gap-2 mt-5">
-          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
-            <Download className="w-4 h-4 text-muted-foreground" />
-            <span className="truncate">{t('qrCode:downloadButton')}</span>
+        <div className="flex w-full gap-2 mt-3">
+          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
+            <Download className="w-3.5 h-3.5 text-muted-foreground" />
+            <span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
           </Button>
 
-          <Button variant="default" size="sm" onClick={onCopy} className="flex-1">
-            <Copy className="w-4 h-4" />
-            <span className="truncate">{t('qrCode:copyQrButton')}</span>
+          <Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
+            <Copy className="w-3.5 h-3.5" />
+            <span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
           </Button>
         </div>
       </div>
diff --git a/src/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
index 75eac20..eca7ae1 100644
--- a/src/pages/QrCode/__tests__/index.test.tsx
+++ b/src/pages/QrCode/__tests__/index.test.tsx
@@ -133,8 +133,8 @@ describe('QrCodePage', () => {
     // 点击生成按钮
     fireEvent.click(screen.getByText('生成二维码'));
 
-    // 验证显示截断的文本（100字符 + "..."）
-    const truncatedText = longText.slice(0, 100) + '...';
+    // 验证显示截断的文本（80字符 + "..."）
+    const truncatedText = longText.slice(0, 80) + '...';
     expect(screen.getByText(truncatedText)).toBeInTheDocument();
   });
 
diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
index a21b692..b67fb39 100644
--- a/src/pages/QrCode/components/GeneratePanel.tsx
+++ b/src/pages/QrCode/components/GeneratePanel.tsx
@@ -8,7 +8,7 @@ import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 /** 文本预览的最大显示字符数 */
-const TEXT_PREVIEW_MAX_LENGTH = 100;
+const TEXT_PREVIEW_MAX_LENGTH = 80;
 
 export default function GeneratePanel() {
   const { t } = useI18n('qrCode');
@@ -81,29 +81,29 @@ export default function GeneratePanel() {
     );
   }
 
-  // 预览态：显示文本预览 + 二维码
+  // 预览态：显示文本预览 + 二维码（紧凑布局，适配popup窗口）
   return (
-    <div className="w-full select-none p-0.5 space-y-4">
-      {/* 文本预览区域 */}
-      <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-4">
-        <div className="flex items-center justify-between mb-2">
+    <div className="w-full select-none p-0.5 flex flex-col">
+      {/* 文本预览区域（固定高度，单行显示） */}
+      <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
+        <div className="flex items-center justify-between mb-1.5">
           <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
             {t('qrCode:textPreviewLabel')}
           </Label>
-          <Button variant="ghost" size="sm" onClick={backToEdit} className="h-7 px-2 text-xs">
+          <Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
             <Pencil className="w-3 h-3 mr-1" />
             {t('qrCode:editButton')}
           </Button>
         </div>
         <div
-          className="text-sm text-foreground bg-muted/50 rounded-md p-3 cursor-default"
+          className="text-sm text-foreground bg-muted/50 rounded-md px-3 py-2 cursor-default line-clamp-1"
           title={generatorState.savedText}
         >
           {getTruncatedText(generatorState.savedText)}
         </div>
       </div>
 
-      {/* 二维码预览区域 */}
+      {/* 二维码预览区域（自适应剩余空间） */}
       <QrCodePreview
         qrCodeDataUrl={generatorState.qrCodeDataUrl}
         onDownload={downloadQrCode}

From 306600a35ca43a75ba7b7699ba4366384657b97a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:51:48 +0800
Subject: [PATCH 68/71] =?UTF-8?q?refactor(qrcode):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E8=BD=AC=E6=96=87=E6=9C=AC=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E4=B8=8E=E6=96=87=E6=9C=AC=E8=BD=AC=E4=BA=8C?=
 =?UTF-8?q?=E7=BB=B4=E7=A0=81=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 未上传图片时只显示上传区域
- 上传图片后显示小图预览 + 解析结果
- 添加重新上传按钮
- 解析结果文本限制显示长度
- 新增国际化文案（已上传图片、重新上传、解析中等）
- 适配popup窗口紧凑布局
---
 public/_locales/zh/messages.json           | 16 ++++
 src/pages/QrCode/components/ParsePanel.tsx | 85 ++++++++++++++++++----
 2 files changed, 85 insertions(+), 16 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 0addc30..83eb2db 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -600,6 +600,22 @@
     "message": "生成二维码失败，请重试",
     "description": "Translation key: qrCode_generateError"
   },
+  "qrCode_uploadedImage": {
+    "message": "已上传图片",
+    "description": "Translation key: qrCode_uploadedImage"
+  },
+  "qrCode_reuploadButton": {
+    "message": "重新上传",
+    "description": "Translation key: qrCode_reuploadButton"
+  },
+  "qrCode_parsing": {
+    "message": "解析中...",
+    "description": "Translation key: qrCode_parsing"
+  },
+  "qrCode_resultPlaceholder": {
+    "message": "解析结果将显示在此处",
+    "description": "Translation key: qrCode_resultPlaceholder"
+  },
   "rightClickRestorer_loading": {
     "message": "正在加载...",
     "description": "Translation key: rightClickRestorer_loading"
diff --git a/src/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
index a0a2aa6..115ef1c 100644
--- a/src/pages/QrCode/components/ParsePanel.tsx
+++ b/src/pages/QrCode/components/ParsePanel.tsx
@@ -1,16 +1,30 @@
 import { useCallback, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
 import { toast } from 'sonner';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
 import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
+import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
+/** 解析结果文本的最大显示字符数 */
+const RESULT_PREVIEW_MAX_LENGTH = 80;
+
 export default function ParsePanel() {
   const { t } = useI18n('qrCode');
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
+  const hasFile = parserState.selectedFile !== null;
+  const hasResult = parserState.decodedResult.length > 0;
+
+  /** 截断文本用于预览显示 */
+  const getTruncatedText = (text: string) => {
+    if (text.length <= RESULT_PREVIEW_MAX_LENGTH) return text;
+    return text.slice(0, RESULT_PREVIEW_MAX_LENGTH) + '...';
+  };
+
   // 全局粘贴事件监听
   const handlePaste = useCallback(
     async (e: ClipboardEvent) => {
@@ -54,9 +68,10 @@ export default function ParsePanel() {
     };
   }, [handlePaste]);
 
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
-      <div className="flex flex-col h-full">
+  // 未上传图片：只显示上传区域
+  if (!hasFile) {
+    return (
+      <div className="w-full select-none p-0.5">
         <ImageUploader
           selectedFile={parserState.selectedFile}
           onFileChange={handleFileChange}
@@ -67,30 +82,68 @@ export default function ParsePanel() {
           onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
         />
       </div>
+    );
+  }
 
+  // 已上传图片：显示图片预览 + 解析结果
+  return (
+    <div className="w-full select-none p-0.5 flex flex-col">
+      {/* 图片预览区域（小图预览） */}
+      <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
+            {t('qrCode:uploadedImage')}
+          </Label>
+          <Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
+            <RefreshCw className="w-3 h-3 mr-1" />
+            {t('qrCode:reuploadButton')}
+          </Button>
+        </div>
+        <div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
+          <img
+            src={parserState.previewUrl}
+            alt="Uploaded QR Code"
+            className="w-16 h-16 object-contain rounded"
+          />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
+            {hasResult && (
+              <p
+                className="text-xs text-muted-foreground mt-1 line-clamp-1"
+                title={parserState.decodedResult}
+              >
+                {getTruncatedText(parserState.decodedResult)}
+              </p>
+            )}
+            {parserState.parsing && (
+              <p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 解析结果区域 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
           'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
         )}
       >
-        <div className="flex flex-col space-y-2.5 h-full">
+        <div className="flex flex-col space-y-2.5">
           <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
             {t('qrCode:resultLabel')}
           </Label>
 
-          <div className="flex-1 min-h-0">
-            <TextInputArea
-              value={parserState.decodedResult}
-              readOnly={true}
-              showClear={false}
-              allowCopy={true}
-              placeholder=""
-              minRows={6}
-              maxRows={12}
-              externalError={parserState.parseError || undefined}
-            />
-          </div>
+          <TextInputArea
+            value={parserState.decodedResult}
+            readOnly={true}
+            showClear={false}
+            allowCopy={true}
+            placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
+            minRows={4}
+            maxRows={8}
+            externalError={parserState.parseError || undefined}
+          />
         </div>
       </div>
     </div>

From 5be15301b534813bc698eaaf1ab9452df27a9221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:58:28 +0800
Subject: [PATCH 69/71] =?UTF-8?q?feat(qrcode):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=BD=AC=E4=BA=8C=E7=BB=B4=E7=A0=81=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加图片类型的右键菜单配置
- 修改 parseContextMenuClick 支持 srcUrl 参数
- 实现图片URL自动解析功能
- 检测图片URL自动切换到解析模式
- 更新测试用例覆盖新功能
- 新增国际化文案
---
 public/_locales/zh/messages.json        |   4 +
 src/pages/QrCode/hooks/useQrCode.ts     | 118 ++++++++++++++++++------
 src/utils/__tests__/contextMenu.test.ts |  43 ++++++++-
 src/utils/contextMenu.ts                |  15 +++
 web-ext.config.ts                       |   2 +-
 5 files changed, 149 insertions(+), 33 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 83eb2db..81dbbb0 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -616,6 +616,10 @@
     "message": "解析结果将显示在此处",
     "description": "Translation key: qrCode_resultPlaceholder"
   },
+  "qrCode_imageToQr": {
+    "message": "图片转二维码",
+    "description": "Translation key: qrCode_imageToQr"
+  },
   "rightClickRestorer_loading": {
     "message": "正在加载...",
     "description": "Translation key: rightClickRestorer_loading"
diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index aa5217b..ed94977 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -25,6 +25,13 @@ function isUrl(text: string): boolean {
   return domainPattern.test(trimmed);
 }
 
+/** 检测URL是否为图片格式 */
+function isImageUrl(url: string): boolean {
+  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico'];
+  const lowerUrl = url.toLowerCase();
+  return imageExtensions.some((ext) => lowerUrl.includes(ext));
+}
+
 /** 生成二维码的核心逻辑 */
 function generateQrCodeDataUrl(text: string): string {
   const trimmedText = text.trim();
@@ -178,37 +185,90 @@ export function useQrCode(): QrCodeContextValue {
     }));
   }, []);
 
-  /** 右键菜单传入URL时，自动生成二维码 */
-  const handleContextMenuData = useCallback((payload: string) => {
-    setMode('generate');
+  /** 从图片URL解析二维码 */
+  const parseQrCodeFromUrl = useCallback(
+    async (imageUrl: string) => {
+      try {
+        setParserState((prev) => ({
+          ...prev,
+          parsing: true,
+          parseError: '',
+          decodedResult: '',
+          previewUrl: imageUrl,
+          selectedFile: null,
+        }));
 
-    // 直接生成二维码，无需等待
-    const qrCodeDataUrl = generateQrCodeDataUrl(payload);
+        // 从URL获取图片并转换为File对象
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+        const file = new File([blob], 'qrcode-image.png', { type: blob.type });
 
-    if (qrCodeDataUrl) {
-      // 生成成功，直接跳转到预览态
-      setGeneratorState((prev) => ({
-        ...prev,
-        step: 'preview',
-        textToEncode: payload,
-        savedText: payload.trim(),
-        qrCodeDataUrl,
-        generating: false,
-        inputError: '',
-      }));
-    } else {
-      // 生成失败，停留在输入态，显示文本供用户编辑
-      setGeneratorState((prev) => ({
-        ...prev,
-        step: 'input',
-        textToEncode: payload,
-        savedText: '',
-        qrCodeDataUrl: '',
-        generating: false,
-        inputError: '',
-      }));
-    }
-  }, []);
+        setParserState((prev) => ({ ...prev, selectedFile: file }));
+
+        const result = await parseQrCodeFromFile(file);
+
+        if (result.success && result.data) {
+          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+          toast.success(t('qrCode:parseSuccess'));
+        } else {
+          const errorMsg = result.error || t('qrCode:noQrDetected');
+          setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+          toast.error(errorMsg);
+        }
+      } catch (error) {
+        console.error('解析图片二维码失败:', error);
+        const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
+        setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+        toast.error(errorMsg);
+      } finally {
+        setParserState((prev) => ({ ...prev, parsing: false }));
+      }
+    },
+    [t],
+  );
+
+  /** 右键菜单传入URL时，自动生成二维码或解析图片 */
+  const handleContextMenuData = useCallback(
+    (payload: string) => {
+      // 检测是否为图片URL，如果是则切换到解析模式
+      if (isImageUrl(payload)) {
+        setMode('parse');
+        void parseQrCodeFromUrl(payload);
+        return;
+      }
+
+      // 非图片URL，生成二维码
+      setMode('generate');
+
+      // 直接生成二维码，无需等待
+      const qrCodeDataUrl = generateQrCodeDataUrl(payload);
+
+      if (qrCodeDataUrl) {
+        // 生成成功，直接跳转到预览态
+        setGeneratorState((prev) => ({
+          ...prev,
+          step: 'preview',
+          textToEncode: payload,
+          savedText: payload.trim(),
+          qrCodeDataUrl,
+          generating: false,
+          inputError: '',
+        }));
+      } else {
+        // 生成失败，停留在输入态，显示文本供用户编辑
+        setGeneratorState((prev) => ({
+          ...prev,
+          step: 'input',
+          textToEncode: payload,
+          savedText: '',
+          qrCodeDataUrl: '',
+          generating: false,
+          inputError: '',
+        }));
+      }
+    },
+    [parseQrCodeFromUrl],
+  );
 
   useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
 
diff --git a/src/utils/__tests__/contextMenu.test.ts b/src/utils/__tests__/contextMenu.test.ts
index 49c09f9..f4b34c1 100644
--- a/src/utils/__tests__/contextMenu.test.ts
+++ b/src/utils/__tests__/contextMenu.test.ts
@@ -12,8 +12,8 @@ describe('contextMenu', () => {
   });
 
   describe('CONTEXT_MENU_CONFIGS', () => {
-    it('应该包含 7 个菜单项配置', () => {
-      expect(CONTEXT_MENU_CONFIGS).toHaveLength(7);
+    it('应该包含 8 个菜单项配置', () => {
+      expect(CONTEXT_MENU_CONFIGS).toHaveLength(8);
     });
 
     it('应该有一个父级菜单项 Testing Tools', () => {
@@ -43,13 +43,22 @@ describe('contextMenu', () => {
       expect(pageMenus).toHaveLength(2);
       expect(pageMenus.map((m) => m.id)).toEqual(['storageCleaner', 'qrCode-page']);
     });
+
+    it('应该有 1 个 image 上下文的子菜单', () => {
+      const imageMenus = CONTEXT_MENU_CONFIGS.filter(
+        (c) => c.contexts[0] === 'image' && c.parentId === 'testing-tools-parent',
+      );
+      expect(imageMenus).toHaveLength(1);
+      expect(imageMenus[0].id).toBe('qrCode-image');
+      expect(imageMenus[0].title).toBe('🖼️ 图片转二维码');
+    });
   });
 
   describe('createAllContextMenus', () => {
     it('应该为每个配置调用 chrome.contextMenus.create', () => {
       createAllContextMenus();
 
-      expect(chrome.contextMenus.create).toHaveBeenCalledTimes(7);
+      expect(chrome.contextMenus.create).toHaveBeenCalledTimes(8);
     });
 
     it('应该使用正确的参数创建菜单项', () => {
@@ -185,5 +194,33 @@ describe('contextMenu', () => {
         data: { featureKey: 'textStatistics', payload: 'short text' },
       });
     });
+
+    it('当点击 qrCode-image 菜单时应返回 qrCode 功能和图片URL', () => {
+      const info = createMockOnClickData({
+        srcUrl: 'https://example.com/image.png',
+      });
+
+      const result = parseContextMenuClick('qrCode-image', info);
+
+      expect(result).toEqual({
+        success: true,
+        data: { featureKey: 'qrCode', payload: 'https://example.com/image.png' },
+      });
+    });
+
+    it('srcUrl 优先于 selectionText 和 pageUrl', () => {
+      const info = createMockOnClickData({
+        srcUrl: 'https://example.com/image.png',
+        selectionText: 'selected text',
+        pageUrl: 'https://example.com',
+      });
+
+      const result = parseContextMenuClick('qrCode-image', info);
+
+      expect(result).toEqual({
+        success: true,
+        data: { featureKey: 'qrCode', payload: 'https://example.com/image.png' },
+      });
+    });
   });
 });
diff --git a/src/utils/contextMenu.ts b/src/utils/contextMenu.ts
index 5452a9f..bde2e3b 100644
--- a/src/utils/contextMenu.ts
+++ b/src/utils/contextMenu.ts
@@ -25,6 +25,7 @@ export const MAX_PAYLOAD_LENGTH = 10000;
 /** 菜单项 ID 到 PageType 的映射（仅处理非常规映射） */
 const MENU_ID_TO_PAGE_TYPE: Record<string, PageType> = {
   'qrCode-page': 'qrCode',
+  'qrCode-image': 'qrCode',
 };
 
 /**
@@ -77,6 +78,12 @@ export const CONTEXT_MENU_CONFIGS: ContextMenuItemConfig[] = [
     contexts: [chrome.contextMenus.ContextType.PAGE],
     parentId: PARENT_MENU_ID,
   },
+  {
+    id: 'qrCode-image',
+    title: '🖼️ 图片转二维码',
+    contexts: [chrome.contextMenus.ContextType.IMAGE],
+    parentId: PARENT_MENU_ID,
+  },
 ];
 
 export function createAllContextMenus(): void {
@@ -96,6 +103,14 @@ export function parseContextMenuClick(
 ): ParseResult {
   const featureKey = getMenuPageType(menuItemId);
 
+  // 处理图片 URL（右键点击图片时）
+  if (info.srcUrl) {
+    return {
+      success: true,
+      data: { featureKey, payload: info.srcUrl },
+    };
+  }
+
   if (info.selectionText) {
     const text = info.selectionText;
 
diff --git a/web-ext.config.ts b/web-ext.config.ts
index 63bf5c3..a36ae97 100644
--- a/web-ext.config.ts
+++ b/web-ext.config.ts
@@ -1,6 +1,6 @@
 import { defineWebExtConfig } from 'wxt';
 
 export default defineWebExtConfig({
-  startUrls: ['https://www.baidu.com', 'chrome://extensions/'],
+  startUrls: ['https://www.bing.com', 'chrome://extensions/'],
   chromiumArgs: ['chrome://extensions/'],
 });

From e919af6857c3802b49ff63ba345a6e6527038167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 21:01:33 +0800
Subject: [PATCH 70/71] =?UTF-8?q?fix(qrcode):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=8F=8F=E8=BF=B0=E5=92=8C=E6=A3=80=E6=B5=8B=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改菜单标题为「解析图片二维码」更准确
- 改进 isImageUrl 函数，支持更多图片URL格式
- 支持 data:image/ 格式
- 支持URL路径中包含图片相关关键词
- 更新国际化文案和测试用例
---
 public/_locales/zh/messages.json        |  2 +-
 src/pages/QrCode/hooks/useQrCode.ts     | 21 +++++++++++++++++++--
 src/utils/__tests__/contextMenu.test.ts |  2 +-
 src/utils/contextMenu.ts                |  2 +-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 81dbbb0..bd41e3e 100644
--- a/public/_locales/zh/messages.json
+++ b/public/_locales/zh/messages.json
@@ -617,7 +617,7 @@
     "description": "Translation key: qrCode_resultPlaceholder"
   },
   "qrCode_imageToQr": {
-    "message": "图片转二维码",
+    "message": "解析图片二维码",
     "description": "Translation key: qrCode_imageToQr"
   },
   "rightClickRestorer_loading": {
diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index ed94977..a88b019 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -27,9 +27,26 @@ function isUrl(text: string): boolean {
 
 /** 检测URL是否为图片格式 */
 function isImageUrl(url: string): boolean {
+  const trimmedUrl = url.trim().toLowerCase();
+
+  // 检查是否为 data:image 格式
+  if (trimmedUrl.startsWith('data:image/')) {
+    return true;
+  }
+
+  // 检查是否包含图片扩展名
   const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico'];
-  const lowerUrl = url.toLowerCase();
-  return imageExtensions.some((ext) => lowerUrl.includes(ext));
+  if (imageExtensions.some((ext) => trimmedUrl.includes(ext))) {
+    return true;
+  }
+
+  // 检查URL路径中是否包含图片相关关键词
+  const imageKeywords = ['/image/', '/img/', '/photo/', '/pic/', '/upload/'];
+  if (imageKeywords.some((keyword) => trimmedUrl.includes(keyword))) {
+    return true;
+  }
+
+  return false;
 }
 
 /** 生成二维码的核心逻辑 */
diff --git a/src/utils/__tests__/contextMenu.test.ts b/src/utils/__tests__/contextMenu.test.ts
index f4b34c1..071619b 100644
--- a/src/utils/__tests__/contextMenu.test.ts
+++ b/src/utils/__tests__/contextMenu.test.ts
@@ -50,7 +50,7 @@ describe('contextMenu', () => {
       );
       expect(imageMenus).toHaveLength(1);
       expect(imageMenus[0].id).toBe('qrCode-image');
-      expect(imageMenus[0].title).toBe('🖼️ 图片转二维码');
+      expect(imageMenus[0].title).toBe('🖼️ 解析图片二维码');
     });
   });
 
diff --git a/src/utils/contextMenu.ts b/src/utils/contextMenu.ts
index bde2e3b..f394619 100644
--- a/src/utils/contextMenu.ts
+++ b/src/utils/contextMenu.ts
@@ -80,7 +80,7 @@ export const CONTEXT_MENU_CONFIGS: ContextMenuItemConfig[] = [
   },
   {
     id: 'qrCode-image',
-    title: '🖼️ 图片转二维码',
+    title: '🖼️ 解析图片二维码',
     contexts: [chrome.contextMenus.ContextType.IMAGE],
     parentId: PARENT_MENU_ID,
   },

From 37bdeb5f3a6436672286c986196e6422946aece5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 21:03:35 +0800
Subject: [PATCH 71/71] =?UTF-8?q?fix(qrcode):=20=E5=8E=BB=E9=99=A4?=
 =?UTF-8?q?=E5=B7=B2=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E9=87=8D=E5=A4=8D=E7=9A=84=E6=96=87=E6=9C=AC=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除图片预览区域中的解析结果文本预览
- 解析结果只在下方的 TextInputArea 中显示
- 避免重复显示相同内容
---
 src/pages/QrCode/components/ParsePanel.tsx | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
index 115ef1c..aed49c8 100644
--- a/src/pages/QrCode/components/ParsePanel.tsx
+++ b/src/pages/QrCode/components/ParsePanel.tsx
@@ -9,21 +9,11 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
-/** 解析结果文本的最大显示字符数 */
-const RESULT_PREVIEW_MAX_LENGTH = 80;
-
 export default function ParsePanel() {
   const { t } = useI18n('qrCode');
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
   const hasFile = parserState.selectedFile !== null;
-  const hasResult = parserState.decodedResult.length > 0;
-
-  /** 截断文本用于预览显示 */
-  const getTruncatedText = (text: string) => {
-    if (text.length <= RESULT_PREVIEW_MAX_LENGTH) return text;
-    return text.slice(0, RESULT_PREVIEW_MAX_LENGTH) + '...';
-  };
 
   // 全局粘贴事件监听
   const handlePaste = useCallback(
@@ -107,14 +97,6 @@ export default function ParsePanel() {
           />
           <div className="flex-1 min-w-0">
             <p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
-            {hasResult && (
-              <p
-                className="text-xs text-muted-foreground mt-1 line-clamp-1"
-                title={parserState.decodedResult}
-              >
-                {getTruncatedText(parserState.decodedResult)}
-              </p>
-            )}
             {parserState.parsing && (
               <p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
             )}