315 lines
11 KiB
JavaScript
315 lines
11 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import {
|
||
Box,
|
||
Typography,
|
||
FormControl,
|
||
InputLabel,
|
||
Select,
|
||
MenuItem,
|
||
Paper,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableContainer,
|
||
TableHead,
|
||
TableRow,
|
||
Alert,
|
||
Button,
|
||
Chip
|
||
} from '@mui/material';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
/**
|
||
* 字段映射步骤组件
|
||
*/
|
||
export default function FieldMappingStep({ previewData, onMappingComplete, onError }) {
|
||
const { t } = useTranslation();
|
||
const [fieldMapping, setFieldMapping] = useState({
|
||
question: '',
|
||
answer: '',
|
||
cot: '',
|
||
tags: ''
|
||
});
|
||
const [availableFields, setAvailableFields] = useState([]);
|
||
const [mappingValid, setMappingValid] = useState(false);
|
||
|
||
// 智能字段识别（支持 Alpaca: instruction + input -> question，output -> answer）
|
||
const smartFieldMapping = fields => {
|
||
const mapping = {
|
||
question: '',
|
||
answer: '',
|
||
cot: '',
|
||
tags: ''
|
||
};
|
||
|
||
const lower = fields.map(f => f.toLowerCase());
|
||
const instructionIdx = lower.findIndex(f => f.includes('instruction'));
|
||
const inputIdx = lower.findIndex(f => f.includes('input'));
|
||
const outputIdx = lower.findIndex(f => f.includes('output'));
|
||
|
||
// Alpaca 格式的优先识别
|
||
if (instructionIdx !== -1 && inputIdx !== -1) {
|
||
// 如果同时有instruction和input字段，将它们组合为question
|
||
mapping.question = [fields[instructionIdx], fields[inputIdx]];
|
||
} else if (instructionIdx !== -1) {
|
||
// 如果只有instruction字段（比如从ShareGPT转换而来），直接映射为question
|
||
mapping.question = fields[instructionIdx];
|
||
}
|
||
|
||
if (outputIdx !== -1) {
|
||
mapping.answer = fields[outputIdx];
|
||
}
|
||
|
||
const questionKeywords = ['question', 'input', 'query', 'prompt', 'instruction', '问题', '输入', '指令'];
|
||
const answerKeywords = ['answer', 'output', 'response', 'completion', 'target', '答案', '输出', '回答'];
|
||
const cotKeywords = ['cot', 'reasoning', 'explanation', 'thinking', 'rationale', '思维链', '推理', '解释'];
|
||
const tagKeywords = ['tag', 'tags', 'label', 'labels', 'category', 'categories', '标签', '类别'];
|
||
|
||
fields.forEach(field => {
|
||
const fieldLower = field.toLowerCase();
|
||
|
||
if (!mapping.question || (typeof mapping.question === 'string' && !mapping.question)) {
|
||
if (questionKeywords.some(keyword => fieldLower.includes(keyword))) {
|
||
mapping.question = field;
|
||
}
|
||
} else if (!mapping.answer) {
|
||
if (answerKeywords.some(keyword => fieldLower.includes(keyword))) {
|
||
mapping.answer = field;
|
||
}
|
||
} else if (!mapping.cot) {
|
||
if (cotKeywords.some(keyword => fieldLower.includes(keyword))) {
|
||
mapping.cot = field;
|
||
}
|
||
} else if (!mapping.tags) {
|
||
if (tagKeywords.some(keyword => fieldLower.includes(keyword))) {
|
||
mapping.tags = field;
|
||
}
|
||
}
|
||
});
|
||
|
||
return mapping;
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (previewData && previewData.length > 0) {
|
||
const fields = Object.keys(previewData[0]);
|
||
setAvailableFields(fields);
|
||
|
||
// 智能识别字段映射
|
||
const smartMapping = smartFieldMapping(fields);
|
||
setFieldMapping(smartMapping);
|
||
}
|
||
}, [previewData]);
|
||
|
||
useEffect(() => {
|
||
// 验证映射是否有效（问题和答案字段必须选择）
|
||
const hasQuestion = Array.isArray(fieldMapping.question)
|
||
? fieldMapping.question.length > 0
|
||
: !!fieldMapping.question;
|
||
const hasAnswer = !!fieldMapping.answer;
|
||
const isValid = hasQuestion && hasAnswer;
|
||
setMappingValid(isValid);
|
||
}, [fieldMapping]);
|
||
|
||
const handleFieldChange = (targetField, sourceField) => {
|
||
setFieldMapping(prev => ({
|
||
...prev,
|
||
[targetField]:
|
||
targetField === 'question'
|
||
? Array.isArray(sourceField)
|
||
? sourceField.filter(Boolean)
|
||
: sourceField
|
||
: sourceField
|
||
}));
|
||
};
|
||
|
||
const handleConfirmMapping = () => {
|
||
if (!mappingValid) {
|
||
onError(t('import.mappingRequired', '问题和答案字段为必选项'));
|
||
return;
|
||
}
|
||
|
||
// 检查是否有重复映射（兼容数组）
|
||
const flatFields = Object.values(fieldMapping)
|
||
.filter(Boolean)
|
||
.flatMap(f => (Array.isArray(f) ? f.filter(Boolean) : [f]));
|
||
const uniqueFields = [...new Set(flatFields)];
|
||
if (flatFields.length !== uniqueFields.length) {
|
||
onError(t('import.duplicateMapping', '不能将多个目标字段映射到同一个源字段'));
|
||
return;
|
||
}
|
||
|
||
onMappingComplete(fieldMapping);
|
||
};
|
||
|
||
const getFieldDescription = field => {
|
||
switch (field) {
|
||
case 'question':
|
||
return t('import.questionDesc', '用户的问题或输入内容（必选，可多选）');
|
||
case 'answer':
|
||
return t('import.answerDesc', 'AI的回答或输出内容（必选）');
|
||
case 'cot':
|
||
return t('import.cotDesc', '思维链或推理过程（可选）');
|
||
case 'tags':
|
||
return t('import.tagsDesc', '标签数组，多个标签用逗号分隔（可选）');
|
||
default:
|
||
return '';
|
||
}
|
||
};
|
||
|
||
const isFieldRequired = field => {
|
||
return field === 'question' || field === 'answer';
|
||
};
|
||
|
||
if (!previewData || previewData.length === 0) {
|
||
return <Alert severity="error">{t('import.noPreviewData', '没有可预览的数据')}</Alert>;
|
||
}
|
||
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" gutterBottom>
|
||
{t('import.fieldMapping', '字段映射')}
|
||
</Typography>
|
||
|
||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||
{t(
|
||
'import.mappingDescription',
|
||
'请将源数据的字段映射到目标字段。系统已自动识别可能的映射关系，您可以根据需要调整。'
|
||
)}
|
||
</Typography>
|
||
|
||
{/* 字段映射选择 */}
|
||
<Paper sx={{ p: 3, mb: 3 }}>
|
||
<Typography variant="subtitle1" gutterBottom>
|
||
{t('import.selectMapping', '选择字段映射')}
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'grid', gap: 2, gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
|
||
{Object.keys(fieldMapping).map(targetField => (
|
||
<FormControl key={targetField} fullWidth>
|
||
<InputLabel>
|
||
{t(`import.${targetField}Field`, targetField)}
|
||
{isFieldRequired(targetField) && <span style={{ color: 'red' }}>*</span>}
|
||
</InputLabel>
|
||
{targetField === 'question' ? (
|
||
<Select
|
||
multiple
|
||
value={
|
||
Array.isArray(fieldMapping.question)
|
||
? fieldMapping.question
|
||
: fieldMapping.question
|
||
? [fieldMapping.question]
|
||
: []
|
||
}
|
||
label={t(`import.${targetField}Field`, targetField)}
|
||
onChange={e => handleFieldChange(targetField, e.target.value)}
|
||
renderValue={selected => (
|
||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||
{selected.map(value => (
|
||
<Chip key={value} label={value} size="small" />
|
||
))}
|
||
</Box>
|
||
)}
|
||
>
|
||
{availableFields.map(field => (
|
||
<MenuItem key={field} value={field}>
|
||
{field}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
) : (
|
||
<Select
|
||
value={fieldMapping[targetField]}
|
||
label={t(`import.${targetField}Field`, targetField)}
|
||
onChange={e => handleFieldChange(targetField, e.target.value)}
|
||
>
|
||
<MenuItem value="">
|
||
<em>{t('import.selectField', '选择字段')}</em>
|
||
</MenuItem>
|
||
{availableFields.map(field => (
|
||
<MenuItem key={field} value={field}>
|
||
{field}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
)}
|
||
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.5 }}>
|
||
{getFieldDescription(targetField)}
|
||
</Typography>
|
||
</FormControl>
|
||
))}
|
||
</Box>
|
||
</Paper>
|
||
|
||
{/* 数据预览 */}
|
||
<Paper sx={{ mb: 3 }}>
|
||
<Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
|
||
<Typography variant="subtitle1">{t('import.dataPreview', '数据预览')}</Typography>
|
||
<Typography variant="body2" color="text.secondary">
|
||
{t('import.previewNote', '显示前3条记录，每个字段值最多显示100个字符')}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<TableContainer sx={{ maxHeight: 400 }}>
|
||
<Table stickyHeader size="small">
|
||
<TableHead>
|
||
<TableRow>
|
||
{availableFields.map(field => (
|
||
<TableCell key={field} sx={{ minWidth: 150 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Typography variant="subtitle2">{field}</Typography>
|
||
{Object.entries(fieldMapping).map(([targetField, sourceField]) => {
|
||
const match = Array.isArray(sourceField) ? sourceField.includes(field) : sourceField === field;
|
||
if (match) {
|
||
return (
|
||
<Chip
|
||
key={targetField}
|
||
label={t(`import.${targetField}Field`, targetField)}
|
||
size="small"
|
||
color={isFieldRequired(targetField) ? 'primary' : 'default'}
|
||
variant="outlined"
|
||
/>
|
||
);
|
||
}
|
||
return null;
|
||
})}
|
||
</Box>
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{previewData.map((row, index) => (
|
||
<TableRow key={index}>
|
||
{availableFields.map(field => (
|
||
<TableCell key={field}>
|
||
<Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
|
||
{row[field] || '-'}
|
||
</Typography>
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Paper>
|
||
|
||
{/* 确认按钮 */}
|
||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Button variant="contained" onClick={handleConfirmMapping} disabled={!mappingValid}>
|
||
{t('import.confirmMapping', '确认映射')}
|
||
</Button>
|
||
</Box>
|
||
|
||
{!mappingValid && (
|
||
<Alert severity="warning" sx={{ mt: 2 }}>
|
||
{t('import.requiredFields', '请至少选择问题和答案字段的映射')}
|
||
</Alert>
|
||
)}
|
||
</Box>
|
||
);
|
||
}
|