知更

简介

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

Node端地址：zhigeng-backend

下载&安装

• 前置条件及说明

  • 先完成后端部分安装配置
  • 因sentry对新手不怎么友好，为了便于理解上手将其从项目中移除，

• 下载

• 进入项目目录

  cd ZhiGeng

• 安装依赖

  npm install

• 运行

  npm run serve

效果图

视频版：点击播放

Features

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

TODOs

• 基于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注入