NotificationBell 组件

NotificationBell 组件

通知铃铛组件，显示用户的待处理变更请求和评论通知。

功能概述

  • 通知计数: 显示待处理通知总数（最多显示 9+）
  • 下拉菜单: 点击铃铛显示通知详情
  • 通知类型:

- 待处理的变更请求 - 评论通知（评论/回复）

  • 标记已读: 支持单条或全部标记为已读
  • 时间显示: 相对时间（如"2小时前"）

数据结构

interface CommentNotification {
  id: string;
  type: "COMMENT" | "REPLY";
  createdAt: string;
  actor: {
    id: string;
    name: string | null;
    username: string;
    avatar: string | null;
  } | null;
  promptId: string | null;
  promptTitle: string | null;
}

interface Notifications {
  pendingChangeRequests: number;
  unreadComments: number;
  commentNotifications: CommentNotification[];
}

API 接口

GET /api/user/notifications

获取用户通知列表。

POST /api/user/notifications

标记通知为已读。

请求体：

{
  "notificationIds": ["id1", "id2"] // 可选，不传则标记全部
}

状态显示

状态显示
无通知普通铃铛图标
有通知铃铛 + 红色计数徽章
加载中不显示
未登录不显示

依赖

  • next-auth/react - 用户会话
  • next-intl - 国际化
  • @/components/ui/dropdown-menu - 下拉菜单
  • @/components/ui/avatar - 头像
  • @/lib/date - 日期格式化

使用示例

import { NotificationBell } from "@/components/layout/notification-bell";

<NotificationBell />

翻译键

{
  "notifications": {
    "title": "通知",
    "markAllRead": "全部标记为已读",
    "pendingChangeRequests": "待处理变更请求",
    "commentedOnPrompt": "评论了 Prompt",
    "repliedToComment": "回复了评论",
    "noNotifications": "暂无通知"
  }
}
← 返回目录