Develop fill form (#11)

* feat(formRecognizer): 添加表单识别功能及相关组件

添加表单识别功能，包括以下内容：
1. 在路由配置中添加表单识别页面
2. 实现表单识别页面和侧边栏面板
3. 添加表单数据生成工具类
4. 实现与内容脚本的通信机制
5. 添加faker-js依赖用于生成测试数据
6. 支持不同入口点(popup/sidepanel)的组件渲染

* refactor(消息通信): 重构消息通信机制并集中管理消息协议

将分散的消息协议和通信逻辑集中到 utils/messages.ts 中
移除旧的 messages.tsx 文件并更新相关引用
添加消息动作枚举和类型定义，提高类型安全性
优化内容脚本注入失败时的处理逻辑

* feat(QR码): 添加粘贴图片功能并优化上传组件

添加全局粘贴事件监听，支持从剪贴板直接粘贴二维码图片进行解析。重构上传组件为独立组件QrCodeUploader，包含拖拽上传、预览、进度显示和错误处理功能。优化页面样式和用户体验。

- 在QrCodePage添加粘贴事件监听
- 创建QrCodeUploader组件整合上传功能
- 更新测试用例格式
- 调整多个页面的背景色样式

* feat(表单识别): 新增表单识别页面功能与模板管理

- 添加表单识别页面样式配置
- 实现表单字段扫描与展示功能
- 新增数据模板管理工具类
- 添加数据验证工具类
- 扩展表单识别页面功能，包括操作历史记录
- 支持模板的导入导出功能
- 优化表单填充操作的用户体验

* feat(消息系统): 添加标签页刷新功能

在消息系统中新增 RELOAD_TAB 动作类型和 tabId 字段，用于处理标签页刷新请求
修改 StorageCleanerPage 使用后台脚本发送刷新请求，确保弹窗关闭后仍能执行
在 background.ts 中添加标签页刷新处理逻辑，包括错误处理和响应返回

* refactor(theme): 重构主题颜色和样式配置

- 更新主题颜色以满足 WCAG AA 可访问性标准
- 提取全局样式配置到统一变量
- 使用语义化颜色变量替换硬编码值
- 为输入框样式创建统一配置

* feat: add URL entry management components and QR code generation feature

- Introduced `UrlEntryItem` and `UrlEntryList` components for displaying and managing URL entries.
- Added `UrlToQrCodeSection` component for generating QR codes from URLs with download and copy functionality.
- Implemented `AutoRefreshToggle`, `CleaningResult`, `DomainHeader`, `ErrorDisplay`, `OptionItem`, and `StorageOptionsGrid` components for enhanced user interface in storage cleaning.
- Created custom hooks `useStorageCleaner` and `useStorageState` for managing storage-related states and preferences.
- Added utility hook `useUrlPreferences` for handling URL entry preferences.

* feat: 新增时间戳转换器和相关组件，优化时间戳页面功能

* Refactor message handling and storage cleaning logic

* feat: 添加 GitHub Actions CI/CD 工作流，支持自动化构建与发布

entrypoints/popup/pages/QrCodePage.tsx

@@ -1,90 +1,21 @@
-import { useState, useRef, useEffect } from 'react';
-import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  Stack,
-  Alert,
-  InputAdornment,
-  CircularProgress,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from '@mui/material';
-import { Container, alpha } from '@mui/system';
+import { Box, Typography, Stack, Container, CircularProgress } from '@mui/material';
+import { alpha } from '@mui/system';
 import QrCodeIcon from '@mui/icons-material/QrCode';
-import ImageIcon from '@mui/icons-material/Image';
-import LinkIcon from '@mui/icons-material/Link';
-import DownloadIcon from '@mui/icons-material/Download';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import qrcode from 'qrcode';
-import jsQR from 'jsqr';
 import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
-import CopyButton from '@/components/CopyButton';
-import { storageUtil } from '@/utils/chromeStorage';
+import UrlToQrCodeSection from '@/components/UrlToQrCodeSection';
+import QrCodeToUrlSection from '@/components/QrCodeToUrlSection';
+import { useStorageState } from '@/utils/useStorageState';
 import { qrCodePageStyles, dashboardPageStyles } from '@/config/pageTheme';
 
 const QrCodePage = () => {
   const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });
-  const [isInitialized, setIsInitialized] = useState(false);
 
