Go to file

lixinran 68b0ba1ccf 修复节点编辑和显示问题 - 添加convertHTMLToMarkdown函数，修复双击编辑节点时表格无法正常显示的问题 - 优化HTML到Markdown转换逻辑，支持表格、图片、文本格式的正确转换 - 修复图片显示问题：禁用代理URL转换，直接使用原始CDN URL - 解决思维导图视图中图片显示为markdown文本的问题修复内容： 1. 双击编辑节点时：图片正常显示，表格现在也能正常显示 2. 思维导图视图时：图片现在能正常显示，表格继续正常显示		2025-10-15 15:29:49 +08:00
backend	修复节点编辑和显示问题	2025-10-15 15:29:49 +08:00
frontend	修复节点编辑和显示问题	2025-10-15 15:29:49 +08:00
.DS_Store	feat: 完善图片显示和性能优化	2025-10-09 16:02:23 +08:00
README.md	更新README文档	2025-10-11 13:49:03 +08:00

README.md

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. 克隆项目

git clone <repository-url>
cd MindMap

2. 后端设置

进入后端目录

cd backend

安装Python依赖

pip install -r requirements.txt

数据库迁移

python manage.py makemigrations
python manage.py migrate

创建超级用户（可选）

python manage.py createsuperuser

启动Django服务器

python manage.py runserver

3. 前端设置

安装Node.js依赖

cd frontend
npm install

启动前端开发服务器

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服务：

# 智谱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：

# 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',
    }
}

文件上传配置

# 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/'

前端配置

// frontend/src/api/mindmap.js
const API_BASE_URL = "http://127.0.0.1:8000/api";

🛠️ 开发指南

添加新数据模型

在 backend/mindmap/models.py 中定义模型

运行数据库迁移：

cd backend
python manage.py makemigrations
python manage.py migrate

扩展API接口

在 backend/mindmap/views_doc.py 中编写视图函数
在 backend/mindmap/serializers.py 中定义序列化器
在 backend/mindmap/urls.py 中添加URL路由

自定义AI服务

修改 backend/mindmap/ai_service.py 中的AI处理逻辑：

def call_ai_api(system_prompt, user_prompt, model="glm-4.5", base_url="...", api_key="..."):
    # 自定义AI服务调用逻辑
    pass

前端组件开发

在 frontend/src/components/ 中创建Vue组件
在 frontend/src/api/ 中添加API接口
使用Vite进行热重载开发

数据格式规范

系统使用MindElixir数据格式：

{
  "nodeData": {
    "id": "root",
    "topic": "根节点标题",
    "data": {
      "des": "节点描述"
    },
    "children": [
      {
        "id": "child-1",
        "topic": "子节点标题",
        "data": {
          "des": "子节点描述"
        },
        "children": []
      }
    ]
  }
}

🚀 部署指南

生产环境配置

环境变量设置：

export DEBUG=False
export SECRET_KEY="your-secret-key"
export DATABASE_URL="postgresql://user:pass@localhost/db"

静态文件收集：

cd backend
python manage.py collectstatic --noinput

数据库迁移：
```
cd backend
python manage.py migrate
```
前端构建：
```
cd frontend
npm run build
```

Docker部署

后端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

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

EXPOSE 5173
CMD ["npm", "run", "preview"]

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;
    }
}

📝 使用说明

基本操作流程

上传文档：在AI侧边栏中上传DOCX、PDF、TXT或MD文件
AI分析：系统自动调用AI服务分析文档结构，识别图片、表格等富媒体内容
生成思维导图：AI将文档转换为结构化的思维导图，支持图片、表格、数学公式等
编辑调整：在可视化界面中拖拽、编辑节点，支持富媒体内容预览
导出分享：支持SVG矢量图导出和JSON数据交换

快捷键操作

Ctrl + 滚轮：缩放思维导图
双击节点：编辑节点内容
双击图片节点：预览图片细节
右键节点：显示操作菜单（包含图片预览选项）
拖拽节点：移动节点位置
Ctrl + E：展开/折叠节点
Alt + F：聚焦/取消聚焦节点

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

Fork 项目
创建功能分支：git checkout -b feature/new-feature
提交更改：git commit -am 'Add new feature'
推送分支：git push origin feature/new-feature
提交Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

🧹 项目优化

代码清理

项目已进行全面的代码清理和优化：

✅ 删除冗余文件: 移除了重复的测试文件和调试文件
✅ 保留核心功能: 保留了所有必要的测试和调试工具
✅ 优化项目结构: 清晰分离了开发版本和生产版本
✅ MindElixir增强: 集成了自定义的Markdown渲染引擎
✅ 富媒体支持: 统一的图片、表格、数学公式渲染机制
✅ 技术栈统一: 所有富媒体内容使用相同的markdown编辑器

文件结构优化

保留: ../mind-elixir-core-master/ - 完整的源码和文档（平级目录）
保留: frontend/src/lib/mind-elixir/ - 项目中使用的增强版本
保留: 核心测试文件 - 用于功能验证和问题调试
删除: 重复的调试文件和过时的测试文件

🙏 致谢

MindElixir - 思维导图可视化库
Vue.js - 前端框架
Django - 后端框架
智谱AI - AI服务支持

README.md Unescape Escape