update pay function

src/components/StockChart/KLineChartModal.tsx

@@ -0,0 +1,427 @@
+// src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  VStack,
+  HStack,
+  Text,
+  Box,
+  Flex,
+  CircularProgress,
+  Alert,
+  AlertIcon,
+} from '@chakra-ui/react';
+import * as echarts from 'echarts';
+import { stockService } from '@services/eventService';
+import { logger } from '@utils/logger';
+
+/**
+ * 股票信息
+ */
+interface StockInfo {
+  stock_code: string;
+  stock_name?: string;
+}
+
+/**
+ * KLineChartModal 组件 Props
+ */
+export interface KLineChartModalProps {
+  /** 模态框是否打开 */
+  isOpen: boolean;
+  /** 关闭回调 */
+  onClose: () => void;
+  /** 股票信息 */
+  stock: StockInfo | null;
+  /** 事件时间 */
+  eventTime?: string | null;
+  /** 模态框大小 */
+  size?: string;
+}
+
+/**
+ * K线数据点
+ */
+interface KLineDataPoint {
+  time: string;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume: number;
+}
+
+const KLineChartModal: React.FC<KLineChartModalProps> = ({
+  isOpen,
+  onClose,
+  stock,
+  eventTime,
+  size = '5xl',
+}) => {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<KLineDataPoint[]>([]);
+
+  // 加载K线数据
+  const loadData = async () => {
+    if (!stock?.stock_code) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      logger.debug('KLineChartModal', 'loadData', '开始加载K线数据', {
+        stockCode: stock.stock_code,
+        eventTime,
+      });
+
+      const response = await stockService.getKlineData(
+        stock.stock_code,
+        'daily',
+        eventTime || undefined
+      );
+
+      if (!response || !response.data || response.data.length === 0) {
+        throw new Error('暂无K线数据');
+      }
+
+      setData(response.data);
+      logger.info('KLineChartModal', 'loadData', 'K线数据加载成功', {
+        dataCount: response.data.length,
+      });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : '数据加载失败';
+      logger.error('KLineChartModal', 'loadData', err as Error);
+      setError(errorMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 初始化图表
+  useEffect(() => {
+    if (!chartRef.current || !isOpen) return;
+
+    // 创建图表实例
+    chartInstance.current = echarts.init(chartRef.current, 'dark');
+
+    // 监听窗口大小变化
+    const handleResize = () => {
+      chartInstance.current?.resize();
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      chartInstance.current?.dispose();
+      chartInstance.current = null;
+    };
+  }, [isOpen]);
+
+  // 更新图表数据
+  useEffect(() => {
+    if (!chartInstance.current || data.length === 0) return;
+
+    const dates = data.map((d) => d.time);
+    const klineData = data.map((d) => [d.open, d.close, d.low, d.high]);
+    const volumes = data.map((d) => d.volume);
+
+    // 计算成交量柱子颜色（涨为红，跌为绿）
+    const volumeColors = data.map((d) =>
+      d.close >= d.open ? '#ef5350' : '#26a69a'
+    );
+
+    // 图表配置
+    const option: echarts.EChartsOption = {
+      backgroundColor: '#1a1a1a',
+      title: {
+        text: `${stock?.stock_name || stock?.stock_code} - 日K线`,
+        left: 'center',
+        top: 10,
+        textStyle: {
+          color: '#e0e0e0',
+          fontSize: 18,
+          fontWeight: 'bold',
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(30, 30, 30, 0.95)',
+        borderColor: '#404040',
+        borderWidth: 1,
+        textStyle: {
+          color: '#e0e0e0',
+        },
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999',
+          },
+        },
+        formatter: (params: any) => {
+          const dataIndex = params[0]?.dataIndex;
+          if (dataIndex === undefined) return '';
+
+          const item = data[dataIndex];
+          const change = item.close - item.open;
+          const changePercent = (change / item.open) * 100;
+          const changeColor = change >= 0 ? '#ef5350' : '#26a69a';
+          const changeSign = change >= 0 ? '+' : '';
+
+          return `
+            <div style="padding: 8px;">
+              <div style="font-weight: bold; margin-bottom: 8px;">${item.time}</div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>开盘:</span>
+                <span style="margin-left: 20px;">${item.open.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>收盘:</span>
+                <span style="color: ${changeColor}; font-weight: bold; margin-left: 20px;">${item.close.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>最高:</span>
+                <span style="margin-left: 20px;">${item.high.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>最低:</span>
+                <span style="margin-left: 20px;">${item.low.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>涨跌额:</span>
+                <span style="color: ${changeColor}; margin-left: 20px;">${changeSign}${change.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>涨跌幅:</span>
+                <span style="color: ${changeColor}; margin-left: 20px;">${changeSign}${changePercent.toFixed(2)}%</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span>成交量:</span>
+                <span style="margin-left: 20px;">${(item.volume / 100).toFixed(0)}手</span>
+              </div>
+            </div>
+          `;
+        },
+      },
+      grid: [
+        {
+          left: '5%',
+          right: '5%',
+          top: '15%',
+          height: '55%',
+        },
+        {
+          left: '5%',
+          right: '5%',
+          top: '75%',
+          height: '15%',
+        },
+      ],
+      xAxis: [
+        {
+          type: 'category',
+          data: dates,
+          gridIndex: 0,
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            interval: Math.floor(dates.length / 8),
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        {
+          type: 'category',
+          data: dates,
+          gridIndex: 1,
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            interval: Math.floor(dates.length / 8),
+          },
+        },
+      ],
+      yAxis: [
+        {
+          scale: true,
+          gridIndex: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#2a2a2a',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            formatter: (value: number) => value.toFixed(2),
+          },
+        },
+        {
+          scale: true,
+          gridIndex: 1,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            formatter: (value: number) => {
+              if (value >= 100000000) {
+                return (value / 100000000).toFixed(1) + '亿';
+              } else if (value >= 10000) {
+                return (value / 10000).toFixed(1) + '万';
+              }
+              return value.toFixed(0);
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: 'K线',
+          type: 'candlestick',
+          data: klineData,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            color: '#ef5350', // 涨
+            color0: '#26a69a', // 跌
+            borderColor: '#ef5350',
+            borderColor0: '#26a69a',
+          },
+        },
+        {
+          name: '成交量',
+          type: 'bar',
+          data: volumes,
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: (params: any) => {
+              return volumeColors[params.dataIndex];
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: 'inside',
+          xAxisIndex: [0, 1],
+          start: 50,
+          end: 100,
+        },
+        {
+          type: 'slider',
+          xAxisIndex: [0, 1],
+          start: 50,
+          end: 100,
+          bottom: '2%',
+          height: 20,
+          textStyle: {
+            color: '#999',
+          },
+          borderColor: '#404040',
+          fillerColor: 'rgba(33, 150, 243, 0.2)',
+          handleStyle: {
+            color: '#2196f3',
+          },
+        },
+      ],
+    };
+
+    chartInstance.current.setOption(option);
+  }, [data, stock]);
+
+  // 加载数据
+  useEffect(() => {
+    if (isOpen) {
+      loadData();
+    }
+  }, [isOpen, stock?.stock_code, eventTime]);
+
+  if (!stock) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size={size}>
+      <ModalOverlay bg="blackAlpha.700" />
+      <ModalContent
+        maxW="90vw"
+        maxH="85vh"
+        bg="#1a1a1a"
+        borderColor="#404040"
+        borderWidth="1px"
+      >
+        <ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040">
+          <VStack align="flex-start" spacing={1}>
+            <HStack>
+              <Text fontSize="lg" fontWeight="bold" color="#e0e0e0">
+                {stock.stock_name || stock.stock_code} ({stock.stock_code})
+              </Text>
+            </HStack>
+            <Text fontSize="sm" color="#999">
+              日K线图
+            </Text>
+          </VStack>
+        </ModalHeader>
+        <ModalCloseButton color="#999" _hover={{ color: '#e0e0e0' }} />
+        <ModalBody p={4}>
+          {error && (
+            <Alert status="error" bg="#2a1a1a" borderColor="#ef5350" mb={4}>
+              <AlertIcon color="#ef5350" />
+              <Text color="#e0e0e0">{error}</Text>
+            </Alert>
+          )}
+
+          <Box position="relative" h="650px" w="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"
+              >
+                <VStack spacing={4}>
+                  <CircularProgress isIndeterminate color="blue.400" />
+                  <Text color="#e0e0e0">加载K线数据...</Text>
+                </VStack>
+              </Flex>
+            )}
+            <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
+          </Box>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default KLineChartModal;

