admin/timeline-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jiangh277
2025-08-06 18:41:32 +08:00
parent 141e8d9818
commit 182a58d0db
11 changed files with 448 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/gallery/components/GalleryTable.tsx
View File

@@ -1,10 +1,10 @@
// src/pages/gallery/components/GalleryTable.tsx
import { ImageItem } from '@/pages/gallery/typings';
import { formatBytes } from '@/utils/timelineUtils';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { FC } from 'react';
import '../index.css'
import {ImageItem} from "@/pages/gallery/typings";
import '../index.css';
interface GalleryTableProps {
imageList: ImageItem[];
@@ -43,7 +43,7 @@ const GalleryTable: FC<GalleryTableProps> = ({
style={{
width: 100,
height: 100,
backgroundImage: `url(/file/image/${record.instanceId})`,
backgroundImage: `url(/file/image-low-res/${record.instanceId})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',

12
src/pages/gallery/components/GridView.tsx
View File

@@ -77,6 +77,16 @@ const GridView: FC<GridViewProps> = ({
[imageList, onPreview, onDownload, onDelete],
);
// 根据视图模式确定图像 URL
const getImageUrl = (instanceId: string) => {
// 小图模式使用低分辨率图像
if (viewMode === 'small') {
return `/file/image-low-res/${instanceId}`;
}
// 其他模式使用原图
return `/file/image/${instanceId}`;
};
return (
<div
className={viewMode === 'small' ? 'small-grid-view' : 'large-grid-view'}
@@ -96,7 +106,7 @@ const GridView: FC<GridViewProps> = ({
style={{
width: imageSize.width,
height: imageSize.height,
backgroundImage: `url(/file/image/${item.instanceId})`,
backgroundImage: `url(${getImageUrl(item.instanceId)})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',

5
src/pages/gallery/components/ListView.tsx
View File

@@ -1,10 +1,9 @@
// 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'
import {ImageItem} from "@/pages/gallery/typings";
import '../index.css';
interface ListViewProps {
imageList: ImageItem[];

247
src/pages/gallery/index.tsx
View File

@@ -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}
/>