Skip to content

Commit b4695e8

Browse files
h7mlclaude
h7ml
and
claude
committed
refactor: 优化Header组件,移动端适配
改进内容: - 移除特性标签(AI友好/Markdown/实时预览) - 以菜单导航为主,简化界面 - 添加移动端Sheet侧边栏菜单 - 响应式Logo和文字大小 - lg屏幕以下显示汉堡菜单 - 移动端完整功能访问 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 0f1d8ee commit b4695e8

1 file changed

Lines changed: 94 additions & 28 deletions

File tree

‎src/components/Header.tsx‎

Lines changed: 94 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,34 @@ import { useState } from 'react'
44
import { useSession } from 'next-auth/react'
55
import Link from 'next/link'
66
import { Button } from '@/components/ui/button'
7-
import { Badge } from '@/components/ui/badge'
8-
import { Separator } from '@/components/ui/separator'
9-
import { Code, Github, Sparkles, FileText, ShoppingBag, Heart, Clock } from 'lucide-react'
7+
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
8+
import { Code, Github, ShoppingBag, Heart, Clock, Menu, User, FileText } from 'lucide-react'
109
import { LoginDialog } from '@/components/LoginDialog'
1110
import { ThemeToggle } from '@/components/ThemeToggle'
1211

1312
export function Header() {
1413
const { data: session } = useSession()
1514
const [loginDialogOpen, setLoginDialogOpen] = useState(false)
15+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
1616

1717
return (
1818
<>
1919
<header className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50 shadow-sm transition-colors">
20-
<div className="container mx-auto px-4 py-4">
20+
<div className="container mx-auto px-4 py-3">
2121
<div className="flex items-center justify-between">
22-
<Link href="/" className="flex items-center space-x-3">
23-
<div className="w-10 h-10 bg-gradient-to-r from-violet-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg">
24-
<Code className="w-6 h-6 text-white" />
22+
{/* Logo */}
23+
<Link href="/" className="flex items-center space-x-2 md:space-x-3">
24+
<div className="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-r from-violet-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg">
25+
<Code className="w-4 h-4 md:w-6 md:h-6 text-white" />
2526
</div>
26-
<div>
27-
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">HTML2WEB</h1>
28-
<p className="text-xs text-gray-600 dark:text-gray-400">粘贴代码,分享创意!</p>
27+
<div className="hidden sm:block">
28+
<h1 className="text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100">HTML2WEB</h1>
29+
<p className="text-xs text-gray-600 dark:text-gray-400 hidden md:block">粘贴代码,分享创意!</p>
2930
</div>
3031
</Link>
31-
<div className="flex items-center space-x-2">
32-
<Badge variant="secondary" className="bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800">
33-
<Sparkles className="w-3 h-3 mr-1" />
34-
AI 友好
35-
</Badge>
36-
<Badge variant="secondary" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 border-blue-200 dark:border-blue-800">
37-
<FileText className="w-3 h-3 mr-1" />
38-
Markdown
39-
</Badge>
40-
<Badge variant="outline" className="bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 dark:text-gray-300">实时预览</Badge>
41-
<Separator orientation="vertical" className="h-6" />
32+
33+
{/* Desktop Navigation */}
34+
<nav className="hidden lg:flex items-center space-x-1">
4235
<Link href="/market">
4336
<Button variant="ghost" size="sm" className="hover:bg-purple-50 dark:hover:bg-purple-900/30 text-purple-600 dark:text-purple-400">
4437
<ShoppingBag className="w-4 h-4 mr-1" />
@@ -50,13 +43,13 @@ export function Header() {
5043
<Link href="/favorites">
5144
<Button variant="ghost" size="sm" className="hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400">
5245
<Heart className="w-4 h-4 mr-1" />
53-
我的收藏
46+
收藏
5447
</Button>
5548
</Link>
5649
<Link href="/history">
5750
<Button variant="ghost" size="sm" className="hover:bg-blue-50 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400">
5851
<Clock className="w-4 h-4 mr-1" />
59-
浏览历史
52+
历史
6053
</Button>
6154
</Link>
6255
</>
@@ -67,10 +60,17 @@ export function Header() {
6760
GitHub
6861
</Button>
6962
</Link>
63+
<Link href="/api-docs">
64+
<Button variant="ghost" size="sm" className="hover:bg-gray-100 dark:hover:bg-gray-800">
65+
<FileText className="w-4 h-4 mr-1" />
66+
API
67+
</Button>
68+
</Link>
7069
<ThemeToggle />
7170
{session ? (
7271
<Link href="/dashboard">
7372
<Button variant="ghost" size="sm" className="hover:bg-gray-100 dark:hover:bg-gray-800">
73+
<User className="w-4 h-4 mr-1" />
7474
个人中心
7575
</Button>
7676
</Link>
@@ -84,11 +84,77 @@ export function Header() {
8484
登录
8585
</Button>
8686
)}
87-
<Link href="/api-docs">
88-
<Button variant="ghost" size="sm" className="hover:bg-gray-100 dark:hover:bg-gray-800">
89-
API 文档
90-
</Button>
91-
</Link>
87+
</nav>
88+
89+
{/* Mobile Navigation */}
90+
<div className="flex items-center space-x-2 lg:hidden">
91+
<ThemeToggle />
92+
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
93+
<SheetTrigger asChild>
94+
<Button variant="ghost" size="sm">
95+
<Menu className="w-5 h-5" />
96+
</Button>
97+
</SheetTrigger>
98+
<SheetContent side="right" className="w-72">
99+
<nav className="flex flex-col space-y-2 mt-8">
100+
<Link href="/market" onClick={() => setMobileMenuOpen(false)}>
101+
<Button variant="ghost" className="w-full justify-start hover:bg-purple-50 dark:hover:bg-purple-900/30 text-purple-600 dark:text-purple-400">
102+
<ShoppingBag className="w-4 h-4 mr-2" />
103+
素材广场
104+
</Button>
105+
</Link>
106+
{session && (
107+
<>
108+
<Link href="/favorites" onClick={() => setMobileMenuOpen(false)}>
109+
<Button variant="ghost" className="w-full justify-start hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400">
110+
<Heart className="w-4 h-4 mr-2" />
111+
我的收藏
112+
</Button>
113+
</Link>
114+
<Link href="/history" onClick={() => setMobileMenuOpen(false)}>
115+
<Button variant="ghost" className="w-full justify-start hover:bg-blue-50 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400">
116+
<Clock className="w-4 h-4 mr-2" />
117+
浏览历史
118+
</Button>
119+
</Link>
120+
</>
121+
)}
122+
<Link href="https://github.com/h7ml/html2web" target="_blank" rel="noopener noreferrer" onClick={() => setMobileMenuOpen(false)}>
123+
<Button variant="ghost" className="w-full justify-start hover:bg-gray-100 dark:hover:bg-gray-800">
124+
<Github className="w-4 h-4 mr-2" />
125+
GitHub
126+
</Button>
127+
</Link>
128+
<Link href="/api-docs" onClick={() => setMobileMenuOpen(false)}>
129+
<Button variant="ghost" className="w-full justify-start hover:bg-gray-100 dark:hover:bg-gray-800">
130+
<FileText className="w-4 h-4 mr-2" />
131+
API 文档
132+
</Button>
133+
</Link>
134+
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
135+
{session ? (
136+
<Link href="/dashboard" onClick={() => setMobileMenuOpen(false)}>
137+
<Button variant="outline" className="w-full justify-start">
138+
<User className="w-4 h-4 mr-2" />
139+
个人中心
140+
</Button>
141+
</Link>
142+
) : (
143+
<Button
144+
variant="outline"
145+
className="w-full justify-start"
146+
onClick={() => {
147+
setMobileMenuOpen(false)
148+
setLoginDialogOpen(true)
149+
}}
150+
>
151+
登录
152+
</Button>
153+
)}
154+
</div>
155+
</nav>
156+
</SheetContent>
157+
</Sheet>
92158
</div>
93159
</div>
94160
</div>

0 commit comments

Comments
 (0)