community增加事件详情

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 } from '@chakra-ui/react';
+import { IconButton, Box, HStack, Text, Tooltip } from '@chakra-ui/react';
 import { Star } from 'lucide-react';
 
 /**
@@ -11,13 +11,15 @@ import { Star } from 'lucide-react';
  * @param {Function} props.onToggle - 切换关注状态的回调函数
  * @param {string} props.size - 按钮尺寸（'xs' | 'sm' | 'md'，默认 'sm'）
  * @param {boolean} props.showCount - 是否显示关注数（默认 true）
+ * @param {string} props.variant - 样式变体（'default' | 'minimal'，默认 'default'）
  */
 const EventFollowButton = ({
     isFollowing,
     followerCount = 0,
     onToggle,
     size = 'sm',
-    showCount = true
+    showCount = true,
+    variant = 'default'
 }) => {
     const iconSize = size === 'xs' ? '16px' : size === 'sm' ? '18px' : '22px';
 
@@ -26,6 +28,41 @@ const EventFollowButton = ({
         onToggle?.();
     };
 
+    // 最小样式 - 用于毛玻璃容器内
+    if (variant === 'minimal') {
+        return (
+            <Tooltip label={isFollowing ? '取消关注' : '关注事件'} hasArrow placement="bottom">
+                <HStack
+                    as="button"
+                    spacing={1.5}
+                    px={3}
+                    py={1.5}
+                    cursor="pointer"
+                    onClick={handleClick}
+                    _hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
+                    transition="all 0.2s"
+                >
+                    <Star
+                        size={iconSize}
+                        color={isFollowing ? "#FFD700" : "#A0AEC0"}
+                        fill={isFollowing ? "#FFD700" : "none"}
+                        style={{ transition: 'all 0.2s' }}
+                    />
+                    {showCount && (
+                        <Text
+                            fontSize="sm"
+                            fontWeight="semibold"
+                            color={isFollowing ? "yellow.400" : "white"}
+                        >
+                            {followerCount || 0}
+                        </Text>
+                    )}
+                </HStack>
+            </Tooltip>
+        );
+    }
+
+    // 默认样式
     return (
         <Box display="inline-flex" alignItems="center" gap={1}>
             <IconButton
@@ -48,9 +85,6 @@ const EventFollowButton = ({
                 onClick={handleClick}
                 aria-label={isFollowing ? '取消关注' : '关注'}
             />
-            {/* <Box fontSize="xs" color="gray.500">
-                {followerCount || 0}
-            </Box> */}
         </Box>
     );
 };