https://github.com/zyascend/zmindmap
仿幕布(mubu.com)风格思维导图，Vue3+SVG实现。
https://github.com/zyascend/zmindmap
cropperjs d3js element-ui jwt mindmap pinia qrcode sentry svg vue3 xss
Last synced: about 1 month ago
JSON representation
仿幕布(mubu.com)风格思维导图，Vue3+SVG实现。
- Host: GitHub
- URL: https://github.com/zyascend/zmindmap
- Owner: zyascend
- License: mit
- Created: 2021-06-19T14:50:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-13T07:32:50.000Z (over 2 years ago)
- Last Synced: 2024-07-30T20:08:38.910Z (9 months ago)
- Topics: cropperjs, d3js, element-ui, jwt, mindmap, pinia, qrcode, sentry, svg, vue3, xss
- Language: Vue
- Homepage: https://map.kimjisoo.cn
- Size: 2.53 MB
- Stars: 82
- Watchers: 3
- Forks: 21
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 简介
**仿[幕布](https://mubu.com)思维导图网站。支持导图编辑、大纲编辑、图片导出、扫码登录。**
## 项目地址：
项目总结：[ZMindMap-Wiki](https://github.com/zyascend/ZMindMap/wiki)
预览地址：[ZMind思维导图](https://map.kimjisoo.cn)
移动端地址: [ZMindMap-Mobile](https://github.com/zyascend/ZMindMap-Mobile)
Node端地址：[mind-map-node](https://github.com/zyascend/mind-map-node)
## 下载&安装
- 下载
```bash
git clone --depth=1 https://github.com/zyascend/ZMindMap.git
```
- 进入项目目录
```bash
cd ZmindMap
```
- 安装依赖
```bash
npm install
```
- 运行
```bash
npm run serve
```
## 效果图
| 
| 
|
| :------------------------------------------------------------------------------: | -------------------------------------------------------------------------------- |
| 
| 
|
| 
| 
|
视频版：[点击播放](https://cdn.kimjisoo.cn/videos%2Fpresentation_v1.0.mp4)
## 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`注入