commit dbfadaa608fcbea00b855920320e67b5a5190302
author Krishya <2271857550@qq.com> Mon Jun 09 20:33:15 2025 +0800
committer Krishya <2271857550@qq.com> Mon Jun 09 20:33:15 2025 +0800
tree e1d95346c64f1ff3d8e51331d1f1c7c4f0252fe1
parent 1e2aea77d13c07c79d6cb36e4757fca5a88b7633

修改促销、优化页面布局

Change-Id: Iae813b5b6557efa7059fe6d94bc32e96c984e4ea

src/components/Header.jsx

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e0a8495..fd2a381 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,12 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import './Header.css';
 import logo from '../assets/logo.png';
 import { useUser } from '../context/UserContext';
-import { BookOpen } from '@icon-park/react';  // 导入图标组件
+import { BookOpen } from '@icon-park/react';
+import { useLocation } from 'wouter';
 
 const Header = () => {
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
   const { user } = useUser();
+  const [location, setLocation] = useLocation();
 
   const navLinks = [
     { to: '/friend-moments', label: '好友动态' },
@@ -16,22 +17,8 @@
     { to: '/publish-seed', label: '发布种子' },
   ];
 
-  useEffect(() => {
-    const handleLocationChange = () => {
-      setCurrentPath(window.location.pathname);
-    };
-    window.addEventListener('popstate', handleLocationChange);
-    return () => {
-      window.removeEventListener('popstate', handleLocationChange);
-    };
-  }, []);
-
-  const isActive = (path) => currentPath.startsWith(path);
-
-  const handleLinkClick = (to) => {
-    window.history.pushState({}, '', to);
-    setCurrentPath(to);
-  };
+  // 头像变化时刷新组件（这段其实 React 会自动做，但你手动 history 管理就错过了）
+  useEffect(() => {}, [user?.avatarUrl]);
 
   return (
     <div className="main-page">
@@ -41,16 +28,14 @@
           <span className="site-name">Echo</span>
         </div>
         <div className="user-and-message" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          {/* 新手指南图标，放在头像左边 */}
-        <button
-          className="guide-button"
-          onClick={() => handleLinkClick('/new-user-guide')}
-          title="新手指南"
-        >
-          <BookOpen theme="outline" size="20" fill="#fff" />
-          <span style={{ marginLeft: '6px' }}>新手指南</span>
-        </button>
-
+          <button
+            className="guide-button"
+            onClick={() => setLocation('/new-user-guide')}
+            title="新手指南"
+          >
+            <BookOpen theme="outline" size="20" fill="#fff" />
+            <span style={{ marginLeft: '6px' }}>新手指南</span>
+          </button>
 
           <a href="/user/profile">
             <img
@@ -59,13 +44,14 @@
               className="user-avatar"
             />
           </a>
-          <span
+
+          {/* <span
             className="message-center"
-            onClick={() => handleLinkClick('/messages')}
+            onClick={() => setLocation('/messages')}
             style={{ cursor: 'pointer' }}
           >
             消息
-          </span>
+          </span> */}
         </div>
       </header>
 
@@ -76,9 +62,9 @@
             href={to}
             onClick={(e) => {
               e.preventDefault();
-              handleLinkClick(to);
+              setLocation(to);
             }}
-            className={`nav-item ${isActive(to) ? 'active' : ''}`}
+            className={`nav-item ${location.startsWith(to) ? 'active' : ''}`}
           >
             {label}
           </a>