添加转换历史组件
- 实现转换历史记录展示 - 支持查看历史转换详情
This commit is contained in:
Leo
parent
f14e62af66
commit
269c66d1ac
333
src/components/ConversionHistory.js
Normal file
333
src/components/ConversionHistory.js
Normal file
@ -0,0 +1,333 @@
|
||||
/**
|
||||
* 转换历史记录组件
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Tag,
|
||||
Space,
|
||||
Card,
|
||||
message,
|
||||
Modal,
|
||||
Descriptions,
|
||||
Alert,
|
||||
Typography,
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
ReloadOutlined,
|
||||
EyeOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { apiService } from '../services/api';
|
||||
import {
|
||||
formatFileSize,
|
||||
formatDateTime,
|
||||
formatConversionTime,
|
||||
getStatusColor,
|
||||
getStatusText,
|
||||
downloadFile
|
||||
} from '../utils/helpers';
|
||||
import Pagination from './Pagination';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const ConversionHistory = ({ refreshTrigger }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const [detailModalVisible, setDetailModalVisible] = useState(false);
|
||||
const [selectedRecord, setSelectedRecord] = useState(null);
|
||||
|
||||
// 加载历史记录
|
||||
const loadHistory = async (page = 1, pageSize = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await apiService.getHistory(page, pageSize);
|
||||
if (response.data.status === 'success') {
|
||||
setData(response.data.data.records);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
current: page,
|
||||
pageSize,
|
||||
total: response.data.data.total,
|
||||
}));
|
||||
}
|
||||
} catch (err) {
|
||||
message.error('加载历史记录失败: ' + err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始加载
|
||||
useEffect(() => {
|
||||
loadHistory();
|
||||
}, []);
|
||||
|
||||
// 响应刷新触发器
|
||||
useEffect(() => {
|
||||
if (refreshTrigger) {
|
||||
loadHistory(1);
|
||||
}
|
||||
}, [refreshTrigger]);
|
||||
|
||||
// 处理分页变化
|
||||
const handlePaginationChange = (page, pageSize) => {
|
||||
loadHistory(page, pageSize);
|
||||
};
|
||||
|
||||
// 处理页面大小变化
|
||||
const handlePageSizeChange = (current, size) => {
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
current: current,
|
||||
pageSize: size,
|
||||
}));
|
||||
};
|
||||
|
||||
// 下载文件
|
||||
const handleDownload = async (record) => {
|
||||
if (record.conversion_status !== 'success') {
|
||||
message.warning('只能下载转换成功的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await apiService.downloadFile(record.id);
|
||||
const blob = new Blob([response.data], { type: 'text/plain' });
|
||||
downloadFile(blob, record.converted_filename);
|
||||
message.success('文件下载成功');
|
||||
} catch (err) {
|
||||
message.error('下载失败: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetails = async (record) => {
|
||||
try {
|
||||
const response = await apiService.getRecord(record.id);
|
||||
if (response.data.status === 'success') {
|
||||
setSelectedRecord(response.data.data);
|
||||
setDetailModalVisible(true);
|
||||
}
|
||||
} catch (err) {
|
||||
message.error('获取详情失败: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '原始文件名',
|
||||
dataIndex: 'original_filename',
|
||||
key: 'original_filename',
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
render: (text) => (
|
||||
<Tooltip title={text}>
|
||||
<Text style={{ maxWidth: 200 }}>{text}</Text>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
dataIndex: 'file_size',
|
||||
key: 'file_size',
|
||||
width: 100,
|
||||
render: (size) => formatFileSize(size),
|
||||
},
|
||||
{
|
||||
title: '转换状态',
|
||||
dataIndex: 'conversion_status',
|
||||
key: 'conversion_status',
|
||||
width: 100,
|
||||
render: (status) => (
|
||||
<Tag color={getStatusColor(status)}>
|
||||
{getStatusText(status)}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '转换时间',
|
||||
dataIndex: 'conversion_time',
|
||||
key: 'conversion_time',
|
||||
width: 100,
|
||||
render: (time) => formatConversionTime(time),
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 160,
|
||||
render: (time) => formatDateTime(time),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 160,
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<Tooltip title="查看详情">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => handleViewDetails(record)}
|
||||
/>
|
||||
</Tooltip>
|
||||
{record.conversion_status === 'success' && (
|
||||
<Tooltip title="下载文件">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => handleDownload(record)}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title="转换历史记录"
|
||||
extra={
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={() => loadHistory(pagination.current, pagination.pageSize)}
|
||||
loading={loading}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
size="middle"
|
||||
scroll={{ x: 800 }}
|
||||
/>
|
||||
|
||||
{/* 自定义分页组件 */}
|
||||
<Pagination
|
||||
current={pagination.current}
|
||||
total={pagination.total}
|
||||
pageSize={pagination.pageSize}
|
||||
onChange={handlePaginationChange}
|
||||
onShowSizeChange={handlePageSizeChange}
|
||||
showSizeChanger={true}
|
||||
showQuickJumper={true}
|
||||
showTotal={true}
|
||||
pageSizeOptions={['10', '20', '50', '100']}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* 详情模态框 */}
|
||||
<Modal
|
||||
title="转换记录详情"
|
||||
open={detailModalVisible}
|
||||
onCancel={() => {
|
||||
setDetailModalVisible(false);
|
||||
setSelectedRecord(null);
|
||||
}}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setDetailModalVisible(false)}>
|
||||
关闭
|
||||
</Button>,
|
||||
selectedRecord?.conversion_status === 'success' && (
|
||||
<Button
|
||||
key="download"
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => handleDownload(selectedRecord)}
|
||||
>
|
||||
下载文件
|
||||
</Button>
|
||||
),
|
||||
].filter(Boolean)}
|
||||
width={800}
|
||||
>
|
||||
{selectedRecord && (
|
||||
<div>
|
||||
<Descriptions column={2} bordered size="small">
|
||||
<Descriptions.Item label="记录ID">
|
||||
{selectedRecord.id}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="转换状态">
|
||||
<Tag color={getStatusColor(selectedRecord.conversion_status)}>
|
||||
{getStatusText(selectedRecord.conversion_status)}
|
||||
</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="原始文件名">
|
||||
{selectedRecord.original_filename}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="转换后文件名">
|
||||
{selectedRecord.converted_filename || '-'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="文件大小">
|
||||
{formatFileSize(selectedRecord.file_size)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="转换耗时">
|
||||
{formatConversionTime(selectedRecord.conversion_time)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">
|
||||
{formatDateTime(selectedRecord.created_at)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="更新时间">
|
||||
{formatDateTime(selectedRecord.updated_at)}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
{selectedRecord.original_minio_url && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text strong>原始文件URL：</Text>
|
||||
<br />
|
||||
<Text code copyable style={{ wordBreak: 'break-all' }}>
|
||||
{selectedRecord.original_minio_url}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedRecord.converted_minio_url && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text strong>转换后文件URL：</Text>
|
||||
<br />
|
||||
<Text code copyable style={{ wordBreak: 'break-all' }}>
|
||||
{selectedRecord.converted_minio_url}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedRecord.error_message && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Alert
|
||||
message="错误信息"
|
||||
description={selectedRecord.error_message}
|
||||
type="error"
|
||||
showIcon
|
||||
icon={<ExclamationCircleOutlined />}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConversionHistory;
|
||||
Loading…
Reference in New Issue
Block a user