支持缩略图加载，故事项新建调整

src/pages/gallery/index.tsx

@@ -1,17 +1,17 @@
 // src/pages/gallery/index.tsx
-import React, { FC, useState, useMemo, useCallback, useEffect } from 'react';
-import { PageContainer } from "@ant-design/pro-components";
-import { useRequest } from "@umijs/max";
-import { getImagesList, deleteImage, uploadImage } from "@/services/file/api";
-import { Empty, Spin, Image, message, Modal } from 'antd';
+import { ImageItem } from '@/pages/gallery/typings';
+import { deleteImage, getImagesList, uploadImage } from '@/services/file/api';
+import { PageContainer } from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
 import type { RadioChangeEvent } from 'antd';
+import { Empty, Image, message, Modal, Spin } from 'antd';
 import type { UploadFile } from 'antd/es/upload/interface';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import GalleryTable from './components/GalleryTable';
 import GalleryToolbar from './components/GalleryToolbar';
 import GridView from './components/GridView';
 import ListView from './components/ListView';
-import GalleryTable from './components/GalleryTable';
-import './index.css'
-import { ImageItem } from "@/pages/gallery/typings";
+import './index.css';
 
 const Gallery: FC = () => {
   const [viewMode, setViewMode] = useState<'small' | 'large' | 'list' | 'table'>('small');
@@ -21,28 +21,32 @@ const Gallery: FC = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
   const [batchMode, setBatchMode] = useState(false);
   const [uploading, setUploading] = useState(false);
-  const pageSize = 5;
-  const initPagination = { current: 1, pageSize: 5 }
+  const pageSize = 50;
+  const initPagination = { current: 1, pageSize: 5 };
 
   // 表格模式使用不同的分页状态
   const [tablePagination, setTablePagination] = useState(initPagination);
 
   // 非表格模式的数据请求
-  const { data, loading, loadingMore, refresh } = useRequest(() => {
-    return getImagesList({ current: page, pageSize });
-  }, {
-    loadMore: true,
-    refreshDeps: [page],
-    ready: viewMode !== 'table' // 非表格模式才启用
-  });
+  const { data, loading, loadingMore, refresh } = useRequest(
+    () => {
+      return getImagesList({ current: page, pageSize });
+    },
+    {
+      loadMore: true,
+      refreshDeps: [page],
+      ready: viewMode !== 'table', // 非表格模式才启用
+    },
+  );
 
   // 表格模式的数据请求
-  const { data: tableData, loading: tableLoading, run: fetchTableData } = useRequest(
-    async (params) => await getImagesList(params),
-    {
-      manual: true,
-    }
-  );
+  const {
+    data: tableData,
+    loading: tableLoading,
+    run: fetchTableData,
+  } = useRequest(async (params) => await getImagesList(params), {
+    manual: true,
+  });
 
   // 当视图模式改变时重置分页
   const handleViewModeChange = (e: RadioChangeEvent) => {
@@ -63,18 +67,21 @@ const Gallery: FC = () => {
   };
 
   // 处理表格分页变化
-  const handleTableChange = useCallback((pagination: any) => {
-    const { current, pageSize } = pagination;
-    setTablePagination({ current, pageSize });
-    fetchTableData({ current: current, pageSize });
-  }, [fetchTableData]);
+  const handleTableChange = useCallback(
+    (pagination: any) => {
+      const { current, pageSize } = pagination;
+      setTablePagination({ current, pageSize });
+      fetchTableData({ current: current, pageSize });
+    },
+    [fetchTableData],
+  );
 
   // 当表格分页变化时重新获取数据
   useEffect(() => {
     if (viewMode === 'table') {
       fetchTableData({
         current: tablePagination.current,
-        pageSize: tablePagination.pageSize
+        pageSize: tablePagination.pageSize,
       });
     }
   }, [viewMode, tablePagination, fetchTableData]);
@@ -86,17 +93,20 @@ const Gallery: FC = () => {
     return data?.list || [];
   }, [data, tableData, viewMode]);
 
-  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    // 表格模式不需要滚动加载
-    if (viewMode === 'table') return;
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      // 表格模式不需要滚动加载
+      if (viewMode === 'table') return;
 
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    if (scrollTop + clientHeight >= scrollHeight - 10 && !loading && !loadingMore) {
-      if (data?.total && imageList.length < data.total) {
-        setPage(prev => prev + 1);
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+      if (scrollTop + clientHeight >= scrollHeight - 10 && !loading && !loadingMore) {
+        if (data?.total && imageList.length < data.total) {
+          setPage((prev) => prev + 1);
+        }
       }
-    }
-  }, [loading, loadingMore, data?.total, imageList.length, viewMode]);
+    },
+    [loading, loadingMore, data?.total, imageList.length, viewMode],
+  );
 
   // 处理图片预览
   const handlePreview = useCallback((index: number) => {
@@ -123,66 +133,75 @@ const Gallery: FC = () => {
   }, []);
 
   // 上传图片
-  const handleUpload = useCallback(async (file: UploadFile) => {
-    // 检查文件类型
-    if (!file.type?.startsWith('image/')) {
-      message.error('只能上传图片文件！');
-      return;
-    }
-
-    setUploading(true);
-    try {
-      const formData = new FormData();
-      formData.append('image', file as any);
-
-      // 调用上传API
-      await uploadImage(formData);
-      message.success(`${file.name} 上传成功`);
-
-      // 上传成功后刷新列表
-      if (viewMode === 'table') {
-        fetchTableData({
-          current: tablePagination.current,
-          pageSize: tablePagination.pageSize
-        });
-      } else {
-        refresh();
+  const handleUpload = useCallback(
+    async (file: UploadFile) => {
+      // 检查文件类型
+      if (!file.type?.startsWith('image/')) {
+        message.error('只能上传图片文件！');
+        return;
       }
-    } catch (error) {
-      message.error(`${file.name} 上传失败`);
-    } finally {
-      setUploading(false);
-    }
-  }, [viewMode, tablePagination, fetchTableData, refresh]);
+
+      setUploading(true);
+      try {
+        const formData = new FormData();
+        formData.append('image', file as any);
+
+        // 调用上传API
+        await uploadImage(formData);
+        message.success(`${file.name} 上传成功`);
+
+        // 上传成功后刷新列表
+        if (viewMode === 'table') {
+          fetchTableData({
+            current: tablePagination.current,
+            pageSize: tablePagination.pageSize,
+          });
+        } else {
+          refresh();
+        }
+      } catch (error) {
+        message.error(`${file.name} 上传失败`);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [viewMode, tablePagination, fetchTableData, refresh],
+  );
 
   // 删除图片确认
-  const handleDelete = useCallback((instanceId: string, imageName: string) => {
-    Modal.confirm({
-      title: '确认删除',
-      content: `确定要删除图片 "${imageName}" 吗？此操作不可恢复。`,
-      okText: '删除',
-      okType: 'danger',
-      cancelText: '取消',
-      onOk: async () => {
-        try {
-          await deleteImage({ instanceId });
-          message.success('删除成功');
+  const handleDelete = useCallback(
+    (instanceId: string, imageName: string) => {
+      Modal.confirm({
+        title: '确认删除',
+        content: `确定要删除图片 "${imageName}" 吗？此操作不可恢复。`,
+        okText: '删除',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: async () => {
+          try {
+            await deleteImage({ instanceId });
+            message.success('删除成功');
 
-          // 表格模式也需要刷新数据
-          if (viewMode === 'table') {
-            fetchTableData({ current: tablePagination.current, pageSize: tablePagination.pageSize });
-          } else {
-            refresh();
+            // 表格模式也需要刷新数据
+            if (viewMode === 'table') {
+              fetchTableData({
+                current: tablePagination.current,
+                pageSize: tablePagination.pageSize,
+              });
+            } else {
+              refresh();
+            }
+
+            // 如果在批量选择中，也需要移除
+            setSelectedRowKeys((prev) => prev.filter((key) => key !== instanceId));
+          } catch (error) {
+            message.error('删除失败');
           }
-
-          // 如果在批量选择中，也需要移除
-          setSelectedRowKeys(prev => prev.filter(key => key !== instanceId));
-        } catch (error) {
-          message.error('删除失败');
-        }
-      }
-    });
-  }, [refresh, viewMode, tablePagination, fetchTableData]);
+        },
+      });
+    },
+    [refresh, viewMode, tablePagination, fetchTableData],
+  );
 
   // 批量删除
   const handleBatchDelete = useCallback(() => {
@@ -207,14 +226,17 @@ const Gallery: FC = () => {
 
           // 表格模式也需要刷新数据
           if (viewMode === 'table') {
-            fetchTableData({ current: tablePagination.current, pageSize: tablePagination.pageSize });
+            fetchTableData({
+              current: tablePagination.current,
+              pageSize: tablePagination.pageSize,
+            });
           } else {
             refresh();
           }
         } catch (error) {
           message.error('批量删除失败');
         }
-      }
+      },
     });
   }, [selectedRowKeys, refresh, viewMode, tablePagination, fetchTableData]);
 
@@ -228,7 +250,7 @@ const Gallery: FC = () => {
     selectedRowKeys.forEach((id, index) => {
       // 添加延迟避免浏览器限制
       setTimeout(() => {
-        const item = imageList.find(img => img.instanceId === id);
+        const item = imageList.find((img) => img.instanceId === id);
         if (item) {
           handleDownload(id, item.imageName);
         }
@@ -240,23 +262,26 @@ const Gallery: FC = () => {
 
   // 切换选择
   const handleSelect = useCallback((instanceId: string, checked: boolean) => {
-    setSelectedRowKeys(prev => {
+    setSelectedRowKeys((prev) => {
       if (checked) {
         return [...prev, instanceId];
       } else {
-        return prev.filter(key => key !== instanceId);
+        return prev.filter((key) => key !== instanceId);
       }
     });
   }, []);
 
   // 全选/取消全选
-  const handleSelectAll = useCallback((checked: boolean) => {
-    if (checked) {
-      setSelectedRowKeys(imageList.map(item => item.instanceId));
-    } else {
-      setSelectedRowKeys([]);
-    }
-  }, [imageList]);
+  const handleSelectAll = useCallback(
+    (checked: boolean) => {
+      if (checked) {
+        setSelectedRowKeys(imageList.map((item) => item.instanceId));
+      } else {
+        setSelectedRowKeys([]);
+      }
+    },
+    [imageList],
+  );
 
   // 取消批量操作
   const handleCancelBatch = useCallback(() => {
@@ -347,7 +372,9 @@ const Gallery: FC = () => {
           />
         }
       >
-        {currentLoading && ((viewMode === 'table' && tablePagination.current === 1) || (viewMode !== 'table' && page === 1)) ? (
+        {currentLoading &&
+        ((viewMode === 'table' && tablePagination.current === 1) ||
+          (viewMode !== 'table' && page === 1)) ? (
           <div style={{ textAlign: 'center', padding: '50px 0' }}>
             <Spin size="large" />
           </div>
@@ -357,7 +384,7 @@ const Gallery: FC = () => {
           renderView()
         )}
 
-        {/* 预览组件 */}
+        {/* 预览组件 - 根据视图模式决定使用哪种图像 */}
         <Image.PreviewGroup
           preview={{
             visible: previewVisible,
@@ -369,7 +396,11 @@ const Gallery: FC = () => {
           {imageList.map((item: ImageItem) => (
             <Image
               key={item.instanceId}
-              src={`/file/image/${item.instanceId}`}
+              src={
+                viewMode === 'small'
+                  ? `/file/image/${item.instanceId}`
+                  : `/file/image-low-res/${item.instanceId}`
+              }
               style={{ display: 'none' }}
               alt={item.imageName}
             />