打包

修复子节点收起状态复制时丢失的问题
更新文档
2026-02-18 22:38:46 +08:00 · 2022-10-10 16:27:49 +08:00 · 2022-10-10 16:11:00 +08:00 · 2022-10-10 15:02:22 +08:00 · 2022-10-10 14:39:09 +08:00 · 2022-10-10 14:31:43 +08:00
42 changed files with 2341 additions and 415 deletions
--- a/README.md
+++ b/README.md
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-e86f1494.f8dd20e2.js" rel="prefetch"><link href="dist/css/app.d29688d8.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.88b2cb65.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.094115db.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.d29688d8.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.094115db.js"></script><script src="dist/js/app.88b2cb65.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.2974531c.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.493dd0a8.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.4f5ceb11.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.2974531c.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.4f5ceb11.js"></script><script src="dist/js/app.493dd0a8.js"></script></body></html>
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -0,0 +1,66 @@
+{
+    "layout": "logicalStructure",
+    "root": {
+        "data": {
+            "text": "根节点",
+            "expand": true,
+            "isActive": false
+        },
+        "children": [{
+            "data": {
+                "text": "二级节点",
+                "generalization": {
+                    "text": "概要",
+                    "expand": true,
+                    "isActive": false
+                },
+                "expand": true,
+                "isActive": false
+            },
+            "children": [{
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }, {
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }]
+        }]
+    },
+    "theme": {
+        "template": "classic4",
+        "config": {}
+    },
+    "view": {
+        "transform": {
+            "scaleX": 1,
+            "scaleY": 1,
+            "shear": 0,
+            "rotate": 0,
+            "translateX": 0,
+            "translateY": 0,
+            "originX": 0,
+            "originY": 0,
+            "a": 1,
+            "b": 0,
+            "c": 0,
+            "d": 1,
+            "e": 0,
+            "f": 0
+        },
+        "state": {
+            "scale": 1,
+            "x": 0,
+            "y": 0,
+            "sx": 0,
+            "sy": 0
+        }
+    }
+}
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -10,12 +10,15 @@ import BatchExecution from './src/BatchExecution'
 import Export from './src/Export'
 import Select from './src/Select'
 import Drag from './src/Drag'
+import MiniMap from './src/MiniMap';
 import {
    layoutValueList
 } from './src/utils/constant'
 import {
    SVG
 } from '@svgdotjs/svg.js'
+import xmind from './src/parse/xmind'
+import { simpleDeepClone } from './src/utils';

 // 默认选项配置
 const defaultOpt = {
@@ -114,6 +117,11 @@ class MindMap {
            draw: this.draw
        })

