asset-homepage/NAVBAR-REFACTOR.md

Navbar 重构说明

重构概述

成功将导航栏从原生 HTML + Tailwind 重构为使用 HeroUI 组件。

主要变化

1. 使用的 HeroUI 组件

组件	用途
Navbar	主导航容器
NavbarBrand	Logo 区域
NavbarContent	内容分组（左中右）
NavbarItem	单个导航项
Button	按钮组件
Dropdown	下拉菜单
DropdownTrigger	下拉触发器
DropdownMenu	下拉菜单内容
DropdownItem	下拉菜单项

2. 代码对比

重构前（原生 HTML）

<nav className="fixed top-0 left-0 right-0 z-50 px-10 py-5 flex items-center justify-between">
  <div className="flex-1">
    <Image src="/logo0.svg" alt="Logo" width={160} height={40} />
  </div>

  <div className="flex items-center gap-12">
    <div className="bg-transparent rounded-lg px-4 py-2 hover:bg-[#f3f4f6]">
      <span>Product</span>
    </div>
  </div>

  <div className="bg-[#111827] rounded-lg px-5 py-2.5">
    <span>Launch App</span>
  </div>
</nav>

重构后（HeroUI）

<HeroNavbar maxWidth="full" className="...">
  <NavbarBrand>
    <Image src="/logo0.svg" alt="Logo" width={160} height={40} />
  </NavbarBrand>

  <NavbarContent justify="center">
    <NavbarItem>
      <Button variant="light">Product</Button>
    </NavbarItem>
  </NavbarContent>

  <NavbarContent justify="end">
    <NavbarItem>
      <Button>Launch App</Button>
    </NavbarItem>
  </NavbarContent>
</HeroNavbar>

3. 优势

✅ 语义化更好

• 使用专门的 Navbar 组件，代码意图更清晰
• 自动处理响应式布局

✅ 代码更简洁

• Button 组件内置 hover、active 等状态
• Dropdown 组件自动处理打开/关闭逻辑

✅ 可访问性更好

• HeroUI 组件内置 ARIA 属性
• 键盘导航支持

✅ 一致性

• 所有组件遵循统一的设计系统
• 暗色模式自动适配

✅ 可维护性

• 更少的自定义 className
• 更少的样式代码

4. 保留的功能

✅ 主题切换（亮色/暗色） ✅ 语言切换（中文/英文） ✅ 产品菜单下拉 ✅ 资源菜单下拉 ✅ 滚动时背景变化 ✅ Logo 和按钮的入场动画 ✅ 所有自定义样式和品牌色

5. 文件结构

components/
├── Navbar.tsx          # 新版本（HeroUI）
├── Navbar.old.tsx      # 旧版本（备份）
├── ProductMenu.tsx     # 产品菜单（保持不变）
└── ResourceMenu.tsx    # 资源菜单（保持不变）

使用的 HeroUI API

Navbar Props

<HeroNavbar
  maxWidth="full"              // 最大宽度
  className="..."              // 自定义样式
  classNames={{                // 内部元素样式
    wrapper: "px-10 py-2"
  }}
/>

Button Props

<Button
  variant="light"              // 变体：light, solid, bordered, flat, ghost
  isIconOnly                   // 仅图标按钮
  onPress={() => {}}           // 点击事件
  className="..."              // 自定义样式
  startContent={<Icon />}      // 前置内容
  endContent={<Icon />}        // 后置内容
/>

Dropdown 用法

<Dropdown>
  <DropdownTrigger>
    <Button>选择语言</Button>
  </DropdownTrigger>
  <DropdownMenu
    onAction={(key) => {}}     // 选择事件
    selectedKeys={new Set()}   // 选中的项
  >
    <DropdownItem key="zh">中文</DropdownItem>
    <DropdownItem key="en">English</DropdownItem>
  </DropdownMenu>
</Dropdown>

下一步优化建议

1. ✅ 已完成：基础导航栏重构
2. 🔄 可选：将 ProductMenu 和 ResourceMenu 也改为 HeroUI 的 Popover 或 Modal
3. 🔄 可选：添加移动端菜单（NavbarMenuToggle）
4. 🔄 可选：使用 HeroUI 的主题系统替代自定义 ThemeContext

测试清单

• 检查亮色模式显示
• 检查暗色模式显示
• 测试主题切换
• 测试语言切换
• 测试产品菜单
• 测试资源菜单
• 测试响应式布局
• 测试滚动效果
• 测试入场动画

回滚方法

如果需要回滚到旧版本：

mv components/Navbar.tsx components/Navbar.heroui.tsx
mv components/Navbar.old.tsx components/Navbar.tsx