仿幕布思维导图网站。支持导图编辑、大纲编辑、图片导出
Node端地址:zmind-backend
docker-compose 版本
version: '3'
services:
zmind-frontend:
container_name: zmind-frontend
image: zanderzhao/zmind-frontend
# image: zmind-frontend
restart: always
ports:
- 3004:8080
# network_mode: host
# volumes:
# - ${PWD}/data:/app
links:
- zmind-backend
environment:
- NODE_ENV=production
- WATER_PRINT_COPYRIGHT=ZMIND
- ZMIND_FRONTEND_URL=http://127.0.0.1:3004
- ZMIND_BACKEND_URL=http://127.0.0.1:3003
- BAIDU_HM=https://hm.baidu.com/hm.js?zzz
zmind-backend:
container_name: zmind-backend
image: zanderzhao/zmind-backend
# image: zmind-backend
ports:
- 3003:3003 # 如果你的App需要公开端口,可以映射到宿主机
links:
- zmind-backend-redis
- zmind-backend-mongodb
environment:
- NODE_ENV=production
zmind-backend-redis:
container_name: zmind-backend-redis
image: redis:latest
# 6379
zmind-backend-mongodb:
container_name: zmind-backend-mongodb
image: mongo:latest
# 27017
![]() |
![]() |
---|---|
![]() |
![]() |
![]() |
![]() |
视频版:点击播放
- Vue3 CompositionApi
- Pinia状态管理
- VueRouter路由控制
- SVG画图
- 类幕布思维导图的文档构建方式实现
- 数据驱动UI的思路
- svg导出为png图片
- 类幕布思维导图的文档构建方式实现
- Element-plus
- splitChunks单独打包
- 基于七牛云的CDN加速
- JWT & 二维码扫码登录
- 夜间模式
- 前端监控
- 使用Sentry收集错误信息
- 百度统计
- 基于vue响应式,通过数据驱动svg子元素更新
- 对于大纲编辑,如何不通过递归查找的方式在源数据中定位到待更新的节点
- key-value形式构建map
- Vuex切换为pinia
- store分模块维护
- 支持撤回操作
- bug fix
- 导图风格切换
- 支持导出
- 导出为图片
- 图片不显示 bug fix
- 导出为其他格式
- 导出为图片
- 二维码扫码登录
- 轮询接口查状态 => websocket
- 大纲编辑页相关优化
- 防止XSS攻击
- 支持添加图片
- 重写节点宽高计算逻辑
- 全面重写MindMap组件
- 代码臃肿:分离UI渲染部分和数据部分
- 可拓展性:提取各种样式导图的公共dom结构 方便切换导图风格
- 公共逻辑抽取 方便随时切换颜色样式
- 导图计算:抽取公共逻辑 + 继承封装
- map store 逻辑优化
- 页面的loading 和 错误处理
- 监听全局异常 error boundary
- 使用自定义的loader处理svg图标
- 将svg icon处理为SFC
- 封装SFC为Icon组件:绑定属性 灵活使用
- 所有配置项由
window.CFG
注入
-
这是前端
-
截止202310,好像还不支持主题拖动排序
-
还有一些url作者写死的改成localhost了,本地可以跑通,云端可能要改点东西