Kids Elements 导出索引

Kids Elements 导出索引

儿童版组件库的导出索引文件，统一导出所有教学互动组件。

导出组件列表

角色向导组件

组件导出路径说明
PromiCharacter./character-guidePromi 机器人角色
PromiWithMessage./character-guide带消息气泡的 Promi

关卡组件

组件导出路径说明
Section./level-slides关卡内容区块
LevelSlides./level-slides关卡幻灯片容器

故事组件

组件导出路径说明
StoryScene./story-scene故事场景
Panel./story-scene故事面板

进度组件

组件导出路径说明
ProgressMap./progress-map进度地图

对比组件

组件导出路径说明
PromptVsMistake./prompt-vs-mistakePrompt 正误对比

学习组件

组件导出路径说明
MagicWords./magic-words魔法词填空游戏
DragDropPrompt./drag-drop-prompt拖拽 Prompt 游戏
LevelComplete./level-complete关卡完成界面
PromptParts./prompt-partsPrompt 组件分析
ExampleMatcher./example-matcher示例匹配游戏
PromptDoctor./prompt-doctorPrompt 诊断游戏
StepByStep./step-by-step步骤教学
PromptLab./prompt-labPrompt 实验室
WordPredictor./word-predictor词语预测游戏

使用示例

// 导入多个组件
import {
  PromiCharacter,
  MagicWords,
  PromptLab,
  LevelSlides,
} from "@/components/kids/elements";

// 使用示例
function MyLesson() {
  return (
    <LevelSlides levelSlug="level-1">
      <Section>
        <PromiCharacter mood="happy" />
        <MagicWords
          sentence="I want to ___ a story"
          blanks={[{ hint: "动词", answers: ["write", "create"] }]}
        />
      </Section>
    </LevelSlides>
  );
}

组件分类

1. 展示组件 (Display)

  • PromiCharacter / PromiWithMessage - 角色展示
  • StoryScene / Panel - 故事展示
  • ProgressMap - 进度展示
  • LevelComplete - 成就展示

2. 教学组件 (Educational)

  • PromptVsMistake - 对比教学
  • PromptParts - 结构教学
  • StepByStep - 步骤教学
  • PromptDoctor - 诊断教学

3. 互动游戏 (Interactive)

  • MagicWords - 填空游戏
  • DragDropPrompt - 拖拽游戏
  • ExampleMatcher - 匹配游戏
  • PromptLab - 实验游戏
  • WordPredictor - 预测游戏

4. 布局组件 (Layout)

  • Section - 内容区块
  • LevelSlides - 幻灯片布局
← 返回目录