611 lines
20 KiB
JavaScript
611 lines
20 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import {
|
||
Box,
|
||
Typography,
|
||
Button,
|
||
Card,
|
||
CardContent,
|
||
Switch,
|
||
FormControlLabel,
|
||
TextField,
|
||
IconButton,
|
||
Tooltip,
|
||
Divider,
|
||
Alert,
|
||
CircularProgress,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
Grid
|
||
} from '@mui/material';
|
||
import {
|
||
Add as AddIcon,
|
||
Delete as DeleteIcon,
|
||
AutoFixHigh as AutoFixHighIcon,
|
||
Save as SaveIcon
|
||
} from '@mui/icons-material';
|
||
import { useTranslation } from 'react-i18next';
|
||
import i18n from '@/lib/i18n';
|
||
|
||
/**
|
||
* GA Pairs Manager Component
|
||
* @param {Object} props
|
||
* @param {string} props.projectId - Project ID
|
||
* @param {string} props.fileId - File ID
|
||
* @param {Function} props.onGaPairsChange - Callback when GA pairs change
|
||
*/
|
||
export default function GaPairsManager({ projectId, fileId, onGaPairsChange }) {
|
||
const { t } = useTranslation();
|
||
const [gaPairs, setGaPairs] = useState([]);
|
||
const [backupGaPairs, setBackupGaPairs] = useState([]); // 备份状态
|
||
const [loading, setLoading] = useState(false);
|
||
const [generating, setGenerating] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [error, setError] = useState(null);
|
||
const [success, setSuccess] = useState(null);
|
||
const [addDialogOpen, setAddDialogOpen] = useState(false);
|
||
const [newGaPair, setNewGaPair] = useState({
|
||
genreTitle: '',
|
||
genreDesc: '',
|
||
audienceTitle: '',
|
||
audienceDesc: '',
|
||
isActive: true
|
||
});
|
||
|
||
useEffect(() => {
|
||
loadGaPairs();
|
||
}, [projectId, fileId]);
|
||
|
||
const loadGaPairs = async () => {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
const response = await fetch(`/api/projects/${projectId}/files/${fileId}/ga-pairs`);
|
||
|
||
// 检查响应状态
|
||
if (!response.ok) {
|
||
if (response.status === 404) {
|
||
console.warn('GA Pairs API not found, using empty data');
|
||
setGaPairs([]);
|
||
setBackupGaPairs([]);
|
||
return;
|
||
}
|
||
throw new Error(`HTTP ${response.status}: Failed to load GA pairs`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
console.log('Load GA pairs result:', result);
|
||
|
||
if (result.success) {
|
||
const loadedData = result.data || [];
|
||
setGaPairs(loadedData);
|
||
setBackupGaPairs([...loadedData]); // 创建备份
|
||
onGaPairsChange?.(loadedData);
|
||
} else {
|
||
throw new Error(result.error || 'Failed to load GA pairs');
|
||
}
|
||
} catch (error) {
|
||
console.error('Load GA pairs error:', error);
|
||
setError(t('gaPairs.loadError', { error: error.message }));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const generateGaPairs = async () => {
|
||
try {
|
||
setGenerating(true);
|
||
setError(null);
|
||
|
||
console.log('Starting GA pairs generation...');
|
||
|
||
// Get current language from i18n
|
||
const currentLanguage = i18n.language === 'en' ? 'en' : '中文';
|
||
|
||
const response = await fetch(`/api/projects/${projectId}/files/${fileId}/ga-pairs`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
regenerate: false,
|
||
appendMode: true, // 新增：启用追加模式
|
||
language: currentLanguage
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
let errorMessage = t('gaPairs.generateError');
|
||
|
||
if (response.status === 404) {
|
||
errorMessage = t('gaPairs.serviceNotAvailable');
|
||
} else if (response.status === 400) {
|
||
try {
|
||
const errorResult = await response.json();
|
||
if (errorResult.error?.includes('No active AI model')) {
|
||
errorMessage = t('gaPairs.noActiveModel');
|
||
} else if (errorResult.error?.includes('content might be too short')) {
|
||
errorMessage = t('gaPairs.contentTooShort');
|
||
} else {
|
||
errorMessage = errorResult.error || errorMessage;
|
||
}
|
||
} catch (parseError) {
|
||
errorMessage = t('gaPairs.requestFailed', { status: response.status });
|
||
}
|
||
} else if (response.status === 500) {
|
||
try {
|
||
const errorResult = await response.json();
|
||
if (errorResult.error?.includes('model configuration') || errorResult.error?.includes('Module not found')) {
|
||
errorMessage = t('gaPairs.configError');
|
||
} else {
|
||
errorMessage = errorResult.error || 'Internal server error occurred.';
|
||
}
|
||
} catch (parseError) {
|
||
console.error('Failed to parse error response:', parseError);
|
||
errorMessage = errorResult.error || t('gaPairs.internalServerError');
|
||
}
|
||
}
|
||
|
||
throw new Error(errorMessage);
|
||
}
|
||
|
||
// 处理成功响应
|
||
const responseText = await response.text();
|
||
if (!responseText || responseText.trim() === '') {
|
||
throw new Error(t('gaPairs.emptyResponse'));
|
||
}
|
||
|
||
const result = JSON.parse(responseText);
|
||
console.log('Generate GA pairs result:', result);
|
||
|
||
if (result.success) {
|
||
// 在追加模式下，后端只返回新生成的GA对
|
||
const newGaPairs = result.data || [];
|
||
|
||
// 将新生成的GA对追加到现有的GA对
|
||
const updatedGaPairs = [...gaPairs, ...newGaPairs];
|
||
|
||
setGaPairs(updatedGaPairs);
|
||
setBackupGaPairs([...updatedGaPairs]); // 更新备份
|
||
onGaPairsChange?.(updatedGaPairs);
|
||
setSuccess(
|
||
t('gaPairs.additionalPairsGenerated', {
|
||
count: newGaPairs.length,
|
||
total: updatedGaPairs.length
|
||
})
|
||
);
|
||
} else {
|
||
throw new Error(result.error || t('gaPairs.generationFailed'));
|
||
}
|
||
} catch (error) {
|
||
console.error('Generate GA pairs error:', error);
|
||
setError(error.message);
|
||
} finally {
|
||
setGenerating(false);
|
||
}
|
||
};
|
||
|
||
const saveGaPairs = async () => {
|
||
try {
|
||
setSaving(true);
|
||
setError(null);
|
||
|
||
// 验证GA对数据
|
||
const validatedGaPairs = gaPairs.map((pair, index) => {
|
||
// 处理不同的数据格式
|
||
let genreTitle, genreDesc, audienceTitle, audienceDesc;
|
||
|
||
if (pair.genre && typeof pair.genre === 'object') {
|
||
genreTitle = pair.genre.title;
|
||
genreDesc = pair.genre.description;
|
||
} else {
|
||
genreTitle = pair.genreTitle || pair.genre;
|
||
genreDesc = pair.genreDesc || '';
|
||
}
|
||
|
||
if (pair.audience && typeof pair.audience === 'object') {
|
||
audienceTitle = pair.audience.title;
|
||
audienceDesc = pair.audience.description;
|
||
} else {
|
||
audienceTitle = pair.audienceTitle || pair.audience;
|
||
audienceDesc = pair.audienceDesc || '';
|
||
}
|
||
|
||
// 验证必填字段
|
||
if (!genreTitle || !audienceTitle) {
|
||
throw new Error(t('gaPairs.validationError', { number: index + 1 }));
|
||
}
|
||
|
||
return {
|
||
id: pair.id,
|
||
genreTitle: genreTitle.trim(),
|
||
genreDesc: genreDesc.trim(),
|
||
audienceTitle: audienceTitle.trim(),
|
||
audienceDesc: audienceDesc.trim(),
|
||
isActive: pair.isActive !== undefined ? pair.isActive : true
|
||
};
|
||
});
|
||
|
||
console.log('Saving validated GA pairs:', validatedGaPairs);
|
||
|
||
const response = await fetch(`/api/projects/${projectId}/files/${fileId}/ga-pairs`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
updates: validatedGaPairs
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
let errorMessage = t('gaPairs.saveError');
|
||
|
||
if (response.status === 404) {
|
||
errorMessage = 'GA Pairs save service is not available.';
|
||
} else {
|
||
try {
|
||
const errorResult = await response.json();
|
||
errorMessage = errorResult.error || errorMessage;
|
||
} catch (parseError) {
|
||
errorMessage = t('gaPairs.serverError', { status: response.status });
|
||
}
|
||
}
|
||
|
||
throw new Error(errorMessage);
|
||
}
|
||
|
||
const responseText = await response.text();
|
||
const result = responseText ? JSON.parse(responseText) : { success: true };
|
||
|
||
if (result.success) {
|
||
// 更新本地状态为服务器返回的数据
|
||
const savedData = result.data || validatedGaPairs;
|
||
setGaPairs(savedData);
|
||
|
||
// 根据保存的GA对数量显示不同的成功消息
|
||
if (savedData.length === 0) {
|
||
setSuccess(t('gaPairs.allPairsDeleted'));
|
||
} else {
|
||
setSuccess(t('gaPairs.pairsSaved', { count: savedData.length }));
|
||
}
|
||
|
||
onGaPairsChange?.(savedData);
|
||
} else {
|
||
throw new Error(result.error || t('gaPairs.saveOperationFailed'));
|
||
}
|
||
} catch (error) {
|
||
console.error('Save GA pairs error:', error);
|
||
setError(error.message);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleGaPairChange = (index, field, value) => {
|
||
const updatedGaPairs = [...gaPairs];
|
||
|
||
// 确保对象存在
|
||
if (!updatedGaPairs[index]) {
|
||
console.error(`GA pair at index ${index} does not exist`);
|
||
return;
|
||
}
|
||
|
||
updatedGaPairs[index] = {
|
||
...updatedGaPairs[index],
|
||
[field]: value
|
||
};
|
||
|
||
setGaPairs(updatedGaPairs);
|
||
// 不立即调用 onGaPairsChange，等用户点击保存时再调用
|
||
};
|
||
|
||
const handleDeleteGaPair = index => {
|
||
const updatedGaPairs = gaPairs.filter((_, i) => i !== index);
|
||
setGaPairs(updatedGaPairs);
|
||
onGaPairsChange?.(updatedGaPairs);
|
||
};
|
||
|
||
const handleAddGaPair = () => {
|
||
// 验证输入
|
||
if (!newGaPair.genreTitle?.trim() || !newGaPair.audienceTitle?.trim()) {
|
||
setError(t('gaPairs.requiredFields'));
|
||
return;
|
||
}
|
||
|
||
// 创建新的GA对对象
|
||
const newPair = {
|
||
id: `temp_${Date.now()}`, // 临时ID
|
||
genreTitle: newGaPair.genreTitle.trim(),
|
||
genreDesc: newGaPair.genreDesc?.trim() || '',
|
||
audienceTitle: newGaPair.audienceTitle.trim(),
|
||
audienceDesc: newGaPair.audienceDesc?.trim() || '',
|
||
isActive: true
|
||
};
|
||
|
||
const updatedGaPairs = [...gaPairs, newPair];
|
||
setGaPairs(updatedGaPairs);
|
||
onGaPairsChange?.(updatedGaPairs);
|
||
|
||
// 重置表单并关闭对话框
|
||
setNewGaPair({
|
||
genreTitle: '',
|
||
genreDesc: '',
|
||
audienceTitle: '',
|
||
audienceDesc: '',
|
||
isActive: true
|
||
});
|
||
setAddDialogOpen(false);
|
||
setError(null);
|
||
};
|
||
|
||
const resetMessages = () => {
|
||
setError(null);
|
||
setSuccess(null);
|
||
};
|
||
|
||
const recoverFromBackup = () => {
|
||
setGaPairs([...backupGaPairs]);
|
||
setError(null);
|
||
setSuccess(t('gaPairs.restoredFromBackup'));
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (error || success) {
|
||
const timer = setTimeout(resetMessages, 5000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [error, success]);
|
||
|
||
if (loading) {
|
||
return (
|
||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 4 }}>
|
||
<CircularProgress />
|
||
<Typography sx={{ ml: 2 }}>{t('gaPairs.loading')}</Typography>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Box sx={{ p: 2 }}>
|
||
{/* Header with action buttons */}
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||
<Typography variant="h6">{t('gaPairs.title')}</Typography>
|
||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||
{/* 右上角按钮为手动添加GA对 */}
|
||
<Button
|
||
variant="outlined"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => setAddDialogOpen(true)}
|
||
disabled={generating || saving}
|
||
>
|
||
{t('gaPairs.addPair')}
|
||
</Button>
|
||
<Button variant="contained" startIcon={<SaveIcon />} onClick={saveGaPairs} disabled={generating || saving}>
|
||
{saving ? <CircularProgress size={20} /> : t('gaPairs.saveChanges')}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* Error/Success Messages */}
|
||
{error && (
|
||
<Alert
|
||
severity="error"
|
||
sx={{ mb: 2 }}
|
||
action={
|
||
backupGaPairs.length > 0 && (
|
||
<Button color="inherit" size="small" onClick={recoverFromBackup}>
|
||
{t('gaPairs.restoreBackup')}
|
||
</Button>
|
||
)
|
||
}
|
||
onClose={resetMessages}
|
||
>
|
||
{error}
|
||
</Alert>
|
||
)}
|
||
{success && (
|
||
<Alert severity="success" sx={{ mb: 2 }} onClose={resetMessages}>
|
||
{success}
|
||
</Alert>
|
||
)}
|
||
|
||
{/* Generate GA Pairs Section - 只在没有GA对时显示 */}
|
||
{gaPairs.length === 0 && (
|
||
<Card sx={{ mb: 3 }}>
|
||
<CardContent sx={{ textAlign: 'center' }}>
|
||
<Typography variant="h6" gutterBottom>
|
||
{t('gaPairs.noGaPairsTitle')}
|
||
</Typography>
|
||
<Typography color="textSecondary" sx={{ mb: 2 }}>
|
||
{t('gaPairs.noGaPairsDescription')}
|
||
</Typography>
|
||
<Button
|
||
variant="contained"
|
||
startIcon={generating ? <CircularProgress size={20} /> : <AutoFixHighIcon />}
|
||
onClick={generateGaPairs}
|
||
disabled={generating}
|
||
size="large"
|
||
>
|
||
{generating ? t('gaPairs.generating') : t('gaPairs.generateGaPairs')}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* GA Pairs List */}
|
||
{gaPairs.length > 0 && (
|
||
<Box>
|
||
<Typography variant="subtitle1" sx={{ mb: 2 }}>
|
||
{t('gaPairs.activePairs', {
|
||
active: gaPairs.filter(pair => pair.isActive).length,
|
||
total: gaPairs.length
|
||
})}
|
||
</Typography>
|
||
|
||
<Grid container spacing={2}>
|
||
{gaPairs.map((pair, index) => (
|
||
<Grid item xs={12} key={pair.id || index}>
|
||
<Card variant="outlined">
|
||
<CardContent>
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
||
<Typography variant="subtitle2" color="primary">
|
||
{t('gaPairs.pairNumber', { number: index + 1 })}
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
checked={pair.isActive}
|
||
onChange={e => handleGaPairChange(index, 'isActive', e.target.checked)}
|
||
size="small"
|
||
/>
|
||
}
|
||
label={t('gaPairs.active')}
|
||
/>
|
||
{/* 添加删除按钮 */}
|
||
<Tooltip title={t('gaPairs.deleteTooltip')}>
|
||
<IconButton size="small" color="error" onClick={() => handleDeleteGaPair(index)}>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
<TextField
|
||
label={t('gaPairs.genre')}
|
||
value={pair.genreTitle || pair.genre || ''}
|
||
onChange={e => handleGaPairChange(index, 'genreTitle', e.target.value)}
|
||
multiline
|
||
rows={2}
|
||
fullWidth
|
||
disabled={!pair.isActive}
|
||
/>
|
||
<TextField
|
||
label={t('gaPairs.genreDescription')}
|
||
value={pair.genreDesc || ''}
|
||
onChange={e => handleGaPairChange(index, 'genreDesc', e.target.value)}
|
||
multiline
|
||
rows={2}
|
||
fullWidth
|
||
disabled={!pair.isActive}
|
||
/>
|
||
<TextField
|
||
label={t('gaPairs.audience')}
|
||
value={pair.audienceTitle || pair.audience || ''}
|
||
onChange={e => handleGaPairChange(index, 'audienceTitle', e.target.value)}
|
||
multiline
|
||
rows={2}
|
||
fullWidth
|
||
disabled={!pair.isActive}
|
||
/>
|
||
<TextField
|
||
label={t('gaPairs.audienceDescription')}
|
||
value={pair.audienceDesc || ''}
|
||
onChange={e => handleGaPairChange(index, 'audienceDesc', e.target.value)}
|
||
multiline
|
||
rows={2}
|
||
fullWidth
|
||
disabled={!pair.isActive}
|
||
/>
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
|
||
{/* 在GA对列表下方添加生成按钮 */}
|
||
<Box sx={{ mt: 3, textAlign: 'center' }}>
|
||
<Button
|
||
variant="outlined"
|
||
startIcon={generating ? <CircularProgress size={20} /> : <AutoFixHighIcon />}
|
||
onClick={generateGaPairs}
|
||
disabled={generating}
|
||
>
|
||
{generating ? t('gaPairs.generating') : t('gaPairs.generateMore')}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
|
||
{/* Add GA Pair Dialog */}
|
||
<Dialog open={addDialogOpen} onClose={() => setAddDialogOpen(false)} maxWidth="md" fullWidth>
|
||
<DialogTitle>{t('gaPairs.addDialogTitle')}</DialogTitle>
|
||
<DialogContent>
|
||
<Box sx={{ pt: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
<TextField
|
||
label={t('gaPairs.genreTitle')}
|
||
value={newGaPair.genreTitle || ''}
|
||
onChange={e => setNewGaPair({ ...newGaPair, genreTitle: e.target.value })}
|
||
fullWidth
|
||
required
|
||
placeholder={t('gaPairs.genreTitlePlaceholder')}
|
||
/>
|
||
<TextField
|
||
label={t('gaPairs.genreDescription')}
|
||
value={newGaPair.genreDesc || ''}
|
||
onChange={e => setNewGaPair({ ...newGaPair, genreDesc: e.target.value })}
|
||
multiline
|
||
rows={3}
|
||
fullWidth
|
||
placeholder={t('gaPairs.genreDescPlaceholder')}
|
||
/>
|
||
<TextField
|
||
label={t('gaPairs.audienceTitle')}
|
||
value={newGaPair.audienceTitle || ''}
|
||
onChange={e => setNewGaPair({ ...newGaPair, audienceTitle: e.target.value })}
|
||
fullWidth
|
||
required
|
||
placeholder={t('gaPairs.audienceTitlePlaceholder')}
|
||
/>
|
||
<TextField
|
||
label={t('gaPairs.audienceDescription')}
|
||
value={newGaPair.audienceDesc || ''}
|
||
onChange={e => setNewGaPair({ ...newGaPair, audienceDesc: e.target.value })}
|
||
multiline
|
||
rows={3}
|
||
fullWidth
|
||
placeholder={t('gaPairs.audienceDescPlaceholder')}
|
||
/>
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
checked={newGaPair.isActive}
|
||
onChange={e => setNewGaPair({ ...newGaPair, isActive: e.target.checked })}
|
||
/>
|
||
}
|
||
label={t('gaPairs.active')}
|
||
/>
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button
|
||
onClick={() => {
|
||
setAddDialogOpen(false);
|
||
// 重置表单
|
||
setNewGaPair({
|
||
genreTitle: '',
|
||
genreDesc: '',
|
||
audienceTitle: '',
|
||
audienceDesc: '',
|
||
isActive: true
|
||
});
|
||
}}
|
||
>
|
||
{t('gaPairs.cancel')}
|
||
</Button>
|
||
<Button
|
||
onClick={handleAddGaPair}
|
||
variant="contained"
|
||
disabled={!newGaPair.genreTitle?.trim() || !newGaPair.audienceTitle?.trim()}
|
||
>
|
||
{t('gaPairs.addPairButton')}
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</Box>
|
||
);
|
||
}
|