prompt.tsx

概述

提示词分析和可视化组件。提供提示词分解和具体性谱系两种可视化方式，帮助用户理解提示词的结构和特异性级别。

组件

PromptBreakdown

提示词分解组件 - 将提示词按部分高亮展示，支持悬停交互。

Props：

属性	类型	必填	描述
parts	PromptPart[]	是	提示词部分数组

PromptPart 接口：

interface PromptPart {
  label: string;   // 部分标签（显示在上方）
  text: string;    // 文本内容
  color?: string;  // 可选颜色键（默认循环使用）
}

支持的颜色：

颜色键	背景色	边框色	文字色
blue	blue-100	blue-300	blue-700
green	green-100	green-300	green-700
purple	purple-100	purple-300	purple-700
amber	amber-100	amber-300	amber-700
pink	pink-100	pink-300	pink-700
cyan	cyan-100	cyan-300	cyan-700

交互特性：

• 鼠标悬停时高亮对应部分
• 其他部分变暗（opacity 30%）
• 标签在悬停时显示背景色

使用示例：

import { PromptBreakdown } from "@/components/book/elements/prompt";

const parts = [
  { label: "角色", text: "你是一位资深软件工程师", color: "blue" },
  { label: "任务", text: "请帮我审查以下代码", color: "green" },
  { label: "上下文", text: "这是一个 Node.js 项目", color: "purple" },
  { label: "要求", text: "找出潜在的性能问题", color: "amber" },
];

<PromptBreakdown parts={parts} />

视觉样式：

• 等宽字体显示文本
• 标签显示在文本上方（-top-6）
• 底部边框区分各部分
• 10px 小号标签字体

---

SpecificitySpectrum

具体性谱系组件 - 展示提示词从模糊到具体的渐进改进过程。

Props：

属性	类型	必填	描述
levels	SpectrumLevel[]	是	特异性级别数组

SpectrumLevel 接口：

interface SpectrumLevel {
  level: string;  // 级别名称（如"模糊"、"一般"、"具体"、"高度具体"）
  text: string;   // 该级别的提示词示例
}

视觉特性：

• 横向按钮组选择级别
• 进度条显示当前级别位置
• 选中级别的提示词示例
• 颜色渐变（红色→橙色→琥珀色→绿色）

颜色映射：

索引	颜色	含义
0	bg-red-500	模糊（差）
1	bg-orange-500	一般
2	bg-amber-500	具体
3	bg-green-500	高度具体（好）

默认行为：

• 默认选中最后一个级别（最具体的版本）
• 点击按钮切换级别
• 进度条动画过渡

使用示例：

import { SpecificitySpectrum } from "@/components/book/elements/prompt";

const levels = [
  {
    level: "模糊",
    text: "写一些关于编程的东西。"
  },
  {
    level: "一般", 
    text: "介绍一下 Python 编程语言。"
  },
  {
    level: "具体",
    text: "解释 Python 在数据科学中的应用，包括常用库。"
  },
  {
    level: "高度具体",
    text: "作为数据科学导师，用简单语言解释 Python 为什么适合数据分析，列出 pandas、numpy、matplotlib 三个库的核心功能，面向编程初学者。"
  }
];

<SpecificitySpectrum levels={levels} />

依赖

依赖	用途
react - useState	状态管理（悬停、选中）
@/lib/utils - cn	类名合并

应用场景

PromptBreakdown

适用于：

• 教学提示词结构
• 分析复杂提示词的组成
• 展示 RAG/框架的各部分

SpecificitySpectrum

适用于：

• 演示提示词改进过程
• 教授 specificity 概念
• 对比不同质量级别的提示词

组合使用示例

import { PromptBreakdown, SpecificitySpectrum } from "@/components/book/elements/prompt";

export function PromptLesson() {
  return (
    <div className="space-y-8">
      <section>
        <h3>提示词结构分解</h3>
        <PromptBreakdown parts={[...]} />
      </section>
      
      <section>
        <h3>从模糊到具体</h3>
        <SpecificitySpectrum levels={[...]} />
      </section>
    </div>
  );
}