diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js new file mode 100644 index 00000000..aaf10035 --- /dev/null +++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js @@ -0,0 +1,204 @@ +// src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js +// 横向布局的动态新闻事件卡片组件(时间在左,卡片在右) + +import React from 'react'; +import { + HStack, + Card, + CardBody, + VStack, + Box, + Text, + Popover, + PopoverTrigger, + PopoverContent, + PopoverBody, + PopoverArrow, + Portal, + useColorModeValue, +} from '@chakra-ui/react'; +import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels'; + +// 导入子组件 +import EventTimeline from './EventTimeline'; +import EventFollowButton from './EventFollowButton'; +import StockChangeIndicators from '../../../../components/StockChangeIndicators'; + +/** + * 横向布局的动态新闻事件卡片组件 + * @param {Object} props + * @param {Object} props.event - 事件对象 + * @param {number} props.index - 事件索引 + * @param {boolean} props.isFollowing - 是否已关注 + * @param {number} props.followerCount - 关注数 + * @param {boolean} props.isSelected - 是否被选中 + * @param {Function} props.onEventClick - 卡片点击事件 + * @param {Function} props.onTitleClick - 标题点击事件 + * @param {Function} props.onToggleFollow - 切换关注事件 + * @param {Object} props.timelineStyle - 时间轴样式配置 + * @param {string} props.borderColor - 边框颜色 + */ +const HorizontalDynamicNewsEventCard = ({ + event, + index, + isFollowing, + followerCount, + isSelected = false, + onEventClick, + onTitleClick, + onToggleFollow, + timelineStyle, + borderColor, +}) => { + const importance = getImportanceConfig(event.importance); + const cardBg = useColorModeValue('white', 'gray.800'); + const linkColor = useColorModeValue('blue.600', 'blue.400'); + + return ( + + {/* 左侧时间轴 */} + + + {/* 右侧事件卡片 */} + onEventClick?.(event)} + > + + {/* 左上角:重要性矩形角标(镂空边框样式) */} + + + + {importance.label} + + + + + + + + + 重要性等级说明 + + {getAllImportanceLevels().map(item => ( + + + {item.level} + + + + {item.label}: + + {item.description} + + + ))} + + + + + + + {/* 右上角:关注按钮 */} + + onToggleFollow?.(event.id)} + size="xs" + showCount={false} + /> + + + + {/* 标题 - 最多两行,添加上边距避免与角标重叠 */} + onTitleClick?.(e, event)} + mt={1} + paddingRight="10px" + > + + {event.title} + + + + {/* 第二行:涨跌幅数据 */} + + + + + + ); +}; + +export default HorizontalDynamicNewsEventCard;