修改促销、优化页面布局
Change-Id: Iae813b5b6557efa7059fe6d94bc32e96c984e4ea
diff --git a/src/components/AuthButton.jsx b/src/components/AuthButton.jsx
index b5cc431..246555a 100644
--- a/src/components/AuthButton.jsx
+++ b/src/components/AuthButton.jsx
@@ -4,11 +4,13 @@
const AuthButton = ({children, roles,onClick, ...rest }) => {
const {user} = useContext(UserContext);
const {levelRole} = user;
+
let clickFunc = onClick
if(!roles || roles.length === 0 || roles.includes(levelRole)){
clickFunc = onClick;
}else{
- clickFunc = () => {
+ clickFunc = (e) => {
+ e.preventDefault();
toast.error("权限不足");
}
}
diff --git a/src/components/Header.css b/src/components/Header.css
index 66fe1a0..a19f9e9 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -4,7 +4,7 @@
justify-content: space-between;
align-items: center;
padding: 10px 20px;
- background-color: #6b4f3b; /* 深棕色背景 */
+ background-color: #6c3e28; /* 深棕色背景 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
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>