diff --git a/web/src/components/table/task-logs/modals/ContentModal.jsx b/web/src/components/table/task-logs/modals/ContentModal.jsx
index 3d747b77d..3bfba37b1 100644
--- a/web/src/components/table/task-logs/modals/ContentModal.jsx
+++ b/web/src/components/table/task-logs/modals/ContentModal.jsx
@@ -17,8 +17,11 @@ along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
-import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Typography, Spin } from '@douyinfe/semi-ui';
+import { IconExternalOpen, IconCopy } from '@douyinfe/semi-icons';
+
+const { Text } = Typography;
const ContentModal = ({
isModalOpen,
@@ -26,17 +29,120 @@ const ContentModal = ({
modalContent,
isVideo,
}) => {
+ const [videoError, setVideoError] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ useEffect(() => {
+ if (isModalOpen && isVideo) {
+ setVideoError(false);
+ setIsLoading(true);
+ }
+ }, [isModalOpen, isVideo]);
+
+ const handleVideoError = () => {
+ setVideoError(true);
+ setIsLoading(false);
+ };
+
+ const handleVideoLoaded = () => {
+ setIsLoading(false);
+ };
+
+ const handleCopyUrl = () => {
+ navigator.clipboard.writeText(modalContent);
+ };
+
+ const handleOpenInNewTab = () => {
+ window.open(modalContent, '_blank');
+ };
+
+ const renderVideoContent = () => {
+ if (videoError) {
+ return (
+
+
+ 视频无法在当前浏览器中播放,这可能是由于:
+
+
+ • 视频服务商的跨域限制
+
+
+ • 需要特定的请求头或认证
+
+
+ • 防盗链保护机制
+
+
+
+ }
+ onClick={handleOpenInNewTab}
+ style={{ marginRight: '8px' }}
+ >
+ 在新标签页中打开
+
+ }
+ onClick={handleCopyUrl}
+ >
+ 复制链接
+
+
+
+
+
+ {modalContent}
+
+
+
+ );
+ }
+
+ return (
+
+ {isLoading && (
+
+
+
+ )}
+
+ );
+ };
+
return (
setIsModalOpen(false)}
onCancel={() => setIsModalOpen(false)}
closable={null}
- bodyStyle={{ height: '400px', overflow: 'auto' }}
+ bodyStyle={{
+ height: isVideo ? '450px' : '400px',
+ overflow: 'auto',
+ padding: isVideo && videoError ? '0' : '24px'
+ }}
width={800}
>
{isVideo ? (
-
+ renderVideoContent()
) : (
{modalContent}
)}