feat: 消息通知能力测试

src/components/NotificationContainer/index.js

@@ -299,8 +299,8 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
     const isDark = useColorModeValue(false, true);
     const priorityBgOpacity = getPriorityBgOpacity(priority, isDark);
 
-    // 根据优先级调整背景色深度
-    const getPriorityBgColor = () => {
+    // 根据优先级调整背景色深度（使用 useMemo 缓存计算结果）
+    const priorityBgColor = useMemo(() => {
         const colorScheme = typeConfig.colorScheme;
         // 亮色模式：根据优先级使用不同深度的颜色
         if (!isDark) {
@@ -323,31 +323,41 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
                 return 'gray.800';
             }
         }
-    };
+    }, [isDark, priority, typeConfig]);
 
-    // 颜色配置 - 支持亮色/暗色模式（使用 useMemo 优化）
+    // 颜色配置 - 支持亮色/暗色模式
+    // ⚠️ 必须在组件顶层调用 useColorModeValue，不能在 useMemo 内部调用
+    const borderColor = useColorModeValue(
+        typeConfig.borderColor,
+        typeConfig.darkBorderColor || `${typeConfig.colorScheme}.400`
+    );
+    const iconColor = useColorModeValue(
+        typeConfig.iconColor,
+        typeConfig.darkIconColor || `${typeConfig.colorScheme}.300`
+    );
+    const textColor = useColorModeValue('gray.800', 'gray.100');
+    const subTextColor = useColorModeValue('gray.600', 'gray.300');
+    const metaTextColor = useColorModeValue('gray.500', 'gray.500');
+    const hoverBgColor = useColorModeValue(
+        typeConfig.hoverBg,
+        typeConfig.darkHoverBg || `${typeConfig.colorScheme}.700`
+    );
+    const closeButtonHoverBgColor = useColorModeValue(
+        `${typeConfig.colorScheme}.200`,
+        `${typeConfig.colorScheme}.700`
+    );
+
+    // 使用 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]);
+        bg: priorityBgColor,
+        border: borderColor,
+        icon: iconColor,
+        text: textColor,
+        subText: subTextColor,
+        metaText: metaTextColor,
+        hoverBg: hoverBgColor,
+        closeButtonHoverBg: closeButtonHoverBgColor,
+    }), [priorityBgColor, borderColor, iconColor, textColor, subTextColor, metaTextColor, hoverBgColor, closeButtonHoverBgColor]);
 
     // 点击处理（只有真正可点击时才执行）- 使用 useCallback 优化
     const handleClick = useCallback(() => {
@@ -636,6 +646,11 @@ const NotificationContainer = () => {
         }
     }, [notifications]);
 
+    // ⚠️ 颜色配置 - 必须在条件return之前调用所有Hooks
+    const collapseBg = useColorModeValue('gray.100', 'gray.700');
+    const collapseHoverBg = useColorModeValue('gray.200', 'gray.600');
+    const collapseTextColor = useColorModeValue('gray.700', 'gray.200');
+
     // 如果没有通知，不渲染
     if (notifications.length === 0) {
         return null;
@@ -647,11 +662,6 @@ const NotificationContainer = () => {
     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键或空格键查看详情。`