ZMindMap

ZMindMap copied to clipboard

简介

仿幕布思维导图网站。支持导图编辑、大纲编辑、图片导出、扫码登录。

项目地址：

项目总结：ZMindMap-Wiki

预览地址：ZMind思维导图

移动端地址: ZMindMap-Mobile

Node端地址：mind-map-node

下载&安装

• 下载

  git clone --depth=1 https://github.com/zyascend/ZMindMap.git
  

• 进入项目目录

  cd ZmindMap
  

• 安装依赖

  npm install
  

• 运行

  npm run serve
  

效果图

视频版：点击播放

Features

• Vue3 CompositionApi
• Pinia状态管理
• VueRouter路由控制
• SVG画图
  • 类幕布思维导图的文档构建方式实现
    • 数据驱动UI的思路
  • svg导出为png图片
• Element-plus
  • splitChunks单独打包
• 基于七牛云的CDN加速
• JWT & 二维码扫码登录
• 夜间模式
• 前端监控
  • 使用Sentry收集错误信息
  • 百度统计

TODOs

• [x] 基于vue响应式，通过数据驱动svg子元素更新
• [x] 对于大纲编辑，如何不通过递归查找的方式在源数据中定位到待更新的节点
  • [x] key-value形式构建map
• [x] Vuex切换为pinia
  • [x] store分模块维护
• [x] 支持撤回操作
  • [x] bug fix
• [x] 导图风格切换
• [x] 支持导出
  • [x] 导出为图片
    • [x] 图片不显示 bug fix
  • [ ] 导出为其他格式
• [x] 二维码扫码登录
  • [x] 轮询接口查状态 => websocket
• [x] 大纲编辑页相关优化
  • [x] 防止XSS攻击
• [x] 支持添加图片
• [x] 重写节点宽高计算逻辑
• [x] 全面重写MindMap组件
  • [x] 代码臃肿：分离UI渲染部分和数据部分
  • [x] 可拓展性：提取各种样式导图的公共dom结构 方便切换导图风格
  • [x] 公共逻辑抽取 方便随时切换颜色样式
  • [x] 导图计算：抽取公共逻辑 + 继承封装
  • [x] map store 逻辑优化
• [ ] 页面的loading 和 错误处理
• [ ] 监听全局异常 error boundary
• [ ] 使用自定义的loader处理svg图标
  • [ ] 将svg icon处理为SFC
  • [ ] 封装SFC为Icon组件：绑定属性 灵活使用
• [x] 所有配置项由window.CFG注入