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:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user