fix: 优化概念中心时间轴弹窗关闭行为,使用条件渲染

问题描述:
- 点击关闭按钮后,弹窗未完全关闭
- 可能存在 DOM 残留或状态问题

优化方案:
- 使用条件渲染替代 isOpen 属性控制
- 当状态为 false 时,Modal 组件完全从 DOM 中卸载
- 确保每次打开都是全新的状态

修改内容:
1. 主时间轴 Modal:添加 {isOpen && <Modal>...</Modal>} 条件渲染
2. 研报详情 Modal:添加 {isReportModalOpen && <Modal>...</Modal>} 条件渲染
3. 新闻详情 Modal:添加 {isNewsModalOpen && <Modal>...</Modal>} 条件渲染

优化效果:
- 弹窗关闭后组件完全卸载,避免残留
- 减少不必要的 DOM 节点,提升性能
- 每次打开都是全新的组件实例

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-10-31 15:05:15 +08:00
parent 2420ff45a4
commit 37d98203a3

View File

@@ -406,12 +406,13 @@ const ConceptTimelineModal = ({
return ( return (
<> <>
<Modal {isOpen && (
isOpen={isOpen} <Modal
onClose={onClose} isOpen={isOpen}
size="full" onClose={onClose}
scrollBehavior="inside" size="full"
> scrollBehavior="inside"
>
<ModalOverlay /> <ModalOverlay />
<ModalContent maxW="1400px" m={4}> <ModalContent maxW="1400px" m={4}>
<ModalHeader <ModalHeader
@@ -840,14 +841,16 @@ const ConceptTimelineModal = ({
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
)}
{/* 研报全文Modal */} {/* 研报全文Modal */}
<Modal {isReportModalOpen && (
isOpen={isReportModalOpen} <Modal
onClose={() => setIsReportModalOpen(false)} isOpen={isReportModalOpen}
size="4xl" onClose={() => setIsReportModalOpen(false)}
scrollBehavior="inside" size="4xl"
> scrollBehavior="inside"
>
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent>
<ModalHeader bg="green.500" color="white"> <ModalHeader bg="green.500" color="white">
@@ -919,14 +922,16 @@ const ConceptTimelineModal = ({
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
)}
{/* 新闻全文Modal */} {/* 新闻全文Modal */}
<Modal {isNewsModalOpen && (
isOpen={isNewsModalOpen} <Modal
onClose={() => setIsNewsModalOpen(false)} isOpen={isNewsModalOpen}
size="4xl" onClose={() => setIsNewsModalOpen(false)}
scrollBehavior="inside" size="4xl"
> scrollBehavior="inside"
>
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent>
<ModalHeader bg="blue.500" color="white"> <ModalHeader bg="blue.500" color="white">
@@ -989,6 +994,7 @@ const ConceptTimelineModal = ({
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
)}
</> </>
); );
}; };