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(主题): 添加暗色模式支持并重构主题系统

pages/Dashboard/ToolCard.tsx

@@ -4,9 +4,10 @@
  * 用于在仪表盘中展示各个工具功能的卡片组件，支持图标、标题、描述、
  * 快照内容展示，具备悬停动画效果。
  */
-import { alpha, Box, Card, CardActionArea, Stack, Typography } from '@mui/material';
+import { alpha, Box, Card, CardActionArea, Stack, Typography, useTheme } from '@mui/material';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import React from 'react';
+import type { PaletteColorKey } from '@/config/features';
 
 /**
  * ToolCard 组件属性接口
@@ -18,8 +19,8 @@ interface ToolCardProps {
   description?: string;
   /** 快照内容，用于在卡片底部展示额外信息（可选） */
   snapshot?: React.ReactNode;
-  /** 主题色代码，用于图标背景和悬停效果 */
-  colorCode: string;
+  /** 主题色键，映射到 theme.palette[key].main */
+  colorKey: PaletteColorKey;
   /** 工具图标元素 */
   icon: React.ReactNode;
   /** 卡片点击事件处理函数 */
@@ -36,10 +37,13 @@ export default function ToolCard({
   title,
   description,
   snapshot,
-  colorCode,
+  colorKey,
   icon,
   onClick,
 }: ToolCardProps) {
+  const theme = useTheme();
+  const colorCode = theme.palette[colorKey].main;
+
   return (
     <Card
       elevation={0}
@@ -47,7 +51,7 @@ export default function ToolCard({
         position: 'relative',
         borderRadius: 4,
         border: '1px solid',
-        borderColor: 'grey.100',
+        borderColor: 'divider',
         height: '100%',
         boxSizing: 'border-box',
         transition:
@@ -124,7 +128,7 @@ export default function ToolCard({
             className="arrow-icon"
             sx={{
               fontSize: 12,
-              color: 'grey.300',
+              color: 'text.disabled',
               mt: 0.5,
               transition: 'all 0.3s ease',
             }}
@@ -137,7 +141,7 @@ export default function ToolCard({
               mt: 'auto',
               pt: 1.5,
               borderTop: '1px dashed',
-              borderColor: 'grey.100',
+              borderColor: 'divider',
               width: '100%',
             }}
           >