perf(HomeNavbar): 减少渲染日志噪音

问题:
- HomeNavbar 每次渲染都输出 debug 日志
- 通知系统变化导致频繁渲染(每7-8秒一次)
- 日志输出影响控制台可读性

临时方案:
- 注释掉渲染状态 debug 日志
- 创建 ThemeToggleButton 独立组件(为future优化准备)

后续优化:
- TODO: 完整拆分 HomeNavbar 为多个子组件
- TODO: 使用 React.memo 减少不必要渲染
- TODO: 优化 Context 订阅策略

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Navbars/HomeNavbar.js

@@ -516,13 +516,13 @@ export default function HomeNavbar() {
     const prevUserIdRef = React.useRef(userId);
     const prevIsAuthenticatedRef = React.useRef(isAuthenticated);
 
-    // 添加调试信息
+    // 添加调试信息 - 暂时注释以减少日志噪音
-    logger.debug('HomeNavbar', '组件渲染状态', {
+    // logger.debug('HomeNavbar', '组件渲染状态', {
-        hasUser: !!user,
+    //     hasUser: !!user,
-        isAuthenticated,
+    //     isAuthenticated,
-        isLoading,
+    //     isLoading,
-        userId: user?.id
+    //     userId: user?.id
-    });
+    // });
 
     // 获取显示名称的函数
     const getDisplayName = () => {

src/components/Navbars/components/ThemeToggleButton.js

@@ -0,0 +1,33 @@
+// src/components/Navbars/components/ThemeToggleButton.js
+import React, { memo } from 'react';
+import { IconButton, useColorMode, Tooltip } from '@chakra-ui/react';
+import { SunIcon, MoonIcon } from '@chakra-ui/icons';
+
+/**
+ * 主题切换按钮组件
+ *
+ * 性能优化：
+ * - 使用 memo 避免父组件重新渲染时的不必要更新
+ * - 只依赖 colorMode，当主题切换时才重新渲染
+ *
+ * @returns {JSX.Element}
+ */
+const ThemeToggleButton = memo(() => {
+    const { colorMode, toggleColorMode } = useColorMode();
+
+    return (
+        <Tooltip label={colorMode === 'light' ? '切换到暗色模式' : '切换到亮色模式'}>
+            <IconButton
+                aria-label="切换主题"
+                icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+                onClick={toggleColorMode}
+                variant="ghost"
+                size="md"
+            />
+        </Tooltip>
+    );
+});
+
+ThemeToggleButton.displayName = 'ThemeToggleButton';
+
+export default ThemeToggleButton;