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>

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 { TextField, Stack, Box, Container, Typography, Paper } from '@mui/material';
+import { useMemo, useState } from 'react';
+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,47 +16,51 @@ interface SectionProps {
   color: string;
 }
 
-const Section = ({ title, content, color }: SectionProps) => (
-  <Paper
-    variant="outlined"
-    sx={{
-      p: 2,
-      borderRadius: 3,
-      borderColor: `${color}40`,
-      bgcolor: `${color}05`,
-      position: 'relative',
-    }}
-  >
-    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
-      <Typography variant="subtitle2" sx={{ fontWeight: 800, color: color, letterSpacing: 0.5 }}>
-        {title}
-      </Typography>
-      <Box sx={{ display: 'flex', gap: 0.5 }}>
-        <CopyButton text={JSON.stringify(content)} size="small" />
-      </Box>
-    </Box>
-    <Box
-      component="pre"
+const Section = ({ title, content, color }: SectionProps) => {
+  const { t } = useTranslation(['jwt']);
+  return (
+    <Paper
+      variant="outlined"
       sx={{
-        m: 0,
-        p: 1.5,
-        bgcolor: 'rgba(255,255,255,0.6)',
-        borderRadius: 2,
-        fontSize: '0.8rem',
-        fontFamily: 'monospace',
-        overflowX: 'auto',
-        whiteSpace: 'pre-wrap',
-        wordBreak: 'break-all',
-        border: '1px solid rgba(0,0,0,0.05)',
+        p: 2,
+        borderRadius: 3,
+        borderColor: `${color}40`,
+        bgcolor: `${color}05`,
+        position: 'relative',
       }}
     >
-      {content ? formatJson(content) : '无法解析'}
-    </Box>
-  </Paper>
-);
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+        <Typography variant="subtitle2" sx={{ fontWeight: 800, color: color, letterSpacing: 0.5 }}>
+          {title}
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 0.5 }}>
+          <CopyButton text={JSON.stringify(content)} size="small" />
+        </Box>
+      </Box>
+      <Box
+        component="pre"
+        sx={{
+          m: 0,
+          p: 1.5,
+          bgcolor: 'rgba(255,255,255,0.6)',
+          borderRadius: 2,
+          fontSize: '0.8rem',
+          fontFamily: 'monospace',
+          overflowX: 'auto',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-all',
+          border: '1px solid rgba(0,0,0,0.05)',
+        }}
+      >
+        {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

@@ -0,0 +1,285 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import LinkIcon from '@mui/icons-material/Link';
+import ImageIcon from '@mui/icons-material/Image';
+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 { useSnackbar } from '@/components/GlobalSnackbar';
+import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
+import { useTranslation } from 'react-i18next';
+
+interface QrCodeToUrlSectionProps {
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+}
+
+const QrCodeToUrlSection = ({ expanded, onExpandedChange }: QrCodeToUrlSectionProps) => {
+  const { t } = useTranslation(['qrCode']);
+  const { showMessage } = useSnackbar();
+  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);
+  const [dragging, setDragging] = useState(false);
+
+  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]);
+    }
+  };
+
+  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) {
+      handleFileChange(droppedFile);
+    }
+  };
+
+  const parseQrCode = async () => {
+    if (!qrCodeFile) {
+      showMessage(t('qrCode:selectImage'), { severity: 'error', autoHideDuration: 300 });
+      return;
+    }
+
+    try {
+      setParsing(true);
+      setParseError('');
+      setParsedUrl('');
+
+      const result = await parseQrCodeFromFile(qrCodeFile);
+
+      if (result.success && result.data) {
+        setParsedUrl(result.data);
+        showMessage(t('qrCode:parseSuccess'), { severity: 'success', autoHideDuration: 1000 });
+      } else {
+        showMessage(result.error || t('qrCode:noQrDetected'), {
+          severity: 'error',
+          autoHideDuration: 1000,
+        });
+      }
+    } catch (error) {
+      console.error('解析二维码失败:', error);
+      showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
+    } finally {
+      setParsing(false);
+    }
+  };
+
+  // 监听粘贴事件
+  useEffect(() => {
+    const handlePaste = async (e: ClipboardEvent) => {
+      if (!expanded) return;
+
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.startsWith('image/')) {
+          e.preventDefault();
+
+          const file = items[i].getAsFile();
+          if (file) {
+            try {
+              handleFileChange(file);
+              showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+            } catch (error) {
+              console.error('处理粘贴图片失败:', error);
+              showMessage(t('qrCode:imagePasteError'), {
+                severity: 'error',
+                autoHideDuration: 3000,
+              });
+            }
+          }
+          break;
+        }
+      }
+    };
+
+    document.addEventListener('paste', handlePaste);
+
+    return () => {
+      document.removeEventListener('paste', handlePaste);
+    };
+  }, [expanded, showMessage, handleFileChange, t]);
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={(_, isExpanded) => onExpandedChange(isExpanded)}
+      sx={qrCodePageStyles.ACCORDION}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={qrCodePageStyles.ACCORDION_SUMMARY}>
+        <Box sx={qrCodePageStyles.ACCORDION_TITLE_ICON}>
+          <LinkIcon color="success" />
+          <Typography variant="subtitle1" sx={qrCodePageStyles.ACCORDION_TITLE_TEXT}>
+            {t('qrCode:qrToUrl')}
+          </Typography>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Stack spacing={3}>
+          <Box
+            sx={qrCodePageStyles.DROPZONE(dragging, !!qrCodeFile)}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleInputChange}
+              style={{ display: 'none' }}
+              id="qr-code-upload"
+            />
+            <label
+              htmlFor="qr-code-upload"
+              style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
+            >
+              {qrCodeFile ? (
+                <Box sx={qrCodePageStyles.IMAGE_PREVIEW_WRAPPER}>
+                  <Box sx={qrCodePageStyles.IMAGE_PREVIEW_BOX}>
+                    <img
+                      src={previewUrl}
+                      alt="QR Code Preview"
+                      style={qrCodePageStyles.IMAGE_PREVIEW_IMG}
+                    />
+                    <IconButton
+                      size="small"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleClearFile();
+                      }}
+                      sx={qrCodePageStyles.CLEAR_BUTTON}
+                    >
+                      <ClearIcon fontSize="small" />
+                    </IconButton>
+                  </Box>
+                  <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+                    {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">
+                    {t('qrCode:supportFormats')}
+                  </Typography>
+                </>
+              )}
+            </label>
+          </Box>
+
+          <Button
+            variant="contained"
+            startIcon={parsing ? <CircularProgress size={16} color="inherit" /> : <LinkIcon />}
+            onClick={parseQrCode}
+            disabled={parsing}
+            sx={qrCodePageStyles.PRIMARY_BUTTON}
+          >
+            {parsing ? t('qrCode:parsing') : t('qrCode:parseButton')}
+          </Button>
+
+          <Box sx={qrCodePageStyles.RESULT_INPUT}>
+            <TextField
+              label={t('qrCode:resultLabel')}
+              value={parsedUrl}
+              fullWidth
+              variant="outlined"
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <CopyButton
+                        text={parsedUrl}
+                        tooltip={t('qrCode:copyTooltip')}
+                        size="small"
+                        color={qrCodePageStyles.primaryColor}
+                        showMessage={showMessage}
+                      />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+              sx={qrCodePageStyles.INPUT_STYLE}
+            />
+          </Box>
+
+          {parseError && (
+            <Alert severity="error" sx={{ borderRadius: 3 }}>
+              {parseError}
+            </Alert>
+          )}
+        </Stack>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default QrCodeToUrlSection;

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="存储清理"
-      subtitle={domain || '加载中...'}
+      title={t('storageCleaner:pageTitle')}
+      subtitle={domain || t('storageCleaner:loading')}
       badge={
         totalSize > 0 ? (
-          <Box
-            sx={{
-              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 sx={storageCleanerPageStyles.DOMAIN_HEADER_BADGE}>
+            {t('storageCleaner:occupied', { size: formatSize(totalSize) })}
           </Box>
         ) : null
       }
-      iconSx={{
-        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)',
-        },
-      }}
+      iconSx={storageCleanerPageStyles.DOMAIN_HEADER_ICON}
       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
