53 lines
1.6 KiB
React
53 lines
1.6 KiB
React
import { User } from 'lucide-react';
|
|
import GlassButton from '../ui/GlassButton';
|
|
|
|
/**
|
|
* Header 组件
|
|
* 固定定位头部，包含 logo 和用户按钮
|
|
* @param {Object} props
|
|
* @param {boolean} props.showNav - 是否显示导航按钮
|
|
* @param {Function} props.onProfileClick - 用户按钮点击回调
|
|
*/
|
|
const Header = ({ showNav = false, onProfileClick }) => {
|
|
/**
|
|
* 处理 logo 点击，刷新页面
|
|
*/
|
|
const handleLogoClick = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 p-6 z-50 w-full flex justify-between items-center pointer-events-none">
|
|
{/* Logo 区域 */}
|
|
<div
|
|
className="flex items-center gap-3 pointer-events-auto cursor-pointer"
|
|
onClick={handleLogoClick}
|
|
>
|
|
<img
|
|
src="https://r2-bucket.flowith.net/f/cf8c6e7c020409c9/lifeline_app_logo_design_index_0%401024x1024.jpeg"
|
|
alt="logo"
|
|
className="w-10 h-10 rounded-full shadow-2xl border border-white/10"
|
|
/>
|
|
<h1 className="text-xl font-serif tracking-[0.2em] bg-clip-text text-transparent bg-gradient-to-r from-white to-white/50">
|
|
人生轨迹
|
|
</h1>
|
|
</div>
|
|
|
|
{/* 导航区域 */}
|
|
{showNav && (
|
|
<nav className="pointer-events-auto">
|
|
<GlassButton
|
|
variant="icon"
|
|
onClick={onProfileClick}
|
|
className="hover:shadow-orange-200/10 shadow-lg"
|
|
>
|
|
<User className="w-5 h-5" />
|
|
</GlassButton>
|
|
</nav>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|