elements/index.ts

elements/index.ts

概述

书籍元素组件的集中导出文件（Barrel Export）。作为 elements 目录的统一入口，重新导出所有交互式书籍组件。

导出内容

图标组件

export {
  IconLock, IconUser, IconClipboard, IconSettings,
  IconCheck, IconX, IconStar, IconLightbulb, IconTarget
} from "./icons";

编辑器组件

export { CodeEditor } from "./code-editor";

链式调用组件

export { ChainExample, ChainFlowDemo } from "./chain";

UI 组件

export {
  Collapsible, Callout, CopyableCode, Quiz,
  TryIt, NavButton, NavFooter
} from "./ui";

列表组件

export { Checklist, Compare, InfoGrid } from "./lists";

框架组件

export {
  FrameworkDemo, CRISPEFramework,
  BREAKFramework, RTFFramework
} from "./frameworks";

提示词组件

export { PromptBreakdown, SpecificitySpectrum } from "./prompt";

演示组件

export {
  TokenizerDemo, ContextWindowDemo, TemperatureDemo,
  StructuredOutputDemo, FewShotDemo, JsonYamlDemo,
  IterativeRefinementDemo, CostCalculatorDemo
} from "./demos";

原则组件

export { PrinciplesSummary } from "./principles";

安全组件

export { JailbreakDemo } from "./security";

AI 能力演示

export { EmbeddingsDemo, LLMCapabilitiesDemo } from "./ai-demos";

媒体生成演示

export { TextToImageDemo, TextToVideoDemo } from "./media-demos";

上下文演示

export { SummarizationDemo, ContextPlayground } from "./context-demos";

导航组件

export { BookPartsNav } from "./navigation";

其他组件

// 令牌预测
export { TokenPredictionDemo } from "./token-prediction";

// 差异对比
export { DiffView, VersionDiff } from "./diff-view";

// 链式错误处理
export { ChainErrorDemo } from "./chain-error-demo";

// 链式演示
export {
  ValidationDemo, FallbackDemo, ContentPipelineDemo
} from "./chain-demos";

// 练习组件
export {
  FillInTheBlank, InteractiveChecklist, PromptDebugger
} from "./exercises";

// 构建器组件
export { PromptBuilder, PromptAnalyzer } from "./builder";

// 挑战组件
export { PromptChallenge, BeforeAfterEditor } from "./challenge";

与 interactive.tsx 的关系

elements/index.ts ◄─── 实际实现
         │
         └── 被导入 ───► interactive.tsx ◄─── 外部使用入口
                              │
                              └── 再次导出
  • elements/index.ts - 元素目录内部入口
  • interactive.tsx - 整个 book 模块的公共 API

使用建议

内部开发时（在 elements 目录内）：

// 直接导入兄弟模块
import { Quiz } from "./ui";
import { TokenizerDemo } from "./demos";

外部使用时：

// 使用上层入口
import { Quiz, TokenizerDemo } from "@/components/book/interactive";

维护说明

添加新组件时需：

  1. 在对应子目录创建组件文件
  2. 在此文件添加导出语句
  3. （可选）在 interactive.tsx 添加导出以暴露给外部
← 返回目录