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

entrypoints/options/App.tsx

@@ -28,8 +28,13 @@ import {
 import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import PageHeader from '@/components/PageHeader';
-import { THEME_COLORS } from '@/config/pageTheme';
+import { useTheme, type PaletteColor, type Theme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import type { PaletteColorKey } from '@/config/features';
+
+/** 安全地从 theme.palette 中取 PaletteColor */
+const getPaletteColor = (theme: Theme, key: PaletteColorKey): PaletteColor =>
+  (theme.palette as unknown as Record<string, PaletteColor>)[key];
 
 type WindowType = 'popup' | 'sidepanel' | 'tab';
 
@@ -38,6 +43,7 @@ type WindowType = 'popup' | 'sidepanel' | 'tab';
  * 支持对不同窗口入口的功能显示和排序进行独立配置
  */
 export default function App() {
+  const theme = useTheme();
   const { t } = useTranslation(['features', 'common']);
   // 从 URL 参数中初始化当前的 Tab 类型
   const initialWindowType = useMemo(() => {
@@ -204,7 +210,7 @@ export default function App() {
       className="app"
       sx={{
         minHeight: '100vh',
-        bgcolor: 'grey.50',
+        bgcolor: 'background.default',
         display: 'flex',
         flexDirection: 'column',
       }}
@@ -216,7 +222,7 @@ export default function App() {
             width: '100%',
             bgcolor: 'background.paper',
             borderBottom: '1px solid',
-            borderColor: 'grey.200',
+            borderColor: 'divider',
             pt: { xs: 3, sm: 5 },
             pb: 0,
             px: { xs: 2, sm: 4 },
@@ -225,7 +231,7 @@ export default function App() {
           <Box sx={{ maxWidth: 800, mx: 'auto' }}>
             <PageHeader
               icon={<SettingsIcon />}
-              iconColor={THEME_COLORS.primary}
+              iconColor={theme.palette.primary.main}
               title="应用设置"
               subtitle="针对不同窗口类型独立配置 Dashboard 中显示的功能及其排序"
               sx={{ mb: 4 }}
@@ -270,12 +276,12 @@ export default function App() {
                   borderRadius: 2.5,
                   fontWeight: 700,
                   textTransform: 'none',
-                  borderColor: 'grey.200',
+                  borderColor: 'divider',
                   color: 'text.secondary',
                   '&:hover': {
                     borderColor: 'primary.main',
                     color: 'primary.main',
-                    bgcolor: alpha(THEME_COLORS.primary, 0.04),
+                    bgcolor: alpha(theme.palette.primary.main, 0.04),
                   },
                 }}
               >
@@ -293,7 +299,7 @@ export default function App() {
                 sx={{
                   borderRadius: 4,
                   border: '1px solid',
-                  borderColor: 'grey.200',
+                  borderColor: 'divider',
                   overflow: 'hidden',
                   bgcolor: 'background.paper',
                   boxShadow: '0 4px 24px rgba(0,0,0,0.03)',
@@ -316,10 +322,13 @@ export default function App() {
                           justifyContent: 'space-between',
                           p: { xs: 2, sm: 2.5 },
                           borderBottom: index === array.length - 1 ? 'none' : '1px solid',
-                          borderColor: 'grey.100',
+                          borderColor: 'divider',
                           transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
                           '&:hover': {
-                            bgcolor: alpha(feature.themeColor || THEME_COLORS.primary, 0.02),
+                            bgcolor: alpha(
+                              getPaletteColor(theme, feature.themeColorKey ?? 'primary').main,
+                              0.02,
+                            ),
                           },
                         }}
                       >
@@ -330,7 +339,7 @@ export default function App() {
                           sx={{ flex: 1, minWidth: 0 }}
                         >
                           {/* 拖拽/排序暗示图标 */}
-                          <Box sx={{ color: 'grey.300', display: 'flex' }}>
+                          <Box sx={{ color: 'text.disabled', display: 'flex' }}>
                             <DragIndicatorIcon fontSize="small" />
                           </Box>
 
@@ -339,8 +348,12 @@ export default function App() {
                             sx={{
                               p: 1.2,
                               borderRadius: 2.5,
-                              bgcolor: alpha(feature.themeColor || THEME_COLORS.primary, 0.1),
-                              color: feature.themeColor || THEME_COLORS.primary,
+                              bgcolor: alpha(
+                                getPaletteColor(theme, feature.themeColorKey ?? 'primary').main,
+                                0.1,
+                              ),
+                              color: getPaletteColor(theme, feature.themeColorKey ?? 'primary')
+                                .main,
                               display: 'flex',
                               flexShrink: 0,
                             }}
@@ -386,11 +399,11 @@ export default function App() {
                               onClick={() => handleMove(index, 'up')}
                               disabled={index === 0}
                               sx={{
-                                color: 'grey.400',
+                                color: 'text.disabled',
                                 p: { xs: 0.5, sm: 1 },
                                 '&:hover': {
                                   color: 'primary.main',
-                                  bgcolor: alpha(THEME_COLORS.primary, 0.08),
+                                  bgcolor: alpha(theme.palette.primary.main, 0.08),
                                 },
                               }}
                             >
@@ -401,11 +414,11 @@ export default function App() {
                               onClick={() => handleMove(index, 'down')}
                               disabled={index === array.length - 1}
                               sx={{
-                                color: 'grey.400',
+                                color: 'text.disabled',
                                 p: { xs: 0.5, sm: 1 },
                                 '&:hover': {
                                   color: 'primary.main',
-                                  bgcolor: alpha(THEME_COLORS.primary, 0.08),
+                                  bgcolor: alpha(theme.palette.primary.main, 0.08),
                                 },
                               }}
                             >
@@ -432,10 +445,14 @@ export default function App() {
                             disabled={isDisabled}
                             sx={{
                               '& .MuiSwitch-switchBase.Mui-checked': {
-                                color: feature.themeColor || THEME_COLORS.primary,
+                                color: getPaletteColor(theme, feature.themeColorKey ?? 'primary')
+                                  .main,
                               },
                               '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                                backgroundColor: feature.themeColor || THEME_COLORS.primary,
+                                backgroundColor: getPaletteColor(
+                                  theme,
+                                  feature.themeColorKey ?? 'primary',
+                                ).main,
                               },
                             }}
                           />

entrypoints/options/main.tsx

@@ -1,16 +1,10 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import theme from '@/config/theme';
+import AppRoot from '@/providers/AppRoot';
 import '@/i18n';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>,
+  <AppRoot>
+    <App />
+  </AppRoot>,
 );

entrypoints/popup/App.tsx

@@ -2,7 +2,6 @@ import RouterProvider from '@/providers/RouterProvider';
 import TopBar from '@/components/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
-import { globalStyles } from '@/config/pageTheme';
 import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import { Box } from '@mui/material';
 import { getEntryPointType } from '@/config/features';
@@ -49,7 +48,7 @@ export default function App() {
             height: '600px',
             minHeight: '600px',
             overflow: 'hidden',
-            backgroundColor: globalStyles.backgroundColor,
+            backgroundColor: 'background.default',
             // 仅在明确的大屏幕（如独立页面或侧边栏拉伸）下才允许扩展
             '@media screen and (min-width: 600px)': {
               width: '100vw',

entrypoints/popup/main.tsx

@@ -1,16 +1,10 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import theme from '@/config/theme';
+import AppRoot from '@/providers/AppRoot';
 import '@/i18n';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>,
+  <AppRoot>
+    <App />
+  </AppRoot>,
 );

entrypoints/sidepanel/main.tsx

@@ -1,16 +1,10 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import theme from '@/config/theme';
+import AppRoot from '@/providers/AppRoot';
 import '@/i18n';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>,
+  <AppRoot>
+    <App />
+  </AppRoot>,
 );