LevelSlides 组件

LevelSlides 组件

关卡幻灯片组件，提供分步式教学内容展示和导航。

导出内容

Section

内容区块包装组件。

LevelSlides

幻灯片容器组件，管理多个 Section 的展示和导航。

Section Props

interface SectionProps {
  children: ReactNode;  // 区块内容
}

Section 是一个简单的包装组件，用于在 LevelSlides 中定义独立的幻灯片内容。

LevelSlides Props

interface LevelSlidesProps {
  children: ReactNode;   // 子元素（包含 Section 组件）
  levelSlug: string;     // 关卡唯一标识
}

功能特性

导航控制

  • 上一页/下一页: 按钮控制幻灯片切换
  • 进度指示器: 圆点显示当前位置和进度
  • 直接跳转: 点击圆点直接跳转到对应幻灯片

动画效果

  • 进入动画: fade-in slide-in-from-right-4
  • 动画时长: 300ms

完成导航

最后一页显示"返回地图"按钮，链接到 /kids/map。

使用示例

import {
  LevelSlides,
  Section,
} from "@/components/kids/elements/level-slides";
import { PromiWithMessage } from "@/components/kids/elements/character-guide";
import { MagicWords } from "@/components/kids/elements/magic-words";

function MyLevel() {
  return (
    <LevelSlides levelSlug="world-1-level-1">
      <Section>
        <PromiWithMessage
          message="欢迎来到第一关！"
          mood="happy"
        />
      </Section>
      
      <Section>
        <h2>学习 Prompt 基础</h2>
        <p>Prompt 是和 AI 对话的方式...</p>
      </Section>
      
      <Section>
        <MagicWords
          sentence="请帮我___一个故事"
          blanks={[{ hint: "动词", answers: ["写"] }]}
        />
      </Section>
    </LevelSlides>
  );
}

状态管理

内部状态

const [currentSection, setCurrentSection] = useState(0);

派生状态

  • isFirstSection: 是否是第一页
  • isLastSection: 是否是最后一页
  • totalSections: 总页数

翻译键

{
  "kids": {
    "navigation": {
      "back": "返回",
      "next": "下一步"
    },
    "level": {
      "map": "地图"
    }
  }
}

样式说明

内容区域

  • flex 布局，垂直居中
  • 最大宽度: max-w-2xl
  • 内边距: p-4

导航栏

  • 固定在底部
  • 背景: 白色/半透明深色
  • 毛玻璃效果: backdrop-blur

进度指示器

  • 当前页: 主色，宽度扩展 (w-8)
  • 已完成: 主色 50% 透明度
  • 未完成: 灰色 30% 透明度

注意事项

  • 自动提取子元素中的 Section 组件
  • 如果没有 Section，则包装所有内容为单个 Section
  • 支持嵌套组件
  • 兼容所有 kids 教学组件
← 返回目录