kids/map/page.tsx - 儿童学习地图

kids/map/page.tsx - 儿童学习地图

基本信息

属性值
路径src/app/kids/map/page.tsx
类型Next.js 页面组件 (Server Component)
功能儿童模式的关卡选择地图

功能描述

展示儿童学习模式的世界地图界面，允许孩子选择关卡开始学习。渲染交给 ProgressMap 客户端组件处理。

代码实现

import { getTranslations } from "next-intl/server";
import { ProgressMap } from "@/components/kids/elements/progress-map";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "World Map | Learn Prompting for Kids",
  description: "Choose your adventure! Pick a level and start learning how to talk to AI.",
};

export default async function KidsMapPage() {
  const t = await getTranslations("kids");

  return (
    <div className="h-full flex flex-col overflow-hidden">
      <ProgressMap />
    </div>
  );
}

元数据

属性值
title"World Map \Learn Prompting for Kids"
description"Choose your adventure! Pick a level and start learning how to talk to AI."

布局容器

<div className="h-full flex flex-col overflow-hidden">
  <ProgressMap />
</div>
类名作用
h-full填满父容器高度
flex flex-col垂直弹性布局
overflow-hidden隐藏溢出内容（地图自行处理滚动）

架构说明

服务端/客户端分离

层级组件职责
ServerKidsMapPage元数据、布局容器
ClientProgressMap交互式地图、关卡选择

设计考虑

  • 全屏地图: 地图组件需要占据全部可用空间
  • 无滚动条: 地图内部自行处理平移/缩放
  • 游戏化体验: 类似游戏世界地图的交互方式

组件引用

组件来源类型功能
ProgressMap@/components/kids/elements/progress-mapClient Component交互式关卡地图

推测功能（基于 ProgressMap）

地图特性

  • 🗺️ 可视化世界地图
  • 📍 关卡节点标记
  • 🔒 锁定/解锁状态
  • ⭐ 完成进度指示
  • 🎨 像素艺术风格

关卡结构

World 1: Prompt Basics
├── Level 1-1: What is a Prompt?
├── Level 1-2: Talking to AI
└── Level 1-3: Your First Prompt

World 2: Prompt Tricks
├── Level 2-1: Be Clear
├── Level 2-2: Give Examples
└── ...

翻译

虽然获取了 kids 命名空间的翻译，但当前实现中未直接使用，可能用于未来扩展。

const t = await getTranslations("kids");

路由

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

相关文件

  • src/app/kids/layout.tsx - 儿童模式布局（天空背景、音乐）
  • src/app/kids/page.tsx - 儿童首页
  • src/components/kids/elements/progress-map.tsx - 地图组件

用户体验流程

/kids (首页)
    ↓ 点击开始
/kids/map (选择关卡)
    ↓ 点击关卡节点
/kids/level/{slug} (学习关卡)
    ↓ 完成
/kids/map (返回地图，解锁下一关)
← 返回目录