458 lines
17 KiB
TypeScript
458 lines
17 KiB
TypeScript
/**
|
|
* 穿搭照片生成历史记录组件
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
Clock,
|
|
CheckCircle,
|
|
XCircle,
|
|
AlertCircle,
|
|
Eye,
|
|
Download,
|
|
RotateCcw,
|
|
Trash2,
|
|
Filter,
|
|
Search,
|
|
Image as ImageIcon
|
|
} from 'lucide-react';
|
|
import type {
|
|
OutfitPhotoGeneration,
|
|
GenerationHistoryQuery,
|
|
GenerationHistoryResponse
|
|
} from '../../types/outfitPhotoGeneration';
|
|
import { GenerationStatus } from '../../types/outfitPhotoGeneration';
|
|
import { OutfitPhotoGenerationService } from '../../services/outfitPhotoGenerationService';
|
|
import { LoadingSpinner } from '../LoadingSpinner';
|
|
import { Modal } from '../Modal';
|
|
import { DeleteConfirmDialog } from '../DeleteConfirmDialog';
|
|
|
|
interface OutfitPhotoGenerationHistoryProps {
|
|
projectId?: string;
|
|
modelId?: string;
|
|
onRetryGeneration?: (generationId: string) => void;
|
|
}
|
|
|
|
const STATUS_COLORS = {
|
|
[GenerationStatus.Pending]: 'text-yellow-600 bg-yellow-100',
|
|
[GenerationStatus.Processing]: 'text-blue-600 bg-blue-100',
|
|
[GenerationStatus.Completed]: 'text-green-600 bg-green-100',
|
|
[GenerationStatus.Failed]: 'text-red-600 bg-red-100'
|
|
};
|
|
|
|
const STATUS_ICONS = {
|
|
[GenerationStatus.Pending]: Clock,
|
|
[GenerationStatus.Processing]: AlertCircle,
|
|
[GenerationStatus.Completed]: CheckCircle,
|
|
[GenerationStatus.Failed]: XCircle
|
|
};
|
|
|
|
const STATUS_LABELS = {
|
|
[GenerationStatus.Pending]: '等待中',
|
|
[GenerationStatus.Processing]: '生成中',
|
|
[GenerationStatus.Completed]: '已完成',
|
|
[GenerationStatus.Failed]: '失败'
|
|
};
|
|
|
|
export const OutfitPhotoGenerationHistory: React.FC<OutfitPhotoGenerationHistoryProps> = ({
|
|
projectId,
|
|
modelId,
|
|
onRetryGeneration
|
|
}) => {
|
|
const [records, setRecords] = useState<OutfitPhotoGeneration[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedRecord, setSelectedRecord] = useState<OutfitPhotoGeneration | null>(null);
|
|
const [showDetailModal, setShowDetailModal] = useState(false);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
|
|
|
// 查询参数
|
|
const [query, setQuery] = useState<GenerationHistoryQuery>({
|
|
project_id: projectId,
|
|
model_id: modelId,
|
|
page: 1,
|
|
page_size: 20
|
|
});
|
|
|
|
// 分页信息
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
const [hasMore, setHasMore] = useState(false);
|
|
|
|
// 过滤器状态
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
const [statusFilter, setStatusFilter] = useState<GenerationStatus | ''>('');
|
|
const [searchText, setSearchText] = useState('');
|
|
|
|
// 加载历史记录
|
|
const loadHistory = useCallback(async (resetPage = false) => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const searchQuery: GenerationHistoryQuery = {
|
|
...query,
|
|
page: resetPage ? 1 : query.page,
|
|
status: statusFilter || undefined
|
|
};
|
|
|
|
const response: GenerationHistoryResponse = await OutfitPhotoGenerationService.getGenerationHistory(searchQuery);
|
|
|
|
if (resetPage) {
|
|
setRecords(response.records);
|
|
} else {
|
|
setRecords(prev => [...prev, ...response.records]);
|
|
}
|
|
|
|
setTotalCount(response.total_count);
|
|
setHasMore(response.has_more);
|
|
|
|
if (resetPage) {
|
|
setQuery(prev => ({ ...prev, page: 1 }));
|
|
}
|
|
} catch (err) {
|
|
console.error('加载生成历史失败:', err);
|
|
setError(err instanceof Error ? err.message : '加载失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [query, statusFilter]);
|
|
|
|
// 初始加载
|
|
useEffect(() => {
|
|
loadHistory(true);
|
|
}, [projectId, modelId, statusFilter]);
|
|
|
|
// 加载更多
|
|
const loadMore = useCallback(() => {
|
|
if (!loading && hasMore) {
|
|
setQuery(prev => ({ ...prev, page: prev.page! + 1 }));
|
|
loadHistory(false);
|
|
}
|
|
}, [loading, hasMore, loadHistory]);
|
|
|
|
// 重试生成
|
|
const handleRetry = useCallback(async (record: OutfitPhotoGeneration) => {
|
|
try {
|
|
await OutfitPhotoGenerationService.retryGeneration(record.id);
|
|
onRetryGeneration?.(record.id);
|
|
// 重新加载历史记录
|
|
loadHistory(true);
|
|
} catch (err) {
|
|
console.error('重试生成失败:', err);
|
|
setError(err instanceof Error ? err.message : '重试失败');
|
|
}
|
|
}, [onRetryGeneration, loadHistory]);
|
|
|
|
// 删除记录
|
|
const handleDelete = useCallback(async (recordId: string) => {
|
|
try {
|
|
await OutfitPhotoGenerationService.deleteGeneration(recordId);
|
|
setRecords(prev => prev.filter(r => r.id !== recordId));
|
|
setDeleteConfirm(null);
|
|
} catch (err) {
|
|
console.error('删除记录失败:', err);
|
|
setError(err instanceof Error ? err.message : '删除失败');
|
|
}
|
|
}, []);
|
|
|
|
// 查看详情
|
|
const handleViewDetail = useCallback((record: OutfitPhotoGeneration) => {
|
|
setSelectedRecord(record);
|
|
setShowDetailModal(true);
|
|
}, []);
|
|
|
|
// 格式化时间
|
|
const formatTime = (timeStr: string) => {
|
|
const date = new Date(timeStr);
|
|
return date.toLocaleString('zh-CN');
|
|
};
|
|
|
|
// 格式化持续时间
|
|
const formatDuration = (ms?: number) => {
|
|
if (!ms) return '-';
|
|
if (ms < 1000) return `${ms}ms`;
|
|
return `${(ms / 1000).toFixed(1)}s`;
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
{/* 头部 */}
|
|
<div className="p-4 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900">生成历史</h3>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className={`p-2 rounded-lg transition-colors ${
|
|
showFilters ? 'bg-purple-100 text-purple-700' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
title="过滤器"
|
|
>
|
|
<Filter className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => loadHistory(true)}
|
|
disabled={loading}
|
|
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
|
|
title="刷新"
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 过滤器 */}
|
|
{showFilters && (
|
|
<div className="mt-4 p-3 bg-gray-50 rounded-lg space-y-3">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1">
|
|
<label className="block text-xs font-medium text-gray-600 mb-1">状态</label>
|
|
<select
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value as GenerationStatus | '')}
|
|
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
<option value="">全部状态</option>
|
|
<option value={GenerationStatus.Pending}>等待中</option>
|
|
<option value={GenerationStatus.Processing}>生成中</option>
|
|
<option value={GenerationStatus.Completed}>已完成</option>
|
|
<option value={GenerationStatus.Failed}>失败</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<label className="block text-xs font-medium text-gray-600 mb-1">搜索</label>
|
|
<div className="relative">
|
|
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3 h-3 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
value={searchText}
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|
placeholder="搜索提示词..."
|
|
className="w-full pl-7 pr-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 错误提示 */}
|
|
{error && (
|
|
<div className="p-4 bg-red-50 border-b border-red-200 flex items-center gap-2 text-red-700">
|
|
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
|
<span className="text-sm">{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 记录列表 */}
|
|
<div className="divide-y divide-gray-200">
|
|
{records.length === 0 && !loading ? (
|
|
<div className="p-8 text-center">
|
|
<ImageIcon className="w-12 h-12 text-gray-400 mx-auto mb-2" />
|
|
<p className="text-gray-500">暂无生成记录</p>
|
|
</div>
|
|
) : (
|
|
records.map((record) => {
|
|
const StatusIcon = STATUS_ICONS[record.status];
|
|
return (
|
|
<div key={record.id} className="p-4 hover:bg-gray-50 transition-colors">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[record.status]}`}>
|
|
<StatusIcon className="w-3 h-3" />
|
|
{STATUS_LABELS[record.status]}
|
|
</span>
|
|
<span className="text-xs text-gray-500">
|
|
{formatTime(record.created_at)}
|
|
</span>
|
|
{record.generation_time_ms && (
|
|
<span className="text-xs text-gray-500">
|
|
耗时: {formatDuration(record.generation_time_ms)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-900 mb-1 line-clamp-2">
|
|
{record.prompt}
|
|
</p>
|
|
|
|
{record.error_message && (
|
|
<p className="text-xs text-red-600 mb-2">
|
|
错误: {record.error_message}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 text-xs text-gray-500">
|
|
<span>结果: {record.result_image_urls.length} 张图片</span>
|
|
{record.product_image_path && (
|
|
<span>商品图片: {record.product_image_path.split('/').pop()}</span>
|
|
)}
|
|
{record.comfyui_prompt_id && (
|
|
<span className="font-mono bg-gray-100 px-2 py-1 rounded">
|
|
任务ID: {record.comfyui_prompt_id}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 ml-4">
|
|
<button
|
|
onClick={() => handleViewDetail(record)}
|
|
className="p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors"
|
|
title="查看详情"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
|
|
{record.status === GenerationStatus.Failed && (
|
|
<button
|
|
onClick={() => handleRetry(record)}
|
|
className="p-1 text-orange-500 hover:text-orange-700 hover:bg-orange-50 rounded transition-colors"
|
|
title="重试"
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => setDeleteConfirm(record.id)}
|
|
className="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
|
|
title="删除"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* 加载更多 */}
|
|
{hasMore && (
|
|
<div className="p-4 border-t border-gray-200 text-center">
|
|
<button
|
|
onClick={loadMore}
|
|
disabled={loading}
|
|
className="px-4 py-2 text-sm text-purple-600 hover:text-purple-700 hover:bg-purple-50 rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<LoadingSpinner size="small" />
|
|
加载中...
|
|
</>
|
|
) : (
|
|
`加载更多 (${records.length}/${totalCount})`
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 详情模态框 */}
|
|
{showDetailModal && selectedRecord && (
|
|
<Modal
|
|
isOpen={showDetailModal}
|
|
onClose={() => setShowDetailModal(false)}
|
|
title="生成详情"
|
|
size="lg"
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="font-medium text-gray-700">状态:</span>
|
|
<span className={`ml-2 inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[selectedRecord.status]}`}>
|
|
{React.createElement(STATUS_ICONS[selectedRecord.status], { className: "w-3 h-3" })}
|
|
{STATUS_LABELS[selectedRecord.status]}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium text-gray-700">创建时间:</span>
|
|
<span className="ml-2 text-gray-600">{formatTime(selectedRecord.created_at)}</span>
|
|
</div>
|
|
{selectedRecord.generation_time_ms && (
|
|
<div>
|
|
<span className="font-medium text-gray-700">生成耗时:</span>
|
|
<span className="ml-2 text-gray-600">{formatDuration(selectedRecord.generation_time_ms)}</span>
|
|
</div>
|
|
)}
|
|
{selectedRecord.comfyui_prompt_id && (
|
|
<div className="col-span-2">
|
|
<span className="font-medium text-gray-700">ComfyUI 任务ID:</span>
|
|
<span className="ml-2 text-gray-600 font-mono bg-gray-100 px-2 py-1 rounded text-xs">
|
|
{selectedRecord.comfyui_prompt_id}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<span className="font-medium text-gray-700">提示词:</span>
|
|
<p className="mt-1 text-sm text-gray-600 bg-gray-50 p-2 rounded">{selectedRecord.prompt}</p>
|
|
</div>
|
|
|
|
{selectedRecord.negative_prompt && (
|
|
<div>
|
|
<span className="font-medium text-gray-700">负面提示词:</span>
|
|
<p className="mt-1 text-sm text-gray-600 bg-gray-50 p-2 rounded">{selectedRecord.negative_prompt}</p>
|
|
</div>
|
|
)}
|
|
|
|
{selectedRecord.error_message && (
|
|
<div>
|
|
<span className="font-medium text-gray-700">错误信息:</span>
|
|
<p className="mt-1 text-sm text-red-600 bg-red-50 p-2 rounded">{selectedRecord.error_message}</p>
|
|
</div>
|
|
)}
|
|
|
|
{selectedRecord.result_image_urls.length > 0 && (
|
|
<div>
|
|
<span className="font-medium text-gray-700">生成结果:</span>
|
|
<div className="mt-2 grid grid-cols-2 gap-2">
|
|
{selectedRecord.result_image_urls.map((url, index) => (
|
|
<div key={index} className="relative group">
|
|
<img
|
|
src={url}
|
|
alt={`结果 ${index + 1}`}
|
|
className="w-full rounded-lg"
|
|
/>
|
|
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100">
|
|
<button
|
|
onClick={() => {
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `result_${index + 1}.jpg`;
|
|
a.click();
|
|
}}
|
|
className="p-2 bg-white text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
|
|
title="下载"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
|
|
{/* 删除确认对话框 */}
|
|
{deleteConfirm && (
|
|
<DeleteConfirmDialog
|
|
isOpen={!!deleteConfirm}
|
|
onCancel={() => setDeleteConfirm(null)}
|
|
onConfirm={() => handleDelete(deleteConfirm)}
|
|
title="删除生成记录"
|
|
message="确定要删除这条生成记录吗？此操作不可撤销。"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|