asset-homepage/NAVBAR-REFACTOR.md

# Navbar 重构说明

## 重构概述

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

## 主要变化

### 1. 使用的 HeroUI 组件

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

### 2. 代码对比

#### 重构前（原生 HTML）
```tsx
<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）
```tsx
<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
```tsx
<HeroNavbar
  maxWidth="full"              // 最大宽度
  className="..."              // 自定义样式
  classNames={{                // 内部元素样式
    wrapper: "px-10 py-2"
  }}
/>
```

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

### Dropdown 用法
```tsx
<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

## 测试清单

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

## 回滚方法

如果需要回滚到旧版本：
```bash
mv components/Navbar.tsx components/Navbar.heroui.tsx
mv components/Navbar.old.tsx components/Navbar.tsx
```