Interactive Mindmap
基于 Next.js、FastAPI 和 SQLite 的交互式思维导图应用，支持通过腾讯云 AI Agent 对话生成思维导图。
项目结构
mindmap/
├── backend/ # FastAPI 后端
│ ├── app/
│ │ ├── main.py # 应用入口
│ │ ├── config.py # 配置
│ │ ├── database.py # 数据库
│ │ ├── models.py # 数据模型
│ │ ├── schemas.py # Pydantic schemas
│ │ └── routers/
│ │ ├── mindmaps.py # 思维导图 CRUD API
│ │ └── chat.py # AI 对话代理 (SSE)
│ ├── data/ # SQLite 数据库文件
│ ├── requirements.txt
│ └── .env.example
├── frontend/ # Next.js 前端
│ ├── app/
│ │ ├── page.tsx # 首页
│ │ └── mindmap/
│ │ ├── [id]/page.tsx # 思维导图详情页
│ │ └── chat/page.tsx # AI 对话 + 思维导图页
│ ├── components/
│ │ ├── MindmapCanvas.tsx # 思维导图画布
│ │ ├── MindmapNodeCard.tsx # 节点卡片
│ │ ├── ChatPanel.tsx # 聊天面板
│ │ └── CreateMindmapForm.tsx # 创建表单
│ ├── lib/
│ │ ├── api.ts # API 调用
│ │ └── treeToGraph.ts # 树转图布局
│ └── types/
│ └── mindmap.ts # TypeScript 类型
└── mind_prompt.md # AI Agent 系统提示词
环境配置
后端
- 安装依赖:
cd backend
pip install -r requirements.txt
- 配置环境变量:
# 复制示例配置
cp .env.example .env
# 编辑 .env，填入腾讯云 AI Agent 的 bot_app_key
TENCENT_BOT_APP_KEY=your-key-here
- 启动后端:
TENCENT_BOT_APP_KEY=your-key-here uvicorn app.main:app --reload
前端
- 安装依赖:
cd frontend
npm install
- 启动开发服务器:
npm run dev
页面说明
首页 /
输入主题创建思维导图（使用 mock 数据）。
思维导图详情 /mindmap/[id]
查看已保存的思维导图，支持节点展开/收缩。
AI 对话生成 /mindmap/chat?sessionId=xxx
通过与腾讯云 AI Agent 对话生成思维导图：
- 左侧: 思维导图画布，初始为空，AI 返回有效数据后自动渲染
- 右侧: 聊天面板，支持实时 SSE 流式响应
URL 参数:
sessionId(必填): 会话 ID，用于标识对话会话
数据流
用户输入 → ChatPanel → POST /api/chat → 后端代理 → 腾讯云 SSE API
↓
画布更新 ← onMindmapUpdate ← JSON 解析 ← SSE 流式响应 ←─┘
- 用户在聊天面板输入消息
- 前端发送 POST 请求到后端
/api/chat - 后端将请求代理到腾讯云 AI Agent SSE 接口
- SSE 流式响应逐步返回到前端
- 前端解析 SSE 事件，逐步显示 AI 回复
- 当 AI 回复完成后，尝试从回复中提取思维导图 JSON
- 如果提取成功，更新左侧画布
AI Agent 配置
参见 mind_prompt.md 获取 AI Agent 的系统提示词配置。