-  // URL 转二维码状态
-  const [urlInput, setUrlInput] = useState('');
-  const [urlError, setUrlError] = useState('');
-  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
-  const [generating, setGenerating] = useState(false);
-
-  // 二维码转 URL 状态
-  const [qrCodeFile, setQrCodeFile] = useState<File | null>(null);
-  const [parsedUrl, setParsedUrl] = useState('');
-  const [parseError, setParseError] = useState('');
-  const [parsing, setParsing] = useState(false);
-
-  // 卡片展开状态
-  const [urlExpanded, setUrlExpanded] = useState(true);
-  const [qrExpanded, setQrExpanded] = useState(false);
-
-  // 引用
-  const qrCodeRef = useRef<HTMLDivElement>(null);
-
-  // 从存储加载状态
-  useEffect(() => {
-    const loadState = async () => {
-      try {
-        const savedUrlExpanded = await storageUtil.get('qrCode/urlExpanded', true);
-        const savedQrExpanded = await storageUtil.get('qrCode/qrExpanded', false);
-        setUrlExpanded(savedUrlExpanded ?? true);
-        setQrExpanded(savedQrExpanded ?? false);
-      } catch (error) {
-        console.error('加载状态失败:', error);
-      } finally {
-        setIsInitialized(true);
-      }
-    };
-
-    loadState();
-  }, []);
-
-  // 保存状态到存储（仅在初始化完成后保存）
-  useEffect(() => {
-    if (!isInitialized) return;
-
-    const saveState = async () => {
-      try {
-        await storageUtil.set('qrCode/urlExpanded', urlExpanded);
-        await storageUtil.set('qrCode/qrExpanded', qrExpanded);
-      } catch (error) {
-        console.error('保存状态失败:', error);
-      }
-    };
-
-    saveState();
-  }, [urlExpanded, qrExpanded, isInitialized]);
+  // 使用自定义钩子管理展开状态
+  const [urlExpanded, setUrlExpanded, urlInitialized] = useStorageState('qrCode/urlExpanded', true);
+  const [qrExpanded, setQrExpanded, qrInitialized] = useStorageState('qrCode/qrExpanded', false);
 
   // 初始化未完成时显示加载状态
-  if (!isInitialized) {
+  if (!urlInitialized || !qrInitialized) {
     return (
       <Container
         sx={{
@@ -101,145 +32,6 @@ const QrCodePage = () => {
     );
   }
 
-  // 处理 URL 输入变化
-  const handleUrlInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUrlInput(e.target.value);
-    setUrlError('');
-  };
-
-  // 处理文件选择
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // 只有当用户实际选择了文件时才更新状态
-    // 如果用户取消选择，保持原有状态不变
-    if (e.target.files && e.target.files.length > 0) {
-      const file = e.target.files[0];
-      setQrCodeFile(file);
-      setParseError('');
-      setParsedUrl('');
-    }
-  };
-
-  // 生成二维码
-  const generateQrCode = async () => {
-    if (!urlInput) {
-      setUrlError('请输入 URL');
-      return;
-    }
-
-    try {
-      setGenerating(true);
-      setUrlError('');
-
-      // 验证 URL 格式
-      let url = urlInput;
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        url = 'https://' + url;
-      }
-
-      // 生成二维码
-      const dataUrl = await qrcode.toDataURL(url, {
-        width: 200,
-        margin: 2,
-        color: {
-          dark: qrCodePageStyles.black,
-          light: qrCodePageStyles.white,
-        },
-      });
-
-      setQrCodeDataUrl(dataUrl);
-      showMessage('二维码生成成功', { severity: 'success', autoHideDuration: 1000 });
-    } catch (error) {
-      console.error('生成二维码失败:', error);
-      showMessage('生成二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
-    } finally {
-      setGenerating(false);
-    }
-  };
-
-  // 解析二维码
-  const parseQrCode = async () => {
-    if (!qrCodeFile) {
-      showMessage('请选择二维码图片', { severity: 'error', autoHideDuration: 300 });
-      return;
-    }
-
-    try {
-      setParsing(true);
-      setParseError('');
-      setParsedUrl('');
-
-      // 读取文件并解析
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-
-      if (!ctx) {
-        throw new Error('无法创建 canvas 上下文');
-      }
-
-      const image = new Image();
-      image.src = URL.createObjectURL(qrCodeFile);
-
-      await new Promise<void>((resolve, reject) => {
-        image.onload = () => {
-          canvas.width = image.width;
-          canvas.height = image.height;
-          ctx.drawImage(image, 0, 0);
-          resolve();
-        };
-        image.onerror = () => reject(new Error('图片加载失败'));
-      });
-
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      const code = jsQR(imageData.data, imageData.width, imageData.height);
-
-      if (code) {
-        setParsedUrl(code.data);
-        showMessage('二维码解析成功', { severity: 'success', autoHideDuration: 1000 });
-      } else {
-        showMessage('未检测到二维码', { severity: 'error', autoHideDuration: 1000 });
-      }
-    } catch (error) {
-      console.error('解析二维码失败:', error);
-      showMessage('解析二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
-    } finally {
-      setParsing(false);
-    }
-  };
-
-  // 下载二维码
-  const downloadQrCode = () => {
-    if (!qrCodeDataUrl) return;
-
-    const link = document.createElement('a');
-    link.href = qrCodeDataUrl;
-    link.download = 'qrcode.png';
-    link.click();
-    showMessage('二维码下载成功', { severity: 'success', autoHideDuration: 300 });
-  };
-
-  // 复制二维码到剪贴板
-  const copyQrCode = async () => {
-    if (!qrCodeDataUrl) return;
-
-    try {
-      // 将 data URL 转换为 Blob
-      const response = await fetch(qrCodeDataUrl);
-      const blob = await response.blob();
-
-      // 使用 Clipboard API 写入图像
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          'image/png': blob,
-        }),
-      ]);
-
-      showMessage('二维码已复制到剪贴板', { severity: 'success', autoHideDuration: 1000 });
-    } catch (error) {
-      console.error('复制二维码失败:', error);
-      showMessage('复制二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
-    }
-  };
-
   return (
     <Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 3 }}>
       <Container sx={{ py: 2, maxWidth: 400 }}>
