timeline-frontend/src/pages/gallery/components/ListView.tsx

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';

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})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
              }}
              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;