KidsHomeContent 组件

KidsHomeContent 组件

儿童版首页内容组件，提供引导式的欢迎流程。

功能概述

  • 分步引导: 三步欢迎流程
  • 动画效果: 页面切换动画
  • 像素风格: 复古游戏视觉风格
  • 响应式设计: 适配各种屏幕尺寸
  • 进度导航: 底部导航控制

步骤流程

Step 0: 欢迎页

  • 徽章显示
  • 主标题和副标题
  • Promi 机器人介绍
  • "开始学习"引导

Step 1: 功能介绍

  • "你将学到什么"标题
  • 游戏功能介绍（游戏手柄图标）
  • 故事功能介绍（书本图标）
  • 星星收集系统（星星图标）

Step 2: 准备开始

  • 像素艺术场景（树、机器人、城堡）
  • "准备好了吗"提示
  • 开始按钮（链接到地图）
  • 年龄提示

Props 接口

无 Props，使用翻译和内部状态。

内部状态

const [step, setStep] = useState(0);  // 当前步骤 (0-2)
const totalSteps = 3;                  // 总步骤数

导航控制

方法

const nextStep = () => setStep((prev) => Math.min(prev + 1, totalSteps - 1));
const prevStep = () => setStep((prev) => Math.max(prev - 1, 0));

按钮

  • 返回: 上一步（第一步隐藏）
  • 下一步: 继续（最后一步变为"开始"）
  • 进度指示器: 点击跳转到对应步骤

分析追踪

import { analyticsKids } from "@/lib/analytics";

// 点击开始按钮时
analyticsKids.startGame();

使用示例

import { KidsHomeContent } from "@/components/kids/layout/kids-home-content";

export default function KidsHomePage() {
  return (
    <div className="h-screen flex flex-col">
      <KidsHeader />
      <KidsHomeContent />
    </div>
  );
}

翻译键

{
  "kids": {
    "home": {
      "badge": "AI 学习之旅",
      "title": "Prompt 探险",
      "subtitle": "学习如何和 AI 对话",
      "promiIntro": {
        "greeting": "你好！我是 Promi！",
        "message": "让我来教你如何写出超棒的 Prompt 吧！"
      },
      "whatYouLearn": "你将学到什么",
      "features": {
        "games": {
          "title": "有趣的游戏",
          "description": "通过游戏学习 Prompt 技巧"
        },
        "stories": {
          "title": "精彩的故事",
          "description": "和 AI 一起创造奇妙故事"
        },
        "stars": {
          "title": "收集星星",
          "description": "完成关卡获得星星奖励"
        }
      },
      "readyTitle": "准备好开始了吗？",
      "readyMessage": "和我一起踏上 Prompt 学习之旅吧！",
      "startButton": "开始探险",
      "ageNote": "适合 6-12 岁儿童"
    },
    "navigation": {
      "back": "返回",
      "next": "下一步"
    }
  }
}

像素图标

组件内部定义多个像素艺术 SVG 图标：

PixelPlayIcon

播放/开始图标 (12x12)

PixelArrowLeft / PixelArrowRight

左右箭头图标 (12x12)

PixelGamepad

游戏手柄图标 (24x16)

  • 深色主体
  • 绿色十字键
  • 红色/蓝色功能键

PixelBook

书本图标 (20x16)

  • 棕色封面
  • 米黄色内页
  • 中间装订线

样式说明

主内容区域

  • 垂直居中 (items-center justify-center)
  • 可滚动 (overflow-y-auto)
  • 最大宽度: max-w-2xl
  • 内边距: p-4

欢迎页样式

  • 徽章: 白色背景，金色边框
  • 标题: 大号字体，像素阴影 (pixel-text-shadow)
  • 副标题: 中等字号，棕色

功能卡片

  • 使用 .pixel-panel 类
  • 不同变体: 绿色、蓝色、默认
  • 图标 + 标题 + 描述布局

底部导航栏

  • 背景: #2C1810 (深棕色)
  • 顶部边框: 4px 实线 #8B4513
  • 按钮: .pixel-btn 样式

进度指示器

  • 当前步骤: 绿色 (#22C55E)
  • 其他步骤: 深棕色 (#4A3728)
  • 像素风格边框 (使用 clipPath)

动画效果

页面切换

animate-in fade-in slide-in-from-right-4 duration-300

Promi 机器人

animate-bounce-slow  /* 最后一步 */

响应式断点

断点样式调整
默认移动端样式，小按钮
sm桌面端样式，大按钮，显示完整进度指示器
md更大的标题和文字

依赖

  • next-intl - 国际化
  • next/link - 链接组件
  • @/lib/utils (cn) - 工具函数
  • @/lib/analytics - 分析追踪
  • @/components/kids/elements/pixel-art - 像素艺术

注意事项

  • 组件使用 "use client" 指令
  • 使用 localStorage 保存进度（通过子组件）
  • 所有像素图标使用 imageRendering: "pixelated"
  • 最后一步的开始按钮链接到 /kids/map
← 返回目录