fix-img
Change-Id: Ida77fc6aed06b28e41e2abcb6ae09d5f63d016f2
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 50e6d37..10e8efb 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,90 +1,11 @@
-// import React, { useState, useEffect } from 'react';
-// import './Header.css'; // 导入 Header.css 文件
-// import logo from '../assets/logo.png';
-
-// const Header = () => {
-// const [currentPath, setCurrentPath] = useState(window.location.pathname);
-
-// // 提取所有页面路径，简化 active 类逻辑
-// const navLinks = [
-// { to: '/friend-moments', label: '好友动态' },
-// { to: '/forum', label: '论坛' },
-// { to: '/interest-groups', label: '兴趣小组' },
-// { to: '/seed-list', label: '种子列表' },
-// { 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); // 更新当前路径状态
-// };
-
-// return (
-// <div className="main-page">
-// {/* 顶部栏 */}
-// <header className="header">
-// {/* 左侧 logo 和网站名称 */}
-// <div className="logo-and-name">
-// <img src={logo} alt="网站 logo" className="logo" />
-// <span className="site-name">Echo</span>
-// </div>
-// {/* 右侧用户头像和消息中心 */}
-// <div className="user-and-message">
-// {/* 用户头像点击跳转到个人主页 */}
-// <a href="/user/profile">
-// <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
-// </a>
-// <span className="message-center">消息</span>
-// </div>
-// </header>
-
-// {/* 导航栏 */}
-// <nav className="nav">
-// {navLinks.map(({ to, label }) => (
-// <a
-// key={to}
-// href={to}
-// onClick={(e) => {
-// e.preventDefault(); // 防止默认跳转行为
-// handleLinkClick(to); // 手动更新当前路径
-// }}
-// className={`nav-item ${isActive(to) ? 'active' : ''}`}
-// >
-// {label}
-// </a>
-// ))}
-// </nav>
-// </div>
-// );
-// };
-
-// export default Header;
-
import React, { useState, useEffect } from 'react';
import './Header.css';
import logo from '../assets/logo.png';
+import { useUser } from '../context/UserContext';
const Header = () => {
const [currentPath, setCurrentPath] = useState(window.location.pathname);
+ const { user } = useUser();
const navLinks = [
{ to: '/friend-moments', label: '好友动态' },
@@ -120,11 +41,14 @@
</div>
<div className="user-and-message">
<a href="/user/profile">
- <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
+ <img
+ src={user?.avatarUrl}
+ alt="用户头像"
+ className="user-avatar"
+ />
</a>
- {/* 修改这里，点击跳转消息页面 */}
- <span
- className="message-center"
+ <span
+ className="message-center"
onClick={() => handleLinkClick('/messages')}
style={{ cursor: 'pointer' }}
>
@@ -135,8 +59,8 @@
<nav className="nav">
{navLinks.map(({ to, label }) => (
- <a
- key={to}
+ <a
+ key={to}
href={to}
onClick={(e) => {
e.preventDefault();
diff --git a/src/components/utils/avatar.js b/src/components/utils/avatar.js
new file mode 100644
index 0000000..ba13e1a
--- /dev/null
+++ b/src/components/utils/avatar.js
@@ -0,0 +1,5 @@
+const avatarBaseUrl = process.env.REACT_APP_AVATAR_BASE_URL;
+
+export const formatAvatarUrl = (avatarPath) => {
+ return avatarPath ? `${avatarBaseUrl}${avatarPath}` : 'https://example.com/default-avatar.jpg';
+};