216 lines
8.4 KiB
TypeScript
216 lines
8.4 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useState, useEffect } from 'react'
|
|
import { Menu, X, User, LogOut } from 'lucide-react'
|
|
import { useSession, signIn, signOut } from 'next-auth/react'
|
|
|
|
interface HeaderProps {
|
|
scrolled: boolean
|
|
}
|
|
|
|
export default function Header({ scrolled }: HeaderProps) {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
const { data: session, status } = useSession()
|
|
|
|
const navItems = [
|
|
{ name: '功能特性', href: '#features' },
|
|
{ name: '技术规格', href: '#specs' },
|
|
{ name: '定价', href: '#pricing' },
|
|
{ name: '更新日志', href: '/changelog' },
|
|
{ name: '联系我们', href: '#contact' },
|
|
]
|
|
|
|
useEffect(() => {
|
|
if (mobileMenuOpen) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = 'unset'
|
|
}
|
|
}, [mobileMenuOpen])
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
scrolled ? 'glass-effect apple-shadow' : 'bg-transparent'
|
|
}`}
|
|
>
|
|
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16 sm:h-20">
|
|
{/* Logo */}
|
|
<div className="flex items-center space-x-3">
|
|
<div className="relative w-10 h-10 sm:w-12 sm:h-12">
|
|
<Image
|
|
src="/images/logo.png"
|
|
alt="FLNXI Logo"
|
|
fill
|
|
className="object-contain"
|
|
priority
|
|
/>
|
|
</div>
|
|
<span className="text-xl sm:text-2xl font-semibold text-apple-gray-900">
|
|
FLNXI
|
|
</span>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-6">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-apple-gray-600 hover:text-apple-blue transition-colors duration-200 text-sm font-medium"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
<a
|
|
href="http://sc.flnxi.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="px-5 py-2 bg-apple-blue text-white rounded-full text-sm font-medium button-hover apple-shadow"
|
|
>
|
|
体验演示
|
|
</a>
|
|
|
|
{/* Login/User Info */}
|
|
{status === 'loading' ? (
|
|
<div className="w-9 h-9 rounded-full bg-apple-gray-200 animate-pulse" />
|
|
) : session ? (
|
|
// 已登录 - 显示用户信息
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex items-center space-x-2 px-4 py-2 bg-apple-gray-50 rounded-full">
|
|
<User className="w-4 h-4 text-apple-blue" />
|
|
<span className="text-sm font-medium text-apple-gray-700">
|
|
{session.user?.name || session.user?.email}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="p-2 text-apple-gray-600 hover:text-red-600 hover:bg-red-50 rounded-full transition-all"
|
|
title="退出登录"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
// 未登录 - 显示注册和登录按钮
|
|
<div className="flex items-center space-x-3">
|
|
<a
|
|
href="/auth/signup"
|
|
className="px-5 py-2 text-apple-gray-700 hover:text-apple-blue rounded-full text-sm font-medium transition-colors"
|
|
>
|
|
注册
|
|
</a>
|
|
<button
|
|
onClick={() => signIn()}
|
|
className="flex items-center space-x-2 px-5 py-2 bg-apple-blue text-white hover:bg-blue-700 rounded-full text-sm font-medium transition-all apple-shadow"
|
|
>
|
|
<User className="w-4 h-4" />
|
|
<span>登录</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden p-2 rounded-lg hover:bg-apple-gray-100 transition-colors"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? (
|
|
<X className="w-6 h-6 text-apple-gray-800" />
|
|
) : (
|
|
<Menu className="w-6 h-6 text-apple-gray-800" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
{/* Mobile Menu */}
|
|
<div
|
|
className={`fixed inset-0 z-40 md:hidden transition-opacity duration-300 ${
|
|
mobileMenuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
|
|
}`}
|
|
>
|
|
<div className="absolute inset-0 bg-black/20 backdrop-blur-sm" onClick={() => setMobileMenuOpen(false)} />
|
|
<div
|
|
className={`absolute top-20 left-4 right-4 bg-white rounded-2xl apple-shadow-lg p-6 transition-transform duration-300 ${
|
|
mobileMenuOpen ? 'translate-y-0' : '-translate-y-4'
|
|
}`}
|
|
>
|
|
<div className="flex flex-col space-y-4">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-apple-gray-700 hover:text-apple-blue transition-colors duration-200 text-lg font-medium py-2"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
<a
|
|
href="http://sc.flnxi.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="px-6 py-3 bg-apple-blue text-white rounded-full text-center font-medium button-hover apple-shadow mt-2"
|
|
>
|
|
体验演示
|
|
</a>
|
|
|
|
{/* Mobile Login/User Info */}
|
|
<div className="pt-4 border-t border-apple-gray-200">
|
|
{status === 'loading' ? (
|
|
<div className="h-12 bg-apple-gray-200 rounded-full animate-pulse" />
|
|
) : session ? (
|
|
// 已登录
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-3 px-4 py-3 bg-apple-gray-50 rounded-xl">
|
|
<User className="w-5 h-5 text-apple-blue" />
|
|
<span className="text-sm font-medium text-apple-gray-700">
|
|
{session.user?.name || session.user?.email}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-red-50 text-red-600 rounded-full font-medium hover:bg-red-100 transition-all"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
<span>退出登录</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
// 未登录 - 显示注册和登录按钮
|
|
<div className="space-y-3">
|
|
<a
|
|
href="/auth/signup"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="w-full flex items-center justify-center space-x-2 px-6 py-3 border-2 border-apple-gray-300 text-apple-gray-700 rounded-full font-medium hover:border-apple-blue hover:text-apple-blue transition-all"
|
|
>
|
|
<User className="w-5 h-5" />
|
|
<span>注册账户</span>
|
|
</a>
|
|
<button
|
|
onClick={() => {
|
|
signIn()
|
|
setMobileMenuOpen(false)
|
|
}}
|
|
className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-apple-blue text-white rounded-full font-medium hover:bg-blue-700 transition-all apple-shadow"
|
|
>
|
|
<User className="w-5 h-5" />
|
|
<span>登录</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|