Header 组件

顶部导航栏组件，提供全站导航、用户认证、主题切换、语言选择等功能。

功能概述

• 响应式设计: 桌面端和移动端适配
• 用户认证: 登录/注册入口、用户信息展示
• 导航菜单: 主导航、移动端侧边栏菜单
• 主题切换: 深色/浅色模式切换
• 语言选择: 多语言支持（17种语言）
• 通知系统: 集成通知铃铛组件
• 品牌展示: Logo 和网站名称

Props 接口

interface HeaderProps {
  authProvider?: string;      // 认证提供商，默认 "credentials"
  allowRegistration?: boolean; // 是否允许注册，默认 true
}

子组件

MiniPromi

像素风格的机器人图标，用于儿童版入口。

主要功能

导航链接

• /collection - 收藏夹（已登录用户）
• /feed - 动态流（已登录用户）
• /prompts - Prompts 列表
• /skills - 技能页面
• /workflows - 工作流页面
• /categories - 分类页面
• /tags - 标签页面
• /discover - 发现页面
• /promptmasters - Prompt 大师
• /kids - 儿童版入口

用户菜单

• 个人主页 (/@username)
• 设置 (/settings)
• 管理员面板 (/admin)
• 语言切换
• 退出登录

浏览器扩展

• 自动检测 Chrome/Firefox 浏览器
• 显示对应的扩展下载链接

依赖

• next-auth/react - 认证
• next-intl - 国际化
• next-themes - 主题管理
• @/components/ui/* - UI 组件
• @/components/layout/notification-bell - 通知组件

使用示例

import { Header } from "@/components/layout/header";

// 默认使用
<Header />

// 禁用注册
<Header allowRegistration={false} />

// 使用 OAuth 认证
<Header authProvider="github" />

样式说明

• 固定在顶部 (sticky top-[0px])
• 毛玻璃效果 (backdrop-blur)
• 高度: 48px (h-12)
• 响应式断点: md, 2xl