Develop (#17)

✨新功能 (Features) 智能表单引擎: 新增智能表单填充功能，内置模糊匹配引擎、Mock数据生成器与视觉反馈渲染器。表单映射与导出: 实现表单映射页面（包含扫描器和高亮器），并支持将配置导出为 JSON 文件，附带 Snackbar 状态提示。表单识别增强: 增加按域名保存字段类型偏好的功能；添加字段定位闪烁以辅助查找；优化填充逻辑（支持单字段覆盖默认模式）；重构 FieldList 组件以提升操作体验。 ♻️ 代码重构 (Refactor) 通用组件提取: 提取并统一应用通用的 PageHeader 组件，移除独立的侧边栏页面及未使用的组件文件。状态与逻辑优化: 改进 useStorageState 钩子（增加加载状态管理与防抖处理）；将二维码解析功能重构为独立模块。类型与依赖简化: 统一使用 SnackbarOptions 类型；简化假数据生成器中 faker 的导入与使用逻辑。 💄 样式与界面 (Style) UI 细节打磨: 统一各页面头部图标颜色，调整表单输入框与按钮交互样式；优化时间戳页面、结果视图布局（增加圆角、调整内边距/对齐方式）；重构存储选项网格及自动刷新开关样式。代码格式: 优化项目中导入语句的顺序与格式。 👷 持续集成 (CI) 流程提效: 移除 Firefox 测试步骤以减少资源消耗；收紧工作流触发条件，移除 develop 及其变体分支，仅保留 main 分支触发。 📝 文档 (Docs) 代码维护: 补充组件的文档注释与类型导入。
2026-04-30 19:56:32 +08:00
parent c039475119
commit 60537f6e2e
22 changed files with 2069 additions and 587 deletions
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
  Box,
  Typography,
@@ -11,14 +11,16 @@ import {
  AccordionDetails,
  CircularProgress,
  InputAdornment,
+  IconButton,
 } from '@mui/material';
 import LinkIcon from '@mui/icons-material/Link';
 import ImageIcon from '@mui/icons-material/Image';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import jsQR from 'jsqr';
+import ClearIcon from '@mui/icons-material/Clear';
 import CopyButton from '@/components/CopyButton';
 import { qrCodePageStyles } from '@/config/pageTheme';
 import type { SnackbarOptions } from '@/components/GlobalSnackbar';
+import { parseQrCodeFromFile } from '@/utils/qrCodeParser';

 interface QrCodeToUrlSectionProps {
  expanded: boolean;
@@ -35,13 +37,37 @@ const QrCodeToUrlSection = ({
  const [parsedUrl, setParsedUrl] = useState('');
  const [parseError, setParseError] = useState('');
  const [parsing, setParsing] = useState(false);
+  const [dragging, setDragging] = useState(false);

-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = useCallback((file: File) => {
+    setQrCodeFile(file);
+    setParseError('');
+    setParsedUrl('');
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
-      const file = e.target.files[0];
-      setQrCodeFile(file);
-      setParseError('');
-      setParsedUrl('');
+      handleFileChange(e.target.files[0]);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragging(false);
+    const droppedFile = e.dataTransfer.files?.[0];
+    if (droppedFile) {
+      handleFileChange(droppedFile);
    }
  };

@@ -56,34 +82,16 @@ const QrCodeToUrlSection = ({
      setParseError('');
      setParsedUrl('');

-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
+      const result = await parseQrCodeFromFile(qrCodeFile);

-      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);
+      if (result.success && result.data) {
+        setParsedUrl(result.data);
        showMessage('二维码解析成功', { severity: 'success', autoHideDuration: 1000 });
      } else {
-        showMessage('未检测到二维码', { severity: 'error', autoHideDuration: 1000 });
+        showMessage(result.error || '未检测到二维码', {
+          severity: 'error',
+          autoHideDuration: 1000,
+        });
      }
    } catch (error) {
      console.error('解析二维码失败:', error);
@@ -108,9 +116,7 @@ const QrCodeToUrlSection = ({
          const file = items[i].getAsFile();
          if (file) {
            try {
-              setQrCodeFile(file);
-              setParseError('');
-              setParsedUrl('');
+              handleFileChange(file);
              showMessage('图片粘贴成功', { severity: 'success', autoHideDuration: 1000 });
            } catch (error) {
              console.error('处理粘贴图片失败:', error);
@@ -127,7 +133,7 @@ const QrCodeToUrlSection = ({
    return () => {
      document.removeEventListener('paste', handlePaste);
    };
-  }, [expanded, showMessage]);
+  }, [expanded, showMessage, handleFileChange]);

  return (
    <Accordion
@@ -157,10 +163,18 @@ const QrCodeToUrlSection = ({
              justifyContent: 'center',
              minHeight: 200,
              border: '2px dashed',
-              borderColor: qrCodeFile ? qrCodePageStyles.successColor : 'grey.200',
+              borderColor: dragging
+                ? qrCodePageStyles.successColor
+                : qrCodeFile
+                  ? qrCodePageStyles.successColor
+                  : 'grey.200',
              borderRadius: 3,
              p: 4,
-              bgcolor: qrCodeFile ? 'rgba(76, 175, 80, 0.05)' : 'grey.50',
+              bgcolor: dragging
+                ? 'rgba(76, 175, 80, 0.1)'
+                : qrCodeFile
+                  ? 'rgba(76, 175, 80, 0.05)'
+                  : 'grey.50',
              cursor: 'pointer',
              transition: 'all 0.2s',
              '&:hover': {
@@ -168,11 +182,15 @@ const QrCodeToUrlSection = ({
                bgcolor: 'rgba(76, 175, 80, 0.05)',
              },
            }}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
          >
            <input
+              ref={fileInputRef}
              type="file"
              accept="image/*"
-              onChange={handleFileChange}
+              onChange={handleInputChange}
              style={{
                display: 'none',
              }}
@@ -195,8 +213,7 @@ const QrCodeToUrlSection = ({
                        objectFit: 'contain',
                      }}
                    />
-                    <Button
-                      variant="contained"
+                    <IconButton
                      size="small"
                      onClick={(e) => {
                        e.stopPropagation();
@@ -212,33 +229,15 @@ const QrCodeToUrlSection = ({
                        position: 'absolute',
                        top: -8,
                        right: -8,
-                        minWidth: '32px',
-                        width: '32px',
-                        height: '32px',
-                        borderRadius: '50%',
                        bgcolor: 'rgba(244, 67, 54, 0.9)',
                        color: 'white',
-                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-                        transition: 'all 0.2s ease-in-out',
                        '&:hover': {
                          bgcolor: 'rgba(211, 47, 47, 0.95)',
-                          transform: 'scale(1.1)',
-                          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
                        },
-                        '&:active': {
-                          transform: 'scale(0.95)',
-                        },
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        fontWeight: 700,
-                        fontSize: '16px',
-                        lineHeight: 1,
-                        padding: 0,
                      }}
                    >
-                      ×
-                    </Button>
+                      <ClearIcon fontSize="small" />
+                    </IconButton>
                  </Box>
                  <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
                    {qrCodeFile.name}
@@ -13,9 +13,9 @@ import ImageIcon from '@mui/icons-material/Image';
 import ClearIcon from '@mui/icons-material/Clear';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
-import jsQR from 'jsqr';
 import GlobalSnackbar, { useSnackbar } from './GlobalSnackbar';
 import CopyButton from './CopyButton';
+import { parseQrCodeFromFile } from '@/utils/qrCodeParser';

 interface QrCodeUploaderProps {
  onQrCodeDetected?: (data: string) => void;
@@ -67,7 +67,6 @@ const QrCodeUploader: React.FC<QrCodeUploaderProps> = ({
      setProgress(0);

      try {
-        // 模拟上传进度
        const progressInterval = setInterval(() => {
          setProgress((prev) => {
            if (prev >= 90) {
@@ -78,51 +77,20 @@ const QrCodeUploader: React.FC<QrCodeUploaderProps> = ({
          });
        }, 200);

-        // 读取文件并解析二维码
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-
-        if (!ctx) {
-          throw new Error('无法创建 canvas 上下文');
-        }
-
-        const image = new Image();
-        image.src = URL.createObjectURL(file);
-
-        await new Promise<void>((resolve, reject) => {
-          const timeoutId = setTimeout(() => {
-            reject(new Error('图片加载超时'));
-          }, timeout);
-
-          image.onload = () => {
-            clearTimeout(timeoutId);
-            canvas.width = image.width;
-            canvas.height = image.height;
-            ctx.drawImage(image, 0, 0);
-            resolve();
-          };
-
-          image.onerror = () => {
-            clearTimeout(timeoutId);
-            reject(new Error('图片加载失败'));
-          };
-        });
-
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const code = jsQR(imageData.data, imageData.width, imageData.height);
+        const result = await parseQrCodeFromFile(file, timeout);

        clearInterval(progressInterval);
        setProgress(100);

-        if (code) {
-          setResult(code.data);
+        if (result.success && result.data) {
+          setResult(result.data);
          showMessage('二维码解析成功', { severity: 'success' });
          if (onQrCodeDetected) {
-            onQrCodeDetected(code.data);
+            onQrCodeDetected(result.data);
          }
        } else {
-          setError('未检测到二维码');
-          showMessage('未检测到二维码', { severity: 'error' });
+          setError(result.error || '未检测到二维码');
+          showMessage(result.error || '未检测到二维码', { severity: 'error' });
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : '解析失败');
@@ -131,7 +99,6 @@ const QrCodeUploader: React.FC<QrCodeUploaderProps> = ({
        });
      } finally {
        setUploading(false);
-        // 延迟清除进度，让用户看到完成状态
        setTimeout(() => setProgress(0), 500);
      }
    },
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Box, TextField, Alert, Stack } from '@mui/material';
+import { Box, TextField, Alert, Stack, alpha } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import Button from '@/components/Button';
 import type { OpenUrlEntry } from '@/types/storage';
@@ -65,11 +65,6 @@ const UrlEntryForm = ({ onAddEntry, showMessage }: UrlEntryFormProps) => {
          fullWidth
          variant="outlined"
          sx={openUrlPageStyles.INPUT_STYLE}
-          slotProps={{
-            inputLabel: {
-              shrink: true,
-            },
-          }}
        />
        <TextField
          label="目标 URL"
@@ -79,11 +74,6 @@ const UrlEntryForm = ({ onAddEntry, showMessage }: UrlEntryFormProps) => {
          fullWidth
          variant="outlined"
          sx={openUrlPageStyles.INPUT_STYLE}
-          slotProps={{
-            inputLabel: {
-              shrink: true,
-            },
-          }}
        />

        {showMixedContentWarning && (
@@ -111,8 +101,8 @@ const UrlEntryForm = ({ onAddEntry, showMessage }: UrlEntryFormProps) => {
            fontWeight: 800,
            boxShadow: 'none',
            '&:hover': {
-              bgcolor: 'rgba(25, 118, 210, 0.85)',
-              boxShadow: '0 8px 24px rgba(25, 118, 210, 0.2)',
+              bgcolor: openUrlPageStyles.primaryDark,
+              boxShadow: `0 8px 24px ${alpha(openUrlPageStyles.primaryColor, 0.2)}`,
            },
          }}
        >