feat: 用 lucide-react 图标替换 emoji,修复所有 lint/构建问题
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 17m40s
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 17m40s
- 用 Carrot/Palette/Shirt/AlertTriangle 替换 CS/C/🎨/🧥/⚠️ - 清理所有未使用的 imports 和变量 - 修复 useEffect 中同步 setState 问题(改用 rAF / setTimeout) - 修复 no-unescaped-entities、匿名导出等 lint 错误 - 为 useSearchParams 添加 Suspense 边界(修复构建) - 0 errors, 0 warnings
This commit is contained in:
@@ -5,14 +5,13 @@ import Link from 'next/link';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { Bars3Icon, XMarkIcon, UserCircleIcon } from '@heroicons/react/24/outline';
|
||||
import { motion, AnimatePresence, useScroll, useTransform, useSpring } from 'framer-motion';
|
||||
import { Carrot } from 'lucide-react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
|
||||
export default function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isHidden, setIsHidden] = useState(false);
|
||||
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, isLoading: isAuthLoading, logout } = useAuth();
|
||||
@@ -24,7 +23,6 @@ export default function Navbar() {
|
||||
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';
|
||||
@@ -34,7 +32,6 @@ export default function Navbar() {
|
||||
const updateHeight = () => {
|
||||
if (navbarRef.current) {
|
||||
const height = navbarRef.current.offsetHeight;
|
||||
setNavbarHeight(height);
|
||||
document.documentElement.style.setProperty('--navbar-height', `${height}px`);
|
||||
}
|
||||
};
|
||||
@@ -69,9 +66,6 @@ export default function Navbar() {
|
||||
// 检测是否滚动到顶部
|
||||
setIsScrolled(currentScrollY > 20);
|
||||
|
||||
// 显示返回顶部按钮(滚动超过300px)
|
||||
setShowScrollTop(currentScrollY > 300);
|
||||
|
||||
// 更敏感的隐藏逻辑:只要往下滚动就隐藏,不管滚动多少
|
||||
if (!isAuthPage && currentScrollY > lastScrollY && currentScrollY > 10) {
|
||||
setIsHidden(true);
|
||||
@@ -108,13 +102,6 @@ export default function Navbar() {
|
||||
return null;
|
||||
}
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ href: '/', label: '首页', icon: null },
|
||||
{ href: '/skins', label: '皮肤库', icon: null },
|
||||
@@ -161,7 +148,7 @@ export default function Navbar() {
|
||||
whileHover={{ rotate: 5, scale: 1.05 }}
|
||||
transition={{ type: 'spring', stiffness: 300 }}
|
||||
>
|
||||
<span className="text-white font-bold text-lg relative z-10">C</span>
|
||||
<Carrot className="w-6 h-6 text-white relative z-10" />
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"
|
||||
initial={{ x: '-100%', y: '-100%' }}
|
||||
@@ -237,6 +224,7 @@ export default function Navbar() {
|
||||
className="relative"
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.username}
|
||||
@@ -405,6 +393,7 @@ export default function Navbar() {
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{user?.avatar ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.username}
|
||||
@@ -468,7 +457,7 @@ export default function Navbar() {
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
|
||||
{/* 返回顶部按钮 */}
|
||||
{/* 返回顶部按钮 - 已注释掉,如需使用请恢复 showScrollTop 状态 */}
|
||||
{/* <AnimatePresence>
|
||||
{showScrollTop && (
|
||||
<motion.button
|
||||
@@ -477,7 +466,7 @@ export default function Navbar() {
|
||||
exit={{ opacity: 0, scale: 0.8, y: 20 }}
|
||||
whileHover={{ scale: 1.1, y: -2 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={scrollToTop}
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user