feat: add video preview modal

This commit is contained in:
feitianbubu
2025-07-23 16:49:06 +08:00
parent b704fc9254
commit 9b73696a98
5 changed files with 41 additions and 3 deletions

View File

@@ -211,6 +211,7 @@ export const getTaskLogsColumns = ({
copyText,
openContentModal,
isAdminUser,
openVideoModal,
}) => {
return [
{
@@ -342,7 +343,13 @@ export const getTaskLogsColumns = ({
const isUrl = typeof text === 'string' && /^https?:\/\//.test(text);
if (isSuccess && isVideoTask && isUrl) {
return (
<a href={text} target="_blank" rel="noopener noreferrer">
<a
href="#"
onClick={e => {
e.preventDefault();
openVideoModal(text);
}}
>
{t('点击预览视频')}
</a>
);

View File

@@ -39,6 +39,7 @@ const TaskLogsTable = (taskLogsData) => {
handlePageSizeChange,
copyText,
openContentModal,
openVideoModal,
isAdminUser,
t,
COLUMN_KEYS,
@@ -51,6 +52,7 @@ const TaskLogsTable = (taskLogsData) => {
COLUMN_KEYS,
copyText,
openContentModal,
openVideoModal,
isAdminUser,
});
}, [
@@ -58,6 +60,7 @@ const TaskLogsTable = (taskLogsData) => {
COLUMN_KEYS,
copyText,
openContentModal,
openVideoModal,
isAdminUser,
]);

View File

@@ -37,7 +37,14 @@ const TaskLogsPage = () => {
<>
{/* Modals */}
<ColumnSelectorModal {...taskLogsData} />
<ContentModal {...taskLogsData} />
<ContentModal {...taskLogsData} isVideo={false} />
{/* 新增:视频预览弹窗 */}
<ContentModal
isModalOpen={taskLogsData.isVideoModalOpen}
setIsModalOpen={taskLogsData.setIsVideoModalOpen}
modalContent={taskLogsData.videoUrl}
isVideo={true}
/>
<Layout>
<CardPro

View File

@@ -24,6 +24,7 @@ const ContentModal = ({
isModalOpen,
setIsModalOpen,
modalContent,
isVideo,
}) => {
return (
<Modal
@@ -34,7 +35,11 @@ const ContentModal = ({
bodyStyle={{ height: '400px', overflow: 'auto' }}
width={800}
>
<p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
{isVideo ? (
<video src={modalContent} controls style={{ width: '100%' }} autoPlay />
) : (
<p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
)}
</Modal>
);
};

View File

@@ -63,6 +63,10 @@ export const useTaskLogsData = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [modalContent, setModalContent] = useState('');
// 新增:视频预览弹窗状态
const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
const [videoUrl, setVideoUrl] = useState('');
// Form state
const [formApi, setFormApi] = useState(null);
let now = new Date();
@@ -243,6 +247,12 @@ export const useTaskLogsData = () => {
setIsModalOpen(true);
};
// 新增:打开视频预览弹窗
const openVideoModal = (url) => {
setVideoUrl(url);
setIsVideoModalOpen(true);
};
// Initialize data
useEffect(() => {
const localPageSize = parseInt(localStorage.getItem('task-page-size')) || ITEMS_PER_PAGE;
@@ -264,6 +274,11 @@ export const useTaskLogsData = () => {
setIsModalOpen,
modalContent,
// 新增:视频弹窗状态
isVideoModalOpen,
setIsVideoModalOpen,
videoUrl,
// Form state
formApi,
setFormApi,
@@ -290,6 +305,7 @@ export const useTaskLogsData = () => {
refresh,
copyText,
openContentModal,
openVideoModal, // 新增
enrichLogs,
syncPageData,