feat(components): 添加自定义导航组件

- 实现了一个响应式的导航栏组件，支持桌面和移动端布局
- 包含 logo 区域、菜单项和移动端菜单按钮
- 使用 Next.js 的 Link组件实现路由导航
- 利用 Ant Design 的 Drawer 组件实现移动端侧边菜单
- 根据当前路径动态高亮选中的菜单项

src/components/headerBlock.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { Drawer } from "antd"
+import Image from "next/image"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { MenuIcon, X } from "lucide-react"
+
+const Navigation: React.FC = () => {
+  const pathname = usePathname()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  const pathToKey: { [key: string]: string } = {
+    "/": "home",
+    "/products": "products",
+    "/solutions": "solutions",
+    "/news": "news",
+    "/support": "support",
+    "/about": "about",
+  }
+  const selectedKey = pathToKey[pathname] || "home"
+
+  const menuItems = [
+    { key: "home", label: "首页", href: "/" },
+    { key: "products", label: "产品中心", href: "/products" },
+    { key: "solutions", label: "解决方案", href: "/solutions" },
+    { key: "news", label: "新闻动态", href: "/news" },
+    { key: "support", label: "服务支持", href: "/support" },
+    { key: "about", label: "关于我们", href: "/about" },
+  ]
+
+  const handleMobileMenuClick = () => {
+    setMobileMenuOpen(false)
+  }
+
+  return (
+    <header className="w-full bg-white shadow-sm border-b border-gray-100">
+      <div className="max-w-full mx-auto md:px-20 sm:px-6 px-4">
+        <div className="flex justify-between items-center h-18">
+          {/* Logo 区域 */}
+          <div className="flex items-center">
+            <div className="flex items-center space-x-2">
+              <Image src={"/assets/logo.png"} width={160} height={80} alt={"logo"}/>
+            </div>
+          </div>
+
+          {/* 桌面端菜单 */}
+          <div className="hidden sm:flex flex-1 justify-end">
+            <nav className="flex h-18">
+              {menuItems.map((item) => (
+                <Link
+                  key={item.key}
+                  href={item.href}
+                  className={`inline-flex items-center justify-center px-8 text-md font-semibold h-full relative transition-colors duration-200 ${
+                    selectedKey === item.key
+                      ? "text-blue-600 bg-blue-50"
+                      : "text-gray-600 hover:text-gray-900"
+                  }`}
+                >
+                  <span className={`relative py-2 ${
+                    selectedKey === item.key
+                      ? "after:content-[''] after:absolute after:bottom-[-4px] after:left-1/2 after:-translate-x-1/2 after:w-6 after:h-1 after:bg-blue-600 after:rounded-full"
+                      : ""
+                  }`}>
+                    {item.label}
+                  </span>
+                </Link>
+              ))}
+            </nav>
+          </div>
+
+          {/* 移动端菜单按钮 */}
+          <div className="sm:hidden">
+            <button
+              onClick={() => setMobileMenuOpen(true)}
+              className="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <MenuIcon size={24}/>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 移动端侧边菜单 */}
+      <Drawer
+        title="菜单"
+        placement="right"
+        onClose={() => setMobileMenuOpen(false)}
+        open={mobileMenuOpen}
+        width={280}
+        closeIcon={<X size={20}/>}
+      >
+        <nav className="flex flex-col space-y-4">
+          {menuItems.map((item) => (
+            <Link
+              key={item.key}
+              href={item.href}
+              onClick={handleMobileMenuClick}
+              style={{ color: selectedKey === item.key ? '#2563eb' : '#374151' }}
+              className={`px-4 py-3 rounded-md text-base font-medium ${
+                selectedKey === item.key
+                  ? "bg-blue-50"
+                  : "hover:bg-gray-100"
+              }`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </Drawer>
+    </header>
+  )
+}
+
+export default Navigation