Commit 1e3dc6d4 authored by 375242562@qq.com's avatar 375242562@qq.com

feat: 通知中心只显示未读消息,标为已读后自动消失

- WorkStationPage: list 请求加 unread_only=true,仅拉取未读通知
- RecommendationDrawer: 移除已读/未读条件渲染,列表项统一以未读样式展示
- 标为已读 / 全部已读后触发 onRefresh,已读条目从列表消失
- 空列表提示改为"暂无未读通知"
Co-Authored-By: default avatarClaude Sonnet 4.6 <noreply@anthropic.com>
parent 99687a26
...@@ -40,25 +40,20 @@ export function RecommendationDrawer({ open, notifications, onClose, onRefresh } ...@@ -40,25 +40,20 @@ export function RecommendationDrawer({ open, notifications, onClose, onRefresh }
<List sx={{ px: 2, overflow: 'auto' }}> <List sx={{ px: 2, overflow: 'auto' }}>
{notifications.length === 0 && ( {notifications.length === 0 && (
<Typography variant="body2" color="text.secondary" sx={{ p: 2 }}>暂无通知</Typography> <Typography variant="body2" color="text.secondary" sx={{ p: 2 }}>暂无未读通知</Typography>
)} )}
{notifications.map(n => ( {notifications.map(n => (
<ListItem <ListItem
key={n.id} key={n.id}
divider divider
alignItems="flex-start" alignItems="flex-start"
sx={{ sx={{ bgcolor: '#e3f2fd', borderRadius: 1, mb: 0.5, px: 1 }}
bgcolor: n.is_read ? 'transparent' : '#e3f2fd',
borderRadius: 1,
mb: 0.5,
px: 1,
}}
> >
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" spacing={1} alignItems="center"> <Stack direction="row" spacing={1} alignItems="center">
<Typography variant="body2" fontWeight={n.is_read ? 400 : 600}>{n.title}</Typography> <Typography variant="body2" fontWeight={600}>{n.title}</Typography>
{!n.is_read && <Chip label="新" size="small" color="primary" />} <Chip label="新" size="small" color="primary" />
</Stack> </Stack>
} }
secondary={ secondary={
...@@ -70,11 +65,9 @@ export function RecommendationDrawer({ open, notifications, onClose, onRefresh } ...@@ -70,11 +65,9 @@ export function RecommendationDrawer({ open, notifications, onClose, onRefresh }
</> </>
} }
/> />
{!n.is_read && (
<IconButton size="small" onClick={() => handleMarkRead(n.id)} title="标为已读"> <IconButton size="small" onClick={() => handleMarkRead(n.id)} title="标为已读">
<CheckCircleIcon fontSize="small" color="primary" /> <CheckCircleIcon fontSize="small" color="primary" />
</IconButton> </IconButton>
)}
</ListItem> </ListItem>
))} ))}
</List> </List>
......
...@@ -113,13 +113,13 @@ export function WorkStationPage() { ...@@ -113,13 +113,13 @@ export function WorkStationPage() {
const loadNotifications = useCallback(async () => { const loadNotifications = useCallback(async () => {
const [notifs, count] = await Promise.all([ const [notifs, count] = await Promise.all([
notificationService.list({ limit: 50 }), notificationService.list({ unread_only: true, limit: 50 }),
notificationService.unreadCount(), notificationService.unreadCount(),
]) ])
setNotifications(notifs) setNotifications(notifs)
setUnreadCount(count.count) setUnreadCount(count.count)
const latestUnread = notifs.find(n => !n.is_read) const latestUnread = notifs[0]
if (latestUnread && !shownNotificationIds.current.has(latestUnread.id)) { if (latestUnread && !shownNotificationIds.current.has(latestUnread.id)) {
shownNotificationIds.current.add(latestUnread.id) shownNotificationIds.current.add(latestUnread.id)
setSnackNotification(latestUnread) setSnackNotification(latestUnread)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment