99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import { ImageItem } from '@/pages/gallery/typings';
|
|
import { formatBytes } from '@/utils/timelineUtils';
|
|
import { DeleteOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
|
|
import { Button, Card, Checkbox, Spin } from 'antd';
|
|
import React, { FC } from 'react';
|
|
import '../index.css';
|
|
import { getAuthization } from '@/utils/userUtils';
|
|
|
|
interface ListViewProps {
|
|
imageList: ImageItem[];
|
|
batchMode: boolean;
|
|
selectedRowKeys: string[];
|
|
onPreview: (index: number) => void;
|
|
onSelect: (instanceId: string, checked: boolean) => void;
|
|
onDownload: (instanceId: string, imageName: string) => void;
|
|
onDelete: (instanceId: string, imageName: string) => void;
|
|
loadingMore?: boolean;
|
|
onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
}
|
|
|
|
const ListView: FC<ListViewProps> = ({
|
|
imageList,
|
|
batchMode,
|
|
selectedRowKeys,
|
|
onPreview,
|
|
onSelect,
|
|
onDownload,
|
|
onDelete,
|
|
loadingMore,
|
|
onScroll,
|
|
}) => {
|
|
const imageSize = { width: '100%', height: 200 };
|
|
|
|
return (
|
|
<div
|
|
className="list-view"
|
|
onScroll={onScroll}
|
|
style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}
|
|
>
|
|
{imageList.map((item: ImageItem, index: number) => (
|
|
<Card key={item.instanceId} className="list-item-card" size="small">
|
|
<div className="list-item">
|
|
{batchMode && (
|
|
<Checkbox
|
|
checked={selectedRowKeys.includes(item.instanceId)}
|
|
onChange={(e) => onSelect(item.instanceId, e.target.checked)}
|
|
/>
|
|
)}
|
|
<div
|
|
className="image-wrapper"
|
|
style={{
|
|
width: imageSize.width,
|
|
height: imageSize.height,
|
|
backgroundImage: `url(/file/image/${item.instanceId}?Authorization=${getAuthization()})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
position: 'relative',
|
|
}}
|
|
onClick={() => !batchMode && onPreview(index)}
|
|
/>
|
|
<div className="list-item-info">
|
|
<div className="image-title" title={item.imageName}>
|
|
{item.imageName}
|
|
</div>
|
|
<div className="image-meta">
|
|
{item.size && <span>大小: {formatBytes(item.size)}</span>}
|
|
{item.createTime && (
|
|
<span>创建时间: {new Date(item.createTime).toLocaleString()}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="list-item-actions">
|
|
<Button type="text" icon={<EyeOutlined />} onClick={() => onPreview(index)} />
|
|
<Button
|
|
type="text"
|
|
icon={<DownloadOutlined />}
|
|
onClick={() => onDownload(item.instanceId, item.imageName)}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<DeleteOutlined />}
|
|
danger
|
|
onClick={() => onDelete(item.instanceId, item.imageName)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
{loadingMore && (
|
|
<div style={{ textAlign: 'center', padding: '20px' }}>
|
|
<Spin />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ListView; |