新增图库

src/pages/gallery/components/ListView.tsx

@@ -0,0 +1,98 @@
+// src/pages/gallery/components/ListView.tsx
+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 {ImageItem} from "@/pages/gallery/typings";
+
+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;