From 784202025ceb02f7972728cbd82ed3a6b9b4f64c Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 3 Nov 2025 13:08:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=AF=B9=E6=AF=94=E5=8D=A1=E7=89=87=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=EF=BC=8C=E6=94=AF=E6=8C=81=E7=82=B9=E5=87=BB=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E4=BA=8B=E4=BB=B6=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

功能新增：
- 点击事件卡片跳转到事件详情页（/event-detail/:eventId）
- 点击事件标题跳转到事件详情页（带下划线 hover 效果）
- "相关股票"按钮独立触发弹窗，不影响卡片跳转

组件修改：
- HistoricalEvents.js:
  * 导入 useNavigate hook 用于路由跳转
  * 添加 handleCardClick 函数处理跳转逻辑
  * 事件卡片添加 cursor="pointer" 和 onClick 事件
  * 优化卡片 hover 效果（阴影、边框色、上浮动画）
  * 标题添加独立的点击事件和下划线 hover 效果
  * "相关股票"按钮添加 stopPropagation 阻止事件冒泡

交互优化：
- 卡片 hover: boxShadow 从 md → lg，边框从 blue.300 → blue.400
- 卡片 hover: 添加 translateY(-2px) 上浮效果
- 标题 hover: 添加下划线提示可点击
- 光标样式: 卡片和标题都显示 pointer

事件冒泡控制：
- 标题点击: stopPropagation 后再触发跳转（保持一致性）
- 相关股票按钮: stopPropagation 防止触发卡片跳转
- 确保各个点击区域互不干扰

用户体验提升：
- 多种点击方式提供便利性（整个卡片、标题）
- 更明显的视觉反馈（hover 效果、光标变化）
- 精确的交互控制，避免误触发

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/HistoricalEvents.js            | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/views/EventDetail/components/HistoricalEvents.js b/src/views/EventDetail/components/HistoricalEvents.js
index b69df2d6..24a6ee89 100644
--- a/src/views/EventDetail/components/HistoricalEvents.js
+++ b/src/views/EventDetail/components/HistoricalEvents.js
@@ -1,5 +1,6 @@
 // src/views/EventDetail/components/HistoricalEvents.js
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
     Box,
     VStack,
@@ -37,6 +38,8 @@ const HistoricalEvents = ({
     loading = false,
     error = null
 }) => {
+    const navigate = useNavigate();
+
     // 状态管理
     const [selectedEventForStocks, setSelectedEventForStocks] = useState(null);
     const [stocksModalOpen, setStocksModalOpen] = useState(false);
@@ -110,6 +113,11 @@ const HistoricalEvents = ({
         setSelectedEventForStocks(null);
     };
 
+    // 处理卡片点击跳转到事件详情页
+    const handleCardClick = (event) => {
+        navigate(`/event-detail/${event.id}`);
+    };
+
     // 获取重要性颜色
     const getImportanceColor = (importance) => {
         if (importance >= 4) return 'red';
@@ -229,9 +237,12 @@ const HistoricalEvents = ({
                             borderColor={borderColor}
                             borderRadius="md"
                             p={4}
+                            cursor="pointer"
+                            onClick={() => handleCardClick(event)}
                             _hover={{
-                                boxShadow: 'md',
-                                borderColor: 'blue.300',
+                                boxShadow: 'lg',
+                                borderColor: 'blue.400',
+                                transform: 'translateY(-2px)',
                             }}
                             transition="all 0.2s"
                         >
@@ -243,6 +254,12 @@ const HistoricalEvents = ({
                                     color={useColorModeValue('blue.600', 'blue.400')}
                                     noOfLines={2}
                                     lineHeight="1.4"
+                                    cursor="pointer"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleCardClick(event);
+                                    }}
+                                    _hover={{ textDecoration: 'underline' }}
                                 >
                                     {event.title || '未命名事件'}
                                 </Text>
@@ -281,7 +298,10 @@ const HistoricalEvents = ({
                                 <Button
                                     size="sm"
                                     leftIcon={<Icon as={FaChartLine} />}
-                                    onClick={() => handleViewStocks(event)}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleViewStocks(event);
+                                    }}
                                     colorScheme="blue"
                                     variant="outline"
                                     width="full"