src/components/StockChart/TimelineChartModal.tsx

@@ -0,0 +1,419 @@
+// src/components/StockChart/TimelineChartModal.tsx - 分时图弹窗组件
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  VStack,
+  HStack,
+  Text,
+  Box,
+  Flex,
+  CircularProgress,
+  Alert,
+  AlertIcon,
+} from '@chakra-ui/react';
+import * as echarts from 'echarts';
+import { stockService } from '@services/eventService';
+import { logger } from '@utils/logger';
+
+/**
+ * 股票信息
+ */
+interface StockInfo {
+  stock_code: string;
+  stock_name?: string;
+}
+
+/**
+ * TimelineChartModal 组件 Props
+ */
+export interface TimelineChartModalProps {
+  /** 模态框是否打开 */
+  isOpen: boolean;
+  /** 关闭回调 */
+  onClose: () => void;
+  /** 股票信息 */
+  stock: StockInfo | null;
+  /** 事件时间 */
+  eventTime?: string | null;
+  /** 模态框大小 */
+  size?: string;
+}
+
+/**
+ * 分时图数据点
+ */
+interface TimelineDataPoint {
+  time: string;
+  price: number;
+  avg_price: number;
+  volume: number;
+  change_percent: number;
+}
+
+const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
+  isOpen,
+  onClose,
+  stock,
+  eventTime,
+  size = '5xl',
+}) => {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<TimelineDataPoint[]>([]);
+
+  // 加载分时图数据
+  const loadData = async () => {
+    if (!stock?.stock_code) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      logger.debug('TimelineChartModal', 'loadData', '开始加载分时图数据', {
+        stockCode: stock.stock_code,
+        eventTime,
+      });
+
+      const response = await stockService.getKlineData(
+        stock.stock_code,
+        'minute',
+        eventTime || undefined
+      );
+
+      if (!response || !response.data || response.data.length === 0) {
+        throw new Error('暂无分时数据');
+      }
+
+      setData(response.data);
+      logger.info('TimelineChartModal', 'loadData', '分时图数据加载成功', {
+        dataCount: response.data.length,
+      });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : '数据加载失败';
+      logger.error('TimelineChartModal', 'loadData', err as Error);
+      setError(errorMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 初始化图表
+  useEffect(() => {
+    if (!chartRef.current || !isOpen) return;
+
+    // 创建图表实例
+    chartInstance.current = echarts.init(chartRef.current, 'dark');
+
+    // 监听窗口大小变化
+    const handleResize = () => {
+      chartInstance.current?.resize();
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      chartInstance.current?.dispose();
+      chartInstance.current = null;
+    };
+  }, [isOpen]);
+
+  // 更新图表数据
+  useEffect(() => {
+    if (!chartInstance.current || data.length === 0) return;
+
+    const times = data.map((d) => d.time);
+    const prices = data.map((d) => d.price);
+    const avgPrices = data.map((d) => d.avg_price);
+    const volumes = data.map((d) => d.volume);
+
+    // 计算涨跌颜色
+    const basePrice = data[0]?.price || 0;
+    const volumeColors = data.map((d) =>
+      d.price >= basePrice ? '#ef5350' : '#26a69a'
+    );
+
+    // 图表配置
+    const option: echarts.EChartsOption = {
+      backgroundColor: '#1a1a1a',
+      title: {
+        text: `${stock?.stock_name || stock?.stock_code} - 分时图`,
+        left: 'center',
+        top: 10,
+        textStyle: {
+          color: '#e0e0e0',
+          fontSize: 18,
+          fontWeight: 'bold',
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(30, 30, 30, 0.95)',
+        borderColor: '#404040',
+        borderWidth: 1,
+        textStyle: {
+          color: '#e0e0e0',
+        },
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999',
+          },
+        },
+        formatter: (params: any) => {
+          const dataIndex = params[0]?.dataIndex;
+          if (dataIndex === undefined) return '';
+
+          const item = data[dataIndex];
+          const changeColor = item.change_percent >= 0 ? '#ef5350' : '#26a69a';
+          const changeSign = item.change_percent >= 0 ? '+' : '';
+
+          return `
+            <div style="padding: 8px;">
+              <div style="font-weight: bold; margin-bottom: 8px;">${item.time}</div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>价格:</span>
+                <span style="color: ${changeColor}; font-weight: bold; margin-left: 20px;">${item.price.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>均价:</span>
+                <span style="color: #ffa726; margin-left: 20px;">${item.avg_price.toFixed(2)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <span>涨跌幅:</span>
+                <span style="color: ${changeColor}; margin-left: 20px;">${changeSign}${item.change_percent.toFixed(2)}%</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span>成交量:</span>
+                <span style="margin-left: 20px;">${(item.volume / 100).toFixed(0)}手</span>
+              </div>
+            </div>
+          `;
+        },
+      },
+      grid: [
+        {
+          left: '5%',
+          right: '5%',
+          top: '15%',
+          height: '55%',
+        },
+        {
+          left: '5%',
+          right: '5%',
+          top: '75%',
+          height: '15%',
+        },
+      ],
+      xAxis: [
+        {
+          type: 'category',
+          data: times,
+          gridIndex: 0,
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            interval: Math.floor(times.length / 6),
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#2a2a2a',
+            },
+          },
+        },
+        {
+          type: 'category',
+          data: times,
+          gridIndex: 1,
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            interval: Math.floor(times.length / 6),
+          },
+        },
+      ],
+      yAxis: [
+        {
+          scale: true,
+          gridIndex: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#2a2a2a',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            formatter: (value: number) => value.toFixed(2),
+          },
+        },
+        {
+          scale: true,
+          gridIndex: 1,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#404040',
+            },
+          },
+          axisLabel: {
+            color: '#999',
+            formatter: (value: number) => {
+              if (value >= 10000) {
+                return (value / 10000).toFixed(1) + '万';
+              }
+              return value.toFixed(0);
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: '价格',
+          type: 'line',
+          data: prices,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          smooth: true,
+          symbol: 'none',
+          lineStyle: {
+            color: '#2196f3',
+            width: 2,
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(33, 150, 243, 0.3)' },
+              { offset: 1, color: 'rgba(33, 150, 243, 0.05)' },
+            ]),
+          },
+        },
+        {
+          name: '均价',
+          type: 'line',
+          data: avgPrices,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          smooth: true,
+          symbol: 'none',
+          lineStyle: {
+            color: '#ffa726',
+            width: 1.5,
+            type: 'dashed',
+          },
+        },
+        {
+          name: '成交量',
+          type: 'bar',
+          data: volumes,
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: (params: any) => {
+              return volumeColors[params.dataIndex];
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: 'inside',
+          xAxisIndex: [0, 1],
+          start: 0,
+          end: 100,
+        },
+      ],
+    };
+
+    chartInstance.current.setOption(option);
+  }, [data, stock]);
+
+  // 加载数据
+  useEffect(() => {
+    if (isOpen) {
+      loadData();
+    }
+  }, [isOpen, stock?.stock_code, eventTime]);
+
+  if (!stock) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size={size}>
+      <ModalOverlay bg="blackAlpha.700" />
+      <ModalContent
+        maxW="90vw"
+        maxH="85vh"
+        bg="#1a1a1a"
+        borderColor="#404040"
+        borderWidth="1px"
+      >
+        <ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040">
+          <VStack align="flex-start" spacing={1}>
+            <HStack>
+              <Text fontSize="lg" fontWeight="bold" color="#e0e0e0">
+                {stock.stock_name || stock.stock_code} ({stock.stock_code})
+              </Text>
+            </HStack>
+            <Text fontSize="sm" color="#999">
+              分时走势图
+            </Text>
+          </VStack>
+        </ModalHeader>
+        <ModalCloseButton color="#999" _hover={{ color: '#e0e0e0' }} />
+        <ModalBody p={4}>
+          {error && (
+            <Alert status="error" bg="#2a1a1a" borderColor="#ef5350" mb={4}>
+              <AlertIcon color="#ef5350" />
+              <Text color="#e0e0e0">{error}</Text>
+            </Alert>
+          )}
+
+          <Box position="relative" h="600px" w="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"
+              >
+                <VStack spacing={4}>
+                  <CircularProgress isIndeterminate color="blue.400" />
+                  <Text color="#e0e0e0">加载分时数据...</Text>
+                </VStack>
+              </Flex>
+            )}
+            <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
+          </Box>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default TimelineChartModal;

