From 483b9ad2984795796876942b9745176aa0541fb3 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 9 Jan 2026 16:11:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(EventFollowButton):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20layout=20prop=20=E6=94=AF=E6=8C=81=E5=9E=82=E7=9B=B4?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../EventCard/atoms/EventFollowButton.js      | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

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 (
             <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>
         );
     }