使用heroui完成对页面的重构

NAVBAR-REFACTOR.md

@@ -0,0 +1,173 @@
+# 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
+```