From 261a7bf3294e3293dc46cb7e41cab114a9ecda02 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 11 Nov 2025 20:20:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(community):=20=E4=BF=AE=E5=A4=8D=20React=20?=
 =?UTF-8?q?Hooks=20=E9=A1=BA=E5=BA=8F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 Alert 组件中的 useColorModeValue Hook 调用提取到组件顶层，
避免在条件渲染中调用 Hook 导致的顺序变化问题。

## 问题
- useColorModeValue 在 showNotificationBanner 条件渲染内部调用
- 当条件状态变化时，Hooks 调用顺序发生改变
- 触发 React 警告：Hooks 顺序改变（第 75 个 Hook 从 undefined 变为 useContext）

## 解决方案
- 将 alertBgColor 和 alertBorderColor 提取到组件顶层
- 确保所有 Hooks 在每次渲染时以相同顺序调用
- 符合 React Hooks 规则：只在顶层调用 Hooks

## 变更文件
src/views/Community/index.js:
- 新增 alertBgColor 常量（第 47 行）
- 新增 alertBorderColor 常量（第 48 行）
- Alert 组件使用变量替代直接调用 Hook

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/views/Community/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/Community/index.js b/src/views/Community/index.js
index 438d70e3..ff0a43c0 100644
--- a/src/views/Community/index.js
+++ b/src/views/Community/index.js
@@ -44,6 +44,8 @@ const Community = () => {
 
   // Chakra UI hooks
   const bgColor = useColorModeValue('gray.50', 'gray.900');
+  const alertBgColor = useColorModeValue('blue.50', 'blue.900');
+  const alertBorderColor = useColorModeValue('blue.200', 'blue.700');
 
   // Ref：用于首次滚动到内容区域
   const containerRef = useRef(null);
@@ -145,9 +147,9 @@ const Community = () => {
             borderRadius="lg"
             mb={4}
             boxShadow="md"
-            bg={useColorModeValue('blue.50', 'blue.900')}
+            bg={alertBgColor}
             borderWidth="1px"
-            borderColor={useColorModeValue('blue.200', 'blue.700')}
+            borderColor={alertBorderColor}
           >
             <AlertIcon />
             <Box flex="1">