update pay ui

src/views/EventDetail/components/HistoricalEvents.js

@@ -22,7 +22,9 @@ import {
     ModalBody,
     Link,
     Flex,
-    Collapse
+    Collapse,
+    IconButton,
+    Tooltip
 } from '@chakra-ui/react';
 import {
     FaChartLine,
@@ -34,6 +36,7 @@ import { stockService } from '@services/eventService';
 import { logger } from '@utils/logger';
 import CitedContent from '@components/Citation/CitedContent';
 import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
+import KLineChartModal from '@components/StockChart/KLineChartModal';
 
 const HistoricalEvents = ({
     events = [],
@@ -396,6 +399,8 @@ const HistoricalEvents = ({
 // 股票列表子组件（卡片式布局）
 const StocksList = ({ stocks, eventTradingDate }) => {
     const [expandedStocks, setExpandedStocks] = useState(new Set());
+    const [selectedStock, setSelectedStock] = useState(null);
+    const [isKLineModalOpen, setIsKLineModalOpen] = useState(false);
 
     const cardBg = useColorModeValue('white', 'gray.800');
     const borderColor = useColorModeValue('gray.200', 'gray.700');
@@ -403,6 +408,12 @@ const StocksList = ({ stocks, eventTradingDate }) => {
     const textSecondary = useColorModeValue('gray.600', 'gray.400');
     const nameColor = useColorModeValue('gray.700', 'gray.300');
 
+    // 打开K线弹窗
+    const handleOpenKLine = (stock) => {
+        setSelectedStock(stock);
+        setIsKLineModalOpen(true);
+    };
+
     // 处理关联描述字段的辅助函数
     const getRelationDesc = (relationDesc) => {
         // 处理空值
@@ -521,13 +532,24 @@ const StocksList = ({ stocks, eventTradingDate }) => {
                                         </Text>
                                     </VStack>
 
-                                    <Text
-                                        fontSize="lg"
-                                        fontWeight="bold"
-                                        color={getChangeColor(stock.event_day_change_pct)}
-                                    >
-                                        {formatChange(stock.event_day_change_pct)}
-                                    </Text>
+                                    <Tooltip label="点击查看日K线" hasArrow>
+                                        <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            colorScheme={stock.event_day_change_pct > 0 ? 'red' : stock.event_day_change_pct < 0 ? 'green' : 'gray'}
+                                            onClick={() => handleOpenKLine(stock)}
+                                            rightIcon={<Icon as={FaChartLine} boxSize={3} />}
+                                            px={2}
+                                        >
+                                            <Text
+                                                fontSize="lg"
+                                                fontWeight="bold"
+                                                color={getChangeColor(stock.event_day_change_pct)}
+                                            >
+                                                {formatChange(stock.event_day_change_pct)}
+                                            </Text>
+                                        </Button>
+                                    </Tooltip>
                                 </Flex>
 
                                 {/* 分隔线 */}
@@ -585,6 +607,16 @@ const StocksList = ({ stocks, eventTradingDate }) => {
                     );
                 })}
             </SimpleGrid>
+
+            {/* K线图弹窗 */}
+            {isKLineModalOpen && selectedStock && (
+                <KLineChartModal
+                    isOpen={isKLineModalOpen}
+                    onClose={() => setIsKLineModalOpen(false)}
+                    stock={selectedStock}
+                    eventTime={eventTradingDate}
+                />
+            )}
         </>
     );
 };