update pay function

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<KLineChartModalProps> = ({
     }
   }, [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 (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size={size}
-      blockScrollOnMount={false}
-      isCentered
-    >
-      <ModalOverlay bg="blackAlpha.700" />
-      <ModalContent
-        maxW="90vw"
-        maxH="85vh"
-        bg="#1a1a1a"
-        border="2px solid #ffd700"
-        boxShadow="0 0 30px rgba(255, 215, 0, 0.5)"
+  // 获取 Portal 容器
+  const portalContainer = document.getElementById('kline-modal-root') || document.body;
+
+  const modalContent = (
+    <ChakraProvider theme={theme}>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        size={size}
+        blockScrollOnMount={false}
+        isCentered
       >
+        <ModalOverlay bg="blackAlpha.700" />
+        <ModalContent
+          maxW="90vw"
+          maxH="85vh"
+          bg="#1a1a1a"
+          border="2px solid #ffd700"
+          boxShadow="0 0 30px rgba(255, 215, 0, 0.5)"
+        >
         <ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040">
           <VStack align="flex-start" spacing={1}>
             <HStack spacing={3}>
@@ -528,7 +549,10 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
         </ModalBody>
       </ModalContent>
     </Modal>
+    </ChakraProvider>
   );
+
+  return createPortal(modalContent, portalContainer);
 };
 
 export default KLineChartModal;