subscribe-button.tsx
基本信息
- 类型: React Client Component
- 路径:
./src/components/categories/subscribe-button.tsx
功能描述
分类订阅按钮组件，支持多种显示模式（图标按钮、胶囊标签、标准按钮）。用户可以通过此组件订阅或取消订阅分类，订阅后会收到该分类下新提示词的通知。
Props 接口
SubscribeButtonProps
| 属性 | 类型 | 描述 |
|---|---|---|
categoryId | string | 分类唯一标识 |
categoryName | string | 分类名称（用于显示和统计） |
initialSubscribed | boolean | 初始订阅状态 |
iconOnly | boolean | 是否只显示图标（默认 false） |
pill | boolean | 是否显示为胶囊样式（默认 false） |
依赖导入
next-intl- 国际化翻译lucide-react- 图标库（Bell, BellOff, Loader2）@/components/ui/button- 按钮组件sonner- 通知提示@/lib/analytics- 分析统计
主要功能
- 支持三种显示模式：
- iconOnly: 纯图标按钮，适合紧凑空间
- pill: 胶囊标签样式，带文字和图标
- 默认：标准按钮样式
- 点击切换订阅/取消订阅状态
- 调用 API
/api/categories/{id}/subscribe更新状态 - 显示加载状态（旋转图标）
- 操作成功后显示提示通知
- 触发分类订阅/取消订阅的分析事件
- 订阅状态通过本地状态管理，UI 实时反馈
状态管理
| 状态 | 类型 | 描述 |
|---|---|---|
isSubscribed | boolean | 当前订阅状态 |
isLoading | boolean | 操作加载状态 |