构建实时通知信息流

实时通知流将用于接收通知的服务器发送事件流，与用于将项目标记为已读的接口结合起来。组件为通知列表维护本地状态，在 useEffect 中通过 EventSource 订阅服务器流，并使用乐观更新处理用户交互（标记为已读、关闭）。

通知对象通常具有以下结构：{ id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }。类型字段决定图标和颜色。已读字段用于跟踪用户是否已确认通知。时间戳字段支持按时间段分组。

在 useEffect 中，创建一个连接到 /api/notifications/stream 的 EventSource。每当收到消息事件时，解析 JSON，并将新通知插入状态数组的开头：setNotifications(prev => [JSON.parse(e.data), ...prev])。将通知插入开头（即将元素放到数组开头）可以让最新通知显示在顶部，这是通知流的标准做法。

无需额外状态即可从通知数组中派生未读数量：const unreadCount = notifications.filter(n => !n.read).length。请将其显示为通知铃铛图标上的徽标。每当通知状态发生变化时，数量都会自动更新，无需单独管理状态。

用户点击通知时，请立即应用乐观的已读更新：setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n))。然后在后台向 /api/notifications/:id 发送 PATCH 请求，并附带 { read: true }。如果请求失败，请回滚乐观更新。

请按以下类别分组显示通知：“今天”（同一自然日）、“昨天”和“更早”。请使用通知的时间戳和当前日期计算分组：const today = new Date().toDateString()。将每个分组渲染为带有标题标签的独立区域。这样可以更轻松地浏览较长的通知列表。

当用户位于其他页面且通过服务器发送事件收到新通知时，请显示提示消息，而不是（或同时）更新通知列表。请使用全局通知上下文或 Zustand 存储，以便服务器发送事件订阅者和提示消息渲染器都能访问它。提示消息会在几秒后消失，但通知仍会保留在列表中。

对于需要显示在整个应用中的通知，请在应用根层级将其存储在 React 上下文或 Zustand 存储中。服务器发送事件订阅应位于组件树顶部附近的提供程序组件中。任何组件都可以通过共享存储读取通知或分发新通知，从而支持在任何页面渲染提示消息。

EventSource 会在网络断开时自动处理重连，但标签页可见性变化的情况有所不同。用户长时间离开后切回标签页时，服务器可能已经终止服务器发送事件连接。EventSource 会自动重新连接，而最后事件 ID 机制会重放用户在标签页处于后台期间错过的通知。

单页应用在离开页面时会丢失内存中的通知状态。请在每次更新后将通知存储到 localStorage：localStorage.setItem('notifications', JSON.stringify(notifications))。组件挂载时，请先从 localStorage 初始化状态，再连接服务器发送事件流。这样可以在页面导航期间保留通知历史。

服务器端服务器发送事件端点必须设置特定的请求头：Content-Type: text/event-stream、Cache-Control: no-cache 和 Connection: keep-alive。在 Express/NestJS 中，应将事件写成 data: ${JSON.stringify(payload)}\n\n——请注意，双换行表示一个事件的结束。服务器必须在每次写入后刷新缓冲区，以确保浏览器立即收到事件。

服务器发送事件端点的正确内容类型请求头是什么？

通知流将服务器发送事件订阅（在 useEffect 中使用 EventSource 并进行清理）与接口变更（使用 PATCH 标记为已读）结合起来。数据结构包括：标识、类型、消息、时间戳和已读状态。使用筛选操作派生 unreadCount，并按今天、昨天和更早分组显示。使用全局上下文或 Zustand 支持跨页面提示消息。持久化到 localStorage，以便在页面导航后恢复。服务器发送事件端点需要内容类型为服务器发送事件、缓存控制为不缓存，并使用双换行作为事件分隔符。