diff --git a/src/views/Community/components/EventCard/atoms/EventFollowButton.js b/src/views/Community/components/EventCard/atoms/EventFollowButton.js index b502d6ef..e9410906 100644 --- a/src/views/Community/components/EventCard/atoms/EventFollowButton.js +++ b/src/views/Community/components/EventCard/atoms/EventFollowButton.js @@ -1,6 +1,6 @@ // src/views/Community/components/EventCard/atoms/EventFollowButton.js import React from 'react'; -import { IconButton, Box, HStack, Text, Tooltip } from '@chakra-ui/react'; +import { IconButton, Box, HStack, VStack, Text, Tooltip } from '@chakra-ui/react'; import { Star } from 'lucide-react'; /** @@ -12,6 +12,7 @@ import { Star } from 'lucide-react'; * @param {string} props.size - 按钮尺寸('xs' | 'sm' | 'md',默认 'sm') * @param {boolean} props.showCount - 是否显示关注数(默认 true) * @param {string} props.variant - 样式变体('default' | 'minimal',默认 'default') + * @param {string} props.layout - 布局方向('horizontal' | 'vertical',默认 'horizontal') */ const EventFollowButton = ({ isFollowing, @@ -19,7 +20,8 @@ const EventFollowButton = ({ onToggle, size = 'sm', showCount = true, - variant = 'default' + variant = 'default', + layout = 'horizontal' }) => { const iconSize = size === 'xs' ? '16px' : size === 'sm' ? '18px' : '22px'; @@ -30,34 +32,38 @@ const EventFollowButton = ({ // 最小样式 - 用于毛玻璃容器内 if (variant === 'minimal') { + const Stack = layout === 'vertical' ? VStack : HStack; + const isVertical = layout === 'vertical'; + return ( - {showCount && ( {followerCount || 0} )} - + ); }