KidsHeader 组件

KidsHeader 组件

儿童版头部导航组件，提供适合儿童的像素风格界面。

功能概述

  • 像素风格设计: 复古游戏风格的界面
  • 进度展示: 显示星星数量和关卡进度
  • 关卡标识: 当前关卡编号显示
  • 导航功能: 首页、地图、主站切换
  • 移动适配: 响应式设计，移动端汉堡菜单
  • 设置功能: 音乐控制和设置按钮

Props 接口

无 Props，使用翻译和全局状态。

子组件

PixelHomeIcon

像素风格首页图标（16x16 SVG）

PixelMapIcon

像素风格地图图标（16x16 SVG）

PixelMenuIcon

像素风格菜单图标（16x16 SVG）

功能模块

左侧区域

  • Logo: PixelRobot 图标 + 网站标题
  • 点击跳转: /kids 首页

中间/右侧区域

  • 当前关卡: 显示如 "1.2" 格式（世界.关卡）
  • 星星计数: 已收集的星星总数
  • 进度显示: 已完成关卡数 / 总关卡数

导航按钮（桌面端）

  • MusicButton: 背景音乐控制
  • SettingsButton: 设置面板
  • 首页: 返回儿童版首页
  • 地图: 关卡地图 (/kids/map)
  • 主站: 返回主网站 (/)

移动端菜单

  • 汉堡菜单按钮
  • 下拉菜单包含所有导航项
  • 点击外部自动关闭

使用示例

import { KidsHeader } from "@/components/kids/layout/kids-header";

function KidsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col h-screen">
      <KidsHeader />
      <main className="flex-1">{children}</main>
    </div>
  );
}

翻译键

{
  "kids": {
    "header": {
      "title": "Prompt 探险",
      "home": "首页",
      "mainSite": "主站"
    },
    "level": {
      "levelLabel": "关卡 {number}",
      "map": "地图"
    }
  }
}

状态管理

内部状态

const [stars, setStars] = useState(0);           // 星星数量
const [completed, setCompleted] = useState(0);   // 已完成关卡数
const [menuOpen, setMenuOpen] = useState(false); // 移动端菜单开关

关卡信息

const levelSlug = useLevelSlug();  // 从 context 获取
const currentLevel = levelSlug ? getLevelBySlug(levelSlug) : null;
const levelNumber = currentLevel ? `${currentLevel.world}.${currentLevel.levelNumber}` : null;

样式说明

头部容器

  • 背景色: #2C1810 (深棕色)
  • 底部边框: 4px 实线 #8B4513 (马鞍棕)
  • 高度: 56px (h-14)

关卡标识

  • 背景: #FFD700 (金色)
  • 边框: #DAA520 (金菊色)
  • 文字: #8B4513 (棕色)

星星/进度显示

  • 背景: #4A3728 (深棕褐色)
  • 边框: #8B4513
  • 星星颜色: 金色填充
  • 进度文字: #22C55E (绿色)

按钮样式

  • 使用 .pixel-btn 类
  • 像素风格边框效果

依赖

  • next-intl - 国际化
  • @/lib/kids/progress - 进度管理
  • @/lib/kids/levels - 关卡数据
  • @/components/kids/elements/pixel-art - 像素艺术组件
  • @/components/kids/layout/background-music - 音乐控制
  • @/components/kids/layout/settings-modal - 设置弹窗
  • @/components/kids/providers/level-context - 关卡上下文

响应式断点

断点显示内容
< sm (移动端)汉堡菜单 + 简化信息
≥ sm (桌面端)完整导航按钮 + 完整信息
≥ md显示"主站"按钮

注意事项

  • 组件使用 "use client" 指令
  • 进度数据在客户端加载（localStorage）
  • 移动端菜单支持点击外部关闭
  • 所有像素图标使用 imageRendering: "pixelated"
← 返回目录