@@ -271,285 +63,17 @@ const QrCodePage = () => {
         </Stack>
 
         <Stack spacing={3}>
-          {/* URL 转二维码 */}
-          <Accordion
+          <UrlToQrCodeSection
             expanded={urlExpanded}
-            onChange={(_, isExpanded) => setUrlExpanded(isExpanded)}
-            sx={{
-              borderRadius: 4,
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-              '&:before': { display: 'none' },
-            }}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                <QrCodeIcon color="primary" />
-                <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-                  URL 转二维码
-                </Typography>
-              </Box>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Stack spacing={3}>
-                <TextField
-                  label="输入 URL"
-                  placeholder="https://example.com"
-                  value={urlInput}
-                  onChange={handleUrlInputChange}
-                  fullWidth
-                  variant="outlined"
-                  error={!!urlError}
-                  helperText={urlError}
-                  sx={{
-                    '& .MuiOutlinedInput-root': {
-                      borderRadius: 3,
-                    },
-                  }}
-                />
+            onExpandedChange={setUrlExpanded}
+            showMessage={showMessage}
+          />
 
-                <Button
-                  variant="contained"
-                  startIcon={
-                    generating ? <CircularProgress size={16} color="inherit" /> : <QrCodeIcon />
-                  }
-                  onClick={generateQrCode}
-                  disabled={generating}
-                  sx={{
-                    py: 1.2,
-                    borderRadius: 3,
-                    bgcolor: qrCodePageStyles.successColor,
-                    fontWeight: 700,
-                    '&:hover': {
-                      bgcolor: qrCodePageStyles.successDark,
-                    },
-                  }}
-                >
-                  {generating ? '生成中...' : '生成二维码'}
-                </Button>
-
-                {/* 二维码显示区域 */}
-                <Box
-                  ref={qrCodeRef}
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    minHeight: 200,
-                    border: '2px dashed',
-                    borderColor: 'grey.200',
-                    borderRadius: 3,
-                    p: 2,
-                    bgcolor: 'grey.50',
-                  }}
-                >
-                  {qrCodeDataUrl ? (
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        width: '100%',
-                      }}
-                    >
-                      <img
-                        src={qrCodeDataUrl}
-                        alt="QR Code"
-                        style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
-                      />
-                      <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
-                        <Button
-                          variant="outlined"
-                          startIcon={<DownloadIcon />}
-                          onClick={downloadQrCode}
-                          sx={{
-                            borderRadius: 2,
-                            borderColor: qrCodePageStyles.successColor,
-                            color: qrCodePageStyles.successColor,
-                            '&:hover': {
-                              borderColor: qrCodePageStyles.successDark,
-                              bgcolor: alpha(qrCodePageStyles.successColor, 0.05),
-                            },
-                          }}
-                        >
-                          下载二维码
-                        </Button>
-                        <Button
-                          variant="contained"
-                          startIcon={<ContentCopyIcon />}
-                          onClick={copyQrCode}
-                          sx={{
-                            borderRadius: 2,
-                            bgcolor: qrCodePageStyles.successColor,
-                            '&:hover': {
-                              bgcolor: qrCodePageStyles.successDark,
-                            },
-                          }}
-                        >
-                          复制二维码
-                        </Button>
-                      </Box>
-                    </Box>
-                  ) : (
-                    <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
-                      二维码将显示在这里
-                    </Typography>
-                  )}
-                </Box>
-              </Stack>
-            </AccordionDetails>
-          </Accordion>
-
-          {/* 二维码转 URL */}
-          <Accordion
+          <QrCodeToUrlSection
             expanded={qrExpanded}
