From fe5362c4bd76995226c5fd5a8bf5bde4865fdc45 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 16:33:32 +0800
Subject: [PATCH] =?UTF-8?q?perf(HomeNavbar):=20=E5=87=8F=E5=B0=91=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E6=97=A5=E5=BF=97=E5=99=AA=E9=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题:
- 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          | 14 ++++----
 .../Navbars/components/ThemeToggleButton.js   | 33 +++++++++++++++++++
 2 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Navbars/components/ThemeToggleButton.js

diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js
index 55b3ce0c..81045a90 100644
--- a/src/components/Navbars/HomeNavbar.js
+++ b/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', '组件渲染状态', {
-        hasUser: !!user,
-        isAuthenticated,
-        isLoading,
-        userId: user?.id
-    });
+    // 添加调试信息 - 暂时注释以减少日志噪音
+    // logger.debug('HomeNavbar', '组件渲染状态', {
+    //     hasUser: !!user,
+    //     isAuthenticated,
+    //     isLoading,
+    //     userId: user?.id
+    // });
 
     // 获取显示名称的函数
     const getDisplayName = () => {
diff --git a/src/components/Navbars/components/ThemeToggleButton.js b/src/components/Navbars/components/ThemeToggleButton.js
new file mode 100644
index 00000000..57e0b3d1
--- /dev/null
+++ b/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;