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}