438 lines
13 KiB
JavaScript
438 lines
13 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { Box, Typography, TextField, Chip, Button, Paper } from '@mui/material';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import AddIcon from '@mui/icons-material/Add';
|
|||
|
|
import AIGenerateButton from './AIGenerateButton';
|
|||
|
|
|
|||
|
|
export default function AnswerInput({
|
|||
|
|
answerType,
|
|||
|
|
answer,
|
|||
|
|
onAnswerChange,
|
|||
|
|
labels,
|
|||
|
|
customFormat,
|
|||
|
|
projectId,
|
|||
|
|
imageName,
|
|||
|
|
question
|
|||
|
|
}) {
|
|||
|
|
const { t, i18n } = useTranslation();
|
|||
|
|
const [newLabel, setNewLabel] = useState('');
|
|||
|
|
const [jsonError, setJsonError] = useState('');
|
|||
|
|
|
|||
|
|
// 文字类型输入
|
|||
|
|
if (answerType === 'text') {
|
|||
|
|
return (
|
|||
|
|
<Box>
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
|||
|
|
<Typography variant="h6" fontWeight="600" sx={{ color: 'text.primary' }}>
|
|||
|
|
{t('images.answer', { defaultValue: '文本答案' })} *
|
|||
|
|
</Typography>
|
|||
|
|
<AIGenerateButton
|
|||
|
|
projectId={projectId}
|
|||
|
|
imageName={imageName}
|
|||
|
|
question={question}
|
|||
|
|
onSuccess={onAnswerChange}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
multiline
|
|||
|
|
rows={6}
|
|||
|
|
value={answer}
|
|||
|
|
onChange={e => onAnswerChange(e.target.value)}
|
|||
|
|
placeholder={t('images.answerPlaceholder', { defaultValue: '请输入答案...' })}
|
|||
|
|
sx={{
|
|||
|
|
'& .MuiOutlinedInput-root': {
|
|||
|
|
borderRadius: 3,
|
|||
|
|
backgroundColor: 'background.paper',
|
|||
|
|
'& fieldset': {
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: 'divider'
|
|||
|
|
},
|
|||
|
|
'&:hover fieldset': {
|
|||
|
|
borderColor: 'primary.main'
|
|||
|
|
},
|
|||
|
|
'&.Mui-focused fieldset': {
|
|||
|
|
borderColor: 'primary.main',
|
|||
|
|
borderWidth: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'& textarea': {
|
|||
|
|
fontSize: '14px',
|
|||
|
|
lineHeight: 1.6
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标签类型输入 - 提前解析 labels，避免条件中的 hooks 问题
|
|||
|
|
if (answerType === 'label') {
|
|||
|
|
const selectedLabels = Array.isArray(answer) ? answer : [];
|
|||
|
|
|
|||
|
|
// 解析 labels（可能是 JSON 字符串或数组）
|
|||
|
|
let labelOptions = [];
|
|||
|
|
if (typeof labels === 'string' && labels) {
|
|||
|
|
try {
|
|||
|
|
labelOptions = JSON.parse(labels);
|
|||
|
|
} catch (e) {
|
|||
|
|
labelOptions = [];
|
|||
|
|
}
|
|||
|
|
} else if (Array.isArray(labels)) {
|
|||
|
|
labelOptions = labels;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!labelOptions.includes('其他') && !labelOptions.includes('other')) {
|
|||
|
|
labelOptions.push(i18n.language === 'en' ? 'other' : '其他');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleToggleLabel = label => {
|
|||
|
|
if (selectedLabels.includes(label)) {
|
|||
|
|
onAnswerChange(selectedLabels.filter(l => l !== label));
|
|||
|
|
} else {
|
|||
|
|
let newLabels = [...selectedLabels, label];
|
|||
|
|
onAnswerChange(newLabels);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddNewLabel = () => {
|
|||
|
|
if (newLabel.trim() && !labelOptions.includes(newLabel.trim())) {
|
|||
|
|
handleToggleLabel(newLabel.trim());
|
|||
|
|
setNewLabel('');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box>
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
|||
|
|
<Typography variant="h6" fontWeight="600" sx={{ color: 'text.primary' }}>
|
|||
|
|
{t('images.selectLabels', { defaultValue: '标签选择' })} *
|
|||
|
|
</Typography>
|
|||
|
|
<AIGenerateButton
|
|||
|
|
projectId={projectId}
|
|||
|
|
imageName={imageName}
|
|||
|
|
question={question}
|
|||
|
|
onSuccess={onAnswerChange}
|
|||
|
|
answerType={answerType}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 可选标签 */}
|
|||
|
|
<Paper
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
p: 3,
|
|||
|
|
mb: 3,
|
|||
|
|
borderRadius: 3,
|
|||
|
|
backgroundColor: 'grey.50',
|
|||
|
|
border: '2px solid',
|
|||
|
|
borderColor: 'divider',
|
|||
|
|
'&:hover': {
|
|||
|
|
borderColor: 'primary.light'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant="subtitle2" color="text.secondary" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
|
|||
|
|
{t('images.availableLabels', { defaultValue: '可选标签' })}
|
|||
|
|
</Typography>
|
|||
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5 }}>
|
|||
|
|
{labelOptions && labelOptions.length > 0 ? (
|
|||
|
|
labelOptions.map(label => (
|
|||
|
|
<Chip
|
|||
|
|
key={label}
|
|||
|
|
label={label}
|
|||
|
|
onClick={() => handleToggleLabel(label)}
|
|||
|
|
color={selectedLabels.includes(label) ? 'primary' : 'default'}
|
|||
|
|
variant={selectedLabels.includes(label) ? 'filled' : 'outlined'}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 2,
|
|||
|
|
fontWeight: 500,
|
|||
|
|
fontSize: '0.875rem',
|
|||
|
|
height: 36,
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
transition: 'all 0.2s ease',
|
|||
|
|
'&:hover': {
|
|||
|
|
transform: 'translateY(-1px)',
|
|||
|
|
boxShadow: 2
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
))
|
|||
|
|
) : (
|
|||
|
|
<Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
|||
|
|
{t('images.noLabelsAvailable', { defaultValue: '暂无可选标签' })}
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
</Paper>
|
|||
|
|
|
|||
|
|
{/* 添加新标签 */}
|
|||
|
|
{/* <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
|
|||
|
|
<TextField
|
|||
|
|
size="small"
|
|||
|
|
value={newLabel}
|
|||
|
|
onChange={e => setNewLabel(e.target.value)}
|
|||
|
|
placeholder={t('images.addNewLabel', { defaultValue: '添加新标签...' })}
|
|||
|
|
onKeyPress={e => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
handleAddNewLabel();
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
sx={{
|
|||
|
|
flex: 1,
|
|||
|
|
'& .MuiOutlinedInput-root': {
|
|||
|
|
borderRadius: 2,
|
|||
|
|
backgroundColor: 'background.paper',
|
|||
|
|
'& fieldset': {
|
|||
|
|
borderWidth: 2
|
|||
|
|
},
|
|||
|
|
'&:hover fieldset': {
|
|||
|
|
borderColor: 'primary.main'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
startIcon={<AddIcon />}
|
|||
|
|
onClick={handleAddNewLabel}
|
|||
|
|
disabled={!newLabel.trim()}
|
|||
|
|
variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 2,
|
|||
|
|
px: 3,
|
|||
|
|
fontWeight: 600,
|
|||
|
|
textTransform: 'none',
|
|||
|
|
boxShadow: 2,
|
|||
|
|
'&:hover': {
|
|||
|
|
boxShadow: 4
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{t('common.add', { defaultValue: '添加' })}
|
|||
|
|
</Button>
|
|||
|
|
</Box> */}
|
|||
|
|
|
|||
|
|
{/* 已选择标签 */}
|
|||
|
|
{/* {selectedLabels.length > 0 && (
|
|||
|
|
<Box>
|
|||
|
|
<Typography variant="subtitle2" color="text.secondary" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
|
|||
|
|
{t('images.selectedLabels', { defaultValue: '已选择' })} ({selectedLabels.length})
|
|||
|
|
</Typography>
|
|||
|
|
<Paper
|
|||
|
|
sx={{
|
|||
|
|
p: 2.5,
|
|||
|
|
borderRadius: 3,
|
|||
|
|
backgroundColor: 'primary.50',
|
|||
|
|
border: '2px solid',
|
|||
|
|
borderColor: 'primary.200'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5 }}>
|
|||
|
|
{selectedLabels.map(label => (
|
|||
|
|
<Chip
|
|||
|
|
key={label}
|
|||
|
|
label={label}
|
|||
|
|
onDelete={() => handleToggleLabel(label)}
|
|||
|
|
color="primary"
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 2,
|
|||
|
|
fontWeight: 500,
|
|||
|
|
fontSize: '0.875rem',
|
|||
|
|
height: 36,
|
|||
|
|
'& .MuiChip-deleteIcon': {
|
|||
|
|
fontSize: '18px',
|
|||
|
|
'&:hover': {
|
|||
|
|
color: 'error.main'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
</Paper>
|
|||
|
|
</Box>
|
|||
|
|
)} */}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自定义格式输入
|
|||
|
|
if (answerType === 'custom_format') {
|
|||
|
|
const handleJsonChange = value => {
|
|||
|
|
onAnswerChange(value);
|
|||
|
|
// 验证 JSON 格式
|
|||
|
|
if (value.trim()) {
|
|||
|
|
try {
|
|||
|
|
JSON.parse(value);
|
|||
|
|
setJsonError('');
|
|||
|
|
} catch (e) {
|
|||
|
|
setJsonError(t('images.invalidJsonFormat', { defaultValue: 'JSON 格式不正确' }));
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setJsonError('');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUseTemplate = () => {
|
|||
|
|
if (customFormat) {
|
|||
|
|
try {
|
|||
|
|
let templateJson;
|
|||
|
|
if (typeof customFormat === 'string') {
|
|||
|
|
templateJson = JSON.parse(customFormat);
|
|||
|
|
} else {
|
|||
|
|
templateJson = customFormat;
|
|||
|
|
}
|
|||
|
|
const formatted = JSON.stringify(templateJson, null, 2);
|
|||
|
|
onAnswerChange(formatted);
|
|||
|
|
setJsonError('');
|
|||
|
|
} catch (e) {
|
|||
|
|
onAnswerChange('{}');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (answer && typeof answer === 'object') {
|
|||
|
|
answer = JSON.stringify(answer, null, 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box>
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
|||
|
|
<Typography variant="h6" fontWeight="600" sx={{ color: 'text.primary' }}>
|
|||
|
|
{t('images.customFormatAnswer', { defaultValue: '自定义格式答案' })} *
|
|||
|
|
</Typography>
|
|||
|
|
<Box sx={{ display: 'flex', gap: 1.5 }}>
|
|||
|
|
<AIGenerateButton
|
|||
|
|
projectId={projectId}
|
|||
|
|
imageName={imageName}
|
|||
|
|
question={question}
|
|||
|
|
onSuccess={onAnswerChange}
|
|||
|
|
/>
|
|||
|
|
{customFormat && (
|
|||
|
|
<Button
|
|||
|
|
size="small"
|
|||
|
|
onClick={handleUseTemplate}
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 2,
|
|||
|
|
textTransform: 'none',
|
|||
|
|
fontWeight: 500,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
'&:hover': {
|
|||
|
|
borderWidth: 2
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{t('images.useTemplate', { defaultValue: '使用模板' })}
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{/* <Button
|
|||
|
|
size="small"
|
|||
|
|
onClick={handleFormatJson}
|
|||
|
|
variant="outlined"
|
|||
|
|
disabled={!answer.trim()}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 2,
|
|||
|
|
textTransform: 'none',
|
|||
|
|
fontWeight: 500,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
'&:hover': {
|
|||
|
|
borderWidth: 2
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{t('images.formatJson', { defaultValue: '格式化' })}
|
|||
|
|
</Button> */}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 显示格式要求 */}
|
|||
|
|
{customFormat && (
|
|||
|
|
<Paper
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
p: 3,
|
|||
|
|
mb: 3,
|
|||
|
|
bgcolor: 'grey.50',
|
|||
|
|
borderRadius: 3,
|
|||
|
|
border: '2px solid',
|
|||
|
|
borderColor: 'divider'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant="subtitle2" color="text.secondary" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
|
|||
|
|
{t('images.formatRequirement', { defaultValue: '格式要求' })}
|
|||
|
|
</Typography>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: 'background.paper',
|
|||
|
|
borderRadius: 2,
|
|||
|
|
p: 2,
|
|||
|
|
border: '1px solid',
|
|||
|
|
borderColor: 'divider'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<pre
|
|||
|
|
style={{
|
|||
|
|
margin: 0,
|
|||
|
|
fontSize: '13px',
|
|||
|
|
overflow: 'auto',
|
|||
|
|
maxHeight: '150px',
|
|||
|
|
fontFamily: 'Monaco, Consolas, "Courier New", monospace',
|
|||
|
|
lineHeight: 1.5,
|
|||
|
|
color: '#2d3748'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{typeof customFormat === 'string' ? customFormat : JSON.stringify(customFormat, null, 2)}
|
|||
|
|
</pre>
|
|||
|
|
</Box>
|
|||
|
|
</Paper>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* JSON 输入框 */}
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
multiline
|
|||
|
|
rows={10}
|
|||
|
|
value={answer}
|
|||
|
|
onChange={e => handleJsonChange(e.target.value)}
|
|||
|
|
placeholder={t('images.customFormatPlaceholder', { defaultValue: '请输入符合格式的 JSON...' })}
|
|||
|
|
error={!!jsonError}
|
|||
|
|
sx={{
|
|||
|
|
'& .MuiOutlinedInput-root': {
|
|||
|
|
borderRadius: 3,
|
|||
|
|
backgroundColor: 'background.paper',
|
|||
|
|
'& fieldset': {
|
|||
|
|
borderWidth: 2
|
|||
|
|
},
|
|||
|
|
'&:hover fieldset': {
|
|||
|
|
borderColor: 'primary.main'
|
|||
|
|
},
|
|||
|
|
'&.Mui-focused fieldset': {
|
|||
|
|
borderColor: 'primary.main',
|
|||
|
|
borderWidth: 2
|
|||
|
|
},
|
|||
|
|
'&.Mui-error fieldset': {
|
|||
|
|
borderColor: 'error.main',
|
|||
|
|
borderWidth: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'& textarea': {
|
|||
|
|
fontFamily: 'Monaco, Consolas, "Courier New", monospace',
|
|||
|
|
fontSize: '13px',
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
},
|
|||
|
|
'& .MuiFormHelperText-root': {
|
|||
|
|
fontSize: '0.875rem',
|
|||
|
|
fontWeight: 500
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
}
|