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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user