feat: add video preview modal
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user