kids/page.tsx - 儿童模式首页

kids/page.tsx - 儿童模式首页

基本信息

属性值
路径src/app/kids/page.tsx
类型Next.js 页面组件 (Server Component)
功能儿童学习模式首页

功能描述

儿童模式入口页面，提供游戏化的 AI 提示词学习体验。渲染交给客户端组件处理，页面本身仅处理元数据。

代码实现

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

export const metadata: Metadata = {
  title: "Learn Prompting for Kids | prompts.chat",
  description: "A fun, game-based way for kids to learn how to talk to AI. Join Promi the robot on an adventure through Prompt Land!",
};

export default function KidsHomePage() {
  return <KidsHomeContent />;
}

元数据

属性值
title"Learn Prompting for Kids \prompts.chat"
description游戏化学习的描述文案

架构说明

服务端/客户端分离

层级文件职责
Serverpage.tsx元数据、初始渲染
ClientKidsHomeContent交互逻辑、游戏状态

设计模式

使用 Server Component + Client Component 模式：

  • Server Component (page.tsx): 负责 SEO、元数据
  • Client Component (KidsHomeContent): 负责交互、动画、游戏状态

组件引用

组件来源类型
KidsHomeContent@/components/kids/layout/kids-home-contentClient Component

功能特性（由 KidsHomeContent 提供）

基于组件名称和上下文推断：

  • 🎮 游戏化学习界面
  • 🤖 Promi 机器人角色引导
  • 🗺️ 世界地图/关卡选择
  • 🎯 进度追踪
  • 🎵 背景音乐（由 Layout 提供）

路由

路径说明
/kids儿童模式首页（当前）
/kids/map学习地图
/kids/level/{slug}具体关卡

相关文件

  • src/app/kids/layout.tsx - 儿童模式布局（主题、背景、音乐）
  • src/components/kids/layout/kids-home-content.tsx - 首页内容组件
  • src/components/kids/elements/progress-map.tsx - 进度地图组件

设计风格

  • 像素艺术风格（Pixel Art）
  • 明亮的天空蓝渐变背景
  • 游戏化 UI 元素
  • 适合儿童的友好配色
← 返回目录