Develop (#15)

* 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运行时间和资源消耗

entrypoints/popup/pages/components/DomainHeader.tsx

@@ -1,85 +1,84 @@
-import { Box, Stack, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import StorageIcon from '@mui/icons-material/Storage';
+import PageHeader from '@/components/PageHeader';
 import { formatSize } from '@/utils/storageCleaner';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
 
+/**
+ * DomainHeader 组件属性接口
+ */
 interface DomainHeaderProps {
+  /** 当前域名 */
   domain: string;
+  /** 已占用的存储大小（字节） */
   totalSize: number;
 }
 
+/**
+ * DomainHeader - 存储清理页面标题栏组件
+ *
+ * 使用 PageHeader 组件构建，显示域名和已占用存储空间大小
+ *
+ * @example
+ * ```tsx
+ * <DomainHeader
+ *   domain="example.com"
+ *   totalSize={1048576}
+ * />
+ * ```
+ */
 export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
   return (
-    <Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 3 }}>
-      <Box
-        sx={{
-          p: 1.2,
-          borderRadius: 3,
-          bgcolor: 'rgba(255, 152, 0, 0.1)',
-          color: storageCleanerPageStyles.warningColor,
-          display: 'flex',
-          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)',
-          },
-        }}
-      >
-        <StorageIcon sx={{ fontSize: 22 }} />
-      </Box>
-      <Box sx={{ flex: 1 }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
-          <Typography
-            variant="h6"
-            fontWeight={900}
+    <PageHeader
+      icon={<StorageIcon sx={{ fontSize: 22 }} />}
+      iconColor={storageCleanerPageStyles.warningColor}
+      title="存储清理"
+      subtitle={domain || '加载中...'}
+      badge={
+        totalSize > 0 ? (
+          <Box
             sx={{
-              letterSpacing: '-0.5px',
-              lineHeight: 1.2,
-              fontSize: '1rem',
-              color: 'text.primary',
+              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)',
+              },
             }}
           >
-            存储清理
-          </Typography>
-          {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>
-          )}
-        </Stack>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{
-            fontWeight: 600,
-            display: 'block',
-            maxWidth: 240,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            mt: 0.3,
-            fontSize: '0.75rem',
-          }}
-        >
-          {domain || '加载中...'}
-        </Typography>
-      </Box>
-    </Stack>
+            已占用 {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)',
+        },
+      }}
+      titleSx={{
+        fontSize: '1rem',
+      }}
+      subtitleSx={{
+        display: 'block',
+        maxWidth: 240,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        mt: 0.3,
+        fontSize: '0.75rem',
+      }}
+      sx={{ mb: 3 }}
+    />
   );
 }