Develop (#20)

* docs: 添加组件文档注释和类型导入

refactor: 统一使用 SnackbarOptions 类型
style: 优化导入语句顺序和格式

* refactor: 简化假数据生成器中的faker导入和使用

Co-authored-by: Copilot <copilot@github.com>

* feat(form-recognizer): 增强表单识别功能并优化UI交互

- 新增字段类型偏好设置功能，支持按域名保存字段类型
- 重构FieldList组件，改进字段选择和类型修改体验
- 添加字段定位闪烁功能，便于在页面上快速找到对应字段
- 优化表单填充逻辑，支持单个字段覆盖默认填充模式
- 移除独立的侧边栏页面，统一使用主页面组件
- 改进useStorageState钩子，增加加载状态管理和防抖处理

* refactor: 移除未使用的组件文件

* refactor(页面头部): 提取通用 PageHeader 组件并替换各页面头部实现

重构各页面头部为统一的 PageHeader 组件，提高代码复用性和维护性

* style(组件): 调整自动刷新开关和存储选项网格的样式

优化自动刷新开关的文本内边距，重构存储选项网格的布局结构，调整间距和边框样式

* style(ui): 调整时间戳页面和结果视图的样式

- 为时区选择器添加圆角
- 优化结果视图的布局和对齐方式
- 调整结果项的内边距和文本样式

* ci(workflow): 移除Firefox测试以简化CI流程

仅保留Chrome浏览器的构建步骤，减少CI运行时间和资源消耗

* refactor(qrcode): 重构二维码解析功能并提取为独立模块

* style(页面样式): 统一页面头部图标颜色并优化表单样式

更新各页面头部组件的图标颜色配置，移除冗余的表单标签属性，优化输入框样式和按钮悬停效果

* feat(formMapping): 添加表单映射功能

- 创建 FormMappingPage 页面组件
- 实现表单扫描器 scanner.ts
- 实现高亮器 highlighter.ts
- 更新路由配置 routes.ts
- 更新内容脚本 content.ts
- 更新类型定义 storage.d.ts
- 添加 formMappingPageStyles 样式配置

* feat(表单映射): 添加配置导出功能及状态提示

添加配置导出为JSON文件的功能，包含导出按钮和错误处理。新增Snackbar组件用于显示导出成功和错误状态。优化页面布局结构，将状态提示移至全局容器外。

* feat(表单填充): 新增智能表单填充功能

添加智能表单填充功能，包括：
1. 新增表单填充页面和路由配置
2. 实现模糊匹配引擎和智能注入引擎
3. 添加Mock数据生成器和视觉反馈渲染器
4. 扩展消息接口支持填充操作

* ci: 精简触发CI的工作流分支

移除对develop分支及其变体的触发，仅保留main分支的触发

* test: 更新路由测试以匹配新增的路由数量

* test: 将测试文件中的描述和断言翻译为中文

* test(PageHeader): 添加组件测试用例验证渲染逻辑和样式

* refactor(theme): 重构主题样式并优化仪表盘卡片组件

将页面样式配置集中管理，移除各页面中硬编码的背景色
新增 DashboardCard 组件封装通用卡片逻辑
添加 dashboardCards 配置文件统一管理卡片数据

* refactor(Button): 统一按钮样式并移除重复样式定义

将按钮样式统一封装到 Button 组件中，移除各页面重复的样式定义
更新组件文档说明，提供更清晰的用法示例

* docs: 更新 README 文件中的目录结构说明

添加新组件和配置文件的说明，保持文档与代码同步

* refactor: 优化代码类型声明和UI布局

修复类型声明从any改为never以提高类型安全性
调整TimestampPage页面布局间距
移除DashboardPage中不必要的实时时钟状态
更新ESLint配置以使用推荐配置
添加选项页面打开的错误处理

* refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑

将原有的 chrome.runtime.onMessage 和 chrome.tabs.sendMessage 替换为类型安全的 @webext-core/messaging 实现
添加 ProtocolMap 类型定义确保消息类型安全
更新相关页面和后台脚本使用新的消息通信方式

* fix: 修复依赖项缺失导致的潜在问题

修复 useStorageState 中缺少 defaultValue 依赖的问题
重构 RouterProvider 的初始化逻辑，使用 useCallback 优化性能

* refactor: 重构表单识别和消息处理逻辑

将表单映射UI逻辑提取到独立文件
将消息处理器提取到独立文件
将表单识别页面逻辑提取到自定义hook
优化代码结构和可维护性

* feat(侧边栏): 添加侧边栏状态变化通知功能

- 在消息类型中新增侧边栏状态变化枚举和字段
- 侧边栏打开和关闭时发送状态通知
- 替换轮询检查方式为消息监听机制

* refactor: 优化高亮组件渲染逻辑并添加防抖处理

重构高亮组件渲染逻辑，使用 requestAnimationFrame 进行节流优化
在 useStorageCleaner 中添加防抖处理以避免频繁加载

* refactor: 统一组件导出方式为默认导出

* refactor: 重构样式系统并迁移至 MUI 主题

删除冗余的 CSS 文件，统一使用 MUI 主题管理样式
新增 useActiveTabDomain 和 useSidePanelState 自定义 Hook
优化各入口点的主题集成和布局处理

* docs: 更新项目文档以反映新增功能和技术栈细节

更新 AGENTS.md 文档，详细描述新增的功能模块（存储管理、URL 管理、二维码生成、表单工具套件等）和更新的技术栈信息

* feat: 添加错误边界组件以捕获子组件错误

在 popup、sidepanel 和 options 入口点添加 ErrorBoundary 组件，用于捕获并处理子组件中的 JavaScript 错误。当错误发生时，显示友好的错误界面并提供刷新功能。

* refactor(ui): 使用全局 snackbar 替换本地通知组件

重构表单页面中的通知系统，移除本地 Snackbar 和 Alert 组件，改用全局 GlobalSnackbar 组件统一管理通知
标准化主题配置中的 CSS 属性命名，移除带前缀的样式属性

* refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件

将原本分散在各页面的 GlobalSnackbar 组件重构为集中管理的 SnackbarProvider，通过 Context 提供统一的消息提示功能。主要变更包括：

1. 创建新的 SnackbarProvider 组件作为全局消息提示容器
2. 提供 useSnackbar hook 供子组件调用
3. 移除各页面中独立的 GlobalSnackbar 实例
4. 在 App 根组件中统一集成 SnackbarProvider
5. 优化消息提示样式和交互行为

* refactor(Snackbar): 重构消息提示组件并优化样式

重构 Snackbar 组件，将状态管理逻辑提取到 GlobalSnackbar 中复用
优化消息提示样式，调整阴影效果和最小尺寸
统一各页面使用 Snackbar 的方式，移除冗余配置

* refactor: 重构路由和功能配置系统

- 将路由配置和仪表盘卡片配置合并为统一的 features 配置
- 重构 RouterProvider 增加数据校验和本地快照功能
- 优化表单字段识别和填充逻辑，提取公共方法
- 更新相关组件和文档以适配新的配置系统
- 删除废弃的 dashboardCards 和 routes 配置文件

* refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件

重构Snackbar相关代码，将SnackbarProvider合并到GlobalSnackbar组件中，简化代码结构
更新相关组件引用路径，从SnackbarProvider改为GlobalSnackbar
修复StorageCleanerPage禁用状态逻辑问题

* feat(表单映射): 增强高亮器功能并优化元素定位

- 新增高亮器闪烁功能，支持自定义持续时间
- 改进元素定位算法，支持 Shadow DOM 穿透
- 优化拾取模式，支持连续拾取和悬停预览
- 增强错误处理和信息反馈
- 添加测试用例确保核心功能稳定性

* refactor: 移除表单映射相关功能

删除表单映射相关的UI、逻辑和测试代码，包括表单识别、智能填充和高亮功能
简化消息处理逻辑和配置文件，保留核心功能

* feat: 实现页面组件懒加载并优化加载状态显示

refactor: 移除未使用的数据生成和验证工具类

chore: 更新应用图标文件

* refactor(qrcode): 替换二维码生成和解析库以减小体积

使用 qr-scanner 替代 jsqr 进行二维码解析，使用 qrious 替代 qrcode 进行二维码生成
新的库体积更小且性能更好，同时移除了不再使用的 @faker-js/faker 依赖

* feat: 添加在标签页打开功能并优化错误处理

修复测试中的加载状态检查
将控制台日志改为错误捕获
添加全局消息提示组件

* feat: 支持独立标签页模式并重构路由配置

重构路由系统以支持独立标签页模式，替换原有的独立窗口模式
- 新增标签页路由、可见页面列表和页面顺序的存储键
- 修改 RouterProvider 以支持不同窗口类型的独立配置
- 更新选项页面以支持为不同窗口类型单独配置
- 添加相关单元测试

* feat(ui): 优化响应式布局和样式设计

重构选项页面布局，增强移动端适配性
更新主题配置和组件样式，提升用户体验

* refactor: 移除URL工具相关代码

移除不再需要的URL工具功能，包括组件、页面、样式和类型定义

* refactor: 简化页面标题和存储选项网格的响应式布局

* refactor: 优化样式和错误处理

- 简化 chrome.runtime.openOptionsPage 的错误处理
- 拆分 html, body, #root 的样式定义，使用 minHeight 替代 height

* refactor: 重构页面组件结构
- 将页面组件从 entrypoints/popup/pages 移动到 pages 目录
- 更新文档中的路径引用

* style(DashboardPage): 优化仪表盘布局为响应式网格

refactor(ToolCard): 重构工具卡片组件并添加详细注释

* feat: 新增文本统计功能

添加文本统计工具页面及相关功能，包括：
- 文本统计工具页面组件
- 文本统计计算工具函数
- 相关类型定义和样式配置
- 单元测试覆盖核心功能

* feat(jwt): 添加 JWT 解析工具功能

新增 JWT 解析工具页面，包含以下内容：
- 添加 JWT 类型定义和页面样式配置
- 实现 JWT 解析核心功能及测试用例
- 创建 JWT 解析页面组件
- 在功能配置中注册 JWT 工具

* docs: 更新 README 以更清晰地描述项目功能和结构

- 重构功能描述部分，使用更简洁的列表形式展示
- 更新技术栈和项目结构说明
- 优化开发流程部分的描述
- 移除冗余的权限和依赖说明

* docs: 更新AGENTS.md文档以反映项目最新状态

- 重写项目概述和核心命令部分，使其更简洁准确
- 重构目录结构描述，采用更清晰的树状格式
- 移除过时的功能模块描述，聚焦当前核心功能
- 更新AI代理开发准则和权限管理说明
- 优化文档整体结构和可读性

* test: 更新特征计数测试以匹配新增 textStatistics 和 jwt 工具

* style: 统一导入语句顺序

* refactor(pages): 重构工具页面组件结构并优化功能实现

- 将各工具页面组件迁移至独立目录并重构为模块化结构
- 新增存储清理工具相关组件及状态管理逻辑
- 实现时间戳转换工具的自定义hook和UI组件
- 优化JWT解析工具的代码结构和样式
- 更新文本统计工具的性能计算逻辑
- 调整配置文件中的页面引用路径
- 删除无用文件和过时文档

* feat(顶部栏): 添加搜索功能和历史记录

实现顶部栏搜索框功能，支持模糊搜索工具并显示搜索结果列表
添加搜索历史记录功能，自动保存最近搜索并显示
支持键盘导航和选择搜索结果

* feat: 添加多语言支持(i18n)

实现应用的多语言功能，支持中英文切换
添加i18next和相关依赖
创建语言资源文件
更新组件以使用翻译功能
重构文本统计工具页面
完善测试和构建配置

* feat(顶部栏): 添加语言切换功能并优化国际化支持
feat(i18n): 增加语言归一化和同步功能
fix(剪贴板): 使用国际化文本替换剪贴板消息
test(顶部栏): 更新测试以匹配国际化标题

* refactor: 重构组件目录结构，将组件移动到对应功能页面目录

将多个组件从通用组件目录移动到各自功能页面目录下，包括 ToolCard、StorageCleanerConfirm、UrlToQrCodeSection 和 QrCodeToUrlSection。同时新增 Dashboard 页面相关组件 DashboardCard 和 ToolCard，并优化了组件导入路径。

重构旨在提高代码组织性，使组件与其所属功能页面更紧密关联，便于维护和理解代码结构。所有组件功能保持不变，仅调整文件位置和导入路径。

* refactor(Dashboard): 优化卡片组件结构并移除无用属性

重构 DashboardCard 组件接口，直接传递属性而非配置对象
移除 ToolCard 中无用的 hasAI 属性
使用 useMemo 优化可见性判断性能
统一使用 alpha 函数处理颜色透明度

* refactor(timestamp): 合并输入处理函数并优化样式结构

重构时间戳转换器的输入处理逻辑，将 setTsInput 和 setDtInput 合并为统一的 setInput 函数
将组件样式提取到 pageTheme 配置中统一管理
使用 ToggleButtonGroup 替换自定义模式切换器实现
移除不必要的 showMessage 属性传递，改用 useSnackbar 钩子

* refactor(dashboard): 重构仪表盘卡片组件并优化布局

- 删除冗余的 DashboardCard 组件，直接使用 ToolCard
- 将网格布局样式移至主题配置
- 使用 CardActionArea 增强可访问性
- 简化点击事件处理逻辑
- 更新相关测试用例

* refactor(storageCleaner): 重构样式代码并优化国际化处理

将分散的样式代码集中到pageTheme.ts中统一管理
优化组件中的国际化文本引用
修复useStorageCleaner中的状态同步问题
更新测试用例以匹配国际化文本

* refactor(StorageCleaner): 优化条件判断和清理未使用的代码

简化禁用按钮的条件判断逻辑
移除未使用的 resultTimeoutRef 及相关清理代码

* refactor(QrCode): 重构二维码页面样式和组件结构

将内联样式提取到主题配置文件中
移除未使用的全局消息提示依赖
优化组件结构和代码复用
删除未使用的QrCodeUploader组件

* refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色

移除 componentDidCatch 中的冗余 setState 调用
将错误背景色从 'error.shortest' 改为 rgba 格式

* feat(TopBar): 优化顶部导航栏功能并添加样式配置

- 新增 openExtensionPage 工具函数用于打开扩展页面
- 将顶部导航栏样式配置提取到 pageTheme 中统一管理
- 改进搜索历史功能，增加错误处理和配置化限制
- 优化键盘导航和搜索结果的交互逻辑

---------

Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: yll <mtmtchb@outlook.com>

AGENTS.md

@@ -69,11 +69,11 @@ npx vitest run path/to/your.test.ts
 │   └── sidepanel/        # 侧边栏界面主入口
 ├── pages/                # 功能模块页面组件
 │   ├── DashboardPage.tsx # 仪表盘/首页
-│   ├── JwtPage.tsx       # JWT 解析工具
+│   ├── Jwt/index.tsx       # JWT 解析工具
-│   ├── QrCodePage.tsx    # 二维码工具
+│   ├── QrCode/index.tsx    # 二维码工具
-│   ├── StorageCleanerPage.tsx # 存储清理工具
+│   ├── StorageCleaner/index.tsx # 存储清理工具
-│   ├── TextStatisticsPage.tsx # 文本统计工具
+│   ├── TextStatistics/index.tsx # 文本统计工具
-│   └── TimestampPage.tsx # 时间戳转换工具
+│   └── Timestamp/index.tsx # 时间戳转换工具
 ├── providers/            # React Context Providers (Router, Theme 等)
 ├── utils/                # 业务逻辑与工具函数
 │   ├── chromeStorage.ts  # 类型安全的 Chrome Storage 封装

GEMINI.md

@@ -1,83 +0,0 @@
-# Testing Tools Browser Extension - Gemini Instructions
-
-This document provides essential context and instructions for AI agents working on the Testing Tools browser extension project.
-
-## Project Overview
-
-**Testing Tools** is a lightweight, feature-rich browser extension built with the [WXT (Web Extension Toolkit)](https://wxt.dev/) framework. It provides a suite of utilities for developers and testers, including timestamp conversion, storage management, URL shortcuts, and QR code tools.
-
-### Tech Stack
-
-- **Framework:** WXT (Web Extension Toolkit)
-- **Frontend:** React 19 + TypeScript
-- **UI Library:** Material UI (MUI) @7.x
-- **Date Handling:** dayjs (with UTC and timezone plugins)
-- **Messaging:** @webext-core/messaging
-- **Storage:** Type-safe Chrome Storage API wrapper
-- **Testing:** Vitest + Testing Library (jsdom)
-
-### Architecture & Directory Structure
-
-- `entrypoints/`: Extension entry points (popup, options, sidepanel, background, content).
-  - `popup/`: Main UI shown when clicking the extension icon.
-  - `options/`: Extension settings page.
-  - `sidepanel/`: Browser side panel integration.
-  - `background.ts`: Background script for lifecycle management and background tasks.
-  - `content.ts`: Content script injected into web pages.
-- `components/`: Reusable React components.
-- `config/`: Application configuration, including routes and themes.
-- `providers/`: React Context providers (e.g., `RouterProvider`).
-- `utils/`: Utility functions and service abstractions.
-  - `chromeStorage.ts`: Type-safe storage utility.
-- `types/`: Global TypeScript type definitions.
-- `public/`: Static assets (icons, etc.).
-
-## Building and Running
-
-### Development
-
-- `npm run dev`: Start Chrome development mode with HMR.
-- `npm run dev:firefox`: Start Firefox development mode.
-- `npm run compile`: Run TypeScript type checking (`tsc --noEmit`).
-
-### Production
-
-- `npm run build`: Build production version for Chrome.
-- `npm run build:firefox`: Build production version for Firefox.
-- `npm run zip`: Package the extension for Chrome Web Store.
-- `npm run zip:firefox`: Package the extension for Firefox Add-ons.
-
-### Testing & Linting
-
-- `npm run test`: Run all tests once.
-- `npm run test:watch`: Run tests in watch mode.
-- `npm run test:coverage`: Run tests and generate coverage report.
-- `npm run lint`: Run ESLint checks.
-
-## Development Conventions
-
-### Coding Style
-
-- **TypeScript:** Use strict typing. Prefer interfaces for object structures and types for unions/aliases.
-- **Components:** Functional components with Hooks. Use MUI components for consistent UI.
-- **Storage:** Always use `storageUtil` from `@/utils/chromeStorage.ts` for accessing `chrome.storage.local`. Ensure keys are defined in `StorageSchema` in `@/types/storage.d.ts`.
-- **Messaging:** Use `@webext-core/messaging` for communication between entry points. Define message types in `@/utils/messages.ts`.
-
-### Testing Practices
-
-- **Framework:** Vitest with `jsdom` environment.
-- **Location:** Place tests in `__tests__` directories adjacent to the files being tested.
-- **Naming:** Follow `*.test.ts` or `*.test.tsx` naming convention.
-- **Patterns:** Use `@testing-library/react` for component testing. Prefer `user-event` (v14+) for simulating interactions.
-
-### CI/CD
-
-- **GitHub Actions:** CI runs on push/PR to `main` and `develop` branches (lint, compile, test, build).
-- **Releases:** Automatic release to GitHub on pushing a `v*` tag.
-
-## Key Considerations for AI Agents
-
-- **Manifest Permissions:** When adding features that require new browser APIs, update `wxt.config.ts`.
-- **Browser Compatibility:** Ensure features work in both Chrome and Firefox.
-- **React 19:** Be aware of React 19 specific features and deprecations.
-- **WXT Modules:** The project uses `@wxt-dev/module-react`.

components/DashboardCard.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import ToolCard from './ToolCard';
-
-export interface DashboardCardConfig {
-  /** 卡片标题 */
-  title: string;
-  /** 卡片描述文字 */
-  description: string;
-  /** 主题颜色代码 */
-  colorCode: string;
-  /** 图标组件 */
-  icon: React.ReactNode;
-}
-
-interface DashboardCardProps {
-  /** 卡片配置数据 */
-  config: DashboardCardConfig;
-  /** 点击卡片时的回调函数 */
-  onClick: () => void;
-  /** 卡片右侧的实时预览内容（如时间戳显示） */
-  snapshot?: React.ReactNode;
-  /** 卡片背景色，默认使用主题色 */
-  cardBackgroundColor?: string;
-}
-
-/**
- * DashboardCard - 仪表盘卡片组件
- *
- * 基于 ToolCard 的封装，专门用于仪表盘页面
- * 使用 React.memo 避免不必要的重渲染
- */
-const DashboardCard = React.memo(
-  ({ config, onClick, snapshot, cardBackgroundColor }: DashboardCardProps) => (
-    <ToolCard
-      title={config.title}
-      description={config.description}
-      colorCode={config.colorCode}
-      icon={config.icon}
-      onClick={onClick}
-      cardBackgroundColor={cardBackgroundColor}
-      snapshot={snapshot}
-    />
-  ),
-);
-
-export default DashboardCard;

components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { Box, Typography, Button, Paper, Container } from '@mui/material';
+import { Box, Button, Container, Paper, Typography } from '@mui/material';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import RefreshIcon from '@mui/icons-material/Refresh';
 
@@ -16,25 +16,24 @@ interface State {
  * 错误边界组件：捕获子组件树中的 JavaScript 错误
  */
 export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
+  state: State = {
     hasError: false,
     error: null,
   };
 
-  public static getDerivedStateFromError(error: Error): State {
+  static getDerivedStateFromError(error: Error): State {
     return { hasError: true, error };
   }
 
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     console.error('Uncaught error:', error, errorInfo);
   }
 
   private handleReset = () => {
-    this.setState({ hasError: false, error: null });
     window.location.reload();
   };
 
-  public render() {
+  render() {
     if (this.state.hasError) {
       return (
         <Container sx={{ mt: 8 }}>
@@ -46,7 +45,7 @@ export class ErrorBoundary extends Component<Props, State> {
               borderRadius: 4,
               border: '1px solid',
               borderColor: 'error.light',
-              bgcolor: 'error.shortest',
+              bgcolor: 'rgba(211, 47, 47, 0.04)',
             }}
           >
             <ErrorOutlineIcon color="error" sx={{ fontSize: 64, mb: 2 }} />

components/GlobalSnackbar.tsx

@@ -197,24 +197,71 @@ export function GlobalSnackbar({
 }
 
 /**
- * useSnackbarState - 消息提示的状态管理 Hook
+ * useSnackbarState - 消息提示的 Hook 方式
  *
  * 提供状态管理的 Snackbar 功能，自动处理 open、message 等状态。
+ * 适合在组件内部使用，无需额外的状态管理代码。
  *
  * @param {SnackbarOptions} [initialOptions] - 初始配置选项
  * @returns {UseSnackbarStateResult} 包含 snackbarProps 和操作方法的对象
+ *
+ * @description
+ * - 自动管理 Snackbar 的显示/隐藏状态
+ * - 支持链式调用 showMessage
+ * - 合并初始选项和调用时选项
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { snackbarProps, showMessage, closeMessage } = useSnackbarState({
+ *     severity: 'info',
+ *     autoHideDuration: 3000,
+ *   });
+ *
+ *   const handleSave = () => {
+ *     // 业务逻辑...
+ *     showMessage('保存成功！', { severity: 'success' });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleSave}>保存</button>
+ *       <GlobalSnackbar {...snackbarProps} />
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarStateResult {
+  // Snackbar 显示状态
   const [open, setOpen] = useState(false);
+  // 当前显示的消息内容
   const [message, setMessage] = useState('');
+  // 消息配置选项
   const [options, setOptions] = useState<SnackbarOptions>(initialOptions || {});
 
+  /**
+   * 显示消息
+   *
+   * @param {string} newMessage - 要显示的消息文本
+   * @param {SnackbarOptions} [newOptions={}] - 新的配置选项
+   *
+   * @description
+   * - 合并初始选项和新的调用选项
+   * - 新选项会覆盖初始选项
+   */
   const showMessage = (newMessage: string, newOptions: SnackbarOptions = {}) => {
     setMessage(newMessage);
     setOptions({ ...initialOptions, ...newOptions });
     setOpen(true);
   };
 
+  /**
+   * 关闭消息
+   *
+   * @description
+   * - 直接将 open 状态设置为 false
+   */
   const closeMessage = () => {
     setOpen(false);
   };
@@ -224,6 +271,13 @@ export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarS
     closeMessage();
   };
 
+  /**
+   * 传递给 GlobalSnackbar 组件的属性
+   *
+   * @description
+   * - 组合当前状态和选项为完整的组件 props
+   * - onClose 使用 handleClose 包装后的版本
+   */
   const snackbarProps: GlobalSnackbarProps = {
     message,
     open,

components/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Stack, Typography, Box, alpha, SxProps, Theme } from '@mui/material';
+import { alpha, Box, Stack, SxProps, Theme, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 
 /**

components/QrCodeUploader.tsx

@@ -1,381 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Alert,
-  Box,
-  CircularProgress,
-  IconButton,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import ImageIcon from '@mui/icons-material/Image';
-import ClearIcon from '@mui/icons-material/Clear';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-import GlobalSnackbar, { useSnackbarState } from './GlobalSnackbar';
-import CopyButton from './CopyButton';
-import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
-
-interface QrCodeUploaderProps {
-  onQrCodeDetected?: (data: string) => void;
-  supportedFormats?: string[];
-  maxFileSize?: number; // in bytes
-  timeout?: number; // in milliseconds
-  showPreview?: boolean;
-  showProgress?: boolean;
-  className?: string;
-}
-
-const QrCodeUploader: React.FC<QrCodeUploaderProps> = ({
-  onQrCodeDetected,
-  supportedFormats = ['image/png', 'image/jpeg', 'image/webp'],
-  maxFileSize = 5 * 1024 * 1024, // 5MB
-  showPreview = true,
-  showProgress = true,
-  className,
-}) => {
-  const { snackbarProps, showMessage } = useSnackbarState({ autoHideDuration: 3000 });
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const [file, setFile] = useState<File | null>(null);
-  const [preview, setPreview] = useState<string | null>(null);
-  const [uploading, setUploading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [result, setResult] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [dragging, setDragging] = useState(false);
-
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const uploadAreaRef = useRef<HTMLDivElement>(null);
-
-  // 清理预览 URL
-  useEffect(() => {
-    return () => {
-      if (preview) {
-        URL.revokeObjectURL(preview);
-      }
-    };
-  }, [preview]);
-
-  // 处理文件
-  const processFile = useCallback(
-    async (file: File) => {
-      setUploading(true);
-      setProgress(0);
-
-      try {
-        const progressInterval = setInterval(() => {
-          setProgress((prev) => {
-            if (prev >= 90) {
-              clearInterval(progressInterval);
-              return prev;
-            }
-            return prev + 10;
-          });
-        }, 200);
-
-        const result = await parseQrCodeFromFile(file);
-
-        clearInterval(progressInterval);
-        setProgress(100);
-
-        if (result.success && result.data) {
-          setResult(result.data);
-          showMessage('二维码解析成功', { severity: 'success' });
-          if (onQrCodeDetected) {
-            onQrCodeDetected(result.data);
-          }
-        } else {
-          setError(result.error || '未检测到二维码');
-          showMessage(result.error || '未检测到二维码', { severity: 'error' });
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : '解析失败');
-        showMessage('解析失败: ' + (err instanceof Error ? err.message : '未知错误'), {
-          severity: 'error',
-        });
-      } finally {
-        setUploading(false);
-        setTimeout(() => setProgress(0), 500);
-      }
-    },
-    [showMessage, onQrCodeDetected],
-  );
-
-  // 处理文件
-  const handleFile = useCallback(
-    (selectedFile: File) => {
-      // 检查文件格式
-      if (!supportedFormats.includes(selectedFile.type)) {
-        setError(
-          `不支持的文件格式。支持的格式: ${supportedFormats.map((f) => f.split('/')[1].toUpperCase()).join(', ')}`,
-        );
-        showMessage('不支持的文件格式', { severity: 'error' });
-        return;
-      }
-
-      // 检查文件大小
-      if (selectedFile.size > maxFileSize) {
-        const maxSizeMB = (maxFileSize / (1024 * 1024)).toFixed(1);
-        setError(`文件大小超过限制。最大支持 ${maxSizeMB}MB`);
-        showMessage(`文件大小超过限制，最大支持 ${maxSizeMB}MB`, { severity: 'error' });
-        return;
-      }
-
-      // 重置状态
-      setError(null);
-      setResult(null);
-      setFile(selectedFile);
-
-      // 创建预览
-      if (showPreview) {
-        const previewUrl = URL.createObjectURL(selectedFile);
-        setPreview(previewUrl);
-      }
-
-      // 开始处理
-      processFile(selectedFile).catch(console.error);
-    },
-    [supportedFormats, maxFileSize, showPreview, showMessage, processFile],
-  );
-
-  // 处理文件选择
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = e.target.files?.[0];
-    if (selectedFile) {
-      handleFile(selectedFile);
-    }
-  };
-
-  // 处理拖拽事件
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setDragging(true);
-  };
-
-  const handleDragLeave = () => {
-    setDragging(false);
-  };
-
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setDragging(false);
-    const droppedFile = e.dataTransfer.files?.[0];
-    if (droppedFile) {
-      handleFile(droppedFile);
-    }
-  };
-
-  // 监听粘贴事件
-  useEffect(() => {
-    const handlePaste = (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 pastedFile = items[i].getAsFile();
-          if (pastedFile) {
-            handleFile(pastedFile);
-          }
-          break;
-        }
-      }
-    };
-
-    document.addEventListener('paste', handlePaste);
-    return () => document.removeEventListener('paste', handlePaste);
-  }, [handleFile]);
-
-  // 清除文件
-  const handleClear = () => {
-    setFile(null);
-    setPreview(null);
-    setResult(null);
-    setError(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  return (
-    <Box className={className}>
-      {/* 上传区域 */}
-      <Paper
-        ref={uploadAreaRef}
-        elevation={0}
-        sx={{
-          p: isMobile ? 3 : 4,
-          borderRadius: 4,
-          border: `2px dashed ${dragging ? 'primary.main' : 'grey.300'}`,
-          bgcolor: dragging ? 'primary.lighter' : 'grey.50',
-          transition: 'all 0.2s ease',
-          textAlign: 'center',
-          cursor: 'pointer',
-          position: 'relative',
-        }}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        onClick={() => fileInputRef.current?.click()}
-      >
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept={supportedFormats.join(',')}
-          onChange={handleFileSelect}
-          style={{ display: 'none' }}
-        />
-
-        {!file && !uploading ? (
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <ImageIcon sx={{ fontSize: isMobile ? 36 : 48, color: 'grey.400', mb: 2 }} />
-            <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
-              点击、拖拽或粘贴上传二维码图片
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
-              支持 {supportedFormats.map((f) => f.split('/')[1].toUpperCase()).join(', ')} 格式
-            </Typography>
-            <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
-              最大文件大小: {(maxFileSize / (1024 * 1024)).toFixed(1)}MB
-            </Typography>
-          </Box>
-        ) : file && showPreview && preview ? (
-          <Box sx={{ position: 'relative' }}>
-            <img
-              src={preview}
-              alt="QR Code Preview"
-              style={{
-                maxWidth: '100%',
-                maxHeight: 200,
-                borderRadius: 8,
-                objectFit: 'contain',
-              }}
-            />
-            <IconButton
-              size="small"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleClear();
-              }}
-              sx={{
-                position: 'absolute',
-                top: -8,
-                right: -8,
-                bgcolor: 'rgba(244, 67, 54, 0.9)',
-                color: 'white',
-                '&:hover': {
-                  bgcolor: 'rgba(211, 47, 47, 0.95)',
-                },
-              }}
-            >
-              <ClearIcon fontSize="small" />
-            </IconButton>
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
-              {file.name}
-            </Typography>
-          </Box>
-        ) : uploading && showProgress ? (
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <CircularProgress size={48} sx={{ mb: 2 }} />
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-              处理中...
-            </Typography>
-            {progress > 0 && (
-              <Box sx={{ width: '80%', mt: 2 }}>
-                <Box
-                  sx={{
-                    height: 8,
-                    bgcolor: 'grey.200',
-                    borderRadius: 4,
-                    overflow: 'hidden',
-                  }}
-                >
-                  <Box
-                    sx={{
-                      height: '100%',
-                      bgcolor: 'primary.main',
-                      width: `${progress}%`,
-                      transition: 'width 0.3s ease',
-                    }}
-                  />
-                </Box>
-                <Typography
-                  variant="caption"
-                  color="text.secondary"
-                  sx={{ mt: 1, display: 'block' }}
-                >
-                  {progress}%
-                </Typography>
-              </Box>
-            )}
-          </Box>
-        ) : null}
-      </Paper>
-
-      {/* 结果展示 */}
-      {(result || error) && (
-        <Box sx={{ mt: 3 }}>
-          {result && (
-            <Paper
-              elevation={0}
-              sx={{
-                p: 3,
-                borderRadius: 4,
-                border: '1px solid',
-                borderColor: 'success.light',
-                bgcolor: 'success.lighter',
-              }}
-            >
-              <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
-                <CheckCircleIcon sx={{ color: 'success.main', mt: 0.5 }} />
-                <Box sx={{ flex: 1 }}>
-                  <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
-                    二维码内容
-                  </Typography>
-                  <Box sx={{ position: 'relative' }}>
-                    <Typography
-                      variant="body1"
-                      sx={{
-                        fontFamily: 'monospace',
-                        wordBreak: 'break-all',
-                        pr: 8,
-                      }}
-                    >
-                      {result}
-                    </Typography>
-                    <CopyButton
-                      text={result}
-                      tooltip="复制"
-                      size="small"
-                      color="success"
-                      showMessage={showMessage}
-                      style={{
-                        position: 'absolute',
-                        right: 0,
-                        top: 0,
-                      }}
-                    />
-                  </Box>
-                </Box>
-              </Box>
-            </Paper>
-          )}
-
-          {error && (
-            <Alert severity="error" sx={{ borderRadius: 4 }} icon={<ErrorIcon />}>
-              {error}
-            </Alert>
-          )}
-        </Box>
-      )}
-
-      <GlobalSnackbar {...snackbarProps} />
-    </Box>
-  );
-};
-
-export default QrCodeUploader;

components/RouterContainer.tsx

@@ -1,7 +1,7 @@
 import { Box, CircularProgress } from '@mui/material';
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
-import { useMemo, Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 export default function RouterContainer() {
   const { currentPage, isLoaded } = useRouter();

components/StorageCleanerConfirm.tsx

@@ -1,169 +0,0 @@
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Typography,
-  Box,
-  Chip,
-  alpha,
-} from '@mui/material';
-import type { StorageCleanerOptions } from '@/types/storage';
-import Button from '@/components/Button';
-import { storageCleanerPageStyles, THEME_COLORS } from '@/config/pageTheme';
-
-export interface StorageCleanerConfirmProps {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  options: StorageCleanerOptions;
-}
-
-const STORAGE_LABELS: Record<keyof StorageCleanerOptions, string> = {
-  localStorage: 'LocalStorage',
-  sessionStorage: 'Session Storage',
-  indexedDB: 'IndexedDB',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
-export function StorageCleanerConfirm({
-  open,
-  onClose,
-  onConfirm,
-  options,
-}: StorageCleanerConfirmProps) {
-  const selectedOptions = Object.entries(options)
-    .filter(([_, value]) => value)
-    .map(([key, _]) => STORAGE_LABELS[key as keyof StorageCleanerOptions] || key);
-
-  return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      fullWidth
-      maxWidth="xs"
-      slotProps={{
-        paper: {
-          sx: {
-            borderRadius: 6,
-            backgroundImage: 'none',
-            boxShadow: `0 24px 64px -12px ${alpha(THEME_COLORS.black, 0.18)}`,
-            p: 1.5,
-            bgcolor: 'background.paper',
-          },
-        },
-      }}
-    >
-      <DialogTitle
-        sx={{
-          textAlign: 'center',
-          pt: 4,
-          pb: 1,
-          fontWeight: 900,
-          letterSpacing: '-0.5px',
-          fontSize: '1.35rem',
-          color: 'text.primary',
-        }}
-      >
-        确认清理数据？
-      </DialogTitle>
-
-      <DialogContent sx={{ textAlign: 'center', pb: 2 }}>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{ mb: 3.5, fontWeight: 500, fontSize: '0.9rem' }}
-        >
-          您将永久删除当前页面的以下选定存储项。
-        </Typography>
-
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.2, justifyContent: 'center', mb: 4 }}>
-          {selectedOptions.map((label) => (
-            <Chip
-              key={label}
-              label={label}
-              size="small"
-              sx={{
-                bgcolor: alpha(THEME_COLORS.warning, 0.04),
-                fontWeight: 700,
-                color: THEME_COLORS.warning,
-                fontSize: '0.75rem',
-                border: '1px solid',
-                borderColor: alpha(THEME_COLORS.warning, 0.15),
-                borderRadius: 2.5,
-                height: 'auto',
-                '& .MuiChip-label': { px: 1.2, py: 0.6 },
-              }}
-            />
-          ))}
-        </Box>
-
-        <Box
-          sx={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            bgcolor: alpha(THEME_COLORS.error, 0.05),
-            color: THEME_COLORS.error,
-            px: 2,
-            py: 0.8,
-            borderRadius: 3,
-            border: '1px dashed',
-            borderColor: alpha(THEME_COLORS.error, 0.2),
-          }}
-        >
-          <Typography
-            variant="caption"
-            sx={{
-              fontWeight: 800,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              fontSize: '0.75rem',
-            }}
-          >
-            <span role="img" aria-label="warning">
-              ⚠️
-            </span>{' '}
-            此操作不可撤销
-          </Typography>
-        </Box>
-      </DialogContent>
-
-      <DialogActions sx={{ p: 3, pt: 1, gap: 2 }}>
-        <Button
-          variant="text"
-          onClick={onClose}
-          fullWidth
-          sx={{
-            boxShadow: '0 0 1px 1px rgba(0, 0, 0, 0.1)',
-            color: 'text.secondary',
-            '&:hover': {
-              bgcolor: 'grey.100',
-              color: 'text.primary',
-            },
-          }}
-        >
-          取消
-        </Button>
-        <Button
-          variant="contained"
-          onClick={onConfirm}
-          fullWidth
-          sx={{
-            bgcolor: storageCleanerPageStyles.warningColor,
-            '&:hover': {
-              bgcolor: storageCleanerPageStyles.warningDark,
-            },
-          }}
-        >
-          确认清理
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-
-export default StorageCleanerConfirm;

components/ToolCard.tsx

@@ -1,154 +0,0 @@
-/**
- * ToolCard 组件 - 工具卡片
- *
- * 用于在仪表盘中展示各个工具功能的卡片组件，支持图标、标题、描述、
- * AI 标识和快照内容展示，具备悬停动画效果。
- */
-import { Box, Typography, Stack } from '@mui/material';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; // Sparkles for AI
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import React from 'react';
-
-/**
- * ToolCard 组件属性接口
- */
-interface ToolCardProps {
-  /** 工具卡片标题 */
-  title: string;
-  /** 工具卡片描述文本（可选） */
-  description?: string;
-  /** 快照内容，用于在卡片底部展示额外信息（可选） */
-  snapshot?: React.ReactNode;
-  /** 主题色代码，用于图标背景和悬停效果 */
-  colorCode: string;
-  /** 工具图标元素 */
-  icon: React.ReactNode;
-  /** 卡片点击事件处理函数 */
-  onClick: () => void;
-  /** 是否显示 AI 标识（可选） */
-  hasAI?: boolean;
-  /** 卡片背景色，默认为 'background.paper' */
-  cardBackgroundColor?: string;
-}
-
-/**
- * ToolCard 组件
- *
- * @param props - ToolCardProps 属性对象
- * @returns 工具卡片 JSX 元素
- */
-export default function ToolCard({
-  title,
-  description,
-  snapshot,
-  colorCode,
-  icon,
-  onClick,
-  hasAI,
-  cardBackgroundColor = 'background.paper',
-}: ToolCardProps) {
-  return (
-    <Box
-      onClick={onClick}
-      sx={{
-        position: 'relative',
-        bgcolor: cardBackgroundColor,
-        borderRadius: 4,
-        p: 2.5,
-        cursor: 'pointer',
-        border: '1px solid',
-        borderColor: 'grey.100',
-        height: '100%',
-        boxSizing: 'border-box',
-        // 使用 cubic-bezier 缓动函数实现平滑的过渡动画
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1.5,
-        // 悬停效果：边框变色、向上位移、添加阴影
-        '&:hover': {
-          borderColor: colorCode,
-          transform: 'translateY(-4px)',
-          // 阴影颜色为主题色的 20% 透明度（十六进制后两位 33 约等于 20%）
-          boxShadow: `0 12px 24px -10px ${colorCode}33`,
-          // 悬停时箭头图标右移并变色
-          '& .arrow-icon': {
-            transform: 'translateX(4px)',
-            color: colorCode,
-          },
-        },
-      }}
-    >
-      <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
-        <Stack direction="row" spacing={1.5} alignItems="center">
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: 40,
-              height: 40,
-              borderRadius: 3,
-              // 图标背景色为主题色的 7% 透明度（十六进制后两位 11 约等于 7%）
-              bgcolor: `${colorCode}11`,
-              color: colorCode,
-            }}
-          >
-            {icon}
-          </Box>
-          <Box>
-            <Typography
-              variant="subtitle1"
-              sx={{
-                fontWeight: 700,
-                lineHeight: 1.2,
-                color: 'text.primary',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 0.5,
-              }}
-            >
-              {title}
-              {hasAI && <AutoAwesomeIcon sx={{ fontSize: 14, color: '#f5b041' }} />}
-            </Typography>
-            {description && (
-              <Typography
-                variant="caption"
-                sx={{
-                  color: 'text.secondary',
-                  fontWeight: 500,
-                  display: 'block',
-                  mt: 0.5,
-                }}
-              >
-                {description}
-              </Typography>
-            )}
-          </Box>
-        </Stack>
-        <ArrowForwardIosIcon
-          className="arrow-icon"
-          sx={{
-            fontSize: 12,
-            color: 'grey.300',
-            mt: 0.5,
-            transition: 'all 0.3s ease',
-          }}
-        />
-      </Stack>
-
-      {snapshot && (
-        <Box
-          sx={{
-            mt: 'auto',
-            pt: 1.5,
-            borderTop: '1px dashed',
-            borderColor: 'grey.100',
-          }}
-        >
-          {snapshot}
-        </Box>
-      )}
-    </Box>
-  );
-}

