update pay ui

app.py

@@ -5601,14 +5601,13 @@ def get_historical_event_stocks(event_id):
             if event_trading_date:
                 try:
                     # 查询股票在事件对应交易日的数据
-                    # ea_trade 表的 SECCODE 不带后缀，需要去掉 .SH/.SZ 后缀
+                    # ea_trade 表字段：F007N=最近成交价(收盘价), F010N=涨跌幅
-                    # F007N 是收盘价，F008N 是涨跌幅
                     base_stock_code = stock.stock_code.split('.')[0] if stock.stock_code else ''
                     # 日期格式转换为 YYYYMMDD
                     trade_date_str = event_trading_date.strftime('%Y%m%d') if hasattr(event_trading_date, 'strftime') else str(event_trading_date).replace('-', '')
                     with engine.connect() as conn:
                         query = text("""
-                                     SELECT F007N as close_price, F008N as change_pct
+                                     SELECT F007N as close_price, F010N as change_pct
                                      FROM ea_trade
                                      WHERE SECCODE = :stock_code
                                        AND TRADEDATE = :trading_date

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
+                                    <Tooltip label="点击查看日K线" hasArrow>
-                                        fontSize="lg"
+                                        <Button
-                                        fontWeight="bold"
+                                            size="sm"
-                                        color={getChangeColor(stock.event_day_change_pct)}
+                                            variant="ghost"
-                                    >
+                                            colorScheme={stock.event_day_change_pct > 0 ? 'red' : stock.event_day_change_pct < 0 ? 'green' : 'gray'}
-                                        {formatChange(stock.event_day_change_pct)}
+                                            onClick={() => handleOpenKLine(stock)}
-                                    </Text>
+                                            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}
+                />
+            )}
         </>
     );
 };