Develop fill form (#10)
* feat(formRecognizer): 添加表单识别功能及相关组件 添加表单识别功能，包括以下内容： 1. 在路由配置中添加表单识别页面 2. 实现表单识别页面和侧边栏面板 3. 添加表单数据生成工具类 4. 实现与内容脚本的通信机制 5. 添加faker-js依赖用于生成测试数据 6. 支持不同入口点(popup/sidepanel)的组件渲染 * refactor(消息通信): 重构消息通信机制并集中管理消息协议 将分散的消息协议和通信逻辑集中到 utils/messages.ts 中 移除旧的 messages.tsx 文件并更新相关引用 添加消息动作枚举和类型定义，提高类型安全性 优化内容脚本注入失败时的处理逻辑
This commit is contained in:
LingandRX
@@ -0,0 +1,477 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
Button,
|
||||
Checkbox,
|
||||
TextField,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
Tooltip,
|
||||
Alert,
|
||||
} from '@mui/material';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
|
||||
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
||||
import HighlightAltIcon from '@mui/icons-material/HighlightAlt';
|
||||
import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import { FieldType, FillMode } from '@/utils/dummyDataGenerator';
|
||||
import { MessageAction, sendMessageToContent, injectContentScript } from '@/utils/messages';
|
||||
|
||||
interface FieldData {
|
||||
id: string;
|
||||
fieldType: FieldType;
|
||||
label: string | null;
|
||||
placeholder: string;
|
||||
name: string;
|
||||
value: string;
|
||||
isSelected: boolean;
|
||||
generatedValue: string;
|
||||
}
|
||||
|
||||
const FormFillSidePanel = () => {
|
||||
const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [fields, setFields] = useState<FieldData[]>([]);
|
||||
const [mode, setMode] = useState<'valid' | 'invalid'>('valid');
|
||||
const [fillEmptyOnly, setFillEmptyOnly] = useState(false);
|
||||
const [includeHidden] = useState(false);
|
||||
const [hoveredFieldId, setHoveredFieldId] = useState<string | null>(null);
|
||||
|
||||
const handleScan = async () => {
|
||||
setScanning(true);
|
||||
try {
|
||||
let response = await sendMessageToContent(MessageAction.SCAN_FORM_FIELDS);
|
||||
|
||||
// 如果连接失败，尝试注入内容脚本
|
||||
if (!response.success && response.message && response.message.includes('无法连接')) {
|
||||
showMessage('正在注入内容脚本...', { severity: 'info' });
|
||||
const injected = await injectContentScript();
|
||||
if (injected) {
|
||||
// 注入成功后再次尝试
|
||||
response = await sendMessageToContent(MessageAction.SCAN_FORM_FIELDS);
|
||||
}
|
||||
}
|
||||
|
||||
if (response.success) {
|
||||
setFields(response.fields || []);
|
||||
showMessage(`扫描完成，发现 ${response.totalCount} 个可填充字段`, { severity: 'success' });
|
||||
} else {
|
||||
showMessage(response.message || '扫描失败', { severity: 'error' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('扫描失败:', error);
|
||||
showMessage('扫描失败，请确保页面已加载', { severity: 'error' });
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefreshAll = async () => {
|
||||
const updatedFields = fields.map((field) => ({
|
||||
...field,
|
||||
generatedValue: generateRandomValue(field.fieldType, mode),
|
||||
}));
|
||||
setFields(updatedFields);
|
||||
showMessage('已刷新所有数据', { severity: 'success' });
|
||||
};
|
||||
|
||||
const handleRefreshField = (fieldId: string) => {
|
||||
setFields((prevFields) =>
|
||||
prevFields.map((field) =>
|
||||
field.id === fieldId
|
||||
? { ...field, generatedValue: generateRandomValue(field.fieldType, mode) }
|
||||
: field,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const handleToggleSelect = (fieldId: string) => {
|
||||
setFields((prevFields) =>
|
||||
prevFields.map((field) =>
|
||||
field.id === fieldId ? { ...field, isSelected: !field.isSelected } : field,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
const allSelected = fields.every((f) => f.isSelected);
|
||||
setFields((prevFields) => prevFields.map((field) => ({ ...field, isSelected: !allSelected })));
|
||||
};
|
||||
|
||||
const handleEditValue = (fieldId: string, newValue: string) => {
|
||||
setFields((prevFields) =>
|
||||
prevFields.map((field) =>
|
||||
field.id === fieldId ? { ...field, generatedValue: newValue } : field,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const handleFill = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const selectedFields = fields.filter((f) => f.isSelected);
|
||||
const response = await sendMessageToContent(MessageAction.FILL_SELECTED_FIELDS, {
|
||||
fields: selectedFields,
|
||||
mode: mode === 'valid' ? FillMode.VALID : FillMode.INVALID,
|
||||
includeHidden,
|
||||
});
|
||||
if (response.success) {
|
||||
showMessage(response.message || '填充成功', { severity: 'success' });
|
||||
} else {
|
||||
showMessage(response.message || '填充失败', { severity: 'error' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('填充失败:', error);
|
||||
showMessage('填充失败', { severity: 'error' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClear = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await sendMessageToContent(MessageAction.CLEAR_ALL_FIELDS);
|
||||
if (response.success) {
|
||||
showMessage(response.message || '已清空', { severity: 'success' });
|
||||
} else {
|
||||
showMessage(response.message || '清空失败', { severity: 'error' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('清空失败:', error);
|
||||
showMessage('清空失败', { severity: 'error' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHoverField = async (fieldId: string | null) => {
|
||||
setHoveredFieldId(fieldId);
|
||||
if (fieldId) {
|
||||
await sendMessageToContent(MessageAction.HIGHLIGHT_FIELD, { fieldId });
|
||||
} else {
|
||||
await sendMessageToContent(MessageAction.UNHIGHLIGHT_ALL_FIELDS);
|
||||
}
|
||||
};
|
||||
|
||||
const generateRandomValue = (fieldType: FieldType, fillMode: 'valid' | 'invalid'): string => {
|
||||
const chineseNames = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
|
||||
const englishNames = ['John Doe', 'Jane Smith', 'Bob Wilson', 'Alice Brown'];
|
||||
const domains = ['example.com', 'test.com', 'demo.com'];
|
||||
const specialChars = '!@#$%^&*()';
|
||||
|
||||
switch (fieldType) {
|
||||
case FieldType.NAME:
|
||||
return Math.random() > 0.5
|
||||
? chineseNames[Math.floor(Math.random() * chineseNames.length)]
|
||||
: englishNames[Math.floor(Math.random() * englishNames.length)];
|
||||
case FieldType.EMAIL: {
|
||||
const emailPrefix = Math.random().toString(36).substr(2, 8);
|
||||
const emailDomain = domains[Math.floor(Math.random() * domains.length)];
|
||||
return fillMode === 'valid' ? `${emailPrefix}@${emailDomain}` : `${emailPrefix}example.com`;
|
||||
}
|
||||
case FieldType.PHONE: {
|
||||
const phonePrefixes = ['130', '131', '132', '135', '136', '137', '138', '139'];
|
||||
const phonePrefix = phonePrefixes[Math.floor(Math.random() * phonePrefixes.length)];
|
||||
const phoneSuffix = Math.floor(Math.random() * 100000000)
|
||||
.toString()
|
||||
.padStart(8, '0');
|
||||
return fillMode === 'valid'
|
||||
? phonePrefix + phoneSuffix
|
||||
: phonePrefix + Math.floor(Math.random() * 10000000).toString();
|
||||
}
|
||||
case FieldType.NUMBER:
|
||||
return fillMode === 'valid'
|
||||
? String(Math.floor(Math.random() * 10000))
|
||||
: String(-Math.floor(Math.random() * 10000));
|
||||
case FieldType.DATE: {
|
||||
const days = Math.floor(Math.random() * 365);
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + days);
|
||||
return date.toISOString().split('T')[0];
|
||||
}
|
||||
case FieldType.TEXTarea:
|
||||
return fillMode === 'valid'
|
||||
? '这是一段测试文本，用于填充表单输入区域。'.repeat(3)
|
||||
: specialChars.repeat(100);
|
||||
case FieldType.PASSWORD:
|
||||
return 'Test@123';
|
||||
case FieldType.ID_CARD: {
|
||||
const areaCode = '110101';
|
||||
const year = 1990 + Math.floor(Math.random() * 30);
|
||||
const month = String(1 + Math.floor(Math.random() * 12)).padStart(2, '0');
|
||||
const day = String(1 + Math.floor(Math.random() * 28)).padStart(2, '0');
|
||||
const random = Math.floor(Math.random() * 10000)
|
||||
.toString()
|
||||
.padStart(4, '0');
|
||||
return areaCode + year + month + day + random;
|
||||
}
|
||||
default:
|
||||
return fillMode === 'valid' ? '测试数据' : specialChars.repeat(50);
|
||||
}
|
||||
};
|
||||
|
||||
const getFieldTypeLabel = (fieldType: FieldType): string => {
|
||||
const labels: Record<FieldType, string> = {
|
||||
[FieldType.TEXT]: '文本',
|
||||
[FieldType.EMAIL]: '邮箱',
|
||||
[FieldType.PHONE]: '手机',
|
||||
[FieldType.NUMBER]: '数字',
|
||||
[FieldType.DATE]: '日期',
|
||||
[FieldType.TEXTarea]: '文本域',
|
||||
[FieldType.RADIO]: '单选',
|
||||
[FieldType.CHECKBOX]: '多选',
|
||||
[FieldType.SELECT]: '下拉',
|
||||
[FieldType.PASSWORD]: '密码',
|
||||
[FieldType.NAME]: '姓名',
|
||||
[FieldType.ID_CARD]: '身份证',
|
||||
[FieldType.UNKNOWN]: '未知',
|
||||
};
|
||||
return labels[fieldType] || '未知';
|
||||
};
|
||||
|
||||
const selectedCount = fields.filter((f) => f.isSelected).length;
|
||||
|
||||
return (
|
||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: '#f5f5f5' }}>
|
||||
<Box sx={{ p: 2, bgcolor: 'white', borderBottom: '1px solid #e0e0e0' }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
Dummy Data Pro
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
智能表单填充助手
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ p: 2, bgcolor: 'white', mb: 1 }}>
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
startIcon={scanning ? <CircularProgress size={16} color="inherit" /> : <RefreshIcon />}
|
||||
onClick={handleScan}
|
||||
disabled={scanning}
|
||||
sx={{ flex: 1 }}
|
||||
>
|
||||
{scanning ? '扫描中...' : '扫描表单'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<AutoFixHighIcon />}
|
||||
onClick={handleRefreshAll}
|
||||
disabled={fields.length === 0}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
size="small"
|
||||
onClick={() => setMode('valid')}
|
||||
sx={{
|
||||
flex: 1,
|
||||
bgcolor: mode === 'valid' ? '#4caf50' : '#e0e0e0',
|
||||
color: mode === 'valid' ? 'white' : 'text.primary',
|
||||
}}
|
||||
>
|
||||
有效数据
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="warning"
|
||||
size="small"
|
||||
onClick={() => setMode('invalid')}
|
||||
sx={{
|
||||
flex: 1,
|
||||
bgcolor: mode === 'invalid' ? '#ff9800' : '#e0e0e0',
|
||||
color: mode === 'invalid' ? 'white' : 'text.primary',
|
||||
}}
|
||||
>
|
||||
异常数据
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={fillEmptyOnly}
|
||||
onChange={(e) => setFillEmptyOnly(e.target.checked)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
label="仅填充空字段"
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="small"
|
||||
startIcon={loading ? <CircularProgress size={16} color="inherit" /> : null}
|
||||
onClick={handleFill}
|
||||
disabled={loading || selectedCount === 0}
|
||||
sx={{ flex: 1 }}
|
||||
>
|
||||
{loading ? '填充中...' : `确认填充 (${selectedCount})`}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
size="small"
|
||||
startIcon={<DeleteOutlineIcon />}
|
||||
onClick={handleClear}
|
||||
disabled={loading}
|
||||
>
|
||||
清空
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{fields.length > 0 && (
|
||||
<Box sx={{ flex: 1, overflow: 'auto', px: 2, pb: 2 }}>
|
||||
<Box
|
||||
sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}
|
||||
>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
|
||||
字段列表 ({fields.length})
|
||||
</Typography>
|
||||
<Button size="small" onClick={handleSelectAll}>
|
||||
{fields.every((f) => f.isSelected) ? '取消全选' : '全选'}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{fields.map((field) => (
|
||||
<Paper
|
||||
key={field.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
bgcolor: hoveredFieldId === field.id ? '#e3f2fd' : 'white',
|
||||
border: '1px solid',
|
||||
borderColor: hoveredFieldId === field.id ? '#2196f3' : '#e0e0e0',
|
||||
transition: 'all 0.2s ease',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={() => handleHoverField(field.id)}
|
||||
onMouseLeave={() => handleHoverField(null)}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
|
||||
<Checkbox
|
||||
size="small"
|
||||
checked={field.isSelected}
|
||||
onChange={() => handleToggleSelect(field.id)}
|
||||
sx={{ p: 0, mt: 0.5 }}
|
||||
/>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: '60%',
|
||||
}}
|
||||
>
|
||||
{field.label || field.placeholder || field.name || '未命名字段'}
|
||||
</Typography>
|
||||
<Tooltip title="字段类型">
|
||||
<Box
|
||||
sx={{
|
||||
px: 0.5,
|
||||
py: 0.25,
|
||||
bgcolor: '#e0e0e0',
|
||||
borderRadius: 1,
|
||||
fontSize: '0.7rem',
|
||||
}}
|
||||
>
|
||||
{getFieldTypeLabel(field.fieldType)}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Tooltip title="高亮显示">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleHoverField(field.id);
|
||||
setTimeout(() => handleHoverField(null), 2000);
|
||||
}}
|
||||
sx={{ p: 0.5 }}
|
||||
>
|
||||
<HighlightAltIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
value={field.generatedValue}
|
||||
onChange={(e) => handleEditValue(field.id, e.target.value)}
|
||||
placeholder="生成的数据..."
|
||||
sx={{
|
||||
'& .MuiInputBase-input': {
|
||||
fontSize: '0.8rem',
|
||||
fontFamily: 'monospace',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Tooltip title="刷新此项">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRefreshField(field.id);
|
||||
}}
|
||||
sx={{ p: 0.5 }}
|
||||
>
|
||||
<RefreshIcon sx={{ fontSize: 18 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{field.value && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ mt: 0.5, display: 'block' }}
|
||||
>
|
||||
当前值: {field.value}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{fields.length === 0 && !scanning && (
|
||||
<Box
|
||||
sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 3 }}
|
||||
>
|
||||
<Alert severity="info" sx={{ width: '100%' }}>
|
||||
点击「扫描表单」按钮开始扫描当前页面的表单字段
|
||||
</Alert>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<GlobalSnackbar {...snackbarProps} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormFillSidePanel;
|
||||
Reference in New Issue
Block a user