741 lines
27 KiB
JavaScript
741 lines
27 KiB
JavaScript
// src/components/NotificationContainer/index.js
|
||
/**
|
||
* 金融资讯通知容器组件 - 右下角层叠显示实时通知
|
||
*/
|
||
|
||
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import {
|
||
Box,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
IconButton,
|
||
Icon,
|
||
Badge,
|
||
Button,
|
||
Spinner,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { keyframes } from '@emotion/react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { MdClose, MdOpenInNew, MdSchedule, MdExpandMore, MdExpandLess, MdPerson, MdAccessTime } from 'react-icons/md';
|
||
import { useNotification } from '../../contexts/NotificationContext';
|
||
import {
|
||
NOTIFICATION_TYPE_CONFIGS,
|
||
NOTIFICATION_TYPES,
|
||
PRIORITY_CONFIGS,
|
||
PRIORITY_LEVELS,
|
||
NOTIFICATION_CONFIG,
|
||
formatNotificationTime,
|
||
getPriorityBgOpacity,
|
||
getPriorityBorderWidth,
|
||
} from '../../constants/notificationTypes';
|
||
|
||
/**
|
||
* 自定义 Hook：带过期时间的 localStorage 持久化状态
|
||
* @param {string} key - localStorage 的 key
|
||
* @param {*} initialValue - 初始值
|
||
* @param {number} expiryMs - 过期时间（毫秒），0 表示不过期
|
||
* @returns {[*, Function]} - [状态值, 设置函数]
|
||
*/
|
||
const useLocalStorageWithExpiry = (key, initialValue, expiryMs = 0) => {
|
||
// 从 localStorage 读取带过期时间的值
|
||
const readValue = () => {
|
||
try {
|
||
const item = window.localStorage.getItem(key);
|
||
if (!item) {
|
||
return initialValue;
|
||
}
|
||
|
||
const { value, timestamp } = JSON.parse(item);
|
||
|
||
// 检查是否过期（仅当设置了过期时间时）
|
||
if (expiryMs > 0 && timestamp) {
|
||
const now = Date.now();
|
||
const elapsed = now - timestamp;
|
||
|
||
if (elapsed > expiryMs) {
|
||
// 已过期，删除并返回初始值
|
||
window.localStorage.removeItem(key);
|
||
return initialValue;
|
||
}
|
||
}
|
||
|
||
return value;
|
||
} catch (error) {
|
||
console.error(`Error reading ${key} from localStorage:`, error);
|
||
return initialValue;
|
||
}
|
||
};
|
||
|
||
const [storedValue, setStoredValue] = useState(readValue);
|
||
|
||
// 保存值到 localStorage（带时间戳）
|
||
const setValue = (value) => {
|
||
try {
|
||
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
||
setStoredValue(valueToStore);
|
||
|
||
const item = {
|
||
value: valueToStore,
|
||
timestamp: Date.now(), // 保存时间戳
|
||
};
|
||
|
||
window.localStorage.setItem(key, JSON.stringify(item));
|
||
} catch (error) {
|
||
console.error(`Error saving ${key} to localStorage:`, error);
|
||
}
|
||
};
|
||
|
||
// 监听 storage 事件（跨标签页同步）
|
||
useEffect(() => {
|
||
const handleStorageChange = (e) => {
|
||
if (e.key === key && e.newValue !== null) {
|
||
try {
|
||
const { value, timestamp } = JSON.parse(e.newValue);
|
||
|
||
// 检查是否过期
|
||
if (expiryMs > 0 && timestamp) {
|
||
const now = Date.now();
|
||
const elapsed = now - timestamp;
|
||
|
||
if (elapsed > expiryMs) {
|
||
// 过期，设置为初始值
|
||
setStoredValue(initialValue);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 更新状态
|
||
setStoredValue(value);
|
||
} catch (error) {
|
||
console.error(`Error parsing storage event for ${key}:`, error);
|
||
}
|
||
} else if (e.key === key && e.newValue === null) {
|
||
// 其他标签页删除了该值
|
||
setStoredValue(initialValue);
|
||
}
|
||
};
|
||
|
||
// 添加事件监听
|
||
window.addEventListener('storage', handleStorageChange);
|
||
|
||
// 清理函数
|
||
return () => {
|
||
window.removeEventListener('storage', handleStorageChange);
|
||
};
|
||
}, [key, expiryMs, initialValue]);
|
||
|
||
// 定时检查过期（可选，更精确的过期控制）
|
||
useEffect(() => {
|
||
if (expiryMs <= 0) return; // 不需要过期检查
|
||
|
||
const checkExpiry = () => {
|
||
try {
|
||
const item = window.localStorage.getItem(key);
|
||
if (!item) return;
|
||
|
||
const { value, timestamp } = JSON.parse(item);
|
||
const now = Date.now();
|
||
const elapsed = now - timestamp;
|
||
|
||
if (elapsed > expiryMs) {
|
||
// 已过期，重置状态
|
||
setStoredValue(initialValue);
|
||
window.localStorage.removeItem(key);
|
||
}
|
||
} catch (error) {
|
||
console.error(`Error checking expiry for ${key}:`, error);
|
||
}
|
||
};
|
||
|
||
// 每10秒检查一次过期
|
||
const intervalId = setInterval(checkExpiry, 10000);
|
||
|
||
// 立即执行一次检查
|
||
checkExpiry();
|
||
|
||
return () => clearInterval(intervalId);
|
||
}, [key, expiryMs, initialValue]);
|
||
|
||
return [storedValue, setValue];
|
||
};
|
||
|
||
/**
|
||
* 辅助函数：生成通知的完整无障碍描述
|
||
* @param {object} notification - 通知对象
|
||
* @returns {string} - ARIA 描述文本
|
||
*/
|
||
const getNotificationDescription = (notification) => {
|
||
const { type, priority, title, content, isAIGenerated, publishTime, pushTime, extra } = notification;
|
||
|
||
// 获取配置
|
||
const typeConfig = NOTIFICATION_TYPE_CONFIGS[type] || NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.EVENT_ALERT];
|
||
const priorityConfig = PRIORITY_CONFIGS[priority];
|
||
|
||
// 构建描述片段
|
||
const parts = [];
|
||
|
||
// 优先级（如果需要显示）
|
||
if (priorityConfig?.show) {
|
||
parts.push(`${priorityConfig.label}通知`);
|
||
}
|
||
|
||
// 类型
|
||
parts.push(typeConfig.name);
|
||
|
||
// 标题
|
||
parts.push(title);
|
||
|
||
// 内容
|
||
if (content) {
|
||
parts.push(content);
|
||
}
|
||
|
||
// AI 生成标识
|
||
if (isAIGenerated) {
|
||
parts.push('由AI生成');
|
||
}
|
||
|
||
// 预测标识
|
||
if (extra?.isPrediction) {
|
||
parts.push('预测状态');
|
||
if (extra?.statusHint) {
|
||
parts.push(extra.statusHint);
|
||
}
|
||
}
|
||
|
||
// 时间信息
|
||
const time = publishTime || pushTime;
|
||
if (time) {
|
||
parts.push(`时间：${formatNotificationTime(time)}`);
|
||
}
|
||
|
||
// 操作提示
|
||
if (notification.clickable && notification.link) {
|
||
parts.push('按回车键或空格键查看详情');
|
||
}
|
||
|
||
return parts.join('，');
|
||
};
|
||
|
||
/**
|
||
* 辅助函数：处理键盘按键事件（Enter / Space）
|
||
* @param {KeyboardEvent} event - 键盘事件
|
||
* @param {Function} callback - 回调函数
|
||
*/
|
||
const handleKeyPress = (event, callback) => {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
callback();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 紧急通知脉冲动画 - 边框颜色脉冲效果
|
||
*/
|
||
const pulseAnimation = keyframes`
|
||
0%, 100% {
|
||
border-left-color: currentColor;
|
||
box-shadow: 0 0 0 0 currentColor;
|
||
}
|
||
50% {
|
||
border-left-color: currentColor;
|
||
box-shadow: -4px 0 12px 0 currentColor;
|
||
}
|
||
`;
|
||
|
||
/**
|
||
* 单个通知项组件
|
||
* 使用 React.memo 优化，避免不必要的重渲染
|
||
*/
|
||
const NotificationItem = React.memo(({ notification, onClose, isNewest = false }) => {
|
||
const navigate = useNavigate();
|
||
const { trackNotificationClick } = useNotification();
|
||
|
||
// 加载状态管理 - 点击跳转时显示 loading
|
||
const [isNavigating, setIsNavigating] = useState(false);
|
||
|
||
const { id, type, priority, title, content, isAIGenerated, clickable, link, author, publishTime, pushTime, extra } = notification;
|
||
|
||
// 严格判断可点击性：只有 clickable=true 且 link 存在才可点击
|
||
const isActuallyClickable = clickable && link;
|
||
|
||
// 判断是否为预测通知
|
||
const isPrediction = extra?.isPrediction;
|
||
|
||
// 获取类型配置
|
||
let typeConfig = NOTIFICATION_TYPE_CONFIGS[type] || NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.EVENT_ALERT];
|
||
|
||
// 股票动向需要根据涨跌动态配置
|
||
if (type === NOTIFICATION_TYPES.STOCK_ALERT && extra?.priceChange) {
|
||
const priceChange = extra.priceChange;
|
||
typeConfig = {
|
||
...typeConfig,
|
||
icon: typeConfig.getIcon(priceChange),
|
||
colorScheme: typeConfig.getColorScheme(priceChange),
|
||
// 亮色模式
|
||
bg: typeConfig.getBg(priceChange),
|
||
borderColor: typeConfig.getBorderColor(priceChange),
|
||
iconColor: typeConfig.getIconColor(priceChange),
|
||
hoverBg: typeConfig.getHoverBg(priceChange),
|
||
// 暗色模式
|
||
darkBg: typeConfig.getDarkBg(priceChange),
|
||
darkBorderColor: typeConfig.getDarkBorderColor(priceChange),
|
||
darkIconColor: typeConfig.getDarkIconColor(priceChange),
|
||
darkHoverBg: typeConfig.getDarkHoverBg(priceChange),
|
||
};
|
||
}
|
||
|
||
// 获取优先级配置
|
||
const priorityConfig = PRIORITY_CONFIGS[priority] || PRIORITY_CONFIGS.normal;
|
||
|
||
// 判断是否显示图标（仅紧急和重要通知）
|
||
const shouldShowIcon = priority === PRIORITY_LEVELS.URGENT || priority === PRIORITY_LEVELS.IMPORTANT;
|
||
|
||
// 获取优先级样式
|
||
const priorityBorderWidth = getPriorityBorderWidth(priority);
|
||
const isDark = useColorModeValue(false, true);
|
||
const priorityBgOpacity = getPriorityBgOpacity(priority, isDark);
|
||
|
||
// 根据优先级调整背景色深度
|
||
const getPriorityBgColor = () => {
|
||
const colorScheme = typeConfig.colorScheme;
|
||
// 亮色模式：根据优先级使用不同深度的颜色
|
||
if (!isDark) {
|
||
if (priority === PRIORITY_LEVELS.URGENT) {
|
||
return `${colorScheme}.200`; // 紧急：深色背景 + 脉冲动画
|
||
} else if (priority === PRIORITY_LEVELS.IMPORTANT) {
|
||
return `${colorScheme}.100`; // 重要：中色背景
|
||
} else {
|
||
// 普通：极淡背景（使用 white 或 gray.50，降低视觉干扰）
|
||
return 'white';
|
||
}
|
||
} else {
|
||
// 暗色模式：使用 typeConfig 的 darkBg 或回退
|
||
if (priority === PRIORITY_LEVELS.URGENT) {
|
||
return typeConfig.darkBg || `${colorScheme}.800`;
|
||
} else if (priority === PRIORITY_LEVELS.IMPORTANT) {
|
||
return typeConfig.darkBg || `${colorScheme}.800`;
|
||
} else {
|
||
// 普通通知在暗色模式下使用更暗的灰色背景
|
||
return 'gray.800';
|
||
}
|
||
}
|
||
};
|
||
|
||
// 颜色配置 - 支持亮色/暗色模式（使用 useMemo 优化）
|
||
const colors = useMemo(() => ({
|
||
bg: getPriorityBgColor(),
|
||
border: useColorModeValue(
|
||
typeConfig.borderColor,
|
||
typeConfig.darkBorderColor || `${typeConfig.colorScheme}.400`
|
||
),
|
||
icon: useColorModeValue(
|
||
typeConfig.iconColor,
|
||
typeConfig.darkIconColor || `${typeConfig.colorScheme}.300`
|
||
),
|
||
text: useColorModeValue('gray.800', 'gray.100'),
|
||
subText: useColorModeValue('gray.600', 'gray.300'),
|
||
metaText: useColorModeValue('gray.500', 'gray.500'),
|
||
hoverBg: useColorModeValue(
|
||
typeConfig.hoverBg,
|
||
typeConfig.darkHoverBg || `${typeConfig.colorScheme}.700`
|
||
),
|
||
closeButtonHoverBg: useColorModeValue(
|
||
`${typeConfig.colorScheme}.200`,
|
||
`${typeConfig.colorScheme}.700`
|
||
),
|
||
}), [isDark, priority, typeConfig]);
|
||
|
||
// 点击处理（只有真正可点击时才执行）- 使用 useCallback 优化
|
||
const handleClick = useCallback(() => {
|
||
if (isActuallyClickable && !isNavigating) {
|
||
// 设置加载状态
|
||
setIsNavigating(true);
|
||
|
||
// 追踪点击（监控埋点）
|
||
trackNotificationClick(id);
|
||
|
||
// 导航到目标页面
|
||
navigate(link);
|
||
|
||
// 延迟关闭通知（给用户足够的视觉反馈 - 300ms）
|
||
setTimeout(() => {
|
||
onClose(id, true);
|
||
}, 300);
|
||
}
|
||
}, [id, link, isActuallyClickable, isNavigating, trackNotificationClick, navigate, onClose]);
|
||
|
||
// 生成完整的无障碍描述
|
||
const ariaDescription = getNotificationDescription(notification);
|
||
|
||
return (
|
||
<Box
|
||
// 无障碍属性
|
||
role={priority === 'urgent' ? 'alert' : 'status'}
|
||
aria-live={priority === 'urgent' ? 'assertive' : 'polite'}
|
||
aria-atomic="true"
|
||
aria-label={ariaDescription}
|
||
tabIndex={isActuallyClickable ? 0 : -1}
|
||
onKeyDown={(e) => isActuallyClickable && handleKeyPress(e, handleClick)}
|
||
// 样式属性
|
||
bg={colors.bg}
|
||
borderLeft={`${priorityBorderWidth} solid`}
|
||
borderColor={colors.border}
|
||
// 可点击的通知添加完整边框提示
|
||
{...(isActuallyClickable && {
|
||
border: '1px solid',
|
||
borderLeftWidth: priorityBorderWidth, // 保持左侧优先级边框
|
||
})}
|
||
borderRadius="md"
|
||
// 可点击的通知使用更明显的阴影（悬浮感）
|
||
boxShadow={isActuallyClickable
|
||
? (isNewest ? '2xl' : 'md')
|
||
: (isNewest ? 'xl' : 'sm')}
|
||
// 紧急通知添加脉冲动画
|
||
animation={priority === PRIORITY_LEVELS.URGENT ? `${pulseAnimation} 2s ease-in-out infinite` : undefined}
|
||
p={{ base: 3, md: 4 }}
|
||
w={{ base: "calc(100vw - 32px)", sm: "360px", md: "380px", lg: "400px" }}
|
||
maxW="400px"
|
||
position="relative"
|
||
cursor={isActuallyClickable ? (isNavigating ? 'wait' : 'pointer') : 'default'}
|
||
onClick={isActuallyClickable && !isNavigating ? handleClick : undefined}
|
||
opacity={isNavigating ? 0.7 : 1}
|
||
pointerEvents={isNavigating ? 'none' : 'auto'}
|
||
_hover={isActuallyClickable && !isNavigating ? {
|
||
boxShadow: 'xl',
|
||
transform: 'translateY(-2px)',
|
||
bg: colors.hoverBg,
|
||
} : {}} // 不可点击时无 hover 效果
|
||
_focus={{
|
||
outline: '2px solid',
|
||
outlineColor: 'blue.500',
|
||
outlineOffset: '2px',
|
||
}}
|
||
transition="all 0.2s"
|
||
willChange="transform, opacity" // 性能优化：GPU 加速
|
||
{...(isNewest && {
|
||
borderRight: '1px solid',
|
||
borderRightColor: colors.border,
|
||
borderTop: '1px solid',
|
||
borderTopColor: useColorModeValue(`${typeConfig.colorScheme}.100`, `${typeConfig.colorScheme}.700`),
|
||
})}
|
||
>
|
||
{/* 头部区域：标题 + 可选标识 */}
|
||
<HStack spacing={2} align="start" mb={2}>
|
||
{/* 类型图标 - 仅紧急和重要通知显示 */}
|
||
{shouldShowIcon && (
|
||
<Icon
|
||
as={typeConfig.icon}
|
||
w={5}
|
||
h={5}
|
||
color={colors.icon} // 使用响应式颜色
|
||
mt={0.5}
|
||
flexShrink={0}
|
||
/>
|
||
)}
|
||
|
||
{/* 标题 */}
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={colors.text}
|
||
lineHeight="short"
|
||
flex={1}
|
||
noOfLines={{ base: 1, md: 2 }}
|
||
pl={shouldShowIcon ? 0 : 0}
|
||
>
|
||
{title}
|
||
</Text>
|
||
|
||
{/* 优先级标签 */}
|
||
{priorityConfig.show && (
|
||
<Badge
|
||
colorScheme={priorityConfig.colorScheme}
|
||
size="sm"
|
||
flexShrink={0}
|
||
>
|
||
{priorityConfig.label}
|
||
</Badge>
|
||
)}
|
||
|
||
{/* 关闭按钮 */}
|
||
<IconButton
|
||
icon={<MdClose />}
|
||
size="xs"
|
||
variant="ghost"
|
||
colorScheme={typeConfig.colorScheme}
|
||
aria-label={`关闭通知：${title}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onClose(id);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onClose(id);
|
||
}
|
||
}}
|
||
flexShrink={0}
|
||
_hover={{
|
||
bg: colors.closeButtonHoverBg,
|
||
}}
|
||
/>
|
||
</HStack>
|
||
|
||
{/* 内容区域 */}
|
||
<Text
|
||
fontSize="sm"
|
||
color={colors.subText}
|
||
lineHeight="short"
|
||
noOfLines={{ base: 2, md: 3 }}
|
||
mb={3}
|
||
pl={shouldShowIcon ? 7 : 0} // 有图标时与图标对齐
|
||
>
|
||
{content}
|
||
</Text>
|
||
|
||
{/* 底部元数据区域 */}
|
||
<HStack
|
||
spacing={2}
|
||
fontSize="xs"
|
||
color={colors.metaText}
|
||
pl={shouldShowIcon ? 7 : 0} // 有图标时与图标对齐
|
||
flexWrap="wrap"
|
||
>
|
||
{/* 时间信息 */}
|
||
<HStack spacing={1}>
|
||
<Icon as={MdAccessTime} w={3} h={3} />
|
||
<Text>
|
||
{publishTime && formatNotificationTime(publishTime)}
|
||
{!publishTime && pushTime && formatNotificationTime(pushTime)}
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* AI 标识 - 小徽章（小屏及以上显示）*/}
|
||
{isAIGenerated && (
|
||
<>
|
||
<Text display={{ base: "none", sm: "inline" }}>|</Text>
|
||
<Badge
|
||
colorScheme="purple"
|
||
size="xs"
|
||
display={{ base: "none", sm: "inline-flex" }}
|
||
>
|
||
AI
|
||
</Badge>
|
||
</>
|
||
)}
|
||
|
||
{/* 预测标识 + 状态提示 - 合并显示（小屏及以上）*/}
|
||
{isPrediction && (
|
||
<>
|
||
<Text display={{ base: "none", sm: "inline" }}>|</Text>
|
||
<HStack spacing={1} display={{ base: "none", sm: "flex" }}>
|
||
<Badge colorScheme="gray" size="xs">预测</Badge>
|
||
{extra?.statusHint && (
|
||
<>
|
||
<Icon as={MdSchedule} w={3} h={3} color="gray.400" />
|
||
<Text color="gray.400">{extra.statusHint}</Text>
|
||
</>
|
||
)}
|
||
</HStack>
|
||
</>
|
||
)}
|
||
|
||
{/* 作者信息 - 仅当数据存在时显示（平板及以上）*/}
|
||
{author && (
|
||
<>
|
||
<Text display={{ base: "none", md: "inline" }}>|</Text>
|
||
<HStack spacing={1} display={{ base: "none", md: "flex" }}>
|
||
<Icon as={MdPerson} w={3} h={3} />
|
||
<Text>{author.name} - {author.organization}</Text>
|
||
</HStack>
|
||
</>
|
||
)}
|
||
|
||
{/* 可点击提示（仅真正可点击的通知）*/}
|
||
{isActuallyClickable && (
|
||
<>
|
||
<Text>|</Text>
|
||
<HStack spacing={1}>
|
||
{/* Loading 时显示 Spinner，否则显示图标 */}
|
||
{isNavigating ? (
|
||
<Spinner size="xs" />
|
||
) : (
|
||
<Icon as={MdOpenInNew} w={3} h={3} />
|
||
)}
|
||
{/* Loading 时显示"跳转中..."，否则显示"查看详情" */}
|
||
<Text color={isNavigating ? 'blue.500' : undefined}>
|
||
{isNavigating ? '跳转中...' : '查看详情'}
|
||
</Text>
|
||
</HStack>
|
||
</>
|
||
)}
|
||
</HStack>
|
||
</Box>
|
||
);
|
||
}, (prevProps, nextProps) => {
|
||
// 自定义比较函数：只在 id 或 isNewest 变化时重渲染
|
||
return (
|
||
prevProps.notification.id === nextProps.notification.id &&
|
||
prevProps.isNewest === nextProps.isNewest
|
||
);
|
||
});
|
||
|
||
/**
|
||
* 通知容器组件 - 主组件
|
||
*/
|
||
const NotificationContainer = () => {
|
||
const { notifications, removeNotification } = useNotification();
|
||
// 使用带过期时间的 localStorage（2分钟 = 120000 毫秒）
|
||
const [isExpanded, setIsExpanded] = useLocalStorageWithExpiry(
|
||
'notification-expanded-state',
|
||
false,
|
||
120000
|
||
);
|
||
|
||
// 追踪新通知（性能优化：只对新通知做动画）
|
||
const prevNotificationIdsRef = useRef(new Set());
|
||
const isFirstRenderRef = useRef(true);
|
||
const [newNotificationIds, setNewNotificationIds] = useState(new Set());
|
||
|
||
useEffect(() => {
|
||
// 首次渲染跳过动画检测
|
||
if (isFirstRenderRef.current) {
|
||
isFirstRenderRef.current = false;
|
||
const currentIds = new Set(notifications.map(n => n.id));
|
||
prevNotificationIdsRef.current = currentIds;
|
||
return;
|
||
}
|
||
|
||
const currentIds = new Set(notifications.map(n => n.id));
|
||
const prevIds = prevNotificationIdsRef.current;
|
||
|
||
// 找出新增的通知 ID
|
||
const newIds = new Set();
|
||
currentIds.forEach(id => {
|
||
if (!prevIds.has(id)) {
|
||
newIds.add(id);
|
||
}
|
||
});
|
||
|
||
setNewNotificationIds(newIds);
|
||
|
||
// 更新引用
|
||
prevNotificationIdsRef.current = currentIds;
|
||
|
||
// 1秒后清除新通知标记（动画完成）
|
||
if (newIds.size > 0) {
|
||
const timer = setTimeout(() => {
|
||
setNewNotificationIds(new Set());
|
||
}, 1000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [notifications]);
|
||
|
||
// 如果没有通知，不渲染
|
||
if (notifications.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
// 根据展开状态决定显示的通知
|
||
const maxVisible = NOTIFICATION_CONFIG.maxVisible;
|
||
const hasMore = notifications.length > maxVisible;
|
||
const visibleNotifications = isExpanded ? notifications : notifications.slice(0, maxVisible);
|
||
const hiddenCount = notifications.length - maxVisible;
|
||
|
||
// 颜色配置
|
||
const collapseBg = useColorModeValue('gray.100', 'gray.700');
|
||
const collapseHoverBg = useColorModeValue('gray.200', 'gray.600');
|
||
const collapseTextColor = useColorModeValue('gray.700', 'gray.200');
|
||
|
||
// 构建无障碍描述
|
||
const containerAriaLabel = hasMore
|
||
? `通知中心，共有 ${notifications.length} 条通知，当前显示 ${visibleNotifications.length} 条，${isExpanded ? '已展开全部' : `还有 ${hiddenCount} 条折叠`}。使用Tab键导航，Enter键或空格键查看详情。`
|
||
: `通知中心，共有 ${notifications.length} 条通知。使用Tab键导航，Enter键或空格键查看详情。`;
|
||
|
||
return (
|
||
<Box
|
||
role="region"
|
||
aria-label={containerAriaLabel}
|
||
position="fixed"
|
||
bottom={{ base: 3, md: 28 }}
|
||
right={{ base: 3, md: 6 }}
|
||
zIndex={9999}
|
||
pointerEvents="none"
|
||
>
|
||
<VStack
|
||
spacing={3} // 消息之间间距 12px
|
||
align="flex-end"
|
||
pointerEvents="auto"
|
||
>
|
||
<AnimatePresence mode="popLayout">
|
||
{visibleNotifications.map((notification, index) => (
|
||
<motion.div
|
||
key={notification.id}
|
||
layout // 自动处理位置变化（流畅重排）
|
||
initial={{ opacity: 0, y: 50, scale: 0.95 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
exit={{ opacity: 0, x: 300, scale: 0.9 }}
|
||
transition={{
|
||
type: "spring",
|
||
stiffness: 300,
|
||
damping: 30,
|
||
mass: 0.8,
|
||
}}
|
||
style={{
|
||
position: 'relative',
|
||
zIndex: 9999 - index,
|
||
}}
|
||
>
|
||
<NotificationItem
|
||
notification={notification}
|
||
onClose={removeNotification}
|
||
isNewest={index === 0}
|
||
/>
|
||
</motion.div>
|
||
))}
|
||
</AnimatePresence>
|
||
|
||
{/* 折叠/展开按钮 */}
|
||
{hasMore && (
|
||
<motion.div
|
||
initial={{ scale: 0.9, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<Button
|
||
size={{ base: "xs", md: "sm" }}
|
||
variant="solid"
|
||
bg={collapseBg}
|
||
color={collapseTextColor}
|
||
_hover={{ bg: collapseHoverBg }}
|
||
_focus={{
|
||
outline: '2px solid',
|
||
outlineColor: 'blue.500',
|
||
outlineOffset: '2px',
|
||
}}
|
||
leftIcon={<Icon as={isExpanded ? MdExpandLess : MdExpandMore} />}
|
||
onClick={() => setIsExpanded(!isExpanded)}
|
||
aria-expanded={isExpanded}
|
||
aria-label={isExpanded ? '收起通知' : `展开查看还有 ${hiddenCount} 条通知`}
|
||
boxShadow="md"
|
||
borderRadius="md"
|
||
>
|
||
{isExpanded
|
||
? '收起通知'
|
||
: NOTIFICATION_CONFIG.collapse.textTemplate.replace('{count}', hiddenCount)
|
||
}
|
||
</Button>
|
||
</motion.div>
|
||
)}
|
||
</VStack>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default NotificationContainer;
|