添加收藏按钮组件
- 创建收藏按钮组件(FavoriteButton) - 支持收藏/取消收藏功能 - 实现动画效果
This commit is contained in:
parent
fa78163d31
commit
b6193c2d63
47
src/components/FavoriteButton/index.tsx
Normal file
47
src/components/FavoriteButton/index.tsx
Normal 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
|
||||
Loading…
Reference in New Issue
Block a user