15f5c445c5
## 目录重构 - DynamicNewsCard/ → DynamicNews/（含 layouts/, hooks/ 子目录） - EventCard 原子组件 → EventCard/atoms/ - EventDetailModal 独立目录化 - HotEvents 独立目录化（含 CSS） - SearchFilters 独立目录化（CompactSearchBox, TradingTimeFilter） ## 导入路径修复 - EventCard/*.js: 统一使用 @constants/, @utils/, @components/ 别名 - atoms/*.js: 修复移动后的相对路径问题 - DynamicNewsCard.js: 更新 contexts, store, constants 导入 - EventHeaderInfo.js, CompactMetaBar.js: 修复 EventFollowButton 导入 ## Mock Handler 添加 - /api/events/:eventId/expectation-score - 事件超预期得分 - /api/index/:indexCode/realtime - 指数实时行情 ## 警告修复 - CitationMark.js: overlayInnerStyle → styles (Antd 5.x) - CitedContent.js: 移除不支持的 jsx 属性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
// src/views/Community/components/EventCard/EventHeader.js
|
||
import React from 'react';
|
||
import { Box, Text, Heading, Tooltip, HStack } from '@chakra-ui/react';
|
||
import EventImportanceBadge from './EventImportanceBadge';
|
||
import EventPriceDisplay from './EventPriceDisplay';
|
||
|
||
/**
|
||
* 事件标题头部组件
|
||
* @param {Object} props
|
||
* @param {string} props.title - 事件标题
|
||
* @param {string} props.importance - 重要性等级
|
||
* @param {Function} props.onTitleClick - 标题点击事件
|
||
* @param {string} props.linkColor - 链接颜色
|
||
* @param {boolean} props.compact - 是否紧凑模式（默认 false）
|
||
* @param {number|null} props.avgChange - 平均涨跌幅（紧凑模式下使用）
|
||
* @param {string} props.size - 标题大小（'sm' | 'md' | 'lg'，默认 'md'）
|
||
*/
|
||
const EventHeader = ({
|
||
title,
|
||
importance,
|
||
onTitleClick,
|
||
linkColor,
|
||
compact = false,
|
||
avgChange = null,
|
||
size = 'md'
|
||
}) => {
|
||
const handleClick = (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onTitleClick?.(e);
|
||
};
|
||
|
||
// 紧凑模式：标题 + 标签内联
|
||
if (compact) {
|
||
return (
|
||
<Box flex="1" minW="150px">
|
||
<Text
|
||
fontSize={size}
|
||
fontWeight="bold"
|
||
color={linkColor}
|
||
lineHeight="1.4"
|
||
noOfLines={2}
|
||
display="inline"
|
||
_hover={{ textDecoration: 'underline', color: 'blue.500' }}
|
||
onClick={handleClick}
|
||
cursor="pointer"
|
||
>
|
||
{title}
|
||
</Text>
|
||
{' '}
|
||
{/* 重要性标签 - 内联 */}
|
||
<EventImportanceBadge
|
||
importance={importance}
|
||
showTooltip={false}
|
||
size="xs"
|
||
/>
|
||
{' '}
|
||
{/* 价格标签 - 内联 */}
|
||
{avgChange != null && (
|
||
<EventPriceDisplay
|
||
avgChange={avgChange}
|
||
compact={true}
|
||
inline={true}
|
||
/>
|
||
)}
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
// 详细模式：标题 + 提示框的重要性标签
|
||
return (
|
||
<HStack spacing={2} flex="1" align="center">
|
||
<Tooltip
|
||
label="点击查看事件详情"
|
||
placement="top"
|
||
hasArrow
|
||
openDelay={500}
|
||
>
|
||
<Heading
|
||
size={size}
|
||
color={linkColor}
|
||
_hover={{ textDecoration: 'underline', color: 'blue.500' }}
|
||
onClick={handleClick}
|
||
cursor="pointer"
|
||
>
|
||
{title}
|
||
</Heading>
|
||
</Tooltip>
|
||
|
||
<EventImportanceBadge
|
||
importance={importance}
|
||
showTooltip={true}
|
||
showIcon={true}
|
||
size="xs"
|
||
/>
|
||
</HStack>
|
||
);
|
||
};
|
||
|
||
export default EventHeader;
|