diff --git a/src/components/StockChart/KLineChartModal.tsx b/src/components/StockChart/KLineChartModal.tsx index 04aa5b7e..9fa83134 100644 --- a/src/components/StockChart/KLineChartModal.tsx +++ b/src/components/StockChart/KLineChartModal.tsx @@ -1,5 +1,6 @@ // src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件 import React, { useEffect, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import { Modal, ModalOverlay, @@ -15,10 +16,12 @@ import { CircularProgress, Alert, AlertIcon, + ChakraProvider, } from '@chakra-ui/react'; import * as echarts from 'echarts'; import { stockService } from '@services/eventService'; import { logger } from '@utils/logger'; +import theme from '@theme/theme'; /** * 股票信息 @@ -453,26 +456,44 @@ const KLineChartModal: React.FC = ({ } }, [isOpen, stock?.stock_code, eventTime]); + // 创建或获取 Portal 容器 + useEffect(() => { + let container = document.getElementById('kline-modal-root'); + if (!container) { + container = document.createElement('div'); + container.id = 'kline-modal-root'; + container.style.cssText = 'position: fixed; top: 0; left: 0; z-index: 10000;'; + document.body.appendChild(container); + } + return () => { + // 组件卸载时不删除容器,因为可能会被复用 + }; + }, []); + if (!stock) return null; console.log('[KLineChartModal] 渲染 Modal, isOpen:', isOpen); - return ( - - - + + + @@ -528,7 +549,10 @@ const KLineChartModal: React.FC = ({ + ); + + return createPortal(modalContent, portalContainer); }; export default KLineChartModal; diff --git a/src/views/Community/components/InvestmentCalendar.js b/src/views/Community/components/InvestmentCalendar.js index 39672f65..5ef091cb 100644 --- a/src/views/Community/components/InvestmentCalendar.js +++ b/src/views/Community/components/InvestmentCalendar.js @@ -296,9 +296,6 @@ const InvestmentCalendar = () => { formattedEventTime: formattedEventTime }); - // 先关闭相关股票模态框,避免 z-index 冲突 - setStockModalVisible(false); - setSelectedStock({ stock_code: stockCode, // 添加交易所后缀 stock_name: stock[1]