494d98bee5
- 添加触摸手势支持库 (react-spring + @use-gesture/react) - 照片模态框增加左右滑动切换功能 - 照片画廊增加下拉刷新功能 (移动端) - 优化所有按钮符合44px最小触摸目标标准 - 增强移动端导航体验，增加悬停和选中状态 - 创建设备信息检测钩子 (useDeviceInfo) - 开发优化图片组件，支持懒加载和骨架屏 - 改进移动端手势交互和视觉反馈 - 完善响应式断点系统和触摸设备检测 - 前端构建测试成功，开发服务器正常启动 Task 23 completed: 前端响应式设计优化
92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Menu, X, Camera } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface NavigationProps {
|
|
activeTab: string
|
|
onTabChange: (tab: string) => void
|
|
}
|
|
|
|
export function Navigation({ activeTab, onTabChange }: NavigationProps) {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
|
|
const navItems = [
|
|
{ id: "gallery", name: "作品集", href: "#gallery" },
|
|
{ id: "categories", name: "分类", href: "#categories" },
|
|
{ id: "tags", name: "标签", href: "#tags" },
|
|
{ id: "timeline", name: "时间线", href: "#timeline" },
|
|
{ id: "about", name: "关于我", href: "#about" },
|
|
{ id: "contact", name: "联系", href: "#contact" },
|
|
]
|
|
|
|
const handleTabClick = (item: { id: string; name: string; href: string }) => {
|
|
// Handle all tabs, not just gallery and timeline
|
|
onTabChange(item.id)
|
|
setIsMenuOpen(false)
|
|
}
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<div className="flex items-center space-x-2">
|
|
<Camera className="h-8 w-8 text-gray-900" />
|
|
<span className="text-xl font-light text-gray-900">PhotoStudio</span>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.name}
|
|
onClick={() => handleTabClick(item)}
|
|
className={`text-gray-700 hover:text-gray-900 transition-colors duration-200 font-light relative pb-1 min-h-[44px] px-2 ${
|
|
activeTab === item.id ? "text-gray-900" : ""
|
|
}`}
|
|
>
|
|
{item.name}
|
|
{activeTab === item.id && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-900 rounded-full" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="md:hidden min-h-[44px] min-w-[44px] p-2"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden py-4 border-t border-gray-100">
|
|
<div className="flex flex-col space-y-2">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.name}
|
|
onClick={() => handleTabClick(item)}
|
|
className={`text-left text-gray-700 hover:text-gray-900 transition-colors duration-200 font-light min-h-[44px] px-4 py-2 rounded-md hover:bg-gray-50 ${
|
|
activeTab === item.id ? "text-gray-900 font-medium bg-gray-50" : ""
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
// test change
|