Initial commit: CarrotSkin project setup
This commit is contained in:
@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { Bars3Icon, XMarkIcon, UserCircleIcon } from '@heroicons/react/24/outline';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { motion, AnimatePresence, useScroll, useTransform, useSpring } from 'framer-motion';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
|
||||
export default function Navbar() {
|
||||
@@ -13,10 +13,18 @@ export default function Navbar() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [showScrollTop, setShowScrollTop] = useState(false);
|
||||
const [navbarHeight, setNavbarHeight] = useState(0);
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
const navbarRef = useRef<HTMLElement>(null);
|
||||
const { user, isAuthenticated, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const { scrollY } = useScroll();
|
||||
|
||||
// 弹簧动画效果
|
||||
const springConfig = { stiffness: 300, damping: 30 };
|
||||
const navbarY = useSpring(useTransform(scrollY, [0, 100], [0, -100]), springConfig);
|
||||
const navbarOpacity = useSpring(useTransform(scrollY, [0, 50], [1, 0.95]), springConfig);
|
||||
const scrollProgressSpring = useSpring(scrollProgress, springConfig);
|
||||
|
||||
// 在auth页面隐藏navbar
|
||||
const isAuthPage = pathname === '/auth';
|
||||
@@ -36,6 +44,19 @@ export default function Navbar() {
|
||||
return () => window.removeEventListener('resize', updateHeight);
|
||||
}, []);
|
||||
|
||||
// 滚动进度计算
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
|
||||
setScrollProgress(progress);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let lastScrollY = 0;
|
||||
let ticking = false;
|
||||
@@ -94,294 +115,377 @@ export default function Navbar() {
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.nav
|
||||
ref={navbarRef}
|
||||
initial={{ y: 0 }}
|
||||
animate={{ y: isHidden ? -100 : 0 }}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
className="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg border-b border-gray-200/50 dark:border-gray-700/50"
|
||||
style={{ willChange: 'transform' }}
|
||||
>
|
||||
<div className={`
|
||||
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
|
||||
${isScrolled ? 'py-3' : 'py-4'}
|
||||
transition-all duration-300
|
||||
`}>
|
||||
<div className="flex justify-between items-center">
|
||||
{/* Logo */}
|
||||
<motion.div
|
||||
className="flex items-center"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Link href="/" className="flex items-center space-x-3 group">
|
||||
<motion.div
|
||||
className="w-10 h-10 bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg"
|
||||
whileHover={{ rotate: 5, scale: 1.05 }}
|
||||
transition={{ type: 'spring', stiffness: 300 }}
|
||||
>
|
||||
<span className="text-white font-bold text-lg">C</span>
|
||||
</motion.div>
|
||||
<motion.span
|
||||
className="text-2xl font-black bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
CarrotSkin
|
||||
</motion.span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
const navItems = [
|
||||
{ href: '/', label: '首页', icon: null },
|
||||
{ href: '/skins', label: '皮肤库', icon: null },
|
||||
];
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-6">
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-all duration-200 font-medium relative group px-3 py-2 rounded-lg hover:bg-orange-500/10 dark:hover:bg-orange-400/10"
|
||||
>
|
||||
首页
|
||||
<motion.span
|
||||
className="absolute -bottom-0.5 left-3 right-3 h-0.5 bg-gradient-to-r from-orange-400 to-orange-600"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Link
|
||||
href="/skins"
|
||||
className="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-all duration-200 font-medium relative group px-3 py-2 rounded-lg hover:bg-orange-500/10 dark:hover:bg-orange-400/10"
|
||||
>
|
||||
皮肤库
|
||||
<motion.span
|
||||
className="absolute -bottom-0.5 left-3 right-3 h-0.5 bg-gradient-to-r from-orange-400 to-orange-600"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
|
||||
{/* 用户头像框 - 类似知乎和哔哩哔哩的设计 */}
|
||||
{isAuthenticated ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="flex items-center space-x-3 group"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
{user?.avatar ? (
|
||||
<motion.div
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
>
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.username}
|
||||
className="w-9 h-9 rounded-full border-2 border-orange-500/30 group-hover:border-orange-500 transition-all duration-200 shadow-md"
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/20 to-orange-600/20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
>
|
||||
<UserCircleIcon className="w-9 h-9 text-gray-400 group-hover:text-orange-500 transition-all duration-200" />
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/20 to-orange-600/20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<motion.span
|
||||
className="text-gray-700 dark:text-gray-300 group-hover:text-orange-500 dark:group-hover:text-orange-400 transition-all duration-200 font-medium"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
{user?.username}
|
||||
</motion.span>
|
||||
</Link>
|
||||
return (
|
||||
<>
|
||||
<motion.nav
|
||||
ref={navbarRef}
|
||||
style={{
|
||||
y: isHidden ? navbarY : 0,
|
||||
opacity: navbarOpacity
|
||||
}}
|
||||
initial={{ y: 0 }}
|
||||
animate={{ y: isHidden ? -100 : 0 }}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
className="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg border-b border-gray-200/50 dark:border-gray-700/50"
|
||||
style={{ willChange: 'transform' }}
|
||||
>
|
||||
{/* 滚动进度条 */}
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-orange-400 to-amber-500"
|
||||
style={{ width: `${scrollProgress}%` }}
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${scrollProgress}%` }}
|
||||
transition={{ duration: 0.1 }}
|
||||
/>
|
||||
|
||||
<div className={`
|
||||
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
|
||||
${isScrolled ? 'py-3' : 'py-4'}
|
||||
transition-all duration-300
|
||||
`}>
|
||||
<div className="flex justify-between items-center">
|
||||
{/* Logo */}
|
||||
<motion.div
|
||||
className="flex items-center"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Link href="/" className="flex items-center space-x-3 group">
|
||||
<motion.div
|
||||
className="w-10 h-10 bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg relative overflow-hidden"
|
||||
whileHover={{ rotate: 5, scale: 1.05 }}
|
||||
transition={{ type: 'spring', stiffness: 300 }}
|
||||
>
|
||||
<span className="text-white font-bold text-lg relative z-10">C</span>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"
|
||||
initial={{ x: '-100%', y: '-100%' }}
|
||||
whileHover={{ x: '100%', y: '100%' }}
|
||||
transition={{ duration: 0.6 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.button
|
||||
onClick={handleLogout}
|
||||
className="relative overflow-hidden border-2 border-orange-500 text-orange-500 hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 group"
|
||||
<motion.span
|
||||
className="text-2xl font-black bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
CarrotSkin
|
||||
</motion.span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-6">
|
||||
{navItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.href}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<motion.span
|
||||
className="absolute inset-0 w-0 bg-gradient-to-r from-orange-400 to-orange-600 transition-all duration-300 group-hover:w-full"
|
||||
initial={{ width: 0 }}
|
||||
whileHover={{ width: '100%' }}
|
||||
/>
|
||||
<span className="relative z-10">退出登录</span>
|
||||
</motion.button>
|
||||
</div>
|
||||
) : (
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Link
|
||||
href="/auth"
|
||||
className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-all duration-200 group"
|
||||
>
|
||||
<motion.div
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-all duration-200 font-medium relative group px-3 py-2 rounded-lg hover:bg-orange-500/10 dark:hover:bg-orange-400/10"
|
||||
>
|
||||
<UserCircleIcon className="w-7 h-7 text-gray-400 group-hover:text-orange-500 transition-all duration-200" />
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/20 to-orange-600/20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
{item.label}
|
||||
<motion.span
|
||||
className="absolute -bottom-0.5 left-3 right-3 h-0.5 bg-gradient-to-r from-orange-400 to-orange-600"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
<span className="font-medium">登录</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden flex items-center">
|
||||
<motion.button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200 p-2"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
{isOpen ? <XMarkIcon className="w-6 h-6" /> : <Bars3Icon className="w-6 h-6" />}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||||
className="md:hidden bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-t border-gray-200/50 dark:border-gray-700/50"
|
||||
>
|
||||
<div className="px-4 py-4 space-y-1">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.05 }}
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
className="block px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200 font-medium"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
首页
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Link
|
||||
href="/skins"
|
||||
className="block px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200 font-medium"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
皮肤库
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
|
||||
{pathname === item.href && (
|
||||
<motion.span
|
||||
className="absolute -bottom-0.5 left-3 right-3 h-0.5 bg-gradient-to-r from-orange-400 to-orange-600"
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* 用户头像框 - 增强的微交互 */}
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
<div className="flex items-center space-x-4">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="block px-4 py-3 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200"
|
||||
className="flex items-center space-x-3 group"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{user?.avatar ? (
|
||||
{user?.avatar ? (
|
||||
<motion.div
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.username}
|
||||
className="w-8 h-8 rounded-full border-2 border-orange-500/30"
|
||||
className="w-9 h-9 rounded-full border-2 border-orange-500/30 group-hover:border-orange-500 transition-all duration-200 shadow-md"
|
||||
/>
|
||||
) : (
|
||||
<UserCircleIcon className="w-8 h-8 text-gray-400" />
|
||||
)}
|
||||
<span className="text-gray-700 dark:text-gray-300 font-medium">{user?.username}</span>
|
||||
</div>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/20 to-orange-600/20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute -inset-1 rounded-full border-2 border-orange-400/50"
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
whileHover={{ scale: 1.2, opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
<UserCircleIcon className="w-9 h-9 text-gray-400 group-hover:text-orange-500 transition-all duration-200" />
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/20 to-orange-600/20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<motion.span
|
||||
className="text-gray-700 dark:text-gray-300 group-hover:text-orange-500 dark:group-hover:text-orange-400 transition-all duration-200 font-medium"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
{user?.username}
|
||||
</motion.span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
<motion.button
|
||||
onClick={handleLogout}
|
||||
className="relative overflow-hidden border-2 border-orange-500 text-orange-500 hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 group"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
initial={{ opacity: 0, x: 10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.25 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="block w-full text-left px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200 font-medium"
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</motion.div>
|
||||
</>
|
||||
<motion.span
|
||||
className="absolute inset-0 w-0 bg-gradient-to-r from-orange-400 to-orange-600 transition-all duration-300 group-hover:w-full"
|
||||
initial={{ width: 0 }}
|
||||
whileHover={{ width: '100%' }}
|
||||
/>
|
||||
<span className="relative z-10">退出登录</span>
|
||||
</motion.button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
initial={{ opacity: 0, x: 10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Link
|
||||
href="/auth"
|
||||
className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-all duration-200 group"
|
||||
>
|
||||
<motion.div
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1, rotate: 10 }}
|
||||
>
|
||||
<UserCircleIcon className="w-7 h-7 text-gray-400 group-hover:text-orange-500 transition-all duration-200" />
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-orange-400/20 to-orange-600/20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
<span className="font-medium">登录</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden flex items-center">
|
||||
<motion.button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200 p-2"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
animate={{ rotate: isOpen ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{isOpen ? (
|
||||
<motion.div
|
||||
key="close"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<XMarkIcon className="w-6 h-6" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="open"
|
||||
initial={{ rotate: 90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: -90, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Bars3Icon className="w-6 h-6" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
className="md:hidden bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-t border-gray-200/50 dark:border-gray-700/50 overflow-hidden"
|
||||
>
|
||||
<div className="px-4 py-4 space-y-1">
|
||||
{navItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.href}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
>
|
||||
<Link
|
||||
href="/auth"
|
||||
href={item.href}
|
||||
className="block px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200 font-medium"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
登录
|
||||
{item.label}
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.25 }}
|
||||
>
|
||||
<Link
|
||||
href="/auth"
|
||||
className="block px-4 py-3 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl font-medium text-center"
|
||||
onClick={handleLinkClick}
|
||||
))}
|
||||
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
注册
|
||||
</Link>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="block px-4 py-3 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{user?.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.username}
|
||||
className="w-8 h-8 rounded-full border-2 border-orange-500/30"
|
||||
/>
|
||||
) : (
|
||||
<UserCircleIcon className="w-8 h-8 text-gray-400" />
|
||||
)}
|
||||
<span className="text-gray-700 dark:text-gray-300 font-medium">{user?.username}</span>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.25 }}
|
||||
>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="block w-full text-left px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200 font-medium"
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</motion.div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Link
|
||||
href="/auth"
|
||||
className="block px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 rounded-lg transition-all duration-200 font-medium"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
登录
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.25 }}
|
||||
>
|
||||
<Link
|
||||
href="/auth"
|
||||
className="block px-4 py-3 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl font-medium text-center"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
注册
|
||||
</Link>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
|
||||
{/* 返回顶部按钮 */}
|
||||
<AnimatePresence>
|
||||
{showScrollTop && (
|
||||
<motion.button
|
||||
initial={{ opacity: 0, scale: 0.8, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.8, y: 20 }}
|
||||
whileHover={{ scale: 1.1, y: -2 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-8 right-8 z-40 bg-gradient-to-r from-orange-500 to-amber-500 text-white p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-200"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, -3, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.button>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user