a39d57f9de
│ │ - EventImportanceBadge: 重要性等级标签（100行） │ │ │ │ - EventStats: 统计信息组件（60行） │ │ │ │ - EventFollowButton: 关注按钮（40行） │ │ │ │ - EventPriceDisplay: 价格变动显示（130行） │ │ │ │ - EventDescription: 描述文本组件（60行）
59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
// src/views/Community/components/EventCard/EventStats.js
|
||
import React from 'react';
|
||
import { HStack, Text, Tooltip } from '@chakra-ui/react';
|
||
import { ViewIcon, ChatIcon, StarIcon } from '@chakra-ui/icons';
|
||
|
||
/**
|
||
* 事件统计信息组件（浏览量、帖子数、关注数）
|
||
* @param {Object} props
|
||
* @param {number} props.viewCount - 浏览量
|
||
* @param {number} props.postCount - 帖子数
|
||
* @param {number} props.followerCount - 关注数
|
||
* @param {string} props.size - 尺寸（'sm' | 'md'，默认 'sm'）
|
||
* @param {number} props.spacing - 间距（默认 3）
|
||
* @param {Object} props.display - 响应式显示控制（默认 { base: 'none', md: 'flex' }）
|
||
* @param {string} props.mutedColor - 文字颜色（可选）
|
||
*/
|
||
const EventStats = ({
|
||
viewCount = 0,
|
||
postCount = 0,
|
||
followerCount = 0,
|
||
size = 'sm',
|
||
spacing = 3,
|
||
display = { base: 'none', md: 'flex' },
|
||
mutedColor
|
||
}) => {
|
||
const fontSize = size === 'sm' ? 'xs' : 'sm';
|
||
const iconSize = size === 'sm' ? '12px' : '16px';
|
||
|
||
return (
|
||
<HStack spacing={spacing} display={display} color={mutedColor}>
|
||
{/* 浏览量 */}
|
||
<Tooltip label="浏览量" placement="top">
|
||
<HStack spacing={1}>
|
||
<ViewIcon boxSize={iconSize} />
|
||
<Text fontSize={fontSize}>{viewCount}</Text>
|
||
</HStack>
|
||
</Tooltip>
|
||
|
||
{/* 帖子数 */}
|
||
<Tooltip label="帖子数" placement="top">
|
||
<HStack spacing={1}>
|
||
<ChatIcon boxSize={iconSize} />
|
||
<Text fontSize={fontSize}>{postCount}</Text>
|
||
</HStack>
|
||
</Tooltip>
|
||
|
||
{/* 关注数 */}
|
||
<Tooltip label="关注数" placement="top">
|
||
<HStack spacing={1}>
|
||
<StarIcon boxSize={iconSize} />
|
||
<Text fontSize={fontSize}>{followerCount}</Text>
|
||
</HStack>
|
||
</Tooltip>
|
||
</HStack>
|
||
);
|
||
};
|
||
|
||
export default EventStats;
|