Merge pull request #1429 from feitianbubu/pr/video-preview-modal

feat: add video preview modal

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>
           );

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,
   ]);
 

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

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>
   );
 };