src/views/Community/components/DynamicNewsDetail/StockListItem.js

@@ -18,7 +18,8 @@ import {
 import { StarIcon } from '@chakra-ui/icons';
 import MiniTimelineChart from '../StockDetailPanel/components/MiniTimelineChart';
 import MiniKLineChart from './MiniKLineChart';
-import StockChartModal from '../../../../components/StockChart/StockChartModal';
+import TimelineChartModal from '../../../../components/StockChart/TimelineChartModal';
+import KLineChartModal from '../../../../components/StockChart/KLineChartModal';
 import CitedContent from '../../../../components/Citation/CitedContent';
 import { getChangeColor } from '../../../../utils/colorUtils';
 import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
@@ -51,8 +52,8 @@ const StockListItem = ({
   const dividerColor = PROFESSIONAL_COLORS.border.default;
 
   const [isDescExpanded, setIsDescExpanded] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isTimelineModalOpen, setIsTimelineModalOpen] = useState(false);
-  const [modalChartType, setModalChartType] = useState('timeline'); // 跟踪用户点击的图表类型
+  const [isKLineModalOpen, setIsKLineModalOpen] = useState(false);
 
   const handleViewDetail = () => {
     const stockCode = stock.stock_code.split('.')[0];
@@ -204,8 +205,7 @@ const StockListItem = ({
             bg="rgba(59, 130, 246, 0.1)"
             onClick={(e) => {
               e.stopPropagation();
-              setModalChartType('timeline'); // 设置为分时图
+              setIsTimelineModalOpen(true);
-              setIsModalOpen(true);
             }}
             cursor="pointer"
             flexShrink={0}
@@ -247,8 +247,7 @@ const StockListItem = ({
             bg="rgba(168, 85, 247, 0.1)"
             onClick={(e) => {
               e.stopPropagation();
-              setModalChartType('daily'); // 设置为日K线
+              setIsKLineModalOpen(true);
-              setIsModalOpen(true);
             }}
             cursor="pointer"
             flexShrink={0}
@@ -380,15 +379,23 @@ const StockListItem = ({
       </HStack>
     </Box>
 
-    {/* 股票详情弹窗 - 未打开时不渲染 */}
+    {/* 分时图弹窗 */}
-    {isModalOpen && (
+    {isTimelineModalOpen && (
-      <StockChartModal
+      <TimelineChartModal
-        isOpen={isModalOpen}
+        isOpen={isTimelineModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        onClose={() => setIsTimelineModalOpen(false)}
+        stock={stock}
+        eventTime={eventTime}
+      />
+    )}
+
+    {/* K线图弹窗 */}
+    {isKLineModalOpen && (
+      <KLineChartModal
+        isOpen={isKLineModalOpen}
+        onClose={() => setIsKLineModalOpen(false)}
         stock={stock}
         eventTime={eventTime}
-        size="6xl"
-        initialChartType={modalChartType} // 传递用户点击的图表类型
       />
     )}
     </>