fix(NotificationContainer): 修复 React Hooks 调用顺序错误
**问题描述**
React 检测到 NotificationItem 组件中 Hooks 调用顺序不一致：
```
Warning: React has detected a change in the order of Hooks called by null.
Previous render: 24. useCallback
Next render: 25. useContext
```
**根本原因**
在第 433 行，`useColorModeValue` Hook 在条件对象展开中被调用：
```javascript
{...(isNewest && {
borderTopColor: useColorModeValue(...), // ❌ 违反 Hooks 规则
})}
```
当 `isNewest` 值变化时：
- `isNewest = false` → Hook 不调用
- `isNewest = true` → Hook 调用
- 导致不同渲染的 Hooks 数量不一致
**React Hooks 规则**
> Hooks 必须在组件顶层调用，不能在条件语句、循环或嵌套函数中调用
**修复内容**
1. **将 Hook 移到组件顶层** (第 349-353 行)
```javascript
// 最新通知的 borderTopColor（避免在条件语句中调用 Hook）
const newestBorderTopColor = useColorModeValue(
`${typeConfig.colorScheme}.100`,
`${typeConfig.colorScheme}.700`
);
```
2. **添加到 colors 对象** (第 365 行)
```javascript
const colors = useMemo(() => ({
// ... 其他颜色
newestBorderTop: newestBorderTopColor,
}), [/* dependencies */]);
```
3. **在 JSX 中使用预计算的值** (第 439 行)
```diff
{...(isNewest && {
- borderTopColor: useColorModeValue(...),
+ borderTopColor: colors.newestBorderTop,
})}
```
**修复验证**
- ✅ 所有 Hooks 在每次渲染都以相同顺序调用
- ✅ 消除 React Hooks 警告
- ✅ 功能保持不变（视觉效果一致）
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
0364b3a927