-      sx={{
-        py: 8,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: { xs: 'auto', sm: '400px' },
-        textAlign: 'center',
-      }}
-    >
+    <Container sx={storageCleanerPageStyles.ERROR_DISPLAY_CONTAINER}>
       <Box sx={{ width: '100%', maxWidth: 320 }}>
-        <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)',
-          }}
-        >
+        <Box sx={storageCleanerPageStyles.ERROR_DISPLAY_BOX}>
           <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 StorageCleanerConfirm from '@/components/StorageCleanerConfirm';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
 import { useStorageCleaner } from './useStorageCleaner';
-import DomainHeader from './components/DomainHeader';
-import StorageOptionsGrid from './components/StorageOptionsGrid';
-import AutoRefreshToggle from './components/AutoRefreshToggle';
-import ErrorDisplay from './components/ErrorDisplay';
-import CleaningResult from './components/CleaningResult';
+import DomainHeader from './DomainHeader';
+import StorageOptionsGrid from './StorageOptionsGrid';
+import AutoRefreshToggle from './AutoRefreshToggle';
+import ErrorDisplay from './ErrorDisplay';
+import CleaningResult from './CleaningResult';
+import { useTranslation } from 'react-i18next';
 
-export default function StorageCleanerPage() {
-  const { showMessage } = useGlobalSnackbar();
+export default function Index() {
+  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={{
-            bgcolor: storageCleanerPageStyles.warningColor,
-            '&:hover': {
-              bgcolor: storageCleanerPageStyles.warningDark,
-            },
-          }}
+          sx={storageCleanerPageStyles.CONFIRM_DIALOG_CONFIRM}
           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 = { ...prev, [key]: !prev[key] };
-        storageUtil.set('storageCleaner/preferences', {
-          autoRefresh,
-          selectedTypes: newOptions,
-        });
-        return newOptions;
+      const newOptions = { ...options, [key]: !options[key] };
+      setOptions(newOptions);
+      await storageUtil.set('storageCleaner/preferences', {
+        autoRefresh,
+        selectedTypes: 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 { Box, Container, TextField, Grid, Paper, Typography, alpha } from '@mui/material';
+import { useMemo, useState } from 'react';
+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: '单词数', value: stats.words },
-    { label: '行数', value: stats.lines },
-    { label: '字节大小', value: formatByteSize(stats.bytes) },
+    { label: t('textStatistics:characters'), value: stats.characters },
+    { label: t('textStatistics:words'), value: stats.words },
+    { label: t('textStatistics:lines'), value: stats.lines },
+    { label: t('textStatistics:bytes'), value: formatByteSize(stats.bytes) },
   ];
 
   return (
@@ -29,8 +31,8 @@ export default function TextStatisticsPage() {
       <Container sx={{ p: 2 }}>
         {/* 头部区域 */}
         <PageHeader
-          title="文本统计"
-          subtitle="实时分析文本的字符、单词、行数及字节大小"
+          title={t('textStatistics:pageTitle')}
+          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;
-  setDtInput: (value: string) => void;
+  setInput: (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) => {
-    setTsInput(value);
-    setError('');
-  }, []);
-
-  const handleSetDtInput = useCallback((value: string) => {
-    setDtInput(value);
-    setError('');
-  }, []);
+  const setInput = useCallback(
+    (value: string) => {
+      if (mode === 'ts2dt') {
+        setTsInput(value);
+      } else {
+        setDtInput(value);
+      }
+      setError('');
+    },
+    [mode],
+  );
 
   return {
     mode,
@@ -103,8 +106,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     result,
     error,
     setMode: handleSetMode,
-    setTsInput: handleSetTsInput,
-    setDtInput: handleSetDtInput,
+    setInput,
     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,
-  };
-}