From 9b73696a98e2d154a0d9759882bed00531556cdf Mon Sep 17 00:00:00 2001
From: feitianbubu <feitianbubu@qq.com>
Date: Wed, 23 Jul 2025 16:49:06 +0800
Subject: [PATCH] feat: add video preview modal

---
 .../table/task-logs/TaskLogsColumnDefs.js        |  9 ++++++++-
 .../components/table/task-logs/TaskLogsTable.jsx |  3 +++
 web/src/components/table/task-logs/index.jsx     |  9 ++++++++-
 .../table/task-logs/modals/ContentModal.jsx      |  7 ++++++-
 web/src/hooks/task-logs/useTaskLogsData.js       | 16 ++++++++++++++++
 5 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/web/src/components/table/task-logs/TaskLogsColumnDefs.js b/web/src/components/table/task-logs/TaskLogsColumnDefs.js
index f895bf01..d44edf05 100644
--- a/web/src/components/table/task-logs/TaskLogsColumnDefs.js
+++ b/web/src/components/table/task-logs/TaskLogsColumnDefs.js
@@ -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>
           );
diff --git a/web/src/components/table/task-logs/TaskLogsTable.jsx b/web/src/components/table/task-logs/TaskLogsTable.jsx
index cacb12dd..eaf73c71 100644
--- a/web/src/components/table/task-logs/TaskLogsTable.jsx
+++ b/web/src/components/table/task-logs/TaskLogsTable.jsx
@@ -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,
   ]);
 
diff --git a/web/src/components/table/task-logs/index.jsx b/web/src/components/table/task-logs/index.jsx
index c5439bae..a12dab8a 100644
--- a/web/src/components/table/task-logs/index.jsx
+++ b/web/src/components/table/task-logs/index.jsx
@@ -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
diff --git a/web/src/components/table/task-logs/modals/ContentModal.jsx b/web/src/components/table/task-logs/modals/ContentModal.jsx
index 11869614..a6f16c98 100644
--- a/web/src/components/table/task-logs/modals/ContentModal.jsx
+++ b/web/src/components/table/task-logs/modals/ContentModal.jsx
@@ -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>
   );
 };
diff --git a/web/src/hooks/task-logs/useTaskLogsData.js b/web/src/hooks/task-logs/useTaskLogsData.js
index 70e2bf00..6f6940c4 100644
--- a/web/src/hooks/task-logs/useTaskLogsData.js
+++ b/web/src/hooks/task-logs/useTaskLogsData.js
@@ -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,