frameworks.tsx

概述

提示工程框架展示组件。提供 CRISPE、BREAK、RTF 等流行提示工程框架的交互式演示，帮助用户理解和应用这些结构化方法。

组件

FrameworkDemo

通用框架演示组件 - 可配置展示任意提示工程框架。

Props：

属性	类型	必填	描述
`name`	`string`	是	框架名称
`steps`	`FrameworkStep[]`	是	框架步骤数组
`example`	`{ prompt: string; description?: string }`	否	示例提示词

FrameworkStep 接口：

interface FrameworkStep {
  letter: string;           // 步骤首字母（如 "C", "R", "I"）
  label: string;            // 步骤标签
  description: string;      // 步骤描述
  icon: LucideIcon;         // Lucide 图标组件
  color: string;            // 颜色键（blue, green, purple 等）
  example?: string;         // 该步骤在示例中的对应文本
}

支持的颜色：

颜色键	背景	边框	文字	图标背景
blue	blue-50	blue-200	blue-700	blue-100
green	green-50	green-200	green-700	green-100
purple	purple-50	purple-200	purple-700	purple-100
amber	amber-50	amber-200	amber-700	amber-100
pink	pink-50	pink-200	pink-700	pink-100
cyan	cyan-50	cyan-200	cyan-700	cyan-100
indigo	indigo-50	indigo-200	indigo-700	indigo-100
rose	rose-50	rose-200	rose-700	rose-100

交互特性：

鼠标悬停步骤时高亮显示
示例提示词中对应部分高亮标记
未悬停部分变暗（40% 透明度）
每个步骤可运行对应提示词片段

使用示例：

import { FrameworkDemo } from "@/components/book/elements/frameworks";
import { User, Target, FileText, Settings } from "lucide-react";

<FrameworkDemo
  name="自定义框架"
  steps={[
    {
      letter: "R",
      label: "角色",
      description: "定义 AI 扮演的角色",
      icon: User,
      color: "blue",
      example: "你是一位经验丰富的 Python 导师"
    },
    {
      letter: "T", 
      label: "任务",
      description: "明确要完成的任务",
      icon: Target,
      color: "green",
      example: "解释列表推导式的概念"
    }
  ]}
  example={{
    prompt: "你是一位经验丰富的 Python 导师，解释列表推导式的概念...",
    description: "使用 RT 框架构建的提示词"
  }}
/>

CRISPEFramework

CRISPE 框架组件 - 预配置的 CRISPE 框架演示。

CRISPE 含义：

C - Capacity and Role（能力与角色）
R - Insight（洞察）
I - Statement（陈述）
S - Personality（个性）
P - Experiment（实验）
E - Extras（额外信息）

数据来源： 从本地化数据获取（locales/*.ts）

使用：

import { CRISPEFramework } from "@/components/book/elements/frameworks";

<CRISPEFramework />

BREAKFramework

BREAK 框架组件 - 预配置的 BREAK 框架演示。

BREAK 含义：

B - Background（背景）
R - Role（角色）
E - Examples（示例）
A - Audience（受众）
K - Knowledge（知识约束）

使用：

import { BREAKFramework } from "@/components/book/elements/frameworks";

<BREAKFramework />

RTFFramework

RTF 框架组件 - 预配置的 RTF 框架演示。

RTF 含义：

R - Role（角色）
T - Task（任务）
F - Format（格式）

使用：

import { RTFFramework } from "@/components/book/elements/frameworks";

<RTFFramework />

辅助函数

mapStepsToComponent

将本地化步骤数据转换为组件可用的步骤格式。

function mapStepsToComponent(steps: FrameworkStepData[]): FrameworkStep[]

转换逻辑：

复制所有原始字段
将 iconName 字符串映射为实际的 Lucide 图标组件

数据流

locales/zh.ts (或 en.ts 等)
    │
    ├── frameworks.crispe ──────────┐
    ├── frameworks.break ───────────┤──► getLocaleField(locale, "frameworks")
    └── frameworks.rtf ─────────────┘
                                          │
                                          ▼
                                   mapStepsToComponent()
                                          │
                                          ▼
                                   FrameworkDemo 组件

依赖

依赖	用途
`react` - useState	悬停状态管理
`next-intl` - useLocale	获取当前语言
`lucide-react`	图标组件
`@/lib/utils` - cn	类名合并
`@/components/prompts/run-prompt-button`	运行提示词按钮
`./locales` - getLocaleField, FrameworkStepData	本地化数据

本地化数据结构

// FrameworkStepData（来自 locales）
{
  letter: "R",
  label: "角色",
  description: "定义 AI 的角色",
  iconName: "User",      // 图标名称字符串
  color: "blue",
  example?: "你是一位专家..."
}

// FrameworkData
{
  name: "CRISPE 框架",
  steps: FrameworkStepData[],
  examplePrompt: "完整示例提示词...",
  exampleDescription: "示例描述"
}

图标映射

组件内置以下图标映射：

图标名	Lucide 组件
User	User
HelpCircle	HelpCircle
FileText	FileText
Settings	Settings
Palette	Palette
FlaskConical	FlaskConical
Target	Target
Check	Check
ListChecks	ListChecks

如需新图标，需更新 iconMap 对象。