Git Product home page Git Product logo

zmindmap's Introduction

MIT License Vue3.2 Live Demo

简介

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

项目地址:

项目总结: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

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

zmindmap's People

Contributors

zyascend avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

zmindmap's Issues

请问如何运行 ?

与此对应的还有后台项目吧 ?没有后台的情况下怎么运行体验?

同学,您这个项目引入了930个开源组件,存在4个漏洞,辛苦升级一下

检测到 zyascend/ZMindMap 一共引入了930个开源组件,存在4个漏洞

漏洞标题:Axios 安全漏洞
缺陷组件:[email protected]
漏洞编号:CVE-2021-3749
漏洞描述:Axios是一款基于Promise(异步编程的一种解决方案)的HTTP客户端。
Axios 存在安全漏洞,该漏洞源于在 axios 包中发现了一个 ReDoS(正则表达式拒绝服务)缺陷。攻击者可利用该漏洞为修剪功能提供精心设计的输入导致应用程序消耗过多的 CPU。
影响范围:(∞, 0.21.3)
最小修复版本:0.21.3
缺陷组件引入路径:[email protected]>[email protected]

另外还有4个漏洞,详细报告:https://mofeisec.com/jr?p=ib45f0

npm run serve时报错

报错如下 想请教下怎么解决
node_modules/_unplugin-vue-components@0.19.9@unplugin-vue-components/dist/chunk-MF6CXARB.js:613
compiler.watching.invalidate();
^

TypeError: Cannot read properties of undefined (reading 'invalidate')
at ZMindMap-main/node_modules/_unplugin-vue-components@0.19.9@unplugin-vue-components/dist/chunk-MF6CXARB.js:613:29
at processTicksAndRejections (node:internal/process/task_queues:78:11)
Waiting for the debugger to disconnect...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.