diff --git a/src/components/FavoriteButton/index.tsx b/src/components/FavoriteButton/index.tsx
new file mode 100644
index 0000000..1cbf94a
--- /dev/null
+++ b/src/components/FavoriteButton/index.tsx
@@ -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