components/TopBar.tsx

@@ -1,18 +1,146 @@
-import { Box, IconButton, Typography, Stack, Tooltip } from '@mui/material';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import {
+  Box,
+  IconButton,
+  Stack,
+  Tooltip,
+  Typography,
+  InputBase,
+  Paper,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ClickAwayListener,
+} from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import SearchIcon from '@mui/icons-material/Search';
+import HistoryIcon from '@mui/icons-material/History';
+import CloseIcon from '@mui/icons-material/Close';
+import LanguageIcon from '@mui/icons-material/Language';
 import { useRouter } from '@/providers/RouterProvider';
+import { FEATURES, FeatureConfig } from '@/config/features';
+import { storageUtil } from '@/utils/chromeStorage';
+import { openExtensionPage } from '@/utils/chromeTabs';
+import { useTranslation } from 'react-i18next';
+import { SUPPORTED_LANGUAGES, normalizeLanguage } from '@/i18n';
+import { topBarStyles } from '@/config/pageTheme';
 
 export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
-  const { currentPage, goBack } = useRouter();
+  const { currentPage, goBack, navigateTo } = useRouter();
+  const { t, i18n } = useTranslation(['common', 'features']);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showResults, setShowResults] = useState(false);
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleOpenInTab = () => {
+  // 加载搜索历史
-    // 在新标签页中打开扩展页面
+  useEffect(() => {
-    chrome.tabs.create({ url: chrome.runtime.getURL('popup.html?mode=tab') }).catch(console.error);
+    storageUtil
+      .get('app/searchHistory', [])
+      .then((history) => {
+        setSearchHistory(history || []);
+      })
+      .catch((error) => {
+        console.error('加载搜索历史失败:', error);
+      });
+  }, []);
+
+  // 模糊搜索逻辑
+  const searchResults = useMemo(() => {
+    if (!searchQuery.trim()) return [];
+    const query = searchQuery.toLowerCase();
+    return FEATURES.filter((f) => {
+      if (f.key === 'dashboard') return false;
+      const label = t(f.labelKey).toLowerCase();
+      const desc = t(f.descriptionKey).toLowerCase();
+      return label.includes(query) || desc.includes(query);
+    });
+  }, [searchQuery, t]);
+
+  const displayedHistory = useMemo(() => {
+    if (searchQuery.trim()) return [];
+    return searchHistory.slice(0, topBarStyles.SEARCH_HISTORY_DISPLAY);
+  }, [searchHistory, searchQuery]);
+
+  const handleOpenInTab = async () => {
+    await openExtensionPage('popup.html', { mode: 'tab' });
     window.close();
   };
 
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setShowResults(true);
+    setSelectedIndex(-1);
+  };
+
+  const saveToHistory = async (query: string) => {
+    if (!query.trim()) return;
+    setSearchHistory((prev) => {
+      const newHistory = [query, ...prev.filter((h) => h !== query)].slice(
+        0,
+        topBarStyles.SEARCH_HISTORY_LIMIT,
+      );
+      storageUtil.set('app/searchHistory', newHistory).catch((error) => {
+        console.error('保存搜索历史失败:', error);
+      });
+      return newHistory;
+    });
+  };
+
+  const handleSelectFeature = (feature: FeatureConfig) => {
+    navigateTo(feature.key);
+    saveToHistory(t(feature.labelKey));
+    setSearchQuery('');
+    setShowResults(false);
+  };
+
+  const toggleLanguage = async () => {
+    const currentLng = normalizeLanguage(i18n.language);
+    const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
+    const nextIndex = (currentIndex + 1) % SUPPORTED_LANGUAGES.length;
+    const newLng = SUPPORTED_LANGUAGES[nextIndex];
+    await i18n.changeLanguage(newLng);
+    await storageUtil.set('app/language', newLng);
+  };
+
+  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') {
+      if (selectedIndex >= 0) {
+        if (searchQuery.trim()) {
+          handleSelectFeature(searchResults[selectedIndex]);
+        } else {
+          const selectedQuery = displayedHistory[selectedIndex];
+          setSearchQuery(selectedQuery);
+          setSelectedIndex(-1);
+          // 触发搜索：如果匹配到功能则跳转，否则保持搜索词展示结果
+          const matchedFeature = FEATURES.find(
+            (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
+          );
+          if (matchedFeature) {
+            handleSelectFeature(matchedFeature);
+          }
+        }
+      } 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 (
@@ -21,12 +149,13 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       justifyContent="space-between"
       alignItems="center"
       sx={{
-        px: { xs: 1.5, sm: 2 },
+        px: { xs: 1, sm: 2 },
         py: 1.5,
         borderBottom: '1px solid',
         borderColor: 'grey.100',
         bgcolor: 'background.paper',
-        zIndex: 1100,
+        zIndex: topBarStyles.Z_INDEX,
+        position: 'relative',
       }}
     >
       <Box sx={{ width: { xs: 32, sm: 40 } }}>
@@ -34,6 +163,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           <IconButton
             size="small"
             onClick={goBack}
+            aria-label={t('common:buttons.back')}
             sx={{
               bgcolor: 'grey.50',
               '&:hover': { bgcolor: 'grey.200' },
@@ -52,23 +182,165 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           textTransform: 'uppercase',
           fontSize: '0.75rem',
           color: 'text.secondary',
+          ml: 1,
+          display: { xs: 'none', md: 'block' },
         }}
       >
-        Testing Tools
+        {t('common:appName')}
       </Typography>
 
+      <Box sx={{ flex: 1, mx: { xs: 1, sm: 2 }, position: 'relative', maxWidth: 400 }}>
+        <ClickAwayListener onClickAway={() => setShowResults(false)}>
+          <Box>
+            <InputBase
+              ref={inputRef}
+              placeholder={t('common:buttons.search')}
+              value={searchQuery}
+              onChange={handleSearchChange}
+              onFocus={() => setShowResults(true)}
+              onKeyDown={handleKeyDown}
+              inputProps={{ 'aria-label': t('common:buttons.search') }}
+              startAdornment={<SearchIcon sx={{ color: 'text.disabled', mr: 1, fontSize: 20 }} />}
+              endAdornment={
+                searchQuery && (
+                  <IconButton
+                    size="small"
+                    onClick={() => {
+                      setSearchQuery('');
+                      setSelectedIndex(-1);
+                    }}
+                    aria-label={t('common:buttons.clearSearch')}
+                  >
+                    <CloseIcon sx={{ fontSize: 16 }} />
+                  </IconButton>
+                )
+              }
+              sx={{
+                width: '100%',
+                bgcolor: 'grey.50',
+                px: 1.5,
+                py: 0.5,
+                borderRadius: 2,
+                fontSize: '0.875rem',
+                border: '1px solid transparent',
+                transition: 'all 0.2s',
+                '&:hover': { bgcolor: 'grey.100' },
+                '&.Mui-focused': {
+                  bgcolor: 'background.paper',
+                  borderColor: 'primary.main',
+                  boxShadow: '0 0 0 2px rgba(25, 118, 210, 0.1)',
+                },
+              }}
+            />
+
+            {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
+              <Paper
+                elevation={8}
+                sx={{
+                  position: 'absolute',
+                  top: '100%',
+                  left: 0,
+                  right: 0,
+                  mt: 1,
+                  maxHeight: topBarStyles.DROPDOWN_MAX_HEIGHT,
+                  overflow: 'auto',
+                  borderRadius: 2,
+                  zIndex: topBarStyles.DROPDOWN_Z_INDEX,
+                }}
+              >
+                <List disablePadding role="listbox">
+                  {searchQuery.trim() ? (
+                    searchResults.length > 0 ? (
+                      searchResults.map((feature, index) => (
+                        <ListItemButton
+                          key={feature.key}
+                          selected={selectedIndex === index}
+                          onClick={() => handleSelectFeature(feature)}
+                          role="option"
+                          aria-selected={selectedIndex === index}
+                          sx={{ py: 1 }}
+                        >
+                          <ListItemIcon sx={{ minWidth: 40 }}>{feature.icon}</ListItemIcon>
+                          <ListItemText
+                            primary={t(feature.labelKey)}
+                            secondary={t(feature.descriptionKey)}
+                            primaryTypographyProps={{ variant: 'body2', fontWeight: 600 }}
+                            secondaryTypographyProps={{ variant: 'caption', noWrap: true }}
+                          />
+                        </ListItemButton>
+                      ))
+                    ) : (
+                      <Box sx={{ py: 3, textAlign: 'center' }}>
+                        <Typography variant="body2" color="text.secondary">
+                          {t('common:buttons.noResults')}
+                        </Typography>
+                      </Box>
+                    )
+                  ) : (
+                    <>
+                      <Box sx={{ px: 2, py: 1 }}>
+                        <Typography variant="caption" fontWeight={700} color="text.disabled">
+                          {t('common:buttons.recentSearch')}
+                        </Typography>
+                      </Box>
+                      {displayedHistory.map((item, index) => (
+                        <ListItemButton
+                          key={item}
+                          selected={selectedIndex === index}
+                          onClick={() => {
+                            setSearchQuery(item);
+                            setSelectedIndex(-1);
+                          }}
+                          role="option"
+                          aria-selected={selectedIndex === index}
+                        >
+                          <ListItemIcon sx={{ minWidth: 40 }}>
+                            <HistoryIcon sx={{ fontSize: 18, color: 'text.disabled' }} />
+                          </ListItemIcon>
+                          <ListItemText
+                            primary={item}
+                            primaryTypographyProps={{ variant: 'body2' }}
+                          />
+                        </ListItemButton>
+                      ))}
+                    </>
+                  )}
+                </List>
+              </Paper>
+            )}
+          </Box>
+        </ClickAwayListener>
+      </Box>
+
       <Stack
         direction="row"
         spacing={0.5}
-        sx={{ width: { xs: 80, sm: 120 }, justifyContent: 'flex-end' }}
+        sx={{ width: { xs: 100, sm: 150 }, justifyContent: 'flex-end' }}
+      >
+        <Tooltip title={t('common:buttons.toggleLanguage')}>
+          <IconButton
+            size="small"
+            onClick={toggleLanguage}
+            aria-label={t('common:buttons.toggleLanguage')}
+          >
+            <LanguageIcon sx={{ fontSize: 18 }} />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title={t('common:buttons.openInTab')}>
+          <IconButton
+            size="small"
+            onClick={handleOpenInTab}
+            aria-label={t('common:buttons.openInTab')}
           >
-        <Tooltip title="在标签页打开">
-          <IconButton size="small" onClick={handleOpenInTab}>
             <OpenInNewIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </Tooltip>
-        <Tooltip title="设置">
+        <Tooltip title={t('common:buttons.settings')}>
-          <IconButton size="small" onClick={onOpenOptions}>
+          <IconButton
+            size="small"
+            onClick={onOpenOptions}
+            aria-label={t('common:buttons.settings')}
+          >
             <SettingsIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </Tooltip>

components/UrlToQrCodeSection.tsx

@@ -1,224 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  Stack,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  CircularProgress,
-} from '@mui/material';
-import QrCodeIcon from '@mui/icons-material/QrCode';
-import DownloadIcon from '@mui/icons-material/Download';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import QRious from 'qrious';
-import { qrCodePageStyles } from '@/config/pageTheme';
-import type { SnackbarOptions } from '@/components/GlobalSnackbar';
-import { copyImageToClipboard } from '@/utils/clipboard';
-
-interface UrlToQrCodeSectionProps {
-  expanded: boolean;
-  onExpandedChange: (expanded: boolean) => void;
-  showMessage: (message: string, options?: SnackbarOptions) => void;
-}
-
-const UrlToQrCodeSection = ({
-  expanded,
-  onExpandedChange,
-  showMessage,
-}: UrlToQrCodeSectionProps) => {
-  const [urlInput, setUrlInput] = useState('');
-  const [urlError, setUrlError] = useState('');
-  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
-  const [generating, setGenerating] = useState(false);
-
-  const handleUrlInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUrlInput(e.target.value);
-    setUrlError('');
-  };
-
-  const generateQrCode = async () => {
-    if (!urlInput) {
-      setUrlError('请输入 URL');
-      return;
-    }
-
-    try {
-      setGenerating(true);
-      setUrlError('');
-
-      let url = urlInput;
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        url = 'https://' + url;
-      }
-
-      // 使用 QRious 替代 qrcode 库，体积更小
-      const qr = new QRious({
-        value: url,
-        size: 250,
-        level: 'H',
-        foreground: qrCodePageStyles.black,
-        background: qrCodePageStyles.white,
-      });
-
-      setQrCodeDataUrl(qr.toDataURL());
-      showMessage('二维码生成成功', { severity: 'success', autoHideDuration: 1000 });
-    } catch (error) {
-      console.error('生成二维码失败:', error);
-      showMessage('生成二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
-    } finally {
-      setGenerating(false);
-    }
-  };
-
-  const downloadQrCode = () => {
-    if (!qrCodeDataUrl) return;
-
-    const link = document.createElement('a');
-    link.href = qrCodeDataUrl;
-    link.download = 'qrcode.png';
-    link.click();
-    showMessage('二维码下载成功', { severity: 'success' });
-  };
-
-  const copyQrCode = async () => {
-    if (!qrCodeDataUrl) return;
-
-    const response = await fetch(qrCodeDataUrl);
-    const blob = await response.blob();
-    await copyImageToClipboard(blob)
-      .then(() => {
-        showMessage('二维码已复制到剪贴板', { severity: 'success' });
-      })
-      .catch(() => {
-        showMessage('复制二维码失败，请重试', { severity: 'error' });
-      });
-  };
-
-  return (
-    <Accordion
-      expanded={expanded}
-      onChange={(_, isExpanded) => onExpandedChange(isExpanded)}
-      sx={{
-        borderRadius: 4,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-        '&:before': { display: 'none' },
-      }}
-    >
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          <QrCodeIcon color="primary" />
-          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-            URL 转二维码
-          </Typography>
-        </Box>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Stack spacing={3}>
-          <TextField
-            label="输入 URL"
-            placeholder="https://example.com"
-            value={urlInput}
-            onChange={handleUrlInputChange}
-            fullWidth
-            variant="outlined"
-            error={!!urlError}
-            helperText={urlError}
-            sx={qrCodePageStyles.INPUT_STYLE}
-          />
-
-          <Button
-            variant="contained"
-            startIcon={generating ? <CircularProgress size={16} color="inherit" /> : <QrCodeIcon />}
-            onClick={generateQrCode}
-            disabled={generating}
-            sx={{
-              py: 1.2,
-              borderRadius: 3,
-              bgcolor: qrCodePageStyles.successColor,
-              fontWeight: 700,
-              '&:hover': {
-                bgcolor: qrCodePageStyles.successDark,
-              },
-            }}
-          >
-            {generating ? '生成中...' : '生成二维码'}
-          </Button>
-
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-              minHeight: 200,
-              border: '2px dashed',
-              borderColor: 'grey.200',
-              borderRadius: 3,
-              p: 2,
-              bgcolor: 'grey.50',
-            }}
-          >
-            {qrCodeDataUrl ? (
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  width: '100%',
-                }}
-              >
-                <img
-                  src={qrCodeDataUrl}
-                  alt="QR Code"
-                  style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
-                />
-                <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
-                  <Button
-                    variant="outlined"
-                    startIcon={<DownloadIcon />}
-                    onClick={downloadQrCode}
-                    sx={{
-                      borderRadius: 2,
-                      borderColor: qrCodePageStyles.successColor,
-                      color: qrCodePageStyles.successColor,
-                      '&:hover': {
-                        borderColor: qrCodePageStyles.successDark,
-                        bgcolor: 'rgba(76, 175, 80, 0.05)',
-                      },
-                    }}
-                  >
-                    下载二维码
-                  </Button>
-                  <Button
-                    variant="contained"
-                    startIcon={<ContentCopyIcon />}
-                    onClick={copyQrCode}
-                    sx={{
-                      borderRadius: 2,
-                      bgcolor: qrCodePageStyles.successColor,
-                      '&:hover': {
-                        bgcolor: qrCodePageStyles.successDark,
-                      },
-                    }}
-                  >
-                    复制二维码
-                  </Button>
-                </Box>
-              </Box>
-            ) : (
-              <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
-                二维码将显示在这里
-              </Typography>
-            )}
-          </Box>
-        </Stack>
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-export default UrlToQrCodeSection;

