336 lines
11 KiB
JavaScript
336 lines
11 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogTitle,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogActions,
|
|||
|
|
Button,
|
|||
|
|
TextField,
|
|||
|
|
FormControl,
|
|||
|
|
InputLabel,
|
|||
|
|
Select,
|
|||
|
|
MenuItem,
|
|||
|
|
Box,
|
|||
|
|
Chip,
|
|||
|
|
Typography,
|
|||
|
|
Alert,
|
|||
|
|
FormControlLabel,
|
|||
|
|
Checkbox
|
|||
|
|
} from '@mui/material';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
|
|||
|
|
export default function TemplateFormDialog({ open, onClose, onSubmit, template }) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
question: '',
|
|||
|
|
sourceType: 'text',
|
|||
|
|
answerType: 'text',
|
|||
|
|
description: '',
|
|||
|
|
labels: [],
|
|||
|
|
customFormat: '',
|
|||
|
|
autoGenerate: true
|
|||
|
|
});
|
|||
|
|
const [labelInput, setLabelInput] = useState('');
|
|||
|
|
const [errors, setErrors] = useState({});
|
|||
|
|
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (template) {
|
|||
|
|
setFormData({
|
|||
|
|
question: template.question || '',
|
|||
|
|
sourceType: template.sourceType || 'text',
|
|||
|
|
answerType: template.answerType || 'text',
|
|||
|
|
description: template.description || '',
|
|||
|
|
labels: template.labels || [],
|
|||
|
|
customFormat: template.customFormat ? JSON.stringify(template.customFormat, null, 2) : '',
|
|||
|
|
autoGenerate: true // 编辑模式下默认不自动生成
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
setFormData({
|
|||
|
|
question: '',
|
|||
|
|
sourceType: 'text',
|
|||
|
|
answerType: 'text',
|
|||
|
|
description: '',
|
|||
|
|
labels: [],
|
|||
|
|
customFormat: '',
|
|||
|
|
autoGenerate: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
setErrors({});
|
|||
|
|
setShowConfirmDialog(false);
|
|||
|
|
}, [template, open]);
|
|||
|
|
|
|||
|
|
const handleChange = (field, value) => {
|
|||
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|||
|
|
// 清除该字段的错误
|
|||
|
|
if (errors[field]) {
|
|||
|
|
setErrors(prev => ({ ...prev, [field]: null }));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddLabel = () => {
|
|||
|
|
const trimmed = labelInput.trim();
|
|||
|
|
if (trimmed && !formData.labels.includes(trimmed)) {
|
|||
|
|
setFormData(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
labels: [...prev.labels, trimmed]
|
|||
|
|
}));
|
|||
|
|
setLabelInput('');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDeleteLabel = labelToDelete => {
|
|||
|
|
setFormData(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
labels: prev.labels.filter(label => label !== labelToDelete)
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const validate = () => {
|
|||
|
|
const newErrors = {};
|
|||
|
|
|
|||
|
|
if (!formData.question.trim()) {
|
|||
|
|
newErrors.question = t('questions.template.errors.questionRequired');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (formData.answerType === 'label' && formData.labels.length === 0) {
|
|||
|
|
newErrors.labels = t('questions.template.errors.labelsRequired');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (formData.answerType === 'custom_format') {
|
|||
|
|
if (!formData.customFormat.trim()) {
|
|||
|
|
newErrors.customFormat = t('questions.template.errors.customFormatRequired');
|
|||
|
|
} else {
|
|||
|
|
try {
|
|||
|
|
JSON.parse(formData.customFormat);
|
|||
|
|
} catch (e) {
|
|||
|
|
newErrors.customFormat = t('questions.template.errors.invalidJson');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setErrors(newErrors);
|
|||
|
|
return Object.keys(newErrors).length === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = () => {
|
|||
|
|
if (!validate()) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果选择了自动生成，显示确认对话框
|
|||
|
|
if (formData.autoGenerate) {
|
|||
|
|
setShowConfirmDialog(true);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接提交
|
|||
|
|
submitTemplate();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const submitTemplate = () => {
|
|||
|
|
const submitData = {
|
|||
|
|
question: formData.question.trim(),
|
|||
|
|
sourceType: formData.sourceType,
|
|||
|
|
answerType: formData.answerType,
|
|||
|
|
description: formData.description.trim(),
|
|||
|
|
autoGenerate: formData.autoGenerate,
|
|||
|
|
templateId: template?.id // 编辑模式时传递模板ID，用于查找未创建问题的数据源
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (formData.answerType === 'label') {
|
|||
|
|
submitData.labels = formData.labels;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (formData.answerType === 'custom_format') {
|
|||
|
|
try {
|
|||
|
|
submitData.customFormat = JSON.parse(formData.customFormat);
|
|||
|
|
} catch (e) {
|
|||
|
|
// 已在验证中处理
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onSubmit(submitData);
|
|||
|
|
setShowConfirmDialog(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleConfirmGenerate = () => {
|
|||
|
|
submitTemplate();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCancelGenerate = () => {
|
|||
|
|
setShowConfirmDialog(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
|||
|
|
<DialogTitle>{template ? t('questions.template.edit') : t('questions.template.create')}</DialogTitle>
|
|||
|
|
<DialogContent dividers>
|
|||
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|||
|
|
{/* 数据源类型 */}
|
|||
|
|
<FormControl fullWidth>
|
|||
|
|
<InputLabel>{t('questions.template.sourceTypeInfo')}</InputLabel>
|
|||
|
|
<Select
|
|||
|
|
value={formData.sourceType}
|
|||
|
|
label={t('questions.template.sourceTypeInfo')}
|
|||
|
|
onChange={e => handleChange('sourceType', e.target.value)}
|
|||
|
|
>
|
|||
|
|
<MenuItem value="text">{t('questions.template.sourceType.text')}</MenuItem>
|
|||
|
|
<MenuItem value="image">{t('questions.template.sourceType.image')}</MenuItem>
|
|||
|
|
</Select>
|
|||
|
|
</FormControl>
|
|||
|
|
|
|||
|
|
{/* 问题内容 */}
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
label={t('questions.template.question')}
|
|||
|
|
value={formData.question}
|
|||
|
|
onChange={e => handleChange('question', e.target.value)}
|
|||
|
|
error={!!errors.question}
|
|||
|
|
helperText={errors.question}
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 答案类型 */}
|
|||
|
|
<FormControl fullWidth>
|
|||
|
|
<InputLabel>{t('questions.template.answerType.label')}</InputLabel>
|
|||
|
|
<Select
|
|||
|
|
value={formData.answerType}
|
|||
|
|
label={t('questions.template.answerType.label')}
|
|||
|
|
onChange={e => handleChange('answerType', e.target.value)}
|
|||
|
|
>
|
|||
|
|
<MenuItem value="text">{t('questions.template.answerType.text')}</MenuItem>
|
|||
|
|
<MenuItem value="label">{t('questions.template.answerType.tags')}</MenuItem>
|
|||
|
|
<MenuItem value="custom_format">{t('questions.template.answerType.customFormat')}</MenuItem>
|
|||
|
|
</Select>
|
|||
|
|
</FormControl>
|
|||
|
|
|
|||
|
|
{/* 描述 */}
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
label={t('questions.template.description')}
|
|||
|
|
value={formData.description}
|
|||
|
|
onChange={e => handleChange('description', e.target.value)}
|
|||
|
|
helperText={t('questions.template.descriptionHelp')}
|
|||
|
|
multiline
|
|||
|
|
rows={2}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 标签输入 (仅当答案类型为 label 时显示) */}
|
|||
|
|
{formData.answerType === 'label' && (
|
|||
|
|
<Box>
|
|||
|
|
<Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
label={t('questions.template.addLabel')}
|
|||
|
|
value={labelInput}
|
|||
|
|
onChange={e => setLabelInput(e.target.value)}
|
|||
|
|
onKeyPress={e => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
e.preventDefault();
|
|||
|
|
handleAddLabel();
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
error={!!errors.labels}
|
|||
|
|
helperText={errors.labels}
|
|||
|
|
/>
|
|||
|
|
<Button variant="outlined" onClick={handleAddLabel} sx={{ minWidth: '100px' }}>
|
|||
|
|
{t('common.add')}
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
|||
|
|
{formData.labels.map(label => (
|
|||
|
|
<Chip
|
|||
|
|
key={label}
|
|||
|
|
label={label}
|
|||
|
|
onDelete={() => handleDeleteLabel(label)}
|
|||
|
|
color="primary"
|
|||
|
|
variant="outlined"
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 自定义格式输入 (仅当答案类型为 custom_format 时显示) */}
|
|||
|
|
{formData.answerType === 'custom_format' && (
|
|||
|
|
<Box>
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
label={t('questions.template.customFormat')}
|
|||
|
|
value={formData.customFormat}
|
|||
|
|
onChange={e => handleChange('customFormat', e.target.value)}
|
|||
|
|
multiline
|
|||
|
|
rows={6}
|
|||
|
|
error={!!errors.customFormat}
|
|||
|
|
helperText={errors.customFormat || t('questions.template.customFormatHelp')}
|
|||
|
|
placeholder='{"field1": "description", "field2": "description"}'
|
|||
|
|
/>
|
|||
|
|
<Alert severity="info" sx={{ mt: 1 }}>
|
|||
|
|
{t('questions.template.customFormatInfo')}
|
|||
|
|
</Alert>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 自动生成问题选项 */}
|
|||
|
|
<Box>
|
|||
|
|
<FormControlLabel
|
|||
|
|
control={
|
|||
|
|
<Checkbox
|
|||
|
|
checked={formData.autoGenerate}
|
|||
|
|
onChange={e => handleChange('autoGenerate', e.target.checked)}
|
|||
|
|
color="primary"
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
label={t('questions.template.autoGenerate')}
|
|||
|
|
/>
|
|||
|
|
<Typography variant="body2" color="text.secondary" sx={{ ml: 4, mt: 0.5 }}>
|
|||
|
|
{formData.sourceType === 'text'
|
|||
|
|
? t('questions.template.autoGenerateHelpText')
|
|||
|
|
: t('questions.template.autoGenerateHelpImage')}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</DialogContent>
|
|||
|
|
<DialogActions>
|
|||
|
|
<Button onClick={onClose}>{t('common.cancel')}</Button>
|
|||
|
|
<Button onClick={handleSubmit} variant="contained">
|
|||
|
|
{template ? t('common.save') : t('common.create')}
|
|||
|
|
</Button>
|
|||
|
|
</DialogActions>
|
|||
|
|
|
|||
|
|
{/* 自动生成确认对话框 */}
|
|||
|
|
<Dialog open={showConfirmDialog} onClose={handleCancelGenerate}>
|
|||
|
|
<DialogTitle>{t('questions.template.confirmAutoGenerate')}</DialogTitle>
|
|||
|
|
<DialogContent>
|
|||
|
|
<Typography>
|
|||
|
|
{template
|
|||
|
|
? formData.sourceType === 'text'
|
|||
|
|
? t('questions.template.confirmAutoGenerateEditTextMessage', {
|
|||
|
|
defaultValue: '您选择了自动生成问题。系统将为所有还未创建此模板问题的文本块创建问题。'
|
|||
|
|
})
|
|||
|
|
: t('questions.template.confirmAutoGenerateEditImageMessage', {
|
|||
|
|
defaultValue: '您选择了自动生成问题。系统将为所有还未创建此模板问题的图片创建问题。'
|
|||
|
|
})
|
|||
|
|
: formData.sourceType === 'text'
|
|||
|
|
? t('questions.template.confirmAutoGenerateTextMessage')
|
|||
|
|
: t('questions.template.confirmAutoGenerateImageMessage')}
|
|||
|
|
</Typography>
|
|||
|
|
<Alert severity="warning" sx={{ mt: 2 }}>
|
|||
|
|
{t('questions.template.autoGenerateWarning')}
|
|||
|
|
</Alert>
|
|||
|
|
</DialogContent>
|
|||
|
|
<DialogActions>
|
|||
|
|
<Button onClick={handleCancelGenerate}>{t('common.cancel')}</Button>
|
|||
|
|
<Button onClick={handleConfirmGenerate} variant="contained" color="primary">
|
|||
|
|
{t('common.confirm')}
|
|||
|
|
</Button>
|
|||
|
|
</DialogActions>
|
|||
|
|
</Dialog>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|