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

web/src/hooks/task-logs/useTaskLogsData.js

@@ -65,6 +65,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();
@@ -250,6 +254,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;
@@ -271,6 +281,11 @@ export const useTaskLogsData = () => {
     setIsModalOpen,
     modalContent,
 
+    // 新增：视频弹窗状态
+    isVideoModalOpen,
+    setIsVideoModalOpen,
+    videoUrl,
+
     // Form state
     formApi,
     setFormApi,
@@ -297,6 +312,7 @@ export const useTaskLogsData = () => {
     refresh,
     copyText,
     openContentModal,
+    openVideoModal, // 新增
     enrichLogs,
     syncPageData,