feat(EventFollowButton): 添加 layout prop 支持垂直布局

- 新增 layout prop: 'horizontal' | 'vertical'
- minimal variant 支持上图标下文字的垂直布局
- 垂直模式下调整图标大小和字体

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2026-01-09 16:11:28 +08:00
parent 9e75c2f250
commit 483b9ad298

View File

@@ -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 (
<Tooltip label={isFollowing ? '取消关注' : '关注事件'} hasArrow placement="bottom">
<HStack
<Stack
as="button"
spacing={1.5}
px={3}
py={1.5}
spacing={isVertical ? 0 : 1.5}
px={isVertical ? 2 : 3}
py={isVertical ? 1 : 1.5}
cursor="pointer"
onClick={handleClick}
align="center"
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
transition="all 0.2s"
>
<Star
size={iconSize}
size={isVertical ? '14px' : iconSize}
color={isFollowing ? "#FFD700" : "#A0AEC0"}
fill={isFollowing ? "#FFD700" : "none"}
style={{ transition: 'all 0.2s' }}
/>
{showCount && (
<Text
fontSize="sm"
fontSize={isVertical ? "2xs" : "sm"}
fontWeight="semibold"
color={isFollowing ? "yellow.400" : "white"}
color={isFollowing ? "yellow.400" : "gray.400"}
>
{followerCount || 0}
</Text>
)}
</HStack>
</Stack>
</Tooltip>
);
}