LingandRX
0379f96e80
* feat(formRecognizer): 添加表单识别功能及相关组件 添加表单识别功能，包括以下内容： 1. 在路由配置中添加表单识别页面 2. 实现表单识别页面和侧边栏面板 3. 添加表单数据生成工具类 4. 实现与内容脚本的通信机制 5. 添加faker-js依赖用于生成测试数据 6. 支持不同入口点(popup/sidepanel)的组件渲染 * refactor(消息通信): 重构消息通信机制并集中管理消息协议 将分散的消息协议和通信逻辑集中到 utils/messages.ts 中 移除旧的 messages.tsx 文件并更新相关引用 添加消息动作枚举和类型定义，提高类型安全性 优化内容脚本注入失败时的处理逻辑
478 lines
17 KiB
TypeScript
478 lines
17 KiB
TypeScript
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;
|