feat: 增强历史事件对比卡片交互,支持点击跳转事件详情

功能新增:
- 点击事件卡片跳转到事件详情页(/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>
This commit is contained in:
zdl
2025-11-03 13:08:07 +08:00
parent daf7372bab
commit 784202025c

View File

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