Develop (#21)

docs: 添加组件文档注释和类型导入
refactor: 统一使用 SnackbarOptions 类型
style: 优化导入语句顺序和格式
refactor: 简化假数据生成器中的faker导入和使用
feat(form-recognizer): 增强表单识别功能并优化UI交互
refactor: 移除未使用的组件文件
refactor(页面头部): 提取通用 PageHeader 组件
style(组件): 调整自动刷新开关和存储选项网格的样式
style(ui): 调整时间戳页面和结果视图的样式
ci(workflow): 移除Firefox测试以简化CI流程
refactor(qrcode): 重构二维码解析功能并提取为独立模块
style(页面样式): 统一页面头部图标颜色并优化表单样式
feat(formMapping): 添加表单映射功能
feat(表单映射): 添加配置导出功能及状态提示
feat(表单填充): 新增智能表单填充功能
ci: 精简触发CI的工作流分支
test: 更新路由测试以匹配新增的路由数量
test: 将测试文件中的描述和断言翻译为中文
test(PageHeader): 添加组件测试用例
refactor(theme): 重构主题样式并优化仪表盘卡片组件
refactor(Button): 统一按钮样式并移除重复样式定义
docs: 更新 README 文件中的目录结构说明
refactor: 优化代码类型声明和UI布局
refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑
fix: 修复依赖项缺失导致的潜在问题
refactor: 重构表单识别和消息处理逻辑
feat(侧边栏): 添加侧边栏状态变化通知功能
refactor: 优化高亮组件渲染逻辑并添加防抖处理
refactor: 统一组件导出方式为默认导出
refactor: 重构样式系统并迁移至 MUI 主题
docs: 更新项目文档以反映新增功能和技术栈细节
feat: 添加错误边界组件以捕获子组件错误
refactor(ui): 使用全局 snackbar 替换本地通知组件
refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件
refactor(Snackbar): 重构消息提示组件并优化样式
refactor: 重构路由和功能配置系统
refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件
feat(表单映射): 增强高亮器功能并优化元素定位
refactor: 移除表单映射相关功能
feat: 实现页面组件懒加载并优化加载状态显示
refactor: 移除未使用的数据生成和验证工具类
chore: 更新应用图标文件
refactor(qrcode): 替换二维码生成和解析库以减小体积
feat: 添加在标签页打开功能并优化错误处理
feat: 支持独立标签页模式并重构路由配置
feat(ui): 优化响应式布局和样式设计
refactor: 移除URL工具相关代码
refactor: 简化页面标题和存储选项网格的响应式布局
refactor: 优化样式和错误处理
refactor: 重构页面组件结构
style(DashboardPage): 优化仪表盘布局为响应式网格
refactor(ToolCard): 重构工具卡片组件并添加详细注释
feat: 新增文本统计功能
feat(jwt): 添加 JWT 解析工具功能
docs: 更新 README 以更清晰地描述项目功能和结构
docs: 更新AGENTS.md文档以反映项目最新状态
test: 更新特征计数测试以匹配新增工具
style: 统一导入语句顺序
refactor(pages): 重构工具页面组件结构并优化功能实现
feat(顶部栏): 添加搜索功能和历史记录
feat: 添加多语言支持(i18n)
feat(顶部栏): 添加语言切换功能并优化国际化支持
feat(i18n): 增加语言归一化和同步功能
fix(剪贴板): 使用国际化文本替换剪贴板消息
test(顶部栏): 更新测试以匹配国际化标题
refactor: 重构组件目录结构
refactor(Dashboard): 优化卡片组件结构并移除无用属性
refactor(timestamp): 合并输入处理函数并优化样式结构
refactor(dashboard): 重构仪表盘卡片组件并优化布局
refactor(storageCleaner): 重构样式代码并优化国际化处理
refactor(StorageCleaner): 优化条件判断和清理未使用的代码
refactor(QrCode): 重构二维码页面样式和组件结构
refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色
feat(TopBar): 优化顶部导航栏功能并添加样式配置
chore: 在.gitignore中添加docs目录
feat(JsonDiff): 添加差异引擎类型定义
feat: 新增 JSON 差异比较工具功能
feat(主题): 添加暗色模式支持并重构主题系统

config/features.tsx

@@ -5,8 +5,9 @@ import StorageIcon from '@mui/icons-material/Storage';
 import QrCodeIcon from '@mui/icons-material/QrCode';
 import DescriptionIcon from '@mui/icons-material/Description';
 import VpnKeyIcon from '@mui/icons-material/VpnKey';
+import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
 
-import { THEME_COLORS } from './pageTheme';
+export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
 
 // 懒加载页面组件
 const DashboardPage = lazy(() => import('@/pages/Dashboard'));
@@ -15,6 +16,7 @@ const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
 const QrCodePage = lazy(() => import('@/pages/QrCode'));
 const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
 const JwtPage = lazy(() => import('@/pages/Jwt'));
+const JsonDiffPage = lazy(() => import('@/pages/JsonDiff'));
 
 /**
  * 功能配置接口
@@ -28,8 +30,8 @@ export interface FeatureConfig {
   labelKey: string;
   /** 功能描述翻译键 */
   descriptionKey: string;
-  /** 主题颜色（用于仪表盘卡片） */
-  themeColor?: string;
+  /** 主题颜色键（用于仪表盘卡片，映射到 theme.palette[key].main） */
+  themeColorKey?: PaletteColorKey;
   /** 图标组件（用于仪表盘卡片） */
   icon?: ReactNode;
   /** 默认是否在仪表盘显示 */
@@ -61,7 +63,7 @@ export const FEATURES: FeatureConfig[] = [
     key: 'timestamp',
     labelKey: 'features:timestamp.title',
     descriptionKey: 'features:timestamp.description',
-    themeColor: THEME_COLORS.primary,
+    themeColorKey: 'primary',
     icon: <AccessTimeIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
@@ -74,7 +76,7 @@ export const FEATURES: FeatureConfig[] = [
     key: 'storageCleaner',
     labelKey: 'features:storageCleaner.title',
     descriptionKey: 'features:storageCleaner.description',
-    themeColor: THEME_COLORS.warning,
+    themeColorKey: 'warning',
     icon: <StorageIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
@@ -87,7 +89,7 @@ export const FEATURES: FeatureConfig[] = [
     key: 'qrCode',
     labelKey: 'features:qrCode.title',
     descriptionKey: 'features:qrCode.description',
-    themeColor: THEME_COLORS.success,
+    themeColorKey: 'success',
     icon: <QrCodeIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
@@ -100,7 +102,7 @@ export const FEATURES: FeatureConfig[] = [
     key: 'textStatistics',
     labelKey: 'features:textStatistics.title',
     descriptionKey: 'features:textStatistics.description',
-    themeColor: THEME_COLORS.purple,
+    themeColorKey: 'secondary',
     icon: <DescriptionIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
@@ -113,7 +115,7 @@ export const FEATURES: FeatureConfig[] = [
     key: 'jwt',
     labelKey: 'features:jwt.title',
     descriptionKey: 'features:jwt.description',
-    themeColor: THEME_COLORS.indigo,
+    themeColorKey: 'info',
     icon: <VpnKeyIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
@@ -122,6 +124,19 @@ export const FEATURES: FeatureConfig[] = [
       tab: JwtPage,
     },
   },
+  {
+    key: 'jsonDiff',
+    labelKey: 'features:jsonDiff.title',
+    descriptionKey: 'features:jsonDiff.description',
+    themeColorKey: 'primary',
+    icon: <CompareArrowsIcon sx={{ fontSize: 20 }} />,
+    defaultVisible: true,
+    components: {
+      popup: JsonDiffPage,
+      sidepanel: JsonDiffPage,
+      tab: JsonDiffPage,
+    },
+  },
 ];
 
 export function getFeatureByKey(key: PageType): FeatureConfig | undefined {