-            onChange={(_, isExpanded) => setQrExpanded(isExpanded)}
-            sx={{
-              borderRadius: 4,
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-              '&:before': { display: 'none' },
-            }}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                <LinkIcon color="success" />
-                <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-                  二维码转 URL
-                </Typography>
-              </Box>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Stack spacing={3}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    minHeight: 200,
-                    border: '2px dashed',
-                    borderColor: qrCodeFile ? qrCodePageStyles.successColor : 'grey.200',
-                    borderRadius: 3,
-                    p: 4,
-                    bgcolor: qrCodeFile ? alpha(qrCodePageStyles.successColor, 0.05) : 'grey.50',
-                    cursor: 'pointer',
-                    transition: 'all 0.2s',
-                    '&:hover': {
-                      borderColor: qrCodePageStyles.successColor,
-                      bgcolor: alpha(qrCodePageStyles.successColor, 0.05),
-                    },
-                  }}
-                >
-                  <input
-                    type="file"
-                    accept="image/*"
-                    onChange={handleFileChange}
-                    style={{
-                      display: 'none',
-                    }}
-                    id="qr-code-upload"
-                  />
-                  <label
-                    htmlFor="qr-code-upload"
-                    style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
-                  >
-                    {qrCodeFile ? (
-                      <Box sx={{ textAlign: 'center', width: '100%' }}>
-                        <img
-                          src={URL.createObjectURL(qrCodeFile)}
-                          alt="QR Code Preview"
-                          style={{
-                            maxWidth: '100%',
-                            maxHeight: 160,
-                            borderRadius: 8,
-                            objectFit: 'contain',
-                          }}
-                        />
-                        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
-                          {qrCodeFile.name}
-                        </Typography>
-                        <Typography variant="caption" color="text.secondary">
-                          点击更换图片
-                        </Typography>
-                      </Box>
-                    ) : (
-                      <>
-                        <ImageIcon sx={{ fontSize: 48, color: 'grey.300', mb: 2 }} />
-                        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                          点击或拖拽上传二维码图片
-                        </Typography>
-                        <Typography variant="caption" color="text.secondary">
-                          支持 PNG、JPG、WEBP 格式
-                        </Typography>
-                      </>
-                    )}
-                  </label>
-                </Box>
-
-                <Button
-                  variant="contained"
-                  startIcon={
-                    parsing ? <CircularProgress size={16} color="inherit" /> : <LinkIcon />
-                  }
-                  onClick={parseQrCode}
-                  disabled={parsing}
-                  sx={{
-                    py: 1.2,
-                    borderRadius: 3,
-                    bgcolor: qrCodePageStyles.successColor,
-                    fontWeight: 700,
-                    '&:hover': {
-                      bgcolor: qrCodePageStyles.successDark,
-                    },
-                  }}
-                >
-                  {parsing ? '解析中...' : '解析二维码'}
-                </Button>
-
-                {/* 解析结果显示 */}
-                <Box
-                  sx={{
-                    position: 'relative',
-                    mt: 2,
-                  }}
-                >
-                  <TextField
-                    label="解析结果"
-                    value={parsedUrl}
-                    fullWidth
-                    variant="outlined"
-                    slotProps={{
-                      input: {
-                        readOnly: true,
-                        endAdornment: (
-                          <InputAdornment position="end">
-                            <CopyButton
-                              text={parsedUrl}
-                              tooltip="复制"
-                              size="small"
-                              color={qrCodePageStyles.primaryColor}
-                              showMessage={showMessage}
-                            />
-                          </InputAdornment>
-                        ),
-                      },
-                    }}
-                    sx={{
-                      '& .MuiOutlinedInput-root': {
-                        borderRadius: 3,
-                      },
-                    }}
-                  />
-                </Box>
-
-                {parseError && (
-                  <Alert severity="error" sx={{ borderRadius: 3 }}>
-                    {parseError}
-                  </Alert>
-                )}
-              </Stack>
-            </AccordionDetails>
-          </Accordion>
+            onExpandedChange={setQrExpanded}
+            showMessage={showMessage}
+          />
         </Stack>
         <GlobalSnackbar {...snackbarProps} />
       </Container>