feat(web): NotificationPanel 增加待办预览区域

- 底部新增"待办事项"区域,显示最近 3 条 pending 行动项
- 角标数字改为 unreadCount + pendingActionCount
- 点击待办项跳转 /health/action-inbox
This commit is contained in:
iven
2026-05-01 16:37:29 +08:00
parent 81dd3d2bda
commit 6d66a392db

View File

@@ -1,37 +1,47 @@
import { useEffect, useRef } from 'react';
import { Badge, List, Popover, Button, Empty, Typography } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Badge, Divider, List, Popover, Button, Empty, Typography } from 'antd';
import { BellOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useMessageStore } from '../stores/message';
import { useThemeMode } from '../hooks/useThemeMode';
import { actionInboxApi, type ActionItem } from '../api/health/actionInbox';
const { Text } = Typography;
export default function NotificationPanel() {
const navigate = useNavigate();
// 使用独立 selector数据订阅和函数引用分离避免 effect 重复触发
const unreadCount = useMessageStore((s) => s.unreadCount);
const recentMessages = useMessageStore((s) => s.recentMessages);
const markAsRead = useMessageStore((s) => s.markAsRead);
const isDark = useThemeMode();
const initializedRef = useRef(false);
const [pendingActions, setPendingActions] = useState<ActionItem[]>([]);
const fetchPendingActions = useCallback(async () => {
try {
const resp = await actionInboxApi.list({ status: 'pending', page_size: 3 });
setPendingActions(resp.data);
} catch {
// 静默失败,不影响通知面板
}
}, []);
useEffect(() => {
// 防止 StrictMode 双重 mount 和路由切换导致的重复初始化
if (initializedRef.current) return;
initializedRef.current = true;
const { fetchUnreadCount, fetchRecentMessages, connectSSE } = useMessageStore.getState();
fetchUnreadCount();
fetchRecentMessages();
fetchPendingActions();
// SSE 实时推送,收到消息即刷新
const disconnectSSE = connectSSE();
// 降级轮询SSE 断开时兜底)
const interval = setInterval(() => {
fetchUnreadCount();
fetchRecentMessages();
fetchPendingActions();
}, 60000);
return () => {
@@ -39,7 +49,9 @@ export default function NotificationPanel() {
disconnectSSE();
initializedRef.current = false;
};
}, []);
}, [fetchPendingActions]);
const totalBadge = unreadCount + pendingActions.length;
const content = (
<div style={{ width: 360 }}>
@@ -149,6 +161,52 @@ export default function NotificationPanel() {
</Button>
</div>
)}
{/* 待办预览区域 */}
<Divider style={{ margin: '8px 0' }} />
<div style={{ padding: '4px 0' }}>
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 4,
}}>
<Text strong style={{ fontSize: 13 }}></Text>
<Button
type="link"
size="small"
onClick={() => navigate('/health/action-inbox')}
style={{ fontSize: 12, padding: 0 }}
>
</Button>
</div>
{pendingActions.length === 0 ? (
<Text type="secondary" style={{ fontSize: 12, display: 'block', textAlign: 'center', padding: '8px 0' }}>
</Text>
) : (
<List
size="small"
dataSource={pendingActions}
renderItem={(item) => (
<List.Item
style={{ padding: '4px 0', cursor: 'pointer', border: 'none' }}
onClick={() => navigate('/health/action-inbox')}
>
<List.Item.Meta
title={<Text style={{ fontSize: 12 }}>{item.title}</Text>}
description={
<Text type="secondary" style={{ fontSize: 11 }}>
{item.patient_name}
</Text>
}
/>
</List.Item>
)}
/>
)}
</div>
</div>
);
@@ -178,7 +236,7 @@ export default function NotificationPanel() {
e.currentTarget.style.background = 'transparent';
}}
>
<Badge count={unreadCount} size="small" offset={[4, -4]}>
<Badge count={totalBadge} size="small" offset={[4, -4]}>
<BellOutlined style={{
fontSize: 16,
color: isDark ? '#94a3b8' : '#475569',