PromptLab 组件

PromptLab 组件

Prompt 实验室组件，通过互动方式教学如何逐步改进 Prompt。

功能概述

  • 渐进式改进: 通过添加细节逐步优化 Prompt
  • 实时反馈: 展示改进后的 AI 回复
  • 进度追踪: 显示改进进度条
  • 状态持久化: 保存学习进度到本地
  • 关卡集成: 与关卡系统深度集成

Props 接口

interface Improvement {
  label: string;     // 改进项标签
  prompt: string;    // 改进后的 Prompt
  response: string;  // 对应的 AI 回复
}

interface PromptLabProps {
  title?: string;           // 标题，默认使用翻译
  scenario: string;         // 场景描述
  basePrompt: string;       // 基础 Prompt
  baseResponse: string;     // 基础回复
  improvements: Improvement[];  // 改进步骤数组
  successMessage?: string;  // 成功消息
}

数据结构

保存的状态

interface SavedState {
  appliedImprovements: number[];  // 已应用的改进索引
  completed: boolean;             // 是否完成
}

交互流程

  1. 初始状态: 显示基础 Prompt 和回复
  2. 点击改进项: 应用改进，更新 Prompt 和回复
  3. 全部应用: 显示成功消息，标记关卡完成
  4. 重置: 重新开始实验

使用示例

import { PromptLab } from "@/components/kids/elements/prompt-lab";

<PromptLab
  title="故事生成实验"
  scenario="你想让 AI 帮你写一个有趣的故事"
  basePrompt="写个故事"
  baseResponse="从前有座山，山里有座庙..."
  improvements={[
    {
      label: "添加主角",
      prompt: "写个关于勇敢小猫的故事",
      response: "有一只勇敢的小猫叫咪咪，它喜欢冒险..."
    },
    {
      label: "指定场景",
      prompt: "写一个关于勇敢小猫在魔法森林冒险的故事",
      response: "在神秘的魔法森林里，勇敢的小猫咪咪发现了一扇发光的大门..."
    },
    {
      label: "增加细节",
      prompt: "写一个关于勇敢小猫在魔法森林寻找宝藏的冒险故事，要有趣且适合儿童",
      response: "阳光明媚的早晨，勇敢的小猫咪咪听说魔法森林深处藏着一颗能实现愿望的星星..."
    }
  ]}
  successMessage="太棒了！你学会了如何让故事更生动！"
/>

翻译键

{
  "kids": {
    "promptLab": {
      "title": "🔬 Prompt 实验室",
      "progress": "进度",
      "yourPrompt": "你的 Prompt",
      "aiSays": "AI 说",
      "addDetails": "添加更多细节：",
      "success": "🎉 实验成功！你已经成为 Prompt 科学家！",
      "retry": "再试一次"
    }
  }
}

进度追踪

进度计算

const progressPercentage = (appliedImprovements.length / improvements.length) * 100;

完成判断

当所有改进项都应用后，自动标记为完成：

  • 调用 markSectionCompleted(levelSlug, currentSection)
  • 调用 markSectionComplete(currentSection)

样式说明

  • 背景: 绿色渐变 (from-[#D1FAE5] to-[#A7F3D0])
  • 边框: 4px 实线绿色 (border-[#10B981])
  • 圆角: 12px (rounded-xl)
  • 进度条: 绿色填充，带动画过渡

依赖

  • next-intl - 国际化
  • react (useId, useState, useEffect)
  • @/lib/utils (cn)
  • @/components/kids/providers/level-context - 关卡上下文
  • @/lib/kids/progress - 进度管理

注意事项

  • 需要包裹在 LevelProvider 内使用
  • 自动注册为关卡必需的互动组件
  • 支持进度保存和恢复
  • 完成后可重置重新学习
← 返回目录