316 lines
11 KiB
JavaScript
316 lines
11 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableContainer,
|
|||
|
|
TableHead,
|
|||
|
|
TableRow,
|
|||
|
|
Paper,
|
|||
|
|
Chip,
|
|||
|
|
Box,
|
|||
|
|
Pagination,
|
|||
|
|
Tooltip,
|
|||
|
|
IconButton,
|
|||
|
|
Avatar,
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
Typography,
|
|||
|
|
Button,
|
|||
|
|
Checkbox
|
|||
|
|
} from '@mui/material';
|
|||
|
|
import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
|
|||
|
|
import DatasetIcon from '@mui/icons-material/Dataset';
|
|||
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|||
|
|
import EditNoteIcon from '@mui/icons-material/EditNote';
|
|||
|
|
import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary';
|
|||
|
|
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import { imageStyles } from '../styles/imageStyles';
|
|||
|
|
|
|||
|
|
export default function ImageList({
|
|||
|
|
images,
|
|||
|
|
total,
|
|||
|
|
page,
|
|||
|
|
pageSize,
|
|||
|
|
onPageChange,
|
|||
|
|
onGenerateQuestions,
|
|||
|
|
onGenerateDataset,
|
|||
|
|
onDelete,
|
|||
|
|
onAnnotate,
|
|||
|
|
selectedIds = [],
|
|||
|
|
onSelectionChange
|
|||
|
|
}) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const [previewImage, setPreviewImage] = useState(null);
|
|||
|
|
|
|||
|
|
// 处理全选/取消全选
|
|||
|
|
const handleSelectAll = event => {
|
|||
|
|
if (event.target.checked) {
|
|||
|
|
const allIds = images.map(img => img.id);
|
|||
|
|
onSelectionChange?.(allIds);
|
|||
|
|
} else {
|
|||
|
|
onSelectionChange?.([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理单个选择
|
|||
|
|
const handleSelectOne = (imageId, checked) => {
|
|||
|
|
if (checked) {
|
|||
|
|
onSelectionChange?.([...selectedIds, imageId]);
|
|||
|
|
} else {
|
|||
|
|
onSelectionChange?.(selectedIds.filter(id => id !== imageId));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 判断是否全选
|
|||
|
|
const isAllSelected = images.length > 0 && selectedIds.length === images.length;
|
|||
|
|
const isSomeSelected = selectedIds.length > 0 && selectedIds.length < images.length;
|
|||
|
|
|
|||
|
|
// 格式化日期
|
|||
|
|
const formatDate = dateString => {
|
|||
|
|
if (!dateString) return '-';
|
|||
|
|
const date = new Date(dateString);
|
|||
|
|
return date.toLocaleDateString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 格式化文件大小
|
|||
|
|
const formatSize = bytes => {
|
|||
|
|
if (!bytes) return '-';
|
|||
|
|
if (bytes < 1024) return `${bytes} B`;
|
|||
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
|
|||
|
|
return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (!images || images.length === 0) {
|
|||
|
|
return (
|
|||
|
|
<Box sx={imageStyles.emptyState}>
|
|||
|
|
<Box sx={imageStyles.emptyIcon}>
|
|||
|
|
<PhotoLibraryIcon sx={{ fontSize: 60, color: 'primary.main' }} />
|
|||
|
|
</Box>
|
|||
|
|
<Typography variant="h5" sx={imageStyles.emptyTitle}>
|
|||
|
|
{t('images.noImages', { defaultValue: '还没有图片' })}
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body2" sx={imageStyles.emptyDescription}>
|
|||
|
|
{t('images.noImagesDescription', { defaultValue: '开始导入图片，创建您的第一个图片数据集' })}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<TableContainer component={Paper} sx={{ borderRadius: 2, boxShadow: 1 }}>
|
|||
|
|
<Table>
|
|||
|
|
<TableHead>
|
|||
|
|
<TableRow sx={{ bgcolor: 'grey.50' }}>
|
|||
|
|
<TableCell padding="checkbox">
|
|||
|
|
<Checkbox indeterminate={isSomeSelected} checked={isAllSelected} onChange={handleSelectAll} />
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell width="60">{t('images.preview', { defaultValue: '预览' })}</TableCell>
|
|||
|
|
<TableCell>{t('images.fileName', { defaultValue: '文件名' })}</TableCell>
|
|||
|
|
<TableCell width="120">{t('images.size', { defaultValue: '大小' })}</TableCell>
|
|||
|
|
<TableCell width="120">{t('images.dimensions', { defaultValue: '尺寸' })}</TableCell>
|
|||
|
|
<TableCell width="100">{t('images.questionCount', { defaultValue: '问题数' })}</TableCell>
|
|||
|
|
<TableCell width="100">{t('images.datasetCount', { defaultValue: '数据集数' })}</TableCell>
|
|||
|
|
<TableCell width="180">{t('images.uploadTime', { defaultValue: '上传时间' })}</TableCell>
|
|||
|
|
<TableCell width="200" align="center">
|
|||
|
|
{t('common.actions', { defaultValue: '操作' })}
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableBody>
|
|||
|
|
{images.map(image => (
|
|||
|
|
<TableRow
|
|||
|
|
key={image.id}
|
|||
|
|
hover
|
|||
|
|
selected={selectedIds.includes(image.id)}
|
|||
|
|
sx={{
|
|||
|
|
'&:hover': {
|
|||
|
|
bgcolor: 'action.hover'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* 复选框 */}
|
|||
|
|
<TableCell padding="checkbox">
|
|||
|
|
<Checkbox
|
|||
|
|
checked={selectedIds.includes(image.id)}
|
|||
|
|
onChange={e => handleSelectOne(image.id, e.target.checked)}
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 预览缩略图 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Avatar
|
|||
|
|
src={image.base64 || image.path}
|
|||
|
|
alt={image.imageName}
|
|||
|
|
variant="rounded"
|
|||
|
|
sx={{
|
|||
|
|
width: 48,
|
|||
|
|
height: 48,
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
'&:hover': {
|
|||
|
|
opacity: 0.8
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
onClick={() => setPreviewImage(image)}
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 文件名 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Tooltip title={image.imageName}>
|
|||
|
|
<Typography variant="body2" noWrap sx={{ maxWidth: 300 }}>
|
|||
|
|
{image.imageName}
|
|||
|
|
</Typography>
|
|||
|
|
</Tooltip>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 文件大小 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{formatSize(image.size)}
|
|||
|
|
</Typography>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 尺寸 */}
|
|||
|
|
<TableCell>
|
|||
|
|
{image.width && image.height ? (
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{image.width} × {image.height}
|
|||
|
|
</Typography>
|
|||
|
|
) : (
|
|||
|
|
<Typography variant="body2" color="text.disabled">
|
|||
|
|
-
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 问题数 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Chip
|
|||
|
|
label={image.questionCount || 0}
|
|||
|
|
size="small"
|
|||
|
|
color={image.questionCount > 0 ? 'primary' : 'default'}
|
|||
|
|
variant="outlined"
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 数据集数 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Chip
|
|||
|
|
label={image.datasetCount || 0}
|
|||
|
|
size="small"
|
|||
|
|
color={image.datasetCount > 0 ? 'success' : 'default'}
|
|||
|
|
variant="outlined"
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 上传时间 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{formatDate(image.createAt)}
|
|||
|
|
</Typography>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 操作按钮 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Box sx={{ display: 'flex', gap: 0.5, justifyContent: 'center' }}>
|
|||
|
|
<Tooltip title={t('images.preview', { defaultValue: '预览' })}>
|
|||
|
|
<IconButton size="small" onClick={() => setPreviewImage(image)}>
|
|||
|
|
<VisibilityIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title={t('images.annotate', { defaultValue: '标注' })}>
|
|||
|
|
<IconButton size="small" color="primary" onClick={() => onAnnotate(image)}>
|
|||
|
|
<EditNoteIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title={t('images.generateQuestions', { defaultValue: '生成问题' })}>
|
|||
|
|
<IconButton size="small" onClick={() => onGenerateQuestions(image)}>
|
|||
|
|
<QuestionMarkIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title={t('images.generateDataset', { defaultValue: '生成数据集' })}>
|
|||
|
|
<IconButton size="small" onClick={() => onGenerateDataset(image)}>
|
|||
|
|
<DatasetIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title={t('common.delete', { defaultValue: '删除' })}>
|
|||
|
|
<IconButton size="small" color="error" onClick={() => onDelete(image.id)}>
|
|||
|
|
<DeleteIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
</Box>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</TableContainer>
|
|||
|
|
|
|||
|
|
{/* 分页 */}
|
|||
|
|
{total > pageSize && (
|
|||
|
|
<Box sx={imageStyles.pagination}>
|
|||
|
|
<Pagination
|
|||
|
|
count={Math.ceil(total / pageSize)}
|
|||
|
|
page={page}
|
|||
|
|
onChange={(_, newPage) => onPageChange(newPage)}
|
|||
|
|
color="primary"
|
|||
|
|
size="large"
|
|||
|
|
showFirstButton
|
|||
|
|
showLastButton
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 图片预览对话框 */}
|
|||
|
|
<Dialog
|
|||
|
|
open={!!previewImage}
|
|||
|
|
onClose={() => setPreviewImage(null)}
|
|||
|
|
maxWidth="lg"
|
|||
|
|
fullWidth
|
|||
|
|
PaperProps={{
|
|||
|
|
sx: {
|
|||
|
|
bgcolor: 'transparent',
|
|||
|
|
boxShadow: 'none',
|
|||
|
|
overflow: 'hidden'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<DialogContent
|
|||
|
|
sx={{ p: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|||
|
|
>
|
|||
|
|
{previewImage && (
|
|||
|
|
<Box sx={{ width: '100%', textAlign: 'center' }}>
|
|||
|
|
<img
|
|||
|
|
src={previewImage.base64 || previewImage.path}
|
|||
|
|
alt={previewImage.imageName}
|
|||
|
|
style={{
|
|||
|
|
maxWidth: '100%',
|
|||
|
|
maxHeight: '90vh',
|
|||
|
|
objectFit: 'contain'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Typography
|
|||
|
|
variant="caption"
|
|||
|
|
sx={{ display: 'block', mt: 2, color: 'white', textShadow: '0 0 4px rgba(0,0,0,0.8)' }}
|
|||
|
|
>
|
|||
|
|
{previewImage.imageName}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|