+        // 小地图类
+        this.miniMap = new MiniMap({
+            mindMap: this
+        })
+
        // 导出类
        this.doExport = new Export({
            mindMap: this
@@ -319,7 +327,7 @@ class MindMap {
    /** 
     * @Author: 王林 
     * @Date: 2021-08-03 22:58:12 
-     * @Desc: 动态设置思维导图数据 
+     * @Desc: 动态设置思维导图数据，纯节点数据
     */
    setData(data) {
        this.execCommand('CLEAR_ACTIVE_NODE')
@@ -328,6 +336,57 @@ class MindMap {
        this.reRender()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-21 16:39:13 
+     * @Desc: 动态设置思维导图数据，包括节点数据、布局、主题、视图
+     */
+    setFullData(data) {
+        if (data.root) {
+            this.setData(data.root)
+        }
+        if (data.layout) {
+            this.setLayout(data.layout)
+        }
+        if (data.theme) {
+            if (data.theme.template) {
+                this.setTheme(data.theme.template)
+            }
+            if (data.theme.config) {
+                this.setThemeConfig(data.theme.config)
+            }
+        }
+        if (data.view) {
+            this.view.setTransformData(data.view)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-24 14:42:07 
+     * @Desc: 获取思维导图数据，节点树、主题、布局等 
+     */
+    getData(withConfig) {
+        let nodeData = this.command.getCopyData()
+        let data = {}
+        if (withConfig) {
+            data = {
+                layout: this.getLayout(),
+                root: nodeData,
+                theme: {
+                    template: this.getTheme(),
+                    config: this.getCustomThemeConfig()
+                },
+                view: this.view.getTransformData()
+            }
+        } else {
+            data = nodeData
+        }
+        return simpleDeepClone(data)
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-01 22:06:38 
@@ -369,4 +428,6 @@ class MindMap {
    }
 }

+MindMap.xmind = xmind
+
 export default MindMap
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.3",
+  "version": "0.2.11",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -25,7 +25,9 @@
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
    "eventemitter3": "^4.0.7",
-    "jspdf": "^2.5.1"
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
+    "xml-js": "^1.6.11"
  },
  "keywords": [
    "javascript",
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -189,7 +189,7 @@ class Drag extends Base {
            // 连接线
            this.line = this.draw.path()
            this.line.opacity(0.5)
-            this.node.style.line(this.line)
+            this.node.styleLine(this.line, this.node)
            // 同级位置占位符
            this.placeholder = this.draw.rect().fill({
                color: this.node.style.merge('lineColor', true)
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -1,5 +1,8 @@
 import { imgToDataUrl, downloadFile } from './utils'
 import JsPDF from 'jspdf'
+import {
+    SVG,
+} from '@svgdotjs/svg.js'
 const URL = window.URL || window.webkitURL || window

 /** 
@@ -23,9 +26,9 @@ class Export {
     * @Date: 2021-07-02 07:44:06 
     * @Desc: 导出 
     */
-    async export(type, isDownload = true, name = '思维导图') {
+    async export(type, isDownload = true, name = '思维导图', ...args) {
        if (this[type]) {
-            let result = await this[type](name)
+            let result = await this[type](name, ...args)
            if (isDownload && type !== 'pdf') {
                downloadFile(result, name + '.' + type)
            }
@@ -41,28 +44,9 @@ class Export {
     * @Desc: 获取svg数据 
     */
    async getSvgData() {
-        const svg = this.mindMap.svg
-        const draw = this.mindMap.draw
-        // 保存原始信息
-        const origWidth = svg.width()
-        const origHeight = svg.height()
-        const origTransform = draw.transform()
-        const elRect = this.mindMap.el.getBoundingClientRect()
-        // 去除放大缩小的变换效果
-        draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
-        // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-        const rect = draw.rbox()
-        // 将svg设置为实际内容的宽高
-        svg.size(rect.width, rect.height)
-        // 把实际内容变换
-        draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
-        // 克隆一份数据
-        const clone = svg.clone()
-        // 恢复原先的大小和变换信息
-        svg.size(origWidth, origHeight)
-        draw.transform(origTransform)
+        let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
        // 把图片的url转换成data:url类型，否则导出会丢失图片
-        let imageList = clone.find('image')
+        let imageList = svg.find('image')
        let task = imageList.map(async (item) => {
            let imgUlr = item.attr('href') || item.attr('xlink:href')
            let imgData = await imgToDataUrl(imgUlr)
@@ -70,8 +54,8 @@ class Export {
        })
        await Promise.all(task)
        return {
-            node: clone,
-            str: clone.svg()
+            node: svg,
+            str: svgHTML
        }
    }

@@ -228,8 +212,9 @@ class Export {
     * @Date: 2021-07-04 14:54:07 
     * @Desc: 导出为svg 
     */
-    async svg() {
+    async svg(name) {
        let { node } = await this.getSvgData()
+        node.first().before(SVG(`<title>${name}</title>`))
        await this.drawBackgroundToSvg(node)
        let str = node.svg()
        // 转换成blob数据
@@ -244,8 +229,8 @@ class Export {
     * @Date: 2021-08-03 22:19:17 
     * @Desc: 导出为json 
     */
-    json () {
-        let data = this.mindMap.command.getCopyData()
+    json (name, withConfig = true) {
+        let data = this.mindMap.getData(withConfig)
        let str = JSON.stringify(data)
        let blob = new Blob([str])
        return URL.createObjectURL(blob)
@@ -256,8 +241,8 @@ class Export {
     * @Date: 2021-08-03 22:24:24 
     * @Desc: 专有文件，其实就是json文件 
     */
-    smm () {
-        return this.json();
+    smm (name, withConfig) {
+        return this.json(name, withConfig);
    }
 }

--- a/simple-mind-map/src/MiniMap.js
+++ b/simple-mind-map/src/MiniMap.js
@@ -0,0 +1,175 @@
+// 小地图类
+class MiniMap {
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:00:45
+   * @Desc: 构造函数
+   */
+  constructor(opt) {
+    this.mindMap = opt.mindMap;
+    this.isMousedown = false;
+    this.mousedownPos = {
+      x: 0,
+      y: 0,
+    };
+    this.startViewPos = {
+      x: 0,
+      y: 0,
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:00:43
+   * @Desc:  获取小地图相关数据
+   */
+  getMiniMap() {
+    const svg = this.mindMap.svg;
+    const draw = this.mindMap.draw;
+    // 保存原始信息
+    const origWidth = svg.width();
+    const origHeight = svg.height();
+    const origTransform = draw.transform();
+    const elRect = this.mindMap.el.getBoundingClientRect();
+    // 去除放大缩小的变换效果
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY);
+    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+    const rect = draw.rbox();
+    // 将svg设置为实际内容的宽高
+    svg.size(rect.width, rect.height);
+    // 把实际内容变换
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top);
+    // 克隆一份数据
+    const clone = svg.clone();
+    // 恢复原先的大小和变换信息
+    svg.size(origWidth, origHeight);
+    draw.transform(origTransform);
+
+    return {
+      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+      svgHTML: clone.svg(), // svg字符串
+      rect: {
+        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+        ratio: rect.width / rect.height, // 思维导图图形的宽高比
+      },
+      origWidth, // 画布宽度
+      origHeight, // 画布高度
+      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+      scaleY: origTransform.scaleY, // 思维导图图形的垂直缩放值
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:05:51
+   * @Desc: 计算小地图的渲染数据
+   * boxWidth：小地图容器的宽度
+   * boxHeight：小地图容器的高度
+   */
+  calculationMiniMap(boxWidth, boxHeight) {
+    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
+      this.getMiniMap();
+    // 计算数据
+    let boxRatio = boxWidth / boxHeight;
+    let actWidth = 0;
+    let actHeight = 0;
+    if (boxRatio > rect.ratio) {
+      // 高度以box为准，缩放宽度
+      actHeight = boxHeight;
+      actWidth = rect.ratio * actHeight;
+    } else {
+      // 宽度以box为准，缩放高度
+      actWidth = boxWidth;
+      actHeight = actWidth / rect.ratio;
+    }
+    // svg图形的缩放及位置
+    let miniMapBoxScale = actWidth / rect.width;
+    let miniMapBoxLeft = (boxWidth - actWidth) / 2;
+    let miniMapBoxTop = (boxHeight - actHeight) / 2;
+    // 视口框大小及位置
+    let _rectX = rect.x - (rect.width * scaleX - rect.width) / 2;
+    let _rectX2 = rect.x2 + (rect.width * scaleX - rect.width) / 2;
+    let _rectY = rect.y - (rect.height * scaleY - rect.height) / 2;
+    let _rectY2 = rect.y2 + (rect.height * scaleY - rect.height) / 2;
+    let _rectWidth = rect.width * scaleX;
+    let _rectHeight = rect.height * scaleY;
+    let viewBoxStyle = {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    };
+    viewBoxStyle.left =
+      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + "px";
+    viewBoxStyle.right =
+      Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
+      miniMapBoxLeft +
+      "px";
+
+    viewBoxStyle.top =
+      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + "px";
+    viewBoxStyle.bottom =
+      Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
+      miniMapBoxTop +
+      "px";
+    return {
+      svgHTML, // 小地图html
+      viewBoxStyle, // 视图框的位置信息
+      miniMapBoxScale, // 视图框的缩放值
+      miniMapBoxLeft, // 视图框的left值
+      miniMapBoxTop, // 视图框的top值
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:22:40
+   * @Desc: 小地图鼠标按下事件
+   */
+  onMousedown(e) {
+    this.isMousedown = true;
+    this.mousedownPos = {
+      x: e.clientX,
+      y: e.clientY,
+    };
+    // 保存视图当前的偏移量
+    let transformData = this.mindMap.view.getTransformData();
+    this.startViewPos = {
+      x: transformData.state.x,
+      y: transformData.state.y,
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:22:55
+   * @Desc: 小地图鼠标移动事件
+   */
+  onMousemove(e, sensitivityNum = 5) {
+    if (!this.isMousedown) {
+      return;
+    }
+    let ox = e.clientX - this.mousedownPos.x;
+    let oy = e.clientY - this.mousedownPos.y;
+    // 在视图最初偏移量上累加更新量
+    this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x);
+    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y);
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:23:01
+   * @Desc: 小地图鼠标松开事件
+   */
+  onMouseup() {
+    this.isMousedown = false;
+  }
+}
+
+export default MiniMap;
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -1,4 +1,5 @@
 import Style from './Style'
+import Shape from './Shape'
 import {
    resizeImgSize,
    asyncRun
@@ -43,6 +44,12 @@ class Node {
        this.themeConfig = this.mindMap.themeConfig
        // 样式实例
        this.style = new Style(this, this.themeConfig)
+        // 形状实例
+        this.shapeInstance = new Shape(this)
+        this.shapePadding = {
+            paddingX: 0,
+            paddingY: 0
+        }
        // 是否是根节点
        this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
        // 是否是概要节点
@@ -331,9 +338,16 @@ class Node {
        // 间距
        let margin = imgContentHeight > 0 && textContentHeight > 0 ? this.blockContentMargin : 0
        let { paddingX, paddingY } = this.getPaddingVale()
+        // 纯内容宽高
+        let _width = Math.max(imgContentWidth, textContentWidth)
+        let _height = imgContentHeight + textContentHeight
+        // 计算节点形状需要的附加内边距
+        let { paddingX: shapePaddingX, paddingY: shapePaddingY } = this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
+        this.shapePadding.paddingX = shapePaddingX
+        this.shapePadding.paddingY = shapePaddingY
        return {
-            width: Math.max(imgContentWidth, textContentWidth) + paddingX * 2,
-            height: imgContentHeight + textContentHeight + paddingY * 2 + margin
+            width: _width + paddingX * 2 + shapePaddingX * 2,
+            height: _height + paddingY * 2 + margin + shapePaddingY * 2
        }
    }

@@ -542,6 +556,16 @@ class Node {
        }
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 22:02:07 
+     * @Desc: 获取节点形状 
+     */
+    getShape() {
+        return this.style.getStyle('shape', false, false)
+    }
+
    /** 
     * javascript comment 
     * @Author: 王林25 
@@ -555,6 +579,7 @@ class Node {
            textContentItemMargin
        } = this
        let { paddingY } = this.getPaddingVale()
+        paddingY += this.shapePadding.paddingY
        // 创建组
        this.group = new G()
        // 概要节点添加一个带所属节点id的类名
@@ -563,8 +588,9 @@ class Node {
        }
        this.draw.add(this.group)
        this.update(true)
-        // 节点矩形
-        this.style.rect(this.group.rect(width, height))
+        // 节点形状
+        const shape = this.getShape()
+        this.style[shape === 'rectangle' ? 'rect' : 'shape'](this.shapeInstance.createShape())
        // 图片节点
        let imgHeight = 0
        if (this._imgData) {
@@ -668,7 +694,7 @@ class Node {
        if (this.mindMap.opt.readonly) {
            return
        }
-        e.stopPropagation()
+        e && e.stopPropagation()
        if (this.nodeData.data.isActive) {
            return
        }
@@ -685,6 +711,8 @@ class Node {
     * @Desc: 渲染节点到画布，会移除旧的，创建新的
     */
    renderNode() {
+        // 连线
+        this.renderLine()
        this.removeAllEvent()
        this.removeAllNode()
        this.createNodeData()
@@ -724,13 +752,13 @@ class Node {
     * @Desc: 递归渲染 
     */
    render() {
-        // 连线
-        this.renderLine()
        // 节点
        if (this.initRender) {
            this.initRender = false
            this.renderNode()
        } else {
+            // 连线
+            this.renderLine()
            this.update()
        }
        // 子节点
@@ -741,6 +769,12 @@ class Node {
                }
            }))
        }
+        // 手动插入的节点立即获得焦点并且开启编辑模式
+        if (this.nodeData.inserting) {
+            delete this.nodeData.inserting
+            this.active()
+            this.mindMap.emit('node_dblclick', this)
+        }
    }

    /** 
@@ -800,7 +834,7 @@ class Node {
        this.showGeneralization()
        if (this.parent) {
            let index = this.parent.children.indexOf(this)
-            this.parent._lines[index].show()
+            this.parent._lines[index] && this.parent._lines[index].show()
        }
        // 子节点
        if (this.children && this.children.length) {
@@ -817,7 +851,7 @@ class Node {
     * @Date: 2021-04-10 22:01:53 
     * @Desc: 连线 
     */
-    renderLine() {
+    renderLine(deep = false) {
        if (this.nodeData.data.expand === false) {
            return
        }
@@ -835,10 +869,32 @@ class Node {
            this._lines = this._lines.slice(0, childrenLen)
        }
        // 画线
-        this.renderer.layout.renderLine(this, this._lines)
-        // 添加样式
-        this._lines.forEach((line) => {
-            this.style.line(line)
+        this.renderer.layout.renderLine(this, this._lines, (line, node) => {
+            // 添加样式
+            this.styleLine(line, node)
+        }, this.style.getStyle('lineStyle', true))
+        // 子级的连线也需要更新
+        if (deep && this.children && this.children.length > 0) {
+            this.children.forEach((item) => {
+                item.renderLine(deep)
+            })
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:41:29 
+     * @Desc: 设置连线样式 
+     */
+    styleLine(line, node) {
+        let width = node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
+        let color = node.getSelfInhertStyle('lineColor') || node.getStyle('lineColor', true)
+        let dasharray = node.getSelfInhertStyle('lineDasharray') || node.getStyle('lineDasharray', true)
+        this.style.line(line, {
+            width,
+            color,
+            dasharray,
        })
    }

@@ -1004,7 +1060,7 @@ class Node {
        node.x(0).y(-this.expandBtnSize / 2)
        fillNode.x(0).y(-this.expandBtnSize / 2)
        this.style.iconBtn(node, fillNode)
-        this._expandBtn.add(fillNode).add(node)
+        if (this._expandBtn) this._expandBtn.add(fillNode).add(node)
    }

    /** 
@@ -1125,6 +1181,40 @@ class Node {
        return v === undefined ? '' : v
    }

+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 11:21:15 
+     * @Desc: 获取自定义样式 
+     */
+    getSelfStyle(prop) {
+        return this.style.getSelfStyle(prop)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 11:21:26 
+     * @Desc:  获取最近一个存在自身自定义样式的祖先节点的自定义样式
+     */
+    getParentSelfStyle(prop) {
+        if (this.parent) {
+            return this.parent.getSelfStyle(prop) || this.parent.getParentSelfStyle(prop)
+        }
+        return null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:15:30 
+     * @Desc: 获取自身可继承的自定义样式 
+     */
+    getSelfInhertStyle(prop) {
+        return this.getSelfStyle(prop) // 自身
+        || this.getParentSelfStyle(prop) // 父级
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-05-04 22:18:07 
@@ -1205,6 +1295,16 @@ class Node {
    setTag(tag) {
        this.mindMap.execCommand('SET_NODE_TAG', this, tag)
    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:47:45 
+     * @Desc: 设置形状 
+     */
+    setShape(shape) {
+        this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
+    }
 }

 export default Node
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -5,6 +5,8 @@ import CatalogOrganization from './layouts/CatalogOrganization'
 import OrganizationStructure from './layouts/OrganizationStructure'
 import TextEdit from './TextEdit'
 import { copyNodeTree, simpleDeepClone, walk } from './utils'
+import { shapeList } from './Shape'
+import { lineStyleProps } from './themes/default'

 // 布局列表
 const layouts = {
@@ -142,6 +144,9 @@ class Render {
        // 收起所有节点
        this.unexpandAllNode = this.unexpandAllNode.bind(this)
        this.mindMap.command.add('UNEXPAND_ALL', this.unexpandAllNode)
+        // 展开到指定层级
+        this.expandToLevel = this.expandToLevel.bind(this)
+        this.mindMap.command.add('UNEXPAND_TO_LEVEL', this.expandToLevel)
        // 设置节点数据
        this.setNodeData = this.setNodeData.bind(this)
        this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
@@ -175,6 +180,9 @@ class Render {
        // 一键整理布局
        this.resetLayout = this.resetLayout.bind(this)
        this.mindMap.command.add('RESET_LAYOUT', this.resetLayout)
+        // 设置节点形状
+        this.setNodeShape = this.setNodeShape.bind(this)
+        this.mindMap.command.add('SET_NODE_SHAPE', this.setNodeShape)
    }

    /** 
@@ -405,6 +413,7 @@ class Render {
            }
            let index = this.getNodeIndex(first)
            first.parent.nodeData.children.splice(index + 1, 0, {
+                "inserting": true,
                "data": {
                    "text": text,
                    "expand": true
@@ -430,6 +439,7 @@ class Render {
            }
            let text = node.isRoot ? '二级节点' : '分支主题'
            node.nodeData.children.push({
+                "inserting": true,
                "data": {
                    "text": text,
                    "expand": true
@@ -648,7 +658,7 @@ class Render {
        if (this.activeNodeList.length <= 0) {
            return
        }
-        return copyNodeTree({}, this.activeNodeList[0])
+        return copyNodeTree({}, this.activeNodeList[0], true)
    }

    /** 
@@ -664,7 +674,7 @@ class Render {
        if (node.isRoot) {
            return null
        }
-        let copyData = copyNodeTree({}, node)
+        let copyData = copyNodeTree({}, node, true)
        this.removeActiveNode(node)
        this.removeOneNode(node)
        this.mindMap.emit('node_active', null, this.activeNodeList)
@@ -727,6 +737,10 @@ class Render {
            }
        }
        this.setNodeDataRender(node, data)
+        // 更新了连线的样式
+        if (lineStyleProps.includes(prop)) {
+            (node.parent || node).renderLine(true)
+        }
    }

    /** 
@@ -777,10 +791,7 @@ class Render {
                node.data.expand = true
            }
        }, null, true, 0, 0)
-        this.mindMap.render()
-        this.root.children.forEach((item) => {
-            item.updateExpandBtnNode()
-        })
+        this.mindMap.reRender()
    }

    /** 
@@ -789,14 +800,27 @@ class Render {
     * @Desc: 收起所有 
     */
    unexpandAllNode() {
-        this.root.children.forEach((item) => {
-            this.setNodeExpand(item, false)
-        })
        walk(this.renderTree, null, (node, parent, isRoot) => {
+            node._node = null
            if (!isRoot) {
                node.data.expand = false
            }
        }, null, true, 0, 0)
+        this.mindMap.reRender()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-23 16:31:27 
+     * @Desc: 展开到指定层级 
+     */
+    expandToLevel(level) {
+        walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
+            node._node = null
+            node.data.expand = layerIndex < level
+        }, null, true, 0, 0)
+        this.mindMap.reRender()
    }

    /** 
@@ -977,6 +1001,22 @@ class Render {
        }, null, true, 0, 0)
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:44:01 
+     * @Desc: 设置节点形状 
+     */
+    setNodeShape(node, shape) {
+        if (!shape || !shapeList.includes(shape)) {
+            return
+        }
+        let nodeList = [node] || this.activeNodeList
+        nodeList.forEach((item) => {
+            this.setNodeStyle(item, 'shape', shape)
+        })
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-05-04 14:19:48 
--- a/simple-mind-map/src/Shape.js
+++ b/simple-mind-map/src/Shape.js
@@ -0,0 +1,265 @@
+/** 
+ * @Author: 王林 
+ * @Date: 2022-08-22 21:32:50 
+ * @Desc: 节点形状类 
+ */
+ export default class Shape {
+    constructor(node) {
+        this.node = node
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-17 22:32:32 
+     * @Desc: 形状需要的padding 
+     */
+    getShapePadding(width, height, paddingX, paddingY) {
+        const shape = this.node.getShape()
+        const defaultPaddingX = 15
+        const defaultPaddingY = 5
+        const actWidth = width + paddingX * 2
+        const actHeight = height + paddingY * 2
+        const actOffset = Math.abs(actWidth - actHeight)
+        switch (shape) {
+            case 'roundedRectangle':
+                return {
+                    paddingX: height > width ? (height - width) / 2 : 0,
+                    paddingY: 0
+                }  
+            case 'diamond':
+                return {
+                    paddingX: width / 2,
+                    paddingY: height / 2
+                }
+            case 'parallelogram':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: 0
+                }
+            case 'outerTriangularRectangle':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: 0
+                }
+            case 'innerTriangularRectangle':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: 0
+                }
+            case 'ellipse':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: paddingY <= 0 ? defaultPaddingY : 0
+                }
+            case 'circle':
+                return {
+                    paddingX: actHeight > actWidth ? actOffset / 2 : 0,
+                    paddingY: actHeight < actWidth ? actOffset / 2 : 0,
+                }
+            default:
+                return {
+                    paddingX: 0,
+                    paddingY: 0
+                }
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-17 22:22:53 
+     * @Desc: 创建形状节点 
+     */
+    createShape() {
+        const shape = this.node.getShape()
+        let { width, height } = this.node
+        let node = null
+        // 矩形
+        if (shape === 'rectangle') {
+            node = this.node.group.rect(width, height)
+        } else if (shape === 'diamond') {
+            // 菱形
+            node = this.createDiamond()
+        } else if (shape === 'parallelogram') {
+            // 平行四边形
+            node = this.createParallelogram()
+        } else if (shape === 'roundedRectangle') {
+            // 圆角矩形
+            node = this.createRoundedRectangle()
+        } else if (shape === 'octagonalRectangle') {
+            // 八角矩形
+            node = this.createOctagonalRectangle()
+        } else if (shape === 'outerTriangularRectangle') {
+            // 外三角矩形
+            node = this.createOuterTriangularRectangle()
+        } else if (shape === 'innerTriangularRectangle') {
+            // 内三角矩形
+            node = this.createInnerTriangularRectangle()
+        } else if (shape === 'ellipse') {
+            // 椭圆
+            node = this.createEllipse()
+        } else if (shape === 'circle') {
+            // 圆
+            node = this.createCircle()
+        }
+        return node
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-04 09:08:54 
+     * @Desc: 创建菱形 
+     */
+    createDiamond() {
+        let { width, height } = this.node
+        let halfWidth = width / 2
+        let halfHeight = height / 2
+        let topX = halfWidth
+        let topY = 0
+        let rightX = width
+        let rightY = halfHeight
+        let bottomX = halfWidth
+        let bottomY = height
+        let leftX = 0
+        let leftY = halfHeight
+        return this.node.group.polygon(`
+            ${topX}, ${topY}
+            ${rightX}, ${rightY}
+            ${bottomX}, ${bottomY}
+            ${leftX}, ${leftY}
+        `)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-03 16:14:12 
+     * @Desc: 创建平行四边形 
+     */
+    createParallelogram() {
+        let { paddingX } = this.node.getPaddingVale()
+        paddingX = paddingX || this.node.shapePadding.paddingX
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${paddingX}, ${0}
+            ${width}, ${0}
+            ${width - paddingX}, ${height}
+            ${0}, ${height}
+        `)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-03 16:50:23 
+     * @Desc: 创建圆角矩形 
+     */
+    createRoundedRectangle() {
+        let { width, height } = this.node
+        let halfHeight = height / 2
+        return this.node.group.path(`
+            M${halfHeight},0
+            L${width - halfHeight},0
+            A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
+            L${halfHeight},${height}
+            A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 16:14:08 
+     * @Desc: 创建八角矩形 
+     */
+    createOctagonalRectangle() {
+        let w = 5
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${0}, ${w}
+            ${w}, ${0}
+            ${width - w}, ${0}
+            ${width}, ${w}
+            ${width}, ${height - w}
+            ${width - w}, ${height}
+            ${w}, ${height}
+            ${0}, ${height - w}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 20:55:50 
+     * @Desc: 创建外三角矩形 
+     */
+    createOuterTriangularRectangle() {
+        let { paddingX } = this.node.getPaddingVale()
+        paddingX = paddingX || this.node.shapePadding.paddingX
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${paddingX}, ${0}
+            ${width - paddingX}, ${0}
+            ${width}, ${height / 2}
+            ${width - paddingX}, ${height}
+            ${paddingX}, ${height}
+            ${0}, ${height / 2}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 20:59:37 
+     * @Desc: 创建内三角矩形 
+     */
+    createInnerTriangularRectangle() {
+        let { paddingX } = this.node.getPaddingVale()
+        paddingX = paddingX || this.node.shapePadding.paddingX
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${0}, ${0}
+            ${width}, ${0}
+            ${width - paddingX / 2}, ${height / 2}
+            ${width}, ${height}
+            ${0}, ${height}
+            ${paddingX / 2}, ${height / 2}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:06:31 
+     * @Desc: 创建椭圆 
+     */
+    createEllipse() {
+        let { width, height } = this.node
+        let halfWidth = width / 2
+        let halfHeight = height / 2
+        return this.node.group.path(`
+            M${halfWidth},0
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+            M${halfWidth},${height} 
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:14:04 
+     * @Desc: 创建圆 
+     */
+    createCircle() {
+        let { width, height } = this.node
+        let halfWidth = width / 2
+        let halfHeight = height / 2
+        return this.node.group.path(`
+            M${halfWidth},0
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+            M${halfWidth},${height} 
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+        `)
+    }
+}
+
+// 形状列表
+export const shapeList = ['rectangle', 'diamond', 'parallelogram', 'roundedRectangle', 'octagonalRectangle', 'outerTriangularRectangle', 'innerTriangularRectangle', 'ellipse', 'circle']
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -66,7 +66,27 @@ class Style {
            }
        }
        // 优先使用节点本身的样式
-        return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop]
+        return this.getSelfStyle(prop) !== undefined ? this.getSelfStyle(prop) : defaultConfig[prop]
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:55:57 
+     * @Desc: 获取某个样式值 
+     */
+    getStyle(prop, root, isActive) {
+        return this.merge(prop, root, isActive)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:09:39 
+     * @Desc: 获取自身自定义样式 
+     */
+    getSelfStyle(prop) {
+        return this.ctx.nodeData.data[prop]
    }

    /** 
@@ -75,13 +95,24 @@ class Style {
     * @Desc: 矩形 
     */
    rect(node) {
+        this.shape(node)
+        node.radius(this.merge('borderRadius'))
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 15:04:28 
+     * @Desc:  矩形外的其他形状 
+     */
+    shape(node) {
        node.fill({
            color: this.merge('fillColor')
        }).stroke({
            color: this.merge('borderColor'),
            width: this.merge('borderWidth'),
            dasharray: this.merge('borderDasharray')
-        }).radius(this.merge('borderRadius'))
+        })
    }

    /** 
@@ -152,8 +183,8 @@ class Style {
     * @Date: 2021-04-11 14:50:49 
     * @Desc: 连线 
     */
-    line(node) {
-        node.stroke({ width: this.merge('lineWidth', true), color: this.merge('lineColor', true) }).fill({ color: 'none' })
+    line(node, { width, color, dasharray } = {}) {
+        node.stroke({ width, color, dasharray }).fill({ color: 'none' })
    }

    /** 
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -126,6 +126,17 @@ class View {
        this.transform()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-10-10 14:03:53 
+     * @Desc: 平移x方式到 
+     */
+    translateXTo(x) {
+        this.x = x
+        this.transform()
+    }
+
    /** 
     * javascript comment 
     * @Author: 王林25 
@@ -137,6 +148,17 @@ class View {
        this.transform()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-10-10 14:04:10 
+     * @Desc: 平移y方向到 
+     */
+    translateYTo(y) {
+        this.y = y
+        this.transform()
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-04 17:13:14 
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -231,7 +231,7 @@ class CatalogOrganization extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -263,6 +263,7 @@ class CatalogOrganization extends Base {
                let path = `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}`
                // 竖线
                lines[index].plot(path)
+                style && style(lines[index], item)
            })
            minx = Math.min(minx, x1)
            maxx = Math.max(maxx, x1)
@@ -271,12 +272,14 @@ class CatalogOrganization extends Base {
            node.style.line(line1)
            line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
            node._lines.push(line1)
+            style && style(line1, node)
            // 水平线
            if (len > 0) {
                let lin2 = this.draw.path()
                node.style.line(lin2)
                lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
                node._lines.push(lin2)
+                style && style(lin2, node)
            }
        } else {
            // 非根节点
@@ -320,6 +323,7 @@ class CatalogOrganization extends Base {
                    path = `M ${x2},${y2} L ${_left},${y2}`
                }
                lines[index].plot(path)
+                style && style(lines[index], item)
            })
            // 竖线
            if (len > 0) {
@@ -333,6 +337,7 @@ class CatalogOrganization extends Base {
                    lin2.show()
                }
                node._lines.push(lin2)
+                style && style(lin2, node)
            }
        }
    }
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -146,7 +146,81 @@ class LogicalStructure extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'curve') {
+            this.renderLineCurve(node, lines, style)
+        } else if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:17:30 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+    renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:17:43 
+     * @Desc: 曲线风格连线 
+     */
+    renderLineCurve(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -169,6 +243,7 @@ class LogicalStructure extends Base {
                path = this.cubicBezierPath(x1, y1, x2, y2)
            }
            lines[index].plot(path)
+            style && style(lines[index], item)
        })
    }

--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -182,7 +182,89 @@ class MindMap extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'curve') {
+            this.renderLineCurve(node, lines, style)
+        } else if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:10:47 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+            let x1 = 0
+            let _s = 0
+            if (item.dir === 'left') {
+                _s = -s1
+                x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+            } else {
+                _s = s1
+                x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+            }
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${x2},${y2}` 
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+     renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:10:56 
+     * @Desc: 曲线风格连线 
+     */
+    renderLineCurve(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -205,6 +287,7 @@ class MindMap extends Base {
                path = this.cubicBezierPath(x1, y1, x2, y2)
            }
            lines[index].plot(path)
+            style && style(lines[index], item)
        })
    }

--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -147,7 +147,48 @@ class OrganizationStructure extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+     renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+        } = node
+        let x1 = left + width / 2
+        let y1 = top + height
+        node.children.forEach((item, index) => {
+            let x2 = item.left + item.width / 2
+            let y2 = item.top
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:39:07 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -177,6 +218,7 @@ class OrganizationStructure extends Base {
            }
            let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
            lines[index].plot(path)
+            style && style(lines[index], item)
        })
        minx = Math.min(x1, minx)
        maxx = Math.max(x1, maxx)
@@ -186,12 +228,14 @@ class OrganizationStructure extends Base {
        expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
        line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
        node._lines.push(line1)
+        style && style(line1, node)
        // 水平线
        if (len > 0) {
            let lin2 = this.draw.path()
            node.style.line(lin2)
            lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
            node._lines.push(lin2)
+            style && style(lin2, node)
        }
    }

--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@@ -0,0 +1,173 @@
+import JSZip from "jszip";
+import xmlConvert from "xml-js";
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-21 14:07:47
+ * @Desc: 解析.xmind文件
+ */
+const parseXmindFile = (file) => {
+  return new Promise((resolve, reject) => {
+    JSZip.loadAsync(file).then(
+      async (zip) => {
+        try {
+          let content = "";
+          if (zip.files["content.json"]) {
+            let json = await zip.files["content.json"].async("string");
+            content = transformXmind(json);
+          } else if (zip.files["content.xml"]) {
+            let xml = await zip.files["content.xml"].async("string");
+            let json = xmlConvert.xml2json(xml);
+            content = transformOldXmind(json);
+          }
+          if (content) {
+            resolve(content);
+          } else {
+            reject(new Error("解析失败"));
+          }
+        } catch (error) {
+          reject(error);
+        }
+      },
+      (e) => {
+        reject(e);
+      }
+    );
+  });
+};
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-21 18:57:25
+ * @Desc: 转换xmind数据
+ */
+const transformXmind = (content) => {
+  let data = JSON.parse(content)[0];
+  let nodeTree = data.rootTopic;
+  let newTree = {};
+  let walk = (node, newNode) => {
+    newNode.data = {
+      // 节点内容
+      text: node.title,
+    };
+    // 节点备注
+    if (node.notes) {
+      newNode.data.note = (node.notes.realHTML || node.notes.plain).content;
+    }
+    // 超链接
+    if (node.href && /^https?:\/\//.test(node.href)) {
+      newNode.data.hyperlink = node.href;
+    }
+    // 标签
+    if (node.labels && node.labels.length > 0) {
+      newNode.data.tag = node.labels;
+    }
+    // 子节点
+    newNode.children = [];
+    if (
+      node.children &&
+      node.children.attached &&
+      node.children.attached.length > 0
+    ) {
+      node.children.attached.forEach((item) => {
+        let newChild = {};
+        newNode.children.push(newChild);
+        walk(item, newChild);
+      });
+    }
+  };
+  walk(nodeTree, newTree);
+  return newTree;
+};
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-23 15:51:51
+ * @Desc: 转换旧版xmind数据，xmind8
+ */
+const transformOldXmind = (content) => {
+  let data = JSON.parse(content);
+  let elements = data.elements;
+  let root = null;
+  let getRoot = (arr) => {
+    for (let i = 0; i < arr.length; i++) {
+      if (!root && arr[i].name === "topic") {
+        root = arr[i];
+        return;
+      }
+    }
+    arr.forEach((item) => {
+      getRoot(item.elements);
+    });
+  };
+  getRoot(elements);
+  let newTree = {};
+  let getItemByName = (arr, name) => {
+    return arr.find((item) => {
+      return item.name === name;
+    });
+  };
+  let walk = (node, newNode) => {
+    let nodeElements = node.elements;
+    newNode.data = {
+      // 节点内容
+      text: getItemByName(nodeElements, "title").elements[0].text,
+    };
+    try {
+      // 节点备注
+      let notesElement = getItemByName(nodeElements, "notes");
+      if (notesElement) {
+        newNode.data.note =
+          notesElement.elements[0].elements[0].elements[0].text;
+      }
+    } catch (error) {}
+    try {
+      // 超链接
+      if (
+        node.attributes &&
+        node.attributes["xlink:href"] &&
+        /^https?:\/\//.test(node.attributes["xlink:href"])
+      ) {
+        newNode.data.hyperlink = node.attributes["xlink:href"];
+      }
+    } catch (error) {}
+    try {
+      // 标签
+      let labelsElement = getItemByName(nodeElements, "labels");
+      if (labelsElement) {
+        newNode.data.tag = labelsElement.elements.map((item) => {
+          return item.elements[0].text;
+        });
+      }
+    } catch (error) {}
+    // 子节点
+    newNode.children = [];
+    let _children = getItemByName(nodeElements, "children");
+    if (_children && _children.elements && _children.elements.length > 0) {
+      _children.elements.forEach((item) => {
+        if (item.name === "topics") {
+          item.elements.forEach((item2) => {
+            let newChild = {};
+            newNode.children.push(newChild);
+            walk(item2, newChild);
+          });
+        } else {
+          let newChild = {};
+          newNode.children.push(newChild);
+          walk(item, newChild);
+        }
+      });
+    }
+  };
+  walk(root, newTree);
+  return newTree;
+};
+
+export default {
+  parseXmindFile,
+  transformXmind,
+  transformOldXmind,
+};
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -17,6 +17,10 @@ export default {
    lineWidth: 1,
    // 连线的颜色
    lineColor: '#549688',
+    // 连线样式
+    lineDasharray: 'none',
+    // 连线风格
+    lineStyle: 'straight',// 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
    // 概要连线的粗细
    generalizationLineWidth: 1,
    // 概要连线的颜色
@@ -33,6 +37,7 @@ export default {
    backgroundRepeat: 'no-repeat',
    // 根节点样式
    root: {
+        shape: 'rectangle',
        fillColor: '#549688',
        fontFamily: '微软雅黑, Microsoft YaHei',
        color: '#fff',
@@ -53,6 +58,7 @@ export default {
    },
    // 二级节点样式
    second: {
+        shape: 'rectangle',
        marginX: 100,
        marginY: 40,
        fillColor: '#fff',
@@ -75,6 +81,7 @@ export default {
    },
    // 三级及以下节点样式
    node: {
+        shape: 'rectangle',
        marginX: 50,
        marginY: 0,
        fillColor: 'transparent',
@@ -97,6 +104,7 @@ export default {
    },
    // 概要节点样式
    generalization: {
+        shape: 'rectangle',
        marginX: 100,
        marginY: 40,
        fillColor: '#fff',
@@ -117,4 +125,10 @@ export default {
            borderDasharray: 'none',
        }
    }
-}
+}
+
+// 支持激活样式的属性
+// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
+export const supportActiveStyle = ['fillColor', 'color', 'fontWeight', 'fontStyle', 'borderColor', 'borderWidth', 'borderDasharray', 'borderRadius', 'textDecoration']
+
+export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -147,13 +147,19 @@ export const copyRenderTree = (tree, root) => {
 * @Date: 2021-05-04 14:40:11 
 * @Desc: 复制节点树数据 
 */
-export const copyNodeTree = (tree, root) => {
-    tree.data = simpleDeepClone(root.nodeData.data)
-    // tree.data.isActive = false
+export const copyNodeTree = (tree, root, removeActiveState = false) => {
+    tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
+    if (removeActiveState) {
+        tree.data.isActive = false
+    }
    tree.children = []
    if (root.children && root.children.length > 0) {
        root.children.forEach((item, index) => {
-            tree.children[index] = copyNodeTree({}, item)
+            tree.children[index] = copyNodeTree({}, item, removeActiveState)
+        })
+    } else if (root.nodeData && root.nodeData.children && root.nodeData.children.length > 0) {
+        root.nodeData.children.forEach((item, index) => {
+            tree.children[index] = copyNodeTree({}, item, removeActiveState)
        })
    }
    return tree;
--- a/web/src/.DS_Store
+++ b/web/src/.DS_Store
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -1,5 +1,6 @@
 import exampleData from "simple-mind-map/example/exampleData"
 import { simpleDeepClone } from 'simple-mind-map/src/utils/index'
+import Vue from 'vue'

 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'

@@ -47,6 +48,7 @@ export const storeData = (data) => {
    try {
        let originData = getData()
        originData.root = copyMindMapTreeData({}, data)
+        Vue.prototype.$bus.$emit('write_local_file', originData)
        let dataStr = JSON.stringify(originData)
        localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
    } catch (error) {
@@ -66,6 +68,7 @@ export const storeConfig = (config) => {
            ...originData,
            ...config
        }
+        Vue.prototype.$bus.$emit('write_local_file', originData)
        let dataStr = JSON.stringify(originData)
        localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
    } catch (error) {
--- a/web/src/assets/.DS_Store
+++ b/web/src/assets/.DS_Store
--- a/web/src/assets/icon-font/.DS_Store
+++ b/web/src/assets/icon-font/.DS_Store
--- a/web/src/assets/icon-font/demo_index.html
+++ b/web/src/assets/icon-font/demo_index.html
@@ -3,8 +3,8 @@
 <head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
-  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
-  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
@@ -54,6 +54,36 @@
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63e;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe63e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe657;</span>
+                <div class="name">另存为</div>
+                <div class="code-name">&amp;#xe657;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">export</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebdf;</span>
+                <div class="name">打开</div>
+                <div class="code-name">&amp;#xebdf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64e;</span>
+                <div class="name">新建</div>
+                <div class="code-name">&amp;#xe64e;</div>
+              </li>
+          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">剪切</div>
@@ -300,9 +330,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1659615576455') format('woff2'),
-       url('iconfont.woff?t=1659615576455') format('woff'),
-       url('iconfont.ttf?t=1659615576455') format('truetype');
+  src: url('iconfont.woff2?t=1664005697217') format('woff2'),
+       url('iconfont.woff?t=1664005697217') format('woff'),
+       url('iconfont.ttf?t=1664005697217') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -328,6 +358,51 @@
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
+          <li class="dib">
+            <span class="icon iconfont icondaochu1"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icondaochu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconlingcunwei"></span>
+            <div class="name">
+              另存为
+            </div>
+            <div class="code-name">.iconlingcunwei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconexport"></span>
+            <div class="name">
+              export
+            </div>
+            <div class="code-name">.iconexport
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondakai"></span>
+            <div class="name">
+              打开
+            </div>
+            <div class="code-name">.icondakai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxinjian"></span>
+            <div class="name">
+              新建
+            </div>
+            <div class="code-name">.iconxinjian
+            </div>
+          </li>
+          
          <li class="dib">
            <span class="icon iconfont iconjianqie"></span>
            <div class="name">
@@ -697,6 +772,46 @@
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondaochu1"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icondaochu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconlingcunwei"></use>
+                </svg>
+                <div class="name">另存为</div>
+                <div class="code-name">#iconlingcunwei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconexport"></use>
+                </svg>
+                <div class="name">export</div>
+                <div class="code-name">#iconexport</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondakai"></use>
+                </svg>
+                <div class="name">打开</div>
+                <div class="code-name">#icondakai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxinjian"></use>
+                </svg>
+                <div class="name">新建</div>
+                <div class="code-name">#iconxinjian</div>
+            </li>
+          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjianqie"></use>
--- a/web/src/assets/icon-font/iconfont.css
+++ b/web/src/assets/icon-font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1659615576455') format('woff2'),
-       url('iconfont.woff?t=1659615576455') format('woff'),
-       url('iconfont.ttf?t=1659615576455') format('truetype');
+  src: url('iconfont.woff2?t=1664005697217') format('woff2'),
+       url('iconfont.woff?t=1664005697217') format('woff'),
+       url('iconfont.ttf?t=1664005697217') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,26 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icondaochu1:before {
+  content: "\e63e";
+}
+
+.iconlingcunwei:before {
+  content: "\e657";
+}
+
+.iconexport:before {
+  content: "\e642";
+}
+
+.icondakai:before {
+  content: "\ebdf";
+}
+
+.iconxinjian:before {
+  content: "\e64e";
+}
+
 .iconjianqie:before {
  content: "\e601";
 }
--- a/web/src/assets/icon-font/iconfont.js
+++ b/web/src/assets/icon-font/iconfont.js
--- a/web/src/assets/icon-font/iconfont.json
+++ b/web/src/assets/icon-font/iconfont.json
@@ -5,6 +5,41 @@
  "css_prefix_text": "icon",
  "description": "思维导图",
  "glyphs": [
+    {
+      "icon_id": "1305460",
+      "name": "导出",
+      "font_class": "daochu1",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "4784101",
+      "name": "另存为",
+      "font_class": "lingcunwei",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "9929033",
+      "name": "export",
+      "font_class": "export",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "4570294",
+      "name": "打开",
+      "font_class": "dakai",
+      "unicode": "ebdf",
+      "unicode_decimal": 60383
+    },
+    {
+      "icon_id": "5086088",
+      "name": "新建",
+      "font_class": "xinjian",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
    {
      "icon_id": "1117",
      "name": "剪切",
--- a/web/src/assets/icon-font/iconfont.ttf
+++ b/web/src/assets/icon-font/iconfont.ttf
--- a/web/src/assets/icon-font/iconfont.woff
+++ b/web/src/assets/icon-font/iconfont.woff
--- a/web/src/assets/icon-font/iconfont.woff2
+++ b/web/src/assets/icon-font/iconfont.woff2
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -130,6 +130,22 @@ export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 // 线宽
 export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

+// 连线风格
+export const lineStyleList = [
+    {
+        name: '直线',
+        value: 'straight'
+    },
+    {
+        name: '曲线',
+        value: 'curve'
+    },
+    {
+        name: '直连',
+        value: 'direct'
+    }
+]
+
 // 图片重复方式
 export const backgroundRepeatList = [
    {
@@ -311,4 +327,44 @@ export const shortcutKeyList = [
            }
        ]
    }
+]
+
+// 形状列表
+export const shapeList = [
+    {
+        name: '矩形',
+        value: 'rectangle'
+    },
+    {
+        name: '菱形',
+        value: 'diamond'
+    },
+    {
+        name: '平行四边形',
+        value: 'parallelogram'
+    },
+    {
+        name: '圆角矩形',
+        value: 'roundedRectangle'
+    },
+    {
+        name: '八角矩形',
+        value: 'octagonalRectangle'
+    },
+    {
+        name: '外三角矩形',
+        value: 'outerTriangularRectangle'
+    },
+    {
+        name: '内三角矩形',
+        value: 'innerTriangularRectangle'
+    },
+    {
+        name: '椭圆',
+        value: 'ellipse'
+    },
+    {
+        name: '圆',
+        value: 'circle'
+    }
 ]
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -94,6 +94,30 @@
          </el-select>
        </div>
      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">风格</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.lineStyle"
+            placeholder=""
+            @change="
+              (value) => {
+                update('lineStyle', value);
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineStyleList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
      <!-- 概要连线 -->
      <div class="title noTop">概要的连线</div>
      <div class="row">
@@ -101,10 +125,10 @@
          <span class="name">颜色</span>
          <span
            class="block"
-            v-popover:popover
+            v-popover:popover2
            :style="{ backgroundColor: style.generalizationLineColor }"
          ></span>
-          <el-popover ref="popover" placement="bottom" trigger="click">
+          <el-popover ref="popover2" placement="bottom" trigger="click">
            <Color
              :color="style.generalizationLineColor"
              @change="
@@ -267,6 +291,7 @@ import Sidebar from "./Sidebar";
 import Color from "./Color";
 import {
  lineWidthList,
+  lineStyleList,
  backgroundRepeatList
 } from "@/config";
 import ImgUpload from "@/components/ImgUpload";
@@ -296,6 +321,7 @@ export default {
  data() {
    return {
      lineWidthList,
+      lineStyleList,
      backgroundRepeatList,
      activeTab: "color",
      marginActiveTab: "second",
@@ -303,6 +329,7 @@ export default {
        backgroundColor: "",
        lineColor: "",
        lineWidth: "",
+        lineStyle: "",
        generalizationLineWidth: "",
        generalizationLineColor: "",
        paddingX: 0,
@@ -336,6 +363,7 @@ export default {
      [
        "backgroundColor",
        "lineWidth",
+        "lineStyle",
        "lineColor",
        "generalizationLineWidth",
        "generalizationLineColor",
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="contextmenuContainer"
+    class="contextmenuContainer listBox"
    v-if="isShow"
    :style="{ left: left + 'px', top: top + 'px' }"
  >
@@ -62,6 +62,12 @@
      <div class="item" @click="exec('RETURN_CENTER')">回到中心</div>
      <div class="item" @click="exec('EXPAND_ALL')">展开所有</div>
      <div class="item" @click="exec('UNEXPAND_ALL')">收起所有</div>
+      <div class="item">
+        展开到
+        <div class="subItems listBox">
+          <div class="item" v-for="(item, index) in expandList" :key="item" @click="exec('UNEXPAND_TO_LEVEL', false, index + 1)">{{item}}</div>
+        </div>
+      </div>
      <div class="item" @click="exec('RESET_LAYOUT')">
        一键整理布局
        <span class="desc">Ctrl + L</span>
@@ -93,7 +99,8 @@ export default {
      type: "",
      isMousedown: false,
      mosuedownX: 0,
-      mosuedownY: 0
+      mosuedownY: 0,
+      expandList: ['一级主题', '二级主题', '三级主题', '四级主题', '五级主题', '六级主题']
    };
  },
  computed: {
@@ -221,7 +228,7 @@ export default {
     * @Date: 2021-07-14 23:27:54
     * @Desc: 执行命令
     */
-    exec(key, disabled) {
+    exec(key, disabled, ...args) {
      if (disabled) {
        return;
      }
@@ -241,7 +248,7 @@ export default {
          this.mindMap.view.reset();
          break;
        default:
-          this.$bus.$emit("execCommand", key);
+          this.$bus.$emit("execCommand", key, ...args);
          break;
      }
      this.hide();
@@ -278,20 +285,23 @@ export default {
 </script>

 <style lang="less" scoped>
-.contextmenuContainer {
-  position: fixed;
+.listBox {
  width: 200px;
  background: #fff;
  box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
  border-radius: 4px;
  padding-top: 16px;
  padding-bottom: 16px;
+}
+.contextmenuContainer {
+  position: fixed;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1a1a1a;

  .item {
+    position: relative;
    height: 28px;
    line-height: 28px;
    padding: 0 16px;
@@ -305,6 +315,10 @@ export default {

    &:hover {
      background: #f5f5f5;
+
+      .subItems {
+        visibility: visible;
+      }
    }

    &.disabled {
@@ -320,6 +334,13 @@ export default {
    .desc {
      color: #999;
    }
+
+    .subItems {
+      position: absolute;
+      left: 100%;
+      top: 0;
+      visibility: hidden;
+    }
  }
 }
 </style>
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -2,6 +2,7 @@
  <div class="editContainer">
    <div class="mindMapContainer" ref="mindMapContainer"></div>
    <Count></Count>
+    <Navigator :mindMap="mindMap"></Navigator>
    <NavigatorToolbar :mindMap="mindMap"></NavigatorToolbar>
    <Outline></Outline>
    <Style></Style>
@@ -27,6 +28,7 @@ import ShortcutKey from './ShortcutKey'
 import Contextmenu from './Contextmenu'
 import NodeNoteContentShow from './NodeNoteContentShow.vue'
 import { getData, storeData, storeConfig } from '@/api'
+import Navigator from './Navigator.vue';

 /**
 * @Author: 王林
@@ -45,7 +47,8 @@ export default {
    NavigatorToolbar,
    ShortcutKey,
    Contextmenu,
-    NodeNoteContentShow
+    NodeNoteContentShow,
+    Navigator
  },
  data() {
    return {
@@ -154,12 +157,8 @@ export default {
      if (this.openTest) {
        return
      }
-      let data = this.mindMap.command.getCopyData()
-      storeData(data)
-      let viewData = this.mindMap.view.getTransformData()
-      storeConfig({
-        view: viewData,
-      })
+      let data = this.mindMap.getData(true)
+      storeConfig(data)
    },

    /**
@@ -215,7 +214,11 @@ export default {
     * @Desc: 动态设置思维导图数据
     */
    setData(data) {
-      this.mindMap.setData(data)
+      if (data.root) {
+        this.mindMap.setFullData(data)
+      } else {
+        this.mindMap.setData(data)
+      }
      this.manualSave()
    },

--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -3,21 +3,22 @@
    class="nodeDialog"
    title="导出"
    :visible.sync="dialogVisible"
-    width="500"
+    width="700px"
  >
    <div>
      <div class="nameInputBox">
        <span class="name">导出文件名称</span>
        <el-input style="width: 300px" v-model="fileName" size="mini"></el-input>
+        <el-checkbox v-show="['smm', 'json'].includes(exportType)" v-model="widthConfig" style="margin-left: 12px">是否包含主题、结构等配置数据</el-checkbox>
      </div>
-      <el-radio-group v-model="exportType">
-        <el-radio label="smm">专有文件（.smm）</el-radio>
-        <el-radio label="json">json文件（.json）</el-radio>
-        <el-radio label="png">图片文件（.png）</el-radio>
-        <el-radio label="svg">svg文件（.svg）</el-radio>
-        <el-radio label="pdf">pdf文件（.pdf）</el-radio>
+      <el-radio-group v-model="exportType" size="mini">
+        <el-radio-button label="smm">专有文件（.smm）</el-radio-button>
+        <el-radio-button label="json">json文件（.json）</el-radio-button>
+        <el-radio-button label="png">图片文件（.png）</el-radio-button>
+        <el-radio-button label="svg">svg文件（.svg）</el-radio-button>
+        <el-radio-button label="pdf">pdf文件（.pdf）</el-radio-button>
      </el-radio-group>
-      <div class="tip">tips：.smm文件可用于导入</div>
+      <div class="tip">tips：.smm和.json文件可用于导入</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
@@ -38,7 +39,8 @@ export default {
    return {
      dialogVisible: false,
      exportType: "smm",
-      fileName: '思维导图'
+      fileName: '思维导图',
+      widthConfig: true
    };
  },
  created() {
@@ -62,7 +64,7 @@ export default {
     * @Desc:  确定
     */
    confirm() {
-      this.$bus.$emit("export", this.exportType, true, this.fileName);
+      this.$bus.$emit("export", this.exportType, true, this.fileName, this.widthConfig);
      this.$notify.info({
          title: '消息',
          message: '如果没有触发下载，请检查是否被浏览器拦截了'
--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@@ -1,8 +1,8 @@
 <template>
-<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="500">
+<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="300px">
    <el-upload ref="upload" action="x" :file-list="fileList" :auto-upload="false" :multiple="false" :on-change="onChange" :limit="1" :on-exceed="onExceed">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传.smm文件</div>
+        <div slot="tip" class="el-upload__tip">支持.smm、.json、.xmind文件</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
@@ -12,6 +12,8 @@
 </template>

 <script>
+import MindMap from 'simple-mind-map'
+
 /**
 * @Author: 王林
 * @Date: 2021-06-24 22:53:54
@@ -44,9 +46,9 @@ export default {
         * @Desc: 文件选择
         */
        onChange(file) {
-            let reg = /\.smm$/;
+            let reg = /\.(smm|xmind|json)$/;
            if (!reg.test(file.name)) {
-                this.$message.error("请选择.smm文件");
+                this.$message.error("请选择.smm、.json、.xmind文件");
                this.fileList = [];
            } else {
                this.fileList.push(file)
@@ -80,7 +82,17 @@ export default {
            if (this.fileList.length <= 0) {
                return this.$message.error("请选择要导入的文件");
            }
+            this.$store.commit('setIsHandleLocalFile', false);
            let file = this.fileList[0];
+            if (/\.(smm|json)$/.test(file.name)) {
+                this.handleSmm(file)
+            } else if (/\.xmind$/.test(file.name)) {
+                this.handleXmind(file)
+            }
+            this.cancel();
+        },
+
+        handleSmm(file) {
            let fileReader = new FileReader()
            fileReader.readAsText(file.raw)
            fileReader.onload = (evt) => {
@@ -96,8 +108,18 @@ export default {
                    this.$message.error("文件解析失败");
                }
            }
-            this.cancel();
        },
+
+        async handleXmind(file) {
+            try {
+                let data = await MindMap.xmind.parseXmindFile(file.raw)
+                this.$bus.$emit('setData', data)
+                this.$message.success("导入成功");
+            } catch (error) {
+                console.log(error)
+                this.$message.error("文件解析失败");
+            }
+        }
    },
 };
 </script>
--- a/web/src/pages/Edit/components/Navigator.vue
+++ b/web/src/pages/Edit/components/Navigator.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="showMiniMap"
+    class="navigatorBox"
+    ref="navigatorBox"
+    @mousedown="onMousedown"
+    @mousemove="onMousemove"
+    @mouseup="onMouseup"
+  >
+    <div
+      class="svgBox"
+      ref="svgBox"
+      :style="{
+        transform: `scale(${svgBoxScale})`,
+        left: svgBoxLeft + 'px',
+        top: svgBoxTop + 'px',
+      }"
+    ></div>
+    <div class="windowBox" :style="viewBoxStyle"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mindMap: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      showMiniMap: false,
+      timer: null,
+      boxWidth: 0,
+      boxHeight: 0,
+      svgBoxScale: 1,
+      svgBoxLeft: 0,
+      svgBoxTop: 0,
+      viewBoxStyle: {
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+      },
+    };
+  },
+  mounted() {
+    this.$bus.$on("toggle_mini_map", (show) => {
+      this.showMiniMap = show;
+      this.$nextTick(() => {
+        this.init();
+        this.drawMiniMap();
+      });
+    });
+    this.$bus.$on("data_change", () => {
+      if (!this.showMiniMap) {
+        return;
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.drawMiniMap();
+      }, 500);
+    });
+    this.$bus.$on("view_data_change", () => {
+      if (!this.showMiniMap) {
+        return;
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.drawMiniMap();
+      }, 500);
+    });
+  },
+  methods: {
+    init() {
+      let { width, height } = this.$refs.navigatorBox.getBoundingClientRect();
+      this.boxWidth = width;
+      this.boxHeight = height;
+    },
+
+    drawMiniMap() {
+      let {
+        svgHTML,
+        viewBoxStyle,
+        miniMapBoxScale,
+        miniMapBoxLeft,
+        miniMapBoxTop,
+      } = this.mindMap.miniMap.calculationMiniMap(
+        this.boxWidth,
+        this.boxHeight
+      );
+      // 渲染到小地图
+      this.$refs.svgBox.innerHTML = svgHTML;
+      this.viewBoxStyle = viewBoxStyle;
+      this.svgBoxScale = miniMapBoxScale;
+      this.svgBoxLeft = miniMapBoxLeft;
+      this.svgBoxTop = miniMapBoxTop;
+    },
+
+    onMousedown(e) {
+      this.mindMap.miniMap.onMousedown(e);
+    },
+
+    onMousemove(e) {
+      this.mindMap.miniMap.onMousemove(e);
+    },
+
+    onMouseup(e) {
+      this.mindMap.miniMap.onMouseup(e);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.navigatorBox {
+  position: absolute;
+  width: 350px;
+  height: 220px;
+  background-color: #fff;
+  bottom: 80px;
+  right: 20px;
+  box-shadow: 0 0 16px #989898;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  cursor: pointer;
+  user-select: none;
+
+  .svgBox {
+    position: absolute;
+    left: 0;
+    transform-origin: left top;
+  }
+
+  .windowBox {
+    position: absolute;
+    border: 2px solid rgb(238, 69, 69);
+    transition: all 0.3s;
+  }
+}
+</style>
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -1,5 +1,8 @@
 <template>
  <div class="navigatorContainer">
+    <div class="item">
+      <el-checkbox v-model="openMiniMap" @change="toggleMiniMap">开启小地图</el-checkbox>
+    </div>
    <div class="item">
      <el-switch
        v-model="isReadonly"
@@ -40,12 +43,17 @@ export default {
  },
  data () {
    return {
-      isReadonly: false
+      isReadonly: false,
+      openMiniMap: false
    }
  },
  methods: {
    readonlyChange(value) {
      this.mindMap.setMode(value ? 'readonly' : 'edit')
+    },
+
+    toggleMiniMap(show) {
+      this.$bus.$emit('toggle_mini_map', show)
    }
  }
 };
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -15,6 +15,7 @@
              size="mini"
              v-model="style.fontFamily"
              placeholder=""
+              :disabled="checkDisabled('fontFamily')"
              @change="update('fontFamily')"
            >
              <el-option
@@ -36,6 +37,7 @@
              style="width: 80px"
              v-model="style.fontSize"
              placeholder=""
+              :disabled="checkDisabled('fontSize')"
              @change="update('fontSize')"
            >
              <el-option
@@ -54,6 +56,7 @@
              style="width: 80px"
              v-model="style.lineHeight"
              placeholder=""
+              :disabled="checkDisabled('lineHeight')"
              @change="update('lineHeight')"
            >
              <el-option
@@ -69,7 +72,7 @@
        <div class="row">
          <div class="btnGroup">
            <el-tooltip content="颜色" placement="bottom">
-              <div class="styleBtn" v-popover:popover>
+              <div class="styleBtn" v-popover:popover :class="{ disabled: checkDisabled('color') }">
                A
                <span
                  class="colorShow"
@@ -80,7 +83,7 @@
            <el-tooltip content="加粗" placement="bottom">
              <div
                class="styleBtn"
-                :class="{ actived: style.fontWeight === 'bold' }"
+                :class="{ actived: style.fontWeight === 'bold', disabled: checkDisabled('fontWeight') }"
                @click="toggleFontWeight"
              >
                B
@@ -89,7 +92,7 @@
            <el-tooltip content="斜体" placement="bottom">
              <div
                class="styleBtn i"
-                :class="{ actived: style.fontStyle === 'italic' }"
+                :class="{ actived: style.fontStyle === 'italic', disabled: checkDisabled('fontStyle') }"
                @click="toggleFontStyle"
              >
                I
@@ -99,16 +102,17 @@
              <div
                class="styleBtn u"
                :style="{ textDecoration: style.textDecoration || 'none' }"
+                :class="{ disabled: checkDisabled('textDecoration') }"
                v-popover:popover2
              >
                U
              </div>
            </el-tooltip>
          </div>
-          <el-popover ref="popover" placement="bottom" trigger="click">
+          <el-popover ref="popover" placement="bottom" trigger="click" :disabled="checkDisabled('color')">
            <Color :color="style.color" @change="changeFontColor"></Color>
          </el-popover>
-          <el-popover ref="popover2" placement="bottom" trigger="click">
+          <el-popover ref="popover2" placement="bottom" trigger="click" :disabled="checkDisabled('textDecoration')">
            <el-radio-group
              size="mini"
              v-model="style.textDecoration"
@@ -129,8 +133,9 @@
              class="block"
              v-popover:popover3
              :style="{ width: '80px', backgroundColor: style.borderColor }"
+              :class="{ disabled: checkDisabled('borderColor') }"
            ></span>
-            <el-popover ref="popover3" placement="bottom" trigger="click">
+            <el-popover ref="popover3" placement="bottom" trigger="click" :disabled="checkDisabled('borderColor')">
              <Color
                :color="style.borderColor"
                @change="changeBorderColor"
@@ -138,12 +143,13 @@
            </el-popover>
          </div>
          <div class="rowItem">
-            <span class="name" v-popover:popover5>样式</span>
+            <span class="name">样式</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.borderDasharray"
              placeholder=""
+              :disabled="checkDisabled('borderDasharray')"
              @change="update('borderDasharray')"
            >
              <el-option
@@ -164,6 +170,7 @@
              style="width: 80px"
              v-model="style.borderWidth"
              placeholder=""
+              :disabled="checkDisabled('borderWidth')"
              @change="update('borderWidth')"
            >
              <el-option
@@ -182,6 +189,7 @@
              style="width: 80px"
              v-model="style.borderRadius"
              placeholder=""
+              :disabled="checkDisabled('borderRadius')"
              @change="update('borderRadius')"
            >
              <el-option
@@ -203,12 +211,95 @@
              class="block"
              v-popover:popover4
              :style="{ backgroundColor: style.fillColor }"
+              :class="{ disabled: checkDisabled('fillColor') }"
            ></span>
-            <el-popover ref="popover4" placement="bottom" trigger="click">
+            <el-popover ref="popover4" placement="bottom" trigger="click" :disabled="checkDisabled('fillColor')">
              <Color :color="style.fillColor" @change="changeFillColor"></Color>
            </el-popover>
          </div>
        </div>
+        <!-- 形状 -->
+        <div class="title">形状</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">形状</span>
+            <el-select
+              size="mini"
+              style="width: 120px"
+              v-model="style.shape"
+              placeholder=""
+              :disabled="checkDisabled('shape')"
+              @change="update('shape')"
+            >
+              <el-option
+                v-for="item in shapeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <!-- 线条 -->
+        <div class="title">线条</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">颜色</span>
+            <span
+              class="block"
+              v-popover:popover5
+              :style="{ width: '80px', backgroundColor: style.lineColor }"
+              :class="{ disabled: checkDisabled('lineColor') }"
+            ></span>
+            <el-popover ref="popover5" placement="bottom" trigger="click" :disabled="checkDisabled('lineColor')">
+              <Color
+                :color="style.lineColor"
+                @change="changeLineColor"
+              ></Color>
+            </el-popover>
+          </div>
+          <div class="rowItem">
+            <span class="name">样式</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineDasharray"
+              placeholder=""
+              :disabled="checkDisabled('lineDasharray')"
+              @change="update('lineDasharray')"
+            >
+              <el-option
+                v-for="item in borderDasharrayList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">宽度</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineWidth"
+              placeholder=""
+              :disabled="checkDisabled('lineWidth')"
+              @change="update('lineWidth')"
+            >
+              <el-option
+                v-for="item in borderWidthList"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
        <!-- 节点内边距 -->
        <div class="title noTop">节点内边距</div>
        <div class="row">
@@ -217,6 +308,7 @@
            <el-slider
              style="width: 200px"
              v-model="style.paddingX"
+              :disabled="checkDisabled('paddingX')"
              @change="update('paddingX')"
            ></el-slider>
          </div>
@@ -227,6 +319,7 @@
            <el-slider
              style="width: 200px"
              v-model="style.paddingY"
+              :disabled="checkDisabled('paddingY')"
              @change="update('paddingY')"
            ></el-slider>
          </div>
@@ -246,7 +339,9 @@ import {
  borderDasharrayList,
  borderRadiusList,
  lineHeightList,
+  shapeList,
 } from "@/config";
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default';

 /**
 * @Author: 王林
@@ -261,6 +356,8 @@ export default {
  },
  data() {
    return {
+      supportActiveStyle,
+      shapeList,
      fontFamilyList,
      fontSizeList,
      borderWidthList,
@@ -270,6 +367,7 @@ export default {
      activeNodes: [],
      activeTab: "normal",
      style: {
+        shape: '',
        paddingX: 0,
        paddingY: 0,
        color: "",
@@ -284,16 +382,19 @@ export default {
        fillColor: "",
        borderDasharray: "",
        borderRadius: "",
+        lineColor: "",
+        lineDasharray: "",
+        lineWidth: "",
      },
    };
  },
  created() {
    this.$bus.$on("node_active", (...args) => {
-      this.$refs.sidebar.show = false;
+      if (this.$refs.sidebar) this.$refs.sidebar.show = false;
      this.$nextTick(() => {
        this.activeTab = "normal";
        this.activeNodes = args[1];
-        this.$refs.sidebar.show = this.activeNodes.length > 0;
+        if (this.$refs.sidebar) this.$refs.sidebar.show = this.activeNodes.length > 0;
        this.initNodeStyle();
      });
    });
@@ -308,6 +409,15 @@ export default {
      this.initNodeStyle();
    },

+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-12 22:16:56 
+     * @Desc: 检查是否禁用 
+     */
+    checkDisabled(prop) {
+      return this.activeTab === 'active' && !this.supportActiveStyle.includes(prop)
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-05-05 09:48:52
@@ -319,6 +429,7 @@ export default {
        return;
      }
      [
+        "shape",
        "paddingX",
        "paddingY",
        "color",
@@ -333,6 +444,9 @@ export default {
        "fillColor",
        "borderDasharray",
        "borderRadius",
+        "lineColor",
+        "lineDasharray",
+        "lineWidth",
      ].forEach((item) => {
        this.style[item] = this.activeNodes[0].getStyle(
          item,
@@ -401,6 +515,16 @@ export default {
      this.update("borderColor");
    },

+    /** 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 10:18:15 
+     * @Desc: 修改线条颜色 
+     */
+    changeLineColor(color) {
+      this.style.lineColor = color;
+      this.update("lineColor");
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-05-05 10:18:59
@@ -472,6 +596,13 @@ export default {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
+
+        &.disabled {
+          background-color: #F5F7FA !important;
+          border-color: #E4E7ED !important;
+          color: #C0C4CC !important;
+          cursor: not-allowed !important;
+        }
      }
    }

@@ -492,6 +623,13 @@ export default {
        background-color: #eee;
      }

+      &.disabled {
+        background-color: #F5F7FA !important;
+        border-color: #E4E7ED !important;
+        color: #C0C4CC !important;
+        cursor: not-allowed !important;
+      }
+
      &.i {
        font-style: italic;
      }
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -106,7 +106,7 @@
        <div
          class="toolbarBtn"
          :class="{
-            disabled: activeNodes.length <= 0 || hasRoot,
+            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization,
          }"
          @click="$bus.$emit('execCommand', 'ADD_GENERALIZATION')"
        >
@@ -135,12 +135,24 @@
      </div>
      <!-- 导出 -->
      <div class="toolbarBlock">
+        <div class="toolbarBtn" @click="createNewLocalFile">
+          <span class="icon iconfont iconxinjian"></span>
+          <span class="text">新建</span>
+        </div>
+        <div class="toolbarBtn" @click="openLocalFile">
+          <span class="icon iconfont icondakai"></span>
+          <span class="text">打开</span>
+        </div>
+        <div class="toolbarBtn" @click="saveLocalFile">
+          <span class="icon iconfont iconlingcunwei"></span>
+          <span class="text">另存为</span>
+        </div>
        <div class="toolbarBtn" @click="$bus.$emit('showImport')">
          <span class="icon iconfont icondaoru"></span>
          <span class="text">导入</span>
        </div>
        <div class="toolbarBtn" @click="$bus.$emit('showExport')">
-          <span class="icon iconfont icondaochu"></span>
+          <span class="icon iconfont iconexport"></span>
          <span class="text">导出</span>
        </div>
        <div class="toolbarBtn" @click="$bus.$emit('showShortcutKey')">
@@ -167,12 +179,17 @@ import NodeNote from "./NodeNote";
 import NodeTag from "./NodeTag";
 import Export from "./Export";
 import Import from './Import';
+import { mapState } from 'vuex';
+import { Notification } from 'element-ui';
+import exampleData from 'simple-mind-map/example/exampleData';
+import { getData } from '../../../api';

 /**
 * @Author: 王林
 * @Date: 2021-06-24 22:54:58
 * @Desc: 工具栏
 */
+let fileHandle = null;
 export default {
  name: "Toolbar",
  components: {
@@ -189,19 +206,29 @@ export default {
      activeNodes: [],
      backEnd: false,
      forwardEnd: true,
-      readonly: false
+      readonly: false,
+      isFullDataFile: false,
+      timer: null,
    };
  },
  computed: {
+    ...mapState(['isHandleLocalFile']),
    hasRoot() {
-      return this.activeNodes.find((node) => {
+      return this.activeNodes.findIndex((node) => {
        return node.isRoot;
-      });
+      }) !== -1;
    },
    hasGeneralization() {
-      return this.activeNodes.find((node) => {
+      return this.activeNodes.findIndex((node) => {
        return node.isGeneralization;
-      });
+      }) !== -1;;
+    }
+  },
+  watch: {
+    isHandleLocalFile(val) {
+      if (!val) {
+        Notification.closeAll();
+      }
    }
  },
  created() {
@@ -215,7 +242,168 @@ export default {
      this.backEnd = index <= 0
      this.forwardEnd = index >= len - 1
    });
+    this.$bus.$on("write_local_file", (content) => {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.writeLocalFile(content);
+      }, 1000);
+    });
  },
+  methods: {
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:40:09 
+     * @Desc: 打开本地文件 
+     */
+    async openLocalFile() {
+      try {
+        let [ _fileHandle ] = await window.showOpenFilePicker({
+          types: [
+            {
+              description: 'file',
+              accept: {
+                'application/*': ['.json', '.smm']
+              }
+            },
+          ],
+          excludeAcceptAllOption: true,
+          multiple: false
+        });
+        if (!_fileHandle) {
+          return;
+        }
+        fileHandle = _fileHandle;
+        if (fileHandle.kind === 'directory') {
+          this.$message.warning('请选择文件');
+          return;
+        }
+        this.readFile();
+      } catch (error) {
+        console.log(error);
+        this.$message.warning('你的浏览器可能不支持哦');
+      }
+    },
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:40:18 
+     * @Desc: 读取本地文件 
+     */
+    async readFile() {
+      let file = await fileHandle.getFile();
+      let fileReader = new FileReader();
+      fileReader.onload = async () => {
+        this.$store.commit('setIsHandleLocalFile', true);
+        this.setData(fileReader.result);
+        Notification.closeAll();
+        Notification({
+          title: '提示',
+          message: `当前正在编辑你本机的【${ file.name }】文件`,
+          duration: 0,
+          showClose: false
+        });
+      }
+      fileReader.readAsText(file);
+    },
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:40:26 
+     * @Desc: 渲染读取的数据 
+     */
+    setData(str) {
+      try {
+        let data = JSON.parse(str);
+        if (typeof data !== 'object') {
+            throw new Error('文件内容有误');
+        }
+        if (data.root) {
+          this.isFullDataFile = true;
+        } else {
+          this.isFullDataFile = false;
+          data = {
+            ...exampleData,
+            root: data
+          }
+        }
+        this.$bus.$emit('setData', data);
+      } catch (error) {
+        console.log(error)
+        this.$message.error("文件打开失败");
+      }
+    },
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:40:42 
+     * @Desc: 写入本地文件 
+     */
+    async writeLocalFile(content) {
+      if (!fileHandle || !this.isHandleLocalFile) {
+        return;
+      }
+      if (!this.isFullDataFile) {
+        content = content.root;
+      }
+      let string = JSON.stringify(content);
+      const writable = await fileHandle.createWritable();
+      await writable.write(string);
+      await writable.close();
+    },
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:40:48 
+     * @Desc: 创建本地文件 
+     */
+    async createNewLocalFile() {
+      await this.createLocalFile(exampleData);
+    },
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:49:17 
+     * @Desc: 另存为 
+     */
+    async saveLocalFile() {
+      let data = getData();
+      await this.createLocalFile(data);
+    },
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-24 15:50:22 
+     * @Desc: 创建本地文件 
+     */
+    async createLocalFile(content) {
+      try {
+        let _fileHandle = await window.showSaveFilePicker({
+          types: [{
+            description: 'file',
+            accept: {'application/*': ['.json', '.smm']},
+          }],
+        });
+        if (!_fileHandle) {
+          return;
+        }
+        const loading = this.$loading({
+          lock: true,
+          text: '正在创建文件',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        fileHandle = _fileHandle;
+        this.$store.commit('setIsHandleLocalFile', true);
+        this.isFullDataFile = true;
+        await this.writeLocalFile(content);
+        await this.readFile();
+        loading.close();
+      } catch (error) {
+        console.log(error);
+        this.$message.warning('你的浏览器可能不支持哦');
+      }
+    },
+  }
 };
 </script>

--- a/web/src/store.js
+++ b/web/src/store.js
@@ -6,7 +6,8 @@ Vue.use(Vuex)

 const store = new Vuex.Store({
    state: {
-        mindMapData: null // 思维导图数据
+        mindMapData: null, // 思维导图数据
+        isHandleLocalFile: false// 是否操作的是本地文件
    },
    mutations: {
        /** 
@@ -16,6 +17,16 @@ const store = new Vuex.Store({
         */
        setMindMapData(state, data) {
            state.mindMapData = data
+        },
+
+        /** 
+         * javascript comment 
+         * @Author: 王林 
+         * @Date: 2022-09-24 13:55:38 
+         * @Desc: 设置操作本地文件标志位 
+         */
+        setIsHandleLocalFile(state, data) {
+            state.isHandleLocalFile = data
        }
    },
    actions: {
Author	SHA1	Message	Date
wanglin25	da456eeb8f	打包	2022-10-10 16:27:49 +08:00
wanglin25	5cd36b57d5	修复子节点收起状态复制时丢失的问题	2022-10-10 16:11:00 +08:00
wanglin25	e2b239fcbb	更新文档	2022-10-10 15:02:22 +08:00
wanglin25	5449e79d49	打包	2022-10-10 14:39:09 +08:00
wanglin25	c2045ddedc	支持小地图	2022-10-10 14:31:43 +08:00
wanglin2	5dfa215538	修改文档	2022-09-30 22:16:27 +08:00
wanglin25	d90013da71	打包	2022-09-30 14:48:08 +08:00
wanglin25	b3b74323f7	逻辑结构图、思维导图新增直线连接风格、直连风格	2022-09-30 14:44:40 +08:00
wanglin2	f9000ea478	逻辑结构图和思维导图支持直线连接线开发中	2022-09-25 22:07:21 +08:00
wanglin2	830e7e2482	打包	2022-09-24 20:42:53 +08:00
wanglin2	13ed7f28df	优化：手动创建节点时立即聚焦	2022-09-24 20:38:47 +08:00
wanglin2	17e79a0b23	修复连线样式深度更新问题	2022-09-24 20:13:53 +08:00
wanglin2	eee310ba49	支持新建、打开、	2022-09-24 17:08:11 +08:00
wanglin2	36c8927dd0	修改文档	2022-09-24 10:51:09 +08:00
wanglin2	05333daa63	支持展开到指定层级	2022-09-24 10:49:40 +08:00
wanglin25	5aed681198	支持展开到指定层级	2022-09-23 17:41:38 +08:00
wanglin25	8a438f2906	修复xmind8版本文件导入失败的问题	2022-09-23 16:16:08 +08:00
wanglin2	260de4987d	修改README	2022-09-21 21:02:17 +08:00
wanglin25	31cc658c06	打包	2022-09-21 20:11:12 +08:00
wanglin25	be6b41d74d	支持导入.xmind文件	2022-09-21 20:07:46 +08:00
wanglin25	4beeead53d	修复根节点添加多个节点爆栈的问题	2022-09-21 09:38:41 +08:00
wanglin25	af2df6acd3	导出svg增加title标签	2022-09-19 09:36:19 +08:00
wanglin2	c08d66acf2	打包	2022-09-17 22:00:15 +08:00
wanglin2	5a9cb9ac07	节点支持设置自定义线条样式	2022-09-17 16:18:38 +08:00
wanglin2	1662cd1be7	优化节点自定义线条样式	2022-09-17 15:09:34 +08:00
wanglin2	9dd5b3d47e	节点支持自定义线条样式	2022-09-17 15:00:12 +08:00
wanglin2	ece116317b	修改文档	2022-09-13 22:30:45 +08:00
wanglin25	d24d5c8281	修复节点展开收起的bug&打包	2022-09-13 10:34:20 +08:00
wanglin25	97c01cda3a	打包	2022-09-13 09:43:18 +08:00
wanglin25	6d520ece7e	修改文档	2022-09-13 09:33:05 +08:00
wanglin2	745041deef	节点支持多种形状开发完成	2022-09-12 23:07:01 +08:00
wanglin25	ae6c10cdf9	打包	2022-09-01 11:11:33 +08:00
街角小林	f5338d62fc	Merge pull request #26 from huangyuanyin/main fix 二级节点后无子节点，展开所有/收起所有操作后的报错信息	2022-09-01 11:07:38 +08:00
liuzhanghao	19fc12ff20	fix	2022-09-01 10:28:26 +08:00
liuzhanghao	d7640bb026	fix 二级节点后无子节点，展开所有/收起所有操作后的报错信息	2022-09-01 10:22:01 +08:00