components/__tests__/Button.test.tsx

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
-import Button from '../Button';
+import Button from '@/components/Button';
 
 describe('Button 组件', () => {
   beforeEach(() => {

components/__tests__/GlobalSnackbar.test.tsx

@@ -1,13 +1,13 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, act, renderHook } from '@testing-library/react';
+import { act, render, renderHook, screen } from '@testing-library/react';
 import React from 'react';
 import {
   GlobalSnackbar,
-  useSnackbarState,
-  useSnackbar,
-  SnackbarProvider,
   type GlobalSnackbarProps,
-} from '../GlobalSnackbar';
+  SnackbarProvider,
+  useSnackbar,
+  useSnackbarState,
+} from '@/components/GlobalSnackbar';
 
 describe('GlobalSnackbar 组件系统', () => {
   const mockOnClose = vi.fn();

components/__tests__/PageHeader.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CloseIcon from '@mui/icons-material/Close';
 import { render, screen } from '@testing-library/react';
-import PageHeader, { type PageHeaderProps } from '../PageHeader';
+import PageHeader, { type PageHeaderProps } from '@/components/PageHeader';
 
 describe('PageHeader 组件系统', () => {
   beforeEach(() => {

components/__tests__/RouterContainer.test.tsx

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import RouterContainer from '../RouterContainer';
+import RouterContainer from '@/components/RouterContainer';
 import { RouterProvider } from '@/providers/RouterProvider';
 import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import type { PageType } from '@/types/storage';

components/__tests__/StorageCleanerConfirm.test.tsx

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
-import { StorageCleanerConfirm } from '../StorageCleanerConfirm';
+import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
 import type { StorageCleanerOptions } from '@/types/storage';
 import React from 'react';
 
@@ -36,25 +36,27 @@ describe('StorageCleanerConfirm 组件', () => {
   describe('渲染测试', () => {
     it('open 为 true 时应渲染对话框', () => {
       renderComponent();
-      expect(screen.getByText('确认清理数据？')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:confirmTitle')).toBeInTheDocument();
     });
 
     it('应显示警告信息', () => {
       renderComponent();
-      expect(screen.getByText(/此操作不可撤销/i)).toBeInTheDocument();
+      expect(screen.getByText(/storageCleaner:irreversible/i)).toBeInTheDocument();
     });
 
     it('应将选中的选项显示为标签', () => {
       renderComponent();
-      expect(screen.getByText('LocalStorage')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.localStorage')).toBeInTheDocument();
-      expect(screen.getByText('Session Storage')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.sessionStorage')).toBeInTheDocument();
-      expect(screen.getByText('Cookies')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.cookies')).toBeInTheDocument();
     });
 
     it('应显示取消和确认按钮', () => {
       renderComponent();
-      expect(screen.getByRole('button', { name: /取消/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /common:buttons.cancel/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /确认清理/i })).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /storageCleaner:confirmAction/i }),
+      ).toBeInTheDocument();
     });
   });
 
@@ -62,7 +64,7 @@ describe('StorageCleanerConfirm 组件', () => {
     it('点击取消时应调用 onClose', () => {
       renderComponent();
 
-      fireEvent.click(screen.getByRole('button', { name: /取消/i }));
+      fireEvent.click(screen.getByRole('button', { name: /common:buttons.cancel/i }));
       expect(mockOnClose).toHaveBeenCalledTimes(1);
       expect(mockOnConfirm).not.toHaveBeenCalled();
     });
@@ -70,7 +72,7 @@ describe('StorageCleanerConfirm 组件', () => {
     it('点击确认时应调用 onConfirm', () => {
       renderComponent();
 
-      fireEvent.click(screen.getByRole('button', { name: /确认清理/i }));
+      fireEvent.click(screen.getByRole('button', { name: /storageCleaner:confirmAction/i }));
       expect(mockOnConfirm).toHaveBeenCalledTimes(1);
       expect(mockOnClose).not.toHaveBeenCalled();
     });
@@ -89,10 +91,10 @@ describe('StorageCleanerConfirm 组件', () => {
 
       renderComponent({ options: partialOptions });
 
-      expect(screen.getByText('LocalStorage')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.localStorage')).toBeInTheDocument();
-      expect(screen.getByText('IndexedDB')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.indexedDB')).toBeInTheDocument();
-      expect(screen.queryByText('Session Storage')).not.toBeInTheDocument();
+      expect(screen.queryByText('storageCleaner:options.sessionStorage')).not.toBeInTheDocument();
-      expect(screen.queryByText('Cookies')).not.toBeInTheDocument();
+      expect(screen.queryByText('storageCleaner:options.cookies')).not.toBeInTheDocument();
     });
 
     it('应处理空选项', () => {
@@ -115,7 +117,7 @@ describe('StorageCleanerConfirm 组件', () => {
   describe('对话框行为测试', () => {
     it('open 为 false 时不应渲染', () => {
       renderComponent({ open: false });
-      expect(screen.queryByText('确认清理数据？')).not.toBeInTheDocument();
+      expect(screen.queryByText('storageCleaner:confirmTitle')).not.toBeInTheDocument();
     });
 
     it('应使用不同选项渲染', () => {
@@ -130,8 +132,8 @@ describe('StorageCleanerConfirm 组件', () => {
 
       renderComponent({ options: customOptions });
 
-      expect(screen.getByText('Session Storage')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.sessionStorage')).toBeInTheDocument();
-      expect(screen.getByText('Cookies')).toBeInTheDocument();
+      expect(screen.getByText('storageCleaner:options.cookies')).toBeInTheDocument();
     });
   });
 });

components/__tests__/ToolCard.test.tsx

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
-import ToolCard from '../ToolCard';
+import ToolCard from '@/pages/Dashboard/ToolCard';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 
 describe('ToolCard 组件', () => {
@@ -76,37 +76,20 @@ describe('ToolCard 组件', () => {
 
       expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
     });
-  });
 
-  describe('AI 徽章测试', () => {
+    it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
-    it('hasAI 为 true 时应渲染 AI 徽章', () => {
       render(
         <ToolCard
-          title="AI 工具"
+          title="可聚焦"
-          hasAI={true}
           colorCode="#2196f3"
           icon={<AccessTimeIcon />}
           onClick={() => {}}
         />,
       );
 
-      const autoAwesomeIcon = screen.getByTestId('AutoAwesomeIcon');
+      const button = screen.getByRole('button', { name: /可聚焦/ });
-      expect(autoAwesomeIcon).toBeInTheDocument();
+      expect(button).toBeInTheDocument();
-    });
+      expect(button).toHaveAttribute('tabIndex', '0');
-
-    it('hasAI 为 false 时不应渲染 AI 徽章', () => {
-      render(
-        <ToolCard
-          title="普通工具"
-          hasAI={false}
-          colorCode="#2196f3"
-          icon={<AccessTimeIcon />}
-          onClick={() => {}}
-        />,
-      );
-
-      const autoAwesomeIcon = screen.queryByTestId('AutoAwesomeIcon');
-      expect(autoAwesomeIcon).not.toBeInTheDocument();
     });
   });
 
@@ -122,10 +105,25 @@ describe('ToolCard 组件', () => {
         />,
       );
 
-      const card = screen.getByText('可点击').closest('.MuiBox-root');
+      const button = screen.getByRole('button', { name: /可点击/ });
-      if (card) {
+      fireEvent.click(button);
-        fireEvent.click(card);
+
-      }
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('按 Enter 键时应调用 onClick', () => {
+      const handleClick = vi.fn();
+      render(
+        <ToolCard
+          title="键盘可触发"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={handleClick}
+        />,
+      );
+
+      const button = screen.getByRole('button', { name: /键盘可触发/ });
+      fireEvent.click(button);
 
       expect(handleClick).toHaveBeenCalledTimes(1);
     });
@@ -134,17 +132,16 @@ describe('ToolCard 组件', () => {
   describe('样式测试', () => {
     it('应应用自定义颜色代码', () => {
       const customColor = '#ff5722';
-      const { container } = render(
+      render(
         <ToolCard
           title="自定义颜色"
           colorCode={customColor}
-          icon={<AccessTimeIcon />}
+          icon={<AccessTimeIcon data-testid="custom-color-icon" />}
           onClick={() => {}}
         />,
       );
 
-      const iconContainer = container.querySelector('.MuiBox-root > div');
+      expect(screen.getByTestId('custom-color-icon')).toBeInTheDocument();
-      expect(iconContainer).toBeInTheDocument();
     });
   });
 });

components/__tests__/TopBar.test.tsx

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
-import TopBar from '../TopBar';
+import TopBar from '@/components/TopBar';
 import { RouterProvider } from '@/providers/RouterProvider';
 import type { PageType } from '@/types/storage';
 import React from 'react';
@@ -35,7 +35,7 @@ describe('TopBar 组件', () => {
   describe('渲染测试', () => {
     it('应使用默认标题渲染', () => {
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByText('Testing Tools')).toBeInTheDocument();
+      expect(screen.getByText('common:appName')).toBeInTheDocument();
     });
 
     it('不在 dashboard 时应渲染返回按钮', () => {

config/__tests__/features.test.ts

@@ -5,7 +5,7 @@ import {
   getDefaultPageOrder,
   getDefaultVisibleFeatureKeys,
   getFeatureByKey,
-} from '../features';
+} from '@/config/features';
 
 describe('features', () => {
   describe('FEATURES', () => {
@@ -16,13 +16,13 @@ describe('features', () => {
     it('should have all required properties for each feature', () => {
       FEATURES.forEach((feature) => {
         expect(feature).toHaveProperty('key');
-        expect(feature).toHaveProperty('label');
+        expect(feature).toHaveProperty('labelKey');
-        expect(feature).toHaveProperty('description');
+        expect(feature).toHaveProperty('descriptionKey');
         expect(feature).toHaveProperty('defaultVisible');
         expect(feature).toHaveProperty('components');
         expect(typeof feature.key).toBe('string');
-        expect(typeof feature.label).toBe('string');
+        expect(typeof feature.labelKey).toBe('string');
-        expect(typeof feature.description).toBe('string');
+        expect(typeof feature.descriptionKey).toBe('string');
         expect(typeof feature.defaultVisible).toBe('boolean');
         expect(typeof feature.components).toBe('object');
         expect(feature.components).toHaveProperty('popup');
@@ -50,14 +50,14 @@ describe('features', () => {
       const feature = getFeatureByKey('dashboard');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('dashboard');
-      expect(feature?.label).toBe('Dashboard');
+      expect(feature?.labelKey).toBe('features:dashboard.title');
     });
 
     it('should return timestamp feature', () => {
       const feature = getFeatureByKey('timestamp');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('timestamp');
-      expect(feature?.label).toBe('时间戳');
+      expect(feature?.labelKey).toBe('features:timestamp.title');
       expect(feature?.themeColor).toBeDefined();
     });
 
@@ -65,7 +65,7 @@ describe('features', () => {
       const feature = getFeatureByKey('storageCleaner');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('storageCleaner');
-      expect(feature?.label).toBe('存储清理');
+      expect(feature?.labelKey).toBe('features:storageCleaner.title');
     });
 
     it('should return undefined for invalid key', () => {

config/features.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, lazy } from 'react';
+import { type ComponentType, lazy, ReactNode } from 'react';
 import type { PageType } from '@/types/storage';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import StorageIcon from '@mui/icons-material/Storage';
@@ -9,12 +9,12 @@ import VpnKeyIcon from '@mui/icons-material/VpnKey';
 import { THEME_COLORS } from './pageTheme';
 
 // 懒加载页面组件
-const DashboardPage = lazy(() => import('@/pages/DashboardPage'));
+const DashboardPage = lazy(() => import('@/pages/Dashboard'));
-const TimestampPage = lazy(() => import('@/pages/TimestampPage'));
+const TimestampPage = lazy(() => import('@/pages/Timestamp'));
-const StorageCleanerPage = lazy(() => import('@/pages/StorageCleanerPage'));
+const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
-const QrCodePage = lazy(() => import('@/pages/QrCodePage'));
+const QrCodePage = lazy(() => import('@/pages/QrCode'));
-const TextStatisticsPage = lazy(() => import('@/pages/TextStatisticsPage'));
+const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
-const JwtPage = lazy(() => import('@/pages/JwtPage'));
+const JwtPage = lazy(() => import('@/pages/Jwt'));
 
 /**
  * 功能配置接口
@@ -24,10 +24,10 @@ const JwtPage = lazy(() => import('@/pages/JwtPage'));
 export interface FeatureConfig {
   /** 页面类型标识 */
   key: PageType;
-  /** 功能名称（用于路由标签和卡片标题） */
+  /** 功能名称翻译键 */
-  label: string;
+  labelKey: string;
-  /** 功能描述（用于仪表盘卡片） */
+  /** 功能描述翻译键 */
-  description: string;
+  descriptionKey: string;
   /** 主题颜色（用于仪表盘卡片） */
   themeColor?: string;
   /** 图标组件（用于仪表盘卡片） */
@@ -37,19 +37,19 @@ export interface FeatureConfig {
   /** 不同显示模式对应的组件 */
   components: {
     /** 弹窗模式组件 */
-    popup: React.ComponentType;
+    popup: ComponentType;
     /** 侧边栏模式组件 */
-    sidepanel: React.ComponentType;
+    sidepanel: ComponentType;
     /** 标签页模式组件 */
-    tab: React.ComponentType;
+    tab: ComponentType;
   };
 }
 
 export const FEATURES: FeatureConfig[] = [
   {
     key: 'dashboard',
-    label: 'Dashboard',
+    labelKey: 'features:dashboard.title',
-    description: '',
+    descriptionKey: '',
     defaultVisible: true,
     components: {
       popup: DashboardPage,
@@ -59,8 +59,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'timestamp',
-    label: '时间戳',
+    labelKey: 'features:timestamp.title',
-    description: 'Unix 毫秒数转换与格式化',
+    descriptionKey: 'features:timestamp.description',
     themeColor: THEME_COLORS.primary,
     icon: <AccessTimeIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
@@ -72,8 +72,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'storageCleaner',
-    label: '存储清理',
+    labelKey: 'features:storageCleaner.title',
-    description: '清理缓存、Cookies 及本地存储',
+    descriptionKey: 'features:storageCleaner.description',
     themeColor: THEME_COLORS.warning,
     icon: <StorageIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
@@ -85,8 +85,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'qrCode',
-    label: '二维码工具',
+    labelKey: 'features:qrCode.title',
-    description: '生成当前选中的 URL 的二维码',
+    descriptionKey: 'features:qrCode.description',
     themeColor: THEME_COLORS.success,
     icon: <QrCodeIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
@@ -98,8 +98,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'textStatistics',
-    label: '文本统计',
+    labelKey: 'features:textStatistics.title',
-    description: '实时分析文本字符、单词及字节',
+    descriptionKey: 'features:textStatistics.description',
     themeColor: THEME_COLORS.purple,
     icon: <DescriptionIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
@@ -111,8 +111,8 @@ export const FEATURES: FeatureConfig[] = [
   },
   {
     key: 'jwt',
-    label: 'JWT 解析',
+    labelKey: 'features:jwt.title',
-    description: 'JSON Web Token 解码与查看',
+    descriptionKey: 'features:jwt.description',
     themeColor: THEME_COLORS.indigo,
     icon: <VpnKeyIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,

config/pageTheme.ts

@@ -104,6 +104,11 @@ export const timestampPageStyles = {
       fontWeight: 600,
     },
   },
+  SELECT_MENU_PROPS: {
+    PaperProps: {
+      sx: { borderRadius: 3, mt: 1, boxShadow: '0 12px 32px rgba(0,0,0,0.1)' },
+    },
+  },
   cardBg: alpha(THEME_COLORS.primary, 0.04),
   cardBorder: alpha(THEME_COLORS.primary, 0.1),
   switcherBg: alpha(THEME_COLORS.primary, 0.08),
@@ -111,6 +116,161 @@ export const timestampPageStyles = {
   mutedText: alpha(THEME_COLORS.primary, 0.4),
   resultBg: alpha(THEME_COLORS.primary, 0.05),
   buttonHover: `0 8px 24px ${alpha(THEME_COLORS.primary, 0.2)}`,
+  /** 模式切换器 (ToggleButtonGroup) 样式 */
+  MODE_SWITCHER: {
+    width: '100%',
+    mb: 2.5,
+    borderRadius: 4,
+    bgcolor: 'grey.100',
+    border: '1px solid',
+    borderColor: 'grey.200',
+    p: 0.6,
+    '& .MuiToggleButtonGroup-grouped': {
+      flex: 1,
+      border: 'none',
+      borderRadius: 3.5,
+      py: 1,
+      fontWeight: 800,
+      fontSize: '0.75rem',
+      color: 'text.secondary',
+      transition: 'color 0.3s',
+      '&.Mui-selected': {
+        bgcolor: '#fff',
+        color: 'primary.main',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+      },
+    },
+  },
+  /** 单位切换器样式 */
+  UNIT_SWITCHER_CONTAINER: {
+    flex: 1,
+    display: 'flex',
+    bgcolor: 'grey.50',
+    p: 0.5,
+    borderRadius: 3.5,
+    border: '1px solid',
+    borderColor: 'grey.100',
+  },
+  UNIT_SWITCHER_ITEM: (active: boolean) => ({
+    flex: 1,
+    py: 0.8,
+    textAlign: 'center',
+    borderRadius: 3,
+    cursor: 'pointer',
+    fontSize: '0.75rem',
+    fontWeight: 800,
+    transition: 'all 0.2s',
+    bgcolor: active ? '#fff' : 'transparent',
+    color: active ? 'primary.main' : 'text.disabled',
+    boxShadow: active ? '0 2px 8px rgba(0,0,0,0.05)' : 'none',
+  }),
+  /** LiveClock 卡片样式 */
+  LIVE_CLOCK_CARD: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    gap: 1.5,
+    p: 1.8,
+    mb: 2.5,
+    bgcolor: alpha(THEME_COLORS.primary, 0.04),
+    borderRadius: 4,
+    border: '1px solid',
+    borderColor: alpha(THEME_COLORS.primary, 0.1),
+  },
+  LIVE_CLOCK_LABEL: {
+    color: THEME_COLORS.primary,
+    fontWeight: 800,
+    fontSize: '0.6rem',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  LIVE_CLOCK_VALUE: {
+    fontWeight: 800,
+    color: THEME_COLORS.primary,
+    fontFamily: 'monospace',
+    fontSize: { xs: '1.1rem', sm: '1.2rem' },
+    letterSpacing: '-0.5px',
+    lineHeight: 1.2,
+  },
+  LIVE_CLOCK_UNIT_SWITCHER: {
+    display: 'flex',
+    p: 0.4,
+    bgcolor: alpha(THEME_COLORS.primary, 0.08),
+    borderRadius: 2.5,
+    border: '1px solid',
+    borderColor: alpha(THEME_COLORS.primary, 0.1),
+  },
+  LIVE_CLOCK_UNIT_ITEM: (active: boolean) => ({
+    px: { xs: 1, sm: 1.2 },
+    py: 0.35,
+    borderRadius: 2,
+    cursor: 'pointer',
+    fontSize: '0.65rem',
+    fontWeight: 900,
+    transition: 'all 0.2s',
+    bgcolor: active ? '#fff' : 'transparent',
+    color: active ? 'primary.main' : alpha(THEME_COLORS.primary, 0.4),
+    boxShadow: active ? '0 2px 6px rgba(33, 150, 243, 0.2)' : 'none',
+  }),
+  LIVE_CLOCK_ICON_BUTTON: {
+    color: THEME_COLORS.primary,
+    bgcolor: '#fff',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+    '&:hover': { bgcolor: THEME_COLORS.primary, color: '#fff' },
+  },
+  LIVE_CLOCK_DIVIDER: {
+    mx: 0.5,
+    my: 1,
+    borderColor: alpha(THEME_COLORS.primary, 0.1),
+  },
+  /** ResultView 样式 */
+  RESULT_LABEL: {
+    color: 'text.secondary',
+    mb: 1.2,
+    display: 'block',
+    fontWeight: 800,
+    fontSize: '0.7rem',
+  },
+  RESULT_MAIN_BOX: {
+    bgcolor: alpha(THEME_COLORS.primary, 0.05),
+    p: 2,
+    borderRadius: 4,
+    position: 'relative',
+    mb: 2.5,
+    border: '1px solid',
+    borderColor: alpha(THEME_COLORS.primary, 0.1),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  RESULT_MAIN_TEXT: {
+    fontFamily: 'monospace',
+    fontWeight: 700,
+    color: THEME_COLORS.primary,
+    wordBreak: 'break-all',
+    pr: 4,
+    fontSize: '1rem',
+  },
+  RESULT_EXTRA_STACK: {
+    bgcolor: alpha(THEME_COLORS.primary, 0.05),
+    p: 2,
+    borderRadius: 4,
+    border: '1px solid',
+    borderColor: alpha(THEME_COLORS.primary, 0.1),
+  },
+  RESULT_EXTRA_LABEL: {
+    color: 'text.disabled',
+    fontWeight: 700,
+    fontSize: '0.65rem',
+    pr: 4,
+  },
+  RESULT_EXTRA_VALUE: {
+    fontFamily: 'monospace',
+    color: THEME_COLORS.primary,
+    fontWeight: 600,
+    fontSize: '0.65rem',
+  },
 } as const;
 
 /**
@@ -123,6 +283,260 @@ export const storageCleanerPageStyles = {
   warningBorder: `1px solid ${alpha(THEME_COLORS.warning, 0.2)}`,
   errorBorder: `1px solid ${alpha(THEME_COLORS.error, 0.2)}`,
   errorBg: alpha(THEME_COLORS.error, 0.05),
+  /** 选项网格容器 */
+  OPTIONS_GRID_CONTAINER: {
+    mb: 3,
+    border: '1px solid',
+    borderColor: 'grey.100',
+    borderRadius: 4,
+    bgcolor: 'background.paper',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
+    transition: 'all 0.2s',
+    overflow: 'hidden',
+    '&:hover': {
+      boxShadow: '0 6px 16px rgba(0, 0, 0, 0.08)',
+    },
+  },
+  OPTIONS_GRID_FOOTER: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    px: 2.7,
+    py: 0.8,
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+    transition: 'all 0.2s',
+    '&:hover': {
+      bgcolor: 'rgba(0, 0, 0, 0.04)',
+    },
+  },
+  OPTIONS_GRID_CHECKBOX: {
+    p: 0.6,
+    mr: 0,
+    '& .MuiSvgIcon-root': {
+      fontSize: 18,
+      transition: 'transform 0.2s',
+    },
+    '&:hover .MuiSvgIcon-root': {
+      transform: 'scale(1.1)',
+    },
+  },
+  /** 选项项 */
+  OPTION_ITEM: (checked: boolean) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    py: 1,
+    px: { xs: 1, sm: 1.5 },
+    borderRadius: 3,
+    transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+    bgcolor: checked ? alpha(THEME_COLORS.warning, 0.05) : 'transparent',
+    border: `1px solid ${checked ? alpha(THEME_COLORS.warning, 0.2) : 'transparent'}`,
+    '&:hover': {
+      bgcolor: checked ? alpha(THEME_COLORS.warning, 0.1) : 'rgba(0, 0, 0, 0.02)',
+      transform: 'translateY(-1px)',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+    },
+  }),
+  OPTION_ITEM_LABEL: (checked: boolean) => ({
+    fontSize: '0.75rem',
+    display: 'block',
+    lineHeight: 1.2,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    transition: 'color 0.2s',
+    color: checked ? THEME_COLORS.warning : 'text.primary',
+  }),
+  OPTION_ITEM_SIZE: {
+    color: 'text.secondary',
+    fontSize: '0.65rem',
+    fontWeight: 600,
+    display: 'block',
+    mt: 0.3,
+    lineHeight: 1,
+    whiteSpace: 'nowrap',
+    opacity: 0.8,
+  },
+  OPTION_ITEM_NO_DATA: {
+    color: 'grey.400',
+    fontSize: '0.65rem',
+    fontWeight: 500,
+    display: 'block',
+    mt: 0.3,
+    lineHeight: 1,
+    fontStyle: 'italic',
+  },
+  OPTION_ITEM_CHECKBOX: {
+    p: 0.6,
+    '& .MuiSvgIcon-root': {
+      fontSize: 18,
+      transition: 'transform 0.2s',
+    },
+    '&:hover .MuiSvgIcon-root': {
+      transform: 'scale(1.1)',
+    },
+  },
+  /** 自动刷新切换 */
+  AUTO_REFRESH_CONTAINER: {
+    mb: 3,
+    p: 1.5,
+    borderRadius: 4,
+    bgcolor: 'background.paper',
+    border: '1px solid',
+    borderColor: 'grey.100',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+    transition: 'all 0.2s',
+    '&:hover': {
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+    },
+  },
+  AUTO_REFRESH_SWITCH: {
+    '& .MuiSwitch-track': {
+      borderRadius: 20,
+    },
+    '& .MuiSwitch-thumb': {
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+      transition: 'all 0.2s',
+    },
+    '&:hover .MuiSwitch-thumb': {
+      transform: 'scale(1.1)',
+    },
+  },
+  /** DomainHeader */
+  DOMAIN_HEADER_BADGE: {
+    bgcolor: alpha(THEME_COLORS.warning, 0.15),
+    color: THEME_COLORS.warning,
+    px: 1.5,
+    py: 0.3,
+    borderRadius: 2,
+    fontWeight: 800,
+    fontSize: '0.7rem',
+    boxShadow: `0 2px 4px ${alpha(THEME_COLORS.warning, 0.2)}`,
+    transition: 'all 0.2s',
+    '&:hover': {
+      bgcolor: alpha(THEME_COLORS.warning, 0.25),
+    },
+  },
+  DOMAIN_HEADER_ICON: {
+    p: 1.2,
+    borderRadius: 3,
+    boxShadow: `0 2px 8px ${alpha(THEME_COLORS.warning, 0.15)}`,
+    transition: 'all 0.2s',
+    '&:hover': {
+      bgcolor: alpha(THEME_COLORS.warning, 0.15),
+      transform: 'scale(1.05)',
+    },
+  },
+  /** ErrorDisplay */
+  ERROR_DISPLAY_CONTAINER: {
+    py: 8,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: { xs: 'auto', sm: '400px' },
+    textAlign: 'center',
+  },
+  ERROR_DISPLAY_BOX: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    p: 4,
+    boxShadow: `0 8px 24px ${alpha(THEME_COLORS.error, 0.15)}`,
+    border: `1px solid ${alpha(THEME_COLORS.error, 0.2)}`,
+    bgcolor: alpha(THEME_COLORS.error, 0.05),
+  },
+  /** CleaningResult */
+  CLEANING_RESULT_ALERT: {
+    borderRadius: 3,
+    py: 1,
+    px: 2,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+    '& .MuiAlert-message': {
+      fontSize: '0.8rem',
+      fontWeight: 600,
+      lineHeight: 1.4,
+    },
+    '& .MuiAlert-icon': {
+      fontSize: '1.2rem',
+      mr: 1,
+    },
+  },
+  /** StorageCleanerConfirm Dialog */
+  CONFIRM_DIALOG_PAPER: {
+    borderRadius: 6,
+    backgroundImage: 'none',
+    boxShadow: `0 24px 64px -12px ${alpha(THEME_COLORS.black, 0.18)}`,
+    p: 1.5,
+    bgcolor: 'background.paper',
+  },
+  CONFIRM_DIALOG_TITLE: {
+    textAlign: 'center',
+    pt: 4,
+    pb: 1,
+    fontWeight: 900,
+    letterSpacing: '-0.5px',
+    fontSize: '1.35rem',
+    color: 'text.primary',
+  },
+  CONFIRM_DIALOG_CONTENT: {
+    textAlign: 'center',
+    pb: 2,
+  },
+  CONFIRM_DIALOG_DESC: {
+    mb: 3.5,
+    fontWeight: 500,
+    fontSize: '0.9rem',
+  },
+  CONFIRM_DIALOG_CHIP: {
+    bgcolor: alpha(THEME_COLORS.warning, 0.04),
+    fontWeight: 700,
+    color: THEME_COLORS.warning,
+    fontSize: '0.75rem',
+    border: '1px solid',
+    borderColor: alpha(THEME_COLORS.warning, 0.15),
+    borderRadius: 2.5,
+    height: 'auto',
+    '& .MuiChip-label': { px: 1.2, py: 0.6 },
+  },
+  CONFIRM_DIALOG_WARNING_BOX: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 1,
+    bgcolor: alpha(THEME_COLORS.error, 0.05),
+    color: THEME_COLORS.error,
+    px: 2,
+    py: 0.8,
+    borderRadius: 3,
+    border: '1px dashed',
+    borderColor: alpha(THEME_COLORS.error, 0.2),
+  },
+  CONFIRM_DIALOG_WARNING_TEXT: {
+    fontWeight: 800,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.5,
+    fontSize: '0.75rem',
+  },
+  CONFIRM_DIALOG_CANCEL: {
+    boxShadow: '0 0 1px 1px rgba(0, 0, 0, 0.1)',
+    color: 'text.secondary',
+    '&:hover': {
+      bgcolor: 'grey.100',
+      color: 'text.primary',
+    },
+  },
+  CONFIRM_DIALOG_CONFIRM: {
+    bgcolor: THEME_COLORS.warning,
+    '&:hover': {
+      bgcolor: THEME_COLORS.warningDark,
+    },
+  },
 } as const;
 
 /**
@@ -136,6 +550,149 @@ export const qrCodePageStyles = {
   successDark: THEME_COLORS.successDark,
   white: THEME_COLORS.white,
   black: THEME_COLORS.black,
+  /** 加载状态容器 */
+  LOADING_CONTAINER: {
+    py: 4,
+    maxWidth: 400,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 200,
+  } as const,
+  /** Accordion 容器 */
+  ACCORDION: {
+    borderRadius: 4,
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+    '&:before': { display: 'none' },
+  } as const,
+  ACCORDION_SUMMARY: {
+    borderBottom: 'none',
+  } as const,
+  ACCORDION_TITLE_ICON: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 2,
+  } as const,
+  ACCORDION_TITLE_TEXT: {
+    fontWeight: 700,
+  } as const,
+  /** 主操作按钮（生成/解析） */
+  PRIMARY_BUTTON: {
+    py: 1.2,
+    borderRadius: 3,
+    bgcolor: THEME_COLORS.success,
+    fontWeight: 700,
+    '&:hover': {
+      bgcolor: THEME_COLORS.successDark,
+    },
+  } as const,
+  /** 二维码展示区域 */
+  QR_PREVIEW_CONTAINER: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 200,
+    border: '2px dashed',
+    borderColor: 'grey.200',
+    borderRadius: 3,
+    p: 2,
+    bgcolor: 'grey.50',
+  } as const,
+  QR_PREVIEW_INNER: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+  } as const,
+  QR_PREVIEW_IMAGE: {
+    maxWidth: '100%',
+    height: 'auto',
+    display: 'block',
+  } as const,
+  QR_PREVIEW_ACTIONS: {
+    display: 'flex',
+    gap: 1,
+    mt: 2,
+  } as const,
+  /** 下载按钮 */
+  DOWNLOAD_BUTTON: {
+    borderRadius: 2,
+    borderColor: THEME_COLORS.success,
+    color: THEME_COLORS.success,
+    '&:hover': {
+      borderColor: THEME_COLORS.successDark,
+      bgcolor: alpha(THEME_COLORS.success, 0.05),
+    },
+  } as const,
+  /** 复制按钮 */
+  COPY_BUTTON: {
+    borderRadius: 2,
+    bgcolor: THEME_COLORS.success,
+    '&:hover': {
+      bgcolor: THEME_COLORS.successDark,
+    },
+  } as const,
+  /** 拖拽上传区域 */
+  DROPZONE: (dragging: boolean, hasFile: boolean) =>
+    ({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 200,
+      border: '2px dashed',
+      borderColor: dragging || hasFile ? THEME_COLORS.success : 'grey.200',
+      borderRadius: 3,
+      p: 4,
+      bgcolor: dragging
+        ? alpha(THEME_COLORS.success, 0.1)
+        : hasFile
+          ? alpha(THEME_COLORS.success, 0.05)
+          : 'grey.50',
+      cursor: 'pointer',
+      transition: 'all 0.2s',
+      '&:hover': {
+        borderColor: THEME_COLORS.success,
+        bgcolor: alpha(THEME_COLORS.success, 0.05),
+      },
+    }) as const,
+  /** 图片预览容器 */
+  IMAGE_PREVIEW_WRAPPER: {
+    textAlign: 'center',
+    width: '100%',
+    position: 'relative',
+  } as const,
+  IMAGE_PREVIEW_BOX: {
+    position: 'relative',
+    display: 'inline-block',
+  } as const,
+  IMAGE_PREVIEW_IMG: {
+    maxWidth: '100%',
+    maxHeight: 160,
+    borderRadius: 8,
+    objectFit: 'contain',
+  } as const,
+  /** 清除按钮 */
+  CLEAR_BUTTON: {
+    position: 'absolute',
+    top: -8,
+    right: -8,
+    bgcolor: alpha(THEME_COLORS.error, 0.9),
+    color: 'white',
+    '&:hover': {
+      bgcolor: alpha(THEME_COLORS.errorDark, 0.95),
+    },
+  } as const,
+  /** 结果输入框 */
+  RESULT_INPUT: {
+    position: 'relative',
+    mt: 2,
+  } as const,
+  /** 提示文本 */
+  PLACEHOLDER_TEXT: {
+    textAlign: 'center',
+  } as const,
   INPUT_STYLE: {},
 } as const;
 
@@ -146,6 +703,15 @@ export const dashboardPageStyles = {
   primaryColor: THEME_COLORS.primary,
   backgroundColor: '#f5f5f5',
   cardBackgroundColor: '#ffffff',
+  GRID_CONTAINER: {
+    display: 'grid',
+    gridTemplateColumns: {
+      xs: '1fr',
+      sm: 'repeat(auto-fill, minmax(300px, 1fr))',
+    },
+    gap: 2,
+    p: 2,
+  },
 } as const;
 
 /**
@@ -184,6 +750,21 @@ export const textStatisticsPageStyles = {
   cardBorder: alpha(THEME_COLORS.purple, 0.1),
 } as const;
 
+/**
+ * JWT 解析工具页面样式
+ */
+/**
+ * TopBar 组件样式
+ */
+export const topBarStyles = {
+  SEARCH_MAX_WIDTH: 400,
+  DROPDOWN_MAX_HEIGHT: 300,
+  Z_INDEX: 1100,
+  DROPDOWN_Z_INDEX: 1200,
+  SEARCH_HISTORY_LIMIT: 10,
+  SEARCH_HISTORY_DISPLAY: 5,
+} as const;
+
 /**
  * JWT 解析工具页面样式
  */

entrypoints/options/App.tsx

@@ -1,17 +1,17 @@
-import { useState, useEffect, useMemo } from 'react';
+import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
 import {
+  alpha,
   Box,
-  Typography,
-  Paper,
-  Switch,
   Button,
   CircularProgress,
-  Stack,
-  IconButton,
-  Tabs,
-  Tab,
-  alpha,
   Divider,
+  IconButton,
+  Paper,
+  Stack,
+  Switch,
+  Tab,
+  Tabs,
+  Typography,
 } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -21,14 +21,15 @@ import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import type { PageType, StorageSchema } from '@/types/storage';
 import { storageUtil } from '@/utils/chromeStorage';
 import {
-  getFeatureByKey,
   getDefaultPageOrder,
   getDefaultVisibleFeatureKeys,
+  getFeatureByKey,
 } from '@/config/features';
 import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import PageHeader from '@/components/PageHeader';
 import { THEME_COLORS } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
 
 type WindowType = 'popup' | 'sidepanel' | 'tab';
 
@@ -37,6 +38,7 @@ type WindowType = 'popup' | 'sidepanel' | 'tab';
  * 支持对不同窗口入口的功能显示和排序进行独立配置
  */
 export default function App() {
+  const { t } = useTranslation(['features', 'common']);
   // 从 URL 参数中初始化当前的 Tab 类型
   const initialWindowType = useMemo(() => {
     if (typeof window === 'undefined') return 'popup';
@@ -127,7 +129,8 @@ export default function App() {
       await storageUtil.set(configKeys.visible, newPages);
       setVisiblePages(newPages);
       const feature = getFeatureByKey(page);
-      showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${feature?.label || page}`, 'success');
+      const label = feature ? t(feature.labelKey) : page;
+      showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${label}`, 'success');
     } catch (error) {
       console.error('Failed to save config:', error);
       showToast('保存失败', 'warning');
@@ -176,7 +179,7 @@ export default function App() {
     }
   };
 
-  const handleWindowTypeChange = (_event: React.SyntheticEvent, newType: WindowType) => {
+  const handleWindowTypeChange = (_event: SyntheticEvent, newType: WindowType) => {
     if (newType !== null) {
       setWindowType(newType);
     }
@@ -186,6 +189,16 @@ export default function App() {
     showMessage(message, { severity });
   };
 
+  if (!isLoaded) {
+    return (
+      <Box
+        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}
+      >
+        <CircularProgress size={24} />
+      </Box>
+    );
+  }
+
   return (
     <Box
       className="app"
@@ -347,7 +360,7 @@ export default function App() {
                                 mb: 0.5,
                               }}
                             >
-                              {feature.label}
+                              {t(feature.labelKey)}
                             </Typography>
                             <Typography
                               variant="caption"
@@ -360,7 +373,7 @@ export default function App() {
                                 whiteSpace: 'nowrap',
                               }}
                             >
-                              {feature.description || '暂无描述'}
+                              {feature.descriptionKey ? t(feature.descriptionKey) : '暂无描述'}
                             </Typography>
                           </Box>
                         </Stack>

entrypoints/options/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '@/config/theme';
+import '@/i18n';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

entrypoints/popup/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '@/config/theme';
+import '@/i18n';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

entrypoints/sidepanel/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '@/config/theme';
+import '@/i18n';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

i18n/index.ts

@@ -0,0 +1,138 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { storageUtil } from '@/utils/chromeStorage';
+import dayjs from 'dayjs';
+
+// 导入语言文件
+import commonZh from './locales/zh/common.json';
+import featuresZh from './locales/zh/features.json';
+import commonEn from './locales/en/common.json';
+import featuresEn from './locales/en/features.json';
+import timestampZh from './locales/zh/timestamp.json';
+import timestampEn from './locales/en/timestamp.json';
+import storageCleanerZh from './locales/zh/storageCleaner.json';
+import storageCleanerEn from './locales/en/storageCleaner.json';
+import qrCodeZh from './locales/zh/qrCode.json';
+import qrCodeEn from './locales/en/qrCode.json';
+import textStatisticsZh from './locales/zh/textStatistics.json';
+import textStatisticsEn from './locales/en/textStatistics.json';
+import jwtZh from './locales/zh/jwt.json';
+import jwtEn from './locales/en/jwt.json';
+
+const resources = {
+  zh: {
+    common: commonZh,
+    features: featuresZh,
+    timestamp: timestampZh,
+    storageCleaner: storageCleanerZh,
+    qrCode: qrCodeZh,
+    textStatistics: textStatisticsZh,
+    jwt: jwtZh,
+  },
+  en: {
+    common: commonEn,
+    features: featuresEn,
+    timestamp: timestampEn,
+    storageCleaner: storageCleanerEn,
+    qrCode: qrCodeEn,
+    textStatistics: textStatisticsEn,
+    jwt: jwtEn,
+  },
+};
+
+export const SUPPORTED_LANGUAGES = ['zh', 'en'] as const;
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+
+const LANGUAGE_STORAGE_KEY = 'app/language';
+const LANGUAGE_SNAPSHOT_KEY = 'snapshot/app/language';
+
+/**
+ * 将任意语言标识归一化为受支持的语言代码
+ */
+export const normalizeLanguage = (lng: string): SupportedLanguage => {
+  return lng.startsWith('zh') ? 'zh' : 'en';
+};
+
+/**
+ * 校验语言是否受支持
+ */
+const isValidLanguage = (lng: unknown): lng is SupportedLanguage => {
+  return typeof lng === 'string' && (SUPPORTED_LANGUAGES as readonly string[]).includes(lng);
+};
+
+/**
+ * 同步从 localStorage 获取语言快照（用于消除异步加载产生的首屏闪烁）
+ */
+const getSyncLanguageSnapshot = (): SupportedLanguage | null => {
+  try {
+    const val = localStorage.getItem(LANGUAGE_SNAPSHOT_KEY);
+    if (!val) return null;
+    const parsed = JSON.parse(val) as unknown;
+    return isValidLanguage(parsed) ? parsed : null;
+  } catch (error) {
+    console.error('解析语言同步快照失败:', error);
+    return null;
+  }
+};
+
+// 自定义 Chrome Storage 探测器
+const chromeStorageDetector = {
+  name: 'chromeStorage',
+  lookup() {
+    // 同步初始化已通过 getSyncLanguageSnapshot + init 的 lng 参数处理
+    return undefined;
+  },
+  cacheUserLanguage(lng: string) {
+    storageUtil.set(LANGUAGE_STORAGE_KEY, lng);
+  },
+};
+
+const detector = new LanguageDetector();
+detector.addDetector(chromeStorageDetector);
+
+const syncLng = getSyncLanguageSnapshot();
+
+i18n
+  .use(detector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    lng: syncLng || undefined,
+    ns: ['common', 'features', 'timestamp', 'storageCleaner', 'qrCode', 'textStatistics', 'jwt'],
+    defaultNS: 'common',
+    debug: false,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['chromeStorage', 'navigator'],
+      caches: ['chromeStorage'],
+    },
+  });
+
+// 监听语言变化：同步 Day.js 和 localStorage 快照
+i18n.on('languageChanged', (lng) => {
+  const normalizedLng = normalizeLanguage(lng);
+  dayjs.locale(normalizedLng === 'zh' ? 'zh-cn' : 'en');
+  localStorage.setItem(LANGUAGE_SNAPSHOT_KEY, JSON.stringify(normalizedLng));
+});
+
+// 初始化时从存储中恢复语言
+storageUtil.get(LANGUAGE_STORAGE_KEY).then((lng) => {
+  const targetLng = lng || syncLng;
+
+  if (targetLng && isValidLanguage(targetLng) && targetLng !== i18n.language) {
+    i18n.changeLanguage(targetLng);
+  } else if (!targetLng) {
+    // 第一次运行，归一化并持久化初始语言
+    const initialLng = normalizeLanguage(i18n.language);
+    storageUtil.set(LANGUAGE_STORAGE_KEY, initialLng);
+    if (initialLng !== i18n.language) {
+      i18n.changeLanguage(initialLng);
+    }
+  }
+});
+
+export default i18n;

i18n/locales/en/common.json

@@ -0,0 +1,23 @@
+{
+  "appName": "Testing Tools",
+  "buttons": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "copy": "Copy",
+    "clear": "Clear",
+    "refresh": "Refresh",
+    "toggleLanguage": "Switch Language",
+    "search": "Search tools...",
+    "back": "Back",
+    "clearSearch": "Clear search",
+    "recentSearch": "Recent search",
+    "noResults": "No tools found",
+    "openInTab": "Open in tab",
+    "settings": "Settings"
+  },
+  "messages": {
+    "copySuccess": "Copied to clipboard",
+    "copyError": "Copy failed"
+  }
+}

i18n/locales/en/features.json

@@ -0,0 +1,25 @@
+{
+  "dashboard": {
+    "title": "Dashboard"
+  },
+  "timestamp": {
+    "title": "Timestamp",
+    "description": "Unix millisecond conversion and formatting"
+  },
+  "storageCleaner": {
+    "title": "Storage Cleaner",
+    "description": "Clean cache, cookies, and local storage"
+  },
+  "qrCode": {
+    "title": "QR Code Tools",
+    "description": "Generate QR code for the selected URL"
+  },
+  "textStatistics": {
+    "title": "Text Statistics",
+    "description": "Real-time analysis of text characters, words, and bytes"
+  },
+  "jwt": {
+    "title": "JWT Parser",
+    "description": "JSON Web Token decoding and viewing"
+  }
+}

i18n/locales/en/jwt.json

@@ -0,0 +1,10 @@
+{
+  "pageTitle": "JWT Parser",
+  "pageSubtitle": "JSON Web Token decoding and viewing",
+  "placeholder": "Paste Encoded JWT here...",
+  "headerTitle": "HEADER: Algorithm & Token Type",
+  "payloadTitle": "PAYLOAD: Data",
+  "signatureTitle": "Signature",
+  "noSignature": "No Signature",
+  "invalidFormat": "Unable to parse"
+}

i18n/locales/en/qrCode.json

@@ -0,0 +1,31 @@
+{
+  "pageTitle": "QR Code Tools",
+  "pageSubtitle": "Generate and parse QR codes",
+  "urlToQr": "URL to QR Code",
+  "qrToUrl": "QR Code to URL",
+  "urlInputLabel": "Enter URL",
+  "urlInputPlaceholder": "https://example.com",
+  "generateButton": "Generate QR Code",
+  "generating": "Generating...",
+  "qrCodeWillShow": "QR code will be shown here",
+  "downloadButton": "Download QR Code",
+  "copyQrButton": "Copy QR Code Image",
+  "qrCodeSuccess": "QR code generated successfully",
+  "qrCodeDownloadSuccess": "QR code downloaded successfully",
+  "qrCodeCopySuccess": "QR code copied to clipboard",
+  "selectImage": "Please select a QR code image",
+  "parseSuccess": "QR code parsed successfully",
+  "noQrDetected": "No QR code detected",
+  "parseError": "Failed to parse QR code, please try again",
+  "imagePasted": "Image pasted successfully",
+  "imagePasteError": "Failed to paste image, please try again",
+  "imageCleared": "Image cleared",
+  "clickToUpload": "Click, drag, or paste to upload QR code image",
+  "supportFormats": "Supports PNG, JPG, WEBP formats",
+  "parseButton": "Parse QR Code",
+  "parsing": "Parsing...",
+  "resultLabel": "Parsing Result",
+  "copyTooltip": "Copy",
+  "enterUrlError": "Please enter a URL",
+  "clickToChange": "Click to change image"
+}

i18n/locales/en/storageCleaner.json

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

i18n/locales/en/textStatistics.json

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

i18n/locales/en/timestamp.json

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

i18n/locales/zh/common.json

@@ -0,0 +1,23 @@
+{
+  "appName": "测试工具",
+  "buttons": {
+    "save": "保存",
+    "cancel": "取消",
+    "confirm": "确认",
+    "copy": "复制",
+    "clear": "清理",
+    "refresh": "刷新",
+    "toggleLanguage": "切换语言",
+    "search": "搜索工具...",
+    "back": "返回",
+    "clearSearch": "清除搜索",
+    "recentSearch": "最近搜索",
+    "noResults": "未找到相关工具",
+    "openInTab": "在标签页打开",
+    "settings": "设置"
+  },
+  "messages": {
+    "copySuccess": "已复制到剪贴板",
+    "copyError": "复制失败"
+  }
+}

i18n/locales/zh/features.json

@@ -0,0 +1,25 @@
+{
+  "dashboard": {
+    "title": "仪表盘"
+  },
+  "timestamp": {
+    "title": "时间戳",
+    "description": "Unix 毫秒数转换与格式化"
+  },
+  "storageCleaner": {
+    "title": "存储清理",
+    "description": "清理缓存、Cookies 及本地存储"
+  },
+  "qrCode": {
+    "title": "二维码工具",
+    "description": "生成当前选中的 URL 的二维码"
+  },
+  "textStatistics": {
+    "title": "文本统计",
+    "description": "实时分析文本字符、单词及字节"
+  },
+  "jwt": {
+    "title": "JWT 解析",
+    "description": "JSON Web Token 解码与查看"
+  }
+}

i18n/locales/zh/jwt.json

@@ -0,0 +1,10 @@
+{
+  "pageTitle": "JWT 解析",
+  "pageSubtitle": "JSON Web Token 解码与查看",
+  "placeholder": "在此粘贴 JWT 令牌 (Encoded JWT)...",
+  "headerTitle": "HEADER: 算法 & 令牌类型",
+  "payloadTitle": "PAYLOAD: 数据",
+  "signatureTitle": "签名",
+  "noSignature": "无签名",
+  "invalidFormat": "无法解析"
+}

i18n/locales/zh/qrCode.json

@@ -0,0 +1,31 @@
+{
+  "pageTitle": "二维码工具",
+  "pageSubtitle": "生成和解析二维码",
+  "urlToQr": "URL 转二维码",
+  "qrToUrl": "二维码转 URL",
+  "urlInputLabel": "输入 URL",
+  "urlInputPlaceholder": "https://example.com",
+  "generateButton": "生成二维码",
+  "generating": "生成中...",
+  "qrCodeWillShow": "二维码将显示在这里",
+  "downloadButton": "下载二维码",
+  "copyQrButton": "复制二维码",
+  "qrCodeSuccess": "二维码生成成功",
+  "qrCodeDownloadSuccess": "二维码下载成功",
+  "qrCodeCopySuccess": "二维码已复制到剪贴板",
+  "selectImage": "请选择二维码图片",
+  "parseSuccess": "二维码解析成功",
+  "noQrDetected": "未检测到二维码",
+  "parseError": "解析二维码失败，请重试",
+  "imagePasted": "图片粘贴成功",
+  "imagePasteError": "粘贴图片失败，请重试",
+  "imageCleared": "图片已清除",
+  "clickToUpload": "点击、拖拽或粘贴上传二维码图片",
+  "supportFormats": "支持 PNG、JPG、WEBP 格式",
+  "parseButton": "解析二维码",
+  "parsing": "解析中...",
+  "resultLabel": "解析结果",
+  "copyTooltip": "复制",
+  "enterUrlError": "请输入 URL",
+  "clickToChange": "点击更换图片"
+}

i18n/locales/zh/storageCleaner.json

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

i18n/locales/zh/textStatistics.json

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

i18n/locales/zh/timestamp.json

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

package-lock.json

@@ -16,10 +16,13 @@
         "@mui/material": "^7.3.8",
         "@webext-core/messaging": "^2.3.0",
         "dayjs": "^1.11.19",
+        "i18next": "^26.0.8",
+        "i18next-browser-languagedetector": "^8.2.1",
         "qr-scanner": "^1.4.2",
         "qrious": "^4.0.2",
         "react": "^19.2.3",
-        "react-dom": "^19.2.3"
+        "react-dom": "^19.2.3",
+        "react-i18next": "^17.0.6"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.6.0",
@@ -6188,6 +6191,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-10.1.0.tgz",
@@ -6265,6 +6277,43 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/i18next": {
+      "version": "26.0.8",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.0.8.tgz",
+      "integrity": "sha512-BRzLom0mhDhV9v0QhgUUHWQJuwFmnr1194xEcNLYD6ym8y8s542n4jXUvRLnhNTbh9PmpU6kGZamyuGHQMsGjw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8821,6 +8870,42 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.6",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.6.tgz",
+      "integrity": "sha512-WzJ6SMKF+GTD7JZZqxSR1AKKmXjaSu39sClUrNlwxS4Tl7a99O+ltFy6yhPMO+wgZuxpQjJ2PZkfrQKmAqrLhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.0.1",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-i18next/node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -10197,7 +10282,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -10431,6 +10516,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11173,6 +11267,15 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",

package.json

@@ -18,7 +18,8 @@
     "lint": "eslint . --max-warnings=0",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -27,10 +28,13 @@
     "@mui/material": "^7.3.8",
     "@webext-core/messaging": "^2.3.0",
     "dayjs": "^1.11.19",
+    "i18next": "^26.0.8",
+    "i18next-browser-languagedetector": "^8.2.1",
     "qr-scanner": "^1.4.2",
     "qrious": "^4.0.2",
     "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react-dom": "^19.2.3",
+    "react-i18next": "^17.0.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.0",

pages/Dashboard/ToolCard.tsx

@@ -0,0 +1,152 @@
+/**
+ * ToolCard 组件 - 工具卡片
+ *
+ * 用于在仪表盘中展示各个工具功能的卡片组件，支持图标、标题、描述、
+ * 快照内容展示，具备悬停动画效果。
+ */
+import { alpha, Box, Card, CardActionArea, Stack, Typography } from '@mui/material';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import React from 'react';
+
+/**
+ * ToolCard 组件属性接口
+ */
+interface ToolCardProps {
+  /** 工具卡片标题 */
+  title: string;
+  /** 工具卡片描述文本（可选） */
+  description?: string;
+  /** 快照内容，用于在卡片底部展示额外信息（可选） */
+  snapshot?: React.ReactNode;
+  /** 主题色代码，用于图标背景和悬停效果 */
+  colorCode: string;
+  /** 工具图标元素 */
+  icon: React.ReactNode;
+  /** 卡片点击事件处理函数 */
+  onClick: () => void;
+}
+
+/**
+ * ToolCard 组件
+ *
+ * @param props - ToolCardProps 属性对象
+ * @returns 工具卡片 JSX 元素
+ */
+export default function ToolCard({
+  title,
+  description,
+  snapshot,
+  colorCode,
+  icon,
+  onClick,
+}: ToolCardProps) {
+  return (
+    <Card
+      elevation={0}
+      sx={{
+        position: 'relative',
+        borderRadius: 4,
+        border: '1px solid',
+        borderColor: 'grey.100',
+        height: '100%',
+        boxSizing: 'border-box',
+        transition:
+          'border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        '&:hover': {
+          borderColor: colorCode,
+          transform: 'translateY(-4px)',
+          boxShadow: `0 12px 24px -10px ${alpha(colorCode, 0.2)}`,
+        },
+      }}
+    >
+      <CardActionArea
+        onClick={onClick}
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+          justifyContent: 'flex-start',
+          p: 2.5,
+          gap: 1.5,
+          '&:hover .arrow-icon': {
+            transform: 'translateX(4px)',
+            color: colorCode,
+          },
+        }}
+      >
+        <Stack direction="row" justifyContent="space-between" alignItems="flex-start" width="100%">
+          <Stack direction="row" spacing={1.5} alignItems="center">
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 40,
+                height: 40,
+                borderRadius: 3,
+                bgcolor: alpha(colorCode, 0.07),
+                color: colorCode,
+              }}
+            >
+              {icon}
+            </Box>
+            <Box>
+              <Typography
+                variant="subtitle1"
+                sx={{
+                  fontWeight: 700,
+                  lineHeight: 1.2,
+                  color: 'text.primary',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 0.5,
+                }}
+              >
+                {title}
+              </Typography>
+              {description && (
+                <Typography
+                  variant="caption"
+                  sx={{
+                    color: 'text.secondary',
+                    fontWeight: 500,
+                    display: 'block',
+                    mt: 0.5,
+                  }}
+                >
+                  {description}
+                </Typography>
+              )}
+            </Box>
+          </Stack>
+          <ArrowForwardIosIcon
+            className="arrow-icon"
+            sx={{
+              fontSize: 12,
+              color: 'grey.300',
+              mt: 0.5,
+              transition: 'all 0.3s ease',
+            }}
+          />
+        </Stack>
+
+        {snapshot != null && (
+          <Box
+            sx={{
+              mt: 'auto',
+              pt: 1.5,
+              borderTop: '1px dashed',
+              borderColor: 'grey.100',
+              width: '100%',
+            }}
+          >
+            {snapshot}
+          </Box>
+        )}
+      </CardActionArea>
+    </Card>
+  );
+}
+
+ToolCard.displayName = 'ToolCard';

pages/Dashboard/index.tsx

@@ -0,0 +1,37 @@
+import { Box } from '@mui/material';
+import { useRouter } from '@/providers/RouterProvider';
+import ToolCard from '@/pages/Dashboard/ToolCard';
+import { getFeatureByKey } from '@/config/features';
+import type { PageType } from '@/types/storage';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { dashboardPageStyles } from '@/config/pageTheme';
+
+export default function DashboardPage() {
+  const { navigateTo, visiblePages, pageOrder } = useRouter();
+  const { t } = useTranslation(['features']);
+
+  const visibleSet = useMemo(() => new Set(visiblePages), [visiblePages]);
+
+  return (
+    <Box sx={dashboardPageStyles.GRID_CONTAINER}>
+      {pageOrder.map((key) => {
+        if (!visibleSet.has(key as PageType)) return null;
+
+        const feature = getFeatureByKey(key);
+        if (!feature?.themeColor || feature.icon == null) return null;
+
+        return (
+          <ToolCard
+            key={key}
+            title={t(feature.labelKey)}
+            description={t(feature.descriptionKey)}
+            colorCode={feature.themeColor}
+            icon={feature.icon}
+            onClick={() => navigateTo(key)}
+          />
+        );
+      })}
+    </Box>
+  );
+}

pages/DashboardPage.tsx

@@ -1,59 +0,0 @@
-import { Box } from '@mui/material';
-import { useRouter } from '@/providers/RouterProvider';
-import DashboardCard from '@/components/DashboardCard';
-import { getFeatureByKey } from '@/config/features';
-import type { PageType } from '@/types/storage';
-import { useCallback } from 'react';
-
-import { dashboardPageStyles } from '@/config/pageTheme';
-
-export default function DashboardPage() {
-  const { navigateTo, visiblePages, pageOrder } = useRouter();
-
-  const isVisible = (key: string) => visiblePages.includes(key as PageType);
-
-  const handleCardClick = useCallback(
-    (page: PageType) => {
-      navigateTo(page);
-    },
-    [navigateTo],
-  );
-
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: {
-          xs: '1fr', // 弹出窗口或小屏幕保持单列
-          sm: 'repeat(auto-fill, minmax(300px, 1fr))', // 标签页大屏幕自适应多列
-        },
-        gap: 2,
-        p: 2,
-      }}
-    >
-      {pageOrder.map((key) => {
-        if (!isVisible(key)) return null;
-
-        const feature = getFeatureByKey(key);
-        if (!feature || !feature.icon || !feature.themeColor) return null;
-
-        // 适配 DashboardCard 组件，将 themeColor 映射到 colorCode
-        const cardConfig = {
-          title: feature.label,
-          description: feature.description,
-          colorCode: feature.themeColor,
-          icon: feature.icon,
-        };
-
-        return (
-          <DashboardCard
-            key={key}
-            config={cardConfig}
-            onClick={() => handleCardClick(key)}
-            cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
-          />
-        );
-      })}
-    </Box>
-  );
-}

pages/Jwt/index.tsx

@@ -1,12 +1,13 @@
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
-import { TextField, Stack, Box, Container, Typography, Paper } from '@mui/material';
+import { Box, Container, Paper, Stack, TextField, Typography } from '@mui/material';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import VpnKeyIcon from '@mui/icons-material/VpnKey';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import PageHeader from '@/components/PageHeader';
 import { jwtPageStyles } from '@/config/pageTheme';
-import { parseJwt, formatJson } from '@/utils/jwt';
+import { formatJson, parseJwt } from '@/utils/jwt';
 import CopyButton from '@/components/CopyButton';
+import { useTranslation } from 'react-i18next';
 
 interface SectionProps {
   title: string;
@@ -15,7 +16,9 @@ interface SectionProps {
   color: string;
 }
 
-const Section = ({ title, content, color }: SectionProps) => (
+const Section = ({ title, content, color }: SectionProps) => {
+  const { t } = useTranslation(['jwt']);
+  return (
     <Paper
       variant="outlined"
       sx={{
@@ -49,13 +52,15 @@ const Section = ({ title, content, color }: SectionProps) => (
           border: '1px solid rgba(0,0,0,0.05)',
         }}
       >
-      {content ? formatJson(content) : '无法解析'}
+        {content ? formatJson(content) : t('jwt:invalidFormat')}
       </Box>
     </Paper>
   );
+};
 
-export default function JwtPage() {
+export default function Index() {
   useSnackbar();
+  const { t } = useTranslation(['jwt']);
   const [jwtInput, setJwtInput] = useState('');
 
   const result = useMemo(() => {
@@ -68,14 +73,18 @@ export default function JwtPage() {
   return (
     <Box>
       <Container sx={{ p: 2 }}>
-        <PageHeader title="JWT 解析" subtitle="JSON Web Token 解码与查看" icon={<VpnKeyIcon />} />
+        <PageHeader
+          title={t('jwt:pageTitle')}
+          subtitle={t('jwt:pageSubtitle')}
+          icon={<VpnKeyIcon />}
+        />
 
         <Stack spacing={2.5}>
           {/* Input Area */}
           <TextField
             multiline
             rows={4}
-            placeholder="在此粘贴 JWT 令牌 (Encoded JWT)..."
+            placeholder={t('jwt:placeholder')}
             value={jwtInput}
             onChange={(e) => {
               // 自动去除 Bearer 前缀及首尾空白字符/换行
@@ -110,13 +119,13 @@ export default function JwtPage() {
           {result && !result.error && (
             <Stack spacing={2}>
               <Section
-                title="HEADER: 算法 & 令牌类型"
+                title={t('jwt:headerTitle')}
                 content={result.header}
                 raw={result.raw.header}
                 color="#fb015b" // JWT.io Header Color
               />
               <Section
-                title="PAYLOAD: 数据"
+                title={t('jwt:payloadTitle')}
                 content={result.payload}
                 raw={result.raw.payload}
                 color="#d63aff" // JWT.io Payload Color
@@ -142,7 +151,7 @@ export default function JwtPage() {
                     variant="subtitle2"
                     sx={{ fontWeight: 800, color: '#00b9f1', letterSpacing: 0.5 }}
                   >
-                    签名
+                    {t('jwt:signatureTitle')}
                   </Typography>
                   <CopyButton text={JSON.stringify(result.raw.signature)} size="small" />
                 </Box>
@@ -159,7 +168,7 @@ export default function JwtPage() {
                     border: '1px solid rgba(0,0,0,0.05)',
                   }}
                 >
-                  {result.signature || 'No Signature'}
+                  {result.signature || t('jwt:noSignature')}
                 </Typography>
               </Paper>
             </Stack>

pages/QrCode/QrCodeToUrlSection.tsx

@@ -1,17 +1,17 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  Stack,
-  Alert,
   Accordion,
-  AccordionSummary,
   AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Box,
+  Button,
   CircularProgress,
-  InputAdornment,
   IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
 } from '@mui/material';
 import LinkIcon from '@mui/icons-material/Link';
 import ImageIcon from '@mui/icons-material/Image';
@@ -19,21 +19,20 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ClearIcon from '@mui/icons-material/Clear';
 import CopyButton from '@/components/CopyButton';
 import { qrCodePageStyles } from '@/config/pageTheme';
-import type { SnackbarOptions } from '@/components/GlobalSnackbar';
+import { useSnackbar } from '@/components/GlobalSnackbar';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
+import { useTranslation } from 'react-i18next';
 
 interface QrCodeToUrlSectionProps {
   expanded: boolean;
   onExpandedChange: (expanded: boolean) => void;
-  showMessage: (message: string, options?: SnackbarOptions) => void;
 }
 
-const QrCodeToUrlSection = ({
+const QrCodeToUrlSection = ({ expanded, onExpandedChange }: QrCodeToUrlSectionProps) => {
-  expanded,
+  const { t } = useTranslation(['qrCode']);
-  onExpandedChange,
+  const { showMessage } = useSnackbar();
-  showMessage,
-}: QrCodeToUrlSectionProps) => {
   const [qrCodeFile, setQrCodeFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string>('');
   const [parsedUrl, setParsedUrl] = useState('');
   const [parseError, setParseError] = useState('');
   const [parsing, setParsing] = useState(false);
@@ -41,12 +40,36 @@ const QrCodeToUrlSection = ({
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // 清理预览 URL，防止内存泄漏
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
   const handleFileChange = useCallback((file: File) => {
     setQrCodeFile(file);
+    setPreviewUrl(URL.createObjectURL(file));
     setParseError('');
     setParsedUrl('');
   }, []);
 
+  const handleClearFile = () => {
+    setQrCodeFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setPreviewUrl('');
+    setParsedUrl('');
+    setParseError('');
+    showMessage(t('qrCode:imageCleared'), {
+      severity: 'success',
+      autoHideDuration: 1000,
+    });
+  };
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       handleFileChange(e.target.files[0]);
@@ -73,7 +96,7 @@ const QrCodeToUrlSection = ({
 
   const parseQrCode = async () => {
     if (!qrCodeFile) {
-      showMessage('请选择二维码图片', { severity: 'error', autoHideDuration: 300 });
+      showMessage(t('qrCode:selectImage'), { severity: 'error', autoHideDuration: 300 });
       return;
     }
 
@@ -86,16 +109,16 @@ const QrCodeToUrlSection = ({
 
       if (result.success && result.data) {
         setParsedUrl(result.data);
-        showMessage('二维码解析成功', { severity: 'success', autoHideDuration: 1000 });
+        showMessage(t('qrCode:parseSuccess'), { severity: 'success', autoHideDuration: 1000 });
       } else {
-        showMessage(result.error || '未检测到二维码', {
+        showMessage(result.error || t('qrCode:noQrDetected'), {
           severity: 'error',
           autoHideDuration: 1000,
         });
       }
     } catch (error) {
       console.error('解析二维码失败:', error);
-      showMessage('解析二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
+      showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
     } finally {
       setParsing(false);
     }
@@ -117,10 +140,13 @@ const QrCodeToUrlSection = ({
           if (file) {
             try {
               handleFileChange(file);
-              showMessage('图片粘贴成功', { severity: 'success', autoHideDuration: 1000 });
+              showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
             } catch (error) {
               console.error('处理粘贴图片失败:', error);
-              showMessage('粘贴图片失败，请重试', { severity: 'error', autoHideDuration: 3000 });
+              showMessage(t('qrCode:imagePasteError'), {
+                severity: 'error',
+                autoHideDuration: 3000,
+              });
             }
           }
           break;
@@ -133,55 +159,26 @@ const QrCodeToUrlSection = ({
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [expanded, showMessage, handleFileChange]);
+  }, [expanded, showMessage, handleFileChange, t]);
 
   return (
     <Accordion
       expanded={expanded}
       onChange={(_, isExpanded) => onExpandedChange(isExpanded)}
-      sx={{
+      sx={qrCodePageStyles.ACCORDION}
-        borderRadius: 4,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-        '&:before': { display: 'none' },
-      }}
     >
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={qrCodePageStyles.ACCORDION_SUMMARY}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Box sx={qrCodePageStyles.ACCORDION_TITLE_ICON}>
           <LinkIcon color="success" />
-          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+          <Typography variant="subtitle1" sx={qrCodePageStyles.ACCORDION_TITLE_TEXT}>
-            二维码转 URL
+            {t('qrCode:qrToUrl')}
           </Typography>
         </Box>
       </AccordionSummary>
       <AccordionDetails>
         <Stack spacing={3}>
           <Box
-            sx={{
+            sx={qrCodePageStyles.DROPZONE(dragging, !!qrCodeFile)}
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              minHeight: 200,
-              border: '2px dashed',
-              borderColor: dragging
-                ? qrCodePageStyles.successColor
-                : qrCodeFile
-                  ? qrCodePageStyles.successColor
-                  : 'grey.200',
-              borderRadius: 3,
-              p: 4,
-              bgcolor: dragging
-                ? 'rgba(76, 175, 80, 0.1)'
-                : qrCodeFile
-                  ? 'rgba(76, 175, 80, 0.05)'
-                  : 'grey.50',
-              cursor: 'pointer',
-              transition: 'all 0.2s',
-              '&:hover': {
-                borderColor: qrCodePageStyles.successColor,
-                bgcolor: 'rgba(76, 175, 80, 0.05)',
-              },
-            }}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
@@ -191,9 +188,7 @@ const QrCodeToUrlSection = ({
               type="file"
               accept="image/*"
               onChange={handleInputChange}
-              style={{
+              style={{ display: 'none' }}
-                display: 'none',
-              }}
               id="qr-code-upload"
             />
             <label
@@ -201,40 +196,20 @@ const QrCodeToUrlSection = ({
               style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
             >
               {qrCodeFile ? (
-                <Box sx={{ textAlign: 'center', width: '100%', position: 'relative' }}>
+                <Box sx={qrCodePageStyles.IMAGE_PREVIEW_WRAPPER}>
-                  <Box sx={{ position: 'relative', display: 'inline-block' }}>
+                  <Box sx={qrCodePageStyles.IMAGE_PREVIEW_BOX}>
                     <img
-                      src={URL.createObjectURL(qrCodeFile)}
+                      src={previewUrl}
                       alt="QR Code Preview"
-                      style={{
+                      style={qrCodePageStyles.IMAGE_PREVIEW_IMG}
-                        maxWidth: '100%',
-                        maxHeight: 160,
-                        borderRadius: 8,
-                        objectFit: 'contain',
-                      }}
                     />
                     <IconButton
                       size="small"
                       onClick={(e) => {
                         e.stopPropagation();
-                        setQrCodeFile(null);
+                        handleClearFile();
-                        setParsedUrl('');
-                        setParseError('');
-                        showMessage('图片已清除', {
-                          severity: 'success',
-                          autoHideDuration: 1000,
-                        });
-                      }}
-                      sx={{
-                        position: 'absolute',
-                        top: -8,
-                        right: -8,
-                        bgcolor: 'rgba(244, 67, 54, 0.9)',
-                        color: 'white',
-                        '&:hover': {
-                          bgcolor: 'rgba(211, 47, 47, 0.95)',
-                        },
                       }}
+                      sx={qrCodePageStyles.CLEAR_BUTTON}
                     >
                       <ClearIcon fontSize="small" />
                     </IconButton>
@@ -243,17 +218,17 @@ const QrCodeToUrlSection = ({
                     {qrCodeFile.name}
                   </Typography>
                   <Typography variant="caption" color="text.secondary">
-                    点击更换图片
+                    {t('qrCode:clickToChange')}
                   </Typography>
                 </Box>
               ) : (
                 <>
                   <ImageIcon sx={{ fontSize: 48, color: 'grey.300', mb: 2 }} />
                   <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                    点击、拖拽或粘贴上传二维码图片
+                    {t('qrCode:clickToUpload')}
                   </Typography>
                   <Typography variant="caption" color="text.secondary">
-                    支持 PNG、JPG、WEBP 格式
+                    {t('qrCode:supportFormats')}
                   </Typography>
                 </>
               )}
@@ -265,27 +240,14 @@ const QrCodeToUrlSection = ({
             startIcon={parsing ? <CircularProgress size={16} color="inherit" /> : <LinkIcon />}
             onClick={parseQrCode}
             disabled={parsing}
-            sx={{
+            sx={qrCodePageStyles.PRIMARY_BUTTON}
-              py: 1.2,
-              borderRadius: 3,
-              bgcolor: qrCodePageStyles.successColor,
-              fontWeight: 700,
-              '&:hover': {
-                bgcolor: qrCodePageStyles.successDark,
-              },
-            }}
           >
-            {parsing ? '解析中...' : '解析二维码'}
+            {parsing ? t('qrCode:parsing') : t('qrCode:parseButton')}
           </Button>
 
-          <Box
+          <Box sx={qrCodePageStyles.RESULT_INPUT}>
-            sx={{
-              position: 'relative',
-              mt: 2,
-            }}
-          >
             <TextField
-              label="解析结果"
+              label={t('qrCode:resultLabel')}
               value={parsedUrl}
               fullWidth
               variant="outlined"
@@ -296,7 +258,7 @@ const QrCodeToUrlSection = ({
                     <InputAdornment position="end">
                       <CopyButton
                         text={parsedUrl}
-                        tooltip="复制"
+                        tooltip={t('qrCode:copyTooltip')}
                         size="small"
                         color={qrCodePageStyles.primaryColor}
                         showMessage={showMessage}

pages/QrCode/UrlToQrCodeSection.tsx

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  CircularProgress,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import QrCodeIcon from '@mui/icons-material/QrCode';
+import DownloadIcon from '@mui/icons-material/Download';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import QRious from 'qrious';
+import { qrCodePageStyles } from '@/config/pageTheme';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import { useTranslation } from 'react-i18next';
+
+interface UrlToQrCodeSectionProps {
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+}
+
+const UrlToQrCodeSection = ({ expanded, onExpandedChange }: UrlToQrCodeSectionProps) => {
+  const { t } = useTranslation(['qrCode']);
+  const { showMessage } = useSnackbar();
+  const [urlInput, setUrlInput] = useState('');
+  const [urlError, setUrlError] = useState('');
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
+  const [generating, setGenerating] = useState(false);
+
+  const handleUrlInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUrlInput(e.target.value);
+    setUrlError('');
+  };
+
+  const generateQrCode = async () => {
+    if (!urlInput) {
+      setUrlError(t('qrCode:enterUrlError'));
+      return;
+    }
+
+    try {
+      setGenerating(true);
+      setUrlError('');
+
+      let url = urlInput;
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        url = 'https://' + url;
+      }
+
+      // 使用 QRious 替代 qrcode 库，体积更小
+      const qr = new QRious({
+        value: url,
+        size: 250,
+        level: 'H',
+        foreground: qrCodePageStyles.black,
+        background: qrCodePageStyles.white,
+      });
+
+      setQrCodeDataUrl(qr.toDataURL());
+      showMessage(t('qrCode:qrCodeSuccess'), { severity: 'success', autoHideDuration: 1000 });
+    } catch (error) {
+      console.error('生成二维码失败:', error);
+      showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const downloadQrCode = () => {
+    if (!qrCodeDataUrl) return;
+
+    const link = document.createElement('a');
+    link.href = qrCodeDataUrl;
+    link.download = 'qrcode.png';
+    link.click();
+    showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 300 });
+  };
+
+  const copyQrCode = async () => {
+    if (!qrCodeDataUrl) return;
+
+    try {
+      const response = await fetch(qrCodeDataUrl);
+      const blob = await response.blob();
+
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': blob,
+        }),
+      ]);
+
+      showMessage(t('qrCode:qrCodeCopySuccess'), { severity: 'success', autoHideDuration: 1000 });
+    } catch (error) {
+      console.error('复制二维码失败:', error);
+      showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
+    }
+  };
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={(_, isExpanded) => onExpandedChange(isExpanded)}
+      sx={qrCodePageStyles.ACCORDION}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={qrCodePageStyles.ACCORDION_SUMMARY}>
+        <Box sx={qrCodePageStyles.ACCORDION_TITLE_ICON}>
+          <QrCodeIcon color="primary" />
+          <Typography variant="subtitle1" sx={qrCodePageStyles.ACCORDION_TITLE_TEXT}>
+            {t('qrCode:urlToQr')}
+          </Typography>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Stack spacing={3}>
+          <TextField
+            label={t('qrCode:urlInputLabel')}
+            placeholder={t('qrCode:urlInputPlaceholder')}
+            value={urlInput}
+            onChange={handleUrlInputChange}
+            fullWidth
+            variant="outlined"
+            error={!!urlError}
+            helperText={urlError}
+            sx={qrCodePageStyles.INPUT_STYLE}
+          />
+
+          <Button
+            variant="contained"
+            startIcon={generating ? <CircularProgress size={16} color="inherit" /> : <QrCodeIcon />}
+            onClick={generateQrCode}
+            disabled={generating}
+            sx={qrCodePageStyles.PRIMARY_BUTTON}
+          >
+            {generating ? t('qrCode:generating') : t('qrCode:generateButton')}
+          </Button>
+
+          <Box sx={qrCodePageStyles.QR_PREVIEW_CONTAINER}>
+            {qrCodeDataUrl ? (
+              <Box sx={qrCodePageStyles.QR_PREVIEW_INNER}>
+                <img src={qrCodeDataUrl} alt="QR Code" style={qrCodePageStyles.QR_PREVIEW_IMAGE} />
+                <Box sx={qrCodePageStyles.QR_PREVIEW_ACTIONS}>
+                  <Button
+                    variant="outlined"
+                    startIcon={<DownloadIcon />}
+                    onClick={downloadQrCode}
+                    sx={qrCodePageStyles.DOWNLOAD_BUTTON}
+                  >
+                    {t('qrCode:downloadButton')}
+                  </Button>
+                  <Button
+                    variant="contained"
+                    startIcon={<ContentCopyIcon />}
+                    onClick={copyQrCode}
+                    sx={qrCodePageStyles.COPY_BUTTON}
+                  >
+                    {t('qrCode:copyQrButton')}
+                  </Button>
+                </Box>
+              </Box>
+            ) : (
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={qrCodePageStyles.PLACEHOLDER_TEXT}
+              >
+                {t('qrCode:qrCodeWillShow')}
+              </Typography>
+            )}
+          </Box>
+        </Stack>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default UrlToQrCodeSection;

pages/QrCode/index.tsx

@@ -0,0 +1,45 @@
+import { Box, CircularProgress, Container, Stack } from '@mui/material';
+import QrCodeIcon from '@mui/icons-material/QrCode';
+import UrlToQrCodeSection from '@/pages/QrCode/UrlToQrCodeSection';
+import QrCodeToUrlSection from '@/pages/QrCode/QrCodeToUrlSection';
+import { useStorageState } from '@/utils/useStorageState';
+import { qrCodePageStyles } from '@/config/pageTheme';
+import PageHeader from '@/components/PageHeader';
+import { useTranslation } from 'react-i18next';
+
+export default function Index() {
+  const { t } = useTranslation(['qrCode']);
+
+  // 使用自定义钩子管理展开状态
+  const [urlExpanded, setUrlExpanded, urlInitialized] = useStorageState('qrCode/urlExpanded', true);
+  const [qrExpanded, setQrExpanded, qrInitialized] = useStorageState('qrCode/qrExpanded', false);
+
+  // 初始化未完成时显示加载状态
+  if (!urlInitialized || !qrInitialized) {
+    return (
+      <Container sx={qrCodePageStyles.LOADING_CONTAINER}>
+        <CircularProgress />
+      </Container>
+    );
+  }
+
+  return (
+    <Box>
+      <Container sx={{ py: 2, maxWidth: 400 }}>
+        <PageHeader
+          title={t('qrCode:pageTitle')}
+          subtitle={t('qrCode:pageSubtitle')}
+          icon={<QrCodeIcon />}
+          iconColor={qrCodePageStyles.primaryColor}
+          sx={{ mb: 2.5 }}
+        />
+
+        <Stack spacing={3}>
+          <UrlToQrCodeSection expanded={urlExpanded} onExpandedChange={setUrlExpanded} />
+
+          <QrCodeToUrlSection expanded={qrExpanded} onExpandedChange={setQrExpanded} />
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

pages/QrCodePage.tsx

@@ -1,62 +0,0 @@
-import { Box, Stack, Container, CircularProgress } from '@mui/material';
-import QrCodeIcon from '@mui/icons-material/QrCode';
-import { useSnackbar as useGlobalSnackbar } from '@/components/GlobalSnackbar';
-import UrlToQrCodeSection from '@/components/UrlToQrCodeSection';
-import QrCodeToUrlSection from '@/components/QrCodeToUrlSection';
-import { useStorageState } from '@/utils/useStorageState';
-import { qrCodePageStyles } from '@/config/pageTheme';
-import PageHeader from '@/components/PageHeader';
-
-export default function QrCodePage() {
-  const { showMessage } = useGlobalSnackbar();
-
-  // 使用自定义钩子管理展开状态
-  const [urlExpanded, setUrlExpanded, urlInitialized] = useStorageState('qrCode/urlExpanded', true);
-  const [qrExpanded, setQrExpanded, qrInitialized] = useStorageState('qrCode/qrExpanded', false);
-
-  // 初始化未完成时显示加载状态
-  if (!urlInitialized || !qrInitialized) {
-    return (
-      <Container
-        sx={{
-          py: 4,
-          maxWidth: 400,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: 200,
-        }}
-      >
-        <CircularProgress />
-      </Container>
-    );
-  }
-
-  return (
-    <Box>
-      <Container sx={{ py: 2, maxWidth: 400 }}>
-        <PageHeader
-          title="二维码工具"
-          subtitle="生成和解析二维码"
-          icon={<QrCodeIcon />}
-          iconColor={qrCodePageStyles.primaryColor}
-          sx={{ mb: 2.5 }}
-        />
-
-        <Stack spacing={3}>
-          <UrlToQrCodeSection
-            expanded={urlExpanded}
-            onExpandedChange={setUrlExpanded}
-            showMessage={showMessage}
-          />
-
-          <QrCodeToUrlSection
-            expanded={qrExpanded}
-            onExpandedChange={setQrExpanded}
-            showMessage={showMessage}
-          />
-        </Stack>
-      </Container>
-    </Box>
-  );
-}

pages/StorageCleaner/AutoRefreshToggle.tsx

@@ -0,0 +1,26 @@
+import { Box, Switch, Typography } from '@mui/material';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+interface AutoRefreshToggleProps {
+  autoRefresh: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export default function AutoRefreshToggle({ autoRefresh, onChange }: AutoRefreshToggleProps) {
+  const { t } = useTranslation(['storageCleaner']);
+  return (
+    <Box sx={storageCleanerPageStyles.AUTO_REFRESH_CONTAINER}>
+      <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem', px: 1.2 }}>
+        {t('storageCleaner:autoRefresh')}
+      </Typography>
+      <Switch
+        size="small"
+        checked={autoRefresh}
+        onChange={(e) => onChange(e.target.checked)}
+        color="warning"
+        sx={storageCleanerPageStyles.AUTO_REFRESH_SWITCH}
+      />
+    </Box>
+  );
+}

pages/StorageCleaner/CleaningResult.tsx

@@ -0,0 +1,27 @@
+import { Alert, Box } from '@mui/material';
+import type { CleaningResult } from '@/types/storage';
+import { formatCleaningResult } from '@/utils/storageCleaner';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+interface CleaningResultProps {
+  result: CleaningResult | null;
+}
+
+export default function CleaningResult({ result }: CleaningResultProps) {
+  const { t } = useTranslation(['storageCleaner']);
+  if (!result) return null;
+
+  return (
+    <Box sx={{ mt: 3, animation: 'fadeIn 0.3s ease-in-out' }}>
+      <Alert
+        severity={result.success ? 'success' : 'error'}
+        sx={storageCleanerPageStyles.CLEANING_RESULT_ALERT}
+      >
+        {result.success
+          ? formatCleaningResult(result, t)
+          : result.error || t('storageCleaner:partialFailure')}
+      </Alert>
+    </Box>
+  );
+}

pages/StorageCleaner/DomainHeader.tsx

@@ -3,6 +3,7 @@ import StorageIcon from '@mui/icons-material/Storage';
 import PageHeader from '@/components/PageHeader';
 import { formatSize } from '@/utils/storageCleaner';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
 
 /**
  * DomainHeader 组件属性接口
@@ -28,44 +29,21 @@ interface DomainHeaderProps {
  * ```
  */
 export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
+  const { t } = useTranslation(['storageCleaner']);
   return (
     <PageHeader
       icon={<StorageIcon sx={{ fontSize: 22 }} />}
       iconColor={storageCleanerPageStyles.warningColor}
-      title="存储清理"
+      title={t('storageCleaner:pageTitle')}
-      subtitle={domain || '加载中...'}
+      subtitle={domain || t('storageCleaner:loading')}
       badge={
         totalSize > 0 ? (
-          <Box
+          <Box sx={storageCleanerPageStyles.DOMAIN_HEADER_BADGE}>
-            sx={{
+            {t('storageCleaner:occupied', { size: formatSize(totalSize) })}
-              bgcolor: 'rgba(255, 152, 0, 0.15)',
-              color: storageCleanerPageStyles.warningColor,
-              px: 1.5,
-              py: 0.3,
-              borderRadius: 2,
-              fontWeight: 800,
-              fontSize: '0.7rem',
-              boxShadow: '0 2px 4px rgba(255, 152, 0, 0.2)',
-              transition: 'all 0.2s',
-              '&:hover': {
-                bgcolor: 'rgba(255, 152, 0, 0.25)',
-              },
-            }}
-          >
-            已占用 {formatSize(totalSize)}
           </Box>
         ) : null
       }
-      iconSx={{
+      iconSx={storageCleanerPageStyles.DOMAIN_HEADER_ICON}
-        p: 1.2,
-        borderRadius: 3,
-        boxShadow: '0 2px 8px rgba(255, 152, 0, 0.15)',
-        transition: 'all 0.2s',
-        '&:hover': {
-          bgcolor: 'rgba(255, 152, 0, 0.15)',
-          transform: 'scale(1.05)',
-        },
-      }}
       titleSx={{
         fontSize: '1rem',
       }}

pages/StorageCleaner/ErrorDisplay.tsx

@@ -1,36 +1,18 @@
 import { Box, Container, Typography } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
 
 interface ErrorDisplayProps {
   error: string;
 }
 
 export default function ErrorDisplay({ error }: ErrorDisplayProps) {
+  const { t } = useTranslation(['storageCleaner']);
   return (
-    <Container
+    <Container sx={storageCleanerPageStyles.ERROR_DISPLAY_CONTAINER}>
-      sx={{
-        py: 8,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: { xs: 'auto', sm: '400px' },
-        textAlign: 'center',
-      }}
-    >
       <Box sx={{ width: '100%', maxWidth: 320 }}>
-        <Box
+        <Box sx={storageCleanerPageStyles.ERROR_DISPLAY_BOX}>
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 4,
-            p: 4,
-            boxShadow: '0 8px 24px rgba(244, 67, 54, 0.15)',
-            border: '1px solid rgba(244, 67, 54, 0.2)',
-            bgcolor: 'rgba(244, 67, 54, 0.05)',
-          }}
-        >
           <WarningIcon sx={{ fontSize: 36, color: 'error.main', mb: 2 }} />
           <Typography
             variant="body1"
@@ -53,7 +35,7 @@ export default function ErrorDisplay({ error }: ErrorDisplayProps) {
               lineHeight: 1.4,
             }}
           >
-            存储清理功能仅适用于标准网页
+            {t('storageCleaner:errorStandardOnly')}
           </Typography>
         </Box>
       </Box>

pages/StorageCleaner/OptionItem.tsx

@@ -0,0 +1,51 @@
+import { Box, Checkbox, Typography } from '@mui/material';
+import { formatSize } from '@/utils/storageCleaner';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+interface OptionItemProps {
+  labelKey: string;
+  checked: boolean;
+  size?: number;
+  isCount?: boolean;
+  onChange: () => void;
+}
+
+export default function OptionItem({
+  labelKey,
+  checked,
+  size,
+  isCount = false,
+  onChange,
+}: OptionItemProps) {
+  const { t } = useTranslation(['storageCleaner']);
+  return (
+    <Box sx={storageCleanerPageStyles.OPTION_ITEM(checked)}>
+      <Box sx={{ flex: 1, minWidth: 0, mr: 1.5 }}>
+        <Typography
+          variant="body2"
+          fontWeight={700}
+          sx={storageCleanerPageStyles.OPTION_ITEM_LABEL(checked)}
+        >
+          {t(labelKey)}
+        </Typography>
+        {size !== undefined && size > 0 ? (
+          <Typography variant="caption" sx={storageCleanerPageStyles.OPTION_ITEM_SIZE}>
+            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
+          </Typography>
+        ) : (
+          <Typography variant="caption" sx={storageCleanerPageStyles.OPTION_ITEM_NO_DATA}>
+            {t('storageCleaner:noData')}
+          </Typography>
+        )}
+      </Box>
+      <Checkbox
+        size="small"
+        checked={checked}
+        onChange={onChange}
+        color="warning"
+        sx={storageCleanerPageStyles.OPTION_ITEM_CHECKBOX}
+      />
+    </Box>
+  );
+}

pages/StorageCleaner/StorageCleanerConfirm.tsx

@@ -0,0 +1,102 @@
+import {
+  Box,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from '@mui/material';
+import type { StorageCleanerOptions } from '@/types/storage';
+import Button from '@/components/Button';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+export interface StorageCleanerConfirmProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  options: StorageCleanerOptions;
+}
+
+export function StorageCleanerConfirm({
+  open,
+  onClose,
+  onConfirm,
+  options,
+}: StorageCleanerConfirmProps) {
+  const { t } = useTranslation(['storageCleaner']);
+
+  const selectedOptions = Object.entries(options)
+    .filter(([_, value]) => value)
+    .map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullWidth
+      maxWidth="xs"
+      slotProps={{
+        paper: {
+          sx: storageCleanerPageStyles.CONFIRM_DIALOG_PAPER,
+        },
+      }}
+    >
+      <DialogTitle sx={storageCleanerPageStyles.CONFIRM_DIALOG_TITLE}>
+        {t('storageCleaner:confirmTitle')}
+      </DialogTitle>
+
+      <DialogContent sx={storageCleanerPageStyles.CONFIRM_DIALOG_CONTENT}>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={storageCleanerPageStyles.CONFIRM_DIALOG_DESC}
+        >
+          {t('storageCleaner:confirmDesc')}
+        </Typography>
+
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.2, justifyContent: 'center', mb: 4 }}>
+          {selectedOptions.map((label) => (
+            <Chip
+              key={label}
+              label={label}
+              size="small"
+              sx={storageCleanerPageStyles.CONFIRM_DIALOG_CHIP}
+            />
+          ))}
+        </Box>
+
+        <Box sx={storageCleanerPageStyles.CONFIRM_DIALOG_WARNING_BOX}>
+          <Typography variant="caption" sx={storageCleanerPageStyles.CONFIRM_DIALOG_WARNING_TEXT}>
+            <span role="img" aria-label="warning">
+              ⚠️
+            </span>{' '}
+            {t('storageCleaner:irreversible')}
+          </Typography>
+        </Box>
+      </DialogContent>
+
+      <DialogActions sx={{ p: 3, pt: 1, gap: 2 }}>
+        <Button
+          variant="text"
+          onClick={onClose}
+          fullWidth
+          sx={storageCleanerPageStyles.CONFIRM_DIALOG_CANCEL}
+        >
+          {t('common:buttons.cancel')}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onConfirm}
+          fullWidth
+          sx={storageCleanerPageStyles.CONFIRM_DIALOG_CONFIRM}
+        >
+          {t('storageCleaner:confirmAction')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default StorageCleanerConfirm;

pages/StorageCleaner/StorageOptionsGrid.tsx

@@ -0,0 +1,72 @@
+import { Box, Checkbox, Divider, Grid, Typography } from '@mui/material';
+import type { StorageCleanerOptions } from '@/types/storage';
+import OptionItem from './OptionItem';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+interface StorageOptionsGridProps {
+  options: StorageCleanerOptions;
+  sizes: Record<string, number>;
+  allSelected: boolean;
+  someSelected: boolean;
+  onOptionChange: (key: keyof StorageCleanerOptions) => void;
+  onSelectAll: (checked: boolean) => void;
+}
+
+export default function StorageOptionsGrid({
+  options,
+  sizes,
+  allSelected,
+  someSelected,
+  onOptionChange,
+  onSelectAll,
+}: StorageOptionsGridProps) {
+  const { t } = useTranslation(['storageCleaner']);
+
+  const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
+    { key: 'localStorage' },
+    { key: 'sessionStorage' },
+    { key: 'indexedDB' },
+    { key: 'cookies' },
+    { key: 'cacheStorage', isCount: true },
+    { key: 'serviceWorkers', isCount: true },
+  ];
+
+  return (
+    <Box sx={storageCleanerPageStyles.OPTIONS_GRID_CONTAINER}>
+      <Box sx={{ p: 1.2 }}>
+        <Grid container spacing={1.5}>
+          {optionKeys.map(({ key, isCount }) => (
+            <Grid size={6} key={key}>
+              <OptionItem
+                labelKey={`storageCleaner:options.${key}`}
+                checked={options[key]}
+                size={sizes[key]}
+                isCount={isCount}
+                onChange={() => onOptionChange(key)}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+      <Divider sx={{ mx: 0, borderColor: 'grey.100' }} />
+      <Box sx={storageCleanerPageStyles.OPTIONS_GRID_FOOTER}>
+        <Typography
+          variant="body2"
+          fontWeight={700}
+          sx={{ color: 'text.secondary', fontSize: '0.7rem', px: 0 }}
+        >
+          {t('storageCleaner:selectAll')}
+        </Typography>
+        <Checkbox
+          size="small"
+          checked={allSelected}
+          indeterminate={someSelected}
+          onChange={(e) => onSelectAll(e.target.checked)}
+          color="warning"
+          sx={storageCleanerPageStyles.OPTIONS_GRID_CHECKBOX}
+        />
+      </Box>
+    </Box>
+  );
+}

pages/StorageCleaner/index.tsx

@@ -1,17 +1,19 @@
-import { Box, Container, CircularProgress } from '@mui/material';
+import { Box, CircularProgress, Container } from '@mui/material';
 import Button from '@/components/Button';
-import { useSnackbar as useGlobalSnackbar } from '@/components/GlobalSnackbar';
+import { useSnackbar } from '@/components/GlobalSnackbar';
-import StorageCleanerConfirm from '@/components/StorageCleanerConfirm';
+import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
 import { useStorageCleaner } from './useStorageCleaner';
-import DomainHeader from './components/DomainHeader';
+import DomainHeader from './DomainHeader';
-import StorageOptionsGrid from './components/StorageOptionsGrid';
+import StorageOptionsGrid from './StorageOptionsGrid';
-import AutoRefreshToggle from './components/AutoRefreshToggle';
+import AutoRefreshToggle from './AutoRefreshToggle';
-import ErrorDisplay from './components/ErrorDisplay';
+import ErrorDisplay from './ErrorDisplay';
-import CleaningResult from './components/CleaningResult';
+import CleaningResult from './CleaningResult';
+import { useTranslation } from 'react-i18next';
 
-export default function StorageCleanerPage() {
+export default function Index() {
-  const { showMessage } = useGlobalSnackbar();
+  const { showMessage } = useSnackbar();
+  const { t } = useTranslation(['storageCleaner']);
   const {
     domain,
     error,
@@ -32,7 +34,7 @@ export default function StorageCleanerPage() {
     handleClean,
   } = useStorageCleaner({ showMessage });
 
-  const isDisabled = (!someSelected && !allSelected) || loading;
+  const isDisabled = !(someSelected || allSelected) || loading;
 
   if (isInitializing) {
     return (
@@ -65,16 +67,11 @@ export default function StorageCleanerPage() {
         <Button
           variant="contained"
           onClick={() => setShowConfirm(true)}
-          sx={{
+          sx={storageCleanerPageStyles.CONFIRM_DIALOG_CONFIRM}
-            bgcolor: storageCleanerPageStyles.warningColor,
-            '&:hover': {
-              bgcolor: storageCleanerPageStyles.warningDark,
-            },
-          }}
           disabled={isDisabled}
           fullWidth
         >
-          {loading ? '正在清理...' : '立即清理'}
+          {loading ? t('storageCleaner:cleaning') : t('storageCleaner:cleanNow')}
         </Button>
 
         <CleaningResult result={result} />

pages/StorageCleaner/useStorageCleaner.ts

@@ -1,23 +1,24 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
 import type { SnackbarOptions } from '@/components/GlobalSnackbar';
 import type {
-  StorageCleanerOptions,
   CleaningResult,
+  StorageCleanerOptions,
   StorageCleanerPreferences,
 } from '@/types/storage';
 import {
-  getCurrentTab,
-  isRestrictedUrl,
   clearStorage,
-  getCookieSize,
-  getLocalStorageSize,
-  getSessionStorageSize,
-  getIndexedDBSize,
   getCacheStorageSize,
+  getCookieSize,
+  getCurrentTab,
+  getIndexedDBSize,
+  getLocalStorageSize,
   getServiceWorkerCount,
+  getSessionStorageSize,
+  isRestrictedUrl,
 } from '@/utils/storageCleaner';
 import { MessageAction, sendMessage } from '@/utils/messages';
+import { useTranslation } from 'react-i18next';
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
   localStorage: true,
@@ -65,6 +66,7 @@ export interface UseStorageCleanerOptions {
 export function useStorageCleaner({
   showMessage,
 }: UseStorageCleanerOptions): UseStorageCleanerReturn {
+  const { t } = useTranslation(['storageCleaner', 'common']);
   const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [isInitializing, setIsInitializing] = useState<boolean>(true);
@@ -74,14 +76,17 @@ export function useStorageCleaner({
   const [loading, setLoading] = useState<boolean>(false);
   const [result, setResult] = useState<CleaningResult | null>(null);
   const [showConfirm, setShowConfirm] = useState<boolean>(false);
-  const resultTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
   const requestIdRef = useRef<number>(0);
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const loadingRef = useRef(loading);
+
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
 
   useEffect(() => {
-    const resultTimeout = resultTimeoutRef.current;
     return () => {
-      if (resultTimeout) clearTimeout(resultTimeout);
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     };
   }, []);
@@ -93,11 +98,11 @@ export function useStorageCleaner({
       if (currentRequestId !== requestIdRef.current) return;
 
       if (!tab || !tab.url) {
-        setError('无法获取当前标签页');
+        setError(t('storageCleaner:errorNoTab'));
         return;
       }
       if (isRestrictedUrl(tab.url)) {
-        setError('存储清理功能不支持此页面');
+        setError(t('storageCleaner:errorRestricted'));
         return;
       }
 
@@ -136,7 +141,7 @@ export function useStorageCleaner({
         setIsInitializing(false);
       }
     }
-  }, []);
+  }, [t]);
 
   const loadInfoRef = useRef(loadInfo);
   loadInfoRef.current = loadInfo;
@@ -188,16 +193,14 @@ export function useStorageCleaner({
 
   const handleOptionChange = useCallback(
     async (key: keyof StorageCleanerOptions) => {
-      setOptions((prev) => {
+      const newOptions = { ...options, [key]: !options[key] };
-        const newOptions = { ...prev, [key]: !prev[key] };
+      setOptions(newOptions);
-        storageUtil.set('storageCleaner/preferences', {
+      await storageUtil.set('storageCleaner/preferences', {
         autoRefresh,
         selectedTypes: newOptions,
       });
-        return newOptions;
-      });
     },
-    [autoRefresh],
+    [options, autoRefresh],
   );
 
   const handleSelectAll = useCallback(
@@ -220,12 +223,12 @@ export function useStorageCleaner({
   );
 
   const handleClean = useCallback(async () => {
-    if (loading) {
+    if (loadingRef.current) {
       return;
     }
     const tab = await getCurrentTab();
     if (!tab || !tab.id || !tab.url) {
-      showMessage('无法获取当前标签页', { severity: 'warning' });
+      showMessage(t('storageCleaner:errorNoTab'), { severity: 'warning' });
       return;
     }
     setLoading(true);
@@ -234,20 +237,24 @@ export function useStorageCleaner({
       setResult(cleaningResult);
 
       if (autoRefresh && cleaningResult.success) {
-        showMessage('清理成功，即将刷新页面', { severity: 'success' });
+        showMessage(t('storageCleaner:cleanSuccessReload'), { severity: 'success' });
         await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
       } else {
         await loadInfo();
       }
     } catch (err) {
-      showMessage(`清理失败: ${String(err)}`, { severity: 'error' });
+      showMessage(`${t('common:messages.copyError')}: ${String(err)}`, { severity: 'error' });
     } finally {
       setLoading(false);
       setShowConfirm(false);
     }
-  }, [loading, options, autoRefresh, showMessage, loadInfo]);
+  }, [options, autoRefresh, showMessage, loadInfo, t]);
 
-  const totalSize = (sizes.cookies || 0) + (sizes.indexedDB || 0);
+  const totalSize =
+    (sizes.cookies || 0) +
+    (sizes.localStorage || 0) +
+    (sizes.sessionStorage || 0) +
+    (sizes.indexedDB || 0);
 
   const allSelected = Object.values(options).every(Boolean);
   const someSelected = Object.values(options).some(Boolean) && !allSelected;

pages/TextStatistics/index.tsx

@@ -1,16 +1,18 @@
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
-import { Box, Container, TextField, Grid, Paper, Typography, alpha } from '@mui/material';
+import { alpha, Box, Container, Grid, Paper, TextField, Typography } from '@mui/material';
 import PageHeader from '@/components/PageHeader';
 import DescriptionIcon from '@mui/icons-material/Description';
-import { getTextStats, formatByteSize } from '@/utils/textStatistics';
+import { formatByteSize, getTextStats } from '@/utils/textStatistics';
 import { textStatisticsPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
 
 /**
  * 文本统计页面组件
  *
  * 提供实时的文本分析功能，包括字符数、单词数、行数和字节大小。
  */
-export default function TextStatisticsPage() {
+export default function Index() {
+  const { t } = useTranslation(['textStatistics']);
   const [text, setText] = useState('');
 
   // 实时计算统计信息，使用 useMemo 优化性能
@@ -18,10 +20,10 @@ export default function TextStatisticsPage() {
   const stats = useMemo(() => getTextStats(text), [text]);
 
   const statItems = [
-    { label: '字符数', value: stats.characters },
+    { label: t('textStatistics:characters'), value: stats.characters },
-    { label: '单词数', value: stats.words },
+    { label: t('textStatistics:words'), value: stats.words },
-    { label: '行数', value: stats.lines },
+    { label: t('textStatistics:lines'), value: stats.lines },
-    { label: '字节大小', value: formatByteSize(stats.bytes) },
+    { label: t('textStatistics:bytes'), value: formatByteSize(stats.bytes) },
   ];
 
   return (
@@ -29,8 +31,8 @@ export default function TextStatisticsPage() {
       <Container sx={{ p: 2 }}>
         {/* 头部区域 */}
         <PageHeader
-          title="文本统计"
+          title={t('textStatistics:pageTitle')}
-          subtitle="实时分析文本的字符、单词、行数及字节大小"
+          subtitle={t('textStatistics:pageSubtitle')}
           icon={<DescriptionIcon />}
           iconColor={textStatisticsPageStyles.primaryColor}
         />
@@ -41,7 +43,7 @@ export default function TextStatisticsPage() {
           fullWidth
           minRows={8}
           maxRows={15}
-          placeholder="在此输入或粘贴文本..."
+          placeholder={t('textStatistics:placeholder')}
           value={text}
           onChange={(e) => setText(e.target.value)}
           sx={{
@@ -68,9 +70,9 @@ export default function TextStatisticsPage() {
         />
 
         {/* 统计结果展示区域 */}
-        <Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
+        <Grid container spacing={2}>
           {statItems.map((item) => (
-            <Grid sx={{ xs: 12, md: 3 }} key={item.label}>
+            <Grid size={{ xs: 12, md: 3 }} key={item.label}>
               <Paper
                 elevation={0}
                 sx={{

pages/Timestamp/LiveClock.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import CopyButton from '@/components/CopyButton';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import type { UnitType } from '@/config/pageTheme';
+import { timestampPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+interface LiveClockProps {
+  unit: UnitType;
+  onUseNow: (val: number) => void;
+  onUnitChange: (u: UnitType) => void;
+}
+
+const LiveClock = React.memo(({ unit, onUseNow, onUnitChange }: LiveClockProps) => {
+  const [now, setNow] = useState(() => Date.now());
+  const { t } = useTranslation(['timestamp']);
+  const { showMessage } = useSnackbar();
+  const onUseNowRef = useRef(onUseNow);
+
+  useEffect(() => {
+    onUseNowRef.current = onUseNow;
+  }, [onUseNow]);
+
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  const displayVal = useMemo(
+    () => String(Math.floor(now / (unit === 'ms' ? 1 : 1000))),
+    [now, unit],
+  );
+
+  const handleUseNow = useCallback(() => {
+    onUseNowRef.current(now);
+    showMessage(t('timestamp:usedSuccess'), { severity: 'success' });
+  }, [now, showMessage, t]);
+
+  return (
+    <Box sx={timestampPageStyles.LIVE_CLOCK_CARD}>
+      <Stack spacing={0.5} sx={{ minWidth: { xs: 100, sm: 120 } }}>
+        <Typography variant="caption" sx={timestampPageStyles.LIVE_CLOCK_LABEL}>
+          {t('timestamp:currentTs')}
+        </Typography>
+        <Typography variant="subtitle2" sx={timestampPageStyles.LIVE_CLOCK_VALUE}>
+          {displayVal}
+        </Typography>
+      </Stack>
+
+      <Stack direction="row" spacing={1} alignItems="center" sx={{ flexShrink: 0 }}>
+        {/* 胶囊式单位切换器 */}
+        <Box sx={timestampPageStyles.LIVE_CLOCK_UNIT_SWITCHER}>
+          {(['ms', 's'] as const).map((u) => (
+            <Box
+              key={u}
+              onClick={() => onUnitChange(u)}
+              sx={timestampPageStyles.LIVE_CLOCK_UNIT_ITEM(unit === u)}
+            >
+              {u.toUpperCase()}
+            </Box>
+          ))}
+        </Box>
+
+        <Divider orientation="vertical" flexItem sx={timestampPageStyles.LIVE_CLOCK_DIVIDER} />
+
+        <Stack direction="row" spacing={0.5}>
+          <Tooltip title={t('timestamp:useNowTooltip')}>
+            <IconButton
+              size="small"
+              onClick={handleUseNow}
+              sx={timestampPageStyles.LIVE_CLOCK_ICON_BUTTON}
+            >
+              <AccessTimeIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <CopyButton
+            text={displayVal}
+            tooltip={t('timestamp:copyTsTooltip')}
+            size="small"
+            color={timestampPageStyles.primaryColor}
+          />
+        </Stack>
+      </Stack>
+    </Box>
+  );
+});
+
+LiveClock.displayName = 'LiveClock';
+
+export default LiveClock;

pages/Timestamp/ResultView.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react';
+import { Box, Fade, Stack, Typography } from '@mui/material';
+import dayjs from '@/utils/dayjs';
+import CopyButton from '@/components/CopyButton';
+import type { UnitType } from '@/config/pageTheme';
+import { DATE_FORMAT, timestampPageStyles } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
+
+interface ResultViewProps {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+}
+
+const ResultView = React.memo(({ result, mode, unit, zone }: ResultViewProps) => {
+  const { t } = useTranslation(['timestamp']);
+  const extraInfo = useMemo(() => {
+    if (!result) return null;
+    const d =
+      mode === 'ts2dt'
+        ? dayjs(result, DATE_FORMAT).tz(zone)
+        : unit === 'ms'
+          ? dayjs(Number(result))
+          : dayjs.unix(Number(result));
+
+    return {
+      relative: d.fromNow(),
+      iso: d.toISOString(),
+      utc: d.utc().format(DATE_FORMAT) + ' UTC',
+    };
+  }, [result, mode, zone, unit]);
+
+  if (!result) return null;
+
+  return (
+    <Fade in={!!result}>
+      <Box sx={{ mt: 3, pt: 2.5, borderTop: '1px solid', borderColor: 'grey.50' }}>
+        <Typography variant="caption" sx={timestampPageStyles.RESULT_LABEL}>
+          {t('timestamp:resultLabel')}
+        </Typography>
+
+        <Box sx={timestampPageStyles.RESULT_MAIN_BOX}>
+          <Typography variant="body1" sx={timestampPageStyles.RESULT_MAIN_TEXT}>
+            {result}
+          </Typography>
+          <CopyButton
+            text={result}
+            tooltip={t('timestamp:copyResultTooltip')}
+            size="small"
+            color={timestampPageStyles.primaryColor}
+          />
+        </Box>
+
+        <Stack spacing={1.2} sx={timestampPageStyles.RESULT_EXTRA_STACK}>
+          {[
+            { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
+            { label: t('timestamp:iso8601'), value: extraInfo?.iso },
+            { label: t('timestamp:utcTime'), value: extraInfo?.utc },
+          ].map((item) => (
+            <Box
+              key={item.label}
+              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+            >
+              <Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_LABEL}>
+                {item.label}
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography variant="caption" sx={timestampPageStyles.RESULT_EXTRA_VALUE}>
+                  {item.value}
+                </Typography>
+                {item.value && (
+                  <CopyButton
+                    text={item.value}
+                    tooltip={t('timestamp:copyTooltip')}
+                    size="small"
+                    color={timestampPageStyles.primaryColor}
+                  />
+                )}
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </Fade>
+  );
+});
+
+ResultView.displayName = 'ResultView';
+
+export default ResultView;

pages/Timestamp/index.tsx

@@ -0,0 +1,116 @@
+import {
+  Box,
+  Container,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+} from '@mui/material';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import Button from '@/components/Button';
+import PageHeader from '@/components/PageHeader';
+import { timestampPageStyles, ZONES } from '@/config/pageTheme';
+import LiveClock from './LiveClock';
+import ResultView from './ResultView';
+import { useTimestampConverter } from './useTimestampConverter';
+import { useTranslation } from 'react-i18next';
+
+export default function Index() {
+  const { t } = useTranslation(['timestamp']);
+  const {
+    mode,
+    tsInput,
+    dtInput,
+    unit,
+    zone,
+    result,
+    error,
+    setMode,
+    setInput,
+    setUnit,
+    setZone,
+    handleUseNow,
+    convert,
+  } = useTimestampConverter();
+
+  return (
+    <Box>
+      <Container sx={{ p: 2 }}>
+        {/* Header */}
+        <PageHeader
+          title={t('timestamp:pageTitle')}
+          subtitle={t('timestamp:pageSubtitle')}
+          icon={<AccessTimeIcon />}
+        />
+
+        {/* Live Clock Card */}
+        <LiveClock unit={unit} onUseNow={handleUseNow} onUnitChange={setUnit} />
+
+        {/* Mode Switcher */}
+        <ToggleButtonGroup
+          value={mode}
+          exclusive
+          onChange={(_, newMode) => newMode && setMode(newMode)}
+          sx={timestampPageStyles.MODE_SWITCHER}
+        >
+          <ToggleButton value="ts2dt">{t('timestamp:tsToDate')}</ToggleButton>
+          <ToggleButton value="dt2ts">{t('timestamp:dateToTs')}</ToggleButton>
+        </ToggleButtonGroup>
+
+        {/* Input Area */}
+        <Stack spacing={2} sx={{ mb: 3 }}>
+          <TextField
+            placeholder={
+              mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
+            }
+            value={mode === 'ts2dt' ? tsInput : dtInput}
+            onChange={(e) => setInput(e.target.value)}
+            error={!!error}
+            helperText={error}
+            fullWidth
+            sx={timestampPageStyles.INPUT_STYLE}
+          />
+
+          <Stack direction="row" spacing={1.5}>
+            {/* 单位选择按钮组 */}
+            <Box sx={timestampPageStyles.UNIT_SWITCHER_CONTAINER}>
+              {(['ms', 's'] as const).map((u) => (
+                <Box
+                  key={u}
+                  onClick={() => setUnit(u)}
+                  sx={timestampPageStyles.UNIT_SWITCHER_ITEM(unit === u)}
+                >
+                  {u === 'ms' ? t('timestamp:unitMs') : t('timestamp:unitS')}
+                </Box>
+              ))}
+            </Box>
+
+            <Select
+              fullWidth
+              value={zone}
+              onChange={(e) => setZone(e.target.value as typeof zone)}
+              sx={{ ...timestampPageStyles.INPUT_STYLE, flex: 1, borderRadius: 4 }}
+              MenuProps={timestampPageStyles.SELECT_MENU_PROPS}
+            >
+              {ZONES.map((z) => (
+                <MenuItem key={z} value={z} sx={{ fontSize: '0.8rem', fontWeight: 600 }}>
+                  {z}
+                </MenuItem>
+              ))}
+            </Select>
+          </Stack>
+        </Stack>
+
+        {/* Main Action */}
+        <Button fullWidth variant="contained" onClick={convert}>
+          {t('timestamp:convertButton')}
+        </Button>
+
+        {/* Result View */}
+        <ResultView result={result} mode={mode} unit={unit} zone={zone} />
+      </Container>
+    </Box>
+  );
+}

pages/Timestamp/useTimestampConverter.ts

@@ -1,7 +1,8 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import dayjs from '@/utils/dayjs';
-import { DATE_FORMAT } from '@/config/pageTheme';
 import type { UnitType, ZoneType } from '@/config/pageTheme';
+import { DATE_FORMAT } from '@/config/pageTheme';
+import { useTranslation } from 'react-i18next';
 
 export interface UseTimestampConverterReturn {
   // State
@@ -15,8 +16,7 @@ export interface UseTimestampConverterReturn {
 
   // Actions
   setMode: (mode: 'ts2dt' | 'dt2ts') => void;
-  setTsInput: (value: string) => void;
+  setInput: (value: string) => void;
-  setDtInput: (value: string) => void;
   setUnit: (unit: UnitType) => void;
   setZone: (zone: ZoneType) => void;
   handleUseNow: (now: number) => void;
@@ -24,6 +24,7 @@ export interface UseTimestampConverterReturn {
 }
 
 export function useTimestampConverter(): UseTimestampConverterReturn {
+  const { t } = useTranslation(['timestamp']);
   const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
   const [tsInput, setTsInput] = useState(() => String(Date.now()));
   const [dtInput, setDtInput] = useState(() => dayjs().format(DATE_FORMAT));
@@ -38,12 +39,12 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
       if (!rawInput) return;
       const num = Number(rawInput);
       if (isNaN(num)) {
-        setError('无效数字');
+        setError(t('timestamp:errors.invalidNumber'));
         return;
       }
       const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
       if (!d.isValid()) {
-        setError('无效时间戳');
+        setError(t('timestamp:errors.invalidTimestamp'));
         return;
       }
       setError('');
@@ -53,14 +54,14 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
       if (!rawInput) return;
       const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
       if (!d.isValid()) {
-        setError('格式错误');
+        setError(t('timestamp:errors.invalidFormat'));
         return;
       }
       setError('');
       const ms = d.valueOf();
       setResult(unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000)));
     }
-  }, [mode, tsInput, dtInput, unit, zone]);
+  }, [mode, tsInput, dtInput, unit, zone, t]);
 
   useEffect(() => {
     const timer = setTimeout(convert, 400);
@@ -84,15 +85,17 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     setResult('');
   }, []);
 
-  const handleSetTsInput = useCallback((value: string) => {
+  const setInput = useCallback(
+    (value: string) => {
+      if (mode === 'ts2dt') {
         setTsInput(value);
-    setError('');
+      } else {
-  }, []);
-
-  const handleSetDtInput = useCallback((value: string) => {
         setDtInput(value);
+      }
       setError('');
-  }, []);
+    },
+    [mode],
+  );
 
   return {
     mode,
@@ -103,8 +106,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     result,
     error,
     setMode: handleSetMode,
-    setTsInput: handleSetTsInput,
+    setInput,
-    setDtInput: handleSetDtInput,
     setUnit,
     setZone,
     handleUseNow,

pages/TimestampPage.tsx

@@ -1,182 +0,0 @@
-import { TextField, Select, MenuItem, Stack, Box, Container } from '@mui/material';
-import { useSnackbar } from '@/components/GlobalSnackbar';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import Button from '@/components/Button';
-import PageHeader from '@/components/PageHeader';
-import { ZONES, timestampPageStyles } from '@/config/pageTheme';
-import LiveClock from './components/LiveClock';
-import ResultView from './components/ResultView';
-import { useTimestampConverter } from './hooks/useTimestampConverter';
-
-export default function TimestampPage() {
-  const { showMessage } = useSnackbar();
-  const {
-    mode,
-    tsInput,
-    dtInput,
-    unit,
-    zone,
-    result,
-    error,
-    setMode,
-    setTsInput,
-    setDtInput,
-    setUnit,
-    setZone,
-    handleUseNow,
-    convert,
-  } = useTimestampConverter();
-
-  return (
-    <Box>
-      <Container sx={{ p: 2 }}>
-        {/* Header */}
-        <PageHeader
-          title="时间戳转换"
-          subtitle="Unix 毫秒数转换与格式化"
-          icon={<AccessTimeIcon />}
-        />
-
-        {/* Live Clock Card */}
-        <LiveClock
-          unit={unit}
-          onUseNow={handleUseNow}
-          onUnitChange={setUnit}
-          showMessage={showMessage}
-        />
-
-        {/* Mode Switcher */}
-        <Box
-          sx={{
-            position: 'relative',
-            display: 'flex',
-            p: 0.6,
-            bgcolor: 'grey.100',
-            borderRadius: 4,
-            mb: 2.5,
-            border: '1px solid',
-            borderColor: 'grey.200',
-          }}
-        >
-          <Box
-            sx={{
-              position: 'absolute',
-              height: 'calc(100% - 10px)',
-              width: 'calc(50% - 5px)',
-              bgcolor: '#fff',
-              borderRadius: 3.5,
-              boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
-              transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-              transform: mode === 'ts2dt' ? 'translateX(0)' : 'translateX(100%)',
-              top: 5,
-              left: 5,
-            }}
-          />
-          {(['ts2dt', 'dt2ts'] as const).map((m) => (
-            <Box
-              key={m}
-              onClick={() => setMode(m)}
-              sx={{
-                flex: 1,
-                py: 1,
-                textAlign: 'center',
-                position: 'relative',
-                zIndex: 1,
-                cursor: 'pointer',
-                fontWeight: 800,
-                fontSize: '0.75rem',
-                color: mode === m ? 'primary.main' : 'text.secondary',
-                transition: 'color 0.3s',
-              }}
-            >
-              {m === 'ts2dt' ? '时间戳 → 日期' : '日期 → 时间戳'}
-            </Box>
-          ))}
-        </Box>
-
-        {/* Input Area */}
-        <Stack spacing={2} sx={{ mb: 3 }}>
-          <TextField
-            placeholder={mode === 'ts2dt' ? '输入时间戳...' : 'YYYY-MM-DD HH:mm:ss'}
-            value={mode === 'ts2dt' ? tsInput : dtInput}
-            onChange={(e) => {
-              const val = e.target.value;
-              if (mode === 'ts2dt') {
-                setTsInput(val);
-              } else {
-                setDtInput(val);
-              }
-            }}
-            error={!!error}
-            helperText={error}
-            fullWidth
-            sx={timestampPageStyles.INPUT_STYLE}
-          />
-
-          <Stack direction="row" spacing={1.5}>
-            {/* 优化后的单位选择按钮组 */}
-            <Box
-              sx={{
-                flex: 1,
-                display: 'flex',
-                bgcolor: 'grey.50',
-                p: 0.5,
-                borderRadius: 3.5,
-                border: '1px solid',
-                borderColor: 'grey.100',
-              }}
-            >
-              {(['ms', 's'] as const).map((u) => (
-                <Box
-                  key={u}
-                  onClick={() => setUnit(u)}
-                  sx={{
-                    flex: 1,
-                    py: 0.8,
-                    textAlign: 'center',
-                    borderRadius: 3,
-                    cursor: 'pointer',
-                    fontSize: '0.75rem',
-                    fontWeight: 800,
-                    transition: 'all 0.2s',
-                    bgcolor: unit === u ? '#fff' : 'transparent',
-                    color: unit === u ? 'primary.main' : 'text.disabled',
-                    boxShadow: unit === u ? '0 2px 8px rgba(0,0,0,0.05)' : 'none',
-                  }}
-                >
-                  {u === 'ms' ? '毫秒 (ms)' : '秒 (s)'}
-                </Box>
-              ))}
-            </Box>
-
-            <Select
-              fullWidth
-              value={zone}
-              onChange={(e) => setZone(e.target.value as typeof zone)}
-              sx={{ ...timestampPageStyles.INPUT_STYLE, flex: 1, borderRadius: 4 }}
-              MenuProps={{
-                PaperProps: {
-                  sx: { borderRadius: 3, mt: 1, boxShadow: '0 12px 32px rgba(0,0,0,0.1)' },
-                },
-              }}
-            >
-              {ZONES.map((z) => (
-                <MenuItem key={z} value={z} sx={{ fontSize: '0.8rem', fontWeight: 600 }}>
-                  {z}
-                </MenuItem>
-              ))}
-            </Select>
-          </Stack>
-        </Stack>
-
-        {/* Main Action */}
-        <Button fullWidth variant="contained" onClick={convert}>
-          立即转换
-        </Button>
-
-        {/* Result View */}
-        <ResultView result={result} mode={mode} unit={unit} zone={zone} showMessage={showMessage} />
-      </Container>
-    </Box>
-  );
-}

pages/components/AutoRefreshToggle.tsx

@@ -1,51 +0,0 @@
-import { Box, Switch, Typography } from '@mui/material';
-
-interface AutoRefreshToggleProps {
-  autoRefresh: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-export default function AutoRefreshToggle({ autoRefresh, onChange }: AutoRefreshToggleProps) {
-  return (
-    <Box
-      sx={{
-        mb: 3,
-        p: 1.5,
-        borderRadius: 4,
-        bgcolor: 'background.paper',
-        border: '1px solid',
-        borderColor: 'grey.100',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
-        transition: 'all 0.2s',
-        '&:hover': {
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
-        },
-      }}
-    >
-      <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem', px: 1.2 }}>
-        清理后自动刷新页面
-      </Typography>
-      <Switch
-        size="small"
-        checked={autoRefresh}
-        onChange={(e) => onChange(e.target.checked)}
-        color="warning"
-        sx={{
-          '& .MuiSwitch-track': {
-            borderRadius: 20,
-          },
-          '& .MuiSwitch-thumb': {
-            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-            transition: 'all 0.2s',
-          },
-          '&:hover .MuiSwitch-thumb': {
-            transform: 'scale(1.1)',
-          },
-        }}
-      />
-    </Box>
-  );
-}

pages/components/CleaningResult.tsx

@@ -1,36 +0,0 @@
-import { Box, Alert } from '@mui/material';
-import type { CleaningResult } from '@/types/storage';
-import { formatCleaningResult } from '@/utils/storageCleaner';
-
-interface CleaningResultProps {
-  result: CleaningResult | null;
-}
-
-export default function CleaningResult({ result }: CleaningResultProps) {
-  if (!result) return null;
-
-  return (
-    <Box sx={{ mt: 3, animation: 'fadeIn 0.3s ease-in-out' }}>
-      <Alert
-        severity={result.success ? 'success' : 'error'}
-        sx={{
-          borderRadius: 3,
-          py: 1,
-          px: 2,
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
-          '& .MuiAlert-message': {
-            fontSize: '0.8rem',
-            fontWeight: 600,
-            lineHeight: 1.4,
-          },
-          '& .MuiAlert-icon': {
-            fontSize: '1.2rem',
-            mr: 1,
-          },
-        }}
-      >
-        {result.success ? formatCleaningResult(result) : result.error || '清理失败'}
-      </Alert>
-    </Box>
-  );
-}

pages/components/LiveClock.tsx

@@ -1,155 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Stack, Typography, Box, IconButton, Tooltip, Divider, alpha } from '@mui/material';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CopyButton from '@/components/CopyButton';
-import { timestampPageStyles } from '@/config/pageTheme';
-import type { UnitType } from '@/config/pageTheme';
-import type { SnackbarOptions } from '@/components/GlobalSnackbar';
-
-interface LiveClockProps {
-  unit: UnitType;
-  onUseNow: (val: number) => void;
-  onUnitChange: (u: UnitType) => void;
-  showMessage?: (message: string, options?: SnackbarOptions) => void;
-}
-
-const LiveClock = React.memo(({ unit, onUseNow, onUnitChange, showMessage }: LiveClockProps) => {
-  const [now, setNow] = useState(() => Date.now());
-  const onUseNowRef = useRef(onUseNow);
-  const showMessageRef = useRef(showMessage);
-
-  useEffect(() => {
-    onUseNowRef.current = onUseNow;
-    showMessageRef.current = showMessage;
-  }, [onUseNow, showMessage]);
-
-  useEffect(() => {
-    const t = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(t);
-  }, []);
-
-  const displayVal = useMemo(
-    () => String(Math.floor(now / (unit === 'ms' ? 1 : 1000))),
-    [now, unit],
-  );
-
-  const handleUseNow = useCallback(() => {
-    onUseNowRef.current(now);
-    showMessageRef.current?.('已使用当前时间戳', { severity: 'success' });
-  }, [now, showMessageRef]);
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        flexWrap: 'wrap',
-        gap: 1.5,
-        p: 1.8,
-        mb: 2.5,
-        bgcolor: alpha(timestampPageStyles.primaryColor, 0.04),
-        borderRadius: 4,
-        border: '1px solid',
-        borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
-      }}
-    >
-      <Stack spacing={0.5} sx={{ minWidth: { xs: 100, sm: 120 } }}>
-        <Typography
-          variant="caption"
-          sx={{
-            color: timestampPageStyles.primaryColor,
-            fontWeight: 800,
-            fontSize: '0.6rem',
-            textTransform: 'uppercase',
-            letterSpacing: 1,
-          }}
-        >
-          当前时间戳
-        </Typography>
-        <Typography
-          variant="subtitle2"
-          sx={{
-            fontWeight: 800,
-            color: timestampPageStyles.primaryColor,
-            fontFamily: 'monospace',
-            fontSize: { xs: '1.1rem', sm: '1.2rem' },
-            letterSpacing: '-0.5px',
-            lineHeight: 1.2,
-          }}
-        >
-          {displayVal}
-        </Typography>
-      </Stack>
-
-      <Stack direction="row" spacing={1} alignItems="center" sx={{ flexShrink: 0 }}>
-        {/* 胶囊式单位切换器 */}
-        <Box
-          sx={{
-            display: 'flex',
-            p: 0.4,
-            bgcolor: alpha(timestampPageStyles.primaryColor, 0.08),
-            borderRadius: 2.5,
-            border: '1px solid',
-            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
-          }}
-        >
-          {(['ms', 's'] as const).map((u) => (
-            <Box
-              key={u}
-              onClick={() => onUnitChange(u)}
-              sx={{
-                px: { xs: 1, sm: 1.2 },
-                py: 0.35,
-                borderRadius: 2,
-                cursor: 'pointer',
-                fontSize: '0.65rem',
-                fontWeight: 900,
-                transition: 'all 0.2s',
-                bgcolor: unit === u ? '#fff' : 'transparent',
-                color: unit === u ? 'primary.main' : alpha(timestampPageStyles.primaryColor, 0.4),
-                boxShadow: unit === u ? '0 2px 6px rgba(33, 150, 243, 0.2)' : 'none',
-              }}
-            >
-              {u.toUpperCase()}
-            </Box>
-          ))}
-        </Box>
-
-        <Divider
-          orientation="vertical"
-          flexItem
-          sx={{ mx: 0.5, my: 1, borderColor: alpha(timestampPageStyles.primaryColor, 0.1) }}
-        />
-
-        <Stack direction="row" spacing={0.5}>
-          <Tooltip title="填充到下方">
-            <IconButton
-              size="small"
-              onClick={handleUseNow}
-              sx={{
-                color: timestampPageStyles.primaryColor,
-                bgcolor: '#fff',
-                boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
-                '&:hover': { bgcolor: timestampPageStyles.primaryColor, color: '#fff' },
-              }}
-            >
-              <AccessTimeIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-          <CopyButton
-            text={displayVal}
-            tooltip="复制时间戳"
-            size="small"
-            color={timestampPageStyles.primaryColor}
-            showMessage={showMessage}
-          />
-        </Stack>
-      </Stack>
-    </Box>
-  );
-});
-
-LiveClock.displayName = 'LiveClock';
-
-export default LiveClock;

pages/components/OptionItem.tsx

@@ -1,107 +0,0 @@
-import { Box, Checkbox, Typography } from '@mui/material';
-import { formatSize } from '@/utils/storageCleaner';
-import { storageCleanerPageStyles } from '@/config/pageTheme';
-
-interface OptionItemProps {
-  label: string;
-  checked: boolean;
-  size?: number;
-  isCount?: boolean;
-  onChange: () => void;
-}
-
-export default function OptionItem({
-  label,
-  checked,
-  size,
-  isCount = false,
-  onChange,
-}: OptionItemProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        py: 1,
-        px: { xs: 1, sm: 1.5 },
-        borderRadius: 3,
-        transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-        bgcolor: checked ? 'rgba(255, 152, 0, 0.05)' : 'transparent',
-        border: `1px solid ${checked ? 'rgba(255, 152, 0, 0.2)' : 'transparent'}`,
-        '&:hover': {
-          bgcolor: checked ? 'rgba(255, 152, 0, 0.1)' : 'rgba(0, 0, 0, 0.02)',
-          transform: 'translateY(-1px)',
-          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-        },
-      }}
-    >
-      <Box sx={{ flex: 1, minWidth: 0, mr: 1.5 }}>
-        <Typography
-          variant="body2"
-          fontWeight={700}
-          color={checked ? storageCleanerPageStyles.warningColor : 'text.primary'}
-          sx={{
-            fontSize: '0.75rem',
-            display: 'block',
-            lineHeight: 1.2,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            transition: 'color 0.2s',
-          }}
-        >
-          {label}
-        </Typography>
-        {size !== undefined && size > 0 ? (
-          <Typography
-            variant="caption"
-            sx={{
-              color: 'text.secondary',
-              fontSize: '0.65rem',
-              fontWeight: 600,
-              display: 'block',
-              mt: 0.3,
-              lineHeight: 1,
-              whiteSpace: 'nowrap',
-              opacity: 0.8,
-            }}
-          >
-            {isCount ? `${size} 个` : formatSize(size)}
-          </Typography>
-        ) : (
-          <Typography
-            variant="caption"
-            sx={{
-              color: 'grey.400',
-              fontSize: '0.65rem',
-              fontWeight: 500,
-              display: 'block',
-              mt: 0.3,
-              lineHeight: 1,
-              fontStyle: 'italic',
-            }}
-          >
-            无数据
-          </Typography>
-        )}
-      </Box>
-      <Checkbox
-        size="small"
-        checked={checked}
-        onChange={onChange}
-        color="warning"
-        sx={{
-          p: 0.6,
-          '& .MuiSvgIcon-root': {
-            fontSize: 18,
-            transition: 'transform 0.2s',
-          },
-          '&:hover .MuiSvgIcon-root': {
-            transform: 'scale(1.1)',
-          },
-        }}
-      />
-    </Box>
-  );
-}

pages/components/ResultView.tsx

@@ -1,145 +0,0 @@
-import React, { useMemo } from 'react';
-import { Typography, Box, Fade, Stack, alpha } from '@mui/material';
-import dayjs from '@/utils/dayjs';
-import CopyButton from '@/components/CopyButton';
-import { DATE_FORMAT, timestampPageStyles } from '@/config/pageTheme';
-import type { UnitType } from '@/config/pageTheme';
-import type { SnackbarOptions } from '@/components/GlobalSnackbar';
-
-interface ResultViewProps {
-  result: string;
-  mode: 'ts2dt' | 'dt2ts';
-  unit: UnitType;
-  zone: string;
-  showMessage?: (message: string, options?: SnackbarOptions) => void;
-}
-
-const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: ResultViewProps) => {
-  const extraInfo = useMemo(() => {
-    if (!result) return null;
-    const d =
-      mode === 'ts2dt'
-        ? dayjs(result, DATE_FORMAT).tz(zone)
-        : unit === 'ms'
-          ? dayjs(Number(result))
-          : dayjs.unix(Number(result));
-
-    return {
-      relative: d.fromNow(),
-      iso: d.toISOString(),
-      utc: d.utc().format(DATE_FORMAT) + ' UTC',
-    };
-  }, [result, mode, zone, unit]);
-
-  if (!result) return null;
-
-  return (
-    <Fade in={!!result}>
-      <Box sx={{ mt: 3, pt: 2.5, borderTop: '1px solid', borderColor: 'grey.50' }}>
-        <Typography
-          variant="caption"
-          sx={{
-            color: 'text.secondary',
-            mb: 1.2,
-            display: 'block',
-            fontWeight: 800,
-            fontSize: '0.7rem',
-          }}
-        >
-          转换结果
-        </Typography>
-
-        <Box
-          sx={{
-            bgcolor: alpha(timestampPageStyles.primaryColor, 0.05),
-            p: 2,
-            borderRadius: 4,
-            position: 'relative',
-            mb: 2.5,
-            border: '1px solid',
-            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Typography
-            variant="body1"
-            sx={{
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              color: timestampPageStyles.primaryColor,
-              wordBreak: 'break-all',
-              pr: 4,
-              fontSize: '1rem',
-            }}
-          >
-            {result}
-          </Typography>
-          <CopyButton
-            text={result}
-            tooltip="复制结果"
-            size="small"
-            color={timestampPageStyles.primaryColor}
-            showMessage={showMessage}
-          />
-        </Box>
-
-        <Stack
-          spacing={1.2}
-          sx={{
-            bgcolor: alpha(timestampPageStyles.primaryColor, 0.05),
-            p: 2,
-            borderRadius: 4,
-            border: '1px solid',
-            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
-          }}
-        >
-          {[
-            { label: '相对时间', value: extraInfo?.relative },
-            { label: 'ISO 8601', value: extraInfo?.iso },
-            { label: 'UTC 时间', value: extraInfo?.utc },
-          ].map((item) => (
-            <Box
-              key={item.label}
-              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-            >
-              <Typography
-                variant="caption"
-                sx={{ color: 'text.disabled', fontWeight: 700, fontSize: '0.65rem', pr: 4 }}
-              >
-                {item.label}
-              </Typography>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Typography
-                  variant="caption"
-                  sx={{
-                    fontFamily: 'monospace',
-                    color: timestampPageStyles.primaryColor,
-                    fontWeight: 600,
-                    fontSize: '0.65rem',
-                  }}
-                >
-                  {item.value}
-                </Typography>
-                {item.value && (
-                  <CopyButton
-                    text={item.value}
-                    tooltip="复制"
-                    size="small"
-                    color={timestampPageStyles.primaryColor}
-                    showMessage={showMessage}
-                  />
-                )}
-              </Box>
-            </Box>
-          ))}
-        </Stack>
-      </Box>
-    </Fade>
-  );
-});
-
-ResultView.displayName = 'ResultView';
-
-export default ResultView;

pages/components/StorageOptionsGrid.tsx

@@ -1,136 +0,0 @@
-import { Box, Checkbox, Divider, Grid, Typography } from '@mui/material';
-import type { StorageCleanerOptions } from '@/types/storage';
-import OptionItem from './OptionItem';
-
-interface StorageOptionsGridProps {
-  options: StorageCleanerOptions;
-  sizes: Record<string, number>;
-  allSelected: boolean;
-  someSelected: boolean;
-  onOptionChange: (key: keyof StorageCleanerOptions) => void;
-  onSelectAll: (checked: boolean) => void;
-}
-
-export default function StorageOptionsGrid({
-  options,
-  sizes,
-  allSelected,
-  someSelected,
-  onOptionChange,
-  onSelectAll,
-}: StorageOptionsGridProps) {
-  return (
-    <Box
-      sx={{
-        mb: 3,
-        border: '1px solid',
-        borderColor: 'grey.100',
-        borderRadius: 4,
-        bgcolor: 'background.paper',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
-        transition: 'all 0.2s',
-        overflow: 'hidden',
-        '&:hover': {
-          boxShadow: '0 6px 16px rgba(0, 0, 0, 0.08)',
-        },
-      }}
-    >
-      <Box sx={{ p: 1.2 }}>
-        <Grid container spacing={1.5}>
-          <Grid size={6}>
-            <OptionItem
-              label="LocalStorage"
-              checked={options.localStorage}
-              size={sizes.localStorage}
-              onChange={() => onOptionChange('localStorage')}
-            />
-          </Grid>
-          <Grid size={6}>
-            <OptionItem
-              label="Session Storage"
-              checked={options.sessionStorage}
-              size={sizes.sessionStorage}
-              onChange={() => onOptionChange('sessionStorage')}
-            />
-          </Grid>
-          <Grid size={6}>
-            <OptionItem
-              label="IndexedDB"
-              checked={options.indexedDB}
-              size={sizes.indexedDB}
-              onChange={() => onOptionChange('indexedDB')}
-            />
-          </Grid>
-          <Grid size={6}>
-            <OptionItem
-              label="Cookies"
-              checked={options.cookies}
-              size={sizes.cookies}
-              onChange={() => onOptionChange('cookies')}
-            />
-          </Grid>
-          <Grid size={6}>
-            <OptionItem
-              label="Cache Storage"
-              checked={options.cacheStorage}
-              size={sizes.cacheStorage}
-              isCount
-              onChange={() => onOptionChange('cacheStorage')}
-            />
-          </Grid>
-          <Grid size={6}>
-            <OptionItem
-              label="Service Workers"
-              checked={options.serviceWorkers}
-              size={sizes.serviceWorkers}
-              isCount
-              onChange={() => onOptionChange('serviceWorkers')}
-            />
-          </Grid>
-        </Grid>
-      </Box>
-      <Divider sx={{ mx: 0, borderColor: 'grey.100' }} />
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          px: 2.7,
-          py: 0.8,
-          borderBottomLeftRadius: 4,
-          borderBottomRightRadius: 4,
-          transition: 'all 0.2s',
-          '&:hover': {
-            bgcolor: 'rgba(0, 0, 0, 0.04)',
-          },
-        }}
-      >
-        <Typography
-          variant="body2"
-          fontWeight={700}
-          sx={{ color: 'text.secondary', fontSize: '0.7rem', px: 0 }}
-        >
-          全选所有项
-        </Typography>
-        <Checkbox
-          size="small"
-          checked={allSelected}
-          indeterminate={someSelected}
-          onChange={(e) => onSelectAll(e.target.checked)}
-          color="warning"
-          sx={{
-            p: 0.6,
-            mr: 0,
-            '& .MuiSvgIcon-root': {
-              fontSize: 18,
-              transition: 'transform 0.2s',
-            },
-            '&:hover .MuiSvgIcon-root': {
-              transform: 'scale(1.1)',
-            },
-          }}
-        />
-      </Box>
-    </Box>
-  );
-}

pages/hooks/useActiveTabDomain.ts

@@ -1,29 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getActiveTabDomain } from '@/utils/chromeTabs';
-
-/**
- * 自动获取并维护当前活动标签页域名的 Hook
- */
-export function useActiveTabDomain() {
-  const [domain, setDomain] = useState<string>('');
-
-  useEffect(() => {
-    getActiveTabDomain().then(setDomain);
-
-    // 如果需要实时同步（如切换标签页），可以监听 chrome.tabs.onActivated
-    const handleActivated = () => getActiveTabDomain().then(setDomain);
-    const handleUpdated = (_: number, changeInfo: { url?: string }) => {
-      if (changeInfo.url) getActiveTabDomain().then(setDomain);
-    };
-
-    chrome.tabs.onActivated.addListener(handleActivated);
-    chrome.tabs.onUpdated.addListener(handleUpdated);
-
-    return () => {
-      chrome.tabs.onActivated.removeListener(handleActivated);
-      chrome.tabs.onUpdated.removeListener(handleUpdated);
-    };
-  }, []);
-
-  return domain;
-}

pages/hooks/useSidePanelState.ts

@@ -1,60 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { MessageAction, onMessage } from '@/utils/messages';
-import { useSnackbar } from '@/components/GlobalSnackbar';
-
-/**
- * 管理侧边栏状态检测与开启逻辑的 Hook
- */
-export function useSidePanelState() {
-  const [sidePanelOpen, setSidePanelOpen] = useState(false);
-  const { showMessage } = useSnackbar();
-
-  const checkSidePanelState = useCallback(async () => {
-    try {
-      if (typeof chrome.runtime.getContexts === 'function') {
-        const contexts = await chrome.runtime.getContexts({
-          contextTypes: ['SIDE_PANEL'],
-        });
-        setSidePanelOpen(contexts.length > 0);
-      } else {
-        setSidePanelOpen(false);
-      }
-    } catch (error) {
-      console.error('检测侧边栏状态失败:', error);
-      setSidePanelOpen(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    // 使用 requestAnimationFrame 避免同步调用 setState
-    requestAnimationFrame(() => {
-      checkSidePanelState().catch(console.error);
-    });
-
-    // 监听侧边栏状态变化消息
-    const removeListener = onMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, (message) => {
-      setSidePanelOpen(message.data.isOpen);
-    });
-
-    return () => {
-      removeListener();
-    };
-  }, [checkSidePanelState]);
-
-  const handleOpenSidePanel = useCallback(async () => {
-    try {
-      await chrome.sidePanel.open({ windowId: chrome.windows.WINDOW_ID_CURRENT });
-      setSidePanelOpen(true);
-      showMessage('侧边栏已打开', { severity: 'success' });
-    } catch (error) {
-      console.error('打开侧边栏失败:', error);
-      showMessage('打开侧边栏失败', { severity: 'error' });
-    }
-  }, [showMessage]);
-
-  return {
-    sidePanelOpen,
-    handleOpenSidePanel,
-    checkSidePanelState,
-  };
-}

providers/RouterProvider.tsx

@@ -1,10 +1,10 @@
-import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
 import type { PageType, StorageSchema } from '@/types/storage';
 import { storageUtil } from '@/utils/chromeStorage';
 import {
-  getDefaultVisibleFeatureKeys,
-  getDefaultPageOrder,
   getAllFeatureKeys,
+  getDefaultPageOrder,
+  getDefaultVisibleFeatureKeys,
 } from '@/config/features';
 
 /**

providers/__tests__/RouterProvider.test.tsx

@@ -1,8 +1,7 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, waitFor, act } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
-import { RouterProvider, useRouter } from '../RouterProvider';
+import { RouterProvider, useRouter } from '@/providers/RouterProvider';
 import { storageUtil } from '@/utils/chromeStorage';
-import React from 'react';
 
 // Mock storageUtil
 vi.mock('@/utils/chromeStorage', () => ({
@@ -43,7 +42,7 @@ describe('RouterProvider', () => {
   });
 
   it('应该使用默认值初始化路由', async () => {
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) =>
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
       Promise.resolve(defaultValue),
     );
 
@@ -76,7 +75,7 @@ describe('RouterProvider', () => {
   });
 
   it('导航时应该更新指定的 syncKey', async () => {
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) =>
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
       Promise.resolve(defaultValue),
     );
 

tsconfig.json

@@ -7,6 +7,7 @@
     "module": "ESNext", // 支持 import.meta
     "moduleResolution": "Bundler", // 或者用 "Node"
     "strict": true,
+    "resolveJsonModule": true,
 
     /* --- 代码质量检查 --- */
     // 声明了但没使用的变量报错（防止代码冗余）
@@ -29,17 +30,17 @@
   },
   // 确保包含你的源代码目录
   "include": [
-    "vite-env.d.ts",
     "entrypoints/**/*",
     "pages/**/*",
     "components/**/*",
+    "providers/**/*",
     "utils/**/*",
+    "config/**/*",
     "types/**/*",
     "assets/**/*",
     "hooks/**/*",
     ".wxt/types/**/*.ts",
     ".wxt/types/*.d.ts",
-    "components",
     "eslint.config.ts"
   ],
   "exclude": ["node_modules", ".wxt", "dist"]

types/storage.d.ts

@@ -81,6 +81,10 @@ export interface StorageSchema {
   'qrCode/qrExpanded': boolean;
   /** 二维码工具中 URL 部分是否展开 */
   'qrCode/urlExpanded': boolean;
+  /** 搜索历史记录 */
+  'app/searchHistory': string[];
+  /** 语言偏好设置 */
+  'app/language': string;
 }
 
 /**

utils/__tests__/jwt.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
-import { parseJwt, decodeBase64Url } from '../jwt';
+import { decodeBase64Url, parseJwt } from '@/utils/jwt';
 
 describe('jwt utils', () => {
   describe('decodeBase64Url', () => {

utils/__tests__/storageCleaner.test.ts

@@ -1,8 +1,5 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
-import {
+import { formatSize, isRestrictedUrl } from '@/utils/storageCleaner';
-  isRestrictedUrl,
-  formatSize,
-} from '../storageCleaner';
 
 describe('storageCleaner utils', () => {
   describe('isRestrictedUrl', () => {

utils/__tests__/textStatistics.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
-import { getTextStats, formatByteSize } from '../textStatistics';
+import { formatByteSize, getTextStats } from '@/utils/textStatistics';
 
 describe('textStatistics utils', () => {
   describe('getTextStats', () => {
@@ -51,8 +51,10 @@ describe('textStatistics utils', () => {
 
   describe('formatByteSize', () => {
     it('should format bytes correctly', () => {
-      expect(formatByteSize(100)).toBe('100 Bytes');
+      expect(formatByteSize(100)).toBe('100 B');
-      expect(formatByteSize(0)).toBe('0 Bytes');
+      expect(formatByteSize(0)).toBe('0 B');
+      expect(formatByteSize(1024)).toBe('1.0 KB');
+      expect(formatByteSize(1024 * 1024)).toBe('1.00 MB');
     });
   });
 });

utils/chromeTabs.ts

@@ -31,6 +31,26 @@ export async function getActiveTabDomain(): Promise<string> {
   return '';
 }
 
+/**
+ * 在新标签页中打开扩展页面
+ * @param page - 扩展页面路径（如 'popup.html'）
+ * @param params - 可选的查询参数
+ */
+export async function openExtensionPage(
+  page: string,
+  params?: Record<string, string>,
+): Promise<void> {
+  try {
+    const url = new URL(chrome.runtime.getURL(page));
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
+    }
+    await chrome.tabs.create({ url: url.toString() });
+  } catch (error) {
+    console.error('打开扩展页面失败:', error);
+  }
+}
+
 /**
  * 确保内容脚本已注入
  */

utils/dayjs.ts

@@ -8,6 +8,4 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
-dayjs.locale('zh-cn');
-
 export default dayjs;

utils/storageCleaner.ts

@@ -1,4 +1,4 @@
-import type { StorageCleanerOptions, CleaningResult, StorageCleanResult } from '@/types/storage';
+import type { CleaningResult, StorageCleanerOptions, StorageCleanResult } from '@/types/storage';
 
 const RESTRICTED_PROTOCOLS = [
   'chrome:',
@@ -375,39 +375,38 @@ export async function clearStorage(
 
   if (failures.length > 0) {
     result.success = false;
-    result.error = '部分清理失败';
   }
 
   return result;
 }
 
-export function formatCleaningResult(result: CleaningResult): string {
+export function formatCleaningResult(
+  result: CleaningResult,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): string {
   const parts: string[] = [];
 
-  if (result.localStorage?.success) {
+  const optionKeys: (keyof StorageCleanerOptions)[] = [
-    parts.push(`${result.localStorage.count} 个 localStorage`);
+    'localStorage',
+    'sessionStorage',
+    'indexedDB',
+    'cookies',
+    'cacheStorage',
+    'serviceWorkers',
+  ];
+
+  for (const key of optionKeys) {
+    const r = result[key];
+    if (r?.success && r.count > 0) {
+      parts.push(`${r.count} ${t(`storageCleaner:options.${key}`)}`);
     }
-  if (result.sessionStorage?.success) {
-    parts.push(`${result.sessionStorage.count} 个 sessionStorage`);
-  }
-  if (result.indexedDB?.success) {
-    parts.push(`${result.indexedDB.count} 个 IndexedDB`);
-  }
-  if (result.cookies?.success) {
-    parts.push(`${result.cookies.count} 个 Cookies`);
-  }
-  if (result.cacheStorage?.success) {
-    parts.push(`${result.cacheStorage.count} 个 Cache`);
-  }
-  if (result.serviceWorkers?.success) {
-    parts.push(`${result.serviceWorkers.count} 个 Service Workers`);
   }
 
   if (parts.length === 0) {
-    return '该页面没有可清理的存储数据';
+    return t('storageCleaner:noDataToClean');
   }
 
-  return `清理了 ${parts.join(', ')}`;
+  return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
 }
 
 export function isEmptyResult(result: CleaningResult): boolean {

utils/textStatistics.ts

@@ -60,8 +60,18 @@ export function getTextStats(text: string): TextStats {
  * 格式化字节大小显示
  *
  * @param bytes 字节数
- * @returns 格式化后的字符串，例如 "100 Bytes"
+ * @returns 格式化后的字符串，例如 "1.2 KB" 或 "100 B"
  */
 export function formatByteSize(bytes: number): string {
-  return `${bytes} Bytes`;
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  const units = ['KB', 'MB', 'GB', 'TB'];
+  let size = bytes / 1024;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(unitIndex > 0 ? 2 : 1)} ${units[unitIndex]}`;
 }

utils/useStorageState.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
 import type { StorageSchema } from '@/types/storage';
 

vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

vitest.setup.ts

@@ -1,18 +1,33 @@
 import '@testing-library/jest-dom';
 import { vi, beforeEach, afterEach } from 'vitest';
 
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: {
+      changeLanguage: vi.fn(),
+      language: 'zh-CN',
+    },
+  }),
+  initReactI18next: {
+    type: '3rdParty',
+    init: vi.fn(),
+  },
+}));
+
 const storageMock = {
   local: {
-    get: vi.fn(),
+    get: vi.fn().mockImplementation(() => Promise.resolve({})),
-    set: vi.fn().mockResolvedValue(undefined),
+    set: vi.fn().mockImplementation(() => Promise.resolve()),
-    remove: vi.fn().mockResolvedValue(undefined),
+    remove: vi.fn().mockImplementation(() => Promise.resolve()),
-    clear: vi.fn().mockResolvedValue(undefined),
+    clear: vi.fn().mockImplementation(() => Promise.resolve()),
   },
   session: {
-    get: vi.fn(),
+    get: vi.fn().mockImplementation(() => Promise.resolve({})),
-    set: vi.fn().mockResolvedValue(undefined),
+    set: vi.fn().mockImplementation(() => Promise.resolve()),
-    remove: vi.fn().mockResolvedValue(undefined),
+    remove: vi.fn().mockImplementation(() => Promise.resolve()),
-    clear: vi.fn().mockResolvedValue(undefined),
+    clear: vi.fn().mockImplementation(() => Promise.resolve()),
   },
   onChanged: {
     addListener: vi.fn(),
@@ -28,6 +43,7 @@ Object.defineProperty(global, 'chrome', {
       query: vi.fn().mockResolvedValue([]),
       get: vi.fn(),
       sendMessage: vi.fn().mockResolvedValue(undefined),
+      create: vi.fn().mockResolvedValue({}),
     },
     runtime: {
       id: 'test-extension-id',
@@ -60,6 +76,9 @@ Object.defineProperty(global, 'chrome', {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  // Ensure storage mocks return objects even after clearAllMocks
+  storageMock.local.get.mockResolvedValue({});
+  storageMock.session.get.mockResolvedValue({});
 });
 
 afterEach(() => {