130 lines
3.8 KiB
JavaScript
130 lines
3.8 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js
|
||
// 事件头部信息区组件
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
Flex,
|
||
HStack,
|
||
Heading,
|
||
Text,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { ViewIcon } from '@chakra-ui/icons';
|
||
import moment from 'moment';
|
||
import StockChangeIndicators from '../../../../components/StockChangeIndicators';
|
||
import EventFollowButton from '../EventCard/EventFollowButton';
|
||
|
||
/**
|
||
* 事件头部信息区组件
|
||
* @param {Object} props
|
||
* @param {Object} props.event - 事件对象
|
||
* @param {Object} props.importance - 重要性配置对象（包含 level, color 等）
|
||
* @param {boolean} props.isFollowing - 是否已关注
|
||
* @param {number} props.followerCount - 关注数
|
||
* @param {Function} props.onToggleFollow - 切换关注回调
|
||
*/
|
||
const EventHeaderInfo = ({ event, importance, isFollowing, followerCount, onToggleFollow }) => {
|
||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
||
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
||
|
||
// 获取重要性文本
|
||
const getImportanceText = () => {
|
||
const levelMap = {
|
||
'S': '极高',
|
||
'A': '高',
|
||
'B': '中',
|
||
'C': '低'
|
||
};
|
||
return levelMap[importance.level] || '中';
|
||
};
|
||
|
||
// 格式化涨跌幅数字
|
||
const formatChange = (value) => {
|
||
if (value === null || value === undefined) return '--';
|
||
const prefix = value > 0 ? '+' : '';
|
||
return `${prefix}${value.toFixed(2)}%`;
|
||
};
|
||
|
||
return (
|
||
<Box bg={sectionBg} p={3} borderRadius="md" position="relative">
|
||
{/* 粉色圆角标签（左上角绝对定位） */}
|
||
{event.related_avg_chg !== null && event.related_avg_chg !== undefined && (
|
||
<Box
|
||
position="absolute"
|
||
top="-8px"
|
||
left="-8px"
|
||
bg="pink.500"
|
||
color="white"
|
||
px={3}
|
||
py={1}
|
||
borderRadius="full"
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
boxShadow="md"
|
||
zIndex={1}
|
||
>
|
||
{formatChange(event.related_avg_chg)}
|
||
</Box>
|
||
)}
|
||
|
||
{/* 第一行：标题 + 关注按钮 */}
|
||
<Flex align="center" justify="space-between" mb={3} gap={4}>
|
||
{/* 标题 */}
|
||
<Heading size="md" color={headingColor} flex={1}>
|
||
{event.title}
|
||
</Heading>
|
||
|
||
{/* 关注按钮 */}
|
||
<EventFollowButton
|
||
isFollowing={isFollowing}
|
||
followerCount={followerCount}
|
||
onToggle={onToggleFollow}
|
||
size="sm"
|
||
showCount={true}
|
||
/>
|
||
</Flex>
|
||
{/* 第二行：浏览数 + 日期 */}
|
||
<Flex align="left" mb={3} gap={4}>
|
||
{/* 浏览数 */}
|
||
<HStack spacing={1}>
|
||
<ViewIcon color="gray.400" boxSize={4} />
|
||
<Text fontSize="sm" color="gray.400" whiteSpace="nowrap">
|
||
{(event.view_count || 0).toLocaleString()}次浏览
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 日期 */}
|
||
<Text fontSize="sm" color="red.500" fontWeight="medium" whiteSpace="nowrap">
|
||
{moment(event.created_at).format('YYYY年MM月DD日')}
|
||
</Text>
|
||
</Flex>
|
||
|
||
{/* 第三行：涨跌幅指标 + 重要性文本 */}
|
||
<HStack spacing={3} align="center">
|
||
<Box maxW="500px">
|
||
<StockChangeIndicators
|
||
avgChange={event.related_avg_chg}
|
||
maxChange={event.related_max_chg}
|
||
weekChange={event.related_week_chg}
|
||
/>
|
||
</Box>
|
||
|
||
{/* 重要性文本 */}
|
||
<Box
|
||
bg="orange.50"
|
||
px={2}
|
||
py={1}
|
||
borderRadius="md"
|
||
>
|
||
<Text fontSize="sm" color="orange.800" whiteSpace="nowrap" fontWeight="medium">
|
||
重要性：{getImportanceText()}
|
||
</Text>
|
||
</Box>
|
||
</HStack>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default EventHeaderInfo;
|