439 lines
12 KiB
Markdown
439 lines
12 KiB
Markdown
# AI思维导图生成器
|
||
|
||
基于Django + Vue.js的智能思维导图生成和管理系统，支持AI驱动的文档分析和可视化思维导图创建。
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 🧠 AI智能分析
|
||
- **文档智能解析**: 支持DOCX、PDF、TXT、MD等多种格式
|
||
- **AI内容提取**: 自动识别文档结构，生成层次化思维导图
|
||
- **智能标题识别**: 基于视觉特征和语义逻辑的标题层级分析
|
||
- **内容结构化**: 将非结构化文档转换为结构化思维导图
|
||
|
||
### 🎨 可视化编辑
|
||
- **交互式思维导图**: 基于MindElixir的可视化编辑界面
|
||
- **拖拽操作**: 支持节点拖拽、移动、编辑
|
||
- **实时保存**: 自动保存编辑内容到数据库
|
||
- **缩放控制**: 支持思维导图缩放和居中显示
|
||
- **Markdown编辑器**: 基于Marked.js + Prism.js + KaTeX的现代化markdown渲染引擎
|
||
- **富媒体内容**: 支持图片、表格、数学公式、代码高亮等多种内容类型
|
||
- **图片预览**: 支持双击或右键预览图片细节
|
||
- **SVG导出**: 高质量矢量图导出，支持富媒体内容
|
||
|
||
### 💾 数据管理
|
||
- **云端存储**: 思维导图数据持久化存储
|
||
- **历史记录**: 自动保存操作历史，支持快速恢复
|
||
- **数据导入导出**: 支持JSON格式的数据交换
|
||
- **版本管理**: 自动记录创建和更新时间
|
||
|
||
### 🔧 技术特性
|
||
- **响应式设计**: 适配不同屏幕尺寸
|
||
- **实时协作**: 支持多用户同时编辑
|
||
- **API接口**: 完整的RESTful API
|
||
- **模块化架构**: 前后端分离，易于扩展
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
### 后端技术
|
||
- **框架**: Django 4.2.7 + Django REST Framework
|
||
- **数据库**: SQLite（生产环境可配置PostgreSQL/MySQL）
|
||
- **AI服务**: OpenAI API + 智谱AI GLM-4.5
|
||
- **文件处理**: python-docx, PyPDF2, markdown
|
||
- **跨域支持**: django-cors-headers
|
||
|
||
### 前端技术
|
||
- **框架**: Vue.js 3.3.4 + Vite 4.4.9
|
||
- **思维导图**: MindElixir 3.0.0 (自定义增强版本)
|
||
- **文件处理**: mammoth.js (DOCX), pdfjs-dist (PDF)
|
||
- **HTTP客户端**: Axios 1.5.0
|
||
- **Markdown引擎**: Marked.js 16.2.1 + 自定义渲染器
|
||
- **数学公式**: KaTeX 0.16.22 (LaTeX表达式支持)
|
||
- **代码高亮**: PrismJS 1.30.0 (多语言语法着色)
|
||
- **富媒体渲染**: 统一的dangerouslySetInnerHTML机制
|
||
|
||
### AI内容分析
|
||
- **TypeScript**: 类型安全的Markdown转JSON转换
|
||
- **流式处理**: 支持大文档的流式AI分析
|
||
- **多模型支持**: 支持多种AI模型切换
|
||
|
||
### Markdown渲染引擎
|
||
- **核心引擎**: Marked.js 16.2.1 - 快速、轻量的markdown解析器
|
||
- **语法高亮**: PrismJS 1.30.0 - 支持JavaScript、CSS、JSON、Python、SQL等
|
||
- **数学公式**: KaTeX 0.16.22 - 完整的LaTeX数学表达式支持
|
||
- **自定义渲染**: 针对思维导图优化的图片、表格渲染器
|
||
- **统一机制**: 所有富媒体内容使用dangerouslySetInnerHTML统一渲染
|
||
- **响应式设计**: 图片、表格等元素自适应容器大小
|
||
- **交互功能**: 图片预览、hover效果、SVG导出支持
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
- Python 3.8+
|
||
- Node.js 16+
|
||
- npm 或 yarn
|
||
|
||
### 1. 克隆项目
|
||
```bash
|
||
git clone <repository-url>
|
||
cd MindMap
|
||
```
|
||
|
||
### 2. 后端设置
|
||
|
||
#### 进入后端目录
|
||
```bash
|
||
cd backend
|
||
```
|
||
|
||
#### 安装Python依赖
|
||
```bash
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
#### 数据库迁移
|
||
```bash
|
||
python manage.py makemigrations
|
||
python manage.py migrate
|
||
```
|
||
|
||
#### 创建超级用户（可选）
|
||
```bash
|
||
python manage.py createsuperuser
|
||
```
|
||
|
||
#### 启动Django服务器
|
||
```bash
|
||
python manage.py runserver
|
||
```
|
||
|
||
### 3. 前端设置
|
||
|
||
#### 安装Node.js依赖
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
```
|
||
|
||
#### 启动前端开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 4. 访问应用
|
||
- 前端界面: http://localhost:5173
|
||
- 后端API: http://localhost:8000
|
||
- Django管理后台: http://localhost:8000/admin
|
||
|
||
## 📡 API接口
|
||
|
||
### 思维导图管理
|
||
- `GET /api/mindMaps/{id}` - 获取思维导图数据
|
||
- `POST /api/mindMaps` - 创建新思维导图
|
||
|
||
### 节点操作
|
||
- `POST /api/mindMaps/addNodes` - 批量添加节点
|
||
- `PATCH /api/mindMaps/updateNode` - 更新节点信息
|
||
- `DELETE /api/mindMaps/deleteNodes` - 批量删除节点
|
||
|
||
### AI服务
|
||
- `POST /api/ai/generate-markdown` - AI生成Markdown内容
|
||
|
||
### 数据格式
|
||
所有API返回的数据都遵循MindElixir格式规范，支持树形结构的数据交换。
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
MindMap/
|
||
├── backend/ # Django后端
|
||
│ ├── django_mindmap/ # Django项目配置
|
||
│ │ ├── settings.py # 项目设置
|
||
│ │ ├── urls.py # 主URL配置
|
||
│ │ └── wsgi.py # WSGI配置
|
||
│ ├── mindmap/ # 主应用
|
||
│ │ ├── models.py # 数据模型（mindMap, Node）
|
||
│ │ ├── views_doc.py # API视图函数
|
||
│ │ ├── serializers.py # 数据序列化器
|
||
│ │ ├── ai_service.py # AI服务集成
|
||
│ │ ├── services.py # 业务逻辑服务
|
||
│ │ └── urls.py # 应用URL配置
|
||
│ ├── manage.py # Django管理脚本
|
||
│ ├── requirements.txt # Python依赖
|
||
│ └── mindmap.db # SQLite数据库
|
||
├── frontend/ # Vue.js前端
|
||
│ ├── src/
|
||
│ │ ├── components/ # Vue组件
|
||
│ │ │ ├── MindMap.vue # 思维导图组件
|
||
│ │ │ ├── AISidebar.vue # AI助手侧边栏
|
||
│ │ │ └── MarkdownTest.vue # Markdown测试组件
|
||
│ │ ├── api/ # API接口
|
||
│ │ │ └── mindmap.js # 思维导图API
|
||
│ │ ├── lib/ # 第三方库
|
||
│ │ │ └── mind-elixir/ # MindElixir库（项目使用版本）
|
||
│ │ ├── utils/ # 工具函数
|
||
│ │ │ └── markdownRenderer.js # Markdown渲染引擎(Marked.js + Prism.js + KaTeX)
|
||
│ │ ├── App.vue # 主应用组件
|
||
│ │ └── main.js # 应用入口
|
||
│ ├── test-*.html # 功能测试文件
|
||
│ ├── package.json # 前端依赖
|
||
│ └── vite.config.js # Vite配置
|
||
../mind-elixir-core-master/ # MindElixir完整源码（平级目录）
|
||
│ ├── src/ # TypeScript源码
|
||
│ ├── tests/ # 测试套件
|
||
│ ├── dist/ # 编译后文件
|
||
│ └── package.json # 依赖配置
|
||
└── README.md # 项目文档
|
||
```
|
||
|
||
## ⚙️ 配置说明
|
||
|
||
### AI服务配置
|
||
|
||
在 `backend/mindmap/ai_service.py` 中配置AI服务：
|
||
|
||
```python
|
||
# 智谱AI配置
|
||
API_KEY = "your_glm_api_key"
|
||
BASE_URL = "https://open.bigmodel.cn/api/paas/v4/"
|
||
MODEL = "glm-4.5"
|
||
|
||
# OpenAI配置（可选）
|
||
OPENAI_API_KEY = "your_openai_api_key"
|
||
```
|
||
|
||
### 数据库配置
|
||
|
||
默认使用SQLite，生产环境建议使用PostgreSQL：
|
||
|
||
```python
|
||
# backend/django_mindmap/settings.py
|
||
DATABASES = {
|
||
'default': {
|
||
'ENGINE': 'django.db.backends.postgresql',
|
||
'NAME': 'mindmap_db',
|
||
'USER': 'your_username',
|
||
'PASSWORD': 'your_password',
|
||
'HOST': 'localhost',
|
||
'PORT': '5432',
|
||
}
|
||
}
|
||
```
|
||
|
||
### 文件上传配置
|
||
|
||
```python
|
||
# backend/django_mindmap/settings.py
|
||
MAX_UPLOAD_SIZE = 16 * 1024 * 1024 # 16MB
|
||
ALLOWED_FILE_TYPES = ['.docx', '.pdf', '.txt', '.md']
|
||
MEDIA_ROOT = BASE_DIR / 'media'
|
||
MEDIA_URL = '/media/'
|
||
```
|
||
|
||
### 前端配置
|
||
|
||
```javascript
|
||
// frontend/src/api/mindmap.js
|
||
const API_BASE_URL = "http://127.0.0.1:8000/api";
|
||
```
|
||
|
||
## 🛠️ 开发指南
|
||
|
||
### 添加新数据模型
|
||
|
||
1. 在 `backend/mindmap/models.py` 中定义模型
|
||
2. 运行数据库迁移：
|
||
```bash
|
||
cd backend
|
||
python manage.py makemigrations
|
||
python manage.py migrate
|
||
```
|
||
|
||
### 扩展API接口
|
||
|
||
1. 在 `backend/mindmap/views_doc.py` 中编写视图函数
|
||
2. 在 `backend/mindmap/serializers.py` 中定义序列化器
|
||
3. 在 `backend/mindmap/urls.py` 中添加URL路由
|
||
|
||
### 自定义AI服务
|
||
|
||
修改 `backend/mindmap/ai_service.py` 中的AI处理逻辑：
|
||
|
||
```python
|
||
def call_ai_api(system_prompt, user_prompt, model="glm-4.5", base_url="...", api_key="..."):
|
||
# 自定义AI服务调用逻辑
|
||
pass
|
||
```
|
||
|
||
### 前端组件开发
|
||
|
||
1. 在 `frontend/src/components/` 中创建Vue组件
|
||
2. 在 `frontend/src/api/` 中添加API接口
|
||
3. 使用Vite进行热重载开发
|
||
|
||
### 数据格式规范
|
||
|
||
系统使用MindElixir数据格式：
|
||
|
||
```json
|
||
{
|
||
"nodeData": {
|
||
"id": "root",
|
||
"topic": "根节点标题",
|
||
"data": {
|
||
"des": "节点描述"
|
||
},
|
||
"children": [
|
||
{
|
||
"id": "child-1",
|
||
"topic": "子节点标题",
|
||
"data": {
|
||
"des": "子节点描述"
|
||
},
|
||
"children": []
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🚀 部署指南
|
||
|
||
### 生产环境配置
|
||
|
||
1. **环境变量设置**：
|
||
```bash
|
||
export DEBUG=False
|
||
export SECRET_KEY="your-secret-key"
|
||
export DATABASE_URL="postgresql://user:pass@localhost/db"
|
||
```
|
||
|
||
2. **静态文件收集**：
|
||
```bash
|
||
cd backend
|
||
python manage.py collectstatic --noinput
|
||
```
|
||
|
||
3. **数据库迁移**：
|
||
```bash
|
||
cd backend
|
||
python manage.py migrate
|
||
```
|
||
|
||
4. **前端构建**：
|
||
```bash
|
||
cd frontend
|
||
npm run build
|
||
```
|
||
|
||
### Docker部署
|
||
|
||
#### 后端Dockerfile
|
||
```dockerfile
|
||
FROM python:3.11-slim
|
||
|
||
WORKDIR /app
|
||
COPY backend/requirements.txt .
|
||
RUN pip install -r requirements.txt
|
||
|
||
COPY backend/ .
|
||
RUN python manage.py collectstatic --noinput
|
||
|
||
EXPOSE 8000
|
||
CMD ["gunicorn", "django_mindmap.wsgi:application", "--bind", "0.0.0.0:8000"]
|
||
```
|
||
|
||
#### 前端Dockerfile
|
||
```dockerfile
|
||
FROM node:18-alpine
|
||
|
||
WORKDIR /app
|
||
COPY package*.json ./
|
||
RUN npm install
|
||
|
||
COPY . .
|
||
RUN npm run build
|
||
|
||
EXPOSE 5173
|
||
CMD ["npm", "run", "preview"]
|
||
```
|
||
|
||
### Nginx配置
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
location / {
|
||
proxy_pass http://localhost:5173;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
|
||
location /api/ {
|
||
proxy_pass http://localhost:8000;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📝 使用说明
|
||
|
||
### 基本操作流程
|
||
|
||
1. **上传文档**：在AI侧边栏中上传DOCX、PDF、TXT或MD文件
|
||
2. **AI分析**：系统自动调用AI服务分析文档结构，识别图片、表格等富媒体内容
|
||
3. **生成思维导图**：AI将文档转换为结构化的思维导图，支持图片、表格、数学公式等
|
||
4. **编辑调整**：在可视化界面中拖拽、编辑节点，支持富媒体内容预览
|
||
5. **导出分享**：支持SVG矢量图导出和JSON数据交换
|
||
|
||
### 快捷键操作
|
||
|
||
- `Ctrl + 滚轮`：缩放思维导图
|
||
- `双击节点`：编辑节点内容
|
||
- `双击图片节点`：预览图片细节
|
||
- `右键节点`：显示操作菜单（包含图片预览选项）
|
||
- `拖拽节点`：移动节点位置
|
||
- `Ctrl + E`：展开/折叠节点
|
||
- `Alt + F`：聚焦/取消聚焦节点
|
||
|
||
## 🤝 贡献指南
|
||
|
||
欢迎贡献代码！请遵循以下步骤：
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支：`git checkout -b feature/new-feature`
|
||
3. 提交更改：`git commit -am 'Add new feature'`
|
||
4. 推送分支：`git push origin feature/new-feature`
|
||
5. 提交Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License - 详见 [LICENSE](LICENSE) 文件
|
||
|
||
## 🧹 项目优化
|
||
|
||
### 代码清理
|
||
项目已进行全面的代码清理和优化：
|
||
|
||
- ✅ **删除冗余文件**: 移除了重复的测试文件和调试文件
|
||
- ✅ **保留核心功能**: 保留了所有必要的测试和调试工具
|
||
- ✅ **优化项目结构**: 清晰分离了开发版本和生产版本
|
||
- ✅ **MindElixir增强**: 集成了自定义的Markdown渲染引擎
|
||
- ✅ **富媒体支持**: 统一的图片、表格、数学公式渲染机制
|
||
- ✅ **技术栈统一**: 所有富媒体内容使用相同的markdown编辑器
|
||
|
||
### 文件结构优化
|
||
- **保留**: `../mind-elixir-core-master/` - 完整的源码和文档（平级目录）
|
||
- **保留**: `frontend/src/lib/mind-elixir/` - 项目中使用的增强版本
|
||
- **保留**: 核心测试文件 - 用于功能验证和问题调试
|
||
- **删除**: 重复的调试文件和过时的测试文件
|
||
|
||
## 🙏 致谢
|
||
|
||
- [MindElixir](https://github.com/ssshooter/mind-elixir-core) - 思维导图可视化库
|
||
- [Vue.js](https://vuejs.org/) - 前端框架
|
||
- [Django](https://www.djangoproject.com/) - 后端框架
|
||
- [智谱AI](https://www.zhipuai.cn/) - AI服务支持
|