新增图库
This commit is contained in:
jiangh277
121
src/pages/gallery/components/GalleryTable.tsx
Normal file
121
src/pages/gallery/components/GalleryTable.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
// src/pages/gallery/components/GalleryTable.tsx
|
||||
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";
|
||||
|
||||
interface GalleryTableProps {
|
||||
imageList: ImageItem[];
|
||||
loading: boolean;
|
||||
pagination: {
|
||||
current: number;
|
||||
pageSize: number;
|
||||
total?: number;
|
||||
};
|
||||
selectedRowKeys: string[];
|
||||
onChange: (pagination: any) => void;
|
||||
onSelectedRowsChange: (keys: string[]) => void;
|
||||
onPreview: (index: number) => void;
|
||||
onDownload: (instanceId: string, imageName: string) => void;
|
||||
onDelete: (instanceId: string, imageName: string) => void;
|
||||
}
|
||||
|
||||
const GalleryTable: FC<GalleryTableProps> = ({
|
||||
imageList,
|
||||
loading,
|
||||
pagination,
|
||||
selectedRowKeys,
|
||||
onChange,
|
||||
onSelectedRowsChange,
|
||||
onPreview,
|
||||
onDownload,
|
||||
onDelete,
|
||||
}) => {
|
||||
const columns: ProColumns<ImageItem>[] = [
|
||||
{
|
||||
title: '图片',
|
||||
dataIndex: 'instanceId',
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<div
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundImage: `url(/file/image/${record.instanceId})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'imageName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
dataIndex: 'size',
|
||||
renderText: (text) => (text ? formatBytes(text) : '-'),
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'uploadTime',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
<a
|
||||
key="preview"
|
||||
onClick={() => {
|
||||
const index = imageList.findIndex((img) => img.instanceId === record.instanceId);
|
||||
onPreview(index);
|
||||
}}
|
||||
>
|
||||
预览
|
||||
</a>,
|
||||
<a key="download" onClick={() => onDownload(record.instanceId, record.imageName)}>
|
||||
下载
|
||||
</a>,
|
||||
<a
|
||||
key="delete"
|
||||
onClick={() => onDelete(record.instanceId, record.imageName)}
|
||||
style={{ color: 'red' }}
|
||||
>
|
||||
删除
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ProTable<ImageItem>
|
||||
columns={columns}
|
||||
dataSource={imageList}
|
||||
rowKey="instanceId"
|
||||
pagination={{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}}
|
||||
loading={loading}
|
||||
search={false}
|
||||
options={false}
|
||||
onChange={onChange}
|
||||
rowSelection={{
|
||||
selectedRowKeys,
|
||||
onChange: (keys) => onSelectedRowsChange(keys as string[]),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryTable;
|
||||
110
src/pages/gallery/components/GalleryToolbar.tsx
Normal file
110
src/pages/gallery/components/GalleryToolbar.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import {
|
||||
BarsOutlined,
|
||||
BorderOutlined,
|
||||
DeleteOutlined,
|
||||
DownloadOutlined,
|
||||
SmallDashOutlined,
|
||||
UploadOutlined
|
||||
} from '@ant-design/icons';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Button, Radio, Space, Upload } from 'antd';
|
||||
import { FC } from 'react';
|
||||
import type { UploadFile } from 'antd/es/upload/interface';
|
||||
|
||||
interface GalleryToolbarProps {
|
||||
viewMode: 'small' | 'large' | 'list' | 'table';
|
||||
batchMode: boolean;
|
||||
selectedCount: number;
|
||||
onViewModeChange: (e: RadioChangeEvent) => void;
|
||||
onBatchModeToggle: () => void;
|
||||
onCancelBatch: () => void;
|
||||
onBatchDownload: () => void;
|
||||
onBatchDelete: () => void;
|
||||
onUpload: (file: UploadFile) => void;
|
||||
uploading: boolean;
|
||||
}
|
||||
|
||||
const GalleryToolbar: FC<GalleryToolbarProps> = ({
|
||||
viewMode,
|
||||
batchMode,
|
||||
selectedCount,
|
||||
onViewModeChange,
|
||||
onBatchModeToggle,
|
||||
onCancelBatch,
|
||||
onBatchDownload,
|
||||
onBatchDelete,
|
||||
onUpload,
|
||||
uploading
|
||||
}) => {
|
||||
const beforeUpload = (file: UploadFile) => {
|
||||
// 只允许上传图片
|
||||
const isImage = file.type?.startsWith('image/');
|
||||
if (!isImage) {
|
||||
console.error(`${file.name} 不是图片文件`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
return (
|
||||
<Space>
|
||||
{batchMode ? (
|
||||
<>
|
||||
<Button onClick={onCancelBatch}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={onBatchDownload}
|
||||
disabled={selectedCount === 0}
|
||||
>
|
||||
下载({selectedCount})
|
||||
</Button>
|
||||
<Button
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={onBatchDelete}
|
||||
disabled={selectedCount === 0}
|
||||
>
|
||||
删除({selectedCount})
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload
|
||||
beforeUpload={beforeUpload}
|
||||
customRequest={({ file }) => onUpload(file as UploadFile)}
|
||||
showUploadList={false}
|
||||
multiple
|
||||
>
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
loading={uploading}
|
||||
>
|
||||
上传图片
|
||||
</Button>
|
||||
</Upload>
|
||||
<Button onClick={onBatchModeToggle}>批量操作</Button>
|
||||
</>
|
||||
)}
|
||||
<Radio.Group
|
||||
value={viewMode}
|
||||
onChange={onViewModeChange}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
>
|
||||
<Radio.Button value="small">
|
||||
<SmallDashOutlined /> 小图
|
||||
</Radio.Button>
|
||||
<Radio.Button value="large">
|
||||
<BorderOutlined /> 大图
|
||||
</Radio.Button>
|
||||
<Radio.Button value="list">
|
||||
<BarsOutlined /> 列表
|
||||
</Radio.Button>
|
||||
<Radio.Button value="table">表格</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryToolbar;
|
||||
125
src/pages/gallery/components/GridView.tsx
Normal file
125
src/pages/gallery/components/GridView.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
// src/pages/gallery/components/GridView.tsx
|
||||
import { ImageItem } from '@/pages/gallery/typings';
|
||||
import { DeleteOutlined, DownloadOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons';
|
||||
import { Button, Checkbox, Dropdown, Menu, Spin } from 'antd';
|
||||
import React, { FC, useCallback } from 'react';
|
||||
import '../index.css';
|
||||
|
||||
interface GridViewProps {
|
||||
imageList: ImageItem[];
|
||||
viewMode: 'small' | 'large' | 'list' | 'table';
|
||||
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 GridView: FC<GridViewProps> = ({
|
||||
imageList,
|
||||
viewMode,
|
||||
batchMode,
|
||||
selectedRowKeys,
|
||||
onPreview,
|
||||
onSelect,
|
||||
onDownload,
|
||||
onDelete,
|
||||
loadingMore,
|
||||
onScroll,
|
||||
}) => {
|
||||
const getImageSize = useCallback(() => {
|
||||
switch (viewMode) {
|
||||
case 'small':
|
||||
return { width: 150, height: 150 };
|
||||
case 'large':
|
||||
return { width: 300, height: 300 };
|
||||
default:
|
||||
return { width: 150, height: 150 };
|
||||
}
|
||||
}, [viewMode]);
|
||||
|
||||
const imageSize = getImageSize();
|
||||
|
||||
const getImageMenu = useCallback(
|
||||
(item: ImageItem) => (
|
||||
<Menu>
|
||||
<Menu.Item
|
||||
key="preview"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => {
|
||||
const index = imageList.findIndex((img) => img.instanceId === item.instanceId);
|
||||
onPreview(index);
|
||||
}}
|
||||
>
|
||||
预览
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="download"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => onDownload(item.instanceId, item.imageName)}
|
||||
>
|
||||
下载
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
key="delete"
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={() => onDelete(item.instanceId, item.imageName)}
|
||||
>
|
||||
删除
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
),
|
||||
[imageList, onPreview, onDownload, onDelete],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={viewMode === 'small' ? 'small-grid-view' : 'large-grid-view'}
|
||||
onScroll={onScroll}
|
||||
>
|
||||
{imageList.map((item: ImageItem, index: number) => (
|
||||
<div key={item.instanceId} className="image-card">
|
||||
{batchMode && (
|
||||
<Checkbox
|
||||
className="image-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="image-info">
|
||||
<div className="image-title" title={item.imageName}>
|
||||
{item.imageName}
|
||||
</div>
|
||||
<Dropdown overlay={getImageMenu(item)} trigger={['click']}>
|
||||
<Button type="text" icon={<MoreOutlined />} />
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{loadingMore && (
|
||||
<div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '20px' }}>
|
||||
<Spin />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GridView;
|
||||
98
src/pages/gallery/components/ListView.tsx
Normal file
98
src/pages/gallery/components/ListView.tsx
Normal file
@@ -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;
|
||||
74
src/pages/gallery/index.css
Normal file
74
src/pages/gallery/index.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.small-grid-view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.large-grid-view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.image-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.image-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.image-checkbox {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.small-grid-view {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.large-grid-view {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.small-grid-view {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.large-grid-view {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
383
src/pages/gallery/index.tsx
Normal file
383
src/pages/gallery/index.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
// 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 type { RadioChangeEvent } from 'antd';
|
||||
import type { UploadFile } from 'antd/es/upload/interface';
|
||||
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";
|
||||
|
||||
const Gallery: FC = () => {
|
||||
const [viewMode, setViewMode] = useState<'small' | 'large' | 'list' | 'table'>('small');
|
||||
const [page, setPage] = useState(1);
|
||||
const [previewVisible, setPreviewVisible] = useState(false);
|
||||
const [previewCurrent, setPreviewCurrent] = useState(0);
|
||||
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 [tablePagination, setTablePagination] = useState(initPagination);
|
||||
|
||||
// 非表格模式的数据请求
|
||||
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 handleViewModeChange = (e: RadioChangeEvent) => {
|
||||
const newViewMode = e.target.value;
|
||||
setViewMode(newViewMode);
|
||||
|
||||
// 重置分页
|
||||
if (newViewMode === 'table') {
|
||||
setTablePagination(initPagination);
|
||||
fetchTableData(initPagination);
|
||||
} else {
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
// 清除选择
|
||||
setSelectedRowKeys([]);
|
||||
setBatchMode(false);
|
||||
};
|
||||
|
||||
// 处理表格分页变化
|
||||
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
|
||||
});
|
||||
}
|
||||
}, [viewMode, tablePagination, fetchTableData]);
|
||||
|
||||
const imageList = useMemo((): ImageItem[] => {
|
||||
if (viewMode === 'table') {
|
||||
return tableData?.list || [];
|
||||
}
|
||||
return data?.list || [];
|
||||
}, [data, tableData, viewMode]);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}, [loading, loadingMore, data?.total, imageList.length, viewMode]);
|
||||
|
||||
// 处理图片预览
|
||||
const handlePreview = useCallback((index: number) => {
|
||||
setPreviewCurrent(index);
|
||||
setPreviewVisible(true);
|
||||
}, []);
|
||||
|
||||
// 关闭预览
|
||||
const handlePreviewClose = useCallback(() => {
|
||||
setPreviewVisible(false);
|
||||
}, []);
|
||||
|
||||
// 切换图片
|
||||
const handlePreviewChange = useCallback((current: number) => {
|
||||
setPreviewCurrent(current);
|
||||
}, []);
|
||||
|
||||
// 下载图片
|
||||
const handleDownload = useCallback((instanceId: string, imageName?: string) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = `/file/image/${instanceId}`;
|
||||
link.download = imageName ?? 'default';
|
||||
link.click();
|
||||
}, []);
|
||||
|
||||
// 上传图片
|
||||
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();
|
||||
}
|
||||
} 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('删除成功');
|
||||
|
||||
// 表格模式也需要刷新数据
|
||||
if (viewMode === 'table') {
|
||||
fetchTableData({ current: tablePagination.current, pageSize: tablePagination.pageSize });
|
||||
} else {
|
||||
refresh();
|
||||
}
|
||||
|
||||
// 如果在批量选择中，也需要移除
|
||||
setSelectedRowKeys(prev => prev.filter(key => key !== instanceId));
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [refresh, viewMode, tablePagination, fetchTableData]);
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = useCallback(() => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.warning('请先选择要删除的图片');
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.length} 张图片吗？此操作不可恢复。`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const promises = selectedRowKeys.map((id) => deleteImage({ instanceId: id }));
|
||||
await Promise.all(promises);
|
||||
message.success(`成功删除 ${selectedRowKeys.length} 张图片`);
|
||||
setSelectedRowKeys([]);
|
||||
setBatchMode(false);
|
||||
|
||||
// 表格模式也需要刷新数据
|
||||
if (viewMode === 'table') {
|
||||
fetchTableData({ current: tablePagination.current, pageSize: tablePagination.pageSize });
|
||||
} else {
|
||||
refresh();
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('批量删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [selectedRowKeys, refresh, viewMode, tablePagination, fetchTableData]);
|
||||
|
||||
// 批量下载
|
||||
const handleBatchDownload = useCallback(() => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.warning('请先选择要下载的图片');
|
||||
return;
|
||||
}
|
||||
|
||||
selectedRowKeys.forEach((id, index) => {
|
||||
// 添加延迟避免浏览器限制
|
||||
setTimeout(() => {
|
||||
const item = imageList.find(img => img.instanceId === id);
|
||||
if (item) {
|
||||
handleDownload(id, item.imageName);
|
||||
}
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
message.success(`开始下载 ${selectedRowKeys.length} 张图片`);
|
||||
}, [selectedRowKeys, imageList, handleDownload]);
|
||||
|
||||
// 切换选择
|
||||
const handleSelect = useCallback((instanceId: string, checked: boolean) => {
|
||||
setSelectedRowKeys(prev => {
|
||||
if (checked) {
|
||||
return [...prev, instanceId];
|
||||
} else {
|
||||
return prev.filter(key => key !== instanceId);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 全选/取消全选
|
||||
const handleSelectAll = useCallback((checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedRowKeys(imageList.map(item => item.instanceId));
|
||||
} else {
|
||||
setSelectedRowKeys([]);
|
||||
}
|
||||
}, [imageList]);
|
||||
|
||||
// 取消批量操作
|
||||
const handleCancelBatch = useCallback(() => {
|
||||
setSelectedRowKeys([]);
|
||||
setBatchMode(false);
|
||||
}, []);
|
||||
|
||||
// 根据视图模式获取当前数据和加载状态
|
||||
const getCurrentDataAndLoading = () => {
|
||||
if (viewMode === 'table') {
|
||||
return { currentData: tableData, currentLoading: tableLoading };
|
||||
} else {
|
||||
return { currentData: data, currentLoading: loading };
|
||||
}
|
||||
};
|
||||
|
||||
const { currentLoading } = getCurrentDataAndLoading();
|
||||
|
||||
// 渲染视图
|
||||
const renderView = () => {
|
||||
switch (viewMode) {
|
||||
case 'table':
|
||||
return (
|
||||
<GalleryTable
|
||||
imageList={imageList}
|
||||
loading={tableLoading}
|
||||
pagination={{
|
||||
current: tablePagination.current,
|
||||
pageSize: tablePagination.pageSize,
|
||||
total: tableData?.total,
|
||||
}}
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
onChange={handleTableChange}
|
||||
onSelectedRowsChange={setSelectedRowKeys}
|
||||
onPreview={handlePreview}
|
||||
onDownload={handleDownload}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
);
|
||||
case 'list':
|
||||
return (
|
||||
<ListView
|
||||
imageList={imageList}
|
||||
batchMode={batchMode}
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
onPreview={handlePreview}
|
||||
onSelect={handleSelect}
|
||||
onDownload={handleDownload}
|
||||
onDelete={handleDelete}
|
||||
loadingMore={loadingMore}
|
||||
onScroll={handleScroll}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<GridView
|
||||
imageList={imageList}
|
||||
viewMode={viewMode}
|
||||
batchMode={batchMode}
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
onPreview={handlePreview}
|
||||
onSelect={handleSelect}
|
||||
onDownload={handleDownload}
|
||||
onDelete={handleDelete}
|
||||
loadingMore={loadingMore}
|
||||
onScroll={handleScroll}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageContainer
|
||||
title="我的照片"
|
||||
extra={
|
||||
<GalleryToolbar
|
||||
viewMode={viewMode}
|
||||
batchMode={batchMode}
|
||||
selectedCount={selectedRowKeys.length}
|
||||
onViewModeChange={handleViewModeChange}
|
||||
onBatchModeToggle={() => setBatchMode(true)}
|
||||
onCancelBatch={handleCancelBatch}
|
||||
onBatchDownload={handleBatchDownload}
|
||||
onBatchDelete={handleBatchDelete}
|
||||
onUpload={handleUpload}
|
||||
uploading={uploading}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{currentLoading && ((viewMode === 'table' && tablePagination.current === 1) || (viewMode !== 'table' && page === 1)) ? (
|
||||
<div style={{ textAlign: 'center', padding: '50px 0' }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : imageList.length === 0 ? (
|
||||
<Empty description="暂无图片" />
|
||||
) : (
|
||||
renderView()
|
||||
)}
|
||||
|
||||
{/* 预览组件 */}
|
||||
<Image.PreviewGroup
|
||||
preview={{
|
||||
visible: previewVisible,
|
||||
current: previewCurrent,
|
||||
onVisibleChange: (visible) => setPreviewVisible(visible),
|
||||
onChange: handlePreviewChange,
|
||||
}}
|
||||
>
|
||||
{imageList.map((item: ImageItem) => (
|
||||
<Image
|
||||
key={item.instanceId}
|
||||
src={`/file/image/${item.instanceId}`}
|
||||
style={{ display: 'none' }}
|
||||
alt={item.imageName}
|
||||
/>
|
||||
))}
|
||||
</Image.PreviewGroup>
|
||||
</PageContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gallery;
|
||||
15
src/pages/gallery/style.style.ts
Normal file
15
src/pages/gallery/style.style.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(() => {
|
||||
return {
|
||||
smallGridView: {
|
||||
'.small-grid-view': {
|
||||
display: 'grid',
|
||||
'grid-template-columns': 'repeat(auto-fill, minmax(150px, 1fr))',
|
||||
gap: '16px',
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
8
src/pages/gallery/typings.d.ts
vendored
Normal file
8
src/pages/gallery/typings.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export interface ImageItem {
|
||||
instanceId: string;
|
||||
imageName: string;
|
||||
size?: number;
|
||||
createTime?: string;
|
||||
updateTime?: string;
|
||||
uploadTime?: string;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// src/pages/list/basic-list/components/AddTimeLineItemModal.tsx
|
||||
import { addStoryItem } from '@/pages/list/basic-list/service';
|
||||
import chinaRegion, { code2Location } from '@/utils/chinaRegion';
|
||||
import chinaRegion, { code2Location } from '@/commonConstant/chinaRegion';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Button, Cascader, DatePicker, Form, Input, message, Modal, Upload } from 'antd';
|
||||
|
||||
@@ -10,7 +10,7 @@ import React, { FC, useState } from 'react';
|
||||
import ImgCrop from 'antd-img-crop';
|
||||
import type { StoryType } from '../data.d';
|
||||
import useStyles from '../style.style';
|
||||
import { defaultIcons } from '@/utils/commonConstant';
|
||||
import { defaultIcons } from '@/commonConstant/commonConstant';
|
||||
|
||||
type OperationModalProps = {
|
||||
done: boolean;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Badge, Col, Drawer, Row, Timeline } from 'antd';
|
||||
import { Badge, Col, Row, Timeline } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
import TimelineImage from '@/components/TimelineImage';
|
||||
@@ -15,9 +15,6 @@ const TimelineItem = ({ event: initialEvent, onUpdate }: TimelineItemProps) => {
|
||||
const [openMainDrawer, setOpenMainDrawer] = React.useState(false);
|
||||
const [expanded, setExpanded] = React.useState(false); // 控制子项展开状态
|
||||
|
||||
const [openSubDrawer, setOpenSubDrawer] = React.useState(false);
|
||||
const [selectedSubItem, setSelectedSubItem] = React.useState<TimelineEvent | null>(null);
|
||||
|
||||
const showMainDrawer = () => {
|
||||
setOpenMainDrawer(true);
|
||||
};
|
||||
@@ -128,25 +125,6 @@ const TimelineItem = ({ event: initialEvent, onUpdate }: TimelineItemProps) => {
|
||||
setOpen={setOpenMainDrawer}
|
||||
/>
|
||||
|
||||
{/* 子时间点详情抽屉 */}
|
||||
{selectedSubItem && (
|
||||
<Drawer
|
||||
width={640}
|
||||
placement="right"
|
||||
onClose={() => setOpenSubDrawer(false)}
|
||||
open={openSubDrawer}
|
||||
title={selectedSubItem.title}
|
||||
>
|
||||
<p style={{ marginBottom: 24 }}>
|
||||
<strong>描述：</strong>
|
||||
{selectedSubItem.description}
|
||||
</p>
|
||||
<p>
|
||||
<strong>时间：</strong>
|
||||
{selectedSubItem.time || '未设置'}
|
||||
</p>
|
||||
</Drawer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -115,10 +115,6 @@ const TimelineItemDrawer = (props: Props) => {
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 编辑模态框入口 */}
|
||||
{/*<Button type="default" onClick={() => setOpenEditMainItemModal(true)} block style={{ marginTop: '16px' }}>
|
||||
编辑时间点信息
|
||||
</Button>*/}
|
||||
{/* 添加子时间点模态框 */}
|
||||
<AddTimeLineItemModal
|
||||
visible={openAddSubItemModal}
|
||||
|
||||
@@ -72,7 +72,7 @@ export async function queryStoryItemImages(itemId: string): Promise<{ data: stri
|
||||
}
|
||||
|
||||
export async function fetchImage(imageInstanceId: string): Promise<any> {
|
||||
return request(`/file/download/cover/${imageInstanceId}`, {
|
||||
return request(`/file/image/${imageInstanceId}`, {
|
||||
method: 'GET',
|
||||
responseType: 'blob',
|
||||
getResponse: true,
|
||||
|
||||
Reference in New Issue
Block a user