From 0110dc2fdc42ac7ab908c86f2da3594764edcc22 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Sun, 2 Nov 2025 16:41:21 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/HistoricalEvents.js | 126 +++++++++--------- 1 file changed, 61 insertions(+), 65 deletions(-) diff --git a/src/views/EventDetail/components/HistoricalEvents.js b/src/views/EventDetail/components/HistoricalEvents.js index 62070b63..accc001f 100644 --- a/src/views/EventDetail/components/HistoricalEvents.js +++ b/src/views/EventDetail/components/HistoricalEvents.js @@ -8,7 +8,6 @@ import { Badge, Button, Collapse, - useDisclosure, Skeleton, Alert, AlertIcon, @@ -19,13 +18,6 @@ import { Icon, useColorModeValue, Tooltip, - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalCloseButton, - ModalBody, - ModalFooter, Spinner, Table, Thead, @@ -43,7 +35,9 @@ import { FaChartLine, FaEye, FaTimes, - FaInfoCircle + FaInfoCircle, + FaChevronDown, + FaChevronUp } from 'react-icons/fa'; import { stockService } from '../../../services/eventService'; import { logger } from '../../../utils/logger'; @@ -57,11 +51,9 @@ const HistoricalEvents = ({ // 所有 useState/useEffect/useContext/useRef/useCallback/useMemo 必须在组件顶层、顺序一致 // 不要在 if/循环/回调中调用 Hook const [expandedEvents, setExpandedEvents] = useState(new Set()); - const [selectedEvent, setSelectedEvent] = useState(null); + const [expandedStocks, setExpandedStocks] = useState(new Set()); // 追踪哪些事件的股票列表被展开 const [eventStocks, setEventStocks] = useState({}); - const [loadingStocks, setLoadingStocks] = useState(false); - - const { isOpen, onOpen, onClose } = useDisclosure(); + const [loadingStocks, setLoadingStocks] = useState({}); // 颜色主题 const timelineBg = useColorModeValue('#D4AF37', '#B8860B'); @@ -80,36 +72,48 @@ const HistoricalEvents = ({ setExpandedEvents(newExpanded); }; - // 显示事件相关股票 - const showEventStocks = async (event) => { - setSelectedEvent(event); - setLoadingStocks(true); - onOpen(); + // 切换股票列表展开状态 + const toggleStocksExpansion = async (event) => { + const eventId = event.id; + const newExpanded = new Set(expandedStocks); + + // 如果正在收起，直接更新状态 + if (newExpanded.has(eventId)) { + newExpanded.delete(eventId); + setExpandedStocks(newExpanded); + return; + } + + // 如果正在展开，先展开再加载数据 + newExpanded.add(eventId); + setExpandedStocks(newExpanded); + + // 如果已经加载过该事件的股票数据，不再重复加载 + if (eventStocks[eventId]) { + return; + } + + // 标记为加载中 + setLoadingStocks(prev => ({ ...prev, [eventId]: true })); try { - // 如果已经加载过该事件的股票数据，直接使用缓存 - if (eventStocks[event.id]) { - setLoadingStocks(false); - return; - } - // 调用API获取历史事件相关股票 - const response = await stockService.getHistoricalEventStocks(event.id); + const response = await stockService.getHistoricalEventStocks(eventId); setEventStocks(prev => ({ ...prev, - [event.id]: response.data || [] + [eventId]: response.data || [] })); } catch (err) { - logger.error('HistoricalEvents', 'showEventStocks', err, { - eventId: event.id, + logger.error('HistoricalEvents', 'toggleStocksExpansion', err, { + eventId: eventId, eventTitle: event.title }); setEventStocks(prev => ({ ...prev, - [event.id]: [] + [eventId]: [] })); } finally { - setLoadingStocks(false); + setLoadingStocks(prev => ({ ...prev, [eventId]: false })); } }; @@ -377,7 +381,8 @@ const HistoricalEvents = ({ - - - ); };