添加收藏按钮组件

- 创建收藏按钮组件(FavoriteButton)
- 支持收藏/取消收藏功能
- 实现动画效果
This commit is contained in:
Leo 2025-10-09 23:50:38 +08:00
parent fa78163d31
commit b6193c2d63

View File

@ -0,0 +1,47 @@
/**
*
*/
import React from 'react'
import { Button, message } from 'antd'
import { HeartOutlined, HeartFilled } from '@ant-design/icons'
import { useUserStore } from '@store/useUserStore'
interface FavoriteButtonProps {
heritageId: string
size?: 'small' | 'middle' | 'large'
}
const FavoriteButton: React.FC<FavoriteButtonProps> = ({ heritageId, size = 'middle' }) => {
const { user, isAuthenticated, addFavorite, removeFavorite } = useUserStore()
const isFavorited = user?.favorites.includes(heritageId) || false
const handleToggle = () => {
if (!isAuthenticated) {
message.warning('请先登录后再收藏')
return
}
if (isFavorited) {
removeFavorite(heritageId)
message.success('已取消收藏')
} else {
addFavorite(heritageId)
message.success('收藏成功')
}
}
return (
<Button
type={isFavorited ? 'primary' : 'default'}
icon={isFavorited ? <HeartFilled /> : <HeartOutlined />}
onClick={handleToggle}
size={size}
>
{isFavorited ? '已收藏' : '收藏'}
</Button>
)
}
export default FavoriteButton