REQUIREMENTS_SPEC.md

ChainLearn AI - 增强功能需求文档

1. 项目背景

为了将 ChainLearn AI 打造成一个具有商业竞争力的专业化学习平台，我们需要引入更高级的互动功能。目前的纯文本对话形式较为单调，缺乏视觉刺激和主动的知识验证机制。

2. 核心功能需求

功能一：可视化知识图谱 (Visual Learning)

目标：利用图表将抽象概念具象化，提升用户的理解效率和沉浸感。

具体需求：

1. Mermaid图表渲染：

   • 支持类型：流程图 (Flowchart)、时序图 (Sequence Diagram)、思维导图 (Mindmap)、类图 (Class Diagram)。
   • 触发机制：AI 讲师在讲解复杂流程（如“React 渲染机制”、“光合作用流程”）时，自动输出 Mermaid 代码块。
   • UI展示：在聊天气泡中，将 Markdown 代码块自动转换为渲染好的 SVG 图表。
   • 交互：支持简单的缩放或全屏查看（可选）。
   • 暗黑模式适配：图表颜色需适配当前应用的深色主题 (Slate-950)。

2. AI 智能绘图指令：

   • 更新 System Prompt，明确指示 AI 在解释“结构”、“关系”、“过程”类知识点时必须使用可视化图表。

功能二：智能实战测验 (Smart Quizzes)

目标：通过游戏化的即时反馈，帮助用户巩固知识，增加学习的成就感。

具体需求：

1. 测验生成引擎：

   • 在每个学习节点 (Node) 结束后，系统自动基于该节点的上下文生成 3-5 道单项选择题。
   • 题目应包含：问题描述、4个选项、正确答案、解析 (为什么选这个)。

2. 交互式测验 UI：

   • 入口：在节点头部或底部增加“知识自测 (Test Knowledge)”按钮。
   • 测试流程：
     • 用户点击开始 -> 弹出模态框 (Modal)。
     • 逐题展示 -> 用户选择答案。
     • 即时反馈：选择后立即显示对错，并展示 AI 生成的解析。
   • 结果汇总：测试结束后显示得分（例如：4/5）。
     • 若全对：显示“完美掌握”鼓励动效。
     • 若有错：建议复习相关知识点。

3. 技术实现路径 (简述)

• 前端依赖：引入 mermaid 库用于绘图。
• 组件开发：
  • MermaidBlock：封装 React 组件，接收 code string，输出 SVG。
  • QuizModal：封装测验交互逻辑。
• AI 服务：新增 generateNodeQuiz 接口，专门用于生成结构化的测验 JSON 数据。

4. 预期交付成果

• 用户在询问“TCP 握手流程”时，能直接看到时序图。
• 用户在学完一个章节后，可以通过测验验证自己是否真的学会了。