fix(StockChart): 图表组件使用 aspect-ratio 保持宽高比，统一弹窗大小

- KLineChartModal: 日K线图使用 aspectRatio 替代固定高度
- StockChartKLineModal: K线图高度改为响应式 min(400px, 60vh)
- TimelineChartModal: 分时图弹窗大小与日K线统一，maxWidth: 1400px

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/StockChart/KLineChartModal.tsx

@@ -705,7 +705,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
             </div>
           )}
 
-          <div style={{ position: 'relative', height: isMobile ? '450px' : '680px', width: '100%' }}>
+          <div style={{ position: 'relative', width: '100%' }}>
             {loading && (
               <div
                 style={{
@@ -736,7 +736,8 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
                 <span style={{ color: '#e0e0e0' }}>加载K线数据...</span>
               </div>
             )}
-            <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
+            {/* 使用 aspect-ratio 保持图表宽高比，K线图推荐 2.5:1 */}
+            <div ref={chartRef} style={{ width: '100%', aspectRatio: isMobile ? '1.8 / 1' : '2.5 / 1', minHeight: isMobile ? '280px' : '400px' }} />
           </div>
         </div>
       </div>

src/components/StockChart/StockChartKLineModal.tsx

@@ -251,7 +251,8 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
           id={`kline-chart-${stock.stock_code}`}
           style={{
             width: '100%',
-            height: `${CHART_HEIGHTS.main}px`,
+            minHeight: '300px',
+            height: 'min(400px, 60vh)',
             opacity: showLoading ? 0.5 : 1,
             transition: 'opacity 0.3s',
           }}

src/components/StockChart/TimelineChartModal.tsx

@@ -470,12 +470,13 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
     <Modal isOpen={isOpen} onClose={onClose} size={size} isCentered>
       <ModalOverlay bg="blackAlpha.700" />
       <ModalContent
-        maxW={isMobile ? '96vw' : '90vw'}
+        w={isMobile ? '96vw' : '90vw'}
-        maxH="85vh"
+        maxW={isMobile ? '96vw' : '1400px'}
         borderRadius={isMobile ? '12px' : '8px'}
         bg="#1a1a1a"
         border="2px solid #ffd700"
         boxShadow="0 0 30px rgba(255, 215, 0, 0.5)"
+        overflow="visible"
       >
         <ModalHeader pb={isMobile ? 2 : 3} borderBottomWidth="1px" borderColor="#404040">
           <VStack align="flex-start" spacing={0}>
@@ -498,7 +499,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
             </Alert>
           )}
 
-          <Box position="relative" h={isMobile ? '400px' : '600px'} w="100%">
+          <Box position="relative" w="100%">
             {loading && (
               <Flex
                 position="absolute"
@@ -517,7 +518,15 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
                 </VStack>
               </Flex>
             )}
-            <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
+            {/* 使用 aspect-ratio 保持图表宽高比，与日K线保持一致 */}
+            <Box
+              ref={chartRef}
+              w="100%"
+              sx={{
+                aspectRatio: isMobile ? '1.8 / 1' : '2.5 / 1',
+              }}
+              minH={isMobile ? '280px' : '400px'}
+            />
           </Box>
         </ModalBody>
       </ModalContent>