diff --git a/src/components/StockChart/KLineChartModal.tsx b/src/components/StockChart/KLineChartModal.tsx
index 9fa83134..e04e82a6 100644
--- a/src/components/StockChart/KLineChartModal.tsx
+++ b/src/components/StockChart/KLineChartModal.tsx
@@ -1,27 +1,9 @@
 // src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  VStack,
-  HStack,
-  Text,
-  Box,
-  Flex,
-  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';
 
 /**
  * 股票信息
@@ -477,79 +459,153 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
   // 获取 Portal 容器
   const portalContainer = document.getElementById('kline-modal-root') || document.body;
 
+  // 如果不显示则返回 null
+  if (!isOpen) return null;
+
   const modalContent = (
-    <ChakraProvider theme={theme}>
-      <Modal
-        isOpen={isOpen}
-        onClose={onClose}
-        size={size}
-        blockScrollOnMount={false}
-        isCentered
+    <>
+      {/* 遮罩层 */}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.7)',
+          zIndex: 10001,
+        }}
+        onClick={onClose}
+      />
+      {/* 弹窗内容 */}
+      <div
+        style={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '90vw',
+          maxWidth: '1400px',
+          maxHeight: '85vh',
+          backgroundColor: '#1a1a1a',
+          border: '2px solid #ffd700',
+          boxShadow: '0 0 30px rgba(255, 215, 0, 0.5)',
+          borderRadius: '8px',
+          zIndex: 10002,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
       >
-        <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)"
+        {/* Header */}
+        <div
+          style={{
+            padding: '16px 24px',
+            borderBottom: '1px solid #404040',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+          }}
         >
-        <ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040">
-          <VStack align="flex-start" spacing={1}>
-            <HStack spacing={3}>
-              <Text fontSize="lg" fontWeight="bold" color="#e0e0e0">
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#e0e0e0' }}>
                 {stock.stock_name || stock.stock_code} ({stock.stock_code})
-              </Text>
+              </span>
               {data.length > 0 && (
-                <Text fontSize="xs" color="#666" fontStyle="italic">
+                <span style={{ fontSize: '12px', color: '#666', fontStyle: 'italic' }}>
                   共{data.length}个交易日（最多1年）
-                </Text>
+                </span>
               )}
-            </HStack>
-            <HStack spacing={4}>
-              <Text fontSize="sm" color="#999">
-                日K线图
-              </Text>
-              <Text fontSize="xs" color="#666">
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '4px' }}>
+              <span style={{ fontSize: '14px', color: '#999' }}>日K线图</span>
+              <span style={{ fontSize: '12px', color: '#666' }}>
                 💡 鼠标滚轮缩放 | 拖动查看不同时间段
-              </Text>
-            </HStack>
-          </VStack>
-        </ModalHeader>
-        <ModalCloseButton color="#999" _hover={{ color: '#e0e0e0' }} />
-        <ModalBody p={4}>
+              </span>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: '#999',
+              fontSize: '24px',
+              cursor: 'pointer',
+              padding: '0 8px',
+              lineHeight: '1',
+            }}
+            onMouseOver={(e) => (e.currentTarget.style.color = '#e0e0e0')}
+            onMouseOut={(e) => (e.currentTarget.style.color = '#999')}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <div style={{ padding: '16px', flex: 1, overflow: 'auto' }}>
           {error && (
-            <Alert status="error" bg="#2a1a1a" borderColor="#ef5350" mb={4}>
-              <AlertIcon color="#ef5350" />
-              <Text color="#e0e0e0">{error}</Text>
-            </Alert>
+            <div
+              style={{
+                backgroundColor: '#2a1a1a',
+                border: '1px solid #ef5350',
+                borderRadius: '4px',
+                padding: '12px 16px',
+                marginBottom: '16px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+              }}
+            >
+              <span style={{ color: '#ef5350' }}>⚠</span>
+              <span style={{ color: '#e0e0e0' }}>{error}</span>
+            </div>
           )}
 
-          <Box position="relative" h="680px" w="100%">
+          <div style={{ position: 'relative', height: '680px', width: '100%' }}>
             {loading && (
-              <Flex
-                position="absolute"
-                top="0"
-                left="0"
-                right="0"
-                bottom="0"
-                bg="rgba(26, 26, 26, 0.7)"
-                zIndex="10"
-                alignItems="center"
-                justifyContent="center"
+              <div
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  backgroundColor: 'rgba(26, 26, 26, 0.7)',
+                  zIndex: 10,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '16px',
+                }}
               >
-                <VStack spacing={4}>
-                  <CircularProgress isIndeterminate color="blue.400" />
-                  <Text color="#e0e0e0">加载K线数据...</Text>
-                </VStack>
-              </Flex>
+                <div
+                  style={{
+                    width: '40px',
+                    height: '40px',
+                    border: '3px solid #404040',
+                    borderTop: '3px solid #3182ce',
+                    borderRadius: '50%',
+                    animation: 'spin 1s linear infinite',
+                  }}
+                />
+                <span style={{ color: '#e0e0e0' }}>加载K线数据...</span>
+              </div>
             )}
             <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
-          </Box>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-    </ChakraProvider>
+          </div>
+        </div>
+      </div>
+      {/* 添加旋转动画的 CSS */}
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </>
   );
 
   return createPortal(modalContent, portalContainer);