feat: add video preview modal
This commit is contained in:
@@ -211,6 +211,7 @@ export const getTaskLogsColumns = ({
|
|||||||
copyText,
|
copyText,
|
||||||
openContentModal,
|
openContentModal,
|
||||||
isAdminUser,
|
isAdminUser,
|
||||||
|
openVideoModal,
|
||||||
}) => {
|
}) => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -342,7 +343,13 @@ export const getTaskLogsColumns = ({
|
|||||||
const isUrl = typeof text === 'string' && /^https?:\/\//.test(text);
|
const isUrl = typeof text === 'string' && /^https?:\/\//.test(text);
|
||||||
if (isSuccess && isVideoTask && isUrl) {
|
if (isSuccess && isVideoTask && isUrl) {
|
||||||
return (
|
return (
|
||||||
<a href={text} target="_blank" rel="noopener noreferrer">
|
<a
|
||||||
|
href="#"
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
openVideoModal(text);
|
||||||
|
}}
|
||||||
|
>
|
||||||
{t('点击预览视频')}
|
{t('点击预览视频')}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -39,6 +39,7 @@ const TaskLogsTable = (taskLogsData) => {
|
|||||||
handlePageSizeChange,
|
handlePageSizeChange,
|
||||||
copyText,
|
copyText,
|
||||||
openContentModal,
|
openContentModal,
|
||||||
|
openVideoModal,
|
||||||
isAdminUser,
|
isAdminUser,
|
||||||
t,
|
t,
|
||||||
COLUMN_KEYS,
|
COLUMN_KEYS,
|
||||||
@@ -51,6 +52,7 @@ const TaskLogsTable = (taskLogsData) => {
|
|||||||
COLUMN_KEYS,
|
COLUMN_KEYS,
|
||||||
copyText,
|
copyText,
|
||||||
openContentModal,
|
openContentModal,
|
||||||
|
openVideoModal,
|
||||||
isAdminUser,
|
isAdminUser,
|
||||||
});
|
});
|
||||||
}, [
|
}, [
|
||||||
@@ -58,6 +60,7 @@ const TaskLogsTable = (taskLogsData) => {
|
|||||||
COLUMN_KEYS,
|
COLUMN_KEYS,
|
||||||
copyText,
|
copyText,
|
||||||
openContentModal,
|
openContentModal,
|
||||||
|
openVideoModal,
|
||||||
isAdminUser,
|
isAdminUser,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -37,7 +37,14 @@ const TaskLogsPage = () => {
|
|||||||
<>
|
<>
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
<ColumnSelectorModal {...taskLogsData} />
|
<ColumnSelectorModal {...taskLogsData} />
|
||||||
<ContentModal {...taskLogsData} />
|
<ContentModal {...taskLogsData} isVideo={false} />
|
||||||
|
{/* 新增:视频预览弹窗 */}
|
||||||
|
<ContentModal
|
||||||
|
isModalOpen={taskLogsData.isVideoModalOpen}
|
||||||
|
setIsModalOpen={taskLogsData.setIsVideoModalOpen}
|
||||||
|
modalContent={taskLogsData.videoUrl}
|
||||||
|
isVideo={true}
|
||||||
|
/>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<CardPro
|
<CardPro
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ const ContentModal = ({
|
|||||||
isModalOpen,
|
isModalOpen,
|
||||||
setIsModalOpen,
|
setIsModalOpen,
|
||||||
modalContent,
|
modalContent,
|
||||||
|
isVideo,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
@@ -34,7 +35,11 @@ const ContentModal = ({
|
|||||||
bodyStyle={{ height: '400px', overflow: 'auto' }}
|
bodyStyle={{ height: '400px', overflow: 'auto' }}
|
||||||
width={800}
|
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>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -63,6 +63,10 @@ export const useTaskLogsData = () => {
|
|||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [modalContent, setModalContent] = useState('');
|
const [modalContent, setModalContent] = useState('');
|
||||||
|
|
||||||
|
// 新增:视频预览弹窗状态
|
||||||
|
const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
|
||||||
|
const [videoUrl, setVideoUrl] = useState('');
|
||||||
|
|
||||||
// Form state
|
// Form state
|
||||||
const [formApi, setFormApi] = useState(null);
|
const [formApi, setFormApi] = useState(null);
|
||||||
let now = new Date();
|
let now = new Date();
|
||||||
@@ -243,6 +247,12 @@ export const useTaskLogsData = () => {
|
|||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 新增:打开视频预览弹窗
|
||||||
|
const openVideoModal = (url) => {
|
||||||
|
setVideoUrl(url);
|
||||||
|
setIsVideoModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
// Initialize data
|
// Initialize data
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const localPageSize = parseInt(localStorage.getItem('task-page-size')) || ITEMS_PER_PAGE;
|
const localPageSize = parseInt(localStorage.getItem('task-page-size')) || ITEMS_PER_PAGE;
|
||||||
@@ -264,6 +274,11 @@ export const useTaskLogsData = () => {
|
|||||||
setIsModalOpen,
|
setIsModalOpen,
|
||||||
modalContent,
|
modalContent,
|
||||||
|
|
||||||
|
// 新增:视频弹窗状态
|
||||||
|
isVideoModalOpen,
|
||||||
|
setIsVideoModalOpen,
|
||||||
|
videoUrl,
|
||||||
|
|
||||||
// Form state
|
// Form state
|
||||||
formApi,
|
formApi,
|
||||||
setFormApi,
|
setFormApi,
|
||||||
@@ -290,6 +305,7 @@ export const useTaskLogsData = () => {
|
|||||||
refresh,
|
refresh,
|
||||||
copyText,
|
copyText,
|
||||||
openContentModal,
|
openContentModal,
|
||||||
|
openVideoModal, // 新增
|
||||||
enrichLogs,
|
enrichLogs,
|
||||||
syncPageData,
|
syncPageData,
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user