101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
|
||
// 精简信息栏组件（无头部模式下右上角显示）
|
||
|
||
import React from 'react';
|
||
import {
|
||
HStack,
|
||
Badge,
|
||
Text,
|
||
Icon,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { ViewIcon } from '@chakra-ui/icons';
|
||
import EventFollowButton from '../EventCard/EventFollowButton';
|
||
|
||
/**
|
||
* 精简信息栏组件
|
||
* 在无头部模式下，显示在 CardBody 右上角
|
||
* 包含：重要性徽章、浏览次数、关注按钮
|
||
*
|
||
* @param {Object} props
|
||
* @param {Object} props.event - 事件对象
|
||
* @param {Object} props.importance - 重要性配置对象（包含 level, icon 等）
|
||
* @param {boolean} props.isFollowing - 是否已关注
|
||
* @param {number} props.followerCount - 关注数
|
||
* @param {Function} props.onToggleFollow - 切换关注回调
|
||
*/
|
||
const CompactMetaBar = ({ event, importance, isFollowing, followerCount, onToggleFollow }) => {
|
||
const viewCountBg = useColorModeValue('white', 'gray.700');
|
||
const viewCountTextColor = useColorModeValue('gray.600', 'gray.300');
|
||
|
||
// 获取重要性文本
|
||
const getImportanceText = () => {
|
||
const levelMap = {
|
||
'S': '极高',
|
||
'A': '高',
|
||
'B': '中',
|
||
'C': '低'
|
||
};
|
||
return levelMap[importance.level] || '中';
|
||
};
|
||
|
||
return (
|
||
<HStack
|
||
position="absolute"
|
||
top={3}
|
||
right={3}
|
||
spacing={3}
|
||
zIndex={1}
|
||
>
|
||
{/* 重要性徽章 - 与 EventHeaderInfo 样式一致，尺寸略小 - H5 隐藏 */}
|
||
<Badge
|
||
px={3}
|
||
py={1.5}
|
||
borderRadius="full"
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
bgGradient={
|
||
importance.level === 'S' ? 'linear(to-r, red.500, red.700)' :
|
||
importance.level === 'A' ? 'linear(to-r, orange.500, orange.700)' :
|
||
importance.level === 'B' ? 'linear(to-r, blue.500, blue.700)' :
|
||
'linear(to-r, gray.500, gray.700)'
|
||
}
|
||
color="white"
|
||
boxShadow="lg"
|
||
display={{ base: 'none', lg: 'flex' }}
|
||
alignItems="center"
|
||
gap={1}
|
||
>
|
||
<Icon as={importance.icon} boxSize={4} />
|
||
<Text>重要性：{getImportanceText()}</Text>
|
||
</Badge>
|
||
|
||
{/* 浏览次数 - 添加容器背景以提高可读性 */}
|
||
<HStack
|
||
spacing={1}
|
||
bg={viewCountBg}
|
||
px={2}
|
||
py={1}
|
||
borderRadius="md"
|
||
boxShadow="sm"
|
||
>
|
||
<ViewIcon color="gray.400" boxSize={4} />
|
||
<Text fontSize="sm" color={viewCountTextColor} whiteSpace="nowrap">
|
||
{(event.view_count || 0).toLocaleString()}
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 关注按钮 */}
|
||
<EventFollowButton
|
||
isFollowing={isFollowing}
|
||
followerCount={followerCount}
|
||
onToggle={onToggleFollow}
|
||
size="sm"
|
||
showCount={true}
|
||
/>
|
||
</HStack>
|
||
);
|
||
};
|
||
|
||
export default CompactMetaBar;
|