diff --git a/.github/CI.md b/.github/CI.md
new file mode 100644
index 0000000..6ab7abd
--- /dev/null
+++ b/.github/CI.md
@@ -0,0 +1,17 @@
+# CI/CD 配置
+
+## CI 步骤
+
+严格顺序，任一步骤失败则停止并标记 CI 失败：
+
+1. `setup`（安装依赖、`wxt prepare`）
+2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
+3. `build`（仅当步骤 2 全部成功时执行）
+
+## Pre-commit Hook
+
+`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交：
+
+1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
+2. 同一代码文件：运行 `prettier --write`
+3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
diff --git a/.github/CODING_STANDARDS.md b/.github/CODING_STANDARDS.md
index 3035c0f..b19d0a5 100644
--- a/.github/CODING_STANDARDS.md
+++ b/.github/CODING_STANDARDS.md
@@ -265,12 +265,11 @@ const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
 2. 第三方库（图标、UI 库等）
 3. 业务 Provider / Context
 4. 配置 / 存储
-5. i18n
-6. 本地页面组件
-7. UI 组件
-8. 工具函数 / Hook
-9. 类型
-10. 常量
+5. 本地页面组件
+6. UI 组件
+7. 工具函数 / Hook
+8. 类型
+9. 常量
 
 ```typescript
 // 1. React 核心
@@ -284,18 +283,16 @@ import { useThemeMode } from '@/providers/ThemeModeProvider';
 // 4. 配置 / 存储
 import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
-// 5. i18n
-import { useI18n } from '@/utils/chromeI18n';
-// 6. 本地组件
+// 5. 本地组件
 import TextMode from './TextMode';
 import { ZONES } from './constants';
-// 7. UI 组件
+// 6. UI 组件
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { Button } from '@/components/ui/button';
-// 8. 工具函数 / Hook
+// 7. 工具函数 / Hook
 import { cn } from '@/lib/utils';
 import { useStorageState } from '@/utils/useStorageState';
-// 9. 类型
+// 8. 类型
 import type { PageType, StorageSchema } from '@/types/storage';
 ```
 
@@ -559,7 +556,7 @@ describe('SwitchButtonGroup 组件', () => {
 - 使用 `vi.mock()` 进行模块级 Mock
 - 使用 `vi.fn()` 进行函数级 Mock
 - 使用 `vi.useFakeTimers()` 控制时间
-- **避免重复 mock `vitest.setup.ts` 中已有的内容**（chrome API、i18n、matchMedia 等）
+- **避免重复 mock `vitest.setup.ts` 中已有的内容**（chrome API、matchMedia 等）
 
 ```typescript
 // ✅ 模块级 Mock
@@ -657,7 +654,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn { ... }
 
 ```
 src/utils/useStorageState.ts          — Chrome Storage 状态持久化
-src/utils/chromeI18n.ts               — chrome.i18n wrapper 与 useI18n
+src/utils/syncSnapshot.ts             — localStorage 快照读取
 src/utils/useContextMenuData.ts       — 右键菜单数据
 src/utils/useDebounce.ts              — 防抖
 src/pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
@@ -666,52 +663,50 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 
 ---
 
-## 9. 国际化规范
+## 9. UI 文案规范
 
-### 9.1 翻译键格式
+项目已移除 `chrome.i18n`，所有 UI 文案直接在代码中使用中文。
 
-- 使用 Chrome 扩展标准的 `chrome.i18n`，通过 `src/utils/chromeI18n.ts` 暴露 `useI18n`
-- 翻译 key 存放在 `public/_locales/zh_CN/messages.json`
-- 直接 key：`t('dashboard_title')` → 查找 `dashboard_title`
-- 命名空间兼容写法：`t('common:buttons.search')` → 查找 `common_buttons_search`
-- 命名空间参数：`useI18n(['common', 'features'])` 会尝试 `common_key`、`features_key`
+### 9.1 功能元数据
 
-### 9.2 翻译文件结构
-
-```
-public/_locales/zh_CN/messages.json        — Chrome 扩展默认语言包
-wxt.config.ts                              — manifest.default_locale = 'zh_CN'
-```
-
-### 9.3 使用方式
+功能名称与描述在 `config/features.tsx` 的 `FEATURES` 数组中定义：
 
 ```typescript
-// ✅ 页面组件 / 子组件 — 使用 useI18n
-import { useI18n } from '@/utils/chromeI18n';
-
-export default function Index() {
-  const { t } = useI18n('timestamp');
-  return <h1>{t('timestamp_title')}</h1>;
-}
-
-// ✅ 带占位符
-export function NotFoundMessage() {
-  const { t } = useI18n('router');
-  return <p>{t('router_notFoundDescription', { entryPointType: 'popup' })}</p>;
+{
+  key: 'timestamp',
+  label: '时间戳转换',
+  description: '日期与时间戳互转',
+  defaultVisible: true,
+  components: { popup: TimestampPage, sidepanel: TimestampPage, tab: TimestampPage },
 }
 ```
 
-### 9.4 添加新翻译
+Dashboard 卡片、TopBar 搜索等功能从此处读取 `label` / `description`。
 
-1. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome 扩展格式的消息：
-   ```json
-   {
-     "feature_title": { "message": "功能标题" },
-     "feature_description": { "message": "功能描述" }
-   }
-   ```
-2. key 使用下划线分隔，避免点号；`useI18n` 会把 `namespace:key.path` 兼容转换为下划线
-3. `chrome.i18n` 不支持运行时动态切换语言，浏览器语言变化后需要刷新扩展页面
+### 9.2 页面与组件文案
+
+- 页面标题、按钮、提示信息等直接在 JSX 或 `constants.ts` 中写中文
+- 错误消息可在 Hook 中定义，或使用常量映射
+- Toast 通知使用 `sonner` 的 `toast()`，文案写在调用处或常量中
+
+```typescript
+// ✅ 页面组件 — 直接写中文
+export default function Index() {
+  return <h1 className="font-bold text-sm">时间戳转换</h1>;
+}
+
+// ✅ 常量文件 — 可复用文案
+export const ERROR_MESSAGES = {
+  invalidInput: '输入格式无效',
+  conversionFailed: '转换失败',
+} as const;
+```
+
+### 9.3 添加新功能文案
+
+1. 在 `config/features.tsx` 填写 `label` 和 `description`
+2. 在页面组件、`constants.ts` 或 Hook 中编写 UI 文案
+3. 扩展名称与描述在 `wxt.config.ts` 的 `manifest` 中维护
 
 ---
 
@@ -764,6 +759,18 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
 );
 ```
 
+### 10.4 首屏快照与初始化防覆盖
+
+Chrome Storage 读取是异步的。项目通过 `localStorage` 快照（键名 `snapshot/{storageKey}`）提供同步初始值，消除首屏闪烁。
+
+| 模块 | 快照工具 | 防覆盖机制 |
+| ---- | -------- | ---------- |
+| `RouterProvider` | `syncSnapshot.ts` | `canPersistRef`（加载成功后才写入）、`hasUserNavigatedRef`（用户导航后不被 storage 覆盖） |
+| `useStorageState` | `syncSnapshot.ts` | `loadSucceededRef` 或 `userModifiedRef` 为 true 时才写入 |
+| `ThemeModeProvider` | `themeSnapshot.ts` | `hasUserSetMode`（用户切换主题后不被 storage 覆盖） |
+
+新增持久化状态时，应遵循相同模式：同步快照作初始 state → 异步加载 storage → 加载成功或用户修改后才允许写入。
+
 ---
 
 ## 11. 页面开发规范
@@ -846,24 +853,21 @@ export default function DashboardPage() { ... }
 
 #### 组件职责
 
-`index.tsx` 只负责三件事：
+`index.tsx` 只负责两件事：
 
-1. **获取翻译函数**（`useI18n`）
-2. **调用业务 Hook** 获取状态和操作方法
-3. **渲染 UI 布局**（纯展示，无业务逻辑）
+1. **调用业务 Hook** 获取状态和操作方法
+2. **渲染 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 渲染 */}
+      {/* 纯 UI 渲染，文案直接写中文 */}
     </div>
   );
 }
@@ -907,25 +911,22 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
 
 ```typescript
 export function useFeatureName(): UseFeatureNameReturn {
-  // 1. i18n
-  const { t } = useI18n('featureName');
-
-  // 2. 基础 state（useState）
+  // 1. 基础 state（useState）
   const [mode, setMode] = useState<Mode>('default');
   const [input, setInput] = useState('');
 
-  // 3. 持久化 state（useStorageState）
+  // 2. 持久化 state（useStorageState）
   const [pageMode, setPageMode] = useStorageState('feature/pageMode', 'default', isValidMode);
 
-  // 4. 衍生数据（useMemo）— 响应式计算管线
+  // 3. 衍生数据（useMemo）— 响应式计算管线
   const result = useMemo(() => {
     // 自动计算，无需手动点击"转换"按钮
   }, [input, mode]);
 
-  // 5. 事件处理（useCallback）
+  // 4. 事件处理（useCallback）
   const handleAction = useCallback(() => { ... }, [deps]);
 
-  // 6. 副作用（useEffect）— 防抖、初始化、清理
+  // 5. 副作用（useEffect）— 防抖、初始化、清理
   useEffect(() => { ... }, [deps]);
 
   // 7. 右键菜单数据（页面需要时）
@@ -995,7 +996,7 @@ interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
 // ✅ 使用 React.memo + displayName
 const ResultView = React.memo(
   ({ result, mode, showEmptyPlaceholder = false, className, ...props }: ResultViewProps) => {
-    const { t } = useI18n('featureName');
+    // 文案直接写中文或使用 constants
     // ...
   },
 );
@@ -1005,7 +1006,7 @@ export default ResultView;
 
 #### 子组件内可以使用 Hook
 
-子组件可以独立调用 `useI18n`、`useSnackbar` 等全局 Hook，**不需要**通过 props 从父组件传递翻译函数或 toast 方法。
+子组件可以独立调用 `useRouter`、`useThemeMode`、`toast` 等全局 Hook/API，**不需要**通过 props 从父组件传递。
 
 ---
 
@@ -1042,7 +1043,6 @@ 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 (
@@ -1050,8 +1050,8 @@ export default function Index() {
       <SwitchButtonGroup
         value={pageMode}
         options={[
-          { value: 'modeA', label: t('feature:modeA') },
-          { value: 'modeB', label: t('feature:modeB') },
+          { value: 'modeA', label: '模式 A' },
+          { value: 'modeB', label: '模式 B' },
         ]}
         onChange={(v: PageMode) => setPageMode(v)}
         size="small"
@@ -1082,12 +1082,12 @@ export default function Index() {
 新增功能页面时，逐项确认：
 
 1. ✅ 在 `types/storage.d.ts` 添加 `PageType` 联合类型
-2. ✅ 在 `config/features.tsx` 注册 `FEATURES` 配置（key、labelKey、icon、三种渲染模式组件）
+2. ✅ 在 `config/features.tsx` 注册 `FEATURES` 配置（key、label、description、icon、三种渲染模式组件）
 3. ✅ 创建页面目录，使用 `Index` 作为组件名
 4. ✅ 业务逻辑提取到 `useXxx.ts` Hook（index.tsx 不超过 150 行）
 5. ✅ 需要持久化的 UI 状态使用 `useStorageState`
 6. ✅ 常量 ≥3 个时提取到 `constants.ts`
-7. ✅ 在 `public/_locales/zh_CN/messages.json` 添加翻译
+7. ✅ 在页面组件或 `constants.ts` 中编写 UI 文案
 8. ✅ 创建 `__tests__/index.test.tsx` 测试文件
 9. ✅ 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 10. ✅ 运行 `npm run lint && npm run typecheck && npm run test` 全部通过
@@ -1108,7 +1108,7 @@ export default function Index() {
 | `src/utils/`         | 工具函数与服务抽象                                           |
 | `src/types/`         | TypeScript 类型声明                                          |
 | `src/lib/`           | 通用工具函数与生成器库（cn、utils、generators）              |
-| `public/`            | 静态资源与 Chrome `_locales` 语言包                          |
+| `public/`            | 静态资源（图标等）                                           |
 
 ---
 
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
deleted file mode 100644
index 5824d6a..0000000
--- a/.github/copilot-instructions.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# Copilot 指令
-
-基于 WXT 框架的浏览器扩展项目（React 19 + TypeScript），为开发者和测试人员提供效率工具：时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、测试数据生成器等。
-
-## 核心命令
-
-```bash
-npm run dev              # Chrome 开发模式（支持 HMR）
-npm run dev:firefox      # Firefox 开发模式
-npm run build            # Chrome 生产构建
-npm run build:firefox    # Firefox 生产构建
-npm run zip              # 打包 Chrome 扩展（.output/*.zip）
-npm run zip:firefox      # 打包 Firefox 扩展
-npm run lint             # ESLint 检查（--max-warnings=0）
-npm run typecheck        # TypeScript 类型检查（tsc --noEmit）
-npm run test             # 运行全部单元测试（vitest run）
-npm run test:watch       # Vitest 监视模式
-npm run test:coverage    # 带覆盖率的测试
-```
-
-运行单个测试文件：`npx vitest run path/to/file.test.ts`
-
-修改 `package.json` 后需运行 `npm install`（会自动触发 `postinstall` → `wxt prepare` 重新生成 `.wxt/` 类型声明）。
-
-## CI 流水线（GitHub Actions）
-
-严格顺序门控，任一步骤失败则终止：
-
-1. **setup** — 安装依赖，缓存 `node_modules`
-2. **lint**、**typecheck**、**test** — 三者并行运行，全部通过才继续
-3. **build** — Chrome + Firefox 矩阵构建（仅当步骤 2 全部通过时执行）
-
-Pre-commit 钩子（`.husky/pre-commit` → `lint-staged`）：
-
-1. 代码文件（`*.{ts,tsx,js,jsx,mjs}`）：运行 `eslint --fix --max-warnings=0`
-2. 同一代码文件：运行 `prettier --write`
-3. 其他文件（`*.{json,css,scss,md}`）：运行 `prettier --write`
-
-## 项目架构
-
-### 路由（不使用 React Router）
-
-路由完全通过 `config/features.tsx` 中的 `FEATURES` 数组管理。每个功能定义一个 `key`（类型为 `types/storage.d.ts` 中的 `PageType`）和三个懒加载组件，分别对应 `popup`、`sidepanel`、`tab` 三种渲染模式。`providers/RouterProvider.tsx` 中的 `RouterProvider` 根据存储状态渲染当前页面。
-
-存在三套独立的路由作用域：`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute`，各自维护独立的可见页面列表和页面排序。
-
-### 存储
-
-所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中声明，键名使用 kebab-case 格式（如 `app/currentRoute`）。使用 `utils/chromeStorage.ts` 中的类型安全封装（`storageUtil.get/set/remove`）。
-
-Router 同时使用 `chrome.storage.local` 持久化和 `localStorage` 快照来消除首屏闪烁。
-
-### 扩展通信
-
-使用 `@webext-core/messaging`。通信协议在 `utils/messages.ts` 中通过 `ProtocolMap` 定义。使用该模块导出的 `sendMessage` / `onMessage`，不要直接使用原生 `chrome.runtime.sendMessage`。
-
-### 页面组件模式
-
-功能页面遵循 **UI + Hook 分离** 模式，详见 [CODING_STANDARDS.md § 11](./CODING_STANDARDS.md#11-页面开发规范)：
-
-```
-pages/FeatureName/
-├── index.tsx              # UI 组件（纯展示，使用 shadcn/ui 组件）
-├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-└── constants.ts           # 常量定义（可选）
-```
-
-- 页面组件调用 `useI18n('featureName')` 获取翻译函数
-- Hook 负责所有状态管理，通过返回值暴露给页面
-- 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
-
-### 新功能开发清单
-
-1. 在 `types/storage.d.ts` 的 `PageType` 联合类型中添加新成员
-2. 在 `config/features.tsx` 的 `FEATURES` 数组中添加配置（key、翻译键、图标、三种渲染模式组件）
-3. 在 `pages/` 目录创建页面组件（懒加载）：
-   - `index.tsx` — 使用 `useI18n` 的 UI 组件
-   - `useFeatureName.ts` — 业务逻辑 Hook
-   - `constants.ts` — 常量（可选）
-4. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome i18n 翻译
-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-qr、vendor-dnd），无需手动配置。
-
-### 代码风格
-
-- 禁止使用 `any`（测试文件除外）
-- 未使用的变量/参数：使用 `_` 前缀（如 `_unused`）
-- Prettier：100 字符宽、单引号、尾逗号 all、LF 换行
-- ESLint 使用 `typescript-eslint` 的 `projectService: true`
-- 导出模式：页面组件 default export，工具函数/Hook 命名导出，UI 组件 forwardRef + 命名导出
-
-### 测试
-
-- 环境：jsdom
-- 全局变量：`vitest/globals`（describe、it、expect 等无需导入）
-- Setup 文件：`vitest.setup.ts` 自动 mock 以下内容：
-  - `chrome.*` / `browser.*` API（storage、tabs、runtime、cookies 等）
-  - `@/utils/chromeI18n`（从 `public/_locales/zh_CN/messages.json` 加载真实翻译）
-  - `window.matchMedia`
-- 测试文件命名：`__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
-- 使用 `vi.mock()` 进行模块级 mock；避免重复 mock `vitest.setup.ts` 中已有的内容
-- 测试工具：`@testing-library/react` + `@testing-library/user-event`
-
-### 国际化（i18n）
-
-- 使用 Chrome 扩展标准 `chrome.i18n`
-- 默认语言目录：`public/_locales/zh_CN/messages.json`
-- 使用方式：`import { useI18n } from '@/utils/chromeI18n'`
-- 翻译键格式：直接 key（如 `timestamp_title`）；兼容 `namespace:key.path` 并转换为下划线
-- 回退策略：缺失翻译返回 key 本身，并在开发模式下记录 warning
-- 限制：`chrome.i18n` 跟随浏览器语言，不能在运行时动态切换语言
-
-### WXT 生成文件
-
-- `.wxt/` 目录由 `postinstall`（`wxt prepare`）自动生成，包含 TypeScript 类型声明和扩展 tsconfig
-- 生产构建输出到 `.output/` 目录
-- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`
diff --git a/AGENTS.md b/AGENTS.md
index d7a608d..6af87e1 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -16,48 +16,64 @@ npm run typecheck        # tsc --noEmit
 npm run test             # vitest run (单次执行)
 npm run test:watch       # vitest 监视模式
 npm run test:coverage    # 带覆盖率的测试
+npx vitest run path/to/file.test.ts   # 运行单个测试文件
+npx wxt prepare          # 重新生成 .wxt/ 类型声明（npm install 时 postinstall 会自动执行）
 ```
 
-运行单个测试: `npx vitest run path/to/file.test.ts`
+修改 `package.json` 或首次克隆仓库后需执行 `npm install`，会自动触发 `postinstall` → `wxt prepare`。
 
 ## 验证流程
 
-CI 步骤（严格顺序，任一步骤失败则停止并标记 CI 失败）：
+详见 [CI 配置](./.github/CI.md)。本地与 CI 的检查层次如下。
 
-1. `setup`（安装依赖、`wxt prepare`）
-2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
-3. `build`（仅当步骤 2 全部成功时执行）
+### Pre-commit（`.husky/pre-commit`）
 
-Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交）：
+1. 后台运行 `tsc --noEmit`（不阻塞提交，结果输出到 stderr）
+2. 前台运行 `lint-staged`：
+   - 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：`eslint --fix --max-warnings=0`，再 `prettier --write`
+   - 其他文件 (`*.{json,css,scss,md}`)：`prettier --write`
 
-1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
-2. 同一代码文件：运行 `prettier --write`
-3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
+### Pre-push（`.husky/pre-push`）
 
-## WXT 生成文件
+1. 全项目 `tsc --noEmit`（阻塞推送）
+2. 对本次推送相对 upstream（或 `origin/main`）变更的 `*.{ts,tsx,js,jsx,mjs}` 文件运行 `eslint --max-warnings=0`
 
-- `.wxt/` 目录由 `postinstall` 自动执行 `wxt prepare` 生成，包含 TypeScript 类型声明和扩展的 tsconfig。
-- 生产构建输出到 `.output/` 目录。
-- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`。
+### CI（GitHub Actions）
+
+1. `setup` — 安装依赖
+2. 并行 `lint`、`typecheck`（含 `wxt prepare`）、`test`
+3. `build` — Chrome + Firefox 矩阵构建（仅当步骤 2 全部通过）
 
 ## 项目结构
 
 ```
-src/                   # 源代码根目录
-  config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
-  entrypoints/           # 扩展入口点 (popup/, 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）
-  workers/               # Web Worker（数据生成等耗时任务）
-public/                # 静态资源（图标、_locales 等）
+src/                     # 源代码根目录
+  config/features.tsx      # 功能定义（路由 + 元数据的单一事实来源）
+  entrypoints/             # 扩展入口点 (popup/, sidepanel/, background.ts, content.ts)
+  layout/                  # 应用壳层布局（TopBar 导航、搜索、主题切换）
+  pages/                   # 功能页面组件 (懒加载)
+  components/              # 可复用 UI 组件
+  components/ui/           # shadcn/ui 基础组件 (button, dialog, select 等)
+  providers/               # React Context (Router, Theme 等)
+  hooks/                   # 自定义 React Hooks
+  utils/                   # 工具函数与服务抽象
+  types/                   # TypeScript 类型声明
+  lib/                     # 通用工具函数（cn、utils）及数据生成器定义
+  workers/                 # Web Worker（数据生成等耗时任务）
+spec/                    # 功能规格、修复方案与验收标准（见 spec/README.md）
+public/                  # 静态资源（图标等）
+.wxt/                    # wxt prepare 自动生成，含类型声明与扩展 tsconfig（勿手动编辑）
+.output/                 # 生产构建输出目录
 ```
 
+### layout/
+
+应用壳层，与 popup / sidepanel / tab 入口绑定。当前含 `TopBar/`（搜索、主题切换、返回导航、「在标签页打开」），遵循与 `pages/` 相同的 UI + Hook 模式。详见 [layout/README.md](./src/layout/README.md)。
+
+### spec/
+
+功能规格与验收标准文档，重大改动前优先查阅。索引见 [spec/README.md](./spec/README.md)。
+
 ### 页面组件模式
 
 典型功能页面遵循 **UI + Hook 分离** 模式。详见 [CODING_STANDARDS.md § 11](./.github/CODING_STANDARDS.md#11-页面开发规范)。
@@ -73,7 +89,7 @@ src/pages/FeatureName/
 
 - 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
 - Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
-- 子组件可以独立调用 `useI18n` 等全局 Hook
+- 子组件可以独立调用全局 Hook
 - 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
 - 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
 
@@ -112,60 +128,49 @@ src/types/
 ## 关键架构决策
 
 **路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
-渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
+渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 tab（浏览器新标签页，TopBar「在标签页打开」调用 `openExtensionPage('popup.html', { mode: 'tab' })`，由 `getEntryPointType()` 根据 URL 参数 `mode=tab` 识别）。
 每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
 
 **存储**: 所有 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` 添加版本迁移函数，并在测试中覆盖迁移场景。
+使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 快照（`snapshot/{key}`）消除首屏闪烁。
+异步加载完成前禁止写入 storage（`RouterProvider` 的 `canPersistRef`、`useStorageState` 的 `loadSucceededRef`），避免默认值覆盖已有数据。
 
 **通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
 
-**路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
+**路径别名**: `@/` 映射到 `src/` 目录（已在 `.wxt/tsconfig.json` 和 `vitest.config.ts` 中配置）。项目根目录使用 `@@/`。
 
 **浏览器兼容**: 优先使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API。
 
-**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-qr、vendor-dnd 等），无需手动配置。
-
 ## 测试环境
 
 - 环境: jsdom
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
   - `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
-  - `@/utils/chromeI18n` (从 `public/_locales/zh_CN/messages.json` 加载真实翻译)
   - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
 - Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
 - 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
 
-## i18n (chrome.i18n)
+## UI 文案
 
-项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化，通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
+项目已移除 `chrome.i18n`，UI 文案直接在代码中使用中文。
 
-- **翻译文件**: `public/_locales/zh_CN/messages.json`（Chrome 扩展标准格式）
-- **默认语言**: `zh_CN`（在 `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` 无法动态切换语言，语言跟随浏览器设置，切换后需刷新页面
+- **功能元数据**: `src/config/features.tsx` 的 `FEATURES` 数组定义 `label`、`description`（用于 Dashboard 卡片与搜索）
+- **页面文案**: 在组件 JSX、`constants.ts` 或 Hook 中直接写中文
+- **Manifest 文案**: 扩展名称与描述在 `wxt.config.ts` 的 `manifest` 中维护
+- **Toast / 错误提示**: 在 Hook 或 `constants.ts` 中定义，使用 `sonner` 的 `toast()` 展示
 
 ## 新功能开发清单
 
 1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
-2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
+2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、label、description、图标、三种渲染模式的组件）
 3. 在 `src/pages/` 创建页面组件 (懒加载)：
-   - `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
+   - `index.tsx` — UI 组件（纯展示）
    - `useFeatureName.ts` — 业务逻辑 Hook
-   - `constants.ts` — 常量（可选）
-4. 在 `public/_locales/zh_CN/messages.json` 添加翻译
-5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
-6. 添加对应的单元测试
+   - `constants.ts` — 常量定义（可选，≥3 个常量时创建）
+4. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
+5. 添加对应的单元测试
 
 ## 代码规范
 
@@ -174,9 +179,9 @@ src/types/
 - 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
 - UI 组件: 优先使用 `src/components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
 - 图标: 使用 `lucide-react` 图标库
-- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
-- ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
-- **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
+- 格式: Prettier [配置](./.prettierrc)
+- ESLint 使用 `typescript-eslint` 的 `projectService: true`
+- Git Commit: 使用中文描述，遵循 [Conventional Commits 规范](https://www.conventionalcommits.org/zh-hans/v1.0.0/)
 
 ## 关键外部库（非显而易见的）
 
@@ -184,5 +189,4 @@ src/types/
 - `@dnd-kit` — 拖拽排序（用于页面顺序管理和字段列表排序）
 - `qrious` + `qr-scanner` — 二维码生成与解析
 - `dayjs` — 日期处理（时间戳转换）
-- `sonner` — Toast 通知（替代传统 snackbar）
-- Web Worker — 批量数据生成（`src/workers/generator.worker.ts`），避免阻塞 UI 线程
+- `sonner` — Toast 通知
diff --git a/CLAUDE.md b/CLAUDE.md
index 39c76db..43c994c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1 +1 @@
-@AGENT.md
+@AGENTS.md
diff --git a/README.md b/README.md
index 43f7c39..8df269e 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@
 - **UI 组件**: shadcn/ui (基于 Radix UI 的无头组件库)
 - **样式**: Tailwind CSS + class-variance-authority + cn() 工具函数
 - **日期处理**: dayjs (集成 UTC 和 Timezone 插件)
-- **国际化**: Chrome `chrome.i18n` + `public/_locales/zh_CN/messages.json`
+- **UI 文案**: 组件内直接使用中文字符串；功能名称与描述定义在 `src/config/features.tsx`
 - **通信**: @webext-core/messaging
 - **存储**: Chrome Storage API (类型安全封装)
 - **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
@@ -108,7 +108,7 @@
 │   ├── utils/             # 工具函数与服务抽象
 │   ├── types/             # TypeScript 类型声明
 │   └── lib/               # 通用工具函数与生成器库 (cn, utils, generators 等)
-├── public/                # 静态资源 (图标、_locales 本地化资源等)
+├── public/                # 静态资源 (图标等)
 ├── wxt.config.ts          # WXT 框架核心配置
 └── package.json           # 项目元数据与依赖管理
 ```
diff --git a/docs/VISUAL_STYLE_GUIDE.md b/docs/VISUAL_STYLE_GUIDE.md
index ceb8169..dc59cdd 100644
--- a/docs/VISUAL_STYLE_GUIDE.md
+++ b/docs/VISUAL_STYLE_GUIDE.md
@@ -724,17 +724,14 @@ src/
 ```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-4 w-full flex flex-col space-y-4 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>
+        <h4 className="font-bold text-sm tracking-tight">新工具</h4>
       </div>
     </div>
   );
diff --git a/public/README.md b/public/README.md
index 9be021a..e535947 100644
--- a/public/README.md
+++ b/public/README.md
@@ -12,24 +12,9 @@
 | `icon/48.png`  | 48×48 图标（扩展管理页）         |
 | `icon/96.png`  | 96×96 图标                       |
 | `icon/128.png` | 128×128 图标（Chrome Web Store） |
-| `_locales/`    | Chrome 扩展本地化资源            |
-
-## 本地化资源
-
-项目使用 Chrome 扩展标准 `chrome.i18n`，默认语言在 `wxt.config.ts` 中配置为 `zh_CN`。
-
-| 文件/目录                      | 用途                                               |
-| ------------------------------ | -------------------------------------------------- |
-| `_locales/zh_CN/messages.json` | 默认中文语言包，包含功能名、描述、按钮、提示等翻译 |
-
-添加或修改文案时：
-
-- 使用 Chrome 扩展消息格式：`"key": { "message": "文本" }`
-- key 使用下划线分隔，例如 `testDataGenerator_title`
-- 代码中通过 `useI18n` 或 `getMessage` 读取，不要新增 `i18n/locales` 目录
 
 ## 注意事项
 
 - 修改图标后需同步更新 `wxt.config.ts` 中的 manifest 配置
 - 图标格式推荐使用 PNG，确保透明背景
-- 修改 `_locales` 后需确认 `manifest.default_locale` 与语言目录名一致
+- UI 文案不在此目录维护，见 `src/config/features.tsx` 与各页面组件
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
deleted file mode 100644
index 9717b5d..0000000
--- a/public/_locales/zh_CN/messages.json
+++ /dev/null
@@ -1,1304 +0,0 @@
-{
-  "buttons_copy": {
-    "message": "复制",
-    "description": "Translation key: buttons_copy"
-  },
-  "buttons_clear": {
-    "message": "清理",
-    "description": "Translation key: buttons_clear"
-  },
-  "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"
-  },
-  "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"
-  },
-  "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"
-  },
-  "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_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"
-  },
-  "jsonDiff_pageTitle": {
-    "message": "JSON 差异比较",
-    "description": "Translation key: jsonDiff_pageTitle"
-  },
-  "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_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_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_inputPlaceholder": {
-    "message": "输入需要格式化的 JSON...",
-    "description": "Translation key: jsonFormat_inputPlaceholder"
-  },
-  "jsonFormat_sortKeys": {
-    "message": "键名排序",
-    "description": "Translation key: jsonFormat_sortKeys"
-  },
-  "jsonFormat_indentSize": {
-    "message": "缩进",
-    "description": "Translation key: jsonFormat_indentSize"
-  },
-  "jsonFormat_outputLabel": {
-    "message": "格式化结果",
-    "description": "Translation key: jsonFormat_outputLabel"
-  },
-  "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_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_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_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"
-  },
-  "jwt_pageTitle": {
-    "message": "JWT 解析",
-    "description": "Translation key: jwt_pageTitle"
-  },
-  "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"
-  },
-  "qrCode_pageTitle": {
-    "message": "二维码工具",
-    "description": "Translation key: qrCode_pageTitle"
-  },
-  "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_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_qrCodeDownloadSuccess": {
-    "message": "二维码下载成功",
-    "description": "Translation key: qrCode_qrCodeDownloadSuccess"
-  },
-  "qrCode_qrCodeCopySuccess": {
-    "message": "二维码已复制到剪贴板",
-    "description": "Translation key: qrCode_qrCodeCopySuccess"
-  },
-  "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_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_resultLabel": {
-    "message": "解析结果",
-    "description": "Translation key: qrCode_resultLabel"
-  },
-  "qrCode_clickToChange": {
-    "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"
-  },
-  "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"
-  },
-  "qrCode_imageToQr": {
-    "message": "解析图片二维码",
-    "description": "Translation key: qrCode_imageToQr"
-  },
-  "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_loading": {
-    "message": "加载中...",
-    "description": "Translation key: storageCleaner_loading"
-  },
-  "storageCleaner_initializing": {
-    "message": "正在读取站点数据...",
-    "description": "Translation key: storageCleaner_initializing"
-  },
-  "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_noData": {
-    "message": "无数据",
-    "description": "Translation key: storageCleaner_noData"
-  },
-  "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": "站点存储",
-    "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_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_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_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"
-  },
-  "common_buttons_cancel": {
-    "message": "取消",
-    "description": "Translation key: buttons_cancel"
-  },
-  "common_buttons_copy": {
-    "message": "复制",
-    "description": "Translation key: buttons_copy"
-  },
-  "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_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"
-  },
-  "testDataGenerator_title": {
-    "message": "测试数据生成器",
-    "description": "Translation key: testDataGenerator_title"
-  },
-  "testDataGenerator_description": {
-    "message": "自定义字段配置，批量生成测试数据",
-    "description": "Translation key: testDataGenerator_description"
-  },
-  "testDataGenerator_fields": {
-    "message": "字段",
-    "description": "Translation key: testDataGenerator_fields"
-  },
-  "testDataGenerator_addField": {
-    "message": "添加字段",
-    "description": "Translation key: testDataGenerator_addField"
-  },
-  "testDataGenerator_noFields": {
-    "message": "暂无字段",
-    "description": "Translation key: testDataGenerator_noFields"
-  },
-  "testDataGenerator_addFieldHint": {
-    "message": "点击上方按钮添加第一个字段",
-    "description": "Translation key: testDataGenerator_addFieldHint"
-  },
-  "testDataGenerator_unique": {
-    "message": "唯一",
-    "description": "Translation key: testDataGenerator_unique"
-  },
-  "testDataGenerator_fieldName": {
-    "message": "字段名称",
-    "description": "Translation key: testDataGenerator_fieldName"
-  },
-  "testDataGenerator_fieldNamePlaceholder": {
-    "message": "请输入字段名称",
-    "description": "Translation key: testDataGenerator_fieldNamePlaceholder"
-  },
-  "testDataGenerator_fieldDescription": {
-    "message": "字段描述",
-    "description": "Translation key: testDataGenerator_fieldDescription"
-  },
-  "testDataGenerator_fieldDescriptionPlaceholder": {
-    "message": "可选，添加字段说明",
-    "description": "Translation key: testDataGenerator_fieldDescriptionPlaceholder"
-  },
-  "testDataGenerator_required": {
-    "message": "必填",
-    "description": "Translation key: testDataGenerator_required"
-  },
-  "testDataGenerator_nullRate": {
-    "message": "空值率",
-    "description": "Translation key: testDataGenerator_nullRate"
-  },
-  "testDataGenerator_uniqueConstraint": {
-    "message": "唯一性约束",
-    "description": "Translation key: testDataGenerator_uniqueConstraint"
-  },
-  "testDataGenerator_generator": {
-    "message": "数据生成器",
-    "description": "Translation key: testDataGenerator_generator"
-  },
-  "testDataGenerator_generatorParams": {
-    "message": "生成器参数",
-    "description": "Translation key: testDataGenerator_generatorParams"
-  },
-  "testDataGenerator_searchGenerator": {
-    "message": "搜索生成器...",
-    "description": "Translation key: testDataGenerator_searchGenerator"
-  },
-  "testDataGenerator_searchResults": {
-    "message": "搜索结果",
-    "description": "Translation key: testDataGenerator_searchResults"
-  },
-  "testDataGenerator_fieldConfig": {
-    "message": "字段配置",
-    "description": "Translation key: testDataGenerator_fieldConfig"
-  },
-  "testDataGenerator_ruleManagement": {
-    "message": "规则管理",
-    "description": "Translation key: testDataGenerator_ruleManagement"
-  },
-  "testDataGenerator_selectFieldToEdit": {
-    "message": "选择左侧字段进行编辑",
-    "description": "Translation key: testDataGenerator_selectFieldToEdit"
-  },
-  "testDataGenerator_count": {
-    "message": "生成数量",
-    "description": "Translation key: testDataGenerator_count"
-  },
-  "testDataGenerator_format": {
-    "message": "数据格式",
-    "description": "Translation key: testDataGenerator_format"
-  },
-  "testDataGenerator_generate": {
-    "message": "生成数据",
-    "description": "Translation key: testDataGenerator_generate"
-  },
-  "testDataGenerator_cancel": {
-    "message": "取消",
-    "description": "Translation key: testDataGenerator_cancel"
-  },
-  "testDataGenerator_progress": {
-    "message": "已生成 {{current}} / {{total}} 条",
-    "description": "Translation key: testDataGenerator_progress"
-  },
-  "testDataGenerator_estimatedTime": {
-    "message": "预计剩余 {{time}} 秒",
-    "description": "Translation key: testDataGenerator_estimatedTime"
-  },
-  "testDataGenerator_dataPreview": {
-    "message": "数据预览",
-    "description": "Translation key: testDataGenerator_dataPreview"
-  },
-  "testDataGenerator_noData": {
-    "message": "暂无数据",
-    "description": "Translation key: testDataGenerator_noData"
-  },
-  "testDataGenerator_noDataHint": {
-    "message": "配置字段后点击「生成数据」按钮",
-    "description": "Translation key: testDataGenerator_noDataHint"
-  },
-  "testDataGenerator_sampleData": {
-    "message": "示例数据",
-    "description": "Translation key: testDataGenerator_sampleData"
-  },
-  "testDataGenerator_copied": {
-    "message": "已复制",
-    "description": "Translation key: testDataGenerator_copied"
-  },
-  "testDataGenerator_copy": {
-    "message": "复制",
-    "description": "Translation key: testDataGenerator_copy"
-  },
-  "testDataGenerator_pageInfo": {
-    "message": "第 {{current}} / {{total}} 页",
-    "description": "Translation key: testDataGenerator_pageInfo"
-  },
-  "testDataGenerator_prevPage": {
-    "message": "上一页",
-    "description": "Translation key: testDataGenerator_prevPage"
-  },
-  "testDataGenerator_nextPage": {
-    "message": "下一页",
-    "description": "Translation key: testDataGenerator_nextPage"
-  },
-  "testDataGenerator_success": {
-    "message": "生成成功",
-    "description": "Translation key: testDataGenerator_success"
-  },
-  "testDataGenerator_generateSuccess": {
-    "message": "生成完成",
-    "description": "Translation key: testDataGenerator_generateSuccess"
-  },
-  "testDataGenerator_records": {
-    "message": "条数据",
-    "description": "Translation key: testDataGenerator_records"
-  },
-  "testDataGenerator_partialSuccess": {
-    "message": "部分成功",
-    "description": "Translation key: testDataGenerator_partialSuccess"
-  },
-  "testDataGenerator_failed": {
-    "message": "生成失败",
-    "description": "Translation key: testDataGenerator_failed"
-  },
-  "testDataGenerator_totalCount": {
-    "message": "总条数",
-    "description": "Translation key: testDataGenerator_totalCount"
-  },
-  "testDataGenerator_successCount": {
-    "message": "成功",
-    "description": "Translation key: testDataGenerator_successCount"
-  },
-  "testDataGenerator_duration": {
-    "message": "耗时",
-    "description": "Translation key: testDataGenerator_duration"
-  },
-  "testDataGenerator_warnings": {
-    "message": "警告",
-    "description": "Translation key: testDataGenerator_warnings"
-  },
-  "testDataGenerator_moreWarnings": {
-    "message": "还有 {{count}} 条警告",
-    "description": "Translation key: testDataGenerator_moreWarnings"
-  },
-  "testDataGenerator_export": {
-    "message": "导出数据",
-    "description": "Translation key: testDataGenerator_export"
-  },
-  "testDataGenerator_copyJSON": {
-    "message": "复制 JSON",
-    "description": "Translation key: testDataGenerator_copyJSON"
-  },
-  "testDataGenerator_copyCSV": {
-    "message": "复制 CSV",
-    "description": "Translation key: testDataGenerator_copyCSV"
-  },
-  "testDataGenerator_downloadJSON": {
-    "message": "下载 JSON",
-    "description": "Translation key: testDataGenerator_downloadJSON"
-  },
-  "testDataGenerator_downloadCSV": {
-    "message": "下载 CSV",
-    "description": "Translation key: testDataGenerator_downloadCSV"
-  },
-  "testDataGenerator_saveRule": {
-    "message": "保存规则",
-    "description": "Translation key: testDataGenerator_saveRule"
-  },
-  "testDataGenerator_import": {
-    "message": "导入",
-    "description": "Translation key: testDataGenerator_import"
-  },
-  "testDataGenerator_exportRules": {
-    "message": "导出规则",
-    "description": "Translation key: testDataGenerator_exportRules"
-  },
-  "testDataGenerator_ruleCount": {
-    "message": "已保存 {{count}}/{{max}} 条",
-    "description": "Translation key: testDataGenerator_ruleCount"
-  },
-  "testDataGenerator_searchRules": {
-    "message": "搜索规则...",
-    "description": "Translation key: testDataGenerator_searchRules"
-  },
-  "testDataGenerator_saveNewRule": {
-    "message": "保存新规则",
-    "description": "Translation key: testDataGenerator_saveNewRule"
-  },
-  "testDataGenerator_ruleNamePlaceholder": {
-    "message": "规则名称",
-    "description": "Translation key: testDataGenerator_ruleNamePlaceholder"
-  },
-  "testDataGenerator_ruleDescPlaceholder": {
-    "message": "规则描述（可选）",
-    "description": "Translation key: testDataGenerator_ruleDescPlaceholder"
-  },
-  "testDataGenerator_confirm": {
-    "message": "确认",
-    "description": "Translation key: testDataGenerator_confirm"
-  },
-  "testDataGenerator_done": {
-    "message": "完成",
-    "description": "Translation key: testDataGenerator_done"
-  },
-  "testDataGenerator_noSearchResults": {
-    "message": "未找到匹配的规则",
-    "description": "Translation key: testDataGenerator_noSearchResults"
-  },
-  "testDataGenerator_noRules": {
-    "message": "暂无保存的规则",
-    "description": "Translation key: testDataGenerator_noRules"
-  },
-  "testDataGenerator_usedTimes": {
-    "message": "使用 {{count}} 次",
-    "description": "Translation key: testDataGenerator_usedTimes"
-  },
-  "testDataGenerator_load": {
-    "message": "加载",
-    "description": "Translation key: testDataGenerator_load"
-  },
-  "testDataGenerator_duplicate": {
-    "message": "复制",
-    "description": "Translation key: testDataGenerator_duplicate"
-  },
-  "testDataGenerator_delete": {
-    "message": "删除",
-    "description": "Translation key: testDataGenerator_delete"
-  },
-  "testDataGenerator_virtualMode": {
-    "message": "虚拟列表模式（共 $ 行）"
-  },
-  "testDataGenerator_totalRows": {
-    "message": "共 $ 条数据"
-  },
-  "testDataGenerator_ruleSaved": {
-    "message": "规则已保存",
-    "description": "Translation key: testDataGenerator_ruleSaved"
-  },
-  "testDataGenerator_ruleLoaded": {
-    "message": "已加载规则「{{name}}」",
-    "description": "Translation key: testDataGenerator_ruleLoaded"
-  },
-  "testDataGenerator_ruleDeleted": {
-    "message": "规则已删除",
-    "description": "Translation key: testDataGenerator_ruleDeleted"
-  },
-  "testDataGenerator_ruleDuplicated": {
-    "message": "规则已复制",
-    "description": "Translation key: testDataGenerator_ruleDuplicated"
-  },
-  "testDataGenerator_exportSuccess": {
-    "message": "规则已导出",
-    "description": "Translation key: testDataGenerator_exportSuccess"
-  },
-  "testDataGenerator_importSuccess": {
-    "message": "成功导入 {{count}} 条规则",
-    "description": "Translation key: testDataGenerator_importSuccess"
-  },
-  "testDataGenerator_importFailed": {
-    "message": "{{count}} 条规则导入失败",
-    "description": "Translation key: testDataGenerator_importFailed"
-  },
-  "testDataGenerator_confirmDeleteTitle": {
-    "message": "确认删除规则",
-    "description": "Translation key: testDataGenerator_confirmDeleteTitle"
-  },
-  "testDataGenerator_confirmDeleteDescription": {
-    "message": "确定要删除规则「{{name}}」吗？此操作不可撤销。",
-    "description": "Translation key: testDataGenerator_confirmDeleteDescription"
-  },
-  "testDataGenerator_ruleNameDuplicate": {
-    "message": "已存在同名规则，是否覆盖保存？",
-    "description": "Translation key: testDataGenerator_ruleNameDuplicate"
-  },
-  "testDataGenerator_overwrite": {
-    "message": "覆盖",
-    "description": "Translation key: testDataGenerator_overwrite"
-  },
-  "testDataGenerator_edit": {
-    "message": "编辑",
-    "description": "Translation key: testDataGenerator_edit"
-  },
-  "testDataGenerator_ruleUpdated": {
-    "message": "规则已更新",
-    "description": "Translation key: testDataGenerator_ruleUpdated"
-  },
-  "testDataGenerator_editing": {
-    "message": "编辑中",
-    "description": "Translation key: testDataGenerator_editing"
-  },
-  "testDataGenerator_editingRule": {
-    "message": "正在编辑规则「{{name}}」",
-    "description": "Translation key: testDataGenerator_editingRule"
-  },
-  "testDataGenerator_updateRule": {
-    "message": "更新规则",
-    "description": "Translation key: testDataGenerator_updateRule"
-  },
-  "testDataGenerator_saveAs": {
-    "message": "另存为",
-    "description": "Translation key: testDataGenerator_saveAs"
-  },
-  "testDataGenerator_noGeneratorParams": {
-    "message": "此生成器无可配置参数",
-    "description": "Translation key: testDataGenerator_noGeneratorParams"
-  },
-  "testDataGenerator_enabled": {
-    "message": "启用",
-    "description": "Translation key: testDataGenerator_enabled"
-  },
-  "testDataGenerator_disabled": {
-    "message": "禁用",
-    "description": "Translation key: testDataGenerator_disabled"
-  },
-  "testDataGenerator_commaSeparated": {
-    "message": "用逗号分隔多个值",
-    "description": "Translation key: testDataGenerator_commaSeparated"
-  },
-  "testDataGenerator_copySuccess": {
-    "message": "已复制到剪贴板",
-    "description": "Translation key: testDataGenerator_copySuccess"
-  },
-  "testDataGenerator_copyFailed": {
-    "message": "复制失败",
-    "description": "Translation key: testDataGenerator_copyFailed"
-  },
-  "testDataGenerator_fieldNameEmpty": {
-    "message": "字段名称不能为空",
-    "description": "Translation key: testDataGenerator_fieldNameEmpty"
-  },
-  "testDataGenerator_fieldNameDuplicate": {
-    "message": "字段名称已存在",
-    "description": "Translation key: testDataGenerator_fieldNameDuplicate"
-  },
-  "testDataGenerator_fieldNameInvalid": {
-    "message": "字段名称只能包含字母、数字和下划线",
-    "description": "Translation key: testDataGenerator_fieldNameInvalid"
-  },
-  "testDataGenerator_ruleCopySuffix": {
-    "message": "（副本）",
-    "description": "Translation key: testDataGenerator_ruleCopySuffix"
-  }
-}
diff --git a/spec/README.md b/spec/README.md
new file mode 100644
index 0000000..2a417f6
--- /dev/null
+++ b/spec/README.md
@@ -0,0 +1,7 @@
+# Spec 目录
+
+功能规格、修复方案与验收标准文档。
+
+| 文档                                                                             | 状态              | 说明                                                 |
+| -------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
+| [storage-cleaner/indexeddb-fix-plan.md](./storage-cleaner/indexeddb-fix-plan.md) | ✅ Phase 3 已完成 | Storage Cleaner IndexedDB 清理逻辑修复方案与验收标准 |
diff --git a/spec/storage-cleaner/indexeddb-fix-plan.md b/spec/storage-cleaner/indexeddb-fix-plan.md
new file mode 100644
index 0000000..384d3e6
--- /dev/null
+++ b/spec/storage-cleaner/indexeddb-fix-plan.md
@@ -0,0 +1,435 @@
+# Storage Cleaner — IndexedDB 修复方案与验收标准
+
+> 创建时间: 2026-06-25
+> 状态: ✅ Phase 3 已完成（2026-06-25）
+> 关联模块: `src/utils/storageCleaner.ts`
+> 前置审查: Code Review（`storageCleaner.ts` 修改版）
+
+## 背景与目标
+
+本次修复针对 `storageCleaner.ts` 中 IndexedDB 清理逻辑及错误处理链路的审查结论，按优先级分三阶段实施。
+
+| 问题域              | 现状                                           | 目标                              |
+| ------------------- | ---------------------------------------------- | --------------------------------- |
+| IndexedDB fallback  | `store.clear()` 完成后立即 `db.close()`        | 等 transaction commit 后再关闭    |
+| deleteDatabase 超时 | 超时后仍可能触发 `onsuccess`，与 fallback 并发 | 单次删除生命周期内只 resolve 一次 |
+| 部分成功            | 多 DB 部分失败时 `count` 丢失                  | 失败结果保留已清理数量            |
+| 代码结构            | `runScript` / `runCleanScript` 重复            | 统一 executeScript 入口           |
+| 测试                | 缺多 DB 混合场景                               | 补单元测试覆盖                    |
+
+---
+
+## Phase 1 — 合并前必做（P1）
+
+### 1.1 等待 IndexedDB transaction 完成后再关闭连接
+
+#### 问题
+
+`clearObjectStores` 在 `Promise.all(clearStore...)` 结束后立刻 `db.close()`。单个 `clearReq.onsuccess` 只表示 request 完成，transaction 可能尚未 commit，存在清空被回滚的风险。
+
+#### 根因
+
+IndexedDB 规范中，transaction 的持久化以 `transaction.oncomplete` 为准，而非单个 request 的 `onsuccess`。
+
+#### 修复方案
+
+在注入脚本内的 `clearObjectStores` 中，增加 `waitForTransaction` 辅助函数：
+
+```typescript
+const waitForTransaction = (tx: IDBTransaction): Promise<void> =>
+  new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error ?? new Error('Transaction failed'));
+    tx.onabort = () => reject(tx.error ?? new Error('Transaction aborted'));
+  });
+```
+
+修改 `openReq.onsuccess` 分支：
+
+```typescript
+const transaction = db.transaction(storeNames, 'readwrite');
+const errors = (
+  await Promise.all(
+    storeNames.map((storeName) => clearStore(transaction.objectStore(storeName), storeName)),
+  )
+).filter((error): error is string => Boolean(error));
+
+try {
+  await waitForTransaction(transaction);
+} catch {
+  db.close();
+  resolve({
+    success: false,
+    errors: [`清空 IndexedDB 失败（${dbName}），请刷新后重试`],
+  });
+  return;
+}
+
+db.close();
+resolve({ success: errors.length === 0, errors });
+```
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts` — `injectClearIndexedDB` 内 `clearObjectStores`
+
+#### 新增测试
+
+```typescript
+it('should wait for transaction complete before closing db', async () => {
+  // mock: clear onsuccess 先于 transaction.oncomplete 触发
+  // 断言 db.close 在 transaction.oncomplete 之后调用
+});
+```
+
+---
+
+### 1.2 消除 deleteDatabase 超时竞态
+
+#### 问题
+
+超时 `resolve('timeout')` 后，`deleteReq.onsuccess` 仍可能触发；此时 fallback 的 `indexedDB.open` 与进行中的 `deleteDatabase` 可能并发，行为未定义。
+
+#### 修复方案
+
+为每个 DB 删除引入 **单次 settle** 状态：
+
+```typescript
+const waitForDeleteDatabase = (dbName: string, timeoutMs: number) =>
+  new Promise<'deleted' | 'blocked' | 'timeout' | 'error'>((resolve) => {
+    let settled = false;
+    const settle = (status: 'deleted' | 'blocked' | 'timeout' | 'error') => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeout);
+      resolve(status);
+    };
+
+    const deleteReq = indexedDB.deleteDatabase(dbName);
+    const timeout = setTimeout(() => {
+      console.warn('IndexedDB delete timeout:', dbName);
+      settle('timeout');
+    }, timeoutMs);
+
+    deleteReq.onblocked = () => {
+      console.warn('IndexedDB delete blocked:', dbName);
+      settle('blocked');
+    };
+    deleteReq.onsuccess = () => settle('deleted');
+    deleteReq.onerror = () => settle('error');
+  });
+```
+
+#### timeout / blocked 后的 fallback 策略
+
+| 状态      | 行为                                                               |
+| --------- | ------------------------------------------------------------------ |
+| `blocked` | 立即 fallback `clearObjectStores`（页面仍占用连接，open 通常可行） |
+| `timeout` | 先 `await delay(100~200ms)` 再 fallback，降低与 delete 并发概率    |
+| `error`   | 不 fallback，直接报错                                              |
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts` — 替换现有 `new Promise` 删除逻辑
+
+#### 新增测试
+
+```typescript
+it('should ignore late onsuccess after delete timeout', async () => {
+  // deleteBehavior: timeout，5000ms 后 resolve timeout
+  // 6000ms 后再触发 onsuccess
+  // 断言：只走 fallback 一次，count 不因 late onsuccess 重复 +1
+});
+```
+
+---
+
+## Phase 2 — 建议同 PR 或紧接 follow-up（P2）
+
+### 2.1 IndexedDB 部分成功时保留 count
+
+#### 问题
+
+多 DB 场景返回 `{ count: 2, errors: ['...'] }` 时，`runCleanScript` 只返回 `{ success: false, error }`，用户看不到已清理 2 个库。
+
+#### 修复方案（推荐）
+
+扩展失败分支类型，可选 `count`：
+
+```typescript
+// src/types/storage.d.ts
+export type StorageCleanResult =
+  | { success: true; count: number }
+  | { success: false; error: string; count?: number }; // 部分成功时的已清理数
+```
+
+修改 `runCleanScript`：
+
+```typescript
+if (raw.errors?.length) {
+  const errorMsg = raw.errors.join('\n');
+  const partialHint = raw.count > 0 ? `（已成功清理 ${raw.count} 个数据库，但部分失败）\n` : '';
+  return {
+    success: false,
+    error: partialHint + errorMsg,
+    ...(raw.count > 0 ? { count: raw.count } : {}),
+  };
+}
+```
+
+#### UI 层（可选增强）
+
+`CleaningResult.tsx` 失败时若 `result.indexedDB?.count` 存在，可展示部分成功提示（非必须，error 字符串已含 hint 即可）。
+
+#### 涉及文件
+
+- `src/types/storage.d.ts`
+- `src/utils/storageCleaner.ts` — `runCleanScript`
+- `src/utils/__tests__/storageCleaner.test.ts`
+- （可选）`src/pages/StorageCleaner/components/CleaningResult.tsx`
+
+#### 新增测试
+
+```typescript
+it('should preserve partial count when some IndexedDB databases fail', async () => {
+  // 3 个 DB：2 成功删除，1 blocked 且 fallback 失败
+  // expect: success false, count 2, error 含「已成功清理 2 个」
+});
+```
+
+---
+
+### 2.2 统一 executeScript 调用入口
+
+#### 问题
+
+`runScript` 与 `runCleanScript` 各自调用 `browser.scripting.executeScript`，行为不一致（吞错 vs 抛错）。
+
+#### 修复方案
+
+抽取底层函数：
+
+```typescript
+type ExecuteScriptMode = 'fallback' | 'throw';
+
+async function executeInTab<T>(
+  tabId: number,
+  func: () => T | Promise<T>,
+  options: { errorLabel: string; mode: 'fallback'; fallback: T },
+): Promise<T>;
+async function executeInTab<T>(
+  tabId: number,
+  func: () => T | Promise<T>,
+  options: { errorLabel: string; mode: 'throw' },
+): Promise<T>;
+async function executeInTab<T>(...) {
+  try {
+    const [result] = await browser.scripting.executeScript({ target: { tabId }, func });
+    return (result?.result as T) ?? (options.mode === 'fallback' ? options.fallback : undefined as T);
+  } catch (error) {
+    console.error(`Failed to ${options.errorLabel}:`, error);
+    if (options.mode === 'throw') throw error;
+    return options.fallback;
+  }
+}
+```
+
+- `runScript` → `executeInTab(..., { mode: 'fallback', fallback })`
+- `runCleanScript` → `executeInTab(..., { mode: 'throw' })` + 结果解析
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts`
+
+#### 验收
+
+现有 11 个测试全部通过，无行为回归。
+
+---
+
+### 2.3 错误信息分隔符统一
+
+#### 问题
+
+`runCleanScript` 用 `'; '` 拼接，`clearStorage` 的 `result.error` 用 `'\n'`，UI 用 `break-all` 展示，多错误时可读性不一致。
+
+#### 修复方案
+
+IndexedDB 内部多错误统一改为 `'\n'`：
+
+```typescript
+error: raw.errors.join('\n');
+```
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts`
+- 相关测试断言（若有 `'; '` 期望）
+
+---
+
+### 2.4 补充多 DB 混合场景测试
+
+| 用例               | 输入                           | 期望                                         |
+| ------------------ | ------------------------------ | -------------------------------------------- |
+| 全部成功           | 3 DB，均 delete success        | `success: true, count: 3`                    |
+| 部分 fallback 成功 | 2 success + 1 blocked→clear OK | `success: true, count: 3`                    |
+| 部分失败           | 2 success + 1 error            | `success: false, count: 2, error 含失败库名` |
+| 空库列表           | `databases()` 返回 `[]`        | `success: true, count: 0`                    |
+
+#### 涉及文件
+
+- `src/utils/__tests__/storageCleaner.test.ts`
+- 扩展 `createIndexedDBMock` 支持 per-db 不同 `deleteBehavior`
+
+---
+
+## Phase 3 — 可选优化（P3）
+
+### 3.1 超时常量提升到模块级
+
+```typescript
+// src/utils/storageCleaner.ts 或 src/pages/StorageCleaner/constants.ts
+const INDEXED_DB_DELETE_TIMEOUT_MS = 5000;
+const INDEXED_DB_CLEAR_STORE_TIMEOUT_MS = 5000;
+```
+
+注入脚本通过闭包引用（executeScript 会序列化 func，常量需在 func 外部定义并 capture，或仍写在 func 内但从模块常量赋值）。
+
+### 3.2 IndexedDB 逻辑拆分（长期）
+
+将 `clearObjectStores`、`waitForDeleteDatabase` 等抽到 `src/utils/indexedDbCleaner.ts` 的纯函数，注入层只做：
+
+```typescript
+async () => clearAllIndexedDBs(INDEXED_DB_DELETE_TIMEOUT_MS);
+```
+
+便于单测，不依赖 `mockExecuteScriptEval` 间接执行注入函数。工作量大，建议单独 PR。
+
+---
+
+## 实施顺序
+
+```mermaid
+flowchart TD
+  A[1.1 transaction.oncomplete] --> B[1.2 delete settle 防竞态]
+  B --> C[2.4 补多 DB 测试]
+  C --> D[2.1 部分成功 count]
+  D --> E[2.2 统一 executeInTab]
+  E --> F[2.3 错误分隔符]
+  F --> G[3.x 可选重构]
+```
+
+| 阶段    | 预估工作量 | 风险             |
+| ------- | ---------- | ---------------- |
+| Phase 1 | 0.5~1 天   | 低，逻辑局部     |
+| Phase 2 | 0.5~1 天   | 中，涉及类型扩展 |
+| Phase 3 | 1~2 天     | 低，可延后       |
+
+---
+
+## 验收标准
+
+### A. 自动化（CI 必须通过）
+
+```bash
+npm run test -- src/utils/__tests__/storageCleaner.test.ts
+npm run typecheck
+npm run lint
+```
+
+| 编号 | 标准                                                                           |
+| ---- | ------------------------------------------------------------------------------ |
+| A-1  | 全部单元测试通过，新增测试 ≥ 3（transaction 顺序、late onsuccess、多 DB 混合） |
+| A-2  | `tsc --noEmit` 无错误；若扩展 `StorageCleanResult`，所有引用处类型正确         |
+| A-3  | ESLint `--max-warnings=0` 通过                                                 |
+
+---
+
+### B. 功能行为
+
+| 编号 | 场景                                                 | 期望结果                                                                      |
+| ---- | ---------------------------------------------------- | ----------------------------------------------------------------------------- |
+| B-1  | 单 DB，`deleteDatabase` 成功                         | `indexedDB: { success: true, count: 1 }`，`overallSuccess: true`              |
+| B-2  | 单 DB，`deleteDatabase` blocked，fallback clear 成功 | `success: true, count: 1`；transaction 在 `oncomplete` 后 `db.close`          |
+| B-3  | 单 DB，delete 超时 5s，fallback clear 成功           | 5s 内进入 fallback；不因 late `onsuccess` 重复计数                            |
+| B-4  | fallback 中某 store clear hang 5s                    | `success: false`，error 含 `dbName/storeName`                                 |
+| B-5  | 3 DB：2 成功 + 1 失败                                | `success: false`，`count: 2`（Phase 2.1 后），error 含失败库名与部分成功提示  |
+| B-6  | `executeScript` 注入失败                             | `success: false`，**不得** `{ success: true, count: 0 }`                      |
+| B-7  | localStorage 成功 + cookies 失败                     | `overallSuccess: false`，`result.error` 为 `Cookies: ...`（换行分隔多项失败） |
+
+---
+
+### C. 回归与 UI
+
+| 编号 | 标准                                                                                                      |
+| ---- | --------------------------------------------------------------------------------------------------------- |
+| C-1  | `formatCleaningResult` 成功路径不变                                                                       |
+| C-2  | `CleaningResult` 失败时展示 `result.error`；含 `\n` 时多行可读（现有 `leading-relaxed break-all` 可接受） |
+| C-3  | `reloadAfterClean=true` 且 `overallSuccess=false` 时不刷新页面（`useStorageCleaner` 现有逻辑）            |
+| C-4  | Cookie 清理：domain 前导 `.` 剥离逻辑不变                                                                 |
+
+---
+
+### D. 手动验收（扩展环境）
+
+在 Chrome 加载 unpacked extension，选普通 HTTPS 页面：
+
+| 编号 | 步骤                                              | 期望                                                                    |
+| ---- | ------------------------------------------------- | ----------------------------------------------------------------------- |
+| D-1  | 页面写入 localStorage + IndexedDB，仅清 IndexedDB | 成功提示或明确错误；DevTools → Application → IndexedDB 数据为空或库已删 |
+| D-2  | 打开 DevTools 保持 IndexedDB 面板，执行清理       | 若 blocked，显示中文提示；fallback 成功后数据不可见                     |
+| D-3  | 勾选「清理后刷新」且全部成功                      | Toast「清理成功，即将刷新页面」，页面刷新                               |
+| D-4  | 部分失败                                          | 不刷新；结果区红色展示错误详情                                          |
+
+---
+
+### E. 代码质量
+
+| 编号 | 标准                                                               |
+| ---- | ------------------------------------------------------------------ |
+| E-1  | 注入脚本内无重复 `settled` / timeout 逻辑（删除与 clear 各自封装） |
+| E-2  | 错误文案仍为中文，含库名/store 名                                  |
+| E-3  | 无 `any`（测试文件除外）                                           |
+| E-4  | Phase 1 合并后，P1 项在 PR 描述中标注「已修复」并附测试名          |
+
+---
+
+## PR 检查清单
+
+```markdown
+## 修复内容
+
+- [ ] P1: transaction.oncomplete 后再 db.close
+- [ ] P1: deleteDatabase settle 防竞态
+- [ ] P2: 部分成功保留 count（可选）
+- [ ] P2: 多 DB 混合测试
+- [ ] P2: 错误信息 `\n` 分隔（可选）
+
+## 验收
+
+- [ ] npm run test / typecheck / lint 通过
+- [ ] 新增测试覆盖 B-2、B-3、B-5
+- [ ] 手动 D-1 ~ D-4 至少测 D-1、D-3
+```
+
+---
+
+## 风险与边界说明
+
+1. **fallback 清空 ≠ 删除库**：blocked 时只清 object store，库结构仍在；成功 `count` 表示「有效清理动作完成」，需在 UI/文档中说明（可选文案：「数据已清空，数据库结构可能仍存在」）。
+2. **timeout 延迟 fallback**：100~200ms 为经验值，无法完全消除竞态，只能降低概率；完全消除需浏览器不支持 abort delete 的前提下接受 best-effort。
+3. **类型扩展**：`StorageCleanResult` 加可选 `count` 为向后兼容；消费方用 `'count' in result && result.count` 判断即可。
+
+---
+
+## 相关文件索引
+
+| 文件                                                     | 说明                                         |
+| -------------------------------------------------------- | -------------------------------------------- |
+| `src/utils/storageCleaner.ts`                            | 核心清理逻辑                                 |
+| `src/utils/__tests__/storageCleaner.test.ts`             | 单元测试                                     |
+| `src/types/storage.d.ts`                                 | `StorageCleanResult` / `CleaningResult` 类型 |
+| `src/pages/StorageCleaner/constants.ts`                  | 选项标签与键名                               |
+| `src/pages/StorageCleaner/useStorageCleaner.ts`          | 清理流程编排                                 |
+| `src/pages/StorageCleaner/components/CleaningResult.tsx` | 结果展示 UI                                  |
diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 8e0e0f1..0000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 6adf5c0..971e6c2 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Check, Copy } from 'lucide-react';
 import { copyTextToClipboard } from '@/utils/clipboard';
+import { Button, type ButtonProps } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { buttonVariants, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
-import { useI18n } from '@/utils/chromeI18n';
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
   text: string;
@@ -19,7 +18,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   className,
   ...props
 }) => {
-  const { t } = useI18n('common');
   const [copied, setCopied] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -33,33 +31,30 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
     e.stopPropagation();
 
     if (!text) {
-      toast.error(t('messages.copyEmpty'));
+      toast.error('无内容可复制');
       return;
     }
 
     const success = await copyTextToClipboard(text);
     if (success) {
-      toast.success(t('messages.copySuccess'));
+      toast.success('已复制到剪贴板');
       setCopied(true);
       if (timerRef.current) clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => setCopied(false), 1500);
     } else {
-      toast.error(t('messages.copyError'));
+      toast.error('复制失败');
     }
   };
 
   return (
-    <button
+    <Button
       type="button"
       onClick={handleCopy}
-      title={tooltip ?? t('buttons.copy')}
-      aria-label={tooltip ?? t('buttons.copy')}
-      className={cn(
-        buttonVariants({ variant, size }),
-        copied &&
-          'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
-        className,
-      )}
+      title={tooltip ?? '复制'}
+      aria-label={tooltip ?? '复制'}
+      variant={variant}
+      size={size}
+      className={cn(className, copied && 'text-emerald-500')}
       {...props}
     >
       {copied ? (
@@ -67,7 +62,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       ) : (
         <Copy className="h-[1.2em] w-[1.2em]" />
       )}
-    </button>
+    </Button>
   );
 };
 
diff --git a/src/components/DecodeResultPaper.tsx b/src/components/DecodeResultPaper.tsx
deleted file mode 100644
index 3984b0f..0000000
--- a/src/components/DecodeResultPaper.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * DecodeResultPaper
- *
- * FileMode 与 ImageMode 通用的 decode 结果展示组件。
- * 提取了二者 decode 输出区完全一致的结构：
- *   标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
- *
- * FileMode 直接使用，ImageMode 通过 children 传入图片预览。
- */
-import { Download } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { formatFileSize } from '@/utils/base64Converter';
-import { useI18n } from '@/utils/chromeI18n';
-
-interface DecodeResultPaperProps {
-  /** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
-  title: string;
-  /** 解码后推断的 MIME 类型 */
-  mimeType: string;
-  /** 解码后 Blob 的大小（字节） */
-  blobSize: number;
-  /** 当前文件名 */
-  fileName: string;
-  /** 文件名变更回调 */
-  onFileNameChange: (name: string) => void;
-  /** 下载按钮点击回调 */
-  onDownload: () => void;
-  /** 可选的预览内容，ImageMode 用于渲染图片预览 */
-  children?: React.ReactNode;
-}
-
-export default function DecodeResultPaper({
-  title,
-  mimeType,
-  blobSize,
-  fileName,
-  onFileNameChange,
-  onDownload,
-  children,
-}: DecodeResultPaperProps) {
-  const { t } = useI18n('base64Converter');
-
-  return (
-    <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
-      {/* 标题 */}
-      <span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
-
-      {/* 可选预览内容（ImageMode 的图片） */}
-      {children}
-
-      {/* 文件信息 */}
-      <div className="flex gap-4 mb-3">
-        <span className="text-xs text-muted-foreground">
-          {t('inferredMimeType')}: {mimeType}
-        </span>
-        <span className="text-xs text-muted-foreground">
-          {t('decodedSize')}: {formatFileSize(blobSize)}
-        </span>
-      </div>
-
-      {/* 文件名输入 */}
-      <div className="mb-3">
-        <label className="block text-xs font-medium text-muted-foreground mb-1">
-          {t('decodedFileName')}
-        </label>
-        <input
-          type="text"
-          value={fileName}
-          onChange={(e) => onFileNameChange(e.target.value)}
-          className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
-        />
-      </div>
-
-      {/* 下载按钮 */}
-      <Button
-        variant="default"
-        onClick={onDownload}
-        disabled={!fileName.trim()}
-        className="w-full rounded-lg font-bold"
-      >
-        <Download className="mr-2 h-4 w-4" />
-        {t('download')}
-      </Button>
-    </div>
-  );
-}
diff --git a/src/components/EmptyPlaceholder.tsx b/src/components/EmptyPlaceholder.tsx
new file mode 100644
index 0000000..5ffacc1
--- /dev/null
+++ b/src/components/EmptyPlaceholder.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  messageClassName?: string;
+}
+
+const CONTAINER_CLASSES =
+  'rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center select-none p-8 min-h-[120px]';
+
+const MESSAGE_CLASSES =
+  'text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed';
+
+export default function EmptyPlaceholder({
+  children,
+  className,
+  messageClassName,
+  ...props
+}: EmptyPlaceholderProps) {
+  return (
+    <div className={cn(CONTAINER_CLASSES, className)} {...props}>
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <p className={cn(MESSAGE_CLASSES, messageClassName)}>{children}</p>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 1c62b15..81288ce 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,7 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertCircle, RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { getMessage } from '@/utils/chromeI18n';
+import { ErrorFallback } from '@/components/ErrorFallback';
 
 interface Props {
   children: ReactNode;
@@ -39,34 +37,14 @@ class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
-          <div className="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">
-              {getMessage('errorBoundary_title')}
-            </h2>
-            <p className="text-sm text-muted-foreground mb-6">
-              {getMessage('errorBoundary_description')}
-            </p>
-            {this.state.error && (
-              <div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
-                <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="destructive"
-              onClick={this.handleReset}
-              className="rounded-lg font-bold shadow-sm"
-            >
-              <RefreshCw className="mr-2 h-4 w-4" />
-              {getMessage('errorBoundary_refresh')}
-            </Button>
-          </div>
-        </div>
+        <ErrorFallback
+          variant="app"
+          title="糟糕，出了点问题"
+          description="应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。"
+          error={this.state.error}
+          actionLabel="刷新应用"
+          onAction={this.handleReset}
+        />
       );
     }
 
diff --git a/src/components/ErrorFallback.tsx b/src/components/ErrorFallback.tsx
new file mode 100644
index 0000000..637dc81
--- /dev/null
+++ b/src/components/ErrorFallback.tsx
@@ -0,0 +1,94 @@
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export interface ErrorFallbackProps {
+  title: string;
+  description: string;
+  error: Error | null;
+  actionLabel: string;
+  onAction: () => void;
+  variant?: 'app' | 'page';
+  showStack?: boolean;
+  className?: string;
+}
+
+export function ErrorFallback({
+  title,
+  description,
+  error,
+  actionLabel,
+  onAction,
+  variant = 'page',
+  showStack = false,
+  className,
+}: ErrorFallbackProps) {
+  const isApp = variant === 'app';
+  const errorText = error ? (showStack ? error.stack || error.toString() : error.toString()) : null;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center',
+        isApp
+          ? 'mt-16 mx-auto max-w-md'
+          : 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm',
+          !isApp && 'max-w-md w-full',
+        )}
+      >
+        <div
+          className={cn(
+            'flex items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4',
+            isApp ? 'h-16 w-16' : 'h-12 w-12',
+          )}
+        >
+          <AlertCircle className={isApp ? 'h-8 w-8' : 'h-6 w-6'} />
+        </div>
+
+        {isApp ? (
+          <h2 className="text-xl font-extrabold text-destructive mb-2">{title}</h2>
+        ) : (
+          <h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
+        )}
+
+        <p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
+          {description}
+        </p>
+
+        {errorText && (
+          <div
+            className={cn(
+              'rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left border border-border/40',
+              isApp ? 'mb-6 p-4 max-h-[200px] overflow-auto' : 'mb-5 p-3 max-h-40 overflow-y-auto',
+            )}
+          >
+            <pre
+              className={cn(
+                'font-mono whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700',
+                isApp ? 'text-xs' : 'text-[11px] leading-relaxed',
+              )}
+            >
+              {errorText}
+            </pre>
+          </div>
+        )}
+
+        <Button
+          variant="destructive"
+          size={isApp ? 'default' : 'sm'}
+          onClick={onAction}
+          className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
+        >
+          <RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
+          {actionLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/PageErrorBoundary.tsx b/src/components/PageErrorBoundary.tsx
index b483612..2c7f78a 100644
--- a/src/components/PageErrorBoundary.tsx
+++ b/src/components/PageErrorBoundary.tsx
@@ -1,7 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertCircle, RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { getMessage } from '@/utils/chromeI18n';
+import { ErrorFallback } from '@/components/ErrorFallback';
 
 interface Props {
   children: ReactNode;
@@ -40,38 +38,15 @@ class PageErrorBoundary extends Component<Props, State> {
   render() {
     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">
-          <div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 max-w-md w-full shadow-sm">
-            <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">
-              {getMessage('pageErrorBoundary_title')}
-            </h3>
-            <p className="text-xs text-muted-foreground mb-5">
-              {getMessage('pageErrorBoundary_description')}
-            </p>
-
-            {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">
-                  {this.state.error.stack || this.state.error.toString()}
-                </pre>
-              </div>
-            )}
-
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={this.handleRetry}
-              className="font-medium shadow-sm"
-            >
-              <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-              {getMessage('errorBoundary_retry')}
-            </Button>
-          </div>
-        </div>
+        <ErrorFallback
+          variant="page"
+          title="该功能运行异常"
+          description="该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
+          error={this.state.error}
+          actionLabel="重新尝试"
+          onAction={this.handleRetry}
+          showStack
+        />
       );
     }
 
diff --git a/src/components/README.md b/src/components/README.md
index abd1286..c8759a0 100644
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -6,9 +6,9 @@
 
 | 组件                    | 用途                                                                           |
 | ----------------------- | ------------------------------------------------------------------------------ |
-| `TopBar.tsx`            | 顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航               |
 | `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
+| `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                             |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
 | `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
 | `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |
diff --git a/src/components/RouterContainer.tsx b/src/components/RouterContainer.tsx
index a8de5ce..1dbb08a 100644
--- a/src/components/RouterContainer.tsx
+++ b/src/components/RouterContainer.tsx
@@ -1,7 +1,6 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
 import { Suspense } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils';
@@ -11,7 +10,6 @@ const entryPointType = getEntryPointType();
 
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();
-  const { t } = useI18n('common');
 
   const animationClass =
     currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
@@ -43,9 +41,9 @@ export default function RouterContainer() {
               <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
                 <AlertTriangle className="h-6 w-6" />
               </div>
-              <h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
+              <h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
               <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-                {t('router.notFoundDescription', { entryPointType })}
+                {`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
               </p>
             </div>
           )}
diff --git a/src/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx
index 77368d1..b0e425d 100644
--- a/src/components/SwitchButtonGroup.tsx
+++ b/src/components/SwitchButtonGroup.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 export interface SwitchOption<T extends string | number = string> {
@@ -17,6 +18,16 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
   buttonClassName?: string;
 }
 
+const SIZE_CLASSES = {
+  small: 'text-xs h-8 px-2 py-1 rounded-md',
+  medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
+  large: 'text-base h-11 px-4 py-2 rounded-lg',
+} as const;
+
+const SELECTED_CLASSES =
+  'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
+const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
+
 export default function SwitchButtonGroup<T extends string | number = string>({
   value,
   options,
@@ -26,12 +37,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
   buttonClassName,
   ...props
 }: SwitchButtonGroupProps<T>) {
-  const sizeClasses = {
-    small: 'text-xs h-8 px-2 py-1 rounded-md',
-    medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
-    large: 'text-base h-11 px-4 py-2 rounded-lg',
-  };
-
   return (
     <div
       className={cn(
@@ -40,29 +45,22 @@ export default function SwitchButtonGroup<T extends string | number = string>({
       )}
       {...props}
     >
-      {options.map((option) => {
-        const isSelected = value === option.value;
-
-        return (
-          <button
-            key={option.value}
-            type="button"
-            onClick={() => onChange(option.value)}
-            className={cn(
-              'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
-              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
-              'disabled:pointer-events-none disabled:opacity-50',
-              sizeClasses[size],
-              isSelected
-                ? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
-                : 'hover:bg-background/50 hover:text-foreground/80',
-              buttonClassName,
-            )}
-          >
-            {option.label}
-          </button>
-        );
-      })}
+      {options.map((option) => (
+        <Button
+          key={option.value}
+          type="button"
+          variant="ghost"
+          onClick={() => onChange(option.value)}
+          className={cn(
+            'flex-1 transition-all',
+            SIZE_CLASSES[size],
+            value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
+            buttonClassName,
+          )}
+        >
+          {option.label}
+        </Button>
+      ))}
     </div>
   );
 }
diff --git a/src/components/TextInputArea.tsx b/src/components/TextInputArea.tsx
index fa79fab..f1fcaff 100644
--- a/src/components/TextInputArea.tsx
+++ b/src/components/TextInputArea.tsx
@@ -1,9 +1,9 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { X } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
+import { toast } from 'sonner';
 import { CopyButton } from '@/components/CopyButton';
+import { Button } from './ui/button';
 
 export type ValidateRule = {
   validator: (value: string) => boolean;
@@ -44,7 +44,6 @@ export interface TextInputAreaProps extends Omit<
   onClear?: () => void;
 }
 
-// 提炼基础的 ActionButton，全面向 shadcn 核心 Button 样式对齐
 function ActionButton({
   action,
   value,
@@ -114,8 +113,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [error, setError] = useState<string>('');
 
-  const { t } = useI18n('common');
-  const placeholder = placeholderProp ?? t('textInputArea.placeholder');
+  const placeholder = placeholderProp ?? '请输入文本';
 
   const isControlled = controlledValue !== undefined;
   const value = isControlled ? controlledValue : internalValue;
@@ -127,7 +125,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     const textArea = internalRef.current;
     if (!textArea) return;
 
-    // 重置高度计算
     textArea.style.height = 'auto';
 
     const computedMin = minRows * 24;
@@ -159,7 +156,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newVal = e.target.value;
     if (maxLength && newVal.length > maxLength) {
-      const msg = t('charCount', { count: maxLength });
+      const msg = `内容不能超过 ${maxLength} 个字符`;
       setError(msg);
       toast.warning(msg);
       return;
@@ -181,9 +178,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     onChange?.('');
     setError('');
     internalRef.current?.focus();
-    toast.success(t('textInputArea.cleared'));
+    toast.success('已清空');
     onClear?.();
-  }, [isControlled, onChange, onClear, t]);
+  }, [isControlled, onChange, onClear]);
 
   const handleAction = useCallback(
     (action: ToolbarAction) => {
@@ -256,7 +253,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
         {hasBottomBar && (
           <div className="flex h-10 items-center justify-between px-4 bg-muted/30 border-t border-border/50">
-            {/* 左侧自定义动作 */}
             <div className="flex items-center gap-1.5 min-w-0">
               {bottomActions.map((action) => (
                 <ActionButton
@@ -269,32 +265,27 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
               ))}
             </div>
 
-            {/* 右侧系统按钮组 */}
             <div className="flex items-center gap-1.5 ml-auto shrink-0">
               {allowCopy && value && (
-                <CopyButton
-                  text={value}
-                  tooltip={t('textInputArea.copyContent')}
-                  size="sm"
-                  className="h-7 w-7 p-1"
-                />
+                <CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
               )}
               {showClear && value && !disabled && !readOnly && (
-                <button
+                <Button
                   type="button"
                   onClick={handleClear}
-                  aria-label={t('textInputArea.clear')}
-                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  aria-label="清空"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                 >
                   <X className="h-4 w-4" />
-                </button>
+                </Button>
               )}
             </div>
           </div>
         )}
       </div>
 
-      {/* 错误提示 */}
       {displayError && (
         <p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
           {displayError}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
deleted file mode 100644
index 919c1a7..0000000
--- a/src/components/TopBar.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from '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';
-import { storageUtil } from '@/utils/chromeStorage';
-import { openExtensionPage } from '@/utils/chromeTabs';
-import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils';
-
-const SEARCH_HISTORY_LIMIT = 10;
-const SEARCH_HISTORY_DISPLAY = 5;
-
-export default function TopBar() {
-  const { currentPage, goBack, navigateTo } = useRouter();
-  const { mode, setMode } = useThemeMode();
-  const { t } = useI18n(['common', 'features']);
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showResults, setShowResults] = useState(false);
-  const [searchHistory, setSearchHistory] = useState<string[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleOpenInTab = async () => {
-    await openExtensionPage('popup.html', { mode: 'tab' });
-    window.close();
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setShowResults(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    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', [])
-      .then((history) => {
-        if (history) setSearchHistory(history);
-      })
-      .catch((err) => console.error('加载搜索历史失败:', err));
-  }, []);
-
-  const searchResults = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase();
-    if (!query) return [];
-    return FEATURES.filter((f) => {
-      if (f.key === 'dashboard') return false;
-      return (
-        t(f.labelKey).toLowerCase().includes(query) ||
-        t(f.descriptionKey).toLowerCase().includes(query)
-      );
-    });
-  }, [searchQuery, t]);
-
-  const displayedHistory = useMemo(() => {
-    if (searchQuery.trim()) return [];
-    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 (featureKey: string) => {
-    if (!featureKey.trim()) return;
-    const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
-      0,
-      SEARCH_HISTORY_LIMIT,
-    );
-    setSearchHistory(nextHistory);
-    await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
-  };
-
-  const handleSelectFeature = (feature: FeatureConfig) => {
-    navigateTo(feature.key);
-    saveToHistory(feature.key);
-    setSearchQuery('');
-    setShowResults(false);
-  };
-
-  const cycleThemeMode = () => {
-    const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
-    setMode(nextMap[mode]);
-  };
-
-  const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      if (selectedIndex >= 0 && selectedIndex < totalItems) {
-        if (searchQuery.trim()) {
-          handleSelectFeature(searchResults[selectedIndex]);
-        } else {
-          const selected = displayedHistory[selectedIndex];
-          if (selected?.feature) {
-            handleSelectFeature(selected.feature);
-          }
-        }
-      } else if (searchQuery.trim() && searchResults.length > 0) {
-        handleSelectFeature(searchResults[0]);
-      }
-    } else if (e.key === 'Escape') {
-      setShowResults(false);
-      inputRef.current?.blur();
-    }
-  };
-
-  const isDashboard = currentPage === 'dashboard';
-
-  return (
-    <header className="flex h-14 items-center justify-between border-b border-border bg-background px-4 relative z-50">
-      {/* 左侧：返回按钮区 */}
-      <div className="flex w-10 items-center justify-start">
-        {!isDashboard && (
-          <button
-            type="button"
-            onClick={goBack}
-            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" />
-          </button>
-        )}
-      </div>
-
-      {/* 中间：搜索容器 */}
-      <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
-        <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"
-            placeholder={t('common_buttons_search')}
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              setShowResults(true);
-              setSelectedIndex(-1);
-            }}
-            onFocus={() => setShowResults(true)}
-            onKeyDown={handleKeyDown}
-            aria-label={t('common_buttons_search')}
-            className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
-          />
-          {!searchQuery && (
-            <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"
-              onClick={() => {
-                setSearchQuery('');
-                setSelectedIndex(-1);
-              }}
-              aria-label={t('common:buttons.clearSearch')}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
-            >
-              <X className="h-3 w-3" />
-            </button>
-          )}
-        </div>
-
-        {/* 动态联想结果卡片 */}
-        {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-          <div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
-            <ul role="listbox" className="p-1.5">
-              {searchQuery.trim() ? (
-                searchResults.length > 0 ? (
-                  searchResults.map((feature, index) => (
-                    <li
-                      key={feature.key}
-                      role="option"
-                      aria-selected={selectedIndex === index}
-                      onClick={() => handleSelectFeature(feature)}
-                      className={cn(
-                        'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
-                        selectedIndex === index
-                          ? 'bg-accent text-accent-foreground'
-                          : 'hover:bg-muted/60',
-                      )}
-                    >
-                      <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 mt-0.5">
-                          {t(feature.descriptionKey)}
-                        </p>
-                      </div>
-                    </li>
-                  ))
-                ) : (
-                  <li className="px-4 py-6 text-center text-sm text-muted-foreground">
-                    {t('common:buttons.noResults')}
-                  </li>
-                )
-              ) : (
-                <>
-                  <div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
-                    {t('common:buttons.recentSearch')}
-                  </div>
-                  {displayedHistory.map((item, index) => (
-                    <li
-                      key={item.key}
-                      role="option"
-                      aria-selected={selectedIndex === index}
-                      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
-                          ? 'bg-accent text-accent-foreground'
-                          : 'hover:bg-muted/60',
-                      )}
-                    >
-                      <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>
-                  ))}
-                </>
-              )}
-            </ul>
-          </div>
-        )}
-      </div>
-
-      {/* 右侧：操作区 */}
-      <div className="flex items-center gap-1 shrink-0">
-        <IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
-          <ThemeIcon className="h-4 w-4" />
-        </IconButton>
-        <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
-          <ExternalLink className="h-4 w-4" />
-        </IconButton>
-      </div>
-    </header>
-  );
-}
-
-// 5. 提炼出高度复用的原子按钮，大幅精简 Tailwind 冗余，符合 shadcn 的灵巧风格
-function IconButton({
-  children,
-  onClick,
-  title,
-}: {
-  children: React.ReactNode;
-  onClick: () => void;
-  title: string;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      title={title}
-      aria-label={title}
-      className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-    >
-      {children}
-    </button>
-  );
-}
diff --git a/src/components/__tests__/CopyButton.test.tsx b/src/components/__tests__/CopyButton.test.tsx
index 64af285..6d1c8ac 100644
--- a/src/components/__tests__/CopyButton.test.tsx
+++ b/src/components/__tests__/CopyButton.test.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 // unmock the globally-mocked component so we test the real implementation
@@ -45,29 +45,6 @@ describe('CopyButton', () => {
     expect(mockedToast.success).toHaveBeenCalled();
   });
 
-  it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="test" />);
-
-    // 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
-    await user.click(screen.getByRole('button'));
-
-    await waitFor(() => {
-      expect(screen.getByRole('button').className).toContain('text-emerald');
-    });
-
-    // 1.5 秒后样式恢复
-    act(() => {
-      vi.advanceTimersByTime(1500);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByRole('button').className).not.toContain('text-emerald');
-    });
-  });
-
   it('复制空文本时弹出 error toast', async () => {
     const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
 
@@ -91,15 +68,10 @@ describe('CopyButton', () => {
     expect(mockedToast.error).toHaveBeenCalled();
   });
 
-  // ==================== 新增测试 ====================
-
-  it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
+  it('初始渲染时带有默认 aria-label', () => {
     render(<CopyButton text="initial" />);
 
-    const button = screen.getByRole('button');
-    expect(button.className).not.toContain('text-emerald');
-    // 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
-    expect(button).toHaveAttribute('aria-label');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', '复制');
   });
 
   it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
@@ -142,15 +114,12 @@ describe('CopyButton', () => {
 
     await user.click(screen.getByRole('button'));
 
-    // 在 1.5 秒超时到期前卸载组件
     act(() => {
       vi.advanceTimersByTime(500);
     });
 
-    // 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
     expect(() => unmount()).not.toThrow();
 
-    // 前进剩余时间，确认没有异常
     act(() => {
       vi.advanceTimersByTime(2000);
     });
@@ -164,23 +133,15 @@ describe('CopyButton', () => {
 
     const button = screen.getByRole('button');
 
-    // 快速点击 3 次
     await user.click(button);
     await user.click(button);
     await user.click(button);
 
-    // copyTextToClipboard 应该被调用 3 次（每次点击都执行）
     expect(mockedCopy).toHaveBeenCalledTimes(3);
 
-    // 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
-    //  advance 1.5 秒后，copied 状态应恢复为 false
     act(() => {
       vi.advanceTimersByTime(1500);
     });
-
-    await waitFor(() => {
-      expect(button.className).not.toContain('text-emerald');
-    });
   });
 
   it('其他 button props 通过 ...props 透传', () => {
diff --git a/src/components/__tests__/EmptyPlaceholder.test.tsx b/src/components/__tests__/EmptyPlaceholder.test.tsx
new file mode 100644
index 0000000..d5e6ce7
--- /dev/null
+++ b/src/components/__tests__/EmptyPlaceholder.test.tsx
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+
+describe('EmptyPlaceholder 组件', () => {
+  it('应渲染字符串提示文本', () => {
+    render(<EmptyPlaceholder>请输入内容</EmptyPlaceholder>);
+
+    expect(screen.getByText('请输入内容')).toBeInTheDocument();
+  });
+
+  it('应应用规范空状态容器样式', () => {
+    const { container } = render(<EmptyPlaceholder>提示</EmptyPlaceholder>);
+
+    const placeholder = container.firstChild;
+    expect(placeholder).toHaveClass(
+      'rounded-xl',
+      'bg-muted/30',
+      'border-dashed',
+      'border-border/80',
+      'min-h-[120px]',
+    );
+  });
+
+  it('应支持 className 自定义容器样式', () => {
+    const { container } = render(
+      <EmptyPlaceholder className="flex-1 min-h-[320px]">提示</EmptyPlaceholder>,
+    );
+
+    expect(container.firstChild).toHaveClass('flex-1', 'min-h-[320px]');
+  });
+
+  it('应支持 messageClassName 自定义文本样式', () => {
+    render(<EmptyPlaceholder messageClassName="text-sm max-w-none">提示</EmptyPlaceholder>);
+
+    expect(screen.getByText('提示')).toHaveClass('text-sm', 'max-w-none');
+  });
+
+  it('应支持 ReactNode 类型的 children', () => {
+    render(
+      <EmptyPlaceholder>
+        <span data-testid="custom-content">自定义内容</span>
+      </EmptyPlaceholder>,
+    );
+
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/__tests__/RouterContainer.test.tsx b/src/components/__tests__/RouterContainer.test.tsx
index 4ab1e39..a913afd 100644
--- a/src/components/__tests__/RouterContainer.test.tsx
+++ b/src/components/__tests__/RouterContainer.test.tsx
@@ -12,7 +12,7 @@ const mockRouterValue = {
   isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
-  goBack: vi.fn(),
+  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
 };
diff --git a/src/components/__tests__/StorageCleanerConfirm.test.tsx b/src/components/__tests__/StorageCleanerConfirm.test.tsx
index 490ffa4..6cd2fbe 100644
--- a/src/components/__tests__/StorageCleanerConfirm.test.tsx
+++ b/src/components/__tests__/StorageCleanerConfirm.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
+import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
 import type { StorageCleanerOptions } from '@/types/storage';
 import React from 'react';
 
@@ -94,7 +94,7 @@ describe('StorageCleanerConfirm 组件', () => {
       renderComponent({ options: partialOptions });
 
       expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
-      expect(screen.getByText(/站点存储/)).toBeInTheDocument();
+      expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
       expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
       expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
     });
diff --git a/src/components/__tests__/TextInputArea.test.tsx b/src/components/__tests__/TextInputArea.test.tsx
index 1e10a8e..ceb5b41 100644
--- a/src/components/__tests__/TextInputArea.test.tsx
+++ b/src/components/__tests__/TextInputArea.test.tsx
@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {
 
     it('默认显示清空按钮', () => {
       render(<TextInputArea value="有内容" onChange={() => {}} />);
-      expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
     });
 
     it('无内容时清空按钮应隐藏', () => {
       render(<TextInputArea value="" onChange={() => {}} />);
-      expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: '清空' })).not.toBeInTheDocument();
     });
 
     it('disabled 时清空按钮应隐藏', () => {
@@ -57,7 +57,7 @@ describe('TextInputArea 组件', () => {
       const handleChange = vi.fn();
       render(<TextInputArea value="内容" onChange={handleChange} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
+      fireEvent.click(screen.getByRole('button', { name: '清空' }));
 
       expect(handleChange).toHaveBeenCalledWith('');
     });
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
     it('清空按钮应清空内容', () => {
       render(<TextInputArea defaultValue="内容" />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
+      fireEvent.click(screen.getByRole('button', { name: '清空' }));
 
       expect(screen.getByRole('textbox')).toHaveValue('');
     });
@@ -90,14 +90,12 @@ describe('TextInputArea 组件', () => {
   describe('allowCopy 复制功能', () => {
     it('allowCopy 且有内容时显示复制按钮', () => {
       render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
-      expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
     });
 
     it('allowCopy 但无内容时隐藏复制按钮', () => {
       render(<TextInputArea value="" onChange={() => {}} allowCopy />);
-      expect(
-        screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
-      ).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
     });
 
     it('allowCopy=false 时不显示复制按钮', () => {
@@ -113,7 +111,7 @@ describe('TextInputArea 组件', () => {
 
       render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
 
-      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
+      await user.click(screen.getByRole('button', { name: '复制内容' }));
 
       expect(writeTextSpy).toHaveBeenCalledWith('测试');
     });
@@ -126,7 +124,7 @@ describe('TextInputArea 组件', () => {
 
       render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
 
-      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
+      await user.click(screen.getByRole('button', { name: '复制内容' }));
 
       expect(writeTextSpy).toHaveBeenCalledWith('测试');
     });
@@ -158,6 +156,7 @@ describe('TextInputArea 组件', () => {
       fireEvent.change(textarea, { target: { value: '123456' } });
 
       expect(handleChange).not.toHaveBeenCalledWith('123456');
+      expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
     });
 
     it('未超出 maxLength 的输入应正常触发', () => {
@@ -370,7 +369,7 @@ describe('TextInputArea 组件', () => {
       const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
 
       render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
-      await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
+      await user.click(screen.getByRole('button', { name: '复制内容' }));
 
       expect(writeTextSpy).toHaveBeenCalledWith('测试');
     });
@@ -381,7 +380,7 @@ describe('TextInputArea 组件', () => {
       const handleClear = vi.fn();
       render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
+      fireEvent.click(screen.getByRole('button', { name: '清空' }));
 
       expect(handleClear).toHaveBeenCalledOnce();
     });
@@ -389,7 +388,7 @@ describe('TextInputArea 组件', () => {
     it('不传 onClear 时清空按钮应正常工作', () => {
       render(<TextInputArea defaultValue="内容" />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
+      fireEvent.click(screen.getByRole('button', { name: '清空' }));
 
       expect(screen.getByRole('textbox')).toHaveValue('');
     });
diff --git a/src/config/README.md b/src/config/README.md
deleted file mode 100644
index 5a252cf..0000000
--- a/src/config/README.md
+++ /dev/null
@@ -1,43 +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`）
-
-## 已注册功能（10 个）
-
-| key                  | 图标              | 说明              |
-| -------------------- | ----------------- | ----------------- |
-| `dashboard`          | —                 | 仪表盘首页        |
-| `timestamp`          | Clock             | 时间戳转换工具    |
-| `storageCleaner`     | Database          | 存储清理工具      |
-| `qrCode`             | QrCode            | 二维码工具        |
-| `textStatistics`     | FileText          | 文本统计工具      |
-| `jwt`                | Key               | JWT 解析工具      |
-| `jsonDiff`           | GitCompareArrows  | JSON 差异比较工具 |
-| `base64Converter`    | ArrowLeftRight    | Base64 转换器     |
-| `rightClickRestorer` | MousePointerClick | 右键菜单恢复工具  |
-| `testDataGenerator`  | FileSpreadsheet   | 测试数据生成器    |
-
-## 导出函数
-
-- `getFeatureByKey(key)` — 根据 key 获取功能配置
-- `getDefaultVisibleFeatureKeys()` — 获取默认可见的功能 key 列表
-- `getAllFeatureKeys()` — 获取所有功能 key 列表
-- `getDefaultPageOrder()` — 获取默认页面排序（不含 dashboard）
-- `getEntryPointType()` — 判断当前入口类型（popup/sidepanel/tab）
diff --git a/src/config/__tests__/features.lazy.test.ts b/src/config/__tests__/features.lazy.test.ts
new file mode 100644
index 0000000..6aba224
--- /dev/null
+++ b/src/config/__tests__/features.lazy.test.ts
@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const pageLoadTracker = vi.hoisted(() => ({
+  loaded: [] as string[],
+}));
+
+vi.mock('@/pages/Dashboard', () => {
+  pageLoadTracker.loaded.push('Dashboard');
+  return { default: () => null };
+});
+vi.mock('@/pages/Timestamp', () => {
+  pageLoadTracker.loaded.push('Timestamp');
+  return { default: () => null };
+});
+vi.mock('@/pages/StorageCleaner', () => {
+  pageLoadTracker.loaded.push('StorageCleaner');
+  return { default: () => null };
+});
+vi.mock('@/pages/QrCode', () => {
+  pageLoadTracker.loaded.push('QrCode');
+  return { default: () => null };
+});
+vi.mock('@/pages/TextStatistics', () => {
+  pageLoadTracker.loaded.push('TextStatistics');
+  return { default: () => null };
+});
+vi.mock('@/pages/Jwt', () => {
+  pageLoadTracker.loaded.push('Jwt');
+  return { default: () => null };
+});
+vi.mock('@/pages/JsonTools', () => {
+  pageLoadTracker.loaded.push('JsonTools');
+  return { default: () => null };
+});
+vi.mock('@/pages/Base64Converter', () => {
+  pageLoadTracker.loaded.push('Base64Converter');
+  return { default: () => null };
+});
+vi.mock('@/pages/RightClickRestorer', () => {
+  pageLoadTracker.loaded.push('RightClickRestorer');
+  return { default: () => null };
+});
+vi.mock('@/pages/TestDataGenerator', () => {
+  pageLoadTracker.loaded.push('TestDataGenerator');
+  return { default: () => null };
+});
+
+describe('features 懒加载', () => {
+  beforeEach(() => {
+    pageLoadTracker.loaded.length = 0;
+    vi.resetModules();
+  });
+
+  it('仅导入工具函数时不应加载任何页面模块', async () => {
+    const { getAllFeatureKeys, getDefaultPageOrder } = await import('@/config/features');
+
+    getAllFeatureKeys();
+    getDefaultPageOrder();
+
+    expect(pageLoadTracker.loaded).toEqual([]);
+  });
+
+  it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
+    const { FEATURES } = await import('@/config/features');
+
+    expect(FEATURES).toHaveLength(10);
+    expect(pageLoadTracker.loaded).toEqual([]);
+  });
+
+  it('渲染 lazy 组件时才应加载对应页面模块', async () => {
+    const React = await import('react');
+    const { render, waitFor } = await import('@testing-library/react');
+    const { FEATURES } = await import('@/config/features');
+
+    const DashboardPage = FEATURES.find((f) => f.key === 'dashboard')!.components.popup;
+
+    render(
+      React.createElement(React.Suspense, { fallback: null }, React.createElement(DashboardPage)),
+    );
+
+    await waitFor(() => {
+      expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
+    });
+  });
+});
diff --git a/src/config/__tests__/features.test.ts b/src/config/__tests__/features.test.ts
index 6ac2402..07cdecb 100644
--- a/src/config/__tests__/features.test.ts
+++ b/src/config/__tests__/features.test.ts
@@ -9,27 +9,26 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 10 features defined', () => {
+    it('应该有10个功能定义', () => {
       expect(FEATURES).toHaveLength(10);
     });
 
-    it('should have all required properties for each feature', () => {
+    it('应该有每个功能的所有必需属性', () => {
       FEATURES.forEach((feature) => {
         expect(feature).toHaveProperty('key');
-        expect(feature).toHaveProperty('labelKey');
-        expect(feature).toHaveProperty('descriptionKey');
+        expect(feature).toHaveProperty('label');
+        expect(feature).toHaveProperty('description');
         expect(feature).toHaveProperty('defaultVisible');
         expect(feature).toHaveProperty('components');
         expect(typeof feature.key).toBe('string');
-        expect(typeof feature.labelKey).toBe('string');
-        expect(typeof feature.descriptionKey).toBe('string');
+        expect(typeof feature.label).toBe('string');
+        expect(typeof feature.description).toBe('string');
         expect(typeof feature.defaultVisible).toBe('boolean');
         expect(typeof feature.components).toBe('object');
         expect(feature.components).toHaveProperty('popup');
         expect(feature.components).toHaveProperty('sidepanel');
         expect(feature.components).toHaveProperty('tab');
 
-        // Optional UI properties for non-hidden features
         if (feature.key !== 'dashboard') {
           expect(feature).toHaveProperty('icon');
           expect(feature).toHaveProperty('themeColorKey');
@@ -38,7 +37,7 @@ describe('features', () => {
       });
     });
 
-    it('should have unique keys for each feature', () => {
+    it('应该有每个功能的唯一key', () => {
       const keys = FEATURES.map((f) => f.key);
       const uniqueKeys = new Set(keys);
       expect(uniqueKeys.size).toBe(keys.length);
@@ -46,36 +45,36 @@ describe('features', () => {
   });
 
   describe('getFeatureByKey', () => {
-    it('should return dashboard feature', () => {
+    it('应该返回dashboard功能', () => {
       const feature = getFeatureByKey('dashboard');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('dashboard');
-      expect(feature?.labelKey).toBe('dashboard_title');
+      expect(feature?.label).toBe('仪表盘');
     });
 
-    it('should return timestamp feature', () => {
+    it('应该返回时间戳功能', () => {
       const feature = getFeatureByKey('timestamp');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('timestamp');
-      expect(feature?.labelKey).toBe('timestamp_title');
+      expect(feature?.label).toBe('时间戳');
       expect(feature?.themeColorKey).toBeDefined();
     });
 
-    it('should return storageCleaner feature', () => {
+    it('应该返回存储清理功能', () => {
       const feature = getFeatureByKey('storageCleaner');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('storageCleaner');
-      expect(feature?.labelKey).toBe('storageCleaner_title');
+      expect(feature?.label).toBe('存储清理');
     });
 
-    it('should return undefined for invalid key', () => {
+    it('应该返回undefined用于无效的key', () => {
       const feature = getFeatureByKey('invalid' as any);
       expect(feature).toBeUndefined();
     });
   });
 
   describe('getDefaultVisibleFeatureKeys', () => {
-    it('should return only visible features', () => {
+    it('应该返回仅可见的功能', () => {
       const visibleKeys = getDefaultVisibleFeatureKeys();
       visibleKeys.forEach((key) => {
         const feature = getFeatureByKey(key);
@@ -83,7 +82,7 @@ describe('features', () => {
       });
     });
 
-    it('should include dashboard, timestamp, storageCleaner, qrCode', () => {
+    it('应该包含仪表盘、时间戳、存储清理、二维码', () => {
       const visibleKeys = getDefaultVisibleFeatureKeys();
       expect(visibleKeys).toContain('dashboard');
       expect(visibleKeys).toContain('timestamp');
@@ -93,7 +92,7 @@ describe('features', () => {
   });
 
   describe('getAllFeatureKeys', () => {
-    it('should return all feature keys', () => {
+    it('应该返回所有功能key', () => {
       const allKeys = getAllFeatureKeys();
       expect(allKeys).toHaveLength(10);
       expect(allKeys).toContain('dashboard');
@@ -102,7 +101,7 @@ describe('features', () => {
       expect(allKeys).toContain('qrCode');
       expect(allKeys).toContain('textStatistics');
       expect(allKeys).toContain('jwt');
-      expect(allKeys).toContain('jsonDiff');
+      expect(allKeys).toContain('jsonTools');
       expect(allKeys).toContain('base64Converter');
       expect(allKeys).toContain('rightClickRestorer');
       expect(allKeys).toContain('testDataGenerator');
@@ -110,19 +109,19 @@ describe('features', () => {
   });
 
   describe('getDefaultPageOrder', () => {
-    it('should exclude dashboard from page order', () => {
+    it('应该排除仪表盘从页面顺序', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).not.toContain('dashboard');
     });
 
-    it('should include timestamp, storageCleaner, qrCode in page order', () => {
+    it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).toContain('timestamp');
       expect(pageOrder).toContain('storageCleaner');
       expect(pageOrder).toContain('qrCode');
     });
 
-    it('should have 9 items in page order', () => {
+    it('应该有9个项目在页面顺序', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).toHaveLength(9);
     });
diff --git a/src/config/features.tsx b/src/config/features.tsx
index 7ef8689..d98d397 100644
--- a/src/config/features.tsx
+++ b/src/config/features.tsx
@@ -29,8 +29,8 @@ const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
 
 export interface FeatureConfig {
   key: PageType;
-  labelKey: string;
-  descriptionKey: string;
+  label: string;
+  description: string;
   themeColorKey?: PaletteColorKey;
   icon?: ComponentType<LucideProps>;
   defaultVisible: boolean;
@@ -44,8 +44,8 @@ export interface FeatureConfig {
 export const FEATURES: FeatureConfig[] = [
   {
     key: 'dashboard',
-    labelKey: 'dashboard_title',
-    descriptionKey: '',
+    label: '仪表盘',
+    description: '',
     defaultVisible: true,
     components: {
       popup: DashboardPage,
@@ -55,8 +55,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'timestamp',
-    labelKey: 'timestamp_title',
-    descriptionKey: 'timestamp_description',
+    label: '时间戳',
+    description: 'Unix 毫秒数转换与格式化',
     themeColorKey: 'primary',
     icon: Clock,
     defaultVisible: true,
@@ -68,8 +68,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'storageCleaner',
-    labelKey: 'storageCleaner_title',
-    descriptionKey: 'storageCleaner_description',
+    label: '存储清理',
+    description: '清理缓存、Cookies 及本地存储',
     themeColorKey: 'warning',
     icon: Database,
     defaultVisible: true,
@@ -81,8 +81,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'qrCode',
-    labelKey: 'qrCode_title',
-    descriptionKey: 'qrCode_description',
+    label: '二维码工具',
+    description: '生成当前选中的 URL 的二维码',
     themeColorKey: 'success',
     icon: QrCode,
     defaultVisible: true,
@@ -94,8 +94,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'textStatistics',
-    labelKey: 'textStatistics_title',
-    descriptionKey: 'textStatistics_description',
+    label: '文本统计',
+    description: '实时分析文本字符、单词及字节',
     themeColorKey: 'secondary',
     icon: FileText,
     defaultVisible: true,
@@ -107,8 +107,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'jwt',
-    labelKey: 'jwt_title',
-    descriptionKey: 'jwt_description',
+    label: 'JWT 解析',
+    description: 'JSON Web Token 解码与查看',
     themeColorKey: 'info',
     icon: Key,
     defaultVisible: true,
@@ -119,9 +119,9 @@ export const FEATURES: FeatureConfig[] = [
     },
   },
   {
-    key: 'jsonDiff',
-    labelKey: 'jsonDiff_title',
-    descriptionKey: 'jsonDiff_description',
+    key: 'jsonTools',
+    label: 'JSON 工具',
+    description: '差异比较、格式化、YAML/TOML 转换及压缩',
     themeColorKey: 'primary',
     icon: GitCompareArrows,
     defaultVisible: true,
@@ -133,8 +133,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'base64Converter',
-    labelKey: 'base64Converter_title',
-    descriptionKey: 'base64Converter_description',
+    label: 'Base64 转换器',
+    description: '文本、文件与图像的 Base64 编码转换',
     themeColorKey: 'info',
     icon: ArrowLeftRight,
     defaultVisible: true,
@@ -146,8 +146,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'rightClickRestorer',
-    labelKey: 'rightClickRestorer_title',
-    descriptionKey: 'rightClickRestorer_description',
+    label: '右键恢复',
+    description: '检测并恢复被网站禁用的浏览器右键菜单',
     themeColorKey: 'success',
     icon: MousePointerClick,
     defaultVisible: true,
@@ -159,8 +159,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'testDataGenerator',
-    labelKey: 'testDataGenerator_title',
-    descriptionKey: 'testDataGenerator_description',
+    label: '测试数据生成器',
+    description: '自定义规则批量生成测试数据',
     themeColorKey: 'warning',
     icon: FileSpreadsheet,
     defaultVisible: true,
diff --git a/src/entrypoints/README.md b/src/entrypoints/README.md
deleted file mode 100644
index 47982f0..0000000
--- a/src/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/src/entrypoints/__tests__/background.test.ts b/src/entrypoints/__tests__/background.test.ts
index 21d5d32..7029ba1 100644
--- a/src/entrypoints/__tests__/background.test.ts
+++ b/src/entrypoints/__tests__/background.test.ts
@@ -36,7 +36,7 @@ describe('background 菜单注册与分流', () => {
       expect(chrome.contextMenus.create).toHaveBeenCalledWith(
         expect.objectContaining({
           id: 'jwt',
-          title: '🔑 解析 JWT',
+          title: '解析 JWT',
           parentId: 'testing-tools-parent',
         }),
       );
@@ -48,7 +48,7 @@ describe('background 菜单注册与分流', () => {
       expect(chrome.contextMenus.create).toHaveBeenCalledWith(
         expect.objectContaining({
           id: 'qrCode-page',
-          title: '🔗 网页链接转二维码',
+          title: '网页链接转二维码',
           contexts: ['page'],
         }),
       );
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index d1b177b..7c56c95 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -41,14 +41,11 @@ export default defineBackground(() => {
     try {
       await browser.action.openPopup();
     } catch (err) {
-      console.warn(
-        '[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，暂存数据已安全保留:',
-        err,
-      );
+      console.warn('[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，数据已暂存:', err);
     }
   });
 
-  // 监听扩展图标点击事件，安全激活侧边栏
+  // 扩展图标点击时打开侧边栏
   browser.action.onClicked.addListener(async (tab) => {
     if (tab.id) {
       try {
@@ -65,8 +62,8 @@ export default defineBackground(() => {
     const tabId = sender?.tab?.id;
 
     if (!tabId) {
-      console.warn('[RightClickRestorer] Injection request missing tabId');
-      return { success: false, message: 'Missing tabId' };
+      console.warn('[RightClickRestorer] 注入请求缺少 tabId');
+      return { success: false, message: '缺少 tabId' };
     }
 
     try {
@@ -79,7 +76,7 @@ export default defineBackground(() => {
       return { success: true };
     } catch (err) {
       const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error('[RightClickRestorer] executeScript failed:', errorMsg);
+      console.error('[RightClickRestorer] 执行脚本失败:', errorMsg);
       return { success: false, message: errorMsg };
     }
   });
diff --git a/src/entrypoints/content/contextMenuHandler.ts b/src/entrypoints/content/contextMenuHandler.ts
index cc9b940..c5671e2 100644
--- a/src/entrypoints/content/contextMenuHandler.ts
+++ b/src/entrypoints/content/contextMenuHandler.ts
@@ -1,22 +1,20 @@
 import type { ContextMenuClickedPayload } from '@/utils/messages';
 import { MessageAction, onMessage } from '@/utils/messages';
 import { getTextStats } from '@/utils/textStatistics';
-import { getMessage } from '@/utils/chromeI18n';
 import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
 
 function convertTimestamp(input: string): string {
-  const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
   const num = Number(input.trim());
 
   if (isNaN(num)) {
-    return invalidText;
+    return '无效时间戳';
   }
 
-  // 1e12 判定毫秒级/秒级时间戳兼容
+  // 1e12 区分毫秒/秒级时间戳
   const d = num > 1e12 ? new Date(num) : new Date(num * 1000);
 
   if (isNaN(d.getTime())) {
-    return invalidText;
+    return '无效时间戳';
   }
 
   const year = d.getFullYear();
diff --git a/src/entrypoints/content/uiPopover.ts b/src/entrypoints/content/uiPopover.ts
index faf985e..e9a514c 100644
--- a/src/entrypoints/content/uiPopover.ts
+++ b/src/entrypoints/content/uiPopover.ts
@@ -137,12 +137,11 @@ function escapeHtml(text: string): string {
 }
 
 function positionPopover(popover: HTMLElement, x: number, y: number): void {
-  // 此时借助 visibility: hidden，元素在隐藏状态下拥有真实的布局高宽
   const rect = popover.getBoundingClientRect();
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
 
-  let left = x + 8; // 微微追加水平偏置，防范直接遮挡用户的鼠标落点
+  let left = x + 8;
   let top = y + 8;
 
   if (left + rect.width > viewportWidth - 16) {
@@ -178,7 +177,7 @@ function showPopover(
 
     const titleSpan = document.createElement('span');
     titleSpan.className = 'popover-title';
-    titleSpan.textContent = title; // ✅ 强安全性护航
+    titleSpan.textContent = title;
 
     const closeBtn = document.createElement('button');
     closeBtn.className = 'popover-close';
@@ -194,10 +193,9 @@ function showPopover(
 
   const contentContainer = document.createElement('div');
   contentContainer.className = 'popover-content';
-  contentContainer.innerHTML = contentHtml; // 内部拼装的方法已提前完成全消毒转义
+  contentContainer.innerHTML = contentHtml;
   popover.appendChild(contentContainer);
 
-  // 提前移除激活类名，使 visibility: hidden 起效以供测量
   popover.classList.remove('visible');
 
   requestAnimationFrame(() => {
@@ -226,7 +224,6 @@ export function hidePopover(): void {
 }
 
 export function showTimestampResult(x: number, y: number, timestamp: string, result: string): void {
-  // 对外部传来的参数先全数塞入 escapeHtml 大闸进行纯氧化清洗
   const cleanTimestamp = escapeHtml(timestamp);
   const cleanResult = escapeHtml(result);
 
@@ -236,7 +233,7 @@ export function showTimestampResult(x: number, y: number, timestamp: string, res
     <div class="popover-label">转换结果</div>
     <div class="popover-value">${cleanResult}</div>
   `;
-  showPopover(x, y, content, '⏰ 时间戳转换');
+  showPopover(x, y, content, '转换结果');
 }
 
 export function showTextStatsResult(
@@ -246,7 +243,6 @@ export function showTextStatsResult(
   stats: { characters: number; words: number; lines: number; bytes: number },
 ): void {
   const truncatedText = text.length > 50 ? text.substring(0, 50) + '...' : text;
-  // 对选中的脏文本先进行严格转义
   const cleanText = escapeHtml(truncatedText);
 
   const content = `
@@ -271,5 +267,5 @@ export function showTextStatsResult(
       </div>
     </div>
   `;
-  showPopover(x, y, content, '📊 文本统计');
+  showPopover(x, y, content, '统计结果');
 }
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index 413568a..9bda4d4 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -1,5 +1,5 @@
 import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/components/TopBar';
+import TopBar from '@/layout/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { getEntryPointType } from '@/config/features';
diff --git a/src/entrypoints/popup/index.html b/src/entrypoints/popup/index.html
index f2ec7be..8a48568 100644
--- a/src/entrypoints/popup/index.html
+++ b/src/entrypoints/popup/index.html
@@ -5,6 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Testing Tools - 标签页</title>
     <meta name="manifest.type" content="browser_action" />
+    <script>
+      (function () {
+        try {
+          var raw = localStorage.getItem('snapshot/app/themeMode');
+          var mode = raw ? JSON.parse(raw) : 'system';
+          if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
+          var isDark =
+            mode === 'dark' ||
+            (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          if (isDark) document.documentElement.classList.add('dark');
+        } catch (_error) {}
+      })();
+    </script>
     <style>
       /* Force initial popup size before React hydration */
       html, body {
diff --git a/src/entrypoints/sidepanel/App.tsx b/src/entrypoints/sidepanel/App.tsx
index 80d156b..0475e7a 100644
--- a/src/entrypoints/sidepanel/App.tsx
+++ b/src/entrypoints/sidepanel/App.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/components/TopBar';
+import TopBar from '@/layout/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { MessageAction, sendMessage } from '@/utils/messages';
diff --git a/src/entrypoints/sidepanel/index.html b/src/entrypoints/sidepanel/index.html
index 4c0a88d..76a61e0 100644
--- a/src/entrypoints/sidepanel/index.html
+++ b/src/entrypoints/sidepanel/index.html
@@ -4,6 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Testing Tools - Side Panel</title>
+    <script>
+      (function () {
+        try {
+          var raw = localStorage.getItem('snapshot/app/themeMode');
+          var mode = raw ? JSON.parse(raw) : 'system';
+          if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
+          var isDark =
+            mode === 'dark' ||
+            (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          if (isDark) document.documentElement.classList.add('dark');
+        } catch (_error) {}
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/layout/README.md b/src/layout/README.md
new file mode 100644
index 0000000..3e295a3
--- /dev/null
+++ b/src/layout/README.md
@@ -0,0 +1,26 @@
+# layout/
+
+应用壳层布局组件目录，存放与扩展入口（popup / sidepanel / tab）绑定的布局 UI，与 `components/` 中的通用可复用组件区分。
+
+## 组件列表
+
+| 目录      | 用途                                                           |
+| --------- | -------------------------------------------------------------- |
+| `TopBar/` | 顶部导航栏：搜索（含历史记录）、主题切换、返回导航、标签页打开 |
+
+## 目录结构
+
+遵循与 `pages/` 相同的 UI + Hook 分离模式：
+
+```
+layout/TopBar/
+├── index.tsx              # 布局入口
+├── useTopBar.ts           # 业务逻辑 Hook
+├── constants.ts           # 常量
+├── SearchInput.tsx        # 搜索输入框
+├── SearchDropdown.tsx     # 搜索结果/历史下拉面板
+├── SearchResultItem.tsx   # 单条搜索结果项
+├── TopBarActions.tsx      # 右侧操作按钮组
+└── __tests__/
+    └── index.test.tsx
+```
diff --git a/src/layout/TopBar/SearchDropdown.tsx b/src/layout/TopBar/SearchDropdown.tsx
new file mode 100644
index 0000000..17368c4
--- /dev/null
+++ b/src/layout/TopBar/SearchDropdown.tsx
@@ -0,0 +1,45 @@
+import { type FeatureConfig } from '@/config/features';
+import SearchResultItem from './SearchResultItem';
+
+interface SearchDropdownProps {
+  searchQuery: string;
+  searchResults: FeatureConfig[];
+  recentFeatures: FeatureConfig[];
+  selectedIndex: number;
+  onSelect: (feature: FeatureConfig) => void;
+}
+
+export default function SearchDropdown({
+  searchQuery,
+  searchResults,
+  recentFeatures,
+  selectedIndex,
+  onSelect,
+}: SearchDropdownProps) {
+  const isSearching = searchQuery.trim().length > 0;
+  const items = isSearching ? searchResults : recentFeatures;
+
+  return (
+    <div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
+      <ul role="listbox" className="p-1.5">
+        {!isSearching && items.length > 0 && (
+          <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+            最近搜索
+          </div>
+        )}
+        {isSearching && items.length === 0 ? (
+          <li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
+        ) : (
+          items.map((feature, index) => (
+            <SearchResultItem
+              key={feature.key}
+              feature={feature}
+              selected={selectedIndex === index}
+              onSelect={onSelect}
+            />
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/layout/TopBar/SearchInput.tsx b/src/layout/TopBar/SearchInput.tsx
new file mode 100644
index 0000000..689405c
--- /dev/null
+++ b/src/layout/TopBar/SearchInput.tsx
@@ -0,0 +1,57 @@
+import { type RefObject } from 'react';
+import { Search, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { getSearchShortcutLabel } from './constants';
+
+interface SearchInputProps {
+  inputRef: RefObject<HTMLInputElement | null>;
+  searchQuery: string;
+  onSearchQueryChange: (value: string) => void;
+  onFocus: () => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  onClear: () => void;
+}
+
+export default function SearchInput({
+  inputRef,
+  searchQuery,
+  onSearchQueryChange,
+  onFocus,
+  onKeyDown,
+  onClear,
+}: SearchInputProps) {
+  return (
+    <div className="group relative">
+      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-muted-foreground" />
+      <Input
+        ref={inputRef}
+        type="text"
+        placeholder="搜索工具..."
+        value={searchQuery}
+        onChange={(e) => onSearchQueryChange(e.target.value)}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        aria-label="搜索工具..."
+        className="h-9 rounded-lg border-border/60 bg-muted/40 pl-9 pr-16 shadow-none focus-visible:ring-1 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
+      />
+      {!searchQuery && (
+        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 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 sm:inline-flex">
+          {getSearchShortcutLabel()}
+        </kbd>
+      )}
+      {searchQuery && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onClear}
+          aria-label="清除搜索"
+          className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/layout/TopBar/SearchResultItem.tsx b/src/layout/TopBar/SearchResultItem.tsx
new file mode 100644
index 0000000..62ca2b4
--- /dev/null
+++ b/src/layout/TopBar/SearchResultItem.tsx
@@ -0,0 +1,30 @@
+import { type FeatureConfig } from '@/config/features';
+import { cn } from '@/lib/utils';
+
+interface SearchResultItemProps {
+  feature: FeatureConfig;
+  selected: boolean;
+  onSelect: (feature: FeatureConfig) => void;
+}
+
+export default function SearchResultItem({ feature, selected, onSelect }: SearchResultItemProps) {
+  return (
+    <li
+      role="option"
+      aria-selected={selected}
+      onClick={() => onSelect(feature)}
+      className={cn(
+        'flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors',
+        selected ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60',
+      )}
+    >
+      <div className="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="min-w-0 flex-1">
+        <p className="truncate font-medium text-foreground">{feature.label}</p>
+        <p className="mt-0.5 truncate text-xs text-muted-foreground">{feature.description}</p>
+      </div>
+    </li>
+  );
+}
diff --git a/src/layout/TopBar/TopBarActions.tsx b/src/layout/TopBar/TopBarActions.tsx
new file mode 100644
index 0000000..f9d5d80
--- /dev/null
+++ b/src/layout/TopBar/TopBarActions.tsx
@@ -0,0 +1,34 @@
+import { type LucideIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface TopBarAction {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  onClick: () => void;
+}
+
+interface TopBarActionsProps {
+  actions: TopBarAction[];
+}
+
+export default function TopBarActions({ actions }: TopBarActionsProps) {
+  return (
+    <div className="flex shrink-0 items-center gap-1">
+      {actions.map(({ id, icon: Icon, title, onClick }) => (
+        <Button
+          key={id}
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onClick}
+          title={title}
+          aria-label={title}
+          className="h-8 w-8 text-muted-foreground"
+        >
+          <Icon className="h-4 w-4" />
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/layout/TopBar/__tests__/constants.test.ts b/src/layout/TopBar/__tests__/constants.test.ts
new file mode 100644
index 0000000..43395b2
--- /dev/null
+++ b/src/layout/TopBar/__tests__/constants.test.ts
@@ -0,0 +1,37 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { getSearchShortcutLabel } from '@/layout/TopBar/constants';
+
+describe('getSearchShortcutLabel', () => {
+  const originalUserAgent = navigator.userAgent;
+
+  afterEach(() => {
+    vi.stubGlobal('navigator', { ...navigator, userAgent: originalUserAgent });
+  });
+
+  it('macOS 应显示 ⌘K', () => {
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+    });
+    expect(getSearchShortcutLabel()).toBe('⌘K');
+  });
+
+  it('Windows 应显示 Ctrl+K', () => {
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      userAgent:
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+    });
+    expect(getSearchShortcutLabel()).toBe('Ctrl+K');
+  });
+
+  it('Linux 应显示 Ctrl+K', () => {
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      userAgent:
+        'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+    });
+    expect(getSearchShortcutLabel()).toBe('Ctrl+K');
+  });
+});
diff --git a/src/components/__tests__/TopBar.test.tsx b/src/layout/TopBar/__tests__/index.test.tsx
similarity index 83%
rename from src/components/__tests__/TopBar.test.tsx
rename to src/layout/TopBar/__tests__/index.test.tsx
index 28366cc..9f9955f 100644
--- a/src/components/__tests__/TopBar.test.tsx
+++ b/src/layout/TopBar/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import type { PageType } from '@/types/storage';
 import React from 'react';
-import TopBar from '@/components/TopBar';
+import TopBar from '@/layout/TopBar';
 import { RouterProvider } from '@/providers/RouterProvider';
 import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
 
@@ -27,7 +27,7 @@ const mockRouterValue = {
   isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
-  goBack: vi.fn(),
+  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
 };
@@ -54,23 +54,23 @@ describe('TopBar 组件', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar />);
-      expect(screen.getByLabelText('返回')).toBeInTheDocument();
+      expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'dashboard';
       renderWithProvider(<TopBar />);
-      expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
     });
   });
 
   describe('交互测试', () => {
-    it('点击返回按钮时应调用 goBack', () => {
+    it('点击返回按钮时应调用 goHome', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar />);
 
-      fireEvent.click(screen.getByLabelText('返回'));
-      expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
+      fireEvent.click(screen.getByLabelText('返回首页'));
+      expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
     });
   });
 });
diff --git a/src/layout/TopBar/constants.ts b/src/layout/TopBar/constants.ts
new file mode 100644
index 0000000..7e1924f
--- /dev/null
+++ b/src/layout/TopBar/constants.ts
@@ -0,0 +1,9 @@
+export const SEARCH_HISTORY_LIMIT = 10;
+export const SEARCH_HISTORY_DISPLAY = 5;
+
+export const isSearchHistory = (val: unknown): val is string[] =>
+  Array.isArray(val) && val.every((item) => typeof item === 'string');
+
+export function getSearchShortcutLabel(): string {
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
+}
diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx
new file mode 100644
index 0000000..6513e12
--- /dev/null
+++ b/src/layout/TopBar/index.tsx
@@ -0,0 +1,82 @@
+import { ArrowLeft, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import SearchDropdown from './SearchDropdown';
+import SearchInput from './SearchInput';
+import TopBarActions from './TopBarActions';
+import { useTopBar } from './useTopBar';
+
+export default function TopBar() {
+  const {
+    searchQuery,
+    searchResults,
+    recentFeatures,
+    selectedIndex,
+    isDashboard,
+    ThemeIcon,
+    themeTitle,
+    showDropdown,
+    containerRef,
+    inputRef,
+    handleSearchQueryChange,
+    handleSearchFocus,
+    handleSelectFeature,
+    handleKeyDown,
+    cycleThemeMode,
+    handleOpenInTab,
+    goHome,
+    clearSearch,
+  } = useTopBar();
+
+  const actions = [
+    { id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode },
+    {
+      id: 'open-in-tab',
+      icon: ExternalLink,
+      title: '在标签页打开',
+      onClick: () => {
+        void handleOpenInTab();
+      },
+    },
+  ];
+
+  return (
+    <header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4">
+      <div className="flex w-10 items-center justify-start">
+        {!isDashboard && (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={goHome}
+            aria-label="返回首页"
+            className="h-8 w-8 shadow-sm text-muted-foreground"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <div ref={containerRef} className="relative mx-4 max-w-md flex-1">
+        <SearchInput
+          inputRef={inputRef}
+          searchQuery={searchQuery}
+          onSearchQueryChange={handleSearchQueryChange}
+          onFocus={handleSearchFocus}
+          onKeyDown={handleKeyDown}
+          onClear={clearSearch}
+        />
+        {showDropdown && (
+          <SearchDropdown
+            searchQuery={searchQuery}
+            searchResults={searchResults}
+            recentFeatures={recentFeatures}
+            selectedIndex={selectedIndex}
+            onSelect={handleSelectFeature}
+          />
+        )}
+      </div>
+
+      <TopBarActions actions={actions} />
+    </header>
+  );
+}
diff --git a/src/layout/TopBar/useTopBar.ts b/src/layout/TopBar/useTopBar.ts
new file mode 100644
index 0000000..1e4b87c
--- /dev/null
+++ b/src/layout/TopBar/useTopBar.ts
@@ -0,0 +1,175 @@
+import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useRouter } from '@/providers/RouterProvider';
+import { useThemeMode } from '@/providers/ThemeModeProvider';
+import { type FeatureConfig, FEATURES } from '@/config/features';
+import { useStorageState } from '@/utils/useStorageState';
+import { openExtensionPage } from '@/utils/chromeTabs';
+import { isSearchHistory, SEARCH_HISTORY_DISPLAY, SEARCH_HISTORY_LIMIT } from './constants';
+
+export interface UseTopBarReturn {
+  searchQuery: string;
+  searchResults: FeatureConfig[];
+  recentFeatures: FeatureConfig[];
+  selectedIndex: number;
+  isDashboard: boolean;
+  ThemeIcon: typeof Sun;
+  themeTitle: string;
+  showDropdown: boolean;
+  containerRef: RefObject<HTMLDivElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
+  handleSearchQueryChange: (value: string) => void;
+  handleSearchFocus: () => void;
+  handleSelectFeature: (feature: FeatureConfig) => void;
+  handleKeyDown: (e: React.KeyboardEvent) => void;
+  cycleThemeMode: () => void;
+  handleOpenInTab: () => Promise<void>;
+  goHome: () => void;
+  clearSearch: () => void;
+}
+
+export function useTopBar(): UseTopBarReturn {
+  const { currentPage, goHome, navigateTo } = useRouter();
+  const { mode, setMode } = useThemeMode();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showResults, setShowResults] = useState(false);
+  const [searchHistory, setSearchHistory] = useStorageState(
+    'app/searchHistory',
+    [],
+    isSearchHistory,
+  );
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleOpenInTab = async () => {
+    await openExtensionPage('popup.html', { mode: 'tab' });
+    window.close();
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setShowResults(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  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);
+  }, []);
+
+  const searchResults = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return [];
+    return FEATURES.filter((f) => {
+      if (f.key === 'dashboard') return false;
+      return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
+    });
+  }, [searchQuery]);
+
+  const displayedHistory = useMemo(() => {
+    if (searchQuery.trim()) return [];
+    return searchHistory
+      .slice(0, SEARCH_HISTORY_DISPLAY)
+      .map((key) => FEATURES.find((f) => f.key === key))
+      .filter((feature): feature is FeatureConfig => !!feature && feature.key !== 'dashboard');
+  }, [searchHistory, searchQuery]);
+
+  const saveToHistory = (featureKey: string) => {
+    setSearchHistory((prev) =>
+      [featureKey, ...prev.filter((h) => h !== featureKey)].slice(0, SEARCH_HISTORY_LIMIT),
+    );
+  };
+
+  const handleSelectFeature = (feature: FeatureConfig) => {
+    navigateTo(feature.key);
+    saveToHistory(feature.key);
+    setSearchQuery('');
+    setShowResults(false);
+  };
+
+  const cycleThemeMode = () => {
+    const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
+    setMode(nextMap[mode]);
+  };
+
+  const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
+
+  const themeTitle =
+    mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const items = searchQuery.trim() ? searchResults : displayedHistory;
+      const feature =
+        selectedIndex >= 0 && selectedIndex < totalItems
+          ? items[selectedIndex]
+          : searchQuery.trim() && searchResults.length > 0
+            ? searchResults[0]
+            : undefined;
+      if (feature) handleSelectFeature(feature);
+    } else if (e.key === 'Escape') {
+      setShowResults(false);
+      inputRef.current?.blur();
+    }
+  };
+
+  const clearSearch = () => {
+    setSearchQuery('');
+    setSelectedIndex(-1);
+  };
+
+  const handleSearchQueryChange = (value: string) => {
+    setSearchQuery(value);
+    setShowResults(true);
+    setSelectedIndex(-1);
+  };
+
+  const handleSearchFocus = () => setShowResults(true);
+
+  const showDropdown =
+    showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
+
+  return {
+    searchQuery,
+    searchResults,
+    recentFeatures: displayedHistory,
+    selectedIndex,
+    showDropdown,
+    isDashboard: currentPage === 'dashboard',
+    ThemeIcon,
+    themeTitle,
+    containerRef,
+    inputRef,
+    handleSearchQueryChange,
+    handleSearchFocus,
+    handleSelectFeature,
+    handleKeyDown,
+    cycleThemeMode,
+    handleOpenInTab,
+    goHome,
+    clearSearch,
+  };
+}
diff --git a/src/lib/README.md b/src/lib/README.md
index 9274705..4ea8d0f 100644
--- a/src/lib/README.md
+++ b/src/lib/README.md
@@ -37,7 +37,6 @@ import { cn } from '@/lib/utils';
 | `business.ts`  | 业务数据生成器（订单号、价格、日期、状态等）   |
 | `technical.ts` | 技术数据生成器（UUID、IPv4、URL）              |
 | `basic.ts`     | 基础类型生成器（整数、浮点数、布尔值、字符串） |
-| `types.ts`     | 生成器库内部类型与通用选项                     |
 
 使用示例：
 
diff --git a/src/lib/generators/__tests__/random.test.ts b/src/lib/generators/__tests__/random.test.ts
new file mode 100644
index 0000000..655cf00
--- /dev/null
+++ b/src/lib/generators/__tests__/random.test.ts
@@ -0,0 +1,22 @@
+import { randomInt, randomPick } from '@/lib/generators/random';
+
+describe('generators/random', () => {
+  it('randomInt 应返回闭区间内的整数', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.5);
+
+    expect(randomInt(1, 10)).toBe(6);
+    expect(randomInt(5, 5)).toBe(5);
+  });
+
+  it('randomPick 应对单元素数组返回该元素', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0);
+
+    expect(randomPick(['only'])).toBe('only');
+  });
+
+  it('randomPick 应返回数组中的元素', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.99);
+
+    expect(randomPick(['a', 'b', 'c'])).toBe('c');
+  });
+});
diff --git a/src/lib/generators/basic.ts b/src/lib/generators/basic.ts
index eb41cc1..f0decf2 100644
--- a/src/lib/generators/basic.ts
+++ b/src/lib/generators/basic.ts
@@ -1,27 +1,6 @@
-/**
- * 基础类型生成器
- * 包含：随机整数、随机浮点数、随机字符串、从列表选择
- */
-
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
+import { randomInt, randomPick } from './random';
 
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-/**
- * 随机整数生成器
- */
 export const randomIntGenerator: GeneratorDefinition = {
   id: 'randomInt',
   name: '随机整数',
@@ -56,9 +35,6 @@ export const randomIntGenerator: GeneratorDefinition = {
   },
 };
 
-/**
- * 随机浮点数生成器
- */
 export const randomFloat: GeneratorDefinition = {
   id: 'randomFloat',
   name: '随机浮点数',
@@ -98,9 +74,6 @@ export const randomFloat: GeneratorDefinition = {
   },
 };
 
-/**
- * 随机字符串生成器
- */
 export const randomString: GeneratorDefinition = {
   id: 'randomString',
   name: '随机字符串',
@@ -179,9 +152,6 @@ export const randomString: GeneratorDefinition = {
   },
 };
 
-/**
- * 从列表选择生成器
- */
 export const fromList: GeneratorDefinition = {
   id: 'fromList',
   name: '从列表选择',
diff --git a/src/lib/generators/business.ts b/src/lib/generators/business.ts
index 134f914..32791a9 100644
--- a/src/lib/generators/business.ts
+++ b/src/lib/generators/business.ts
@@ -1,27 +1,6 @@
-/**
- * 业务数据生成器
- * 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
- */
-
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
+import { randomInt, randomPick } from './random';
 
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-/**
- * 格式化日期
- */
 function formatDate(date: Date, format: string): string {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -39,9 +18,6 @@ function formatDate(date: Date, format: string): string {
     .replace('ss', seconds);
 }
 
-/**
- * 订单号生成器
- */
 export const orderId: GeneratorDefinition = {
   id: 'orderId',
   name: '订单号',
@@ -81,9 +57,6 @@ export const orderId: GeneratorDefinition = {
   },
 };
 
-/**
- * 价格生成器
- */
 export const price: GeneratorDefinition = {
   id: 'price',
   name: '价格',
@@ -155,9 +128,6 @@ export const price: GeneratorDefinition = {
   },
 };
 
-/**
- * 生成心理定价（如 9.99, 19.9, 99）
- */
 function generatePsychologicalPrice(min: number, max: number): number {
   const patterns = [
     () => {
@@ -180,9 +150,6 @@ function generatePsychologicalPrice(min: number, max: number): number {
   return price;
 }
 
-/**
- * 生成真实分布价格（对数正态分布）
- */
 function generateRealisticPrice(min: number, max: number): number {
   const mean = (Math.log(min) + Math.log(max)) / 2;
   const stdDev = (Math.log(max) - Math.log(min)) / 4;
@@ -195,9 +162,6 @@ function generateRealisticPrice(min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
-/**
- * 日期生成器
- */
 export const date: GeneratorDefinition = {
   id: 'date',
   name: '日期',
@@ -248,9 +212,6 @@ export const date: GeneratorDefinition = {
   },
 };
 
-/**
- * 状态生成器
- */
 export const status: GeneratorDefinition = {
   id: 'status',
   name: '状态',
@@ -303,9 +264,6 @@ export const status: GeneratorDefinition = {
   },
 };
 
-/**
- * 数量生成器
- */
 export const quantity: GeneratorDefinition = {
   id: 'quantity',
   name: '数量',
@@ -352,9 +310,6 @@ export const quantity: GeneratorDefinition = {
   },
 };
 
-/**
- * 泊松分布随机数
- */
 function poissonRandom(lambda: number): number {
   const L = Math.exp(-lambda);
   let k = 0;
@@ -366,9 +321,6 @@ function poissonRandom(lambda: number): number {
   return k - 1;
 }
 
-/**
- * 评分生成器
- */
 export const rating: GeneratorDefinition = {
   id: 'rating',
   name: '评分',
@@ -423,9 +375,6 @@ export const rating: GeneratorDefinition = {
   },
 };
 
-/**
- * 偏向高分的随机数（模拟真实评分分布）
- */
 function skewedRandom(min: number, max: number): number {
   // 使用 Beta 分布模拟评分偏向
   const alpha = 3;
@@ -434,13 +383,10 @@ function skewedRandom(min: number, max: number): number {
     v = 0;
   while (u === 0) u = Math.random();
   while (v === 0) v = Math.random();
-  const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
+  const x = Math.pow(u, 1 / alpha) / (Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta));
   return min + x * (max - min);
 }
 
-/**
- * 折扣生成器
- */
 export const discount: GeneratorDefinition = {
   id: 'discount',
   name: '折扣',
@@ -492,9 +438,6 @@ export const discount: GeneratorDefinition = {
   },
 };
 
-/**
- * 生成心理折扣（如 5%, 10%, 20%, 30%）
- */
 function generatePsychologicalDiscount(min: number, max: number): number {
   const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
   const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
@@ -504,9 +447,6 @@ function generatePsychologicalDiscount(min: number, max: number): number {
   return randomInt(min, max);
 }
 
-/**
- * 库存生成器
- */
 export const stock: GeneratorDefinition = {
   id: 'stock',
   name: '库存',
diff --git a/src/lib/generators/index.ts b/src/lib/generators/index.ts
index 6ce4f5a..9b63cb1 100644
--- a/src/lib/generators/index.ts
+++ b/src/lib/generators/index.ts
@@ -1,17 +1,9 @@
-/**
- * 生成器库索引
- * 导出所有生成器和分类配置
- */
-
 import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
 import { personalGenerators } from './personal';
 import { businessGenerators } from './business';
 import { technicalGenerators } from './technical';
 import { basicGenerators } from './basic';
 
-/**
- * 生成器分类配置
- */
 export const generatorCategories: GeneratorCategory[] = [
   { id: 'personal', name: '个人信息', icon: 'User' },
   { id: 'business', name: '业务数据', icon: 'Briefcase' },
@@ -19,9 +11,6 @@ export const generatorCategories: GeneratorCategory[] = [
   { id: 'basic', name: '基础类型', icon: 'Hash' },
 ];
 
-/**
- * 所有生成器列表
- */
 export const allGenerators: GeneratorDefinition[] = [
   ...personalGenerators,
   ...businessGenerators,
@@ -29,23 +18,14 @@ export const allGenerators: GeneratorDefinition[] = [
   ...basicGenerators,
 ];
 
-/**
- * 根据 ID 获取生成器
- */
 export function getGeneratorById(id: string): GeneratorDefinition | undefined {
   return allGenerators.find((g) => g.id === id);
 }
 
-/**
- * 根据分类 ID 获取生成器列表
- */
 export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
   return allGenerators.filter((g) => g.categoryId === categoryId);
 }
 
-/**
- * 搜索生成器
- */
 export function searchGenerators(query: string): GeneratorDefinition[] {
   const lowerQuery = query.toLowerCase();
   return allGenerators.filter(
diff --git a/src/lib/generators/personal.ts b/src/lib/generators/personal.ts
index 5d11ed6..5fc89ab 100644
--- a/src/lib/generators/personal.ts
+++ b/src/lib/generators/personal.ts
@@ -1,11 +1,6 @@
-/**
- * 个人信息生成器
- * 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
- */
-
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
+import { randomInt, randomPick } from './random';
 
-// 中文姓氏
 const SURNAMES = [
   '王',
   '李',
@@ -59,7 +54,6 @@ const SURNAMES = [
   '阎',
 ];
 
-// 中文名字常用字
 const NAME_CHARS = [
   '伟',
   '芳',
@@ -113,10 +107,8 @@ const NAME_CHARS = [
   '慧',
 ];
 
-// 邮箱域名
 const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
 
-// 省份
 const PROVINCES = [
   '北京市',
   '天津市',
@@ -152,7 +144,6 @@ const PROVINCES = [
   '新疆维吾尔自治区',
 ];
 
-// 城市
 const CITIES: Record<string, string[]> = {
   北京市: ['东城区', '西城区', '朝阳区', '海淀区'],
   上海市: ['黄浦区', '徐汇区', '长宁区', '静安区'],
@@ -162,23 +153,6 @@ const CITIES: Record<string, string[]> = {
   四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
 };
 
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-/**
- * 中文姓名生成器
- */
 export const chineseName: GeneratorDefinition = {
   id: 'chineseName',
   name: '中文姓名',
@@ -192,9 +166,6 @@ export const chineseName: GeneratorDefinition = {
   },
 };
 
-/**
- * 邮箱生成器
- */
 export const email: GeneratorDefinition = {
   id: 'email',
   name: '邮箱',
@@ -221,9 +192,6 @@ export const email: GeneratorDefinition = {
   },
 };
 
-/**
- * 手机号生成器
- */
 export const chinesePhone: GeneratorDefinition = {
   id: 'chinesePhone',
   name: '手机号',
@@ -254,9 +222,6 @@ export const chinesePhone: GeneratorDefinition = {
   },
 };
 
-/**
- * 身份证号生成器
- */
 export const idCard: GeneratorDefinition = {
   id: 'idCard',
   name: '身份证号',
@@ -281,20 +246,12 @@ export const idCard: GeneratorDefinition = {
   generate: (params) => {
     const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
     const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
-
-    // 出生日期 1960-2005年
     const year = randomInt(1960, 2005);
     const month = String(randomInt(1, 12)).padStart(2, '0');
     const day = String(randomInt(1, 28)).padStart(2, '0');
     const birthday = `${year}${month}${day}`;
-
-    // 顺序码
     const sequence = String(randomInt(1, 999)).padStart(3, '0');
-
-    // 前17位
     const prefix17 = region + birthday + sequence;
-
-    // 校验码
     const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
     const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
     let sum = 0;
@@ -330,9 +287,6 @@ export const idCard: GeneratorDefinition = {
   },
 };
 
-/**
- * 中文地址生成器
- */
 export const chineseAddress: GeneratorDefinition = {
   id: 'chineseAddress',
   name: '中文地址',
@@ -361,9 +315,6 @@ export const chineseAddress: GeneratorDefinition = {
   },
 };
 
-/**
- * 年龄生成器
- */
 export const age: GeneratorDefinition = {
   id: 'age',
   name: '年龄',
@@ -415,9 +366,6 @@ export const age: GeneratorDefinition = {
   },
 };
 
-/**
- * 正态分布随机数
- */
 function normalRandom(min: number, max: number): number {
   const mean = (min + max) / 2;
   const stdDev = (max - min) / 6;
@@ -430,9 +378,6 @@ function normalRandom(min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
-/**
- * 人口统计分布随机数（模拟真实年龄分布）
- */
 function demographicRandom(): number {
   const ageGroups = [
     { min: 0, max: 14, weight: 0.18 },
diff --git a/src/lib/generators/random.ts b/src/lib/generators/random.ts
new file mode 100644
index 0000000..2edcb00
--- /dev/null
+++ b/src/lib/generators/random.ts
@@ -0,0 +1,7 @@
+export function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function randomPick<T>(arr: readonly T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
diff --git a/src/lib/generators/technical.ts b/src/lib/generators/technical.ts
index 3c9c3bc..bbbd38e 100644
--- a/src/lib/generators/technical.ts
+++ b/src/lib/generators/technical.ts
@@ -1,27 +1,6 @@
-/**
- * 技术数据生成器
- * 包含：UUID、IPv4、URL
- */
-
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
+import { randomInt, randomPick } from './random';
 
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-/**
- * UUID 生成器
- */
 export const uuid: GeneratorDefinition = {
   id: 'uuid',
   name: 'UUID',
@@ -78,9 +57,6 @@ export const uuid: GeneratorDefinition = {
   },
 };
 
-/**
- * 生成 UUID v4
- */
 function generateUUIDv4(): string {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
@@ -89,9 +65,6 @@ function generateUUIDv4(): string {
   });
 }
 
-/**
- * 生成 UUID v1（简化版本，模拟时间戳）
- */
 function generateUUIDv1(): string {
   const now = Date.now();
   const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
@@ -105,9 +78,6 @@ function generateUUIDv1(): string {
   return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
 }
 
-/**
- * IPv4 生成器
- */
 export const ipv4: GeneratorDefinition = {
   id: 'ipv4',
   name: 'IPv4',
@@ -142,16 +112,10 @@ export const ipv4: GeneratorDefinition = {
   },
 };
 
-/**
- * 生成完全随机 IPv4
- */
 function generateRandomIPv4(): string {
   return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
 }
 
-/**
- * 生成内网 IPv4
- */
 function generatePrivateIPv4(): string {
   const ranges = [
     { prefix: '10', second: () => randomInt(0, 255) },
@@ -166,9 +130,6 @@ function generatePrivateIPv4(): string {
   return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
 }
 
-/**
- * 生成公网 IPv4
- */
 function generatePublicIPv4(): string {
   let first: number;
   do {
@@ -178,9 +139,6 @@ function generatePublicIPv4(): string {
   return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
 }
 
-/**
- * URL 生成器
- */
 export const url: GeneratorDefinition = {
   id: 'url',
   name: 'URL',
@@ -250,8 +208,6 @@ export const url: GeneratorDefinition = {
         path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
       }
     }
-
-    // 添加查询参数
     let query = '';
     if (Math.random() > 0.5) {
       const params = new URLSearchParams();
diff --git a/src/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx
deleted file mode 100644
index 3392e44..0000000
--- a/src/pages/Base64Converter/TextMode.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import TextInputArea from '@/components/TextInputArea';
-import { useI18n } from '@/utils/chromeI18n';
-import { CopyButton } from '@/components/CopyButton';
-import { base64ToText, textToBase64 } from '@/utils/base64Converter';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { useContextMenuData } from '@/utils/useContextMenuData';
-import { Button } from '@/components/ui/button';
-
-const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
-
-const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
-  'Invalid Base64 string': 'invalidBase64',
-  'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
-    'binaryDataDetected',
-};
-
-interface TextModeProps {
-  onSwitchToImageMode?: () => void;
-}
-
-export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
-  const { t } = useI18n('base64Converter');
-
-  const [input, setInput] = useState('');
-  const [debouncedInput, setDebouncedInput] = useState('');
-  const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 200);
-    return () => clearTimeout(handle);
-  }, [input]);
-
-  const handleContextMenuData = useCallback((payload: string) => {
-    setInput(payload);
-    setDebouncedInput(payload);
-    setDirection('decode');
-  }, []);
-
-  useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
-
-  const conversionPipeline = useMemo(() => {
-    const trimmed = debouncedInput.trim();
-    if (!trimmed) return { output: '', error: null };
-
-    try {
-      if (direction === 'encode') {
-        const result = textToBase64(debouncedInput);
-        return { output: result.output, error: null };
-      } else {
-        const decoded = base64ToText(trimmed);
-        return { output: decoded, error: null };
-      }
-    } catch (e) {
-      const message = e instanceof Error ? e.message : '';
-      const i18nKey = ERROR_MESSAGE_TO_I18N[message];
-      return {
-        output: '',
-        error: i18nKey ? t(i18nKey) : message || t('conversionFailed'),
-      };
-    }
-  }, [debouncedInput, direction, t]);
-
-  const output = conversionPipeline.output;
-  const error = conversionPipeline.error;
-
-  const placeholder =
-    direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
-  const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
-
-  const showImageHint = useMemo(
-    () => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
-    [direction, input],
-  );
-
-  const handleDirectionChange = (value: 'encode' | 'decode') => {
-    if (value === direction) return;
-    setDirection(value);
-    setInput('');
-    setDebouncedInput('');
-  };
-
-  const handleClear = () => {
-    setInput('');
-    setDebouncedInput('');
-  };
-
-  return (
-    <div className="w-full flex flex-col space-y-4 px-2">
-      {/* 受控方向切流中枢 */}
-      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
-        <SwitchButtonGroup
-          value={direction}
-          options={[
-            { value: 'encode', label: t('encode') },
-            { value: 'decode', label: t('decode') },
-          ]}
-          onChange={handleDirectionChange}
-          size="small"
-        />
-      </div>
-
-      {/* 高性能受控文本输入端 */}
-      <TextInputArea
-        placeholder={placeholder}
-        value={input}
-        onChange={setInput}
-        externalError={error || undefined}
-        showClear={true}
-        allowCopy={true}
-        minRows={5}
-        maxRows={10}
-        onClear={handleClear}
-      />
-
-      {/* 图片 URI 类型劫持警告引导区：
-        - 💡 修复点：彻底废除原生亮色硬编码 hover:bg-blue-100 类名，
-        - 完美向全站 shadcn 暗黑生态看齐，采用标准的 bg-primary/10 混合变体。
-      */}
-      {showImageHint && (
-        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
-          <span className="text-xs font-semibold text-primary tracking-tight">
-            {t('imageDataUriHint')}
-          </span>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={onSwitchToImageMode}
-            className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
-          >
-            {t('switchToImageMode')}
-          </Button>
-        </div>
-      )}
-
-      {/* 5. 编码/解码核心数据承载流卡片 */}
-      {output && (
-        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
-          <div className="flex justify-between items-center select-none">
-            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-              {outputLabel}
-            </span>
-            <CopyButton
-              text={output}
-              className="h-6 px-2 rounded-md border text-[10px] font-bold"
-            />
-          </div>
-
-          <TextInputArea
-            readOnly
-            value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
-            showClear={false}
-            minRows={4}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/__tests__/DecodeResultPaper.test.tsx b/src/pages/Base64Converter/__tests__/DecodeResultPaper.test.tsx
similarity index 95%
rename from src/components/__tests__/DecodeResultPaper.test.tsx
rename to src/pages/Base64Converter/__tests__/DecodeResultPaper.test.tsx
index 5d089e3..a21c35d 100644
--- a/src/components/__tests__/DecodeResultPaper.test.tsx
+++ b/src/pages/Base64Converter/__tests__/DecodeResultPaper.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import DecodeResultPaper from '@/components/DecodeResultPaper';
+import DecodeResultPaper from '../components/DecodeResultPaper';
 
 describe('DecodeResultPaper 组件', () => {
   const defaultProps = {
@@ -27,7 +27,7 @@ describe('DecodeResultPaper 组件', () => {
       expect(screen.getByText(/image\/png/)).toBeInTheDocument();
     });
 
-    it('应通过 formatFileSize 渲染文件大小', () => {
+    it('应通过 formatBytes 渲染文件大小', () => {
       render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
       expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
     });
diff --git a/src/pages/Base64Converter/__tests__/TextMode.test.tsx b/src/pages/Base64Converter/__tests__/TextMode.test.tsx
index be2550c..48ea703 100644
--- a/src/pages/Base64Converter/__tests__/TextMode.test.tsx
+++ b/src/pages/Base64Converter/__tests__/TextMode.test.tsx
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import TextMode from '../TextMode';
+import TextMode from '../components/TextMode';
 
 // Mock CopyButton
 vi.mock('@/components/CopyButton', () => ({
@@ -76,7 +76,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
+      expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
     });
   });
 
@@ -118,7 +118,7 @@ describe('TextMode', () => {
       expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
     });
 
-    fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
+    fireEvent.click(screen.getByRole('button', { name: '清空' }));
 
     await waitFor(() => {
       expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
@@ -182,9 +182,7 @@ describe('TextMode', () => {
     });
 
     await waitFor(() => {
-      expect(
-        screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
-      ).toBeInTheDocument();
+      expect(screen.getByText('检测到二进制数据（如图像），请使用图像选项卡')).toBeInTheDocument();
     });
   });
 });
diff --git a/src/pages/Base64Converter/__tests__/index.test.tsx b/src/pages/Base64Converter/__tests__/index.test.tsx
index 325dc50..da1cb0c 100644
--- a/src/pages/Base64Converter/__tests__/index.test.tsx
+++ b/src/pages/Base64Converter/__tests__/index.test.tsx
@@ -12,7 +12,7 @@ vi.mock('@/config/features', async (importOriginal) => {
 });
 
 // Mock 子组件
-vi.mock('../TextMode', () => ({
+vi.mock('../components/TextMode', () => ({
   default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
     <div data-testid="text-mode">
       TextMode
@@ -21,7 +21,7 @@ vi.mock('../TextMode', () => ({
   ),
 }));
 
-vi.mock('../Base64ConverterSection', () => ({
+vi.mock('../components/Base64ConverterSection', () => ({
   default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
 }));
 
diff --git a/src/pages/Base64Converter/Base64ConverterSection.tsx b/src/pages/Base64Converter/components/Base64ConverterSection.tsx
similarity index 86%
rename from src/pages/Base64Converter/Base64ConverterSection.tsx
rename to src/pages/Base64Converter/components/Base64ConverterSection.tsx
index 469d949..a3ec4ee 100644
--- a/src/pages/Base64Converter/Base64ConverterSection.tsx
+++ b/src/pages/Base64Converter/components/Base64ConverterSection.tsx
@@ -1,14 +1,14 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import { useI18n } from '@/utils/chromeI18n';
 import { CopyButton } from '@/components/CopyButton';
-import DecodeResultPaper from '@/components/DecodeResultPaper';
+import DecodeResultPaper from './DecodeResultPaper';
 import { Button } from '@/components/ui/button';
-import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
+import { downloadBlob } from '@/utils/base64Converter';
+import { formatBytes } from '@/utils/format';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConvertDirection } from '@/types/storage';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { useBase64Converter } from './useBase64Converter';
+import { useBase64Converter } from '../useBase64Converter';
 import { cn } from '@/lib/utils';
 
 const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
@@ -19,8 +19,6 @@ interface Base64ConverterSectionProps {
 }
 
 export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
-  const { t } = useI18n('base64Converter');
-
   const [direction, setDirection] = useStorageState(
     `base64Converter/${mode}Mode/direction`,
     'encode',
@@ -42,12 +40,12 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
     decodedFileName,
     setCustomFileName,
     resetAll,
-    safeFileSelect,
+    handleFileSelect,
     maxFileSizeStr,
   } = useBase64Converter({ mode });
 
   const handleDirectionChange = (next: Base64ConvertDirection) => {
-    if (!next || next === direction) return;
+    if (next === direction) return;
     resetAll();
     setDirection(next);
   };
@@ -62,8 +60,8 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
         <SwitchButtonGroup
           value={direction}
           options={[
-            { value: 'encode', label: t('encode') },
-            { value: 'decode', label: t('decode') },
+            { value: 'encode', label: '编码' },
+            { value: 'decode', label: '解码' },
           ]}
           onChange={handleDirectionChange}
           size="small"
@@ -82,7 +80,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               e.preventDefault();
               setIsDragging(false);
               const file = e.dataTransfer.files[0];
-              if (file) safeFileSelect(file);
+              if (file) void handleFileSelect(file);
             }}
             onClick={() => fileInputRef.current?.click()}
             className={cn(
@@ -101,7 +99,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               hidden
               onChange={(e) => {
                 const file = e.target.files?.[0];
-                if (file) safeFileSelect(file);
+                if (file) void handleFileSelect(file);
               }}
             />
             {isLoading ? (
@@ -122,10 +120,10 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   {info.name}
                 </span>
                 <span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
-                  {formatFileSize(info.size)} · {info.type}
+                  {formatBytes(info.size)} · {info.type}
                 </span>
                 <span className="text-[11px] font-medium text-primary/80 mt-1">
-                  {t('clickOrDropToReplace')}
+                  点击或拖拽以替换文件
                 </span>
               </div>
             ) : (
@@ -136,14 +134,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   <Upload className="w-8 h-8 text-muted-foreground/60" />
                 )}
                 <span className="text-xs font-bold text-foreground/80">
-                  {mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
+                  {mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
                 </span>
                 <span className="text-[10px] font-medium text-muted-foreground/60">
-                  {t('maxFileSize', { max: maxFileSizeStr })}
+                  {`最大文件大小：${maxFileSizeStr}`}
                 </span>
                 {mode === 'image' && (
                   <span className="text-[10px] font-medium text-muted-foreground/50">
-                    {t('supportedFormats')}
+                    {'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
                   </span>
                 )}
               </div>
@@ -160,17 +158,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
             <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
               <div className="flex justify-between items-center select-none">
                 <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-                  {t('base64Output')}
+                  Base64 编码结果
                 </span>
                 <div className="flex gap-2">
                   <CopyButton
                     text={result.rawBase64}
-                    tooltip={t('copyRaw')}
+                    tooltip="复制纯 Base64"
                     className="h-6 px-2 rounded-md border text-[10px] font-bold"
                   />
                   <CopyButton
                     text={result.output}
-                    tooltip={t('copyDataUri')}
+                    tooltip="复制 Data URI"
                     className="h-6 px-2 rounded-md border text-[10px] font-bold"
                   />
                 </div>
@@ -188,16 +186,16 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               <div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
                 <div className="flex gap-4 items-center tabular-nums">
                   <span>
-                    {t('originalSize')}:{' '}
+                    原始大小:{' '}
                     <span className="font-semibold text-foreground/80">
-                      {formatFileSize(result.originalBytes)}
+                      {formatBytes(result.originalBytes)}
                     </span>
                   </span>
                   <span className="text-border/60">|</span>
                   <span>
-                    {t('encodedSize')}:{' '}
+                    编码大小:{' '}
                     <span className="font-semibold text-foreground/80">
-                      {formatFileSize(result.outputBytes)}
+                      {formatBytes(result.outputBytes)}
                     </span>
                   </span>
                 </div>
@@ -208,7 +206,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
-                  {t('clear')}
+                  清空
                 </Button>
               </div>
             </div>
@@ -217,7 +215,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
       ) : (
         <div className="flex flex-col space-y-4">
           <TextInputArea
-            placeholder={t('decodeBase64Placeholder')}
+            placeholder="输入需要解码的 Base64 或 data URI..."
             value={decodeInput}
             onChange={setDecodeInput}
             externalError={decodeError || undefined}
@@ -228,7 +226,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
           />
           {decoded && (
             <DecodeResultPaper
-              title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
+              title={mode === 'image' ? '解码图像' : '解码文件'}
               mimeType={decoded.mimeType}
               blobSize={decoded.blob.size}
               fileName={decodedFileName}
diff --git a/src/pages/Base64Converter/components/DecodeResultPaper.tsx b/src/pages/Base64Converter/components/DecodeResultPaper.tsx
new file mode 100644
index 0000000..84c1ca7
--- /dev/null
+++ b/src/pages/Base64Converter/components/DecodeResultPaper.tsx
@@ -0,0 +1,53 @@
+import { Download } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { formatBytes } from '@/utils/format';
+
+interface DecodeResultPaperProps {
+  title: string;
+  mimeType: string;
+  blobSize: number;
+  fileName: string;
+  onFileNameChange: (name: string) => void;
+  onDownload: () => void;
+  children?: React.ReactNode;
+}
+
+export default function DecodeResultPaper({
+  title,
+  mimeType,
+  blobSize,
+  fileName,
+  onFileNameChange,
+  onDownload,
+  children,
+}: DecodeResultPaperProps) {
+  return (
+    <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
+      <span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
+
+      {children}
+
+      <div className="flex gap-4 mb-3">
+        <span className="text-xs text-muted-foreground">推断的 MIME 类型: {mimeType}</span>
+        <span className="text-xs text-muted-foreground">解码大小: {formatBytes(blobSize)}</span>
+      </div>
+
+      <div className="mb-3">
+        <Label className="block text-xs font-medium text-muted-foreground mb-1">解码后文件名</Label>
+        <Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
+      </div>
+
+      <Button
+        variant="default"
+        onClick={onDownload}
+        disabled={!fileName.trim()}
+        className="w-full rounded-lg font-bold"
+      >
+        <Download className="mr-2 h-4 w-4" />
+        下载
+      </Button>
+    </div>
+  );
+}
diff --git a/src/pages/Base64Converter/components/TextMode.tsx b/src/pages/Base64Converter/components/TextMode.tsx
new file mode 100644
index 0000000..19125cb
--- /dev/null
+++ b/src/pages/Base64Converter/components/TextMode.tsx
@@ -0,0 +1,90 @@
+import TextInputArea from '@/components/TextInputArea';
+import { CopyButton } from '@/components/CopyButton';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { Button } from '@/components/ui/button';
+import { useTextMode } from '../useTextMode';
+
+interface TextModeProps {
+  onSwitchToImageMode?: () => void;
+}
+
+export default function TextMode({ onSwitchToImageMode }: TextModeProps) {
+  const {
+    input,
+    setInput,
+    direction,
+    handleDirectionChange,
+    placeholder,
+    output,
+    outputLabel,
+    error,
+    showImageHint,
+    handleClear,
+  } = useTextMode();
+
+  return (
+    <div className="w-full flex flex-col space-y-4 px-2">
+      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
+        <SwitchButtonGroup
+          value={direction}
+          options={[
+            { value: 'encode', label: '编码' },
+            { value: 'decode', label: '解码' },
+          ]}
+          onChange={handleDirectionChange}
+          size="small"
+        />
+      </div>
+
+      <TextInputArea
+        placeholder={placeholder}
+        value={input}
+        onChange={setInput}
+        externalError={error || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={5}
+        maxRows={10}
+        onClear={handleClear}
+      />
+
+      {showImageHint && (
+        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
+          <span className="text-xs font-semibold text-primary tracking-tight">
+            检测到图片的 data URI，请使用「图像」选项卡进行解码。
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onSwitchToImageMode}
+            className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
+          >
+            切换到图像模式
+          </Button>
+        </div>
+      )}
+
+      {output && (
+        <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
+          <div className="flex justify-between items-center select-none">
+            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
+              {outputLabel}
+            </span>
+            <CopyButton
+              text={output}
+              className="h-6 px-2 rounded-md border text-[10px] font-bold"
+            />
+          </div>
+
+          <TextInputArea
+            readOnly
+            value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
+            showClear={false}
+            minRows={4}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Base64Converter/index.tsx b/src/pages/Base64Converter/index.tsx
index 5dbd5a6..6a8a4e0 100644
--- a/src/pages/Base64Converter/index.tsx
+++ b/src/pages/Base64Converter/index.tsx
@@ -1,8 +1,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 TextMode from './components/TextMode';
+import Base64ConverterSection from './components/Base64ConverterSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 
 const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
@@ -12,7 +11,6 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
 type PageMode = Base64ConverterPageMode;
 
 export default function Index() {
-  const { t } = useI18n('base64Converter');
   const [pageMode, setPageMode] = useStorageState(
     'base64Converter/pageMode',
     'text',
@@ -24,9 +22,9 @@ export default function Index() {
       <SwitchButtonGroup
         value={pageMode}
         options={[
-          { value: 'text', label: t('base64Converter:textMode') },
-          { value: 'file', label: t('base64Converter:fileMode') },
-          { value: 'image', label: t('base64Converter:imageMode') },
+          { value: 'text', label: '文本' },
+          { value: 'file', label: '文件' },
+          { value: 'image', label: '图像' },
         ]}
         onChange={(value: PageMode) => setPageMode(value)}
         size="small"
diff --git a/src/pages/Base64Converter/useBase64Converter.ts b/src/pages/Base64Converter/useBase64Converter.ts
index 9701cc8..89a4baa 100644
--- a/src/pages/Base64Converter/useBase64Converter.ts
+++ b/src/pages/Base64Converter/useBase64Converter.ts
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import type { FileToBase64Result } from '@/utils/base64Converter';
 import {
   base64ToBlob,
@@ -21,8 +20,6 @@ interface UseBase64ConverterProps {
 }
 
 export function useBase64Converter({ mode }: UseBase64ConverterProps) {
-  const { t } = useI18n('base64Converter');
-
   const [result, setResult] = useState<FileToBase64Result | null>(null);
   const [info, setInfo] = useState<FileInfo | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -62,7 +59,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
       setInfo(null);
 
       if (!isFileSizeValid(file.size)) {
-        setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
+        setEncodeError(`文件大小超出限制（最大 ${MAX_FILE_SIZE / 1024 / 1024} MB）`);
         return;
       }
 
@@ -71,7 +68,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
         !isSupportedImageType(file.type) &&
         !isSupportedImageExtension(file.name)
       ) {
-        setEncodeError(t('unsupportedImageType'));
+        setEncodeError('不支持的图像格式');
         return;
       }
 
@@ -87,25 +84,16 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
         if (!cancelRef.current) setResult(res);
       } catch (e) {
         if (!cancelRef.current) {
-          setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
+          setEncodeError(e instanceof Error ? e.message : '转换失败');
         }
       } finally {
         if (!cancelRef.current) setIsLoading(false);
       }
     },
-    [mode, t],
+    [mode],
   );
 
-  const safeFileSelect = useCallback(
-    (file: File) => {
-      handleFileSelect(file).catch((err) => {
-        console.error(`Base64 [${mode}] pipeline crash:`, err);
-      });
-    },
-    [handleFileSelect, mode],
-  );
-
-  const decodePipeline = useMemo(() => {
+  const decodeResult = useMemo(() => {
     const cleanedInput = debouncedDecodeInput.replace(/^data:image\/[a-z+]+;base64,/i, '').trim();
     if (!cleanedInput) return { decoded: null, error: null };
 
@@ -116,13 +104,13 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
       const message = e instanceof Error ? e.message : '';
       return {
         decoded: null,
-        error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
+        error: message === 'Invalid Base64 string' ? 'Base64 字符串无效' : '转换失败',
       };
     }
-  }, [debouncedDecodeInput, t]);
+  }, [debouncedDecodeInput]);
 
-  const decoded = decodePipeline.decoded;
-  const decodeError = decodePipeline.error;
+  const decoded = decodeResult.decoded;
+  const decodeError = decodeResult.error;
 
   const decodedFileName = useMemo(() => {
     if (customFileName) return customFileName;
@@ -147,7 +135,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
     decodedFileName,
     setCustomFileName,
     resetAll,
-    safeFileSelect,
+    handleFileSelect,
     maxFileSizeStr,
   };
 }
diff --git a/src/pages/Base64Converter/useTextMode.ts b/src/pages/Base64Converter/useTextMode.ts
new file mode 100644
index 0000000..73cddcc
--- /dev/null
+++ b/src/pages/Base64Converter/useTextMode.ts
@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { base64ToText, textToBase64 } from '@/utils/base64Converter';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+
+const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
+
+const ERROR_MESSAGES: Record<string, string> = {
+  'Invalid Base64 string': '无效的 Base64 字符串',
+  'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
+    '检测到二进制数据（如图像），请使用图像选项卡',
+};
+
+export function useTextMode() {
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+  const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    setInput(payload);
+    setDebouncedInput(payload);
+    setDirection('decode');
+  }, []);
+
+  useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
+
+  const conversion = useMemo(() => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed) return { output: '', error: null };
+
+    try {
+      if (direction === 'encode') {
+        const result = textToBase64(debouncedInput);
+        return { output: result.output, error: null };
+      }
+      const decoded = base64ToText(trimmed);
+      return { output: decoded, error: null };
+    } catch (e) {
+      const message = e instanceof Error ? e.message : '';
+      return {
+        output: '',
+        error: ERROR_MESSAGES[message] || message || '转换失败',
+      };
+    }
+  }, [debouncedInput, direction]);
+
+  const output = conversion.output;
+  const error = conversion.error;
+
+  const placeholder =
+    direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
+  const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
+
+  const showImageHint = direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input);
+
+  const handleDirectionChange = (value: 'encode' | 'decode') => {
+    if (value === direction) return;
+    setDirection(value);
+    setInput('');
+    setDebouncedInput('');
+  };
+
+  const handleClear = () => {
+    setInput('');
+    setDebouncedInput('');
+  };
+
+  return {
+    input,
+    setInput,
+    direction,
+    handleDirectionChange,
+    placeholder,
+    output,
+    outputLabel,
+    error,
+    showImageHint,
+    handleClear,
+  };
+}
diff --git a/src/pages/Dashboard/__tests__/dashboardFeatures.test.ts b/src/pages/Dashboard/__tests__/dashboardFeatures.test.ts
new file mode 100644
index 0000000..c52609c
--- /dev/null
+++ b/src/pages/Dashboard/__tests__/dashboardFeatures.test.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as featureConfig from '@/config/features';
+import { resolveDashboardFeatures } from '../dashboardFeatures';
+
+describe('resolveDashboardFeatures', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('应按 keys 顺序返回可见工具，并排除 dashboard', () => {
+    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
+
+    expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
+    expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
+  });
+
+  it('缺少 themeColorKey 但有 icon 的工具仍应显示', () => {
+    const originalGetFeatureByKey = featureConfig.getFeatureByKey;
+    vi.spyOn(featureConfig, 'getFeatureByKey').mockImplementation((key) => {
+      const feature = originalGetFeatureByKey(key);
+      if (key === 'timestamp' && feature) {
+        return { ...feature, themeColorKey: undefined };
+      }
+      return feature;
+    });
+
+    const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']);
+
+    expect(items.map((item) => item.key)).toEqual(['timestamp']);
+  });
+
+  it('应过滤不在 visiblePages 中的工具', () => {
+    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']);
+
+    expect(items.map((item) => item.key)).toEqual(['timestamp']);
+  });
+
+  it('visiblePages 无匹配工具时应返回空列表', () => {
+    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']);
+
+    expect(items).toEqual([]);
+  });
+
+  it('应过滤缺少 icon 的工具', () => {
+    const items = resolveDashboardFeatures(['dashboard', 'timestamp'], ['dashboard', 'timestamp']);
+
+    expect(items.map((item) => item.key)).toEqual(['timestamp']);
+  });
+});
diff --git a/src/pages/Dashboard/__tests__/index.test.tsx b/src/pages/Dashboard/__tests__/index.test.tsx
new file mode 100644
index 0000000..60d73b2
--- /dev/null
+++ b/src/pages/Dashboard/__tests__/index.test.tsx
@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
+import Index from '../index';
+
+const mockNavigateTo = vi.fn();
+const mockUseDashboard = vi.fn();
+
+vi.mock('../useDashboard', () => ({
+  useDashboard: () => mockUseDashboard(),
+}));
+
+function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
+  return resolveDashboardFeatures([key], [key])[0]!;
+}
+
+describe('Dashboard 页面', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseDashboard.mockReturnValue({
+      visibleFeatures: [buildFeatureItem('timestamp'), buildFeatureItem('jwt')],
+      recentFeatures: [],
+      showRecent: false,
+      navigateTo: mockNavigateTo,
+    });
+  });
+
+  it('应渲染全部工具网格', () => {
+    render(<Index />);
+
+    expect(screen.getByText('全部工具')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '时间戳' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
+  });
+
+  it('点击工具卡片应触发 navigateTo', async () => {
+    const user = userEvent.setup();
+    render(<Index />);
+
+    await user.click(screen.getByRole('button', { name: '时间戳' }));
+
+    expect(mockNavigateTo).toHaveBeenCalledTimes(1);
+    expect(mockNavigateTo).toHaveBeenCalledWith('timestamp');
+  });
+
+  it('有最近使用数据时应显示最近使用区块', () => {
+    mockUseDashboard.mockReturnValue({
+      visibleFeatures: [buildFeatureItem('timestamp')],
+      recentFeatures: [buildFeatureItem('jwt')],
+      showRecent: true,
+      navigateTo: mockNavigateTo,
+    });
+
+    render(<Index />);
+
+    expect(screen.getByText('最近使用')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
+  });
+
+  it('无最近使用数据时不应显示最近使用区块', () => {
+    render(<Index />);
+
+    expect(screen.queryByText('最近使用')).not.toBeInTheDocument();
+  });
+
+  it('点击最近使用按钮应触发 navigateTo', async () => {
+    const user = userEvent.setup();
+    mockUseDashboard.mockReturnValue({
+      visibleFeatures: [buildFeatureItem('timestamp')],
+      recentFeatures: [buildFeatureItem('jwt')],
+      showRecent: true,
+      navigateTo: mockNavigateTo,
+    });
+
+    render(<Index />);
+
+    await user.click(screen.getByRole('button', { name: 'JWT 解析' }));
+
+    expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
+  });
+
+  it('无可见工具时应显示空状态', () => {
+    mockUseDashboard.mockReturnValue({
+      visibleFeatures: [],
+      recentFeatures: [],
+      showRecent: false,
+      navigateTo: mockNavigateTo,
+    });
+
+    render(<Index />);
+
+    expect(screen.getByText('没有可用的工具')).toBeInTheDocument();
+  });
+});
diff --git a/src/pages/Dashboard/__tests__/useDashboard.test.ts b/src/pages/Dashboard/__tests__/useDashboard.test.ts
new file mode 100644
index 0000000..180c2bd
--- /dev/null
+++ b/src/pages/Dashboard/__tests__/useDashboard.test.ts
@@ -0,0 +1,78 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useRouter } from '@/providers/RouterProvider';
+import { useDashboard } from '../useDashboard';
+import type { PageType } from '@/types/storage';
+
+vi.mock('@/providers/RouterProvider', () => ({
+  useRouter: vi.fn(),
+}));
+
+const mockNavigateTo = vi.fn();
+
+function mockRouterState(
+  overrides: {
+    visiblePages?: PageType[];
+    pageOrder?: PageType[];
+    recentlyUsedTools?: PageType[];
+  } = {},
+) {
+  vi.mocked(useRouter).mockReturnValue({
+    currentPage: 'dashboard',
+    visiblePages: overrides.visiblePages ?? ['dashboard', 'timestamp', 'jwt'],
+    pageOrder: overrides.pageOrder ?? ['jwt', 'timestamp'],
+    recentlyUsedTools: overrides.recentlyUsedTools ?? [],
+    isLoaded: true,
+    navigateTo: mockNavigateTo,
+    goHome: vi.fn(),
+    setVisiblePages: vi.fn(),
+    setPageOrder: vi.fn(),
+  });
+}
+
+describe('useDashboard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('应透传 router 中的 navigateTo', () => {
+    mockRouterState();
+
+    const { result } = renderHook(() => useDashboard());
+
+    expect(result.current.navigateTo).toBe(mockNavigateTo);
+  });
+
+  it('recentlyUsedTools 有可见工具时应显示最近使用', () => {
+    mockRouterState({
+      visiblePages: ['dashboard', 'timestamp', 'jwt'],
+      recentlyUsedTools: ['timestamp', 'jwt'],
+    });
+
+    const { result } = renderHook(() => useDashboard());
+
+    expect(result.current.showRecent).toBe(true);
+    expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp', 'jwt']);
+  });
+
+  it('recentlyUsedTools 为空时不应显示最近使用', () => {
+    mockRouterState({ recentlyUsedTools: [] });
+
+    const { result } = renderHook(() => useDashboard());
+
+    expect(result.current.showRecent).toBe(false);
+    expect(result.current.recentFeatures).toEqual([]);
+  });
+
+  it('最近使用中的不可见工具应被过滤', () => {
+    mockRouterState({
+      visiblePages: ['dashboard', 'timestamp'],
+      recentlyUsedTools: ['jwt', 'timestamp'],
+    });
+
+    const { result } = renderHook(() => useDashboard());
+
+    expect(result.current.showRecent).toBe(true);
+    expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp']);
+  });
+});
diff --git a/src/pages/Dashboard/dashboardFeatures.ts b/src/pages/Dashboard/dashboardFeatures.ts
new file mode 100644
index 0000000..fee39ad
--- /dev/null
+++ b/src/pages/Dashboard/dashboardFeatures.ts
@@ -0,0 +1,34 @@
+import { getFeatureByKey, type FeatureConfig } from '@/config/features';
+import type { PageType } from '@/types/storage';
+
+export type DashboardFeature = FeatureConfig & {
+  icon: NonNullable<FeatureConfig['icon']>;
+};
+
+export interface DashboardFeatureItem {
+  key: PageType;
+  feature: DashboardFeature;
+}
+
+function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature {
+  return feature.icon != null;
+}
+
+export function resolveDashboardFeatures(
+  keys: PageType[],
+  visiblePages: PageType[],
+): DashboardFeatureItem[] {
+  const visibleSet = new Set(visiblePages);
+  const items: DashboardFeatureItem[] = [];
+
+  for (const key of keys) {
+    if (!visibleSet.has(key)) continue;
+
+    const feature = getFeatureByKey(key);
+    if (!feature || !isDashboardFeature(feature)) continue;
+
+    items.push({ key, feature });
+  }
+
+  return items;
+}
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index dff8264..69acdde 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,43 +1,24 @@
-import { useRouter } from '@/providers/RouterProvider';
-import { getFeatureByKey } from '@/config/features';
-import type { PageType } from '@/types/storage';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
+import { useDashboard } from './useDashboard';
 
 export default function Index() {
-  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
-  const { t } = useI18n(['features']);
-
-  const visibleSet = new Set<string>(visiblePages);
-
-  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 = 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;
+  const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
 
   return (
     <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
-      {/* 最近使用 */}
       {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!;
+              const IconComponent = feature.icon;
               return (
                 <button
                   key={key}
                   type="button"
-                  onClick={() => navigateTo(key as PageType)}
+                  onClick={() => navigateTo(key)}
                   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',
@@ -46,7 +27,7 @@ export default function Index() {
                   )}
                 >
                   <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
-                  {t(feature!.labelKey)}
+                  {feature.label}
                 </button>
               );
             })}
@@ -54,40 +35,45 @@ export default function Index() {
         </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-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
-          {visibleFeatures.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
+        {visibleFeatures.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
+        ) : (
+          <div
+            className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
+          >
+            {visibleFeatures.map(({ key, feature }) => {
+              const IconComponent = feature.icon;
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => navigateTo(key)}
                   className={cn(
-                    'h-5 w-5 text-muted-foreground/70',
-                    'group-hover:text-foreground',
-                    'transition-colors',
+                    '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',
                   )}
-                />
-                <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>
+                >
+                  <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">
+                    {feature.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/Dashboard/useDashboard.ts b/src/pages/Dashboard/useDashboard.ts
new file mode 100644
index 0000000..6780990
--- /dev/null
+++ b/src/pages/Dashboard/useDashboard.ts
@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { useRouter } from '@/providers/RouterProvider';
+import type { PageType } from '@/types/storage';
+import { resolveDashboardFeatures, type DashboardFeatureItem } from './dashboardFeatures';
+
+export interface UseDashboardReturn {
+  visibleFeatures: DashboardFeatureItem[];
+  recentFeatures: DashboardFeatureItem[];
+  showRecent: boolean;
+  navigateTo: (page: PageType) => void;
+}
+
+export function useDashboard(): UseDashboardReturn {
+  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
+
+  const visibleFeatures = useMemo(
+    () => resolveDashboardFeatures(pageOrder, visiblePages),
+    [pageOrder, visiblePages],
+  );
+
+  const recentFeatures = useMemo(
+    () => resolveDashboardFeatures(recentlyUsedTools, visiblePages),
+    [recentlyUsedTools, visiblePages],
+  );
+
+  const showRecent = recentFeatures.length > 0;
+
+  return { visibleFeatures, recentFeatures, showRecent, navigateTo };
+}
diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx
deleted file mode 100644
index 4218aff..0000000
--- a/src/pages/JsonTools/JsonConvertSection.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
-import { formatBytes } from '@/utils/format';
-import { CopyButton } from '@/components/CopyButton';
-import TextInputArea from '@/components/TextInputArea';
-import { validateJson } from '@/utils/jsonFormatter';
-import { cn } from '@/lib/utils';
-
-export interface ConvertResult {
-  output: string;
-  originalBytes: number;
-  outputBytes: number;
-}
-
-export type ConvertFunction = (text: string) => ConvertResult;
-
-interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  translationPrefix: string;
-  convertFunction: ConvertFunction;
-}
-
-export default function JsonConvertSection({
-  translationPrefix,
-  convertFunction,
-  className,
-  ...props
-}: JsonConvertSectionProps) {
-  const { t } = useI18n('jsonFormat');
-
-  const [input, setInput] = useState('');
-  const [debouncedInput, setDebouncedInput] = useState('');
-
-  const pk = translationPrefix;
-
-  // Debounce input
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [input]);
-
-  const error = useMemo(() => {
-    return validateJson(debouncedInput);
-  }, [debouncedInput]);
-
-  const conversionPipeline = useMemo(() => {
-    const trimmed = debouncedInput.trim();
-    if (!trimmed || error) return null;
-
-    try {
-      return convertFunction(debouncedInput);
-    } catch (e) {
-      // 捕获可能从外部转换器（如 YAML.stringify）中抛出的底层异常
-      return {
-        isRuntimeError: true,
-        errorMessage: e instanceof Error ? e.message : String(e),
-      };
-    }
-  }, [debouncedInput, error, convertFunction]);
-
-  const runtimeError =
-    conversionPipeline && 'isRuntimeError' in conversionPipeline
-      ? conversionPipeline.errorMessage
-      : null;
-  const result =
-    conversionPipeline && !('isRuntimeError' in conversionPipeline)
-      ? (conversionPipeline as ConvertResult)
-      : null;
-
-  return (
-    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
-      {/* 输入区 */}
-      <TextInputArea
-        placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
-        value={input}
-        onChange={setInput}
-        externalError={error || runtimeError || undefined}
-        showClear={true}
-        allowCopy={true}
-        minRows={7}
-        maxRows={14}
-        onClear={() => setInput('')}
-      />
-
-      {/* 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>
-
-              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
-                <span>
-                  {t('jsonFormat:originalSize')}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.originalBytes)}
-                  </span>
-                </span>
-                <span className="text-border/60">|</span>
-                <span>
-                  {t('jsonFormat:formattedSize')}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.outputBytes)}
-                  </span>
-                </span>
-              </div>
-            </div>
-
-            <CopyButton
-              text={result.output}
-              className="h-6 w-6 rounded-md border text-muted-foreground"
-            />
-          </div>
-
-          <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>
-      ) : (
-        <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`)}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/JsonFormatSection.tsx
deleted file mode 100644
index 116c06a..0000000
--- a/src/pages/JsonTools/JsonFormatSection.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
-import {
-  formatJson,
-  type JsonFormatOptions,
-  type JsonFormatResult,
-  validateJson,
-} from '@/utils/jsonFormatter';
-import { formatBytes } from '@/utils/format';
-import { CopyButton } from '@/components/CopyButton';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import TextInputArea from '@/components/TextInputArea';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-
-export default function JsonFormatSection() {
-  const { t } = useI18n('jsonFormat');
-
-  const [input, setInput] = useState('');
-  const [debouncedInput, setDebouncedInput] = useState('');
-  const [indentSize, setIndentSize] = useState<number>(2);
-  const [sortKeys, setSortKeys] = useState(false);
-
-  // Debounce input
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [input]);
-
-  const error = useMemo(() => {
-    return validateJson(debouncedInput);
-  }, [debouncedInput]);
-
-  // Real-time formatting pipeline
-  const formattedPipeline = useMemo(() => {
-    const trimmed = debouncedInput.trim();
-    if (!trimmed || error) return null;
-
-    try {
-      const options: JsonFormatOptions = { indentSize, sortKeys };
-      return formatJson(debouncedInput, options);
-    } catch (e) {
-      return {
-        isRuntimeError: true,
-        errorMessage: e instanceof SyntaxError ? e.message : String(e),
-      };
-    }
-  }, [debouncedInput, error, indentSize, sortKeys]);
-
-  const runtimeError =
-    formattedPipeline && 'isRuntimeError' in formattedPipeline
-      ? formattedPipeline.errorMessage
-      : null;
-  const result =
-    formattedPipeline && !('isRuntimeError' in formattedPipeline)
-      ? (formattedPipeline as JsonFormatResult)
-      : null;
-
-  return (
-    <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">
-          {/* 缩进配置区 */}
-          <div className="flex gap-2 items-center shrink-0 select-none">
-            <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-              {t('jsonFormat:indentSize')}
-            </span>
-            <SwitchButtonGroup
-              value={indentSize}
-              onChange={(v) => setIndentSize(Number(v))}
-              options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
-              size="small"
-            />
-          </div>
-
-          <div className="h-4 w-px bg-border/60" />
-
-          {/* 键名排序区 */}
-          <div
-            onClick={() => setSortKeys(!sortKeys)}
-            className="flex items-center gap-2 cursor-pointer select-none group py-1"
-          >
-            <Checkbox
-              id="sort-keys-checkbox"
-              checked={sortKeys}
-              onClick={(e) => e.stopPropagation()}
-              onCheckedChange={(checked) => setSortKeys(checked === true)}
-              className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm"
-            />
-            <Label
-              htmlFor="sort-keys-checkbox"
-              className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
-            >
-              {t('jsonFormat:sortKeys')}
-            </Label>
-          </div>
-        </div>
-      </div>
-
-      {/* 满血版输入终端 */}
-      <TextInputArea
-        placeholder={t('jsonFormat:inputPlaceholder')}
-        value={input}
-        onChange={setInput}
-        externalError={error || runtimeError || undefined}
-        showClear={true}
-        allowCopy={true}
-        minRows={8}
-        maxRows={15}
-        onClear={() => setInput('')}
-      />
-
-      {/* 格式化结果流面板展示 */}
-      {result && result.formatted ? (
-        <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:outputLabel')}
-              </span>
-
-              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
-                <span>
-                  {t('jsonFormat:originalSize')}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.originalBytes)}
-                  </span>
-                </span>
-                <span className="text-border/60">|</span>
-                <span>
-                  {t('jsonFormat:formattedSize')}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.formattedBytes)}
-                  </span>
-                </span>
-              </div>
-            </div>
-
-            <CopyButton
-              text={result.formatted}
-              className="h-6 w-6 rounded-md border text-muted-foreground"
-            />
-          </div>
-
-          <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>
-        </div>
-      ) : (
-        /* 空状态指示引导区 */
-        <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:emptyHint')}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/pages/JsonTools/__tests__/index.test.tsx b/src/pages/JsonTools/__tests__/index.test.tsx
new file mode 100644
index 0000000..66c0f00
--- /dev/null
+++ b/src/pages/JsonTools/__tests__/index.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Index from '../index';
+
+describe('JsonTools 页面', () => {
+  it('应该渲染模式切换按钮', () => {
+    render(<Index />);
+    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/pages/JsonTools/DiffNavigator.tsx b/src/pages/JsonTools/components/DiffNavigator.tsx
similarity index 87%
rename from src/pages/JsonTools/DiffNavigator.tsx
rename to src/pages/JsonTools/components/DiffNavigator.tsx
index 9298b39..7392bcc 100644
--- a/src/pages/JsonTools/DiffNavigator.tsx
+++ b/src/pages/JsonTools/components/DiffNavigator.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -19,8 +18,6 @@ export default function DiffNavigator({
   className,
   ...props
 }: DiffNavigatorProps) {
-  const { t } = useI18n('jsonDiff');
-
   const isFirst = currentIndex <= 0;
   const isLast = currentIndex >= total - 1;
 
@@ -33,9 +30,7 @@ export default function DiffNavigator({
         )}
         {...props}
       >
-        <span className="text-xs font-semibold text-muted-foreground/90">
-          {t('jsonDiff:noDiffs')}
-        </span>
+        <span className="text-xs font-semibold text-muted-foreground/90">无差异</span>
       </div>
     );
   }
@@ -48,11 +43,10 @@ export default function DiffNavigator({
       )}
       {...props}
     >
-      {/* 上一处差异按钮 */}
       <button
         type="button"
         disabled={isFirst}
-        aria-label={t('jsonDiff:previousDiff')}
+        aria-label="上一个"
         onClick={onPrev}
         className={cn(
           'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
@@ -68,11 +62,10 @@ export default function DiffNavigator({
         {total}
       </span>
 
-      {/* 下一处差异按钮 */}
       <button
         type="button"
         disabled={isLast}
-        aria-label={t('jsonDiff:nextDiff')}
+        aria-label="下一个"
         onClick={onNext}
         className={cn(
           'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
diff --git a/src/pages/JsonTools/DiffResult.tsx b/src/pages/JsonTools/components/DiffResult.tsx
similarity index 95%
rename from src/pages/JsonTools/DiffResult.tsx
rename to src/pages/JsonTools/components/DiffResult.tsx
index 58cc318..9a5a668 100644
--- a/src/pages/JsonTools/DiffResult.tsx
+++ b/src/pages/JsonTools/components/DiffResult.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import JsonTree from './JsonTree';
-import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
+import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from '../types';
 
 export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
   result: DiffResultType;
@@ -17,8 +16,6 @@ export default function DiffResult({
   className,
   ...props
 }: DiffResultProps) {
-  const { t } = useI18n('jsonDiff');
-
   if (viewMode === 'sideBySide') {
     return (
       <div
@@ -26,11 +23,11 @@ export default function DiffResult({
         {...props}
       >
         <div className="flex-1 min-w-0">
-          <SectionLabel text={t('jsonDiff:leftLabel')} />
+          <SectionLabel text="原始 JSON" />
           <JsonTree node={result.root} side="left" activePath={activePath} />
         </div>
         <div className="flex-1 min-w-0">
-          <SectionLabel text={t('jsonDiff:rightLabel')} />
+          <SectionLabel text="目标 JSON" />
           <JsonTree node={result.root} side="right" activePath={activePath} />
         </div>
       </div>
@@ -136,7 +133,6 @@ const UnifiedView = ({ node, depth, activePath }: UnifiedViewProps) => {
     );
   }
 
-  // 容器节点整块渲染处理
   if (node.type === 'added') {
     return (
       <UnifiedRow
diff --git a/src/pages/JsonTools/components/JsonConvertSection.tsx b/src/pages/JsonTools/components/JsonConvertSection.tsx
new file mode 100644
index 0000000..8375a5e
--- /dev/null
+++ b/src/pages/JsonTools/components/JsonConvertSection.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+import TextInputArea from '@/components/TextInputArea';
+import JsonResultPanel from './JsonResultPanel';
+import { validateJson } from '@/utils/jsonFormatter';
+import { cn } from '@/lib/utils';
+import type { ConvertFunction, ConvertResult } from '../types';
+
+const CONVERT_LABELS: Record<
+  string,
+  { inputPlaceholder: string; outputLabel: string; emptyHint: string }
+> = {
+  yaml: {
+    inputPlaceholder: '输入需要转换的 JSON...',
+    outputLabel: 'YAML 结果',
+    emptyHint: '输入 JSON 后点击转换',
+  },
+  toml: {
+    inputPlaceholder: '输入需要转换的 JSON...',
+    outputLabel: 'TOML 结果',
+    emptyHint: '输入 JSON 后点击转换',
+  },
+  minify: {
+    inputPlaceholder: '输入需要压缩的 JSON...',
+    outputLabel: '压缩结果',
+    emptyHint: '输入 JSON 后点击压缩',
+  },
+};
+
+interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  mode: string;
+  convertFunction: ConvertFunction;
+}
+
+export default function JsonConvertSection({
+  mode,
+  convertFunction,
+  className,
+  ...props
+}: JsonConvertSectionProps) {
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+
+  const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const error = useMemo(() => {
+    return validateJson(debouncedInput);
+  }, [debouncedInput]);
+
+  const { result, runtimeError } = useMemo((): {
+    result: ConvertResult | null;
+    runtimeError: string | null;
+  } => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed || error) return { result: null, runtimeError: null };
+
+    try {
+      return { result: convertFunction(debouncedInput), runtimeError: null };
+    } catch (e) {
+      return {
+        result: null,
+        runtimeError: e instanceof Error ? e.message : String(e),
+      };
+    }
+  }, [debouncedInput, error, convertFunction]);
+
+  return (
+    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
+      <TextInputArea
+        placeholder={labels.inputPlaceholder}
+        value={input}
+        onChange={setInput}
+        externalError={error || runtimeError || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={7}
+        maxRows={14}
+        onClear={() => setInput('')}
+      />
+
+      {result?.output ? (
+        <JsonResultPanel
+          title={labels.outputLabel}
+          content={result.output}
+          originalBytes={result.originalBytes}
+          outputBytes={result.outputBytes}
+          maxHeight="380px"
+        />
+      ) : (
+        <EmptyPlaceholder>
+          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
+        </EmptyPlaceholder>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/JsonTools/JsonDiffInput.tsx b/src/pages/JsonTools/components/JsonDiffInput.tsx
similarity index 100%
rename from src/pages/JsonTools/JsonDiffInput.tsx
rename to src/pages/JsonTools/components/JsonDiffInput.tsx
diff --git a/src/pages/JsonTools/components/JsonFormatSection.tsx b/src/pages/JsonTools/components/JsonFormatSection.tsx
new file mode 100644
index 0000000..9bd7144
--- /dev/null
+++ b/src/pages/JsonTools/components/JsonFormatSection.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  formatJson,
+  type JsonFormatOptions,
+  type JsonFormatResult,
+  validateJson,
+} from '@/utils/jsonFormatter';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import TextInputArea from '@/components/TextInputArea';
+import JsonResultPanel from './JsonResultPanel';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function JsonFormatSection() {
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+  const [indentSize, setIndentSize] = useState<number>(2);
+  const [sortKeys, setSortKeys] = useState(false);
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const error = useMemo(() => {
+    return validateJson(debouncedInput);
+  }, [debouncedInput]);
+
+  const { result, runtimeError } = useMemo((): {
+    result: JsonFormatResult | null;
+    runtimeError: string | null;
+  } => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed || error) return { result: null, runtimeError: null };
+
+    try {
+      const options: JsonFormatOptions = { indentSize, sortKeys };
+      return { result: formatJson(debouncedInput, options), runtimeError: null };
+    } catch (e) {
+      return {
+        result: null,
+        runtimeError: e instanceof SyntaxError ? e.message : String(e),
+      };
+    }
+  }, [debouncedInput, error, indentSize, sortKeys]);
+
+  return (
+    <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">
+          <div className="flex gap-2 items-center shrink-0 select-none">
+            <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
+              缩进
+            </span>
+            <SwitchButtonGroup
+              value={indentSize}
+              onChange={(v) => setIndentSize(Number(v))}
+              options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
+              size="small"
+            />
+          </div>
+
+          <div className="h-4 w-px bg-border/60" />
+
+          <div
+            onClick={() => setSortKeys(!sortKeys)}
+            className="flex items-center gap-2 cursor-pointer select-none group py-1"
+          >
+            <Checkbox
+              id="sort-keys-checkbox"
+              checked={sortKeys}
+              onClick={(e) => e.stopPropagation()}
+              onCheckedChange={(checked) => setSortKeys(checked === true)}
+              className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm"
+            />
+            <Label
+              htmlFor="sort-keys-checkbox"
+              className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
+            >
+              键名排序
+            </Label>
+          </div>
+        </div>
+      </div>
+
+      <TextInputArea
+        placeholder="输入需要格式化的 JSON..."
+        value={input}
+        onChange={setInput}
+        externalError={error || runtimeError || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={8}
+        maxRows={15}
+        onClear={() => setInput('')}
+      />
+
+      {result?.formatted ? (
+        <JsonResultPanel
+          title="格式化结果"
+          content={result.formatted}
+          originalBytes={result.originalBytes}
+          outputBytes={result.formattedBytes}
+        />
+      ) : (
+        <EmptyPlaceholder>
+          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
+        </EmptyPlaceholder>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/JsonTools/components/JsonResultPanel.tsx b/src/pages/JsonTools/components/JsonResultPanel.tsx
new file mode 100644
index 0000000..b0b820f
--- /dev/null
+++ b/src/pages/JsonTools/components/JsonResultPanel.tsx
@@ -0,0 +1,53 @@
+import { formatBytes } from '@/utils/format';
+import { CopyButton } from '@/components/CopyButton';
+
+export interface JsonResultPanelProps {
+  title: string;
+  content: string;
+  originalBytes: number;
+  outputBytes: number;
+  outputSizeLabel?: string;
+  maxHeight?: string;
+}
+
+export default function JsonResultPanel({
+  title,
+  content,
+  originalBytes,
+  outputBytes,
+  outputSizeLabel = '格式化后大小',
+  maxHeight = '420px',
+}: JsonResultPanelProps) {
+  return (
+    <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">
+            {title}
+          </span>
+
+          <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
+            <span>
+              原始大小:{' '}
+              <span className="font-semibold text-foreground/80">{formatBytes(originalBytes)}</span>
+            </span>
+            <span className="text-border/60">|</span>
+            <span>
+              {outputSizeLabel}:{' '}
+              <span className="font-semibold text-foreground/80">{formatBytes(outputBytes)}</span>
+            </span>
+          </div>
+        </div>
+
+        <CopyButton text={content} className="h-6 w-6 rounded-md border text-muted-foreground" />
+      </div>
+
+      <div
+        className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text"
+        style={{ maxHeight }}
+      >
+        {content}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/JsonTools/JsonTree.tsx b/src/pages/JsonTools/components/JsonTree.tsx
similarity index 90%
rename from src/pages/JsonTools/JsonTree.tsx
rename to src/pages/JsonTools/components/JsonTree.tsx
index ac510d0..e3ee6f2 100644
--- a/src/pages/JsonTools/JsonTree.tsx
+++ b/src/pages/JsonTools/components/JsonTree.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
-import type { DiffNode, DiffType } from './types';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import type { DiffNode, DiffType } from '../types';
 import { cn } from '@/lib/utils';
 
 export type TreeSide = 'left' | 'right';
@@ -82,14 +82,12 @@ const NodeRow = React.memo(
           ? false
           : onActivePath || depth < defaultExpandDepth;
 
-    // 当激活路径精准定位到本行时，平滑滚动至容器中心
     useEffect(() => {
       if (activePath === node.path) {
         rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
       }
     }, [activePath, node.path]);
 
-    // 占位空行分支：必须加 h-[22px] 锁定绝对等高，防止两侧文本高度塌陷发生高低错位
     if (!shouldRenderOnSide(node.type, side)) {
       return (
         <div
@@ -124,7 +122,6 @@ const NodeRow = React.memo(
 
       return (
         <div ref={rowRef} className="w-full flex flex-col">
-          {/* 大容器开端行 */}
           <div
             onClick={() => setOverride(expanded ? 'closed' : 'open')}
             className={cn(
@@ -135,7 +132,6 @@ const NodeRow = React.memo(
             )}
             style={indentStyle}
           >
-            {/* 折叠小箭头：升级为精巧的 Lucide SVG 矢量微动效 */}
             <span className="w-3.5 h-3.5 flex items-center justify-center text-muted-foreground/80 shrink-0">
               {expanded ? (
                 <ChevronDown className="h-3 w-3" />
@@ -164,7 +160,6 @@ const NodeRow = React.memo(
             )}
           </div>
 
-          {/* 容器子节点递归区 */}
           {expanded && (
             <div className={indentClass}>
               {node.children.map((child, idx) => (
@@ -181,7 +176,6 @@ const NodeRow = React.memo(
             </div>
           )}
 
-          {/* 大容器收尾行 */}
           {expanded && (
             <div
               className="text-muted-foreground/80 font-mono text-xs py-0.5 h-[22px] leading-relaxed"
@@ -195,7 +189,6 @@ const NodeRow = React.memo(
       );
     }
 
-    // 叶子数据行分支
     return (
       <div
         ref={rowRef}
@@ -207,7 +200,7 @@ const NodeRow = React.memo(
         )}
         style={indentStyle}
       >
-        <span className="w-3.5 shrink-0" /> {/* 与上方的折叠键轴线严格对齐 */}
+        <span className="w-3.5 shrink-0" />
         {!isRoot && (
           <span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
         )}
@@ -231,7 +224,6 @@ export default function JsonTree({
   ...props
 }: JsonTreeProps) {
   return (
-    /* 最外层承载器：统一收拢至标准的 bg-card 与等宽 tabular-nums 控制轴 */
     <div
       className={cn(
         'rounded-xl border border-border bg-card text-card-foreground font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-2.5 tabular-nums select-text',
diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
index 359b851..fe44397 100644
--- a/src/pages/JsonTools/index.tsx
+++ b/src/pages/JsonTools/index.tsx
@@ -1,10 +1,10 @@
-import { useI18n } from '@/utils/chromeI18n';
-import JsonDiffInput from './JsonDiffInput';
-import DiffResult from './DiffResult';
-import DiffNavigator from './DiffNavigator';
-import JsonFormatSection from './JsonFormatSection';
-import JsonConvertSection from './JsonConvertSection';
+import JsonDiffInput from './components/JsonDiffInput';
+import DiffResult from './components/DiffResult';
+import DiffNavigator from './components/DiffNavigator';
+import JsonFormatSection from './components/JsonFormatSection';
+import JsonConvertSection from './components/JsonConvertSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { useJsonTools } from './useJsonTools';
 import type { JsonToolsPageMode } from '@/types/storage';
 import type { ViewMode } from './types';
@@ -12,7 +12,6 @@ import type { ViewMode } from './types';
 type PageMode = JsonToolsPageMode;
 
 export default function Index() {
-  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
   const {
     pageMode,
     setPageMode,
@@ -41,11 +40,11 @@ export default function Index() {
         value={pageMode}
         onChange={(v: PageMode) => setPageMode(v)}
         options={[
-          { value: 'diff', label: t('jsonFormat:diffMode') },
-          { value: 'format', label: t('jsonFormat:formatMode') },
-          { value: 'yaml', label: t('jsonFormat:yamlMode') },
-          { value: 'toml', label: t('jsonFormat:tomlMode') },
-          { value: 'minify', label: t('jsonFormat:minifyMode') },
+          { value: 'diff', label: '差异比较' },
+          { value: 'format', label: '格式化' },
+          { value: 'yaml', label: 'YAML' },
+          { value: 'toml', label: 'TOML' },
+          { value: 'minify', label: '压缩' },
         ]}
         size="small"
         className="w-full sm:w-auto"
@@ -58,8 +57,8 @@ export default function Index() {
               value={viewMode}
               onChange={(v: ViewMode) => setViewMode(v)}
               options={[
-                { value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
-                { value: 'unified', label: t('jsonDiff:unifiedMode') },
+                { value: 'sideBySide', label: '并排' },
+                { value: 'unified', label: '统一' },
               ]}
               size="small"
             />
@@ -67,16 +66,16 @@ export default function Index() {
 
           <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
             <JsonDiffInput
-              label={t('jsonDiff:leftLabel')}
-              placeholder={t('jsonDiff:leftPlaceholder')}
+              label="原始 JSON"
+              placeholder="输入原始 JSON..."
               value={leftInput}
               onChange={setLeftInput}
               error={leftError}
               minRows={9}
             />
             <JsonDiffInput
-              label={t('jsonDiff:rightLabel')}
-              placeholder={t('jsonDiff:rightPlaceholder')}
+              label="目标 JSON"
+              placeholder="输入目标 JSON..."
               value={rightInput}
               onChange={setRightInput}
               error={rightError}
@@ -97,21 +96,21 @@ export default function Index() {
               <DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
             </div>
           ) : (
-            <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 ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
-              </p>
-            </div>
+            <EmptyPlaceholder className="min-h-[140px]" messageClassName="max-w-[260px]">
+              {leftError || rightError
+                ? '请修正上方 JSON 的语法错误以开启实时流式比对'
+                : '输入两侧 JSON 后点击比较'}
+            </EmptyPlaceholder>
           )}
         </div>
       ) : pageMode === 'format' ? (
         <JsonFormatSection />
       ) : pageMode === 'yaml' ? (
-        <JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
+        <JsonConvertSection mode="yaml" convertFunction={yamlConvert} />
       ) : pageMode === 'toml' ? (
-        <JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
+        <JsonConvertSection mode="toml" convertFunction={tomlConvert} />
       ) : (
-        <JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
+        <JsonConvertSection mode="minify" convertFunction={minifyConvert} />
       )}
     </div>
   );
diff --git a/src/pages/JsonTools/types.ts b/src/pages/JsonTools/types.ts
index 93063ce..3fc6a9e 100644
--- a/src/pages/JsonTools/types.ts
+++ b/src/pages/JsonTools/types.ts
@@ -53,3 +53,13 @@ export interface DiffResult {
   /** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */
   diffCount: number;
 }
+
+/** JSON 转换结果 */
+export interface ConvertResult {
+  output: string;
+  originalBytes: number;
+  outputBytes: number;
+}
+
+/** JSON 转换函数类型 */
+export type ConvertFunction = (text: string) => ConvertResult;
diff --git a/src/pages/JsonTools/useJsonTools.ts b/src/pages/JsonTools/useJsonTools.ts
index 57d91e2..46623a1 100644
--- a/src/pages/JsonTools/useJsonTools.ts
+++ b/src/pages/JsonTools/useJsonTools.ts
@@ -1,19 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import { useStorageState } from '@/utils/useStorageState';
-import { diffJson } from './diffEngine';
+import { diffJson } from '@/utils/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';
+import type { ConvertFunction, ViewMode } from './types';
 
 export interface UseJsonToolsReturn {
   pageMode: JsonToolsPageMode;
   setPageMode: (mode: JsonToolsPageMode) => void;
-  // Diff mode state
   leftInput: string;
   rightInput: string;
   setLeftInput: (val: string) => void;
@@ -28,23 +25,19 @@ export interface UseJsonToolsReturn {
   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);
@@ -53,14 +46,13 @@ export function useJsonTools(): UseJsonToolsReturn {
     return () => clearTimeout(handle);
   }, [leftInput, rightInput]);
 
-  // Parse debounced inputs
   const parseState = useMemo(() => {
-    const invalidMsg = t('jsonDiff:invalidJson');
+    const invalidMsg = '无效的 JSON 格式';
     return {
       left: tryParse(debouncedLeft, invalidMsg),
       right: tryParse(debouncedRight, invalidMsg),
     };
-  }, [debouncedLeft, debouncedRight, t]);
+  }, [debouncedLeft, debouncedRight]);
 
   const leftError = parseState.left.error;
   const rightError = parseState.right.error;
@@ -68,7 +60,6 @@ export function useJsonTools(): UseJsonToolsReturn {
   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() === '') {
@@ -91,7 +82,6 @@ export function useJsonTools(): UseJsonToolsReturn {
 
   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 };
diff --git a/src/pages/Jwt/JwtSection.tsx b/src/pages/Jwt/JwtSection.tsx
deleted file mode 100644
index 7c77fe1..0000000
--- a/src/pages/Jwt/JwtSection.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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/components/JwtCopyBlock.tsx b/src/pages/Jwt/components/JwtCopyBlock.tsx
new file mode 100644
index 0000000..4f865e8
--- /dev/null
+++ b/src/pages/Jwt/components/JwtCopyBlock.tsx
@@ -0,0 +1,30 @@
+import { CopyButton } from '@/components/CopyButton';
+import { cn } from '@/lib/utils';
+
+interface JwtCopyBlockProps {
+  title: string;
+  copyText: string;
+  titleClassName?: string;
+  containerClassName?: string;
+  children: React.ReactNode;
+}
+
+export default function JwtCopyBlock({
+  title,
+  copyText,
+  titleClassName,
+  containerClassName,
+  children,
+}: JwtCopyBlockProps) {
+  return (
+    <div className={cn('p-4 rounded-xl border shadow-sm', containerClassName)}>
+      <div className="flex justify-between items-center mb-2 select-none">
+        <span className={cn('text-xs font-bold tracking-wider uppercase', titleClassName)}>
+          {title}
+        </span>
+        <CopyButton text={copyText} className="h-6 w-6 rounded-md border text-muted-foreground" />
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/src/pages/Jwt/components/JwtResultView.tsx b/src/pages/Jwt/components/JwtResultView.tsx
new file mode 100644
index 0000000..b3464bf
--- /dev/null
+++ b/src/pages/Jwt/components/JwtResultView.tsx
@@ -0,0 +1,49 @@
+import { stringifyJson } from '@/utils/jwt';
+import type { JwtResult } from '@/utils/jwt';
+import { cn } from '@/lib/utils';
+import {
+  JWT_JSON_CONTENT_CLASS,
+  JWT_SECTION_CONFIG,
+  JWT_SIGNATURE_SECTION,
+  JWT_TEXT_CONTENT_CLASS,
+} from '../constants';
+import JwtCopyBlock from './JwtCopyBlock';
+
+interface JwtResultViewProps {
+  result: JwtResult;
+}
+
+export default function JwtResultView({ result }: JwtResultViewProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      {JWT_SECTION_CONFIG.map(({ contentKey, title, colorClass, bgClass, borderClass }) => {
+        const content = result[contentKey];
+
+        return (
+          <JwtCopyBlock
+            key={contentKey}
+            title={title}
+            copyText={JSON.stringify(content)}
+            titleClassName={colorClass}
+            containerClassName={cn('border-solid', bgClass, borderClass)}
+          >
+            <pre className={JWT_JSON_CONTENT_CLASS}>
+              {content ? stringifyJson(content) : '无法解析'}
+            </pre>
+          </JwtCopyBlock>
+        );
+      })}
+
+      <JwtCopyBlock
+        title={JWT_SIGNATURE_SECTION.title}
+        copyText={result.signature || ''}
+        titleClassName={JWT_SIGNATURE_SECTION.titleClassName}
+        containerClassName={JWT_SIGNATURE_SECTION.containerClassName}
+      >
+        <span className={JWT_TEXT_CONTENT_CLASS}>
+          {result.signature || JWT_SIGNATURE_SECTION.emptyLabel}
+        </span>
+      </JwtCopyBlock>
+    </div>
+  );
+}
diff --git a/src/pages/Jwt/constants.ts b/src/pages/Jwt/constants.ts
new file mode 100644
index 0000000..64aacc8
--- /dev/null
+++ b/src/pages/Jwt/constants.ts
@@ -0,0 +1,41 @@
+export const JWT_INPUT_PLACEHOLDER = '在此粘贴 JWT 令牌 (Encoded JWT)...';
+
+export type JwtSectionContentKey = 'header' | 'payload';
+
+export interface JwtSectionConfig {
+  contentKey: JwtSectionContentKey;
+  title: string;
+  colorClass: string;
+  borderClass: string;
+  bgClass: string;
+}
+
+export const JWT_SECTION_CONFIG: JwtSectionConfig[] = [
+  {
+    contentKey: 'header',
+    title: 'HEADER: 算法 & 令牌类型',
+    colorClass: 'text-[#fb015b] dark:text-rose-400',
+    borderClass: 'border-[#fb015b]/20 dark:border-rose-500/20',
+    bgClass: 'bg-[#fb015b]/5 dark:bg-rose-500/5',
+  },
+  {
+    contentKey: 'payload',
+    title: 'PAYLOAD: 数据',
+    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',
+  },
+];
+
+export const JWT_SIGNATURE_SECTION = {
+  title: '签名',
+  titleClassName: 'text-muted-foreground/90',
+  containerClassName: 'border border-border bg-secondary/40',
+  emptyLabel: '无签名',
+} as const;
+
+export const JWT_JSON_CONTENT_CLASS =
+  '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';
+
+export const JWT_TEXT_CONTENT_CLASS =
+  'block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text';
diff --git a/src/pages/Jwt/index.tsx b/src/pages/Jwt/index.tsx
index 31a68e6..3754441 100644
--- a/src/pages/Jwt/index.tsx
+++ b/src/pages/Jwt/index.tsx
@@ -1,71 +1,26 @@
 import TextInputArea from '@/components/TextInputArea';
-import { CopyButton } from '@/components/CopyButton';
-import JwtSection from './JwtSection';
+import JwtResultView from './components/JwtResultView';
+import { JWT_INPUT_PLACEHOLDER } from './constants';
 import { useJwt } from './useJwt';
-import { useI18n } from '@/utils/chromeI18n';
 
 export default function Index() {
-  const { t } = useI18n(['jwt', 'jsonFormat']);
   const { jwtInput, result, handleChange, handleClear } = useJwt();
 
   return (
-    <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={handleChange}
-          allowCopy={true}
-          showClear={true}
-          externalError={result?.error || undefined}
-          onClear={handleClear}
-        />
+    <div className="p-4 w-full flex flex-col gap-4 select-none">
+      <TextInputArea
+        minRows={5}
+        maxRows={10}
+        placeholder={JWT_INPUT_PLACEHOLDER}
+        value={jwtInput}
+        onChange={handleChange}
+        allowCopy={true}
+        showClear={true}
+        externalError={result?.error || undefined}
+        onClear={handleClear}
+      />
 
-        {result && !result.error && (
-          <div className="flex flex-col gap-4">
-            <JwtSection
-              title={t('jwt:headerTitle')}
-              content={result.header}
-              colorClass="text-[#fb015b] dark:text-rose-400"
-              borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
-              bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
-            />
-
-            <JwtSection
-              title={t('jwt:payloadTitle')}
-              content={result.payload}
-              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"
-            />
-
-            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
-              <div className="flex justify-between items-center mb-2">
-                <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
-                  {t('jwt:signatureTitle')}
-                </span>
-                <CopyButton
-                  text={result.signature || ''}
-                  className="h-6 w-6 rounded-md border text-muted-foreground"
-                />
-              </div>
-              <span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
-                {result.signature || t('jwt:noSignature')}
-              </span>
-            </div>
-          </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">
-              {t('jsonFormat:invalidJson')}
-            </p>
-          </div>
-        )}
-      </div>
+      {result && !result.error && <JwtResultView result={result} />}
     </div>
   );
 }
diff --git a/src/components/__tests__/ImageUploader.test.tsx b/src/pages/QrCode/__tests__/ImageUploader.test.tsx
similarity index 77%
rename from src/components/__tests__/ImageUploader.test.tsx
rename to src/pages/QrCode/__tests__/ImageUploader.test.tsx
index e85ef52..33b5df0 100644
--- a/src/components/__tests__/ImageUploader.test.tsx
+++ b/src/pages/QrCode/__tests__/ImageUploader.test.tsx
@@ -1,13 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import ImageUploader from '@/components/ImageUploader';
+import ImageUploader from '../components/ImageUploader';
 
-// 配置多端一致性常驻桩（WXT 规范）
 const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
 (globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
 (globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
 
-// 模拟 URL API
 const mockCreateObjectURL = vi.fn();
 const mockRevokeObjectURL = vi.fn();
 Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
@@ -23,7 +21,6 @@ vi.mock('sonner', () => ({
 describe('ImageUploader 组件', () => {
   const mockOnFileChange = vi.fn();
   const mockOnClearFile = vi.fn();
-  const mockOnPreviewUrlChange = vi.fn();
   const mockOnDraggingChange = vi.fn();
 
   const defaultProps = {
@@ -31,7 +28,6 @@ describe('ImageUploader 组件', () => {
     onFileChange: mockOnFileChange,
     onClearFile: mockOnClearFile,
     previewUrl: '',
-    onPreviewUrlChange: mockOnPreviewUrlChange,
     dragging: false,
     onDraggingChange: mockOnDraggingChange,
   };
@@ -95,7 +91,7 @@ describe('ImageUploader 组件', () => {
   });
 
   describe('文件选择交互', () => {
-    it('选择文件时应调用 onFileChange 和 onPreviewUrlChange', async () => {
+    it('选择文件时应调用 onFileChange', async () => {
       render(<ImageUploader {...defaultProps} />);
       const input = document.getElementById('qr-code-upload') as HTMLInputElement;
       const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
@@ -105,8 +101,7 @@ describe('ImageUploader 组件', () => {
       });
 
       expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
-      expect(mockCreateObjectURL).toHaveBeenCalledWith(mockFile);
-      expect(mockOnPreviewUrlChange).toHaveBeenCalledWith('blob:test-url');
+      expect(mockOnFileChange).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -127,7 +122,7 @@ describe('ImageUploader 组件', () => {
       expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
     });
 
-    it('放置文件时应调用 onFileChange 和 onPreviewUrlChange', () => {
+    it('放置文件时应调用 onFileChange', () => {
       const { container } = render(<ImageUploader {...defaultProps} />);
       const dropzone = container.firstChild as HTMLElement;
       const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
@@ -146,6 +141,7 @@ describe('ImageUploader 组件', () => {
 
       expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
       expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
+      expect(mockOnFileChange).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -165,37 +161,12 @@ describe('ImageUploader 组件', () => {
   });
 
   describe('粘贴功能', () => {
-    it('监听粘贴事件', () => {
+    it('不应注册 document 粘贴事件监听（由 ParsePanel 统一处理）', () => {
       const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
       render(<ImageUploader {...defaultProps} />);
 
-      expect(addEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
-    });
-
-    it('组件卸载时应移除粘贴事件监听', () => {
-      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
-      const { unmount } = render(<ImageUploader {...defaultProps} />);
-
-      unmount();
-
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
-    });
-  });
-
-  describe('样式测试', () => {
-    it('拖拽状态时应应用拖拽样式', () => {
-      const { container } = render(<ImageUploader {...defaultProps} dragging={true} />);
-      const dropzone = container.firstChild as HTMLElement;
-      expect(dropzone).toBeInTheDocument();
-    });
-
-    it('有文件时应应用有文件样式', () => {
-      const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
-      const { container } = render(
-        <ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
-      );
-      const dropzone = container.firstChild as HTMLElement;
-      expect(dropzone).toBeInTheDocument();
+      const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
+      expect(pasteListeners).toHaveLength(0);
     });
   });
 });
diff --git a/src/pages/QrCode/__tests__/ParsePanel.test.tsx b/src/pages/QrCode/__tests__/ParsePanel.test.tsx
new file mode 100644
index 0000000..d724186
--- /dev/null
+++ b/src/pages/QrCode/__tests__/ParsePanel.test.tsx
@@ -0,0 +1,151 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import { toast } from 'sonner';
+import ParsePanel from '../components/ParsePanel';
+import type { QrCodeParserState } from '../types';
+
+const mockHandleFileChange = vi.fn();
+const mockHandleClearFile = vi.fn();
+const mockSetParserState = vi.fn();
+
+let mockParserState: QrCodeParserState = {
+  selectedFile: null,
+  previewUrl: '',
+  dragging: false,
+  decodedResult: '',
+  parsing: false,
+  parseError: '',
+};
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('../contexts/QrCodeContext', () => ({
+  useQrCodeContext: () => ({
+    parserState: mockParserState,
+    setParserState: mockSetParserState,
+    handleFileChange: mockHandleFileChange,
+    handleClearFile: mockHandleClearFile,
+  }),
+}));
+
+function createImagePasteEvent(file: File) {
+  const pasteEvent = new Event('paste', { bubbles: true }) as ClipboardEvent;
+  Object.defineProperty(pasteEvent, 'clipboardData', {
+    value: {
+      items: [
+        {
+          type: file.type,
+          getAsFile: () => file,
+        },
+      ],
+      getData: () => '',
+    },
+  });
+  Object.defineProperty(pasteEvent, 'preventDefault', { value: vi.fn() });
+  return pasteEvent;
+}
+
+function createBase64PasteEvent(dataUrl: string) {
+  const pasteEvent = new Event('paste', { bubbles: true }) as ClipboardEvent;
+  Object.defineProperty(pasteEvent, 'clipboardData', {
+    value: {
+      items: [],
+      getData: (type: string) => (type === 'text/plain' ? dataUrl : ''),
+    },
+  });
+  Object.defineProperty(pasteEvent, 'preventDefault', { value: vi.fn() });
+  return pasteEvent;
+}
+
+describe('ParsePanel 组件', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockParserState = {
+      selectedFile: null,
+      previewUrl: '',
+      dragging: false,
+      decodedResult: '',
+      parsing: false,
+      parseError: '',
+    };
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('粘贴功能', () => {
+    it('粘贴图片时应只处理一次', async () => {
+      render(<ParsePanel />);
+      const mockFile = new File(['img'], 'paste.png', { type: 'image/png' });
+
+      await act(async () => {
+        document.dispatchEvent(createImagePasteEvent(mockFile));
+      });
+
+      expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
+      expect(mockHandleFileChange).toHaveBeenCalledWith(mockFile);
+      expect(toast.success).toHaveBeenCalledTimes(1);
+      expect(toast.success).toHaveBeenCalledWith('图片粘贴成功，正在解析...');
+    });
+
+    it('与 ImageUploader 同时挂载时 document 上只应有一个 paste 监听', () => {
+      const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
+      render(<ParsePanel />);
+
+      const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
+      expect(pasteListeners).toHaveLength(1);
+    });
+
+    it('粘贴 Base64 data URI 时应转换为文件并只处理一次', async () => {
+      const dataUrl = 'data:image/png;base64,abcd';
+      const mockBlob = new Blob(['img'], { type: 'image/png' });
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          blob: () => Promise.resolve(mockBlob),
+        }),
+      );
+
+      render(<ParsePanel />);
+
+      await act(async () => {
+        document.dispatchEvent(createBase64PasteEvent(dataUrl));
+      });
+
+      expect(fetch).toHaveBeenCalledWith(dataUrl);
+      expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
+      expect(mockHandleFileChange).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'pasted-image.png', type: 'image/png' }),
+      );
+      expect(toast.success).toHaveBeenCalledTimes(1);
+    });
+
+    it('已上传图片时粘贴仍应只处理一次', async () => {
+      mockParserState = {
+        selectedFile: new File(['existing'], 'existing.png', { type: 'image/png' }),
+        previewUrl: 'blob:existing',
+        dragging: false,
+        decodedResult: 'decoded-text',
+        parsing: false,
+        parseError: '',
+      };
+
+      render(<ParsePanel />);
+      expect(screen.getByText('已上传图片')).toBeInTheDocument();
+
+      const mockFile = new File(['new'], 'new.png', { type: 'image/png' });
+      await act(async () => {
+        document.dispatchEvent(createImagePasteEvent(mockFile));
+      });
+
+      expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
+      expect(mockHandleFileChange).toHaveBeenCalledWith(mockFile);
+    });
+  });
+});
diff --git a/src/components/__tests__/QrCodePreview.test.tsx b/src/pages/QrCode/__tests__/QrCodePreview.test.tsx
similarity index 98%
rename from src/components/__tests__/QrCodePreview.test.tsx
rename to src/pages/QrCode/__tests__/QrCodePreview.test.tsx
index 2c6c8fc..5372652 100644
--- a/src/components/__tests__/QrCodePreview.test.tsx
+++ b/src/pages/QrCode/__tests__/QrCodePreview.test.tsx
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import QrCodePreview from '@/components/QrCodePreview';
+import QrCodePreview from '../components/QrCodePreview';
 
 describe('QrCodePreview 组件', () => {
   const mockOnDownload = vi.fn();
diff --git a/src/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
index dc415bb..00cefed 100644
--- a/src/pages/QrCode/__tests__/index.test.tsx
+++ b/src/pages/QrCode/__tests__/index.test.tsx
@@ -26,11 +26,11 @@ vi.mock('@/config/features', async (importOriginal) => {
   };
 });
 
-vi.mock('@/components/QrCodePreview', () => ({
+vi.mock('../components/QrCodePreview', () => ({
   default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
 }));
 
-vi.mock('@/components/ImageUploader', () => ({
+vi.mock('../components/ImageUploader', () => ({
   default: () => <div data-testid="image-uploader">ImageUploader</div>,
 }));
 
diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
index b67fb39..f8c9bd3 100644
--- a/src/pages/QrCode/components/GeneratePanel.tsx
+++ b/src/pages/QrCode/components/GeneratePanel.tsx
@@ -1,17 +1,14 @@
 import { Loader2, Pencil, QrCode } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import QrCodePreview from '@/components/QrCodePreview';
-import { useI18n } from '@/utils/chromeI18n';
+import QrCodePreview from './QrCodePreview';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
-/** 文本预览的最大显示字符数 */
 const TEXT_PREVIEW_MAX_LENGTH = 80;
 
 export default function GeneratePanel() {
-  const { t } = useI18n('qrCode');
   const {
     generatorState,
     setTextToEncode,
@@ -24,13 +21,11 @@ export default function GeneratePanel() {
   const isInputStep = generatorState.step === 'input';
   const hasText = generatorState.textToEncode.trim().length > 0;
 
-  /** 截断文本用于预览显示 */
   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">
@@ -42,13 +37,13 @@ export default function GeneratePanel() {
         >
           <div className="flex flex-col space-y-2.5">
             <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-              {t('qrCode:urlInputLabel')}
+              输入 URL 或文本
             </Label>
 
             <TextInputArea
               value={generatorState.textToEncode}
               onChange={setTextToEncode}
-              placeholder={t('qrCode:urlInputPlaceholder')}
+              placeholder="请输入 URL 或文本内容，将自动生成二维码"
               showCount={true}
               showClear={true}
               allowCopy={false}
@@ -66,12 +61,12 @@ export default function GeneratePanel() {
               {generatorState.generating ? (
                 <>
                   <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  {t('qrCode:generating')}
+                  生成中...
                 </>
               ) : (
                 <>
                   <QrCode className="w-4 h-4 mr-2" />
-                  {t('qrCode:generateButton')}
+                  生成二维码
                 </>
               )}
             </Button>
@@ -81,18 +76,16 @@ export default function GeneratePanel() {
     );
   }
 
-  // 预览态：显示文本预览 + 二维码（紧凑布局，适配popup窗口）
   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:textPreviewLabel')}
+            原始文本
           </Label>
           <Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
             <Pencil className="w-3 h-3 mr-1" />
-            {t('qrCode:editButton')}
+            编辑
           </Button>
         </div>
         <div
@@ -103,7 +96,6 @@ export default function GeneratePanel() {
         </div>
       </div>
 
-      {/* 二维码预览区域（自适应剩余空间） */}
       <QrCodePreview
         qrCodeDataUrl={generatorState.qrCodeDataUrl}
         onDownload={downloadQrCode}
diff --git a/src/components/ImageUploader.tsx b/src/pages/QrCode/components/ImageUploader.tsx
similarity index 56%
rename from src/components/ImageUploader.tsx
rename to src/pages/QrCode/components/ImageUploader.tsx
index 6f3e1cc..23b4018 100644
--- a/src/components/ImageUploader.tsx
+++ b/src/pages/QrCode/components/ImageUploader.tsx
@@ -1,22 +1,14 @@
-import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
 import { toast } from 'sonner';
-import { useI18n } from '@/utils/chromeI18n';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
 
 interface ImageUploaderProps {
-  /** 选中的文件 */
   selectedFile: File | null;
-  /** 文件变更回调 */
   onFileChange: (file: File) => void;
-  /** 清除文件回调 */
   onClearFile: () => void;
-  /** 文件预览 URL */
   previewUrl: string;
-  /** 预览 URL 变更回调 */
-  onPreviewUrlChange: (url: string) => void;
-  /** 是否正在拖拽 */
   dragging: boolean;
-  /** 拖拽状态变更回调 */
   onDraggingChange: (dragging: boolean) => void;
 }
 
@@ -25,32 +17,21 @@ const ImageUploader = ({
   onFileChange,
   onClearFile,
   previewUrl,
-  onPreviewUrlChange,
   dragging,
   onDraggingChange,
 }: ImageUploaderProps) => {
-  const { t } = useI18n('qrCode');
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileChange = useCallback(
-    (file: File) => {
-      onFileChange(file);
-      onPreviewUrlChange(URL.createObjectURL(file));
-    },
-    [onFileChange, onPreviewUrlChange],
-  );
-
-  const handleClearFile = useCallback(() => {
+  const handleClearFile = () => {
     if (previewUrl) {
       URL.revokeObjectURL(previewUrl);
     }
     onClearFile();
-    toast.success(t('qrCode:imageCleared'));
-  }, [previewUrl, onClearFile, t]);
+    toast.success('图片已清除');
+  };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      handleFileChange(e.target.files[0]);
+    const file = e.target.files?.[0];
+    if (file) {
+      onFileChange(file);
     }
   };
 
@@ -68,42 +49,10 @@ const ImageUploader = ({
     onDraggingChange(false);
     const droppedFile = e.dataTransfer.files?.[0];
     if (droppedFile) {
-      handleFileChange(droppedFile);
+      onFileChange(droppedFile);
     }
   };
 
-  // 监听粘贴事件
-  useEffect(() => {
-    const handlePaste = async (e: ClipboardEvent) => {
-      const items = e.clipboardData?.items;
-      if (!items) return;
-
-      for (let i = 0; i < items.length; i++) {
-        if (items[i].type.startsWith('image/')) {
-          e.preventDefault();
-
-          const file = items[i].getAsFile();
-          if (file) {
-            try {
-              handleFileChange(file);
-              toast.success(t('qrCode:imagePasted'));
-            } catch (error) {
-              console.error('处理粘贴图片失败:', error);
-              toast.error(t('qrCode:imagePasteError'));
-            }
-          }
-          break;
-        }
-      }
-    };
-
-    document.addEventListener('paste', handlePaste);
-
-    return () => {
-      document.removeEventListener('paste', handlePaste);
-    };
-  }, [handleFileChange, t]);
-
   return (
     <div
       className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
@@ -111,21 +60,20 @@ const ImageUploader = ({
           ? 'border-green-600 bg-green-50'
           : selectedFile
             ? 'border-green-600 bg-green-50/50'
-            : 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10/50'
+            : 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
       }`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
       <input
-        ref={fileInputRef}
         type="file"
         accept="image/*"
         onChange={handleInputChange}
         className="hidden"
         id="qr-code-upload"
       />
-      <label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
+      <Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
         {selectedFile ? (
           <div className="text-center w-full relative">
             <div className="relative inline-block">
@@ -134,20 +82,22 @@ const ImageUploader = ({
                 alt="QR Code Preview"
                 className="max-w-full max-h-40 rounded-lg object-contain"
               />
-              <button
+              <Button
                 type="button"
+                variant="destructive"
+                size="icon"
                 data-testid="ClearIcon"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleClearFile();
                 }}
-                className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
               >
                 <X className="w-3 h-3" />
-              </button>
+              </Button>
             </div>
             <span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
-            <span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
+            <span className="block text-xs text-muted-foreground">点击更换图片</span>
           </div>
         ) : (
           <>
@@ -156,14 +106,14 @@ const ImageUploader = ({
               className="w-12 h-12 text-muted-foreground mx-auto mb-2"
             />
             <span className="block text-sm text-muted-foreground mb-1">
-              {t('qrCode:clickToUpload')}
+              点击、拖拽或粘贴上传二维码图片
             </span>
             <span className="block text-xs text-muted-foreground">
-              {t('qrCode:supportFormats')}
+              支持 PNG、JPG、WEBP、Base64 格式
             </span>
           </>
         )}
-      </label>
+      </Label>
     </div>
   );
 };
diff --git a/src/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
index aed49c8..d1426f5 100644
--- a/src/pages/QrCode/components/ParsePanel.tsx
+++ b/src/pages/QrCode/components/ParsePanel.tsx
@@ -2,20 +2,17 @@ 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 ImageUploader from './ImageUploader';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 export default function ParsePanel() {
-  const { t } = useI18n('qrCode');
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
   const hasFile = parserState.selectedFile !== null;
 
-  // 全局粘贴事件监听
   const handlePaste = useCallback(
     async (e: ClipboardEvent) => {
       const items = e.clipboardData?.items;
@@ -27,7 +24,7 @@ export default function ParsePanel() {
           const file = items[i].getAsFile();
           if (file) {
             handleFileChange(file);
-            toast.success(t('qrCode:imagePasted'));
+            toast.success('图片粘贴成功，正在解析...');
           }
           return;
         }
@@ -41,14 +38,14 @@ export default function ParsePanel() {
           const blob = await response.blob();
           const file = new File([blob], 'pasted-image.png', { type: blob.type });
           handleFileChange(file);
-          toast.success(t('qrCode:imagePasted'));
+          toast.success('图片粘贴成功，正在解析...');
         } catch (error) {
           console.error('处理 Base64 图片失败:', error);
-          toast.error(t('qrCode:imagePasteError'));
+          toast.error('粘贴图片失败，请重试');
         }
       }
     },
-    [handleFileChange, t],
+    [handleFileChange],
   );
 
   useEffect(() => {
@@ -58,7 +55,6 @@ export default function ParsePanel() {
     };
   }, [handlePaste]);
 
-  // 未上传图片：只显示上传区域
   if (!hasFile) {
     return (
       <div className="w-full select-none p-0.5">
@@ -67,7 +63,6 @@ export default function ParsePanel() {
           onFileChange={handleFileChange}
           onClearFile={handleClearFile}
           previewUrl={parserState.previewUrl}
-          onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}
           dragging={parserState.dragging}
           onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
         />
@@ -75,18 +70,16 @@ export default function ParsePanel() {
     );
   }
 
-  // 已上传图片：显示图片预览 + 解析结果
   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">
@@ -98,13 +91,12 @@ export default function ParsePanel() {
           <div className="flex-1 min-w-0">
             <p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
             {parserState.parsing && (
-              <p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
+              <p className="text-xs text-primary animate-pulse mt-1">解析中...</p>
             )}
           </div>
         </div>
       </div>
 
-      {/* 解析结果区域 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
@@ -113,7 +105,7 @@ export default function ParsePanel() {
       >
         <div className="flex flex-col space-y-2.5">
           <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
-            {t('qrCode:resultLabel')}
+            解析结果
           </Label>
 
           <TextInputArea
@@ -121,7 +113,7 @@ export default function ParsePanel() {
             readOnly={true}
             showClear={false}
             allowCopy={true}
-            placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
+            placeholder={parserState.parsing ? '' : '解析结果将显示在此处'}
             minRows={4}
             maxRows={8}
             externalError={parserState.parseError || undefined}
diff --git a/src/components/QrCodePreview.tsx b/src/pages/QrCode/components/QrCodePreview.tsx
similarity index 57%
rename from src/components/QrCodePreview.tsx
rename to src/pages/QrCode/components/QrCodePreview.tsx
index f96a8a0..68cb8a3 100644
--- a/src/components/QrCodePreview.tsx
+++ b/src/pages/QrCode/components/QrCodePreview.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
-// 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
 interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** 二维码 Data URL */
   qrCodeDataUrl: string;
-  /** 下载回调 */
   onDownload: () => void;
-  /** 复制回调 */
   onCopy: () => void;
-  /** 自定义占位文本，用于空状态提示 */
   placeholderText?: string;
 }
 
@@ -24,22 +19,15 @@ const QrCodePreview = ({
   className,
   ...props
 }: QrCodePreviewProps) => {
-  const { t } = useI18n('qrCode');
-
-  // 空状态下的虚线骨架屏
   if (!qrCodeDataUrl) {
     return (
-      <div
-        className={cn(
-          'flex flex-col justify-center items-center min-h-[200px] border border-dashed border-input rounded-xl p-4 bg-muted/40',
-          className,
-        )}
+      <EmptyPlaceholder
+        className={cn('min-h-[200px] p-4', className)}
+        messageClassName="text-sm text-muted-foreground max-w-none"
         {...props}
       >
-        <p className="text-sm text-muted-foreground text-center">
-          {placeholderText || t('qrCode:qrCodeWillShow')}
-        </p>
-      </div>
+        {placeholderText || '二维码将显示在这里'}
+      </EmptyPlaceholder>
     );
   }
 
@@ -52,11 +40,6 @@ const QrCodePreview = ({
       {...props}
     >
       <div className="flex flex-col items-center w-full max-w-xs">
-        {/*
-          二维码容器适配：
-          在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
-          通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
-        */}
         <div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
           <img
             src={qrCodeDataUrl}
@@ -68,12 +51,12 @@ const QrCodePreview = ({
         <div className="flex w-full gap-2 mt-3">
           <Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
             <Download className="w-3.5 h-3.5 text-muted-foreground" />
-            <span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
+            <span className="truncate text-xs">下载二维码</span>
           </Button>
 
           <Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
             <Copy className="w-3.5 h-3.5" />
-            <span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
+            <span className="truncate text-xs">复制二维码</span>
           </Button>
         </div>
       </div>
diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts
index 8ec8eff..4c8e199 100644
--- a/src/pages/QrCode/hooks/useQrCode.ts
+++ b/src/pages/QrCode/hooks/useQrCode.ts
@@ -3,44 +3,35 @@ import QRious from 'qrious';
 import { toast } from 'sonner';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
-import { useI18n } from '@/utils/chromeI18n';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
-/** 防抖延迟时间（毫秒） */
 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);
 }
 
-/** 检测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'];
   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;
@@ -49,7 +40,6 @@ function isImageUrl(url: string): boolean {
   return false;
 }
 
-/** 生成二维码的核心逻辑 */
 function generateQrCodeDataUrl(text: string): string {
   const trimmedText = text.trim();
   if (!trimmedText) return '';
@@ -78,8 +68,6 @@ function generateQrCodeDataUrl(text: string): string {
 }
 
 export function useQrCode(): QrCodeContextValue {
-  const { t } = useI18n('qrCode');
-
   const [mode, setMode] = useState<QrCodeMode>('generate');
 
   const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
@@ -102,7 +90,6 @@ export function useQrCode(): QrCodeContextValue {
 
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // 清除防抖定时器
   useEffect(() => {
     return () => {
       if (debounceTimerRef.current) {
@@ -111,41 +98,37 @@ export function useQrCode(): QrCodeContextValue {
     };
   }, []);
 
-  /** 自动检测URL并生成二维码 */
-  const autoGenerateIfUrl = useCallback(
-    (text: string) => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
+  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: '生成二维码失败，请重试',
+        }));
       }
-
-      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],
-  );
+    }, DEBOUNCE_DELAY);
+  }, []);
 
   const setTextToEncode = useCallback(
     (text: string) => {
@@ -155,20 +138,17 @@ export function useQrCode(): QrCodeContextValue {
     [autoGenerateIfUrl],
   );
 
-  /** 手动触发生成二维码（用于非URL文本） */
   const confirmGenerate = useCallback(() => {
     const text = generatorState.textToEncode.trim();
 
     if (!text) {
-      setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
-      toast.error(t('qrCode:inputRequired'));
+      setGeneratorState((prev) => ({ ...prev, inputError: '请输入内容' }));
+      toast.error('请输入内容');
       return;
     }
 
-    // 先设置 loading 状态，让 React 渲染加载动画
     setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
 
-    // 延迟到下一帧生成，确保 loading 状态先被渲染显示
     setTimeout(() => {
       const qrCodeDataUrl = generateQrCodeDataUrl(text);
 
@@ -176,9 +156,9 @@ export function useQrCode(): QrCodeContextValue {
         setGeneratorState((prev) => ({
           ...prev,
           generating: false,
-          inputError: t('qrCode:generateError'),
+          inputError: '生成二维码失败，请重试',
         }));
-        toast.error(t('qrCode:generateError'));
+        toast.error('生成二维码失败，请重试');
         return;
       }
 
@@ -190,9 +170,8 @@ export function useQrCode(): QrCodeContextValue {
         generating: false,
       }));
     }, 0);
-  }, [generatorState.textToEncode, t]);
+  }, [generatorState.textToEncode]);
 
-  /** 返回编辑态，保留上次输入内容 */
   const backToEdit = useCallback(() => {
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -206,66 +185,56 @@ export function useQrCode(): QrCodeContextValue {
     }));
   }, []);
 
-  /** 从图片URL解析二维码 */
-  const parseQrCodeFromUrl = useCallback(
-    async (imageUrl: string) => {
-      try {
-        setParserState((prev) => ({
-          ...prev,
-          parsing: true,
-          parseError: '',
-          decodedResult: '',
-          previewUrl: imageUrl,
-          selectedFile: null,
-        }));
+  const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
+    try {
+      setParserState((prev) => ({
+        ...prev,
+        parsing: true,
+        parseError: '',
+        decodedResult: '',
+        previewUrl: imageUrl,
+        selectedFile: null,
+      }));
 
-        // 从URL获取图片并转换为File对象
-        const response = await fetch(imageUrl);
-        const blob = await response.blob();
-        const file = new File([blob], 'qrcode-image.png', { type: blob.type });
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      const file = new File([blob], 'qrcode-image.png', { type: blob.type });
 
-        setParserState((prev) => ({ ...prev, selectedFile: file }));
+      setParserState((prev) => ({ ...prev, selectedFile: file }));
 
-        const result = await parseQrCodeFromFile(file);
+      const result = await parseQrCodeFromFile(file);
 
-        if (result.success && result.data) {
-          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
-          toast.success(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');
+      if (result.success && result.data) {
+        setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+        toast.success('二维码解析成功');
+      } else {
+        const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
         setParserState((prev) => ({ ...prev, parseError: errorMsg }));
         toast.error(errorMsg);
-      } finally {
-        setParserState((prev) => ({ ...prev, parsing: false }));
       }
-    },
-    [t],
-  );
+    } catch (error) {
+      console.error('解析图片二维码失败:', error);
+      const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
+      setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+      toast.error(errorMsg);
+    } finally {
+      setParserState((prev) => ({ ...prev, parsing: false }));
+    }
+  }, []);
 
-  /** 右键菜单传入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',
@@ -276,7 +245,6 @@ export function useQrCode(): QrCodeContextValue {
           inputError: '',
         }));
       } else {
-        // 生成失败，停留在输入态，显示文本供用户编辑
         setGeneratorState((prev) => ({
           ...prev,
           step: 'input',
@@ -293,33 +261,29 @@ export function useQrCode(): QrCodeContextValue {
 
   useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
 
-  // 反向活态解析二维码算法
-  const parseQrCode = useCallback(
-    async (file: File) => {
-      try {
-        setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
+  const parseQrCode = useCallback(async (file: File) => {
+    try {
+      setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
 
-        const result = await parseQrCodeFromFile(file);
+      const result = await parseQrCodeFromFile(file);
 
-        if (result.success && result.data) {
-          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
-          toast.success(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');
+      if (result.success && result.data) {
+        setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+        toast.success('二维码解析成功');
+      } else {
+        const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
         setParserState((prev) => ({ ...prev, parseError: errorMsg }));
         toast.error(errorMsg);
-      } finally {
-        setParserState((prev) => ({ ...prev, parsing: false }));
       }
-    },
-    [t],
-  );
+    } catch (error) {
+      console.error('解析二维码失败:', error);
+      const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
+      setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+      toast.error(errorMsg);
+    } finally {
+      setParserState((prev) => ({ ...prev, parsing: false }));
+    }
+  }, []);
 
   const downloadQrCode = useCallback(() => {
     if (!generatorState.qrCodeDataUrl) return;
@@ -328,8 +292,8 @@ export function useQrCode(): QrCodeContextValue {
     link.href = generatorState.qrCodeDataUrl;
     link.download = 'qrcode.png';
     link.click();
-    toast.success(t('qrCode:qrCodeDownloadSuccess'));
-  }, [generatorState.qrCodeDataUrl, t]);
+    toast.success('二维码下载成功');
+  }, [generatorState.qrCodeDataUrl]);
 
   const copyQrCode = useCallback(async () => {
     if (!generatorState.qrCodeDataUrl) return;
@@ -344,12 +308,12 @@ export function useQrCode(): QrCodeContextValue {
         }),
       ]);
 
-      toast.success(t('qrCode:qrCodeCopySuccess'));
+      toast.success('二维码已复制到剪贴板');
     } catch (error) {
       console.error('复制二维码失败:', error);
-      toast.error(t('qrCode:copyError'));
+      toast.error('复制失败，请重试');
     }
-  }, [generatorState.qrCodeDataUrl, t]);
+  }, [generatorState.qrCodeDataUrl]);
 
   const handleFileChange = useCallback(
     (file: File) => {
@@ -366,15 +330,13 @@ export function useQrCode(): QrCodeContextValue {
         };
       });
 
-      // 触发解析安全的后台 Promise
       parseQrCode(file).catch((err) => {
-        console.error('Parser standalone task thread exploded:', err);
+        console.error('解析二维码失败:', err);
       });
     },
     [parseQrCode],
   );
 
-  // 清除解析受控文件
   const handleClearFile = useCallback(() => {
     setParserState((prev) => {
       if (prev.previewUrl) {
diff --git a/src/pages/QrCode/index.tsx b/src/pages/QrCode/index.tsx
index 8591e04..39ef556 100644
--- a/src/pages/QrCode/index.tsx
+++ b/src/pages/QrCode/index.tsx
@@ -1,6 +1,5 @@
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 
-import { useI18n } from '@/utils/chromeI18n';
 import { QrCodeContext } from './contexts/QrCodeContext';
 import { useQrCode } from './hooks/useQrCode';
 import GeneratePanel from './components/GeneratePanel';
@@ -8,13 +7,11 @@ import ParsePanel from './components/ParsePanel';
 import type { QrCodeMode } from './types';
 
 export default function Index() {
-  const { t } = useI18n('qrCode');
   const qrCode = useQrCode();
 
-  // 模式选项驱动骨架
   const modeOptions = [
-    { value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
-    { value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
+    { value: 'generate' as QrCodeMode, label: '文本转二维码' },
+    { value: 'parse' as QrCodeMode, label: '二维码转文本' },
   ];
 
   return (
diff --git a/src/pages/README.md b/src/pages/README.md
deleted file mode 100644
index ced15ad..0000000
--- a/src/pages/README.md
+++ /dev/null
@@ -1,153 +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` | 文件/图片通用转换区域 |
-
-### RightClickRestorer/
-
-右键菜单恢复工具，解除网站对右键的限制。
-
-| 文件                       | 用途          |
-| -------------------------- | ------------- |
-| `index.tsx`                | 页面 UI       |
-| `useRightClickRestorer.ts` | 业务逻辑 Hook |
-
-### TestDataGenerator/
-
-测试数据生成器，支持可视化字段配置、规则复用、Web Worker 批量生成和 JSON/CSV 导出。
-
-| 文件/目录                    | 用途                                              |
-| ---------------------------- | ------------------------------------------------- |
-| `index.tsx`                  | 主页面，管理字段配置、规则标签页和生成结果        |
-| `hooks/useGenerator.ts`      | Worker 生命周期与消息通信，暴露生成/取消/清理操作 |
-| `components/FieldList.tsx`   | 字段列表、拖拽排序、虚拟滚动和规则保存入口        |
-| `components/FieldEditor.tsx` | 字段名称、生成器、参数、必填/空值率/唯一性配置    |
-| `components/RuleManager.tsx` | 规则搜索、加载、编辑、复制、删除、导入和导出      |
-| `components/ExportPanel.tsx` | 生成结果复制和 JSON/CSV 下载                      |
-
-约束与注意事项：
-
-- 字段数量最多 40 个（`FieldList.MAX_FIELDS`）。
-- 生成数量为 1 ~ 100,000，预设值包含 50、100、1,000、5,000、10,000。
-- 大批量生成通过 `src/workers/generator.worker.ts` 执行，避免阻塞 UI；Worker 每 1,000 条或结束时回传进度。
-- 规则通过 `src/utils/ruleStorage.ts` 存入 `localStorage`，最多保存 20 条规则。
-- 内置生成器位于 `src/lib/generators/`，按个人信息、业务数据、技术数据、基础类型分类。
-
-## 新增页面
-
-1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型成员
-2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
-3. 在 `pages/` 创建页面目录（遵循上述结构）
-4. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome i18n 翻译
-5. 如需新权限，更新 `wxt.config.ts`
-6. 添加对应的单元测试
diff --git a/src/pages/RightClickRestorer/__tests__/index.test.tsx b/src/pages/RightClickRestorer/__tests__/index.test.tsx
index f74b947..2ca97b1 100644
--- a/src/pages/RightClickRestorer/__tests__/index.test.tsx
+++ b/src/pages/RightClickRestorer/__tests__/index.test.tsx
@@ -8,8 +8,7 @@ vi.mock('../useRightClickRestorer', () => ({
   useRightClickRestorer: () => ({
     domain: 'example.com',
     isLoading: false,
-    isUnlocked: false,
-    isUnsupported: false,
+    status: 'locked',
     unlock: mockUnlock,
   }),
 }));
diff --git a/src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts b/src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts
index 929051e..51fbf30 100644
--- a/src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts
+++ b/src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts
@@ -26,8 +26,7 @@ describe('useRightClickRestorer', () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     expect(result.current.domain).toBe('example.com');
-    expect(result.current.isUnlocked).toBe(false);
-    expect(result.current.isUnsupported).toBe(false);
+    expect(result.current.status).toBe('locked');
     expect(sendMessageToContent).toHaveBeenCalledWith('queryRightClickStatus');
   });
 
@@ -39,8 +38,7 @@ describe('useRightClickRestorer', () => {
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
-    expect(result.current.isUnsupported).toBe(true);
-    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.status).toBe('unsupported');
     expect(sendMessageToContent).not.toHaveBeenCalled();
   });
 
@@ -56,7 +54,7 @@ describe('useRightClickRestorer', () => {
       await result.current.unlock();
     });
 
-    expect(result.current.isUnlocked).toBe(true);
+    expect(result.current.status).toBe('unlocked');
     expect(sendMessageToContent).toHaveBeenLastCalledWith('restoreRightClick');
   });
 
@@ -72,7 +70,7 @@ describe('useRightClickRestorer', () => {
       await result.current.unlock();
     });
 
-    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.status).toBe('unsupported');
     expect(sendMessageToContent).not.toHaveBeenCalled();
   });
 
@@ -87,6 +85,6 @@ describe('useRightClickRestorer', () => {
       await result.current.unlock();
     });
 
-    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.status).toBe('locked');
   });
 });
diff --git a/src/pages/RightClickRestorer/constants.ts b/src/pages/RightClickRestorer/constants.ts
new file mode 100644
index 0000000..165900b
--- /dev/null
+++ b/src/pages/RightClickRestorer/constants.ts
@@ -0,0 +1,55 @@
+import type { LucideIcon } from 'lucide-react';
+import { AlertTriangle, MousePointerClick, Shield, ShieldCheck } from 'lucide-react';
+
+export type RestorerStatus = 'unsupported' | 'locked' | 'unlocked';
+
+export const CARD_CLASS =
+  'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden space-y-3';
+
+interface StatusConfig {
+  badgeVariant: 'default' | 'secondary' | 'destructive';
+  badgeClassName: string;
+  badgeIcon: LucideIcon;
+  badgeLabel: string;
+  description: string;
+  buttonIcon: LucideIcon;
+  buttonLabel: string;
+  buttonDisabled: boolean;
+  buttonVariant: 'default' | 'secondary';
+}
+
+export const STATUS_CONFIG: Record<RestorerStatus, StatusConfig> = {
+  unsupported: {
+    badgeVariant: 'destructive',
+    badgeClassName: 'gap-1 shrink-0',
+    badgeIcon: AlertTriangle,
+    badgeLabel: '不支持',
+    description: '当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。',
+    buttonIcon: AlertTriangle,
+    buttonLabel: '不支持',
+    buttonDisabled: true,
+    buttonVariant: 'secondary',
+  },
+  locked: {
+    badgeVariant: 'secondary',
+    badgeClassName: 'gap-1 shrink-0',
+    badgeIcon: Shield,
+    badgeLabel: '未解锁',
+    description: '点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。',
+    buttonIcon: MousePointerClick,
+    buttonLabel: '解锁当前网站右键',
+    buttonDisabled: false,
+    buttonVariant: 'default',
+  },
+  unlocked: {
+    badgeVariant: 'default',
+    badgeClassName: 'gap-1 bg-green-600 hover:bg-green-700 shrink-0',
+    badgeIcon: ShieldCheck,
+    badgeLabel: '已解锁',
+    description: '当前网站右键菜单已临时解锁。刷新页面后需要重新解锁。',
+    buttonIcon: MousePointerClick,
+    buttonLabel: '右键已解锁',
+    buttonDisabled: true,
+    buttonVariant: 'secondary',
+  },
+};
diff --git a/src/pages/RightClickRestorer/index.tsx b/src/pages/RightClickRestorer/index.tsx
index 35dec5f..42b8143 100644
--- a/src/pages/RightClickRestorer/index.tsx
+++ b/src/pages/RightClickRestorer/index.tsx
@@ -1,84 +1,52 @@
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
+import { CARD_CLASS, STATUS_CONFIG } from './constants';
 import { useRightClickRestorer } from './useRightClickRestorer';
-import { useI18n } from '@/utils/chromeI18n';
 
 export default function Index() {
-  const { t } = useI18n('rightClickRestorer');
-  const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
+  const { domain, isLoading, status, unlock } = useRightClickRestorer();
 
   if (isLoading) {
     return (
       <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 animate-spin" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {t('rightClickRestorer:loading')}
+          正在加载...
         </span>
       </div>
     );
   }
 
-  return (
-    <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">
-        <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">
-            <code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
-              {domain || '—'}
-            </code>
-            {isUnsupported ? (
-              <Badge variant="destructive" className="gap-1 shrink-0">
-                <AlertTriangle className="h-3 w-3" />
-                {t('rightClickRestorer:unsupported')}
-              </Badge>
-            ) : isUnlocked ? (
-              <Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
-                <ShieldCheck className="h-3 w-3" />
-                {t('rightClickRestorer:statusUnlocked')}
-              </Badge>
-            ) : (
-              <Badge variant="secondary" className="gap-1 shrink-0">
-                <Shield className="h-3 w-3" />
-                {t('rightClickRestorer:statusLocked')}
-              </Badge>
-            )}
-          </div>
-        </div>
-      </div>
+  const config = STATUS_CONFIG[status];
+  const BadgeIcon = config.badgeIcon;
+  const ButtonIcon = config.buttonIcon;
 
-      {/* Unlock Action */}
-      <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 ? (
-            <>
-              <p className="text-xs text-muted-foreground">
-                {t('rightClickRestorer:unsupportedDesc')}
-              </p>
-              <Button className="w-full gap-2" disabled variant="secondary">
-                <AlertTriangle className="h-4 w-4" />
-                {t('rightClickRestorer:unsupported')}
-              </Button>
-            </>
-          ) : (
-            <>
-              <p className="text-xs text-muted-foreground">{t('rightClickRestorer:unlockDesc')}</p>
-              <Button
-                className="w-full gap-2"
-                onClick={() => void unlock()}
-                disabled={isUnlocked}
-                variant={isUnlocked ? 'secondary' : 'default'}
-              >
-                <MousePointerClick className="h-4 w-4" />
-                {isUnlocked
-                  ? t('rightClickRestorer:alreadyUnlocked')
-                  : t('rightClickRestorer:unlockBtn')}
-              </Button>
-            </>
-          )}
+  return (
+    <div className="p-4 w-full">
+      <div className={CARD_CLASS}>
+        <Label className="text-sm font-medium">当前域名</Label>
+        <div className="flex items-center justify-between gap-2">
+          <code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
+            {domain || '—'}
+          </code>
+          <Badge variant={config.badgeVariant} className={config.badgeClassName}>
+            <BadgeIcon className="h-3 w-3" />
+            {config.badgeLabel}
+          </Badge>
         </div>
+
+        <p className="text-xs text-muted-foreground">{config.description}</p>
+        <Button
+          className="w-full gap-2"
+          disabled={config.buttonDisabled}
+          variant={config.buttonVariant}
+          onClick={() => void unlock()}
+        >
+          <ButtonIcon className="h-4 w-4" />
+          {config.buttonLabel}
+        </Button>
       </div>
     </div>
   );
diff --git a/src/pages/RightClickRestorer/useRightClickRestorer.ts b/src/pages/RightClickRestorer/useRightClickRestorer.ts
index b215743..0cc99dd 100644
--- a/src/pages/RightClickRestorer/useRightClickRestorer.ts
+++ b/src/pages/RightClickRestorer/useRightClickRestorer.ts
@@ -1,37 +1,19 @@
 import { useEffect, useState } from 'react';
 import { MessageAction, sendMessageToContent } from '@/utils/messages';
-
-const UNSUPPORTED_PROTOCOLS = new Set([
-  'chrome:',
-  'chrome-extension:',
-  'about:',
-  'edge:',
-  'brave:',
-]);
-
-function isUnsupportedPage(url: string | undefined): boolean {
-  if (!url) return true;
-  try {
-    const protocol = new URL(url).protocol;
-    return UNSUPPORTED_PROTOCOLS.has(protocol);
-  } catch {
-    return true;
-  }
-}
+import { isUnsupportedPageUrl } from '@/utils/restrictedUrls';
+import type { RestorerStatus } from './constants';
 
 export interface UseRightClickRestorerReturn {
   domain: string;
   isLoading: boolean;
-  isUnlocked: boolean;
-  isUnsupported: boolean;
+  status: RestorerStatus;
   unlock: () => Promise<void>;
 }
 
 export function useRightClickRestorer(): UseRightClickRestorerReturn {
-  const [domain, setDomain] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [isUnlocked, setIsUnlocked] = useState<boolean>(false);
-  const [isUnsupported, setIsUnsupported] = useState<boolean>(false);
+  const [domain, setDomain] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [status, setStatus] = useState<RestorerStatus>('locked');
 
   useEffect(() => {
     const load = async () => {
@@ -41,14 +23,14 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
 
         setDomain(url ? new URL(url).hostname : '');
 
-        if (isUnsupportedPage(url)) {
-          setIsUnsupported(true);
+        if (isUnsupportedPageUrl(url)) {
+          setStatus('unsupported');
           return;
         }
 
         const response = await sendMessageToContent(MessageAction.QUERY_RIGHT_CLICK_STATUS);
         if (response?.success) {
-          setIsUnlocked(response.restored);
+          setStatus(response.restored ? 'unlocked' : 'locked');
         }
       } catch (err) {
         console.error('[RightClickRestorer] Failed to load state:', err);
@@ -61,12 +43,12 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   }, []);
 
   async function unlock() {
-    if (isUnsupported) return;
+    if (status === 'unsupported') return;
 
     try {
       const response = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
       if (response?.success) {
-        setIsUnlocked(response.restored);
+        setStatus(response.restored ? 'unlocked' : 'locked');
       }
     } catch (err) {
       console.error('[RightClickRestorer] Failed to unlock:', err);
@@ -76,8 +58,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   return {
     domain,
     isLoading,
-    isUnlocked,
-    isUnsupported,
+    status,
     unlock,
   };
 }
diff --git a/src/pages/StorageCleaner/__tests__/index.test.tsx b/src/pages/StorageCleaner/__tests__/index.test.tsx
new file mode 100644
index 0000000..bd348fc
--- /dev/null
+++ b/src/pages/StorageCleaner/__tests__/index.test.tsx
@@ -0,0 +1,132 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
+import { browser } from 'wxt/browser';
+import Index from '../index';
+import { clearStorage, getCookieSize, getCurrentTab } from '@/utils/storageCleaner';
+import { toast } from 'sonner';
+
+vi.mock('@/utils/chromeStorage', () => ({
+  storageUtil: {
+    get: vi.fn().mockResolvedValue(null),
+    set: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+
+vi.mock('@/utils/storageCleaner', () => ({
+  getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
+  getCookieSize: vi.fn().mockResolvedValue(0),
+  getLocalStorageSize: vi.fn().mockResolvedValue(0),
+  getSessionStorageSize: vi.fn().mockResolvedValue(0),
+  getOriginStorageEstimate: vi.fn().mockResolvedValue(0),
+  getCacheStorageSize: vi.fn().mockResolvedValue(0),
+  getServiceWorkerCount: vi.fn().mockResolvedValue(0),
+  clearStorage: vi.fn().mockResolvedValue({ overallSuccess: true }),
+  formatCleaningResult: vi.fn().mockReturnValue('Cleaned successfully'),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    warning: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe('StorageCleaner 页面', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getCurrentTab).mockResolvedValue({ id: 1, url: 'https://example.com' } as any);
+    vi.mocked(clearStorage).mockResolvedValue({ overallSuccess: true });
+  });
+
+  it('应该渲染初始化加载状态', () => {
+    render(<Index />);
+    expect(screen.getByText(/正在读取数据/)).toBeInTheDocument();
+  });
+
+  it('读取当前标签页失败时应显示错误提示', async () => {
+    vi.mocked(getCurrentTab).mockRejectedValueOnce(new Error('Tabs unavailable'));
+
+    render(<Index />);
+
+    expect(await screen.findByText('读取数据失败')).toBeInTheDocument();
+  });
+
+  it('确认清理前如果当前标签页变为受限页面，不应执行清理', async () => {
+    render(<Index />);
+
+    const cleanButton = await screen.findByRole('button', { name: /立即清理/ });
+    fireEvent.click(cleanButton);
+
+    vi.mocked(getCurrentTab).mockResolvedValueOnce({
+      id: 1,
+      url: 'chrome://extensions',
+    } as any);
+    fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+
+    await waitFor(() => {
+      expect(clearStorage).not.toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('存储清理功能不支持此页面');
+    });
+  });
+
+  it('自动刷新后应等待标签页完成加载并重新读取信息后再允许再次清理', async () => {
+    const tabUpdatedListeners: Array<(tabId: number, changeInfo: { status?: string }) => void> = [];
+    (browser.tabs.onUpdated.addListener as any).mockImplementation((listener: any) => {
+      tabUpdatedListeners.push(listener);
+    });
+    (browser.tabs.onUpdated.removeListener as any).mockImplementation((listener: any) => {
+      const index = tabUpdatedListeners.indexOf(listener);
+      if (index >= 0) tabUpdatedListeners.splice(index, 1);
+    });
+
+    render(<Index />);
+
+    const cleanButton = await screen.findByRole('button', { name: /立即清理/ });
+    fireEvent.click(cleanButton);
+    fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+
+    await waitFor(() => expect(browser.tabs.reload).toHaveBeenCalledWith(1));
+
+    const loadingButton = screen.getByRole('button', { name: /正在清理/ });
+    expect(loadingButton).toBeDisabled();
+    fireEvent.click(loadingButton);
+    expect(clearStorage).toHaveBeenCalledTimes(1);
+
+    const reloadListener = tabUpdatedListeners.at(-1);
+    expect(reloadListener).toBeDefined();
+    reloadListener?.(1, { status: 'complete' });
+
+    await waitFor(() => {
+      expect(getCookieSize).toHaveBeenCalledTimes(2);
+      expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
+    });
+  });
+
+  it('展示的数据与当前标签页不一致时不应执行清理', async () => {
+    let currentTabId = 1;
+    vi.mocked(getCurrentTab).mockImplementation(
+      async () =>
+        ({
+          id: currentTabId,
+          url: currentTabId === 1 ? 'https://a.example.com' : 'https://b.example.com',
+        }) as any,
+    );
+
+    render(<Index />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
+    });
+
+    currentTabId = 2;
+
+    fireEvent.click(screen.getByRole('button', { name: /立即清理/ }));
+    fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+
+    await waitFor(() => {
+      expect(clearStorage).not.toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('当前标签页已切换，请等待数据刷新后再清理');
+    });
+  });
+});
diff --git a/src/pages/StorageCleaner/AutoRefreshToggle.tsx b/src/pages/StorageCleaner/components/AutoRefreshToggle.tsx
similarity index 52%
rename from src/pages/StorageCleaner/AutoRefreshToggle.tsx
rename to src/pages/StorageCleaner/components/AutoRefreshToggle.tsx
index 6b353fb..3b57b4f 100644
--- a/src/pages/StorageCleaner/AutoRefreshToggle.tsx
+++ b/src/pages/StorageCleaner/components/AutoRefreshToggle.tsx
@@ -1,20 +1,4 @@
-/**
- * 自动刷新开关行
- *
- * 用于 StorageCleaner 页面的操作区域内（非独立卡片），
- * 控制清理后是否自动刷新页面。左侧为标签文本，右侧为 shadcn/ui Switch 开关。
- *
- * @example
- * ```tsx
- * <AutoRefreshToggle
- *   reloadAfterClean={reloadAfterClean}
- *   onChange={(checked) => setReloadAfterClean(checked)}
- * />
- * ```
- */
-
 import React from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
@@ -23,28 +7,16 @@ export interface AutoRefreshToggleProps extends Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange'
 > {
-  /** 开关的当前状态（受控） */
   reloadAfterClean: boolean;
-  /** 状态变化时的回调函数 */
   onChange: (checked: boolean) => void;
 }
 
-/**
- * 自动刷新开关
- *
- * @param reloadAfterClean - 当前开关状态
- * @param onChange - 状态变化回调，接收新的布尔值
- * @param className - 额外的 CSS 类名，用于覆盖或扩展样式
- * @param props - 透传给外层 div 的其他 HTML 属性
- */
 export default function AutoRefreshToggle({
   reloadAfterClean,
   onChange,
   className,
   ...props
 }: AutoRefreshToggleProps) {
-  const { t } = useI18n('storageCleaner');
-
   return (
     <div
       className={cn(
@@ -57,7 +29,7 @@ export default function AutoRefreshToggle({
         htmlFor="auto-refresh-switch"
         className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
       >
-        {t('storageCleaner:autoRefresh')}
+        清理后自动刷新页面
       </Label>
 
       <Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
diff --git a/src/pages/StorageCleaner/CleaningResult.tsx b/src/pages/StorageCleaner/components/CleaningResult.tsx
similarity index 84%
rename from src/pages/StorageCleaner/CleaningResult.tsx
rename to src/pages/StorageCleaner/components/CleaningResult.tsx
index 7025838..ee1f05f 100644
--- a/src/pages/StorageCleaner/CleaningResult.tsx
+++ b/src/pages/StorageCleaner/components/CleaningResult.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { CheckCircle, XCircle } from 'lucide-react';
 import type { CleaningResult as CleaningResultType } from '@/types/storage';
 import { formatCleaningResult } from '@/utils/storageCleaner';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,8 +9,6 @@ interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
-  const { t } = useI18n('storageCleaner');
-
   if (!result) return null;
 
   const isSuccess = result.overallSuccess;
@@ -33,9 +30,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
         )}
 
         <span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
-          {isSuccess
-            ? formatCleaningResult(result, t)
-            : result.error || t('storageCleaner:partialFailure')}
+          {isSuccess ? formatCleaningResult(result) : result.error || '部分清理失败'}
         </span>
       </div>
     </div>
diff --git a/src/pages/StorageCleaner/ErrorDisplay.tsx b/src/pages/StorageCleaner/components/ErrorDisplay.tsx
similarity index 88%
rename from src/pages/StorageCleaner/ErrorDisplay.tsx
rename to src/pages/StorageCleaner/components/ErrorDisplay.tsx
index 2568831..2879711 100644
--- a/src/pages/StorageCleaner/ErrorDisplay.tsx
+++ b/src/pages/StorageCleaner/components/ErrorDisplay.tsx
@@ -1,5 +1,4 @@
 import { AlertCircle } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 
 interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -7,8 +6,6 @@ interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
-  const { t } = useI18n('storageCleaner');
-
   return (
     <div
       className={cn(
@@ -27,7 +24,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
         </p>
 
         <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
-          {t('storageCleaner:errorStandardOnly')}
+          存储清理功能仅适用于标准网页
         </p>
       </div>
     </div>
diff --git a/src/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/components/OptionItem.tsx
similarity index 85%
rename from src/pages/StorageCleaner/OptionItem.tsx
rename to src/pages/StorageCleaner/components/OptionItem.tsx
index a6c96ee..7eefb08 100644
--- a/src/pages/StorageCleaner/OptionItem.tsx
+++ b/src/pages/StorageCleaner/components/OptionItem.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { formatBytes } from '@/utils/format';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-import type { StorageSizeInfo } from './useStorageCleaner';
+import type { StorageSizeInfo } from '../useStorageCleaner';
+import { CLEAN_OPTION_KEYS, OPTION_LABELS } from '../constants';
 import { Checkbox } from '@/components/ui/checkbox';
 
 interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  labelKey: string;
+  labelKey: (typeof CLEAN_OPTION_KEYS)[number];
   checked: boolean;
   sizeInfo?: StorageSizeInfo;
   onChange: () => void;
@@ -20,10 +20,9 @@ export default function OptionItem({
   className,
   ...props
 }: OptionItemProps) {
-  const { t } = useI18n('storageCleaner');
-
   const sizeValue = sizeInfo?.value;
   const isCount = sizeInfo?.displayType === 'count';
+  const label = OPTION_LABELS[labelKey];
 
   return (
     <div
@@ -44,7 +43,7 @@ export default function OptionItem({
             checked ? 'text-foreground' : 'text-foreground/75',
           )}
         >
-          {t(labelKey)}
+          {label}
         </span>
 
         {sizeValue !== undefined && sizeValue > 0 ? (
@@ -54,11 +53,11 @@ export default function OptionItem({
               checked ? 'text-primary/70' : 'text-muted-foreground/70',
             )}
           >
-            {isCount ? `${sizeValue} ${t('storageCleaner:countUnit')}` : formatBytes(sizeValue)}
+            {isCount ? `${sizeValue} 项` : formatBytes(sizeValue)}
           </span>
         ) : (
           <span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
-            {t('storageCleaner:noData')}
+            无数据
           </span>
         )}
       </div>
diff --git a/src/pages/StorageCleaner/StorageCleanerConfirm.tsx b/src/pages/StorageCleaner/components/StorageCleanerConfirm.tsx
similarity index 85%
rename from src/pages/StorageCleaner/StorageCleanerConfirm.tsx
rename to src/pages/StorageCleaner/components/StorageCleanerConfirm.tsx
index b3397cc..116bcc3 100644
--- a/src/pages/StorageCleaner/StorageCleanerConfirm.tsx
+++ b/src/pages/StorageCleaner/components/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 { useI18n } from '@/utils/chromeI18n';
+import { OPTION_LABELS, CLEAN_OPTION_KEYS } from '../constants';
 import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
@@ -26,11 +26,9 @@ export function StorageCleanerConfirm({
   onConfirm,
   options,
 }: StorageCleanerConfirmProps) {
-  const { t } = useI18n('storageCleaner');
-
-  const selectedOptions = Object.entries(options)
-    .filter(([_, value]) => value)
-    .map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
+  const selectedOptions = CLEAN_OPTION_KEYS.filter((key) => options[key]).map(
+    (key) => OPTION_LABELS[key],
+  );
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
@@ -42,14 +40,14 @@ export function StorageCleanerConfirm({
         {/* 头部标题区域 */}
         <DialogHeader className="pt-1">
           <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
-            {t('storageCleaner:confirmTitle')}
+            确认清理数据？
           </DialogTitle>
         </DialogHeader>
 
         {/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
         <div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
           <DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
-            {t('storageCleaner:confirmDesc')}
+            您将永久删除当前页面的以下选定存储项。
           </DialogDescription>
 
           {/* 待清理项目徽章群 */}
@@ -69,7 +67,7 @@ export function StorageCleanerConfirm({
           <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
             <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
             <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
-              {t('storageCleaner:irreversible')}
+              此操作不可撤销
             </span>
           </div>
         </div>
@@ -81,7 +79,7 @@ export function StorageCleanerConfirm({
             onClick={onConfirm}
             className="w-full text-xs font-bold shadow-sm h-9"
           >
-            {t('storageCleaner:confirmAction')}
+            确认清理
           </Button>
           <Button
             variant="outline"
@@ -89,7 +87,7 @@ export function StorageCleanerConfirm({
             onClick={onClose}
             className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
           >
-            {t('common_buttons_cancel')}
+            取消
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/pages/StorageCleaner/StorageOptionsGrid.tsx b/src/pages/StorageCleaner/components/StorageOptionsGrid.tsx
similarity index 81%
rename from src/pages/StorageCleaner/StorageOptionsGrid.tsx
rename to src/pages/StorageCleaner/components/StorageOptionsGrid.tsx
index f19e36a..b23323f 100644
--- a/src/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/src/pages/StorageCleaner/components/StorageOptionsGrid.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import type { StorageCleanerOptions } from '@/types/storage';
-import type { StorageSizeInfo } from './useStorageCleaner';
+import type { StorageSizeInfo } from '../useStorageCleaner';
 import OptionItem from './OptionItem';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { CLEAN_OPTION_KEYS } from '../constants';
 
 interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
   options: StorageCleanerOptions;
@@ -26,17 +26,6 @@ export default function StorageOptionsGrid({
   className,
   ...props
 }: StorageOptionsGridProps) {
-  const { t } = useI18n('storageCleaner');
-
-  const optionKeys: (keyof StorageCleanerOptions)[] = [
-    'localStorage',
-    'sessionStorage',
-    'indexedDB',
-    'cookies',
-    'cacheStorage',
-    'serviceWorkers',
-  ];
-
   const handleToggleAll = () => {
     onSelectAll(!allSelected);
   };
@@ -45,10 +34,10 @@ 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) => (
+          {CLEAN_OPTION_KEYS.map((key) => (
             <OptionItem
               key={key}
-              labelKey={`storageCleaner:options.${key}`}
+              labelKey={key}
               checked={options[key]}
               sizeInfo={sizes[key]}
               onChange={() => onOptionChange(key)}
@@ -62,7 +51,7 @@ export default function StorageOptionsGrid({
         className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
       >
         <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
-          {t('storageCleaner:selectAll')}
+          全选所有项
         </Label>
 
         <Checkbox
diff --git a/src/pages/StorageCleaner/constants.ts b/src/pages/StorageCleaner/constants.ts
new file mode 100644
index 0000000..9b9d040
--- /dev/null
+++ b/src/pages/StorageCleaner/constants.ts
@@ -0,0 +1,19 @@
+import type { StorageCleanerOptions } from '@/types/storage';
+
+export const CLEAN_OPTION_KEYS = [
+  'localStorage',
+  'sessionStorage',
+  'indexedDB',
+  'cookies',
+  'cacheStorage',
+  'serviceWorkers',
+] as const satisfies readonly (keyof StorageCleanerOptions)[];
+
+export const OPTION_LABELS: Record<(typeof CLEAN_OPTION_KEYS)[number], string> = {
+  localStorage: 'Local Storage',
+  sessionStorage: 'Session Storage',
+  indexedDB: 'IndexedDB',
+  cookies: 'Cookies',
+  cacheStorage: 'Cache Storage',
+  serviceWorkers: 'Service Workers',
+};
diff --git a/src/pages/StorageCleaner/index.tsx b/src/pages/StorageCleaner/index.tsx
index 63b1f28..c84c370 100644
--- a/src/pages/StorageCleaner/index.tsx
+++ b/src/pages/StorageCleaner/index.tsx
@@ -1,16 +1,13 @@
 import { Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import StorageCleanerConfirm from './StorageCleanerConfirm';
+import StorageCleanerConfirm from './components/StorageCleanerConfirm';
 import { useStorageCleaner } from './useStorageCleaner';
-import StorageOptionsGrid from './StorageOptionsGrid';
-import AutoRefreshToggle from './AutoRefreshToggle';
-import ErrorDisplay from './ErrorDisplay';
-import CleaningResult from './CleaningResult';
-import { useI18n } from '@/utils/chromeI18n';
+import StorageOptionsGrid from './components/StorageOptionsGrid';
+import AutoRefreshToggle from './components/AutoRefreshToggle';
+import ErrorDisplay from './components/ErrorDisplay';
+import CleaningResult from './components/CleaningResult';
 
 export default function Index() {
-  const { t } = useI18n('storageCleaner');
-
   const {
     error,
     isInitializing,
@@ -18,6 +15,7 @@ export default function Index() {
     sizes,
     reloadAfterClean,
     loading,
+    isRefreshingSizes,
     result,
     showConfirm,
     setShowConfirm,
@@ -29,14 +27,14 @@ export default function Index() {
     handleClean,
   } = useStorageCleaner();
 
-  const isButtonDisabled = !(someSelected || allSelected) || loading;
+  const isButtonDisabled = !(someSelected || allSelected) || loading || isRefreshingSizes;
 
   if (isInitializing) {
     return (
       <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>
     );
@@ -75,10 +73,10 @@ export default function Index() {
             {loading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {t('storageCleaner:cleaning')}
+                正在清理...
               </>
             ) : (
-              t('storageCleaner:cleanNow')
+              '立即清理'
             )}
           </Button>
         </div>
diff --git a/src/pages/StorageCleaner/useStorageCleaner.ts b/src/pages/StorageCleaner/useStorageCleaner.ts
index 9b46579..5dbe66e 100644
--- a/src/pages/StorageCleaner/useStorageCleaner.ts
+++ b/src/pages/StorageCleaner/useStorageCleaner.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { browser } from 'wxt/browser';
 import { storageUtil } from '@/utils/chromeStorage';
 import type {
   CleaningResult,
@@ -14,9 +15,8 @@ import {
   getOriginStorageEstimate,
   getServiceWorkerCount,
   getSessionStorageSize,
-  isRestrictedUrl,
 } from '@/utils/storageCleaner';
-import { useI18n } from '@/utils/chromeI18n';
+import { isRestrictedUrl } from '@/utils/restrictedUrls';
 import { toast } from 'sonner';
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
@@ -33,6 +33,36 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
   selectedTypes: DEFAULT_OPTIONS,
 };
 
+const RELOAD_COMPLETE_TIMEOUT_MS = 10_000;
+
+async function reloadTabAndWaitForComplete(tabId: number): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    function cleanup() {
+      clearTimeout(timeoutId);
+      browser.tabs.onUpdated.removeListener(handleUpdated);
+    }
+
+    function finish() {
+      cleanup();
+      resolve();
+    }
+
+    function handleUpdated(updatedTabId: number, changeInfo: { status?: string }) {
+      if (updatedTabId === tabId && changeInfo.status === 'complete') {
+        finish();
+      }
+    }
+
+    const timeoutId = setTimeout(finish, RELOAD_COMPLETE_TIMEOUT_MS);
+    browser.tabs.onUpdated.addListener(handleUpdated);
+
+    browser.tabs.reload(tabId).catch((err) => {
+      cleanup();
+      reject(err);
+    });
+  });
+}
+
 export interface StorageSizeInfo {
   value: number;
   displayType: 'bytes' | 'count';
@@ -45,6 +75,7 @@ export interface UseStorageCleanerReturn {
   sizes: Record<string, StorageSizeInfo>;
   reloadAfterClean: boolean;
   loading: boolean;
+  isRefreshingSizes: boolean;
   result: CleaningResult | null;
   showConfirm: boolean;
   setShowConfirm: (show: boolean) => void;
@@ -59,17 +90,18 @@ export interface UseStorageCleanerReturn {
 }
 
 export function useStorageCleaner(): UseStorageCleanerReturn {
-  const { t } = useI18n(['storageCleaner', 'common']);
   const [error, setError] = useState<string>('');
   const [isInitializing, setIsInitializing] = useState<boolean>(true);
   const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
   const [sizes, setSizes] = useState<Record<string, StorageSizeInfo>>({});
   const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
   const [loading, setLoading] = useState<boolean>(false);
+  const [isRefreshingSizes, setIsRefreshingSizes] = useState<boolean>(false);
   const [result, setResult] = useState<CleaningResult | null>(null);
   const [showConfirm, setShowConfirm] = useState<boolean>(false);
 
   const requestIdRef = useRef<number>(0);
+  const boundTabRef = useRef<{ id: number; url: string } | null>(null);
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
   const storageTimerRef = useRef<NodeJS.Timeout | null>(null);
   const loadingRef = useRef(loading);
@@ -85,19 +117,19 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     };
   }, []);
 
-  // 核心数据拉取链条
   const loadInfo = useCallback(async () => {
     const currentRequestId = ++requestIdRef.current;
+    setIsRefreshingSizes(true);
     try {
       const tab = await getCurrentTab();
       if (currentRequestId !== requestIdRef.current) return;
 
       if (!tab || !tab.url) {
-        setError(t('storageCleaner:errorNoTab'));
+        setError('无法获取当前标签页');
         return;
       }
       if (isRestrictedUrl(tab.url)) {
-        setError(t('storageCleaner:errorRestricted'));
+        setError('存储清理功能不支持此页面');
         return;
       }
 
@@ -130,12 +162,19 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
         cacheStorage: { value: cacheCount, displayType: 'count' },
         serviceWorkers: { value: swCount, displayType: 'count' },
       });
+      boundTabRef.current = { id: tabId, url };
+    } catch (err) {
+      console.error('Failed to load storage cleaner info:', err);
+      if (currentRequestId === requestIdRef.current) {
+        setError('读取数据失败');
+      }
     } finally {
       if (currentRequestId === requestIdRef.current) {
         setIsInitializing(false);
+        setIsRefreshingSizes(false);
       }
     }
-  }, [t]);
+  }, []);
 
   const loadInfoRef = useRef(loadInfo);
   useEffect(() => {
@@ -149,7 +188,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     }, 300);
   }, []);
 
-  // 监听浏览器标签行为
   useEffect(() => {
     loadInfoRef.current().catch(console.error);
 
@@ -160,14 +198,14 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       }
     };
 
-    chrome.tabs.onActivated.addListener(handleTabChange);
-    chrome.tabs.onUpdated.addListener(handleTabUpdated);
-    chrome.windows.onFocusChanged.addListener(handleTabChange);
+    browser.tabs.onActivated.addListener(handleTabChange);
+    browser.tabs.onUpdated.addListener(handleTabUpdated);
+    browser.windows.onFocusChanged.addListener(handleTabChange);
 
     return () => {
-      chrome.tabs.onActivated.removeListener(handleTabChange);
-      chrome.tabs.onUpdated.removeListener(handleTabUpdated);
-      chrome.windows.onFocusChanged.removeListener(handleTabChange);
+      browser.tabs.onActivated.removeListener(handleTabChange);
+      browser.tabs.onUpdated.removeListener(handleTabUpdated);
+      browser.windows.onFocusChanged.removeListener(handleTabChange);
     };
   }, [debouncedLoadInfo]);
 
@@ -209,28 +247,42 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
 
     const tab = await getCurrentTab();
     if (!tab || !tab.id || !tab.url) {
-      toast.warning(t('storageCleaner:errorNoTab'));
+      toast.warning('无法获取当前标签页');
+      return;
+    }
+
+    if (isRestrictedUrl(tab.url)) {
+      toast.warning('存储清理功能不支持此页面');
+      setShowConfirm(false);
+      return;
+    }
+
+    const boundTab = boundTabRef.current;
+    if (!boundTab || boundTab.id !== tab.id) {
+      toast.warning('当前标签页已切换，请等待数据刷新后再清理');
+      setShowConfirm(false);
       return;
     }
 
     setLoading(true);
+    setShowConfirm(false);
     try {
       const cleaningResult = await clearStorage(tab.id, tab.url, options);
       setResult(cleaningResult);
 
       if (reloadAfterClean && cleaningResult.overallSuccess) {
-        toast.success(t('storageCleaner:cleanSuccessReload'));
-        await chrome.tabs.reload(tab.id);
+        toast.success('清理成功，即将刷新页面');
+        await reloadTabAndWaitForComplete(tab.id);
+        await loadInfo();
       } else {
         await loadInfo();
       }
     } catch (err) {
-      toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
+      toast.error(`清理失败: ${String(err)}`);
     } finally {
       setLoading(false);
-      setShowConfirm(false);
     }
-  }, [options, reloadAfterClean, loadInfo, t]);
+  }, [options, reloadAfterClean, loadInfo]);
 
   const totalBytes = useMemo(() => {
     return Object.values(sizes).reduce((acc, s) => {
@@ -252,6 +304,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     sizes,
     reloadAfterClean,
     loading,
+    isRefreshingSizes,
     result,
     showConfirm,
     setShowConfirm,
diff --git a/src/pages/TestDataGenerator/__tests__/index.test.tsx b/src/pages/TestDataGenerator/__tests__/index.test.tsx
new file mode 100644
index 0000000..7ba77b7
--- /dev/null
+++ b/src/pages/TestDataGenerator/__tests__/index.test.tsx
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+vi.mock('../hooks/useGenerator', () => ({
+  useGenerator: () => ({
+    isGenerating: false,
+    progress: null,
+    result: null,
+    error: null,
+    generate: vi.fn(),
+    cancel: vi.fn(),
+    clearResult: vi.fn(),
+  }),
+}));
+
+vi.mock('@/utils/ruleStorage', () => ({
+  MAX_RULES: 20,
+  getAll: vi.fn(() => []),
+  save: vi.fn(),
+  deleteRule: vi.fn(),
+  duplicate: vi.fn(),
+  recordUse: vi.fn(),
+  search: vi.fn(() => []),
+  exportRules: vi.fn(() => '[]'),
+  importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import TestDataGeneratorPage from '../index';
+import * as ruleStorage from '@/utils/ruleStorage';
+import { toast } from 'sonner';
+import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
+
+const mockedRuleStorage = vi.mocked(ruleStorage);
+const mockedToast = vi.mocked(toast);
+
+const mockFields: FieldConfig[] = [
+  {
+    id: 'field-1',
+    name: 'name',
+    generatorId: 'string',
+    params: {},
+    required: true,
+    nullRate: 0,
+    unique: false,
+  },
+];
+
+const mockRule: DataRule = {
+  id: 'rule-1',
+  name: '用户数据规则',
+  description: '测试规则',
+  fields: mockFields,
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  useCount: 0,
+};
+
+describe('TestDataGeneratorPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+  });
+
+  it('编辑规则时应显示包含规则名的 toast', async () => {
+    const user = userEvent.setup();
+    render(<TestDataGeneratorPage />);
+
+    await user.click(screen.getByText('规则管理'));
+    await user.click(screen.getByTitle('编辑'));
+
+    expect(mockedToast.success).toHaveBeenCalledWith('正在编辑规则「用户数据规则」');
+    expect(mockedToast.success).not.toHaveBeenCalledWith(expect.stringContaining('{{name}}'));
+  });
+});
diff --git a/src/pages/TestDataGenerator/components/DataPreview.tsx b/src/pages/TestDataGenerator/components/DataPreview.tsx
index abfca39..151c520 100644
--- a/src/pages/TestDataGenerator/components/DataPreview.tsx
+++ b/src/pages/TestDataGenerator/components/DataPreview.tsx
@@ -1,11 +1,9 @@
 /**
  * 数据预览组件
- * 展示一条示例数据，展示数据结构
  */
 
 import { useMemo } from 'react';
 import { FileJson, FileText } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
 import { getGeneratorById } from '@/lib/generators';
 import type { FieldConfig } from '@/types/testDataGenerator';
 
@@ -13,7 +11,6 @@ interface DataPreviewProps {
   fields: FieldConfig[];
 }
 
-/** JSON 语法高亮渲染 */
 function JsonHighlight({ data }: { data: Record<string, unknown> }) {
   const formatted = useMemo(() => {
     const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
@@ -46,7 +43,6 @@ function JsonHighlight({ data }: { data: Record<string, unknown> }) {
   );
 }
 
-/** 根据值类型返回颜色类名 */
 function getValueColor(value: string): string {
   if (value === 'null') return 'text-muted-foreground';
   if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
@@ -56,15 +52,11 @@ function getValueColor(value: string): string {
 }
 
 export default function DataPreview({ fields }: DataPreviewProps) {
-  const { t } = useI18n('testDataGenerator');
-
-  // 生成一条示例数据
   const sampleData = useMemo(() => {
     if (fields.length === 0) return null;
 
     const record: Record<string, unknown> = {};
     for (const field of fields) {
-      // 非必填字段预览显示 null
       if (!field.required) {
         record[field.name] = null;
         continue;
@@ -83,29 +75,25 @@ export default function DataPreview({ fields }: DataPreviewProps) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-center">
         <FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
-        <p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
+        <p className="text-xs text-muted-foreground/50">配置字段后点击「生成数据」按钮</p>
       </div>
     );
   }
 
   return (
     <div className="flex flex-col h-full">
-      {/* 示例标签 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
             <FileText className="h-3 w-3 text-primary" />
           </div>
-          <span className="text-xs font-medium text-muted-foreground">
-            {t('testDataGenerator_sampleData')}
-          </span>
+          <span className="text-xs font-medium text-muted-foreground">示例数据</span>
         </div>
         <span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
-          {Object.keys(sampleData).length} {t('testDataGenerator_fields')}
+          {Object.keys(sampleData).length} 字段
         </span>
       </div>
 
-      {/* 示例数据展示 */}
       <div className="flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 p-4">
         <JsonHighlight data={sampleData} />
       </div>
diff --git a/src/pages/TestDataGenerator/components/ExportPanel.tsx b/src/pages/TestDataGenerator/components/ExportPanel.tsx
index f16a1cc..483e6c9 100644
--- a/src/pages/TestDataGenerator/components/ExportPanel.tsx
+++ b/src/pages/TestDataGenerator/components/ExportPanel.tsx
@@ -6,7 +6,6 @@
 import { Copy, Download } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
-import { useI18n } from '@/utils/chromeI18n';
 import { DataExporter } from '@/utils/dataExporter';
 import type { GenerateResult } from '@/types/testDataGenerator';
 
@@ -15,8 +14,6 @@ interface ExportPanelProps {
 }
 
 export default function ExportPanel({ result }: ExportPanelProps) {
-  const { t } = useI18n('testDataGenerator');
-
   if (!result?.data || result.data.length === 0) {
     return null;
   }
@@ -25,9 +22,9 @@ export default function ExportPanel({ result }: ExportPanelProps) {
     const content = DataExporter.toJSON(result.data!);
     const success = await DataExporter.copyToClipboard(content);
     if (success) {
-      toast.success(t('testDataGenerator_copySuccess'));
+      toast.success('已复制到剪贴板');
     } else {
-      toast.error(t('testDataGenerator_copyFailed'));
+      toast.error('复制失败');
     }
   };
 
@@ -35,9 +32,9 @@ export default function ExportPanel({ result }: ExportPanelProps) {
     const content = DataExporter.toCSV(result.data!);
     const success = await DataExporter.copyToClipboard(content);
     if (success) {
-      toast.success(t('testDataGenerator_copySuccess'));
+      toast.success('已复制到剪贴板');
     } else {
-      toast.error(t('testDataGenerator_copyFailed'));
+      toast.error('复制失败');
     }
   };
 
@@ -53,27 +50,27 @@ export default function ExportPanel({ result }: ExportPanelProps) {
 
   return (
     <div className="space-y-2">
-      <h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
+      <h4 className="text-sm font-medium text-foreground">导出数据</h4>
 
       <div className="grid grid-cols-2 gap-2">
         <Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
           <Copy className="h-4 w-4" />
-          {t('testDataGenerator_copyJSON')}
+          复制 JSON
         </Button>
 
         <Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
           <Copy className="h-4 w-4" />
-          {t('testDataGenerator_copyCSV')}
+          复制 CSV
         </Button>
 
         <Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
           <Download className="h-4 w-4" />
-          {t('testDataGenerator_downloadJSON')}
+          下载 JSON
         </Button>
 
         <Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
           <Download className="h-4 w-4" />
-          {t('testDataGenerator_downloadCSV')}
+          下载 CSV
         </Button>
       </div>
     </div>
diff --git a/src/pages/TestDataGenerator/components/FieldEditor.tsx b/src/pages/TestDataGenerator/components/FieldEditor.tsx
index 3a5d740..d23fab9 100644
--- a/src/pages/TestDataGenerator/components/FieldEditor.tsx
+++ b/src/pages/TestDataGenerator/components/FieldEditor.tsx
@@ -1,11 +1,10 @@
 /**
  * 字段编辑器组件
- * 编辑单个字段的详细配置
  */
 
 import { useState, useCallback } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Badge } from '@/components/ui/badge';
 import { getGeneratorById } from '@/lib/generators';
@@ -16,12 +15,10 @@ import GeneratorConfig from './GeneratorConfig';
 interface FieldEditorProps {
   field: FieldConfig;
   onChange: (field: FieldConfig) => void;
-  /** 所有字段名列表，用于检测重复 */
   allFieldNames?: string[];
 }
 
 export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
-  const { t } = useI18n('testDataGenerator');
   const generator = getGeneratorById(field.generatorId);
   const [nameError, setNameError] = useState<string | null>(null);
 
@@ -29,25 +26,24 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
     (name: string): string | null => {
       const trimmed = name.trim();
       if (!trimmed) {
-        return t('testDataGenerator_fieldNameEmpty');
+        return '字段名称不能为空';
       }
       if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
-        return t('testDataGenerator_fieldNameInvalid');
+        return '字段名称只能包含字母、数字和下划线';
       }
       const isDuplicate = allFieldNames.some(
         (n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
       );
       if (isDuplicate) {
-        return t('testDataGenerator_fieldNameDuplicate');
+        return '字段名称已存在';
       }
       return null;
     },
-    [allFieldNames, field.name, t],
+    [allFieldNames, field.name],
   );
 
   const handleNameChange = (name: string) => {
     onChange({ ...field, name });
-    // 实时校验
     const error = validateFieldName(name);
     setNameError(error);
   };
@@ -60,15 +56,12 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
     onChange({
       ...field,
       required,
-      // 切换为必填时清零，切换为非必填时默认 100%
       nullRate: required ? 0 : 100,
     });
   };
 
   const handleNullRateChange = (nullRate: number) => {
-    // 限制范围 0-100
     const clampedRate = Math.max(0, Math.min(100, nullRate));
-    // 空值率为 0 时自动设为必填
     if (clampedRate === 0) {
       onChange({ ...field, nullRate: clampedRate, required: true });
     } else {
@@ -106,19 +99,16 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
   return (
     <div className="space-y-5">
-      {/* 基础配置 */}
       <div className="space-y-4">
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-foreground">
-              {t('testDataGenerator_fieldName')}
-            </label>
+            <Label className="text-sm font-medium text-foreground">字段名称</Label>
             <span className="text-xs text-muted-foreground">{field.name.length}/20</span>
           </div>
           <Input
             value={field.name}
             onChange={(e) => handleNameChange(e.target.value)}
-            placeholder={t('testDataGenerator_fieldNamePlaceholder')}
+            placeholder="请输入字段名称"
             maxLength={20}
             className={`h-9 ${nameError ? 'border-destructive' : ''}`}
           />
@@ -127,9 +117,7 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-foreground">
-              {t('testDataGenerator_fieldDescription')}
-            </label>
+            <Label className="text-sm font-medium text-foreground">字段描述</Label>
             <span className="text-xs text-muted-foreground">
               {(field.description || '').length}/50
             </span>
@@ -137,28 +125,23 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
           <Input
             value={field.description || ''}
             onChange={(e) => handleDescriptionChange(e.target.value)}
-            placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
+            placeholder="可选，添加字段说明"
             maxLength={50}
             className="h-9"
           />
         </div>
       </div>
 
-      {/* 必填/选填配置 */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
-          <label className="text-sm font-medium text-foreground">
-            {t('testDataGenerator_required')}
-          </label>
+          <Label className="text-sm font-medium text-foreground">必填</Label>
           <Switch checked={field.required} onCheckedChange={handleRequiredChange} />
         </div>
 
         {!field.required && (
           <div className="space-y-2 pl-1">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                {t('testDataGenerator_nullRate')}
-              </span>
+              <span className="text-sm text-muted-foreground">空值率</span>
               <Badge variant="secondary" className="text-xs">
                 {field.nullRate}%
               </Badge>
@@ -196,28 +179,19 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
         )}
       </div>
 
-      {/* 唯一性约束 */}
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_uniqueConstraint')}
-        </label>
+        <Label className="text-sm font-medium text-foreground">唯一性约束</Label>
         <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
       </div>
 
-      {/* 生成器选择 */}
       <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_generator')}
-        </label>
+        <Label className="text-sm font-medium text-foreground">数据生成器</Label>
         <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
       </div>
 
-      {/* 生成器参数配置 */}
       {generator && (
         <div className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
-            {t('testDataGenerator_generatorParams')}
-          </label>
+          <Label className="text-sm font-medium text-foreground">生成器参数</Label>
           <GeneratorConfig
             generator={generator}
             params={field.params}
diff --git a/src/pages/TestDataGenerator/components/FieldItem.tsx b/src/pages/TestDataGenerator/components/FieldItem.tsx
index 9f21b4b..fc054d9 100644
--- a/src/pages/TestDataGenerator/components/FieldItem.tsx
+++ b/src/pages/TestDataGenerator/components/FieldItem.tsx
@@ -3,7 +3,6 @@
  * 展示单个字段的基本信息，适配固定高度卡片
  */
 
-import { useI18n } from '@/utils/chromeI18n';
 import { getGeneratorById } from '@/lib/generators';
 import { Badge } from '@/components/ui/badge';
 import type { FieldConfig } from '@/types/testDataGenerator';
@@ -14,7 +13,6 @@ interface FieldItemProps {
 }
 
 export default function FieldItem({ field, onClick }: FieldItemProps) {
-  const { t } = useI18n('testDataGenerator');
   const generator = getGeneratorById(field.generatorId);
 
   return (
@@ -25,7 +23,6 @@ export default function FieldItem({ field, onClick }: FieldItemProps) {
       <div
         className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
       >
-        {/* 第一行：字段名 + 标签 */}
         <div className="flex items-center gap-1.5 overflow-hidden">
           <span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
             {field.name}
@@ -43,11 +40,10 @@ export default function FieldItem({ field, onClick }: FieldItemProps) {
           )}
           {field.unique && (
             <Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
-              {t('testDataGenerator_unique')}
+              唯一
             </Badge>
           )}
         </div>
-        {/* 第二行：描述 */}
         {field.description && (
           <p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
             {field.description}
diff --git a/src/pages/TestDataGenerator/components/FieldList.tsx b/src/pages/TestDataGenerator/components/FieldList.tsx
index 0536780..1c4870a 100644
--- a/src/pages/TestDataGenerator/components/FieldList.tsx
+++ b/src/pages/TestDataGenerator/components/FieldList.tsx
@@ -10,7 +10,6 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { useI18n } from '@/utils/chromeI18n';
 import * as ruleStorage from '@/utils/ruleStorage';
 import {
   DndContext,
@@ -87,7 +86,6 @@ function SortableFieldItem({
       }`}
     >
       <div className="flex items-center gap-2 h-full px-3 py-2">
-        {/* 拖拽手柄 */}
         <button
           className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
           {...attributes}
@@ -123,7 +121,6 @@ export default function FieldList({
   editingRule,
   onRuleSaved,
 }: FieldListProps) {
-  const { t } = useI18n('testDataGenerator');
   const [scrollTop, setScrollTop] = useState(0);
   const [activeId, setActiveId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -226,10 +223,10 @@ export default function FieldList({
     });
 
     if (updated) {
-      toast.success(t('testDataGenerator_ruleUpdated'));
+      toast.success('规则已更新');
       onRuleSaved?.();
     }
-  }, [editingRule, fields, t, onRuleSaved]);
+  }, [editingRule, fields, onRuleSaved]);
 
   // 新建规则或另存为
   const handleSave = useCallback(
@@ -258,18 +255,18 @@ export default function FieldList({
         setShowConfirmOverwrite(false);
         setRuleName('');
         setRuleDescription('');
-        toast.success(t('testDataGenerator_ruleSaved'));
+        toast.success('规则已保存');
         onRuleSaved?.();
       }
     },
-    [ruleName, ruleDescription, fields, t, onRuleSaved],
+    [ruleName, ruleDescription, fields, onRuleSaved],
   );
 
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between mb-3">
         <h3 className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
+          字段 ({fields.length}/{MAX_FIELDS})
         </h3>
         <div className="flex items-center gap-2">
           {editingRule ? (
@@ -280,10 +277,10 @@ export default function FieldList({
                 onClick={handleUpdateRule}
                 disabled={fields.length === 0}
                 className="h-8 gap-1.5 px-2.5"
-                title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
+                title={`编辑中: ${editingRule.name}`}
               >
                 <Save className="h-3.5 w-3.5" />
-                {t('testDataGenerator_updateRule')}
+                更新规则
               </Button>
               <Button
                 variant="ghost"
@@ -292,7 +289,7 @@ export default function FieldList({
                 disabled={fields.length === 0}
                 className="h-8 px-2"
               >
-                {t('testDataGenerator_saveAs')}
+                另存为
               </Button>
             </>
           ) : (
@@ -304,7 +301,7 @@ export default function FieldList({
               className="h-8 gap-1.5 px-2.5"
             >
               <Save className="h-3.5 w-3.5" />
-              {t('testDataGenerator_saveRule')}
+              保存规则
             </Button>
           )}
           <Button
@@ -315,7 +312,7 @@ export default function FieldList({
             className="h-8 gap-1.5 px-2.5"
           >
             <Plus className="h-4 w-4" />
-            {t('testDataGenerator_addField')}
+            添加字段
           </Button>
         </div>
       </div>
@@ -324,10 +321,8 @@ export default function FieldList({
         {fields.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-8 text-center">
             <GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
-            <p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
-            <p className="text-xs text-muted-foreground/70 mt-1">
-              {t('testDataGenerator_addFieldHint')}
-            </p>
+            <p className="text-sm text-muted-foreground">暂无字段</p>
+            <p className="text-xs text-muted-foreground/70 mt-1">点击上方按钮添加第一个字段</p>
           </div>
         ) : (
           <DndContext
@@ -409,7 +404,6 @@ export default function FieldList({
         )}
       </div>
 
-      {/* 保存规则对话框 */}
       <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
         <DialogContent
           showCloseButton={false}
@@ -419,44 +413,41 @@ export default function FieldList({
             <Input
               value={ruleName}
               onChange={(e) => setRuleName(e.target.value)}
-              placeholder={t('testDataGenerator_ruleNamePlaceholder')}
+              placeholder="规则名称"
               className="h-9"
             />
             <Input
               value={ruleDescription}
               onChange={(e) => setRuleDescription(e.target.value)}
-              placeholder={t('testDataGenerator_ruleDescPlaceholder')}
+              placeholder="规则描述（可选）"
               className="h-9"
             />
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
-              {t('testDataGenerator_cancel')}
+              取消
             </Button>
             <Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
-              {t('testDataGenerator_confirm')}
+              确认
             </Button>
           </div>
         </DialogContent>
       </Dialog>
 
-      {/* 覆盖确认对话框 */}
       <Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
         <DialogContent
           showCloseButton={false}
           className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
         >
           <div className="flex-1 overflow-y-auto px-6 pb-4">
-            <p className="text-sm text-muted-foreground">
-              {t('testDataGenerator_ruleNameDuplicate')}
-            </p>
+            <p className="text-sm text-muted-foreground">已存在同名规则，是否覆盖保存？</p>
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
-              {t('testDataGenerator_cancel')}
+              取消
             </Button>
             <Button size="sm" onClick={() => handleSave(true)}>
-              {t('testDataGenerator_overwrite')}
+              覆盖
             </Button>
           </div>
         </DialogContent>
diff --git a/src/pages/TestDataGenerator/components/GenerateButton.tsx b/src/pages/TestDataGenerator/components/GenerateButton.tsx
index 606866c..25802fa 100644
--- a/src/pages/TestDataGenerator/components/GenerateButton.tsx
+++ b/src/pages/TestDataGenerator/components/GenerateButton.tsx
@@ -1,11 +1,9 @@
 /**
  * 生成按钮组件
- * 显示生成按钮、加载状态和进度条
  */
 
 import { Play, Square } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useI18n } from '@/utils/chromeI18n';
 import type { GenerateProgress } from '@/types/testDataGenerator';
 
 interface GenerateButtonProps {
@@ -23,27 +21,19 @@ export default function GenerateButton({
   progress,
   disabled,
 }: GenerateButtonProps) {
-  const { t } = useI18n('testDataGenerator');
-
   return (
     <div className="space-y-3">
       {isGenerating ? (
         <>
           <Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
             <Square className="h-5 w-5" />
-            {t('testDataGenerator_cancel')}
+            取消
           </Button>
 
-          {/* 进度条 */}
           {progress && (
             <div className="space-y-2">
               <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>
-                  {t('testDataGenerator_progress', {
-                    current: progress.generated.toLocaleString(),
-                    total: progress.total.toLocaleString(),
-                  })}
-                </span>
+                <span>{`已生成 ${progress.generated.toLocaleString()} / ${progress.total.toLocaleString()} 条`}</span>
                 <span>{progress.progress}%</span>
               </div>
               <div className="h-2 bg-muted rounded-full overflow-hidden">
@@ -54,9 +44,7 @@ export default function GenerateButton({
               </div>
               {progress.estimatedTimeLeft !== undefined && (
                 <p className="text-xs text-muted-foreground text-center">
-                  {t('testDataGenerator_estimatedTime', {
-                    time: Math.ceil(progress.estimatedTimeLeft / 1000),
-                  })}
+                  {`预计剩余 ${Math.ceil(progress.estimatedTimeLeft / 1000)} 秒`}
                 </p>
               )}
             </div>
@@ -65,7 +53,7 @@ export default function GenerateButton({
       ) : (
         <Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
           <Play className="h-5 w-5" />
-          {t('testDataGenerator_generate')}
+          生成数据
         </Button>
       )}
     </div>
diff --git a/src/pages/TestDataGenerator/components/GenerateOptions.tsx b/src/pages/TestDataGenerator/components/GenerateOptions.tsx
index c197afc..105e48a 100644
--- a/src/pages/TestDataGenerator/components/GenerateOptions.tsx
+++ b/src/pages/TestDataGenerator/components/GenerateOptions.tsx
@@ -3,8 +3,8 @@
  * 配置生成数量、数据格式等选项
  */
 
-import { useI18n } from '@/utils/chromeI18n';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 interface GenerateOptionsProps {
   count: number;
@@ -26,15 +26,10 @@ export default function GenerateOptions({
   format,
   onFormatChange,
 }: GenerateOptionsProps) {
-  const { t } = useI18n('testDataGenerator');
-
   return (
     <div className="space-y-4">
-      {/* 生成数量 */}
       <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_count')}
-        </label>
+        <Label className="text-sm font-medium text-foreground">生成数量</Label>
         <div className="flex flex-wrap gap-2">
           {COUNT_PRESETS.map((preset) => (
             <button
@@ -65,11 +60,8 @@ export default function GenerateOptions({
         />
       </div>
 
-      {/* 数据格式 */}
       <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_format')}
-        </label>
+        <Label className="text-sm font-medium text-foreground">数据格式</Label>
         <div className="flex gap-2">
           {FORMAT_OPTIONS.map((option) => (
             <button
diff --git a/src/pages/TestDataGenerator/components/GeneratorConfig.tsx b/src/pages/TestDataGenerator/components/GeneratorConfig.tsx
index f8e3392..2c95084 100644
--- a/src/pages/TestDataGenerator/components/GeneratorConfig.tsx
+++ b/src/pages/TestDataGenerator/components/GeneratorConfig.tsx
@@ -4,6 +4,7 @@
  */
 
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import {
   Select,
@@ -12,7 +13,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { useI18n } from '@/utils/chromeI18n';
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
 
 interface GeneratorConfigProps {
@@ -22,27 +22,22 @@ interface GeneratorConfigProps {
 }
 
 export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
-  const { t } = useI18n('testDataGenerator');
   const handleParamChange = (key: string, value: unknown) => {
     onChange({ ...params, [key]: value });
   };
 
   if (generator.params.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground py-2">
-        {t('testDataGenerator_noGeneratorParams')}
-      </p>
-    );
+    return <p className="text-sm text-muted-foreground py-2">此生成器无可配置参数</p>;
   }
 
   return (
     <div className="space-y-4 p-3 rounded-lg bg-muted/30">
       {generator.params.map((param) => (
         <div key={param.key} className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
+          <Label className="text-sm font-medium text-foreground">
             {param.label}
             {param.required && <span className="text-destructive ml-1">*</span>}
-          </label>
+          </Label>
           {param.description && (
             <p className="text-xs text-muted-foreground">{param.description}</p>
           )}
@@ -70,9 +65,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
           {param.type === 'boolean' && (
             <div className="flex items-center justify-between">
               <span className="text-sm text-muted-foreground">
-                {params[param.key] !== false
-                  ? t('testDataGenerator_enabled')
-                  : t('testDataGenerator_disabled')}
+                {params[param.key] !== false ? '启用' : '禁用'}
               </span>
               <Switch
                 checked={params[param.key] !== false}
@@ -115,7 +108,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
                     .filter(Boolean),
                 )
               }
-              placeholder={t('testDataGenerator_commaSeparated')}
+              placeholder="用逗号分隔多个值"
               className="h-9"
             />
           )}
diff --git a/src/pages/TestDataGenerator/components/GeneratorSelector.tsx b/src/pages/TestDataGenerator/components/GeneratorSelector.tsx
index cf51902..6d20326 100644
--- a/src/pages/TestDataGenerator/components/GeneratorSelector.tsx
+++ b/src/pages/TestDataGenerator/components/GeneratorSelector.tsx
@@ -6,7 +6,6 @@
 import { useState } from 'react';
 import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
 import { Input } from '@/components/ui/input';
-import { useI18n } from '@/utils/chromeI18n';
 import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
 
 interface GeneratorSelectorProps {
@@ -22,7 +21,6 @@ const categoryIcons: Record<string, React.ComponentType<{ className?: string }>>
 };
 
 export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
-  const { t } = useI18n('testDataGenerator');
   const [searchQuery, setSearchQuery] = useState('');
   const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
 
@@ -32,18 +30,16 @@ export default function GeneratorSelector({ selectedId, onChange }: GeneratorSel
 
   return (
     <div className="space-y-3">
-      {/* 搜索框 */}
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={t('testDataGenerator_searchGenerator')}
+          placeholder="搜索生成器..."
           className="pl-9 h-9"
         />
       </div>
 
-      {/* 分类标签 */}
       {!searchQuery && (
         <div className="flex flex-wrap gap-2">
           {generatorCategories.map((category) => {
@@ -66,7 +62,6 @@ export default function GeneratorSelector({ selectedId, onChange }: GeneratorSel
         </div>
       )}
 
-      {/* 生成器列表 */}
       <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
         {generators.map((generator) => (
           <button
diff --git a/src/pages/TestDataGenerator/components/ResultPanel.tsx b/src/pages/TestDataGenerator/components/ResultPanel.tsx
index ce76612..87e0c2c 100644
--- a/src/pages/TestDataGenerator/components/ResultPanel.tsx
+++ b/src/pages/TestDataGenerator/components/ResultPanel.tsx
@@ -4,7 +4,6 @@
  */
 
 import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
 import type { GenerateResult } from '@/types/testDataGenerator';
 
 interface ResultPanelProps {
@@ -12,8 +11,6 @@ interface ResultPanelProps {
 }
 
 export default function ResultPanel({ result }: ResultPanelProps) {
-  const { t } = useI18n('testDataGenerator');
-
   if (!result) return null;
 
   const getStatusIcon = () => {
@@ -28,23 +25,21 @@ export default function ResultPanel({ result }: ResultPanelProps) {
 
   const getStatusText = () => {
     if (result.success && (!result.warnings || result.warnings.length === 0)) {
-      return t('testDataGenerator_success');
+      return '生成成功';
     }
     if (result.success && result.warnings && result.warnings.length > 0) {
-      return t('testDataGenerator_partialSuccess');
+      return '部分成功';
     }
-    return t('testDataGenerator_failed');
+    return '生成失败';
   };
 
   return (
     <div className="space-y-3">
-      {/* 状态标题 */}
       <div className="flex items-center gap-2">
         {getStatusIcon()}
         <span className="text-sm font-medium text-foreground">{getStatusText()}</span>
       </div>
 
-      {/* 统计信息 */}
       {result.stats && (
         <div className="grid grid-cols-3 gap-3">
           <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -52,9 +47,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             <span className="text-lg font-semibold text-foreground">
               {result.stats.total.toLocaleString()}
             </span>
-            <span className="text-xs text-muted-foreground">
-              {t('testDataGenerator_totalCount')}
-            </span>
+            <span className="text-xs text-muted-foreground">总条数</span>
           </div>
 
           <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -62,9 +55,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             <span className="text-lg font-semibold text-green-500">
               {result.stats.success.toLocaleString()}
             </span>
-            <span className="text-xs text-muted-foreground">
-              {t('testDataGenerator_successCount')}
-            </span>
+            <span className="text-xs text-muted-foreground">成功</span>
           </div>
 
           <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -72,19 +63,16 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             <span className="text-lg font-semibold text-foreground">
               {(result.stats.duration / 1000).toFixed(2)}s
             </span>
-            <span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
+            <span className="text-xs text-muted-foreground">耗时</span>
           </div>
         </div>
       )}
 
-      {/* 警告信息 */}
       {result.warnings && result.warnings.length > 0 && (
         <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
           <div className="flex items-center gap-2 mb-2">
             <AlertTriangle className="h-4 w-4 text-yellow-500" />
-            <span className="text-sm font-medium text-yellow-500">
-              {t('testDataGenerator_warnings')}
-            </span>
+            <span className="text-sm font-medium text-yellow-500">警告</span>
           </div>
           <ul className="list-disc list-inside space-y-1">
             {result.warnings.slice(0, 5).map((warning, index) => (
@@ -94,14 +82,13 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             ))}
             {result.warnings.length > 5 && (
               <li className="text-xs text-yellow-500/80">
-                ... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
+                {`... 还有 ${result.warnings.length - 5} 条警告`}
               </li>
             )}
           </ul>
         </div>
       )}
 
-      {/* 错误信息 */}
       {result.error && (
         <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
           <div className="flex items-center gap-2">
diff --git a/src/pages/TestDataGenerator/components/RuleManager.tsx b/src/pages/TestDataGenerator/components/RuleManager.tsx
index 6bd1d3b..b65c89b 100644
--- a/src/pages/TestDataGenerator/components/RuleManager.tsx
+++ b/src/pages/TestDataGenerator/components/RuleManager.tsx
@@ -20,7 +20,6 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { useI18n } from '@/utils/chromeI18n';
 import * as ruleStorage from '@/utils/ruleStorage';
 import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
 
@@ -31,7 +30,6 @@ interface RuleManagerProps {
 }
 
 export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
-  const { t, i18n } = useI18n('testDataGenerator');
   const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
@@ -64,9 +62,9 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
       onLoad(rule.fields);
       ruleStorage.recordUse(rule.id);
       loadRules();
-      toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
+      toast.success(`已加载规则「${rule.name}」`);
     },
-    [onLoad, loadRules, t],
+    [onLoad, loadRules],
   );
 
   const handleDelete = useCallback(() => {
@@ -74,20 +72,20 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
     ruleStorage.deleteRule(ruleToDelete.id);
     loadRules();
     setRuleToDelete(null);
-    toast.success(t('testDataGenerator_ruleDeleted'));
+    toast.success('规则已删除');
     onRulesChanged?.();
-  }, [ruleToDelete, loadRules, t, onRulesChanged]);
+  }, [ruleToDelete, loadRules, onRulesChanged]);
 
   const handleDuplicate = useCallback(
     (id: string) => {
-      const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
+      const result = ruleStorage.duplicate(id, '（副本）');
       if (result) {
         loadRules();
-        toast.success(t('testDataGenerator_ruleDuplicated'));
+        toast.success('规则已复制');
         onRulesChanged?.();
       }
     },
-    [loadRules, t, onRulesChanged],
+    [loadRules, onRulesChanged],
   );
 
   const handleEdit = useCallback(
@@ -113,14 +111,14 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
       } finally {
         URL.revokeObjectURL(url);
       }
-      toast.success(t('testDataGenerator_exportSuccess'));
+      toast.success('规则已导出');
     } catch (error) {
       console.error('[RuleManager] 导出失败:', error);
-      toast.error(t('testDataGenerator_exportFailed'));
+      toast.error('导出失败');
     } finally {
       setIsExporting(false);
     }
-  }, [t]);
+  }, []);
 
   const handleImport = useCallback(() => {
     const input = document.createElement('input');
@@ -136,11 +134,11 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
         const result = ruleStorage.importRules(text);
 
         if (result.success > 0) {
-          toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
+          toast.success(`成功导入 ${result.success} 条规则`);
         }
 
         if (result.failed > 0) {
-          toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
+          toast.error(`${result.failed} 条规则导入失败`);
           console.warn('[RuleManager] 导入警告:', result.errors);
         }
 
@@ -148,29 +146,25 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
         onRulesChanged?.();
       } catch (error) {
         console.error('[RuleManager] 导入失败:', error);
-        toast.error(t('testDataGenerator_importFailed'));
+        toast.error('规则导入失败');
       } finally {
         setIsImporting(false);
       }
     };
     input.click();
-  }, [loadRules, t, onRulesChanged]);
+  }, [loadRules, onRulesChanged]);
 
-  const formatDate = useCallback(
-    (timestamp: number) => {
-      return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    },
-    [i18n.language],
-  );
+  const formatDate = useCallback((timestamp: number) => {
+    return new Date(timestamp).toLocaleDateString('zh-CN', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }, []);
 
   return (
     <div className="space-y-4">
-      {/* 删除确认对话框 */}
       <Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
         <DialogContent
           showCloseButton={false}
@@ -178,21 +172,20 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
         >
           <div className="flex-1 overflow-y-auto px-6 pb-4">
             <p className="text-sm text-muted-foreground">
-              {t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
+              {ruleToDelete && `确定要删除规则「${ruleToDelete.name}」吗？此操作不可撤销。`}
             </p>
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
-              {t('testDataGenerator_cancel')}
+              取消
             </Button>
             <Button variant="destructive" size="sm" onClick={handleDelete}>
-              {t('testDataGenerator_confirm')}
+              确认
             </Button>
           </div>
         </DialogContent>
       </Dialog>
 
-      {/* 工具栏 */}
       <div className="flex items-center gap-2 flex-wrap">
         <Button
           variant="outline"
@@ -206,7 +199,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
           ) : (
             <Upload className="h-4 w-4" />
           )}
-          {t('testDataGenerator_import')}
+          导入
         </Button>
         <Button
           variant="outline"
@@ -220,34 +213,30 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
           ) : (
             <Download className="h-4 w-4" />
           )}
-          {t('testDataGenerator_export')}
+          导出数据
         </Button>
       </div>
 
-      {/* 搜索框 */}
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
-          placeholder={t('testDataGenerator_searchRules')}
+          placeholder="搜索规则..."
           className="pl-9 pr-24 h-9"
           maxLength={20}
         />
-        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
-          {t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
+        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
+          {`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
         </span>
       </div>
 
-      {/* 规则列表 */}
       <div className="space-y-2 max-h-64 overflow-y-auto">
         {filteredRules.length === 0 ? (
           <div className="text-center py-6">
             <Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
             <p className="text-sm text-muted-foreground">
-              {debouncedSearchQuery
-                ? t('testDataGenerator_noSearchResults')
-                : t('testDataGenerator_noRules')}
+              {debouncedSearchQuery ? '未找到匹配的规则' : '暂无保存的规则'}
             </p>
           </div>
         ) : (
@@ -259,9 +248,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   <span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {rule.fields.length} {t('testDataGenerator_fields')}
-                  </span>
+                  <span className="text-xs text-muted-foreground">{rule.fields.length} 字段</span>
                 </div>
                 {rule.description && (
                   <p className="text-xs text-muted-foreground truncate mt-0.5">
@@ -273,7 +260,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                     <Clock className="h-3 w-3" />
                     {formatDate(rule.updatedAt)}
                   </span>
-                  <span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
+                  <span>{`使用 ${rule.useCount} 次`}</span>
                 </div>
               </div>
 
@@ -283,7 +270,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => handleLoad(rule)}
-                  title={t('testDataGenerator_load')}
+                  title="加载"
                 >
                   <FolderOpen className="h-3.5 w-3.5" />
                 </Button>
@@ -292,7 +279,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => handleEdit(rule)}
-                  title={t('testDataGenerator_edit')}
+                  title="编辑"
                 >
                   <Edit className="h-3.5 w-3.5" />
                 </Button>
@@ -301,7 +288,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => handleDuplicate(rule.id)}
-                  title={t('testDataGenerator_duplicate')}
+                  title="复制"
                 >
                   <Copy className="h-3.5 w-3.5" />
                 </Button>
@@ -310,7 +297,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7 text-destructive hover:text-destructive"
                   onClick={() => setRuleToDelete(rule)}
-                  title={t('testDataGenerator_delete')}
+                  title="删除"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </Button>
diff --git a/src/pages/TestDataGenerator/components/__tests__/ResultPanel.test.tsx b/src/pages/TestDataGenerator/components/__tests__/ResultPanel.test.tsx
new file mode 100644
index 0000000..0e6e124
--- /dev/null
+++ b/src/pages/TestDataGenerator/components/__tests__/ResultPanel.test.tsx
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ResultPanel from '../ResultPanel';
+import type { GenerateResult } from '@/types/testDataGenerator';
+
+function createResult(overrides: Partial<GenerateResult> = {}): GenerateResult {
+  return {
+    success: true,
+    warnings: [],
+    stats: {
+      total: 100,
+      success: 100,
+      failed: 0,
+      duration: 1200,
+    },
+    ...overrides,
+  };
+}
+
+describe('ResultPanel', () => {
+  it('警告超过 5 条时应显示剩余警告数量', () => {
+    const warnings = Array.from({ length: 8 }, (_, index) => `警告 ${index + 1}`);
+
+    render(<ResultPanel result={createResult({ warnings })} />);
+
+    expect(screen.getByText('警告 1')).toBeInTheDocument();
+    expect(screen.getByText('警告 5')).toBeInTheDocument();
+    expect(screen.queryByText('警告 6')).not.toBeInTheDocument();
+    expect(screen.getByText('... 还有 3 条警告')).toBeInTheDocument();
+    expect(screen.queryByText(/\{\{count\}\}/)).not.toBeInTheDocument();
+  });
+
+  it('警告不超过 5 条时不应显示剩余提示', () => {
+    const warnings = ['警告 1', '警告 2', '警告 3'];
+
+    render(<ResultPanel result={createResult({ warnings })} />);
+
+    expect(screen.getByText('警告 1')).toBeInTheDocument();
+    expect(screen.getByText('警告 3')).toBeInTheDocument();
+    expect(screen.queryByText(/还有 \d+ 条警告/)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages/TestDataGenerator/components/__tests__/RuleManager.test.tsx b/src/pages/TestDataGenerator/components/__tests__/RuleManager.test.tsx
index 51e8cca..a3ec838 100644
--- a/src/pages/TestDataGenerator/components/__tests__/RuleManager.test.tsx
+++ b/src/pages/TestDataGenerator/components/__tests__/RuleManager.test.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 // Mock dependencies
 vi.mock('@/utils/ruleStorage', () => ({
+  MAX_RULES: 20,
   getAll: vi.fn(() => []),
   save: vi.fn(),
   deleteRule: vi.fn(),
@@ -87,8 +88,7 @@ describe('RuleManager', () => {
 
     expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
     expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
-    // Note: t() mock doesn't handle placeholders, so we just check it was called
-    expect(mockedToast.success).toHaveBeenCalled();
+    expect(mockedToast.success).toHaveBeenCalledWith('已加载规则「Test Rule」');
   });
 
   it('should show delete confirmation dialog', async () => {
@@ -100,7 +100,7 @@ describe('RuleManager', () => {
     const deleteButton = screen.getByTitle('删除');
     await user.click(deleteButton);
 
-    expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
+    expect(screen.getByText('确定要删除规则「Test Rule」吗？此操作不可撤销。')).toBeInTheDocument();
   });
 
   it('should delete rule after confirmation', async () => {
@@ -178,6 +178,26 @@ describe('RuleManager', () => {
     vi.restoreAllMocks();
   });
 
+  it('should call onEdit when edit button clicked', async () => {
+    const user = userEvent.setup();
+    const onEdit = vi.fn();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} onEdit={onEdit} />);
+
+    await user.click(screen.getByTitle('编辑'));
+
+    expect(onEdit).toHaveBeenCalledWith(mockRule);
+  });
+
+  it('should show saved rule count', () => {
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    expect(screen.getByText('已保存 1/20 条')).toBeInTheDocument();
+  });
+
   it('should show field count for each rule', () => {
     mockedRuleStorage.getAll.mockReturnValue([mockRule]);
 
diff --git a/src/pages/TestDataGenerator/index.tsx b/src/pages/TestDataGenerator/index.tsx
index d6a985f..079dbbd 100644
--- a/src/pages/TestDataGenerator/index.tsx
+++ b/src/pages/TestDataGenerator/index.tsx
@@ -1,22 +1,10 @@
-/**
- * 测试数据生成器主页面
- */
-
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { Settings, Database, Tag } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-import { useGenerator } from './hooks/useGenerator';
-import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
-
-// 生成唯一 ID 的辅助函数
-function generateId(): string {
-  return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-}
-
+import { useGenerator } from './hooks/useGenerator';
 import FieldList, { MAX_FIELDS } from './components/FieldList';
 import FieldEditor from './components/FieldEditor';
 import GenerateOptions from './components/GenerateOptions';
@@ -25,40 +13,38 @@ import DataPreview from './components/DataPreview';
 import ResultPanel from './components/ResultPanel';
 import ExportPanel from './components/ExportPanel';
 import RuleManager from './components/RuleManager';
+import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
+
+function generateId(): string {
+  return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
 
 type TabType = 'fields' | 'rules';
 
 export default function TestDataGeneratorPage() {
-  const { t } = useI18n('testDataGenerator');
   const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
 
-  // 字段配置
   const [fields, setFields] = useState<FieldConfig[]>([]);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
   const [editingRule, setEditingRule] = useState<DataRule | null>(null);
 
-  // 生成选项
   const [count, setCount] = useState(100);
   const [format, setFormat] = useState<'json' | 'csv'>('json');
 
-  // 当前标签页
   const [activeTab, setActiveTab] = useState<TabType>('fields');
 
-  // 生成完成时显示 toast 提示（避免重复触发）
   const lastToastResultRef = useRef<GenerateResult | null>(null);
 
-  // 生成完成时显示 toast 提示（避免重复触发）
   useEffect(() => {
     if (result?.success && result.stats && result !== lastToastResultRef.current) {
       lastToastResultRef.current = result;
-      toast.success(t('testDataGenerator_generateSuccess'), {
-        description: `${result.stats.total} ${t('testDataGenerator_records')}`,
+      toast.success('生成完成', {
+        description: `${result.stats.total} 条数据`,
       });
     }
-  }, [result, t]);
+  }, [result]);
 
-  // 添加新字段
   const handleAddField = useCallback(() => {
     setFields((prev) => {
       if (prev.length >= MAX_FIELDS) return prev;
@@ -76,7 +62,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 更新字段
   const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
     setFields((prev) => {
       const newFields = [...prev];
@@ -85,7 +70,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 删除字段
   const handleRemoveField = useCallback((index: number) => {
     setFields((prev) => prev.filter((_, i) => i !== index));
     setSelectedIndex((prev) => {
@@ -95,7 +79,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 拖拽排序
   const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
     setFields((prev) => {
       const newFields = [...prev];
@@ -113,7 +96,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 加载规则
   const handleLoadRule = useCallback(
     (loadedFields: FieldConfig[]) => {
       setFields(loadedFields);
@@ -124,7 +106,6 @@ export default function TestDataGeneratorPage() {
     [clearResult],
   );
 
-  // 编辑规则
   const handleEditRule = useCallback(
     (rule: DataRule) => {
       setFields(rule.fields);
@@ -132,9 +113,9 @@ export default function TestDataGeneratorPage() {
       setEditingRule(rule);
       setActiveTab('fields');
       clearResult();
-      toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
+      toast.success(`正在编辑规则「${rule.name}」`);
     },
-    [clearResult, t],
+    [clearResult],
   );
 
   // 保存规则成功后清除编辑状态
@@ -142,16 +123,12 @@ export default function TestDataGeneratorPage() {
     setEditingRule(null);
   }, []);
 
-  // 开始生成
   const handleGenerate = useCallback(() => {
     if (fields.length === 0) return;
     generate(fields, count, format === 'csv');
   }, [fields, count, format, generate]);
 
-  // 获取选中的字段（-1 或 null 表示未选中）
   const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
-
-  // 打开字段编辑器
   const handleOpenEditor = useCallback((index: number) => {
     setSelectedIndex(index);
     setIsEditorOpen(true);
@@ -176,7 +153,7 @@ export default function TestDataGeneratorPage() {
                 )}
               >
                 <Settings className="h-4 w-4" />
-                {t('testDataGenerator_fieldConfig')}
+                字段配置
               </button>
               <button
                 onClick={() => setActiveTab('rules')}
@@ -188,11 +165,10 @@ export default function TestDataGeneratorPage() {
                 )}
               >
                 <Tag className="h-4 w-4" />
-                {t('testDataGenerator_ruleManagement')}
+                规则管理
               </button>
             </div>
 
-            {/* 字段配置标签页 */}
             {activeTab === 'fields' && (
               <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
                 <FieldList
@@ -208,14 +184,12 @@ export default function TestDataGeneratorPage() {
               </div>
             )}
 
-            {/* 规则管理标签页 */}
             {activeTab === 'rules' && (
               <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
                 <RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
               </div>
             )}
 
-            {/* 生成选项 */}
             <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
               <GenerateOptions
                 count={count}
@@ -225,7 +199,6 @@ export default function TestDataGeneratorPage() {
               />
             </div>
 
-            {/* 生成按钮 */}
             <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
               <GenerateButton
                 onClick={handleGenerate}
@@ -255,18 +228,16 @@ export default function TestDataGeneratorPage() {
               </div>
             )}
 
-            {/* 数据预览 */}
             <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
               <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
                 <Database className="h-4 w-4" />
-                {t('testDataGenerator_dataPreview')}
+                数据预览
               </h3>
               <div className="h-[280px]">
                 <DataPreview fields={fields} />
               </div>
             </div>
 
-            {/* 导出面板 */}
             {result?.data && result.data.length > 0 && (
               <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
                 <ExportPanel result={result} />
@@ -276,7 +247,6 @@ export default function TestDataGeneratorPage() {
         </div>
       </div>
 
-      {/* 字段编辑弹窗 */}
       <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
         <DialogContent
           showCloseButton={false}
@@ -293,10 +263,10 @@ export default function TestDataGeneratorPage() {
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
-              {t('testDataGenerator_cancel')}
+              取消
             </Button>
             <Button size="sm" onClick={() => setIsEditorOpen(false)}>
-              {t('testDataGenerator_done')}
+              完成
             </Button>
           </div>
         </DialogContent>
diff --git a/src/pages/TextStatistics/index.tsx b/src/pages/TextStatistics/index.tsx
index 3661285..b1bd735 100644
--- a/src/pages/TextStatistics/index.tsx
+++ b/src/pages/TextStatistics/index.tsx
@@ -1,18 +1,16 @@
 import TextInputArea from '@/components/TextInputArea';
 import { formatBytes } from '@/utils/format';
-import { useI18n } from '@/utils/chromeI18n';
-import { useTextStatistics } from './useTextStatistics';
 import { cn } from '@/lib/utils';
+import { useTextStatistics } from './useTextStatistics';
 
 export default function Index() {
-  const { t } = useI18n('textStatistics');
   const { text, stats, setText } = useTextStatistics();
 
   const statItems = [
-    { label: t('textStatistics:characters'), value: stats.characters },
-    { label: t('textStatistics:words'), value: stats.words },
-    { label: t('textStatistics:lines'), value: stats.lines },
-    { label: t('textStatistics:bytes'), value: formatBytes(stats.bytes) },
+    { label: '字符数', value: stats.characters },
+    { label: '单词数', value: stats.words },
+    { label: '行数', value: stats.lines },
+    { label: '字节大小', value: formatBytes(stats.bytes) },
   ];
 
   return (
@@ -20,7 +18,7 @@ export default function Index() {
       <TextInputArea
         value={text}
         onChange={setText}
-        placeholder={t('textStatistics:placeholder')}
+        placeholder="在此输入或粘贴文本..."
         minRows={10}
         maxRows={18}
         showClear={true}
diff --git a/src/pages/Timestamp/__tests__/index.test.tsx b/src/pages/Timestamp/__tests__/index.test.tsx
new file mode 100644
index 0000000..7a35303
--- /dev/null
+++ b/src/pages/Timestamp/__tests__/index.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Index from '../index';
+
+describe('Timestamp 页面', () => {
+  it('应该渲染模式切换按钮', () => {
+    render(<Index />);
+    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/pages/Timestamp/components/ConverterForm.tsx b/src/pages/Timestamp/components/ConverterForm.tsx
new file mode 100644
index 0000000..715574a
--- /dev/null
+++ b/src/pages/Timestamp/components/ConverterForm.tsx
@@ -0,0 +1,81 @@
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import {
+  CARD_CLASS,
+  INPUT_PLACEHOLDERS,
+  MODE_OPTIONS,
+  UNIT_OPTIONS,
+  ZONES,
+  type ZoneType,
+} from '../constants';
+import type { UseTimestampConverterReturn } from '../useTimestampConverter';
+
+type ConverterFormProps = Omit<UseTimestampConverterReturn, 'result' | 'handleUseNow'>;
+
+export default function ConverterForm({
+  mode,
+  input,
+  unit,
+  zone,
+  error,
+  setMode,
+  setInput,
+  setUnit,
+  setZone,
+}: ConverterFormProps) {
+  return (
+    <div className={cn(CARD_CLASS, 'gap-4')}>
+      <SwitchButtonGroup value={mode} options={MODE_OPTIONS} onChange={setMode} size="small" />
+
+      <div className="flex flex-col gap-1.5">
+        <Input
+          type="text"
+          placeholder={INPUT_PLACEHOLDERS[mode]}
+          value={input}
+          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',
+          )}
+        />
+
+        {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={UNIT_OPTIONS}
+          onChange={setUnit}
+          size="small"
+          className="sm:w-auto shrink-0"
+        />
+
+        <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>
+          <SelectContent className="max-h-64 font-mono">
+            {ZONES.map((z) => (
+              <SelectItem
+                key={z}
+                value={z}
+                className="text-xs font-semibold focus:bg-accent cursor-pointer"
+              >
+                {z}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/components/LiveClock.tsx
similarity index 65%
rename from src/pages/Timestamp/LiveClock.tsx
rename to src/pages/Timestamp/components/LiveClock.tsx
index af10d18..40748b4 100644
--- a/src/pages/Timestamp/LiveClock.tsx
+++ b/src/pages/Timestamp/components/LiveClock.tsx
@@ -2,10 +2,10 @@ 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 type { UnitType } from '../constants';
+import { msToUnit } from '../constants';
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
   unit: UnitType;
@@ -13,8 +13,6 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export default function LiveClock({ unit, onUseNow, className, ...props }: LiveClockProps) {
-  const { t } = useI18n('timestamp');
-
   const [rawTime, setRawTime] = useState(() => Date.now());
 
   useEffect(() => {
@@ -36,30 +34,28 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
       {...props}
     >
       <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
-        {t('timestamp:currentTs')}
+        当前时间戳
       </span>
 
       <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
         {text}
       </span>
 
-      <button
+      <Button
         type="button"
         onClick={() => {
           onUseNow(rawTime);
-          toast.success(t('timestamp:usedSuccess'));
+          toast.success('已使用当前时间戳');
         }}
-        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"
+        title="填充到下方"
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 text-muted-foreground hover:text-foreground"
       >
         <Clock className="w-3.5 h-3.5" />
-      </button>
+      </Button>
 
-      <CopyButton
-        text={text}
-        tooltip={t('timestamp:copyTsTooltip')}
-        className="h-7 w-7 rounded-md border"
-      />
+      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7 rounded-md border" />
     </div>
   );
 }
diff --git a/src/pages/Timestamp/ResultView.tsx b/src/pages/Timestamp/components/ResultView.tsx
similarity index 65%
rename from src/pages/Timestamp/ResultView.tsx
rename to src/pages/Timestamp/components/ResultView.tsx
index b4a586c..464601a 100644
--- a/src/pages/Timestamp/ResultView.tsx
+++ b/src/pages/Timestamp/components/ResultView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CopyButton } from '@/components/CopyButton';
-import { useI18n } from '@/utils/chromeI18n';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { cn } from '@/lib/utils';
 
 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,27 +14,24 @@ export default function ResultView({
   className,
   ...props
 }: ResultViewProps) {
-  const { t } = useI18n('timestamp');
+  if (!result && !showEmptyPlaceholder) return null;
 
   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,
-        )}
+      <EmptyPlaceholder
+        className={cn('flex-1 min-h-[320px]', className)}
+        messageClassName="text-sm font-medium text-muted-foreground max-w-none"
         {...props}
       >
-        {t('timestamp:resultEmpty')}
-      </div>
+        请输入并点击转换
+      </EmptyPlaceholder>
     );
   }
 
   return (
     <div className={cn('flex flex-col w-full', className)} {...props}>
       <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
-        {t('timestamp:resultLabel')}
+        转换结果
       </span>
 
       <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
@@ -43,8 +40,10 @@ export default function ResultView({
         </span>
         <CopyButton
           text={result}
-          tooltip={t('timestamp:copyResultTooltip')}
-          className="h-8 w-8 rounded-md shrink-0 border"
+          tooltip="复制结果"
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 text-muted-foreground hover:text-foreground"
         />
       </div>
     </div>
diff --git a/src/pages/Timestamp/constants.ts b/src/pages/Timestamp/constants.ts
index 6a84613..199182b 100644
--- a/src/pages/Timestamp/constants.ts
+++ b/src/pages/Timestamp/constants.ts
@@ -9,14 +9,30 @@ export type ModeType = 'ts2dt' | 'dt2ts';
 export type UnitType = 'ms' | 's';
 export type ZoneType = (typeof ZONES)[number];
 
+export const MODE_OPTIONS: { value: ModeType; label: string }[] = [
+  { value: 'ts2dt', label: '时间戳转日期' },
+  { value: 'dt2ts', label: '日期转时间戳' },
+];
+
+export const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
+  { value: 'ms', label: '毫秒' },
+  { value: 's', label: '秒' },
+];
+
+export const INPUT_PLACEHOLDERS: Record<ModeType, string> = {
+  ts2dt: '输入时间戳...',
+  dt2ts: 'YYYY-MM-DD HH:mm:ss',
+};
+
+export const CARD_CLASS =
+  'p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col';
+
 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 2120708..4bf7d78 100644
--- a/src/pages/Timestamp/index.tsx
+++ b/src/pages/Timestamp/index.tsx
@@ -1,112 +1,22 @@
-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';
-import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
-
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  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' },
-];
+import LiveClock from './components/LiveClock';
+import ConverterForm from './components/ConverterForm';
+import ResultView from './components/ResultView';
+import { CARD_CLASS } from './constants';
+import { useTimestampConverter } from './useTimestampConverter';
 
 export default function Index() {
-  const { t } = useI18n('timestamp');
-
-  const {
-    mode,
-    input,
-    unit,
-    zone,
-    result,
-    error,
-    setMode,
-    setInput,
-    setUnit,
-    setZone,
-    handleUseNow,
-  } = useTimestampConverter();
+  const { result, handleUseNow, ...formProps } = useTimestampConverter();
 
   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} />
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      <LiveClock unit={formProps.unit} onUseNow={handleUseNow} />
 
-        <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={MODE_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
-                onChange={setMode}
-                size="small"
-              />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+        <ConverterForm {...formProps} />
 
-              <div className="flex flex-col gap-1.5">
-                <Input
-                  type="text"
-                  placeholder={
-                    mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
-                  }
-                  value={input}
-                  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',
-                  )}
-                />
-
-                {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={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 ZoneType)}>
-                  <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
-                    <SelectValue placeholder="选择时区" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-64 font-mono">
-                    {ZONES.map((z) => (
-                      <SelectItem
-                        key={z}
-                        value={z}
-                        className="text-xs font-semibold focus:bg-accent cursor-pointer"
-                      >
-                        {z}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </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} showEmptyPlaceholder />
-          </div>
+        <div className={cn(CARD_CLASS, 'h-full')}>
+          <ResultView result={result} showEmptyPlaceholder />
         </div>
       </div>
     </div>
diff --git a/src/pages/Timestamp/useTimestampConverter.ts b/src/pages/Timestamp/useTimestampConverter.ts
index 7562c85..400258d 100644
--- a/src/pages/Timestamp/useTimestampConverter.ts
+++ b/src/pages/Timestamp/useTimestampConverter.ts
@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType, ModeType } from './constants';
 import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
-import { useI18n } from '@/utils/chromeI18n';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -29,7 +28,6 @@ function isTimestampLike(input: string): boolean {
 }
 
 export function useTimestampConverter(): UseTimestampConverterReturn {
-  const { t } = useI18n('timestamp');
   const [mode, setMode] = useState<ModeType>('ts2dt');
   const [unit, setUnit] = useState<UnitType>('ms');
   const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
@@ -43,22 +41,22 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     if (mode === 'ts2dt') {
       const num = Number(rawInput);
       if (isNaN(num)) {
-        return { result: '', error: t('timestamp:errors.invalidNumber') };
+        return { result: '', error: '请输入有效数字' };
       }
       const d = dayjsFromTimestamp(num, unit);
       if (!d.isValid()) {
-        return { result: '', error: t('timestamp:errors.invalidTimestamp') };
+        return { result: '', error: '无效时间戳' };
       }
       return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
     } else {
       const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
       if (!d.isValid()) {
-        return { result: '', error: t('timestamp:errors.invalidFormat') };
+        return { result: '', error: '无效的日期格式' };
       }
       const ms = d.valueOf();
       return { result: String(msToUnit(ms, unit)), error: '' };
     }
-  }, [input, mode, unit, zone, t]);
+  }, [input, mode, unit, zone]);
 
   const handleContextMenuData = (payload: string) => {
     const trimmed = payload.trim();
diff --git a/src/providers/AppRoot.tsx b/src/providers/AppRoot.tsx
index d46fcaa..c939a2c 100644
--- a/src/providers/AppRoot.tsx
+++ b/src/providers/AppRoot.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { ThemeModeProvider } from './ThemeModeProvider';
-import { RouterProvider } from './RouterProvider';
 import { Toaster } from '@/components/ui/sonner';
 
 interface AppRootProps {
@@ -11,7 +10,7 @@ export default function AppRoot({ children }: AppRootProps) {
   return (
     <React.StrictMode>
       <ThemeModeProvider>
-        <RouterProvider>{children}</RouterProvider>
+        {children}
         <Toaster />
       </ThemeModeProvider>
     </React.StrictMode>
diff --git a/src/providers/README.md b/src/providers/README.md
index 22d2209..ce37705 100644
--- a/src/providers/README.md
+++ b/src/providers/README.md
@@ -28,36 +28,46 @@ React.StrictMode
 - **当前页面**：`currentPage`（`PageType`）
 - **可见页面列表**：`visiblePages`
 - **页面排序**：`pageOrder`
+- **最近使用工具**：`recentlyUsedTools`（最多 3 项，供 TopBar 搜索历史使用）
 - **加载状态**：`isLoaded`
 
 核心特性：
 
 - 通过 `chrome.storage` 持久化路由状态
-- 使用 `localStorage` 快照实现首屏 0 闪烁
+- 使用 `localStorage` 快照（`snapshot/{key}`）实现首屏 0 闪烁
 - 支持 popup/sidepanel/tab 三种入口的独立路由同步（通过 `syncKey`、`visiblePagesKey`、`pageOrderKey` 配置）
 - 处理右键菜单待处理数据的路由跳转
 - 监听 `chrome.storage.onChanged` 实现跨端同步
 
+### 初始化与防覆盖
+
+异步加载 storage 期间，快照值会作为首屏初始 state。加载完成后：
+
+1. **`canPersistRef`**：仅在 `loadInitialData` 成功后才设为 `true`，在此之前不会向 storage 写入，避免默认值覆盖已有路由
+2. **`hasUserNavigatedRef`**：用户调用 `navigateTo` / `goHome` 后设为 `true`，异步加载结果不会覆盖用户已选页面
+3. **`mergeWithDefaults`**：将已保存的页面列表与默认列表合并，新增功能会自动出现在列表末尾
+
 导出：
 
 - `RouterProvider` 组件
-- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goBack` 等
+- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`recentlyUsedTools`、`navigateTo`、`goHome` 等
 
 ## ThemeModeProvider.tsx
 
 主题模式 Provider，管理：
 
 - **主题模式**：`light` / `dark` / `system`
-- **解析后的主题**：`resolvedTheme`（`light` / `dark`）
+- **解析后的主题**：`resolvedMode`（`light` / `dark`）
 
 核心特性：
 
-- 使用 `localStorage` 快照实现首屏 0 闪烁
+- 使用 `themeSnapshot.ts` 读写 `localStorage` 快照，实现首屏 0 闪烁
 - 监听系统级暗色模式变化（`matchMedia`）
 - 通过 `chrome.storage` 跨端同步主题偏好
 - 自动在 `document.documentElement` 上切换 `dark` class
+- **`hasUserSetMode`**：用户主动切换主题后，异步 storage 加载不会覆盖用户选择
 
 导出：
 
 - `ThemeModeProvider` 组件
-- `useThemeMode()` Hook — 获取 `themeMode`、`resolvedTheme`、`setThemeMode`
+- `useThemeMode()` Hook — 获取 `mode`、`resolvedMode`、`setMode`
diff --git a/src/providers/RouterProvider.tsx b/src/providers/RouterProvider.tsx
index 6c90a41..8790f09 100644
--- a/src/providers/RouterProvider.tsx
+++ b/src/providers/RouterProvider.tsx
@@ -16,6 +16,7 @@ import {
   getDefaultVisibleFeatureKeys,
 } from '@/config/features';
 import { CONTEXT_MENU_DATA_EXPIRY_MS, saveContextMenuData } from '@/utils/useContextMenuData';
+import { getSyncSnapshot } from '@/utils/syncSnapshot';
 
 const MAX_RECENTLY_USED = 3;
 
@@ -53,7 +54,7 @@ interface RouterContextType {
   recentlyUsedTools: PageType[];
   isLoaded: boolean;
   navigateTo: (page: PageType) => void;
-  goBack: () => void;
+  goHome: () => void;
   setVisiblePages: (pages: PageType[]) => void;
   setPageOrder: (pages: PageType[]) => void;
 }
@@ -69,28 +70,6 @@ interface RouterProviderProps {
   pageOrderKey?: keyof StorageSchema;
 }
 
-/**
- * 同步从 localStorage 获取存储快照（首屏 0 闪烁核心防线）
- */
-const getSyncSnapshot = <T,>(
-  key: string,
-  defaultValue: T,
-  validator?: (val: unknown) => val is T,
-): T => {
-  try {
-    const val = localStorage.getItem(`snapshot/${key}`);
-    if (!val) return defaultValue;
-    const parsed = JSON.parse(val) as unknown;
-    if (validator) {
-      return validator(parsed) ? parsed : defaultValue;
-    }
-    return (parsed as T) ?? defaultValue;
-  } catch (error) {
-    console.error('[Router Snapshot Error] Failed to read sync cache:', error);
-    return defaultValue;
-  }
-};
-
 export function RouterProvider({
   children,
   defaultRoute = 'dashboard',
@@ -125,16 +104,10 @@ export function RouterProvider({
     getSyncSnapshot('app/recentlyUsedTools', [], isValidPageList),
   );
 
-  const [isLoaded, setIsLoaded] = useState(() => {
-    const snapshotKey = localStorage.getItem(`snapshot/${syncKey as string}`);
-    const snapshotVisible = localStorage.getItem(`snapshot/${visiblePagesKey as string}`);
-    const snapshotOrder = localStorage.getItem(`snapshot/${pageOrderKey as string}`);
-    return !!(snapshotKey && snapshotVisible && snapshotOrder);
-  });
+  const [isLoaded, setIsLoaded] = useState(false);
+  const hasUserNavigatedRef = useRef(false);
+  const canPersistRef = useRef(false);
 
-  /**
-   * 从异步存储中安全溯源初始数据
-   */
   const loadInitialData = useCallback(async () => {
     try {
       const savedRoute = await storageUtil.get(syncKey, defaultRoute);
@@ -145,7 +118,7 @@ export function RouterProvider({
       const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
       const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
 
-      if (isValidPage(savedRoute) && syncRoute) {
+      if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
         setCurrentPage(savedRoute);
       }
       if (isValidPageList(savedVisiblePages)) {
@@ -157,9 +130,11 @@ export function RouterProvider({
       if (isValidPageList(savedRecentTools)) {
         setRecentlyUsedTools(savedRecentTools);
       }
-      setIsLoaded(true);
+      canPersistRef.current = true;
     } catch (error) {
       console.error('[Router Init Error] Core data fetch failed:', error);
+    } finally {
+      setIsLoaded(true);
     }
   }, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
 
@@ -171,7 +146,6 @@ export function RouterProvider({
       .then(() => {
         if (cancelled) return;
 
-        // 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;
@@ -191,9 +165,8 @@ export function RouterProvider({
           }
         }
 
-        // Check storage for pending context menu data
         storageUtil
-          .get('contextMenu/pendingData', undefined)
+          .get('contextMenu/pendingData')
           .then((pendingData) => {
             if (
               pendingData &&
@@ -213,8 +186,8 @@ export function RouterProvider({
   }, [loadInitialData]);
 
   useEffect(() => {
-    if (isLoaded && syncRoute) {
-      void storageUtil.set(syncKey, currentPage as PageType).catch(console.error);
+    if (isLoaded && canPersistRef.current && syncRoute) {
+      void storageUtil.set(syncKey, currentPage).catch(console.error);
       try {
         localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage));
       } catch (err) {
@@ -224,7 +197,7 @@ export function RouterProvider({
   }, [currentPage, isLoaded, syncRoute, syncKey]);
 
   useEffect(() => {
-    if (isLoaded) {
+    if (isLoaded && canPersistRef.current) {
       void storageUtil.set(visiblePagesKey, visiblePages).catch(console.error);
       try {
         localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages));
@@ -235,7 +208,7 @@ export function RouterProvider({
   }, [visiblePages, isLoaded, visiblePagesKey]);
 
   useEffect(() => {
-    if (isLoaded) {
+    if (isLoaded && canPersistRef.current) {
       void storageUtil.set(pageOrderKey, pageOrder).catch(console.error);
       try {
         localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder));
@@ -246,7 +219,7 @@ export function RouterProvider({
   }, [pageOrder, isLoaded, pageOrderKey]);
 
   useEffect(() => {
-    if (isLoaded) {
+    if (isLoaded && canPersistRef.current) {
       void storageUtil.set('app/recentlyUsedTools', recentlyUsedTools).catch(console.error);
       try {
         localStorage.setItem('snapshot/app/recentlyUsedTools', JSON.stringify(recentlyUsedTools));
@@ -274,13 +247,13 @@ export function RouterProvider({
       if (changes[visiblePagesKey as string]) {
         const newPages = changes[visiblePagesKey as string].newValue;
         if (isValidPageList(newPages)) {
-          setVisiblePages(newPages);
+          setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
         }
       }
       if (changes[pageOrderKey as string]) {
         const newOrder = changes[pageOrderKey as string].newValue;
         if (isValidPageList(newOrder)) {
-          setPageOrder(newOrder);
+          setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
         }
       }
       if (changes['app/recentlyUsedTools']) {
@@ -309,6 +282,8 @@ export function RouterProvider({
   }, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]);
 
   const navigateTo = (page: PageType) => {
+    hasUserNavigatedRef.current = true;
+    canPersistRef.current = true;
     setCurrentPage(page);
     setRecentlyUsedTools((prev) => {
       const filtered = prev.filter((p) => p !== page);
@@ -316,7 +291,9 @@ export function RouterProvider({
     });
   };
 
-  const goBack = () => {
+  const goHome = () => {
+    hasUserNavigatedRef.current = true;
+    canPersistRef.current = true;
     setCurrentPage('dashboard');
   };
 
@@ -329,7 +306,7 @@ export function RouterProvider({
         recentlyUsedTools,
         isLoaded,
         navigateTo,
-        goBack,
+        goHome,
         setVisiblePages,
         setPageOrder,
       }}
@@ -342,7 +319,7 @@ export function RouterProvider({
 export function useRouter() {
   const context = useContext(RouterContext);
   if (!context) {
-    throw new Error('useRouter must be used within a valid RouterProvider context wrapper');
+    throw new Error('useRouter must be used within RouterProvider');
   }
   return context;
 }
diff --git a/src/providers/ThemeModeProvider.tsx b/src/providers/ThemeModeProvider.tsx
index 02b7997..4ee6d32 100644
--- a/src/providers/ThemeModeProvider.tsx
+++ b/src/providers/ThemeModeProvider.tsx
@@ -1,9 +1,27 @@
-import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { browser } from 'wxt/browser';
 import { storageUtil } from '@/utils/chromeStorage';
+import {
+  applyResolvedThemeClass,
+  getThemeSyncSnapshot,
+  isValidThemeMode,
+  persistThemeModeSnapshot,
+  resolveThemeMode,
+  THEME_MODE_STORAGE_KEY,
+  type ResolvedThemeMode,
+  type ThemeMode,
+} from '@/utils/themeSnapshot';
 
-export type ThemeMode = 'light' | 'dark' | 'system';
-export type ResolvedThemeMode = 'light' | 'dark';
+export type { ResolvedThemeMode, ThemeMode };
 
 interface ThemeModeContextType {
   mode: ThemeMode;
@@ -13,112 +31,88 @@ interface ThemeModeContextType {
 
 const ThemeModeContext = createContext<ThemeModeContextType | null>(null);
 
-const THEME_MODE_KEY = 'app/themeMode' as const;
-const SNAPSHOT_KEY = 'snapshot/app/themeMode';
-
-const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
-const isValidMode = (v: unknown): v is ThemeMode => VALID_MODES.includes(v as ThemeMode);
-
-/**
- * 同步追溯 localStorage 级快照（首屏 0 闪烁核心防线）
- */
-const getSyncSnapshot = (): ThemeMode => {
-  try {
-    const raw = localStorage.getItem(SNAPSHOT_KEY);
-    if (!raw) return 'system';
-    const parsed = JSON.parse(raw) as unknown;
-    return isValidMode(parsed) ? parsed : 'system';
-  } catch {
-    return 'system';
-  }
-};
-
-/**
- * 实时嗅探系统底层操作系统的明暗色轴
- */
-const getSystemMode = (): ResolvedThemeMode => {
-  if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-};
-
 interface ThemeModeProviderProps {
   children: ReactNode;
 }
 
 export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
-  const [mode, setModeState] = useState<ThemeMode>(getSyncSnapshot);
-  const [resolvedMode, setResolvedMode] = useState<ResolvedThemeMode>(
-    mode === 'system' ? getSystemMode() : mode,
+  const [mode, setModeState] = useState<ThemeMode>(getThemeSyncSnapshot);
+  const [resolvedMode, setResolvedMode] = useState<ResolvedThemeMode>(() =>
+    resolveThemeMode(getThemeSyncSnapshot()),
   );
+  const modeRef = useRef(mode);
+  const hasUserSetMode = useRef(false);
+
+  useEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
 
   const updateResolved = useCallback((nextMode: ThemeMode) => {
-    setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode);
+    setResolvedMode(resolveThemeMode(nextMode));
   }, []);
 
   const setMode = useCallback(
     (next: ThemeMode) => {
+      hasUserSetMode.current = true;
       setModeState(next);
       updateResolved(next);
+      applyResolvedThemeClass(resolveThemeMode(next));
 
-      void storageUtil.set(THEME_MODE_KEY, next).catch((err) => {
-        console.error('[Theme Storage Error] Failed to persistent theme state:', err);
+      void storageUtil.set(THEME_MODE_STORAGE_KEY, next).catch((err) => {
+        console.error('[Theme Storage Error] Failed to persist theme mode:', err);
       });
 
-      try {
-        localStorage.setItem(SNAPSHOT_KEY, JSON.stringify(next));
-      } catch (err) {
-        console.error('[Theme Snapshot Error] LocalStorage quota exceeded:', err);
-      }
+      persistThemeModeSnapshot(next);
     },
     [updateResolved],
   );
 
-  // Sync theme from storage on mount
   useEffect(() => {
     let cancelled = false;
+
     storageUtil
-      .get(THEME_MODE_KEY, 'system')
+      .get(THEME_MODE_STORAGE_KEY, 'system')
       .then((saved) => {
-        if (cancelled) return;
-        if (isValidMode(saved)) {
-          setModeState(saved);
-          updateResolved(saved);
-        }
+        if (cancelled || hasUserSetMode.current) return;
+        if (!isValidThemeMode(saved)) return;
+
+        setModeState(saved);
+        updateResolved(saved);
+        persistThemeModeSnapshot(saved);
+        applyResolvedThemeClass(resolveThemeMode(saved));
       })
       .catch((err) => {
-        console.error('[Theme Restore Thread Failed]', err);
+        console.error('[Theme Restore Error]', err);
       });
+
     return () => {
       cancelled = true;
     };
   }, [updateResolved]);
 
-  // Listen for system theme changes when in system mode
   useEffect(() => {
     if (mode !== 'system') return;
+
     const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => {
-      setResolvedMode(e.matches ? 'dark' : 'light');
+    const handler = (event: MediaQueryListEvent) => {
+      setResolvedMode(event.matches ? 'dark' : 'light');
     };
+
     mq.addEventListener('change', handler);
     return () => mq.removeEventListener('change', handler);
   }, [mode]);
 
-  // Sync theme across extension contexts (popup <-> sidepanel)
   useEffect(() => {
     const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
-      if (changes[THEME_MODE_KEY]) {
-        const next = changes[THEME_MODE_KEY].newValue;
-        if (isValidMode(next)) {
-          setModeState((currentMode) => {
-            if (next !== currentMode) {
-              updateResolved(next);
-              return next;
-            }
-            return currentMode;
-          });
-        }
-      }
+      if (!changes[THEME_MODE_STORAGE_KEY]) return;
+
+      const next = changes[THEME_MODE_STORAGE_KEY].newValue;
+      if (!isValidThemeMode(next) || next === modeRef.current) return;
+
+      setModeState(next);
+      updateResolved(next);
+      persistThemeModeSnapshot(next);
+      applyResolvedThemeClass(resolveThemeMode(next));
     };
 
     browser.storage.onChanged.addListener(handleStorageChange);
@@ -127,10 +121,8 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
     };
   }, [updateResolved]);
 
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
-    }
+  useLayoutEffect(() => {
+    applyResolvedThemeClass(resolvedMode);
   }, [resolvedMode]);
 
   return (
@@ -143,9 +135,7 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
 export function useThemeMode(): ThemeModeContextType {
   const ctx = useContext(ThemeModeContext);
   if (!ctx) {
-    throw new Error(
-      'useThemeMode must be used within a valid ThemeModeProvider sandboxed container',
-    );
+    throw new Error('useThemeMode must be used within ThemeModeProvider');
   }
   return ctx;
 }
diff --git a/src/providers/__tests__/RouterProvider.test.tsx b/src/providers/__tests__/RouterProvider.test.tsx
index 9f55b9d..f9830bb 100644
--- a/src/providers/__tests__/RouterProvider.test.tsx
+++ b/src/providers/__tests__/RouterProvider.test.tsx
@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { browser } from 'wxt/browser';
 import { RouterProvider, useRouter } from '@/providers/RouterProvider';
 import { storageUtil } from '@/utils/chromeStorage';
 
@@ -155,7 +156,7 @@ describe('RouterProvider', () => {
       'qrCode',
       'textStatistics',
       'jwt',
-      'jsonDiff',
+      'jsonTools',
     ];
     const oldPageOrder = [
       'timestamp',
@@ -163,7 +164,7 @@ describe('RouterProvider', () => {
       'qrCode',
       'textStatistics',
       'jwt',
-      'jsonDiff',
+      'jsonTools',
     ];
 
     (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
@@ -195,7 +196,7 @@ describe('RouterProvider', () => {
       'qrCode',
       'textStatistics',
       'jwt',
-      'jsonDiff',
+      'jsonTools',
     ];
     const oldPageOrder = [
       'timestamp',
@@ -203,7 +204,7 @@ describe('RouterProvider', () => {
       'qrCode',
       'textStatistics',
       'jwt',
-      'jsonDiff',
+      'jsonTools',
     ];
     localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(oldVisiblePages));
     localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(oldPageOrder));
@@ -224,6 +225,149 @@ describe('RouterProvider', () => {
     expect(pageOrder).toBeDefined();
   });
 
+  it('storage.onChanged 同步 visiblePages 时应合并缺失的新功能', async () => {
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: unknown) =>
+      Promise.resolve(defaultValue),
+    );
+
+    render(
+      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      expect(browser.storage.onChanged.addListener).toHaveBeenCalled();
+    });
+
+    const storageChangeHandler = vi.mocked(browser.storage.onChanged.addListener).mock
+      .calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
+
+    const oldVisiblePages = [
+      'dashboard',
+      'timestamp',
+      'storageCleaner',
+      'qrCode',
+      'textStatistics',
+      'jwt',
+      'jsonTools',
+    ];
+    const oldPageOrder = [
+      'timestamp',
+      'storageCleaner',
+      'qrCode',
+      'textStatistics',
+      'jwt',
+      'jsonTools',
+    ];
+
+    await act(async () => {
+      storageChangeHandler({
+        'app/popupVisiblePages': { newValue: oldVisiblePages },
+        'app/popupPageOrder': { newValue: oldPageOrder },
+      });
+    });
+
+    await waitFor(() => {
+      const visiblePages = screen.getByTestId('visible-pages').textContent!;
+      const pageOrder = screen.getByTestId('page-order').textContent!;
+
+      expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
+      expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
+    });
+  });
+
+  it('localStorage 快照过期时，loadInitialData 完成前不应覆盖 chrome.storage', async () => {
+    const staleRoute = 'timestamp';
+    const correctRoute = 'jsonTools';
+    const defaultVisible = ['dashboard', 'timestamp', 'storageCleaner'];
+    const defaultOrder = ['timestamp', 'storageCleaner'];
+
+    localStorage.setItem('snapshot/app/currentRoute', JSON.stringify(staleRoute));
+    localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(defaultVisible));
+    localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(defaultOrder));
+
+    const storage = new Map<string, unknown>([
+      ['app/currentRoute', correctRoute],
+      ['app/visiblePages', defaultVisible],
+      ['app/pageOrder', defaultOrder],
+      ['app/recentlyUsedTools', []],
+    ]);
+
+    let resolveGet: () => void;
+    const getBlocked = new Promise<void>((resolve) => {
+      resolveGet = resolve;
+    });
+
+    (storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
+      await getBlocked;
+      return storage.get(key) ?? defaultValue;
+    });
+    (storageUtil.set as any).mockImplementation(async (key: string, value: unknown) => {
+      storage.set(key, value);
+    });
+
+    render(
+      <RouterProvider>
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    expect(screen.getByTestId('current-page')).toHaveTextContent(staleRoute);
+    expect(storageUtil.set).not.toHaveBeenCalledWith('app/currentRoute', staleRoute);
+
+    resolveGet!();
+    await waitFor(() => {
+      expect(screen.getByTestId('current-page')).toHaveTextContent(correctRoute);
+      expect(storage.get('app/currentRoute')).toBe(correctRoute);
+    });
+  });
+
+  it('初始化失败时仍应解除加载状态以便渲染页面', async () => {
+    (storageUtil.get as any).mockRejectedValue(new Error('Storage unavailable'));
+
+    render(
+      <RouterProvider>
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+    });
+    expect(storageUtil.set).not.toHaveBeenCalled();
+  });
+
+  it('用户在 loadInitialData 完成前导航时不应被存储路由覆盖', async () => {
+    let resolveGet: () => void;
+    const getBlocked = new Promise<void>((resolve) => {
+      resolveGet = resolve;
+    });
+
+    (storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
+      await getBlocked;
+      if (key === 'app/currentRoute') return 'dashboard';
+      return defaultValue;
+    });
+
+    render(
+      <RouterProvider>
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('navigate-btn'));
+    });
+    expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
+
+    resolveGet!();
+    await waitFor(() => {
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
+      expect(storageUtil.set).toHaveBeenCalledWith('app/currentRoute', 'timestamp');
+    });
+  });
+
   it('组件卸载时不应设置 isLoaded 状态（竞态条件防护）', async () => {
     let resolveStorage: (value: unknown) => void;
     const storagePromise = new Promise((resolve) => {
diff --git a/src/providers/__tests__/ThemeModeProvider.test.tsx b/src/providers/__tests__/ThemeModeProvider.test.tsx
new file mode 100644
index 0000000..9793655
--- /dev/null
+++ b/src/providers/__tests__/ThemeModeProvider.test.tsx
@@ -0,0 +1,119 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { browser } from 'wxt/browser';
+import { ThemeModeProvider, useThemeMode } from '@/providers/ThemeModeProvider';
+import { storageUtil } from '@/utils/chromeStorage';
+import { THEME_MODE_SNAPSHOT_KEY, THEME_MODE_STORAGE_KEY } from '@/utils/themeSnapshot';
+
+vi.mock('@/utils/chromeStorage', () => ({
+  storageUtil: {
+    get: vi.fn(),
+    set: vi.fn(() => Promise.resolve()),
+  },
+}));
+
+const TestComponent = () => {
+  const { mode, resolvedMode, setMode } = useThemeMode();
+  return (
+    <div>
+      <div data-testid="mode">{mode}</div>
+      <div data-testid="resolved-mode">{resolvedMode}</div>
+      <button type="button" data-testid="set-dark" onClick={() => setMode('dark')}>
+        Set Dark
+      </button>
+    </div>
+  );
+};
+
+describe('ThemeModeProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    document.documentElement.classList.remove('dark');
+    (storageUtil.get as ReturnType<typeof vi.fn>).mockImplementation(
+      (_key: string, defaultValue: unknown) => Promise.resolve(defaultValue),
+    );
+  });
+
+  it('应从 localStorage 快照初始化主题', () => {
+    localStorage.setItem(THEME_MODE_SNAPSHOT_KEY, JSON.stringify('dark'));
+
+    render(
+      <ThemeModeProvider>
+        <TestComponent />
+      </ThemeModeProvider>,
+    );
+
+    expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+    expect(screen.getByTestId('resolved-mode')).toHaveTextContent('dark');
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+
+  it('异步恢复 storage 后应写回 snapshot', async () => {
+    (storageUtil.get as ReturnType<typeof vi.fn>).mockResolvedValue('dark');
+
+    render(
+      <ThemeModeProvider>
+        <TestComponent />
+      </ThemeModeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(localStorage.getItem(THEME_MODE_SNAPSHOT_KEY)).toBe(JSON.stringify('dark'));
+    });
+  });
+
+  it('用户已切换主题时不应被较慢的 storage 恢复覆盖', async () => {
+    let resolveStorage: (value: 'light' | 'dark' | 'system') => void;
+    const storagePromise = new Promise<'light' | 'dark' | 'system'>((resolve) => {
+      resolveStorage = resolve;
+    });
+
+    (storageUtil.get as ReturnType<typeof vi.fn>).mockImplementation(() => storagePromise);
+
+    render(
+      <ThemeModeProvider>
+        <TestComponent />
+      </ThemeModeProvider>,
+    );
+
+    await act(async () => {
+      screen.getByTestId('set-dark').click();
+    });
+
+    expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+
+    await act(async () => {
+      resolveStorage!('light');
+      await storagePromise;
+    });
+
+    expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+  });
+
+  it('storage.onChanged 同步时应更新 mode 与 snapshot', async () => {
+    (storageUtil.get as ReturnType<typeof vi.fn>).mockResolvedValue('system');
+
+    render(
+      <ThemeModeProvider>
+        <TestComponent />
+      </ThemeModeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(browser.storage.onChanged.addListener).toHaveBeenCalled();
+    });
+
+    const storageChangeHandler = vi.mocked(browser.storage.onChanged.addListener).mock
+      .calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
+
+    await act(async () => {
+      storageChangeHandler({
+        [THEME_MODE_STORAGE_KEY]: { newValue: 'dark' },
+      });
+    });
+
+    expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+    expect(localStorage.getItem(THEME_MODE_SNAPSHOT_KEY)).toBe(JSON.stringify('dark'));
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+});
diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
index 88b7bbd..bd1e2c3 100644
--- a/src/types/storage.d.ts
+++ b/src/types/storage.d.ts
@@ -8,7 +8,7 @@ export type PageType =
   | 'qrCode' // 二维码工具
   | 'textStatistics' // 文本统计工具
   | 'jwt' // JWT 解析工具
-  | 'jsonDiff' // JSON 差异比较工具
+  | 'jsonTools' // JSON 工具
   | 'base64Converter' // Base64 转换器工具
   | 'rightClickRestorer' // 右键菜单恢复工具
   | 'testDataGenerator'; // 测试数据生成器工具
@@ -183,6 +183,8 @@ export type StorageCleanResult =
       success: false;
       /** 错误信息 */
       error: string;
+      /** 部分成功时的已清理数量（如 IndexedDB 多库场景） */
+      count?: number;
     };
 
 /**
diff --git a/src/utils/README.md b/src/utils/README.md
index 62a13a4..0cbdcd7 100644
--- a/src/utils/README.md
+++ b/src/utils/README.md
@@ -7,6 +7,9 @@
 | 文件                     | 用途                                                                                                |
 | ------------------------ | --------------------------------------------------------------------------------------------------- |
 | `chromeStorage.ts`       | Chrome Storage API 封装：类型安全的 `StorageUtils` 类，提供 `get/set/remove` 方法                   |
+| `syncSnapshot.ts`        | 通用 `localStorage` 快照读取（`snapshot/{key}`），用于 Router 与 `useStorageState` 首屏防闪烁     |
+| `themeSnapshot.ts`       | 主题专用快照读写与 `document.documentElement` class 切换                                              |
+| `restrictedUrls.ts`      | 受限 URL 检测（`chrome://`、`about:` 等），供 Storage Cleaner 等模块复用                            |
 | `chromeTabs.ts`          | Chrome Tabs API 封装：获取活动标签页、获取域名、在新标签页打开扩展页面                              |
 | `clipboard.ts`           | 剪贴板操作：`copyTextToClipboard`（文本）、`copyImageToClipboard`（图片）                           |
 | `messages.ts`            | 扩展消息通信：基于 `@webext-core/messaging`，定义 `MessageAction` 枚举和 `ProtocolMap` 类型安全映射 |
@@ -17,11 +20,10 @@
 | `jsonToYaml.ts`          | JSON→YAML 转换                                                                                      |
 | `jsonToToml.ts`          | JSON→TOML 转换                                                                                      |
 | `qrCodeParser.ts`        | 二维码解析：基于 `qr-scanner` 库从文件中解析二维码                                                  |
-| `storageCleaner.ts`      | 存储清理：获取当前标签页、检测受限 URL、计算 Cookie/Storage 大小、清理操作                          |
+| `storageCleaner.ts`      | 存储清理：获取当前标签页、计算 Cookie/Storage 大小、清理操作                                        |
 | `textStatistics.ts`      | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
 | `format.ts`              | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
 | `dayjs.ts`               | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
-| `chromeI18n.ts`          | Chrome `chrome.i18n` 包装：提供 `getMessage` 和兼容 React 使用的 `useI18n` Hook                     |
 | `ruleStorage.ts`         | 测试数据生成器规则存储：基于 `localStorage` 的 CRUD、搜索、导入/导出和数量限制                      |
 | `dataExporter.ts`        | 测试数据导出：JSON/CSV 转换、文件下载和复制到剪贴板                                                 |
 | `rightClickInjection.ts` | 右键恢复注入脚本：在页面上下文恢复 contextmenu/copy/paste 等事件默认行为                            |
@@ -34,6 +36,15 @@
 | `useContextMenuData.ts` | 右键菜单数据 Hook：从 storage 读取待处理数据，匹配 featureKey 后消费并触发回调                                 |
 | `useDebounce.ts`        | 防抖 Hook：对值进行延迟更新，避免频繁触发                                                                      |
 
+### useStorageState 初始化防覆盖
+
+`useStorageState` 在挂载时从 storage 异步加载。写入 storage 需满足以下任一条件：
+
+- **`loadSucceededRef`**：storage 读取成功
+- **`userModifiedRef`**：用户通过 setter 主动修改过值
+
+若 storage 读取失败且用户未修改，不会将默认值写回 storage，避免静默覆盖已有数据。
+
 ## 使用约定
 
 - 工具函数使用**命名导出**（`export function xxx()`）
@@ -41,3 +52,4 @@
 - Hook 使用 `use` 前缀命名，定义返回值接口类型
 - 存储操作使用 `chromeStorage.ts` 的 `storageUtil` 封装，不要直接调用 `chrome.storage`
 - 消息通信使用 `messages.ts` 的 `sendMessage`/`onMessage`，不要使用原生 `chrome.runtime.sendMessage`
+- 需要首屏快照的新持久化状态，优先复用 `syncSnapshot.ts` 或参考 `themeSnapshot.ts` 模式
diff --git a/src/utils/__tests__/base64Converter.test.ts b/src/utils/__tests__/base64Converter.test.ts
index b252238..2d8c8a4 100644
--- a/src/utils/__tests__/base64Converter.test.ts
+++ b/src/utils/__tests__/base64Converter.test.ts
@@ -7,7 +7,6 @@ import {
   isSupportedImageType,
   isSupportedImageExtension,
   extractMimeTypeFromDataUri,
-  formatFileSize,
   base64ToBytes,
   sniffMimeFromBytes,
   base64ToBlob,
@@ -185,26 +184,6 @@ describe('extractMimeTypeFromDataUri', () => {
   });
 });
 
-describe('formatFileSize', () => {
-  it('应该格式化字节', () => {
-    expect(formatFileSize(0)).toBe('0 B');
-    expect(formatFileSize(512)).toBe('512 B');
-  });
-
-  it('应该格式化 KB', () => {
-    expect(formatFileSize(1024)).toBe('1.0 KB');
-    expect(formatFileSize(1536)).toBe('1.5 KB');
-  });
-
-  it('应该格式化 MB', () => {
-    expect(formatFileSize(1048576)).toBe('1.00 MB');
-  });
-
-  it('应该格式化 GB', () => {
-    expect(formatFileSize(1073741824)).toBe('1.00 GB');
-  });
-});
-
 describe('base64ToBytes', () => {
   it('应该解码标准 ASCII Base64 为字节序列', () => {
     const bytes = base64ToBytes('aGVsbG8=');
@@ -337,7 +316,7 @@ describe('base64ToBlob', () => {
   });
 
   it('应该对非法 Base64 抛出 Invalid Base64 string', () => {
-    expect(() => base64ToBlob('这不是 base64!')).toThrow('Invalid Base64 string');
+    expect(() => base64ToBlob('这不是 base64!')).toThrow('无效的 Base64 字符串');
   });
 
   it('应该返回原始 Base64（已去除 data URI 前缀）', () => {
diff --git a/src/utils/__tests__/chromeStorage.test.ts b/src/utils/__tests__/chromeStorage.test.ts
index aeba7c7..1ada37e 100644
--- a/src/utils/__tests__/chromeStorage.test.ts
+++ b/src/utils/__tests__/chromeStorage.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, expectTypeOf } from 'vitest';
 import { storageUtil } from '@/utils/chromeStorage';
 
 describe('chromeStorage', () => {
@@ -75,6 +75,20 @@ describe('chromeStorage', () => {
     });
   });
 
+  describe('get 类型签名', () => {
+    it('无默认值时应推断为可选返回类型', () => {
+      const _getWithoutDefault = () => storageUtil.get('app/theme');
+      expectTypeOf<ReturnType<typeof _getWithoutDefault>>().toEqualTypeOf<
+        Promise<string | undefined>
+      >();
+    });
+
+    it('有默认值时应推断为确定返回类型', () => {
+      const _getWithDefault = () => storageUtil.get('app/theme', 'light');
+      expectTypeOf<ReturnType<typeof _getWithDefault>>().toEqualTypeOf<Promise<string>>();
+    });
+  });
+
   describe('set', () => {
     it('应该成功设置字符串值', async () => {
       (chrome.storage.local.set as any).mockResolvedValue(undefined);
diff --git a/src/utils/__tests__/contextMenu.test.ts b/src/utils/__tests__/contextMenu.test.ts
index 071619b..752cee1 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('解析图片二维码');
     });
   });
 
@@ -73,7 +73,7 @@ describe('contextMenu', () => {
 
       expect(chrome.contextMenus.create).toHaveBeenCalledWith({
         id: 'jwt',
-        title: '🔑 解析 JWT',
+        title: '解析 JWT',
         contexts: ['selection'],
         parentId: 'testing-tools-parent',
       });
diff --git a/src/utils/__tests__/diffEngine.test.ts b/src/utils/__tests__/diffEngine.test.ts
index e874794..0d39b4c 100644
--- a/src/utils/__tests__/diffEngine.test.ts
+++ b/src/utils/__tests__/diffEngine.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { diffJson } from '../../pages/JsonTools/diffEngine';
+import { diffJson } from '../diffEngine';
 
 describe('diffJson', () => {
   it('should detect added property', () => {
diff --git a/src/utils/__tests__/indexedDbCleaner.test.ts b/src/utils/__tests__/indexedDbCleaner.test.ts
new file mode 100644
index 0000000..9d9e443
--- /dev/null
+++ b/src/utils/__tests__/indexedDbCleaner.test.ts
@@ -0,0 +1,489 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  clearAllIndexedDBs,
+  INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+  INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+  INDEXED_DB_DELETE_TIMEOUT_MS,
+} from '@/utils/indexedDbCleaner';
+
+type DeleteDatabaseBehavior = 'success' | 'blocked' | 'timeout' | 'error';
+type ClearStoreBehavior = 'success' | 'hang';
+
+function createDeleteDatabaseMock(behavior: DeleteDatabaseBehavior) {
+  return vi.fn(() => {
+    const request = {} as IDBOpenDBRequest;
+    if (behavior === 'timeout') {
+      return request;
+    }
+    queueMicrotask(() => {
+      if (behavior === 'blocked') {
+        request.onblocked?.({} as IDBVersionChangeEvent);
+      } else if (behavior === 'success') {
+        request.onsuccess?.({} as Event);
+      } else if (behavior === 'error') {
+        request.onerror?.({} as Event);
+      }
+    });
+    return request;
+  });
+}
+
+function createDeleteDatabaseMockWithLateSuccess(lateAfterMs: number) {
+  return vi.fn(() => {
+    const request = {} as IDBOpenDBRequest;
+    setTimeout(() => {
+      request.onsuccess?.({} as Event);
+    }, lateAfterMs);
+    return request;
+  });
+}
+
+function createOpenMock(options: {
+  storeNames: string[];
+  onClearStore?: () => void;
+  onTransactionComplete?: () => void;
+  onDbClose?: () => void;
+  clearStoreBehavior?: ClearStoreBehavior;
+  deferTransactionComplete?: boolean;
+  syncTransactionComplete?: boolean;
+  hangOpen?: boolean;
+}) {
+  const {
+    storeNames,
+    onClearStore,
+    onTransactionComplete,
+    onDbClose,
+    clearStoreBehavior = 'success',
+    deferTransactionComplete = false,
+    syncTransactionComplete = false,
+    hangOpen = false,
+  } = options;
+
+  return vi.fn(() => {
+    const request = {} as IDBOpenDBRequest;
+    if (hangOpen) {
+      return request;
+    }
+    const db = {
+      objectStoreNames: storeNames,
+      transaction: vi.fn(() => {
+        const tx = {
+          oncomplete: null as ((event: Event) => void) | null,
+          onerror: null as ((event: Event) => void) | null,
+          onabort: null as ((event: Event) => void) | null,
+          abort: vi.fn(),
+          objectStore: vi.fn(() => ({
+            clear: () => {
+              const clearRequest = {} as IDBRequest<void>;
+              onClearStore?.();
+              if (clearStoreBehavior === 'success') {
+                queueMicrotask(() => {
+                  clearRequest.onsuccess?.({} as Event);
+                  if (syncTransactionComplete) {
+                    onTransactionComplete?.();
+                    tx.oncomplete?.({} as Event);
+                    return;
+                  }
+                  if (deferTransactionComplete) {
+                    return;
+                  }
+                  setTimeout(() => {
+                    onTransactionComplete?.();
+                    tx.oncomplete?.({} as Event);
+                  }, 0);
+                });
+              }
+              return clearRequest;
+            },
+          })),
+        };
+        return tx;
+      }),
+      close: vi.fn(() => {
+        onDbClose?.();
+      }),
+    };
+    queueMicrotask(() => {
+      Object.defineProperty(request, 'result', { value: db });
+      request.onsuccess?.({} as Event);
+    });
+    return request;
+  });
+}
+
+type DeleteBehaviorConfig = DeleteDatabaseBehavior | Record<string, DeleteDatabaseBehavior>;
+
+function createIndexedDBMock(options: {
+  databases: Array<{ name: string }>;
+  deleteBehavior: DeleteBehaviorConfig;
+  open?: ReturnType<typeof createOpenMock>;
+}) {
+  const resolveDeleteBehavior = (dbName: string): DeleteDatabaseBehavior => {
+    if (typeof options.deleteBehavior === 'string') {
+      return options.deleteBehavior;
+    }
+    return options.deleteBehavior[dbName] ?? 'success';
+  };
+
+  return {
+    databases: vi.fn().mockResolvedValue(options.databases),
+    deleteDatabase: vi.fn((dbName: string) =>
+      createDeleteDatabaseMock(resolveDeleteBehavior(dbName))(),
+    ),
+    ...(options.open ? { open: options.open } : {}),
+  };
+}
+
+async function withIndexedDBMock<T>(indexedDBMock: object, run: () => Promise<T>): Promise<T> {
+  const originalIndexedDB = globalThis.indexedDB;
+  Object.defineProperty(globalThis, 'indexedDB', { configurable: true, value: indexedDBMock });
+  try {
+    return await run();
+  } finally {
+    Object.defineProperty(globalThis, 'indexedDB', {
+      configurable: true,
+      value: originalIndexedDB,
+    });
+  }
+}
+
+describe('indexedDbCleaner', () => {
+  const runClear = () =>
+    clearAllIndexedDBs(
+      INDEXED_DB_DELETE_TIMEOUT_MS,
+      INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+      INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+    );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should delete IndexedDB successfully when deleteDatabase completes', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'app-db' }],
+      deleteBehavior: 'success',
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({ count: 1, errors: [] });
+    expect(indexedDBMock.deleteDatabase).toHaveBeenCalledWith('app-db');
+  });
+
+  it('should report IndexedDB blocked deletions with a user-facing hint', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'blocked-db' }],
+      deleteBehavior: 'blocked',
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({
+      count: 0,
+      errors: ['页面仍占用 IndexedDB（blocked-db），请刷新后重试或关闭占用该页面的连接'],
+    });
+    expect(indexedDBMock.deleteDatabase).toHaveBeenCalledWith('blocked-db');
+  });
+
+  it('should clear object stores when IndexedDB deletion is blocked', async () => {
+    const clearStore = vi.fn();
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'blocked',
+      open: createOpenMock({ storeNames: ['images'], onClearStore: clearStore }),
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, runClear);
+
+    expect(result).toEqual({ count: 1, errors: [] });
+    expect(clearStore).toHaveBeenCalledTimes(1);
+    expect(indexedDBMock.deleteDatabase).not.toHaveBeenCalled();
+  });
+
+  it('should clear object stores when IndexedDB deletion times out', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    const clearStore = vi.fn();
+    const openMock = createOpenMock({ storeNames: ['images'], onClearStore: clearStore });
+    const hangOpenRequest = {} as IDBOpenDBRequest;
+    openMock.mockImplementationOnce(() => hangOpenRequest);
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'timeout',
+      open: openMock,
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, async () => {
+      const resultPromise = runClear();
+      await vi.advanceTimersByTimeAsync(
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS +
+          INDEXED_DB_DELETE_TIMEOUT_MS +
+          INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      );
+      await vi.runOnlyPendingTimersAsync();
+      return resultPromise;
+    });
+
+    expect(result).toEqual({ count: 1, errors: [] });
+    expect(clearStore).toHaveBeenCalledTimes(1);
+  });
+
+  it('should wait for transaction complete before closing db', async () => {
+    const events: string[] = [];
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'blocked',
+      open: createOpenMock({
+        storeNames: ['images'],
+        onTransactionComplete: () => events.push('transaction-complete'),
+        onDbClose: () => events.push('db-close'),
+      }),
+    });
+
+    await withIndexedDBMock(indexedDBMock, runClear);
+
+    expect(events).toEqual(['transaction-complete', 'db-close']);
+  });
+
+  it('should not hang when transaction completes before clear promises settle', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'blocked',
+      open: createOpenMock({
+        storeNames: ['images'],
+        syncTransactionComplete: true,
+      }),
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, runClear);
+
+    expect(result).toEqual({ count: 1, errors: [] });
+  });
+
+  it('should timeout when opening IndexedDB for fallback never completes', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'blocked',
+      open: createOpenMock({ storeNames: ['images'], hangOpen: true }),
+    });
+
+    const resultPromise = withIndexedDBMock(indexedDBMock, runClear);
+    await vi.advanceTimersByTimeAsync(
+      INDEXED_DB_CLEAR_STORE_TIMEOUT_MS +
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS +
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+    );
+    const result = await resultPromise;
+
+    expect(result).toEqual({
+      count: 0,
+      errors: ['无法打开 IndexedDB（ImageCacheDB）进行清空，请刷新后重试'],
+    });
+  });
+
+  it('should ignore late onsuccess after delete timeout', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    const clearStore = vi.fn();
+    const openMock = createOpenMock({ storeNames: ['images'], onClearStore: clearStore });
+    const hangOpenRequest = {} as IDBOpenDBRequest;
+    openMock.mockImplementationOnce(() => hangOpenRequest);
+    const indexedDBMock = {
+      databases: vi.fn().mockResolvedValue([{ name: 'ImageCacheDB' }]),
+      deleteDatabase: createDeleteDatabaseMockWithLateSuccess(INDEXED_DB_DELETE_TIMEOUT_MS + 1000),
+      open: openMock,
+    };
+
+    const result = await withIndexedDBMock(indexedDBMock, async () => {
+      const resultPromise = runClear();
+      await vi.advanceTimersByTimeAsync(
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS +
+          INDEXED_DB_DELETE_TIMEOUT_MS +
+          INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      );
+      await vi.runOnlyPendingTimersAsync();
+      return resultPromise;
+    });
+
+    expect(result).toEqual({ count: 1, errors: [] });
+    expect(clearStore).toHaveBeenCalledTimes(1);
+
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(result).toEqual({ count: 1, errors: [] });
+  });
+
+  it('should report the store name when fallback clearing times out', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    const openMock = createOpenMock({ storeNames: ['images'], clearStoreBehavior: 'hang' });
+    const hangOpenRequest = {} as IDBOpenDBRequest;
+    openMock.mockImplementationOnce(() => hangOpenRequest);
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'blocked',
+      open: openMock,
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, async () => {
+      const resultPromise = runClear();
+      await vi.advanceTimersByTimeAsync(
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS +
+          INDEXED_DB_DELETE_FALLBACK_DELAY_MS +
+          INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+      );
+      return resultPromise;
+    });
+
+    expect(result).toEqual({
+      count: 0,
+      errors: ['清空 IndexedDB 超时（ImageCacheDB/images），请刷新后重试'],
+    });
+  });
+
+  it('should delete all IndexedDB databases when every delete succeeds', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'db-a' }, { name: 'db-b' }, { name: 'db-c' }],
+      deleteBehavior: 'success',
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({ count: 3, errors: [] });
+    expect(indexedDBMock.deleteDatabase).toHaveBeenCalledTimes(3);
+  });
+
+  it('should succeed when some deletions fallback to clear object stores', async () => {
+    const clearStore = vi.fn();
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'db-a' }, { name: 'db-b' }, { name: 'db-c' }],
+      deleteBehavior: { 'db-a': 'success', 'db-b': 'success', 'db-c': 'blocked' },
+      open: createOpenMock({ storeNames: ['data'], onClearStore: clearStore }),
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({ count: 3, errors: [] });
+    expect(clearStore).toHaveBeenCalledTimes(3);
+    expect(indexedDBMock.deleteDatabase).not.toHaveBeenCalled();
+  });
+
+  it('should preserve partial count when some IndexedDB databases fail', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'db-a' }, { name: 'db-b' }, { name: 'db-c' }],
+      deleteBehavior: { 'db-a': 'success', 'db-b': 'success', 'db-c': 'error' },
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({
+      count: 2,
+      errors: ['删除 IndexedDB 失败（db-c），请刷新后重试'],
+    });
+  });
+
+  it('should preserve partial count when blocked fallback fails for one database', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'db-a' }, { name: 'db-b' }, { name: 'blocked-db' }],
+      deleteBehavior: { 'db-a': 'success', 'db-b': 'success', 'blocked-db': 'blocked' },
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({
+      count: 2,
+      errors: ['页面仍占用 IndexedDB（blocked-db），请刷新后重试或关闭占用该页面的连接'],
+    });
+  });
+
+  it('should clear ImageCacheDB on consecutive attempts without calling delete first', async () => {
+    const clearStore = vi.fn();
+    const openMock = createOpenMock({ storeNames: ['images'], onClearStore: clearStore });
+    const indexedDBMock = createIndexedDBMock({
+      databases: [{ name: 'ImageCacheDB' }],
+      deleteBehavior: 'blocked',
+      open: openMock,
+    });
+
+    await withIndexedDBMock(indexedDBMock, runClear);
+    const secondResult = await withIndexedDBMock(indexedDBMock, runClear);
+
+    expect(secondResult).toEqual({ count: 1, errors: [] });
+    expect(clearStore).toHaveBeenCalledTimes(2);
+    expect(indexedDBMock.deleteDatabase).not.toHaveBeenCalled();
+  });
+
+  it('should run when deserialized into page context with explicit timeout args', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [],
+      deleteBehavior: 'success',
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, async () => {
+      const injected = (0, eval)(`(${clearAllIndexedDBs.toString()})`) as typeof clearAllIndexedDBs;
+      return injected(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      );
+    });
+
+    expect(result).toEqual({ count: 0, errors: [] });
+  });
+
+  it('should return count 0 when no IndexedDB databases exist', async () => {
+    const indexedDBMock = createIndexedDBMock({
+      databases: [],
+      deleteBehavior: 'success',
+    });
+
+    const result = await withIndexedDBMock(indexedDBMock, () =>
+      clearAllIndexedDBs(
+        INDEXED_DB_DELETE_TIMEOUT_MS,
+        INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+        INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+      ),
+    );
+
+    expect(result).toEqual({ count: 0, errors: [] });
+    expect(indexedDBMock.deleteDatabase).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/utils/__tests__/jsonToToml.test.ts b/src/utils/__tests__/jsonToToml.test.ts
index c4bff22..9b82c85 100644
--- a/src/utils/__tests__/jsonToToml.test.ts
+++ b/src/utils/__tests__/jsonToToml.test.ts
@@ -76,14 +76,6 @@ describe('jsonToToml', () => {
     expect(() => jsonToToml('{invalid}')).toThrow(SyntaxError);
   });
 
-  it('should throw Error for non-object top-level value', () => {
-    expect(() => jsonToToml('"hello"')).toThrow(
-      'TOML requires the top-level value to be an object',
-    );
-    expect(() => jsonToToml('[1,2]')).toThrow('TOML requires the top-level value to be an object');
-    expect(() => jsonToToml('null')).toThrow('TOML requires the top-level value to be an object');
-  });
-
   it('should escape special characters in strings', () => {
     const result = jsonToToml('{"path":"C:\\\\Users\\\\test"}');
     expect(result.output).toContain('"C:\\\\Users\\\\test"');
diff --git a/src/utils/__tests__/jsonToYaml.test.ts b/src/utils/__tests__/jsonToYaml.test.ts
index 7090424..c06351e 100644
--- a/src/utils/__tests__/jsonToYaml.test.ts
+++ b/src/utils/__tests__/jsonToYaml.test.ts
@@ -86,11 +86,6 @@ describe('jsonToYaml', () => {
     expect(() => jsonToYaml('{invalid}')).toThrow(SyntaxError);
   });
 
-  it('should handle keys with special characters', () => {
-    const result = jsonToYaml('{"key with spaces":"value"}');
-    expect(result.output).toContain('"key with spaces"');
-  });
-
   it('should handle nested arrays in objects', () => {
     const result = jsonToYaml('{"items":[1,2,3]}');
     expect(result.output).toContain('items:');
diff --git a/src/utils/__tests__/qrCodeParser.test.ts b/src/utils/__tests__/qrCodeParser.test.ts
index 65573f7..8d9782d 100644
--- a/src/utils/__tests__/qrCodeParser.test.ts
+++ b/src/utils/__tests__/qrCodeParser.test.ts
@@ -2,7 +2,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import QrScanner from 'qr-scanner';
 
-// Mock qr-scanner
 vi.mock('qr-scanner', () => ({
   default: {
     scanImage: vi.fn(),
diff --git a/src/utils/__tests__/restrictedUrls.test.ts b/src/utils/__tests__/restrictedUrls.test.ts
new file mode 100644
index 0000000..73a115b
--- /dev/null
+++ b/src/utils/__tests__/restrictedUrls.test.ts
@@ -0,0 +1,49 @@
+import {
+  isRestrictedUrl,
+  isUnsupportedPageUrl,
+  RESTRICTED_PROTOCOLS,
+} from '@/utils/restrictedUrls';
+
+describe('restrictedUrls', () => {
+  describe('isRestrictedUrl', () => {
+    it('应识别受限协议页面', () => {
+      expect(isRestrictedUrl('chrome://settings')).toBe(true);
+      expect(isRestrictedUrl('chrome-extension://abc123/background.html')).toBe(true);
+      expect(isRestrictedUrl('about:blank')).toBe(true);
+      expect(isRestrictedUrl('edge://settings')).toBe(true);
+      expect(isRestrictedUrl('brave://settings')).toBe(true);
+      expect(isRestrictedUrl('view-source:https://example.com')).toBe(true);
+      expect(isRestrictedUrl('file:///path/to/file')).toBe(true);
+      expect(isRestrictedUrl('data:text/html,<h1>Hello</h1>')).toBe(true);
+    });
+
+    it('应允许普通 http/https 页面', () => {
+      expect(isRestrictedUrl('http://example.com')).toBe(false);
+      expect(isRestrictedUrl('https://example.com')).toBe(false);
+    });
+
+    it('空 URL 应视为受限', () => {
+      expect(isRestrictedUrl(undefined)).toBe(true);
+      expect(isRestrictedUrl('')).toBe(true);
+    });
+  });
+
+  describe('isUnsupportedPageUrl', () => {
+    it('应通过 protocol 精确匹配识别受限页面', () => {
+      expect(isUnsupportedPageUrl('chrome://newtab/')).toBe(true);
+      expect(isUnsupportedPageUrl('brave://settings/')).toBe(true);
+      expect(isUnsupportedPageUrl('https://example.com')).toBe(false);
+    });
+
+    it('无效 URL 应视为不支持', () => {
+      expect(isUnsupportedPageUrl(undefined)).toBe(true);
+      expect(isUnsupportedPageUrl('not-a-url')).toBe(true);
+    });
+  });
+
+  it('RESTRICTED_PROTOCOLS 应包含 storage cleaner 与右键恢复所需协议', () => {
+    expect(RESTRICTED_PROTOCOLS).toEqual(
+      expect.arrayContaining(['brave:', 'view-source:', 'file:', 'data:']),
+    );
+  });
+});
diff --git a/src/utils/__tests__/storageCleaner.test.ts b/src/utils/__tests__/storageCleaner.test.ts
index 9137a38..cc9d517 100644
--- a/src/utils/__tests__/storageCleaner.test.ts
+++ b/src/utils/__tests__/storageCleaner.test.ts
@@ -1,85 +1,61 @@
-import { describe, expect, it } from 'vitest';
-import { clearCookies, isRestrictedUrl } from '@/utils/storageCleaner';
-import { formatBytes } from '@/utils/format';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  clearAllIndexedDBs,
+  INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+  INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+  INDEXED_DB_DELETE_TIMEOUT_MS,
+} from '@/utils/indexedDbCleaner';
+import { clearCookies, clearStorage } from '@/utils/storageCleaner';
+import type { StorageCleanerOptions } from '@/types/storage';
+
+const indexedDBClearOptions: StorageCleanerOptions = {
+  localStorage: false,
+  sessionStorage: false,
+  indexedDB: true,
+  cookies: false,
+  cacheStorage: false,
+  serviceWorkers: false,
+};
+
+function mockExecuteScriptEval() {
+  (chrome.scripting.executeScript as any).mockImplementationOnce(
+    async ({ func, args }: { func: (...a: unknown[]) => unknown; args?: unknown[] }) => {
+      if (func === clearAllIndexedDBs) {
+        const deleteTimeoutMs = (args?.[0] as number | undefined) ?? INDEXED_DB_DELETE_TIMEOUT_MS;
+        const clearStoreTimeoutMs =
+          (args?.[1] as number | undefined) ?? INDEXED_DB_CLEAR_STORE_TIMEOUT_MS;
+        const fallbackDelayMs =
+          (args?.[2] as number | undefined) ?? INDEXED_DB_DELETE_FALLBACK_DELAY_MS;
+        return [
+          {
+            result: await clearAllIndexedDBs(deleteTimeoutMs, clearStoreTimeoutMs, fallbackDelayMs),
+          },
+        ];
+      }
+      const isolatedFunc = (0, eval)(`(${func.toString()})`) as (
+        ...a: unknown[]
+      ) => Promise<unknown>;
+      return [{ result: await isolatedFunc(...(args ?? [])) }];
+    },
+  );
+}
+
+function mockIndexedDBForEmptyDatabases() {
+  Object.defineProperty(globalThis, 'indexedDB', {
+    configurable: true,
+    value: {
+      databases: vi.fn().mockResolvedValue([]),
+    },
+  });
+}
 
 describe('storageCleaner utils', () => {
-  describe('isRestrictedUrl', () => {
-    it('should return true for chrome:// URLs', () => {
-      expect(isRestrictedUrl('chrome://settings')).toBe(true);
-    });
-
-    it('should return true for chrome-extension:// URLs', () => {
-      expect(isRestrictedUrl('chrome-extension://abc123/background.html')).toBe(true);
-    });
-
-    it('should return true for about:// URLs', () => {
-      expect(isRestrictedUrl('about:blank')).toBe(true);
-    });
-
-    it('should return true for edge:// URLs', () => {
-      expect(isRestrictedUrl('edge://settings')).toBe(true);
-    });
-
-    it('should return true for view-source:// URLs', () => {
-      expect(isRestrictedUrl('view-source:https://example.com')).toBe(true);
-    });
-
-    it('should return true for file:// URLs', () => {
-      expect(isRestrictedUrl('file:///path/to/file')).toBe(true);
-    });
-
-    it('should return true for data:// URLs', () => {
-      expect(isRestrictedUrl('data:text/html,<h1>Hello</h1>')).toBe(true);
-    });
-
-    it('should return false for http:// URLs', () => {
-      expect(isRestrictedUrl('http://example.com')).toBe(false);
-    });
-
-    it('should return false for https:// URLs', () => {
-      expect(isRestrictedUrl('https://example.com')).toBe(false);
-    });
-
-    it('should return true for undefined URL', () => {
-      expect(isRestrictedUrl(undefined)).toBe(true);
-    });
-
-    it('should return true for empty string', () => {
-      expect(isRestrictedUrl('')).toBe(true);
-    });
+  beforeEach(() => {
+    vi.clearAllMocks();
   });
 
-  describe('formatBytes', () => {
-    it('should return "0 B" for 0 bytes', () => {
-      expect(formatBytes(0)).toBe('0 B');
-    });
-
-    it('should format bytes correctly', () => {
-      expect(formatBytes(500)).toBe('500 B');
-    });
-
-    it('should format kilobytes correctly', () => {
-      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(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(formatBytes(1073741824)).toBe('1.00 GB');
-      expect(formatBytes(2147483648)).toBe('2.00 GB');
-    });
-
-    it('should handle edge cases', () => {
-      expect(formatBytes(1)).toBe('1 B');
-      expect(formatBytes(1023)).toBe('1023 B');
-      expect(formatBytes(1025)).toBe('1.0 KB');
-    });
+  afterEach(() => {
+    vi.useRealTimers();
   });
 
   describe('clearCookies', () => {
@@ -131,4 +107,107 @@ describe('storageCleaner utils', () => {
       expect(result).toEqual({ success: false, error: 'Error: Permission denied' });
     });
   });
+
+  describe('clearStorage', () => {
+    it('should report script injection failures instead of treating fallback values as success', async () => {
+      (chrome.scripting.executeScript as any).mockRejectedValueOnce(
+        new Error('Cannot access this page'),
+      );
+
+      const result = await clearStorage(1, 'https://example.com', {
+        localStorage: true,
+        sessionStorage: false,
+        indexedDB: false,
+        cookies: false,
+        cacheStorage: false,
+        serviceWorkers: false,
+      });
+
+      expect(result.overallSuccess).toBe(false);
+      expect(result.localStorage).toEqual({
+        success: false,
+        error: 'Error: Cannot access this page',
+      });
+    });
+
+    it('should wire IndexedDB cleanup through executeScript with clearAllIndexedDBs', async () => {
+      mockIndexedDBForEmptyDatabases();
+      mockExecuteScriptEval();
+
+      const result = await clearStorage(1, 'https://example.com', indexedDBClearOptions);
+
+      expect(chrome.scripting.executeScript).toHaveBeenCalledWith(
+        expect.objectContaining({
+          func: clearAllIndexedDBs,
+          args: [
+            INDEXED_DB_DELETE_TIMEOUT_MS,
+            INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+            INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+          ],
+        }),
+      );
+      expect(result.overallSuccess).toBe(true);
+      expect(result.indexedDB).toEqual({ success: true, count: 0 });
+    });
+
+    it('should aggregate selected storage failures into overallSuccess', async () => {
+      (chrome.scripting.executeScript as any).mockResolvedValueOnce([{ result: { count: 1 } }]);
+      (chrome.cookies.getAll as any).mockRejectedValueOnce(new Error('Cookie denied'));
+
+      const result = await clearStorage(1, 'https://example.com', {
+        localStorage: true,
+        sessionStorage: false,
+        indexedDB: false,
+        cookies: true,
+        cacheStorage: false,
+        serviceWorkers: false,
+      });
+
+      expect(result.overallSuccess).toBe(false);
+      expect(result.localStorage).toEqual({ success: true, count: 1 });
+      expect(result.cookies).toEqual({ success: false, error: 'Error: Cookie denied' });
+      expect(result.error).toBe('Cookies: Error: Cookie denied');
+    });
+
+    it('should join multiple storage failure messages in result.error', async () => {
+      (chrome.scripting.executeScript as any).mockRejectedValueOnce(new Error('Script denied'));
+      (chrome.cookies.getAll as any).mockRejectedValueOnce(new Error('Cookie denied'));
+
+      const result = await clearStorage(1, 'https://example.com', {
+        localStorage: true,
+        sessionStorage: false,
+        indexedDB: false,
+        cookies: true,
+        cacheStorage: false,
+        serviceWorkers: false,
+      });
+
+      expect(result.overallSuccess).toBe(false);
+      expect(result.localStorage).toEqual({ success: false, error: 'Error: Script denied' });
+      expect(result.cookies).toEqual({ success: false, error: 'Error: Cookie denied' });
+      expect(result.error).toBe(
+        'Local Storage: Error: Script denied\nCookies: Error: Cookie denied',
+      );
+    });
+
+    it('should preserve partial IndexedDB count when runCleanScript receives errors', async () => {
+      (chrome.scripting.executeScript as any).mockImplementationOnce(async () => [
+        {
+          result: {
+            count: 2,
+            errors: ['删除 IndexedDB 失败（db-c），请刷新后重试'],
+          },
+        },
+      ]);
+
+      const result = await clearStorage(1, 'https://example.com', indexedDBClearOptions);
+
+      expect(result.overallSuccess).toBe(false);
+      expect(result.indexedDB).toEqual({
+        success: false,
+        count: 2,
+        error: '（已成功清理 2 个数据库，但部分失败）\n删除 IndexedDB 失败（db-c），请刷新后重试',
+      });
+    });
+  });
 });
diff --git a/src/utils/__tests__/syncSnapshot.test.ts b/src/utils/__tests__/syncSnapshot.test.ts
new file mode 100644
index 0000000..b5dab66
--- /dev/null
+++ b/src/utils/__tests__/syncSnapshot.test.ts
@@ -0,0 +1,33 @@
+import { getSyncSnapshot } from '@/utils/syncSnapshot';
+
+describe('getSyncSnapshot', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('无快照时应返回默认值', () => {
+    expect(getSyncSnapshot('app/test-key', 'default')).toBe('default');
+  });
+
+  it('应读取并解析合法 JSON 快照', () => {
+    localStorage.setItem('snapshot/app/test-key', JSON.stringify('saved'));
+    expect(getSyncSnapshot('app/test-key', 'default')).toBe('saved');
+  });
+
+  it('validator 失败时应回退到默认值', () => {
+    localStorage.setItem('snapshot/app/test-key', JSON.stringify('invalid'));
+    const isNumber = (val: unknown): val is number => typeof val === 'number';
+    expect(getSyncSnapshot('app/test-key', 0, isNumber)).toBe(0);
+  });
+
+  it('非法 JSON 时应回退到默认值并记录错误', () => {
+    localStorage.setItem('snapshot/app/test-key', '{invalid');
+    expect(getSyncSnapshot('app/test-key', 'fallback')).toBe('fallback');
+    expect(console.error).toHaveBeenCalled();
+  });
+});
diff --git a/src/utils/__tests__/themeSnapshot.test.ts b/src/utils/__tests__/themeSnapshot.test.ts
new file mode 100644
index 0000000..cffc7df
--- /dev/null
+++ b/src/utils/__tests__/themeSnapshot.test.ts
@@ -0,0 +1,41 @@
+import {
+  applyResolvedThemeClass,
+  applyThemeFromSnapshot,
+  getThemeSyncSnapshot,
+  persistThemeModeSnapshot,
+  resolveThemeMode,
+  THEME_MODE_SNAPSHOT_KEY,
+} from '@/utils/themeSnapshot';
+
+describe('themeSnapshot', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('应从未知快照值回退到 system', () => {
+    localStorage.setItem(THEME_MODE_SNAPSHOT_KEY, JSON.stringify('invalid'));
+    expect(getThemeSyncSnapshot()).toBe('system');
+  });
+
+  it('resolveThemeMode 应解析 system 为当前系统主题', () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: true,
+    } as MediaQueryList);
+
+    expect(resolveThemeMode('dark')).toBe('dark');
+    expect(resolveThemeMode('system')).toBe('dark');
+  });
+
+  it('applyThemeFromSnapshot 应根据快照同步 dark 类', () => {
+    persistThemeModeSnapshot('dark');
+    applyThemeFromSnapshot();
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+
+  it('applyResolvedThemeClass 移除 dark 时应清理 class', () => {
+    document.documentElement.classList.add('dark');
+    applyResolvedThemeClass('light');
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+  });
+});
diff --git a/src/utils/__tests__/useStorageState.test.ts b/src/utils/__tests__/useStorageState.test.ts
index 642bddf..3f56489 100644
--- a/src/utils/__tests__/useStorageState.test.ts
+++ b/src/utils/__tests__/useStorageState.test.ts
@@ -166,4 +166,18 @@ describe('useStorageState', () => {
 
     expect(result.current[2]).toBe(false);
   });
+
+  it('加载失败时不应把快照默认值写回 Chrome Storage', async () => {
+    localStorage.setItem('snapshot/app/searchHistory', JSON.stringify([]));
+
+    (storageUtil.get as any).mockRejectedValue(new Error('Storage read failed'));
+
+    renderHook(() =>
+      useStorageState('app/searchHistory', [], (val): val is string[] => Array.isArray(val)),
+    );
+
+    await waitFor(() => {
+      expect(storageUtil.set).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/utils/base64Converter.ts b/src/utils/base64Converter.ts
index 494f3b5..a4ae322 100644
--- a/src/utils/base64Converter.ts
+++ b/src/utils/base64Converter.ts
@@ -2,8 +2,6 @@
  * Base64 转换器工具函数
  */
 
-import { formatBytes } from './format';
-
 /** 最大文件大小限制（10 MB） */
 export const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
@@ -167,12 +165,12 @@ export function isSupportedImageExtension(fileName: string): boolean {
 export function fileToBase64(file: File): Promise<FileToBase64Result> {
   return new Promise((resolve, reject) => {
     if (!file) {
-      reject(new Error('No file provided'));
+      reject(new Error('未提供文件'));
       return;
     }
 
     if (!isFileSizeValid(file.size)) {
-      reject(new Error(`File size exceeds the limit (${MAX_FILE_SIZE / 1024 / 1024} MB)`));
+      reject(new Error(`文件大小超出限制（最大 ${MAX_FILE_SIZE / 1024 / 1024} MB）`));
       return;
     }
 
@@ -194,7 +192,7 @@ export function fileToBase64(file: File): Promise<FileToBase64Result> {
     };
 
     reader.onerror = () => {
-      reject(new Error('Failed to read file'));
+      reject(new Error('读取文件失败'));
     };
 
     reader.readAsDataURL(file);
@@ -212,17 +210,6 @@ export function extractMimeTypeFromDataUri(dataUri: string): string {
   return match ? match[1] : 'application/octet-stream';
 }
 
-/**
- * 格式化文件大小显示
- *
- * @deprecated 直接使用 {@link formatBytes} 代替
- * @param bytes 字节数
- * @returns 格式化后的字符串
- */
-export function formatFileSize(bytes: number): string {
-  return formatBytes(bytes);
-}
-
 /**
  * Base64 解码为二进制后的产物
  */
@@ -309,7 +296,7 @@ export function base64ToBlob(input: string): Base64ToBlobResult {
   const cleaned = prefixMatch ? trimmed.slice(prefixMatch[0].length) : trimmed;
 
   if (!isValidBase64(cleaned)) {
-    throw new Error('Invalid Base64 string');
+    throw new Error('无效的 Base64 字符串');
   }
 
   const bytes = base64ToBytes(cleaned);
diff --git a/src/utils/chromeI18n.ts b/src/utils/chromeI18n.ts
deleted file mode 100644
index 3442b96..0000000
--- a/src/utils/chromeI18n.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * chrome.i18n 类型安全 wrapper
- * 提供与 react-i18next 兼容的接口
- */
-
-/**
- * 获取翻译文本
- * @param msgId 翻译 key（如 'timestamp_pageTitle'）
- * @param substitutions 占位符替换值（可选）
- * @returns 翻译后的文本
- */
-export function getMessage(msgId: string, substitutions?: string[]): string {
-  try {
-    return chrome.i18n.getMessage(msgId, substitutions);
-  } catch (error) {
-    console.warn(`[chrome.i18n] 无法获取翻译: ${msgId}`, error);
-    return msgId; // 回退到 key 本身
-  }
-}
-
-/**
- * react-i18next 兼容的 Hook
- * 返回 t 函数和相关信息
- */
-export function useI18n(namespace?: string | string[]) {
-  const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
-
-  const t = (key: string, options?: Record<string, unknown>): string => {
-    // 统一将分隔符转换为下划线，兼容 'namespace:key.path' 和 'key.path' 两种写法
-    const msgId = key.replace(':', '_').replace(/\./g, '_');
-
-    // 先尝试直接查找 key
-    let message = getMessage(msgId);
-
-    // 如果直接查找未命中（空字符串或返回 key 本身），尝试命名空间前缀（使用转换后的 msgId）
-    if ((!message || message === msgId) && namespaces.length > 0) {
-      for (const ns of namespaces) {
-        const candidate = `${ns}_${msgId}`;
-        const result = getMessage(candidate);
-        if (result !== candidate) {
-          message = result;
-          break;
-        }
-      }
-    }
-
-    if (options) {
-      for (const [placeholder, value] of Object.entries(options)) {
-        message = message.replace(`{{${placeholder}}}`, String(value));
-      }
-    }
-
-    return message;
-  };
-
-  return {
-    t,
-    i18n: {
-      language: 'zh',
-      changeLanguage: (_lng?: string) => {
-        // chrome.i18n 无法动态切换语言，需要刷新页面
-        console.warn('[chrome.i18n] 无法动态切换语言，需要刷新页面');
-        return Promise.resolve();
-      },
-    },
-    isLoaded: true,
-  };
-}
diff --git a/src/utils/chromeStorage.ts b/src/utils/chromeStorage.ts
index df9ec17..4e46085 100644
--- a/src/utils/chromeStorage.ts
+++ b/src/utils/chromeStorage.ts
@@ -1,12 +1,12 @@
 import { StorageSchema } from '@/types/storage';
 
 class StorageUtils {
-  async get<K extends keyof StorageSchema>(key: K): Promise<StorageSchema[K]>;
-
   async get<K extends keyof StorageSchema>(
     key: K,
-    defaultValue?: StorageSchema[K],
-  ): Promise<StorageSchema[K] | undefined>;
+    defaultValue: StorageSchema[K],
+  ): Promise<StorageSchema[K]>;
+
+  async get<K extends keyof StorageSchema>(key: K): Promise<StorageSchema[K] | undefined>;
 
   /**
    * 获取值
@@ -19,7 +19,10 @@ class StorageUtils {
     defaultValue?: StorageSchema[K],
   ): Promise<StorageSchema[K] | undefined> {
     const result = await chrome.storage.local.get([key]);
-    return (result[key] ?? defaultValue) as StorageSchema[K] | undefined;
+    if (defaultValue !== undefined) {
+      return (result[key] ?? defaultValue) as StorageSchema[K];
+    }
+    return result[key] as StorageSchema[K] | undefined;
   }
 
   /**
diff --git a/src/utils/contextMenu.ts b/src/utils/contextMenu.ts
index 3269530..e033d6b 100644
--- a/src/utils/contextMenu.ts
+++ b/src/utils/contextMenu.ts
@@ -44,43 +44,43 @@ export const CONTEXT_MENU_CONFIGS: ContextMenuItemConfig[] = [
   },
   {
     id: 'jwt',
-    title: '🔑 解析 JWT',
+    title: '解析 JWT',
     contexts: [chrome.contextMenus.ContextType.SELECTION],
     parentId: PARENT_MENU_ID,
   },
   {
     id: 'base64Converter',
-    title: '🔄 Base64 解码',
+    title: 'Base64 解码',
     contexts: [chrome.contextMenus.ContextType.SELECTION],
     parentId: PARENT_MENU_ID,
   },
   {
     id: 'textStatistics',
-    title: '📊 统计选中文本',
+    title: '统计选中文本',
     contexts: [chrome.contextMenus.ContextType.SELECTION],
     parentId: PARENT_MENU_ID,
   },
   {
     id: 'timestamp',
-    title: '⏰ 转换时间戳',
+    title: '转换时间戳',
     contexts: [chrome.contextMenus.ContextType.SELECTION],
     parentId: PARENT_MENU_ID,
   },
   {
     id: 'storageCleaner',
-    title: '🧹 清理当前网站存储',
+    title: '清理当前网站存储',
     contexts: [chrome.contextMenus.ContextType.PAGE],
     parentId: PARENT_MENU_ID,
   },
   {
     id: 'qrCode-page',
-    title: '🔗 网页链接转二维码',
+    title: '网页链接转二维码',
     contexts: [chrome.contextMenus.ContextType.PAGE],
     parentId: PARENT_MENU_ID,
   },
   {
     id: 'qrCode-image',
-    title: '🖼️ 解析图片二维码',
+    title: '解析图片二维码',
     contexts: [chrome.contextMenus.ContextType.IMAGE],
     parentId: PARENT_MENU_ID,
   },
diff --git a/src/pages/JsonTools/diffEngine.ts b/src/utils/diffEngine.ts
similarity index 80%
rename from src/pages/JsonTools/diffEngine.ts
rename to src/utils/diffEngine.ts
index cb4b720..bc63c15 100644
--- a/src/pages/JsonTools/diffEngine.ts
+++ b/src/utils/diffEngine.ts
@@ -1,4 +1,4 @@
-import type { DiffNode, DiffResult, DiffType } from './types';
+import type { DiffNode, DiffResult } from '@/pages/JsonTools/types';
 
 const ROOT_PATH = '$';
 const SENTINEL = Symbol('missing');
@@ -11,7 +11,7 @@ const isObject = (v: unknown): v is Record<string, unknown> =>
 const isArray = (v: unknown): v is unknown[] => Array.isArray(v);
 
 /**
- * 健壮的 JSONPath 生成器：支持针对包含点号、空格或特殊字符的键名进行括号转义拦截
+ * JSONPath 生成器
  */
 const buildPath = (parent: string, key: string, isArrayChild: boolean): string => {
   if (isArrayChild) {
@@ -37,7 +37,6 @@ const diffNode = (
   path: string,
   diffPaths: string[],
 ): DiffNode => {
-  // 分支 1：节点增加行为拦截 (叶子节点状态)
   if (left === SENTINEL && right !== SENTINEL) {
     diffPaths.push(path);
     return {
@@ -47,11 +46,10 @@ const diffNode = (
       newValue: right,
       path,
       isLeaf: !isObject(right) && !isArray(right),
-      hasDiffInChildren: false, // 自身即是新增，子树无需向下检索
+      hasDiffInChildren: false,
     };
   }
 
-  // 分支 2：节点删除行为拦截 (叶子节点状态)
   if (right === SENTINEL && left !== SENTINEL) {
     diffPaths.push(path);
     return {
@@ -61,7 +59,7 @@ const diffNode = (
       newValue: undefined,
       path,
       isLeaf: !isObject(left) && !isArray(left),
-      hasDiffInChildren: false, // 自身即是删除，子树无需向下检索
+      hasDiffInChildren: false,
     };
   }
 
@@ -70,7 +68,6 @@ const diffNode = (
   const leftArr = isArray(left);
   const rightArr = isArray(right);
 
-  // 分支 3：双对象深层递归 (容器状态)
   if (leftObj && rightObj) {
     const keySet = new Set<string>();
     const leftKeys = Object.keys(left);
@@ -97,11 +94,10 @@ const diffNode = (
       children,
       path,
       isLeaf: false,
-      hasDiffInChildren, // 完美注入预计算衍生状态
+      hasDiffInChildren,
     };
   }
 
-  // 分支 4：双数组深层按序递归 (容器状态)
   if (leftArr && rightArr) {
     const len = Math.max(left.length, right.length);
     const children: DiffNode[] = new Array(len);
@@ -124,11 +120,10 @@ const diffNode = (
       children,
       path,
       isLeaf: false,
-      hasDiffInChildren, // 完美注入预计算衍生状态
+      hasDiffInChildren,
     };
   }
 
-  // 分支 5：绝对类型安全防护大闸 (双基本基元比对)
   const leftIsContainer = leftObj || leftArr;
   const rightIsContainer = rightObj || rightArr;
 
@@ -160,7 +155,6 @@ const diffNode = (
     }
   }
 
-  // 类型完全发生突变错配，或者基本数值不相等
   diffPaths.push(path);
   return {
     key,
@@ -169,12 +163,12 @@ const diffNode = (
     newValue: right,
     path,
     isLeaf: !leftIsContainer && !rightIsContainer,
-    hasDiffInChildren: false, // 变动在自身，后代无子树变动
+    hasDiffInChildren: false,
   };
 };
 
 /**
- * 比较两个 JSON 值的差异，返回安全的差异树及高精度差异路径列表。
+ * 比较两个 JSON 值的差异
  */
 export const diffJson = (left: unknown, right: unknown): DiffResult => {
   const diffPaths: string[] = [];
@@ -185,5 +179,3 @@ export const diffJson = (left: unknown, right: unknown): DiffResult => {
     diffCount: diffPaths.length,
   };
 };
-
-export type { DiffNode, DiffResult, DiffType };
diff --git a/src/utils/format.ts b/src/utils/format.ts
index cc83be5..5662759 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -2,7 +2,7 @@
  * 格式化字节大小为易读字符串
  *
  * @param bytes 字节数
- * @returns 格式化后的字符串，例如 "1.5 KB" 或 "100 B"
+ * @returns 格式化后的字符串
  */
 export function formatBytes(bytes: number): string {
   if (bytes === 0) return '0 B';
@@ -17,7 +17,6 @@ export function formatBytes(bytes: number): string {
     unitIndex++;
   }
 
-  // KB uses 1 decimal, MB/GB/TB use 2 decimals
   const decimals = unitIndex === 0 ? 1 : 2;
 
   return `${size.toFixed(decimals)} ${units[unitIndex]}`;
diff --git a/src/utils/indexedDbCleaner.ts b/src/utils/indexedDbCleaner.ts
new file mode 100644
index 0000000..07a5b63
--- /dev/null
+++ b/src/utils/indexedDbCleaner.ts
@@ -0,0 +1,214 @@
+export const INDEXED_DB_DELETE_TIMEOUT_MS = 5000;
+export const INDEXED_DB_CLEAR_STORE_TIMEOUT_MS = 5000;
+export const INDEXED_DB_DELETE_FALLBACK_DELAY_MS = 200;
+
+export interface IndexedDBCleanResult {
+  count: number;
+  errors?: string[];
+}
+
+/**
+ * 在页面上下文中清理当前 origin 的全部 IndexedDB。
+ * 设计为可传入 executeScript({ func }) 的自包含函数。
+ *
+ * 参数必须由调用方显式传入（不可使用模块常量作默认参数），
+ * 否则函数序列化到页面后缺省参数求值会 ReferenceError。
+ */
+export async function clearAllIndexedDBs(
+  deleteTimeoutMs: number,
+  clearStoreTimeoutMs: number,
+  fallbackDelayMs: number,
+): Promise<IndexedDBCleanResult> {
+  const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+  const waitForTransaction = (tx: IDBTransaction, timeoutMs: number): Promise<void> =>
+    new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        reject(new Error('Transaction timeout'));
+      }, timeoutMs);
+
+      tx.oncomplete = () => {
+        clearTimeout(timeoutId);
+        resolve();
+      };
+      tx.onerror = () => {
+        clearTimeout(timeoutId);
+        reject(tx.error ?? new Error('Transaction failed'));
+      };
+      tx.onabort = () => {
+        clearTimeout(timeoutId);
+        reject(tx.error ?? new Error('Transaction aborted'));
+      };
+    });
+
+  const openDatabase = (dbName: string, timeoutMs: number): Promise<IDBDatabase> =>
+    new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        reject(new Error('Open timeout'));
+      }, timeoutMs);
+
+      const openReq = indexedDB.open(dbName);
+      openReq.onerror = () => {
+        clearTimeout(timeoutId);
+        reject(openReq.error ?? new Error('Open failed'));
+      };
+      openReq.onsuccess = () => {
+        clearTimeout(timeoutId);
+        resolve(openReq.result);
+      };
+    });
+
+  const waitForDeleteDatabase = (dbName: string, timeoutMs: number) =>
+    new Promise<'deleted' | 'blocked' | 'timeout' | 'error'>((resolve) => {
+      let settled = false;
+      const settle = (status: 'deleted' | 'blocked' | 'timeout' | 'error') => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timeoutId);
+        resolve(status);
+      };
+
+      const deleteReq = indexedDB.deleteDatabase(dbName);
+      const timeoutId = setTimeout(() => {
+        console.warn(`IndexedDB 删除超时: ${dbName}`);
+        settle('timeout');
+      }, timeoutMs);
+
+      deleteReq.onblocked = () => {
+        console.warn(`IndexedDB 删除被阻塞: ${dbName}`);
+        settle('blocked');
+      };
+      deleteReq.onsuccess = () => settle('deleted');
+      deleteReq.onerror = () => settle('error');
+    });
+
+  const formatDeleteError = (dbName: string, status: 'blocked' | 'timeout' | 'error'): string => {
+    if (status === 'blocked') {
+      return `页面仍占用 IndexedDB（${dbName}），请刷新后重试或关闭占用该页面的连接`;
+    }
+
+    if (status === 'timeout') {
+      return `删除 IndexedDB 超时（${dbName}），请刷新后重试`;
+    }
+
+    return `删除 IndexedDB 失败（${dbName}），请刷新后重试`;
+  };
+
+  const clearObjectStores = async (
+    dbName: string,
+  ): Promise<{ success: boolean; errors: string[] }> => {
+    if (typeof indexedDB.open !== 'function') {
+      return { success: false, errors: [] };
+    }
+
+    const clearStore = (store: IDBObjectStore, storeName: string): Promise<string | null> =>
+      new Promise((resolve) => {
+        const timeoutId = setTimeout(() => {
+          resolve(`清空 IndexedDB 超时（${dbName}/${storeName}），请刷新后重试`);
+        }, clearStoreTimeoutMs);
+
+        const clearReq = store.clear();
+        clearReq.onsuccess = () => {
+          clearTimeout(timeoutId);
+          resolve(null);
+        };
+        clearReq.onerror = () => {
+          clearTimeout(timeoutId);
+          resolve(`清空 IndexedDB 失败（${dbName}/${storeName}），请刷新后重试`);
+        };
+      });
+
+    let db: IDBDatabase | undefined;
+    try {
+      db = await openDatabase(dbName, clearStoreTimeoutMs);
+    } catch {
+      return {
+        success: false,
+        errors: [`无法打开 IndexedDB（${dbName}）进行清空，请刷新后重试`],
+      };
+    }
+
+    try {
+      const storeNames = Array.from(db.objectStoreNames);
+      if (storeNames.length === 0) {
+        return { success: true, errors: [] };
+      }
+
+      const transaction = db.transaction(storeNames, 'readwrite');
+      // 必须在 clear 请求完成前注册 oncomplete，否则事务可能已结束导致永久挂起
+      const transactionDone = waitForTransaction(transaction, clearStoreTimeoutMs);
+      void transactionDone.catch(() => {});
+      const errors = (
+        await Promise.all(
+          storeNames.map((storeName) => clearStore(transaction.objectStore(storeName), storeName)),
+        )
+      ).filter((error): error is string => Boolean(error));
+
+      if (errors.length > 0) {
+        transaction.abort();
+        return { success: false, errors };
+      }
+
+      await transactionDone;
+      return { success: true, errors: [] };
+    } catch {
+      return {
+        success: false,
+        errors: [`清空 IndexedDB 失败（${dbName}），请刷新后重试`],
+      };
+    } finally {
+      db.close();
+    }
+  };
+
+  try {
+    if (typeof indexedDB.databases !== 'function') {
+      return { count: 0 };
+    }
+
+    const databases = await indexedDB.databases();
+    let count = 0;
+    const errors: string[] = [];
+    for (const db of databases) {
+      if (!db.name) continue;
+      const dbName = db.name;
+
+      // 先清空 object store，再尝试 delete。若先 delete 且 blocked，
+      // delete 请求仍 pending 时再 open 同库容易超时（如 Bing ImageCacheDB 连续清理）。
+      const clearResult = await clearObjectStores(dbName);
+      if (clearResult.success) {
+        count++;
+        continue;
+      }
+
+      const status = await waitForDeleteDatabase(dbName, deleteTimeoutMs);
+      if (status === 'deleted') {
+        count++;
+        continue;
+      }
+
+      if (status === 'blocked' || status === 'timeout') {
+        await delay(fallbackDelayMs);
+        const retryClear = await clearObjectStores(dbName);
+        if (retryClear.success) {
+          count++;
+        } else if (retryClear.errors.length > 0) {
+          errors.push(...retryClear.errors);
+        } else {
+          errors.push(formatDeleteError(dbName, status));
+        }
+        continue;
+      }
+
+      if (clearResult.errors.length > 0) {
+        errors.push(...clearResult.errors);
+      } else {
+        errors.push(formatDeleteError(dbName, status));
+      }
+    }
+
+    return { count, errors };
+  } catch (error) {
+    return { count: 0, errors: [`读取或清理 IndexedDB 失败: ${String(error)}`] };
+  }
+}
diff --git a/src/utils/jsonToToml.ts b/src/utils/jsonToToml.ts
index 78e24d3..7bb64ff 100644
--- a/src/utils/jsonToToml.ts
+++ b/src/utils/jsonToToml.ts
@@ -204,7 +204,7 @@ export function jsonToToml(text: string): JsonToTomlResult {
 
   // TOML 要求顶层是表
   if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
-    throw new Error('TOML requires the top-level value to be an object');
+    throw new Error('TOML 要求顶层值必须是一个对象');
   }
 
   const lines: string[] = [];
diff --git a/src/utils/jwt.ts b/src/utils/jwt.ts
index 78d56bb..ba2ffec 100644
--- a/src/utils/jwt.ts
+++ b/src/utils/jwt.ts
@@ -2,8 +2,6 @@
  * JWT 解析工具
  */
 
-import { getMessage } from '@/utils/chromeI18n';
-
 interface JwtHeader {
   alg: string;
   typ?: string;
@@ -43,7 +41,7 @@ export function decodeBase64Url(str: string): string {
   const pad = base64.length % 4;
   if (pad) {
     if (pad === 1) {
-      throw new Error(getMessage('jwt_errors_invalidBase64String'));
+      throw new Error('无效的 Base64URL 字符串');
     }
     base64 += new Array(5 - pad).join('=');
   }
@@ -58,10 +56,9 @@ export function decodeBase64Url(str: string): string {
     const decoder = new TextDecoder('utf-8');
     return decoder.decode(bytes);
   } catch (e) {
-    throw new Error(
-      getMessage('jwt_errors_failedToDecode') + (e instanceof Error ? e.message : String(e)),
-      { cause: e },
-    );
+    throw new Error('Base64 解码失败: ' + (e instanceof Error ? e.message : String(e)), {
+      cause: e,
+    });
   }
 }
 
@@ -78,7 +75,7 @@ export function parseJwt(token: string): JwtResult {
       payload: null,
       signature: '',
       raw: { header: '', payload: '', signature: '' },
-      error: getMessage('jwt_errors_invalidFormat'),
+      error: 'JWT 格式无效：应包含 3 个部分（header.payload.signature）',
     };
   }
 
@@ -98,8 +95,7 @@ export function parseJwt(token: string): JwtResult {
     const headerJson = decodeBase64Url(headerB64);
     result.header = JSON.parse(headerJson);
   } catch (e) {
-    result.error =
-      getMessage('jwt_errors_parseHeaderFailed') + (e instanceof Error ? e.message : String(e));
+    result.error = 'JWT Header 解析失败: ' + (e instanceof Error ? e.message : String(e));
     return result;
   }
 
@@ -107,8 +103,7 @@ export function parseJwt(token: string): JwtResult {
     const payloadJson = decodeBase64Url(payloadB64);
     result.payload = JSON.parse(payloadJson);
   } catch (e) {
-    result.error =
-      getMessage('jwt_errors_parsePayloadFailed') + (e instanceof Error ? e.message : String(e));
+    result.error = 'JWT Payload 解析失败: ' + (e instanceof Error ? e.message : String(e));
     return result;
   }
 
diff --git a/src/utils/qrCodeParser.ts b/src/utils/qrCodeParser.ts
index 63ef41c..7cfd5b3 100644
--- a/src/utils/qrCodeParser.ts
+++ b/src/utils/qrCodeParser.ts
@@ -8,7 +8,6 @@ interface QrCodeParseResult {
 
 /**
  * 从文件中解析二维码
- * 使用 qr-scanner 替代 jsqr 以减小体积并提高性能
  */
 export async function parseQrCodeFromFile(file: File): Promise<QrCodeParseResult> {
   try {
diff --git a/src/utils/restrictedUrls.ts b/src/utils/restrictedUrls.ts
new file mode 100644
index 0000000..af447f7
--- /dev/null
+++ b/src/utils/restrictedUrls.ts
@@ -0,0 +1,33 @@
+/** 浏览器内部/受限协议（含尾部冒号，用于 protocol 匹配） */
+export const RESTRICTED_PROTOCOLS = [
+  'chrome:',
+  'chrome-extension:',
+  'about:',
+  'edge:',
+  'brave:',
+  'view-source:',
+  'file:',
+  'data:',
+] as const;
+
+export function getUrlProtocol(url: string): string | null {
+  try {
+    return new URL(url).protocol;
+  } catch {
+    return null;
+  }
+}
+
+/** 用于 content script / 右键恢复等（protocol 精确匹配） */
+export function isUnsupportedPageUrl(url: string | undefined): boolean {
+  if (!url) return true;
+  const protocol = getUrlProtocol(url);
+  if (!protocol) return true;
+  return RESTRICTED_PROTOCOLS.some((p) => p === protocol);
+}
+
+/** 用于 storage cleaner tab 检测（前缀匹配，兼容无 protocol 的场景） */
+export function isRestrictedUrl(url?: string): boolean {
+  if (!url) return true;
+  return RESTRICTED_PROTOCOLS.some((p) => url.startsWith(p));
+}
diff --git a/src/utils/ruleStorage.ts b/src/utils/ruleStorage.ts
index eecc2db..7ba95ce 100644
--- a/src/utils/ruleStorage.ts
+++ b/src/utils/ruleStorage.ts
@@ -9,7 +9,7 @@ import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
 const STORAGE_KEY = 'testDataGenerator_rules';
 
 /** 最大规则数量 */
-const MAX_RULES = 20;
+export const MAX_RULES = 20;
 
 /**
  * 获取所有规则
@@ -78,9 +78,7 @@ export function save(
       useCount: 0,
     };
     rules.unshift(newRule);
-    if (!setAll(rules)) {
-      return null;
-    }
+    if (!setAll(rules)) return null;
     return newRule;
   }
 
@@ -97,9 +95,7 @@ export function save(
     updatedAt: now,
   };
   rules[index] = updatedRule;
-  if (!setAll(rules)) {
-    return null;
-  }
+  if (!setAll(rules)) return null;
   return updatedRule;
 }
 
@@ -121,9 +117,7 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
     updatedAt: Date.now(),
   };
   rules[index] = updatedRule;
-  if (!setAll(rules)) {
-    return null;
-  }
+  if (!setAll(rules)) return null;
   return updatedRule;
 }
 
@@ -138,7 +132,8 @@ export function deleteRule(id: string): boolean {
     return false;
   }
   rules.splice(index, 1);
-  return setAll(rules);
+  if (!setAll(rules)) return false;
+  return true;
 }
 
 /**
@@ -170,9 +165,7 @@ export function duplicate(id: string, copySuffix = '（副本）'): DataRule | n
 
   const rules = getAll();
   rules.unshift(newRule);
-  if (!setAll(rules)) {
-    return null;
-  }
+  setAll(rules);
   return newRule;
 }
 
diff --git a/src/utils/storageCleaner.ts b/src/utils/storageCleaner.ts
index 65ba10f..4da5a6f 100644
--- a/src/utils/storageCleaner.ts
+++ b/src/utils/storageCleaner.ts
@@ -1,31 +1,20 @@
 import type { CleaningResult, StorageCleanerOptions, StorageCleanResult } from '@/types/storage';
-
-const RESTRICTED_PROTOCOLS = [
-  'chrome:',
-  'chrome-extension:',
-  'about:',
-  'edge:',
-  'view-source:',
-  'file:',
-  'data:',
-] as const;
-
-/** 清理选项的 key 列表（用于遍历结果） */
-const CLEAN_OPTION_KEYS: (keyof StorageCleanerOptions)[] = [
-  'localStorage',
-  'sessionStorage',
-  'indexedDB',
-  'cookies',
-  'cacheStorage',
-  'serviceWorkers',
-];
+import { CLEAN_OPTION_KEYS, OPTION_LABELS } from '@/pages/StorageCleaner/constants';
+import {
+  clearAllIndexedDBs,
+  INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+  INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+  INDEXED_DB_DELETE_TIMEOUT_MS,
+  type IndexedDBCleanResult,
+} from '@/utils/indexedDbCleaner';
+import { browser } from 'wxt/browser';
 
 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.
   // If it's a restricted URL, we return it anyway and let the caller handle the error display.
 
-  const [tab] = await chrome.tabs.query({
+  const [tab] = await browser.tabs.query({
     active: true,
     lastFocusedWindow: true,
   });
@@ -35,7 +24,7 @@ export async function getCurrentTab() {
   }
 
   // Fallback for cases where lastFocusedWindow might not work as expected (e.g. certain sidepanel scenarios)
-  const [fallbackTab] = await chrome.tabs.query({
+  const [fallbackTab] = await browser.tabs.query({
     active: true,
     currentWindow: true,
   });
@@ -43,14 +32,9 @@ export async function getCurrentTab() {
   return fallbackTab;
 }
 
-export function isRestrictedUrl(url?: string): boolean {
-  if (!url) return true;
-  return RESTRICTED_PROTOCOLS.some((p) => url.startsWith(p));
-}
-
 export async function getCookieSize(url: string): Promise<number> {
   try {
-    const cookies = await chrome.cookies.getAll({ url });
+    const cookies = await browser.cookies.getAll({ url });
     const encoder = new TextEncoder();
     // 估算：名称 + 值 + 域名 + 路径 的 UTF-8 字节数
     return cookies.reduce(
@@ -68,29 +52,49 @@ export async function getCookieSize(url: string): Promise<number> {
   }
 }
 
-/**
- * 通用辅助：在指定标签页中执行脚本并返回结果
- *
- * @param tabId 标签页 ID
- * @param func 在页面上下文中执行的函数
- * @param errorLabel 错误日志前缀
- * @param fallback 执行失败时的回退值
- */
-async function runScript<T>(
+type ExecuteInTabOptions<T> =
+  | { errorLabel: string; mode: 'fallback'; fallback: T }
+  | { errorLabel: string; mode: 'throw' };
+
+async function executeInTab<T, A extends unknown[] = []>(
   tabId: number,
-  func: () => T | Promise<T>,
-  errorLabel: string,
-  fallback: T,
+  func: (...args: A) => T | Promise<T>,
+  options: ExecuteInTabOptions<T>,
+  args?: A,
 ): Promise<T> {
   try {
-    const [result] = await chrome.scripting.executeScript({ target: { tabId }, func });
-    return (result?.result as T) ?? fallback;
+    const [result] = await browser.scripting.executeScript({
+      target: { tabId },
+      func,
+      ...(args ? { args } : {}),
+    });
+    const value = result?.result as T | undefined;
+    if (value !== undefined && value !== null) {
+      return value;
+    }
+    if (options.mode === 'fallback') {
+      return options.fallback;
+    }
+    return undefined as T;
   } catch (error) {
-    console.error(`Failed to ${errorLabel}:`, error);
-    return fallback;
+    console.error(`Failed to ${options.errorLabel}:`, error);
+    if (options.mode === 'throw') {
+      throw error;
+    }
+    return options.fallback;
   }
 }
 
+async function runScript<T, A extends unknown[] = []>(
+  tabId: number,
+  func: (...args: A) => T | Promise<T>,
+  errorLabel: string,
+  fallback: T,
+  args?: A,
+): Promise<T> {
+  return executeInTab(tabId, func, { errorLabel, mode: 'fallback', fallback }, args);
+}
+
 export async function getLocalStorageSize(tabId: number): Promise<number> {
   return runScript(
     tabId,
@@ -188,12 +192,12 @@ export async function getServiceWorkerCount(tabId: number): Promise<number> {
 
 export async function clearCookies(url: string): Promise<StorageCleanResult> {
   try {
-    const cookies = await chrome.cookies.getAll({ url });
+    const cookies = await browser.cookies.getAll({ url });
     for (const cookie of cookies) {
       const protocol = cookie.secure ? 'https:' : 'http:';
       const domain = cookie.domain.startsWith('.') ? cookie.domain.slice(1) : cookie.domain;
       const cookieUrl = `${protocol}//${domain}${cookie.path}`;
-      await chrome.cookies.remove({
+      await browser.cookies.remove({
         url: cookieUrl,
         name: cookie.name,
         storeId: cookie.storeId,
@@ -212,16 +216,33 @@ export async function clearCookies(url: string): Promise<StorageCleanResult> {
  * @param func 在页面上下文中执行的清理函数
  * @param errorLabel 错误日志前缀
  */
-async function runCleanScript(
+async function runCleanScript<A extends unknown[] = []>(
   tabId: number,
-  func: () => { count: number } | Promise<{ count: number }>,
+  func: (...args: A) => IndexedDBCleanResult | Promise<IndexedDBCleanResult>,
   errorLabel: string,
+  args?: A,
 ): Promise<StorageCleanResult> {
-  const raw = await runScript(tabId, func, errorLabel, { count: 0 });
-  if (raw && typeof raw === 'object' && 'count' in raw) {
+  try {
+    const raw = await executeInTab(tabId, func, { errorLabel, mode: 'throw' }, args);
+    if (!raw || typeof raw !== 'object' || !('count' in raw)) {
+      return { success: false, error: 'No result returned' };
+    }
+
+    if (raw.errors?.length) {
+      const errorMsg = raw.errors.join('\n');
+      const partialHint = raw.count > 0 ? `（已成功清理 ${raw.count} 个数据库，但部分失败）\n` : '';
+      return {
+        success: false,
+        error: partialHint + errorMsg,
+        ...(raw.count > 0 ? { count: raw.count } : {}),
+      };
+    }
+
     return { success: true, count: raw.count };
+  } catch (error) {
+    console.error(`Failed to ${errorLabel}:`, error);
+    return { success: false, error: String(error) };
   }
-  return { success: false, error: 'No result returned' };
 }
 
 async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
@@ -249,47 +270,11 @@ async function injectClearSessionStorage(tabId: number): Promise<StorageCleanRes
 }
 
 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 { count };
-    },
-    'clear IndexedDB',
-  );
+  return runCleanScript(tabId, clearAllIndexedDBs, 'clear IndexedDB', [
+    INDEXED_DB_DELETE_TIMEOUT_MS,
+    INDEXED_DB_CLEAR_STORE_TIMEOUT_MS,
+    INDEXED_DB_DELETE_FALLBACK_DELAY_MS,
+  ]);
 }
 
 async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
@@ -357,27 +342,29 @@ export async function clearStorage(
   );
   if (failures.length > 0) {
     result.overallSuccess = false;
+    result.error = CLEAN_OPTION_KEYS.flatMap((key) => {
+      const itemResult = result[key];
+      if (!itemResult || itemResult.success) return [];
+      return `${OPTION_LABELS[key]}: ${itemResult.error}`;
+    }).join('\n');
   }
 
   return result;
 }
 
-export function formatCleaningResult(
-  result: CleaningResult,
-  t: (key: string, options?: Record<string, unknown>) => string,
-): string {
+export function formatCleaningResult(result: CleaningResult): string {
   const parts: string[] = [];
 
   for (const key of CLEAN_OPTION_KEYS) {
     const r = result[key];
     if (r?.success && r.count > 0) {
-      parts.push(`${r.count} ${t(`storageCleaner:options.${key}`)}`);
+      parts.push(`${r.count} ${OPTION_LABELS[key] || key}`);
     }
   }
 
   if (parts.length === 0) {
-    return t('storageCleaner:noDataToClean');
+    return '该页面没有可清理的存储数据';
   }
 
-  return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
+  return `清理了 ${parts.join(', ')}`;
 }
diff --git a/src/utils/syncSnapshot.ts b/src/utils/syncSnapshot.ts
new file mode 100644
index 0000000..08af5c4
--- /dev/null
+++ b/src/utils/syncSnapshot.ts
@@ -0,0 +1,21 @@
+/**
+ * 从 localStorage 获取同步快照（用于消除异步加载产生的首屏闪烁）
+ */
+export function getSyncSnapshot<T>(
+  key: string,
+  defaultValue: T,
+  validator?: (val: unknown) => val is T,
+): T {
+  try {
+    const val = localStorage.getItem(`snapshot/${key}`);
+    if (!val) return defaultValue;
+    const parsed = JSON.parse(val) as unknown;
+    if (validator) {
+      return validator(parsed) ? parsed : defaultValue;
+    }
+    return (parsed as T) ?? defaultValue;
+  } catch (error) {
+    console.error(`读取快照失败 (${key}):`, error);
+    return defaultValue;
+  }
+}
diff --git a/src/utils/themeSnapshot.ts b/src/utils/themeSnapshot.ts
new file mode 100644
index 0000000..596b34d
--- /dev/null
+++ b/src/utils/themeSnapshot.ts
@@ -0,0 +1,50 @@
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedThemeMode = 'light' | 'dark';
+
+export const THEME_MODE_STORAGE_KEY = 'app/themeMode' as const;
+export const THEME_MODE_SNAPSHOT_KEY = 'snapshot/app/themeMode';
+
+const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
+
+export const isValidThemeMode = (value: unknown): value is ThemeMode =>
+  VALID_MODES.includes(value as ThemeMode);
+
+/**
+ * 同步读取 localStorage 快照（首屏防闪烁）
+ */
+export const getThemeSyncSnapshot = (): ThemeMode => {
+  try {
+    const raw = localStorage.getItem(THEME_MODE_SNAPSHOT_KEY);
+    if (!raw) return 'system';
+    const parsed = JSON.parse(raw) as unknown;
+    return isValidThemeMode(parsed) ? parsed : 'system';
+  } catch {
+    return 'system';
+  }
+};
+
+export const getSystemThemeMode = (): ResolvedThemeMode => {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+export const resolveThemeMode = (mode: ThemeMode): ResolvedThemeMode =>
+  mode === 'system' ? getSystemThemeMode() : mode;
+
+export const persistThemeModeSnapshot = (mode: ThemeMode): void => {
+  try {
+    localStorage.setItem(THEME_MODE_SNAPSHOT_KEY, JSON.stringify(mode));
+  } catch (error) {
+    console.error('保存主题快照失败:', error);
+  }
+};
+
+export const applyResolvedThemeClass = (resolved: ResolvedThemeMode): void => {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.toggle('dark', resolved === 'dark');
+};
+
+/** 在 React 挂载前同步应用快照主题，避免首帧闪烁 */
+export const applyThemeFromSnapshot = (): void => {
+  applyResolvedThemeClass(resolveThemeMode(getThemeSyncSnapshot()));
+};
diff --git a/src/utils/useContextMenuData.ts b/src/utils/useContextMenuData.ts
index ecc7ea2..d26b2ae 100644
--- a/src/utils/useContextMenuData.ts
+++ b/src/utils/useContextMenuData.ts
@@ -26,7 +26,7 @@ export function useContextMenuData({ featureKey, onData }: UseContextMenuDataOpt
   useEffect(() => {
     const checkAndConsumeData = async () => {
       try {
-        const data = await storageUtil.get(STORAGE_KEY, undefined);
+        const data = await storageUtil.get(STORAGE_KEY);
 
         if (!data) return;
 
@@ -55,7 +55,7 @@ export function useContextMenuData({ featureKey, onData }: UseContextMenuDataOpt
         if (newData && newData.featureKey === featureKey) {
           void (async () => {
             try {
-              const data = await storageUtil.get(STORAGE_KEY, undefined);
+              const data = await storageUtil.get(STORAGE_KEY);
               if (!data) return;
               if (data.featureKey !== featureKey) return;
               if (Date.now() - data.timestamp > CONTEXT_MENU_DATA_EXPIRY_MS) {
diff --git a/src/utils/useStorageState.ts b/src/utils/useStorageState.ts
index 8713861..345f827 100644
--- a/src/utils/useStorageState.ts
+++ b/src/utils/useStorageState.ts
@@ -1,40 +1,33 @@
-import { useEffect, useRef, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
+import { getSyncSnapshot } from '@/utils/syncSnapshot';
 import type { StorageSchema } from '@/types/storage';
 
-/**
- * 从 localStorage 获取同步快照（用于消除异步加载产生的首屏闪烁）
- */
-const getSyncSnapshot = <T>(
-  key: string,
-  defaultValue: T,
-  validator?: (val: unknown) => val is T,
-): T => {
-  try {
-    const val = localStorage.getItem(`snapshot/${key}`);
-    if (!val) return defaultValue;
-    const parsed = JSON.parse(val) as unknown;
-    if (validator) {
-      return validator(parsed) ? parsed : defaultValue;
-    }
-    return (parsed as T) ?? defaultValue;
-  } catch {
-    return defaultValue;
-  }
-};
-
 export const useStorageState = <K extends keyof StorageSchema>(
   key: K,
   defaultValue: StorageSchema[K],
   validator?: (val: unknown) => val is StorageSchema[K],
 ) => {
-  const [value, setValue] = useState<StorageSchema[K]>(() =>
+  const [value, setValueInternal] = useState<StorageSchema[K]>(() =>
     getSyncSnapshot(key as string, defaultValue, validator),
   );
   const [isInitialized, setIsInitialized] = useState(false);
   const hasLoadedFromStorage = useRef(false);
+  const loadSucceededRef = useRef(false);
+  const userModifiedRef = useRef(false);
+
+  const setValue = useCallback<Dispatch<SetStateAction<StorageSchema[K]>>>((next) => {
+    userModifiedRef.current = true;
+    setValueInternal(next);
+  }, []);
 
-  // Only load from storage once on mount
   useEffect(() => {
     if (hasLoadedFromStorage.current) return;
 
@@ -44,15 +37,17 @@ export const useStorageState = <K extends keyof StorageSchema>(
       try {
         const savedValue = await storageUtil.get(key, defaultValue);
         if (cancelled) return;
+        loadSucceededRef.current = true;
         if (savedValue !== undefined) {
           if (validator) {
-            setValue(validator(savedValue) ? savedValue : defaultValue);
+            setValueInternal(validator(savedValue) ? savedValue : defaultValue);
           } else {
-            setValue(savedValue);
+            setValueInternal(savedValue);
           }
         }
       } catch (error) {
         console.error(`加载状态失败 (${key}):`, error);
+        loadSucceededRef.current = false;
       } finally {
         if (!cancelled) {
           setIsInitialized(true);
@@ -68,9 +63,9 @@ export const useStorageState = <K extends keyof StorageSchema>(
     };
   }, [defaultValue, key, validator]);
 
-  // Save to storage and localStorage snapshot when value changes (after initial load)
   useEffect(() => {
     if (!isInitialized) return;
+    if (!loadSucceededRef.current && !userModifiedRef.current) return;
 
     const saveState = async () => {
       try {
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 7aa20ec..f6f381e 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,41 +1,6 @@
 import '@testing-library/jest-dom';
 import { afterEach, beforeEach, vi } from 'vitest';
 import React from 'react';
-import zhMessages from './public/_locales/zh_CN/messages.json';
-
-// Type assertion to allow string indexing
-const zhMessagesMap = zhMessages as Record<string, { message: string }>;
-
-vi.mock('@/utils/chromeI18n', () => ({
-  useI18n: (ns?: string | string[]) => ({
-    t: (key: string) => {
-      let msgId = key;
-      // Handle namespace:key format
-      if (key.includes(':')) {
-        msgId = key.replace(':', '_').replace(/\./g, '_');
-      }
-      // Try direct key first
-      if (zhMessagesMap[msgId]) return zhMessagesMap[msgId].message;
-      // Try namespace prefix (using converted msgId)
-      if (ns) {
-        const namespaces = Array.isArray(ns) ? ns : [ns];
-        for (const n of namespaces) {
-          const candidate = `${n}_${msgId}`;
-          if (zhMessagesMap[candidate]) return zhMessagesMap[candidate].message;
-        }
-      }
-      return msgId;
-    },
-    i18n: {
-      changeLanguage: vi.fn().mockResolvedValue(undefined),
-      language: 'zh',
-    },
-    isLoaded: true,
-  }),
-  getMessage: (msgId: string) => zhMessagesMap[msgId]?.message ?? msgId,
-  getLanguage: () => 'zh',
-  preloadNamespaces: vi.fn().mockResolvedValue(undefined),
-}));
 
 vi.mock('@/components/CopyButton', () => ({
   CopyButton: ({
@@ -125,6 +90,20 @@ const webExtensionMock = {
     sendMessage: vi.fn().mockResolvedValue(undefined),
     create: vi.fn().mockResolvedValue({}),
     reload: vi.fn().mockResolvedValue(undefined),
+    onActivated: {
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    },
+    onUpdated: {
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    },
+  },
+  windows: {
+    onFocusChanged: {
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    },
   },
   runtime: {
     id: 'test-extension-id',
diff --git a/wxt.config.ts b/wxt.config.ts
index 9bbbf6b..d17a215 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -45,12 +45,9 @@ export default defineConfig({
     name: 'Testing Tool',
     description: 'A tool for testing web applications.',
     version_name: undefined,
-    default_locale: 'zh_CN',
     permissions: [
       'storage',
-      'unlimitedStorage',
       'clipboardWrite',
-      'activeTab',
       'scripting',
       'tabs',
       'cookies',
@@ -66,7 +63,7 @@ export default defineConfig({
       '128': 'icon/128.png',
     },
     action: {
-      default_title: '__MSG_appName__',
+      default_title: 'Testing Tool',
       default_icon: {
         '16': 'icon/16.png',
         '32': 'icon/32.png',