From 37d98203a3868e947d35c049353d1c64e2b6205b Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 31 Oct 2025 15:05:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=A6=82=E5=BF=B5?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E6=97=B6=E9=97=B4=E8=BD=B4=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E8=A1=8C=E4=B8=BA=EF=BC=8C=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题描述：
- 点击关闭按钮后，弹窗未完全关闭
- 可能存在 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>
---
 src/views/Concept/ConceptTimelineModal.js | 42 +++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

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