interactive.tsx

interactive.tsx

概述

书籍交互组件的统一导出文件。作为书籍系统中所有交互元素的中央入口点，重新导出各类演示组件、UI 元素和工具函数。

主要导出

图标组件

组件名来源描述
IconLock./elements/icons锁定图标
IconUser./elements/icons用户图标
IconClipboard./elements/icons剪贴板图标
IconSettings./elements/icons设置图标
IconCheck./elements/icons勾选图标
IconX./elements/icons关闭图标
IconStar./elements/icons星星图标
IconLightbulb./elements/icons灯泡图标
IconTarget./elements/icons目标图标

编辑器组件

组件名来源描述
CodeEditor./elements/code-editorMonaco 代码编辑器

链式调用组件

组件名来源描述
ChainExample./elements/chain链式示例展示
ChainFlowDemo./elements/chain链式流程演示

UI 组件

组件名来源描述
Collapsible./elements/ui可折叠面板
Callout./elements/ui标注/提示框
CopyableCode./elements/ui可复制代码块
Quiz./elements/ui测验/问答组件
TryIt./elements/ui试试点组件
NavButton./elements/ui导航按钮
NavFooter./elements/ui导航页脚

列表组件

组件名来源描述
Checklist./elements/lists检查清单
Compare./elements/lists对比组件
InfoGrid./elements/lists信息网格

框架组件

组件名来源描述
FrameworkDemo./elements/frameworks框架演示
CRISPEFramework./elements/frameworksCRISPE 框架
BREAKFramework./elements/frameworksBREAK 框架
RTFFramework./elements/frameworksRTF 框架

提示词组件

组件名来源描述
PromptBreakdown./elements/prompt提示词分解
SpecificitySpectrum./elements/prompt具体性谱系

演示组件

组件名来源描述
TokenizerDemo./elements/demos分词器演示
ContextWindowDemo./elements/demos上下文窗口演示
TemperatureDemo./elements/demos温度参数演示
StructuredOutputDemo./elements/demos结构化输出演示
FewShotDemo./elements/demosFew-Shot 学习演示
JsonYamlDemo./elements/demosJSON/YAML 对比演示
IterativeRefinementDemo./elements/demos迭代优化演示
CostCalculatorDemo./elements/demos成本计算器

原则组件

组件名来源描述
PrinciplesSummary./elements/principles原则总结

安全组件

组件名来源描述
JailbreakDemo./elements/security越狱攻击演示

AI 能力演示

组件名来源描述
EmbeddingsDemo./elements/ai-demos嵌入向量演示
LLMCapabilitiesDemo./elements/ai-demosLLM 能力演示

媒体生成演示

组件名来源描述
TextToImageDemo./elements/media-demos文生图演示
TextToVideoDemo./elements/media-demos文生视频演示

上下文演示

组件名来源描述
SummarizationDemo./elements/context-demos摘要策略演示
ContextPlayground./elements/context-demos上下文游乐场

导航组件

组件名来源描述
BookPartsNav./elements/navigation书籍分部分导航

其他组件

组件名来源描述
TokenPredictionDemo./elements/token-prediction令牌预测演示
DiffView./elements/diff-view差异对比视图
VersionDiff./elements/diff-view版本差异
ChainErrorDemo./elements/chain-error-demo链式错误演示
ValidationDemo./elements/chain-demos验证演示
FallbackDemo./elements/chain-demos降级演示
ContentPipelineDemo./elements/chain-demos内容管道演示
FillInTheBlank./elements/exercises填空练习
InteractiveChecklist./elements/exercises交互式检查清单
PromptDebugger./elements/exercises提示词调试器
PromptBuilder./elements/builder提示词构建器
PromptAnalyzer./elements/builder提示词分析器
PromptChallenge./elements/challenge提示词挑战
BeforeAfterEditor./elements/challenge前后对比编辑器

使用示例

import { 
  TokenizerDemo, 
  TemperatureDemo, 
  Quiz, 
  Callout 
} from "@/components/book/interactive";

export default function ChapterPage() {
  return (
    <div>
      <Callout type="info" title="提示">
        这是一个信息提示框
      </Callout>
      
      <TokenizerDemo />
      <TemperatureDemo />
      
      <Quiz 
        question="什么是温度参数？"
        options={["A", "B", "C"]}
        correctIndex={0}
        explanation="温度参数控制输出的随机性。"
      />
    </div>
  );
}

架构说明

该文件采用 barrel export 模式，将所有书籍相关组件集中管理：

  1. 单一入口 - 其他模块只需导入此文件即可使用所有组件
  2. 逻辑分组 - 按功能领域组织导出（UI、演示、框架等）
  3. 简化维护 - 组件位置变更只需修改此文件
← 返回目录