打包0.2.23

README.md

@@ -108,6 +108,8 @@ The `index.html` file will be automatically moved to the root directory.
 
 [Technical Analysis of Web Mind Map Implementation (chi)](https://juejin.cn/post/6987711560521089061)
 
+[Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?](https://juejin.cn/post/7157681502506090510)
+
 # Installation
 
 > Things to note before version 0.2.0:
@@ -170,13 +172,11 @@ import MindMap from "simple-mind-map";
 const mindMap = new MindMap({
   el: document.getElementById("mindMapContainer"),
   data: {
-    "root": {
-      "data": {
-        "text": "root node",
-      },
-      "children": [],
+    "data": {
+        "text": "根节点"
     },
-  },
+    "children": []
+  }
 });
 ```
 
@@ -224,7 +224,7 @@ version does not have a `content.json`, it corresponds to `content.xml`.
 `content`: the contents of the `content.xml` file within the `.xmind` zip
 package
 
-### Instantiation options:
+### Instantiation options
 
 | Field Name                       | Type    | Default Value    | Description                                                                                                                                                                                                                                                          | Required |
 | -------------------------------- | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
@@ -243,7 +243,39 @@ package
 | customNoteContentShow（v0.1.6+） | Object  | null             | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }}                                                                                        |          |
 | readonly（v0.1.7+）              | Boolean | false            | Whether it is read-only mode                                                                                                                                                                                                                                         |          |
 
-### Instance methods:
+### Static methods
+
+#### defineTheme(name, config)
+
+v0.2.23+
+
+Define new theme.
+
+`name`：New theme name
+
+`config`：New theme config
+
+`Simple-mind-map ` Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:
+
+```js
+import MindMap from 'simple-mind-map'
+// 注册新主题
+MindMap.defineTheme('主题名称', {})
+
+// 1.实例化时使用新注册的主题
+const mindMap = new MindMap({
+    theme: '主题名称'
+})
+
+// 2.动态切换新主题
+mindMap.setTheme('主题名称')
+```
+
+For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js).
+
+
+
+### Instance methods
 
 #### render()
 
@@ -1160,12 +1192,22 @@ The built-in themes and icons in the project come from:
 
 [Zhixi Mind Map](https://www.zhixi.com/)
 
+Respect the copyright, and do not use the theme and icons directly for commercial projects.
+
 # License
 
 [MIT](https://opensource.org/licenses/MIT)
 
 # Changelog
 
+## 0.2.23
+
+New: Support register new theme.
+
+## 0.2.22
+
+optimization：The theme and structure pictures of the built-in `simple-mind-map` package are removed and replaced by user self-maintenance. The original pictures can be found in the `web/assets/img/` directory.
+
 ## 0.2.21
 
 New: Support node horizontal line style.

README.zh-Hans.md

@@ -97,8 +97,6 @@ npm run build
 
 # 安装
 
-> 当前仓库版本：0.2.21，当前npm版本：0.2.21
-
 ```bash
 npm i simple-mind-map
 ```
@@ -147,12 +145,10 @@ import MindMap from "simple-mind-map";
 const mindMap = new MindMap({
   el: document.getElementById('mindMapContainer'),
   data: {
-    "root": {
-        "data": {
-            "text": "根节点"
-        },
-        "children": []
-    }
+    "data": {
+        "text": "根节点"
+    },
+    "children": []
   }
 });
 ```
@@ -191,7 +187,7 @@ v0.2.8+
 
 `content`：`.xmind`压缩包内的`content.xml`文件内容
 
-### 实例化选项：
+### 实例化选项
 
 | 字段名称                           | 类型      | 默认值              | 描述                                                                                                                                                                                                                                                                                                                                                        | 是否必填 |
 | ------------------------------ | ------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
@@ -210,7 +206,39 @@ v0.2.8+
 | customNoteContentShow（v0.1.6+） | Object  | null             | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}                                                                                                                                                                                                                                               |      |
 | readonly（v0.1.7+）              | Boolean | false            | 是否是只读模式                                                                                                                                                                                                                                                                                                                                                   |      |
 
-### 实例方法：
+### 静态方法
+
+#### defineTheme(name, config)
+
+v0.2.23+
+
+定义新主题。
+
+`name`：新主题名称
+
+`config`：主题数据
+
+`simple-mind-map`内置了众多主题，另外你也可以注册新主题，建议在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题，使用示例：
+
+```js
+import MindMap from 'simple-mind-map'
+// 注册新主题
+MindMap.defineTheme('主题名称', {})
+
+// 1.实例化时使用新注册的主题
+const mindMap = new MindMap({
+    theme: '主题名称'
+})
+
+// 2.动态切换新主题
+mindMap.setTheme('主题名称')
+```
+
+主题的所有配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。
+
+
+
+### 实例方法
 
 #### render()
 
@@ -1062,12 +1090,22 @@ copyNodeTree({}, node)
 
 [知犀思维导图](https://www.zhixi.com/)
 
+尊重版权，主题和图片请勿直接用于商业项目。
+
 # License
 
 [MIT](https://opensource.org/licenses/MIT)
 
 # Changelog
 
+## 0.2.23
+
+新增：支持注册新主题。
+
+## 0.2.22
+
+优化：取消内置`simple-mind-map`包的主题和结构图片，改为由使用者自行维护，原有图片可在`web/assets/img/`目录找到。
+
 ## 0.2.21
 
 新增：支持节点横线风格。

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.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.92b546b0.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.94891485.css" rel="preload" as="style"><link href="dist/js/app.aca24f03.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.6cac1a4d.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.94891485.css" rel="stylesheet"><link href="dist/css/app.92b546b0.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.6cac1a4d.js"></script><script src="dist/js/app.aca24f03.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.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.3d234c87.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.94891485.css" rel="preload" as="style"><link href="dist/js/app.54d858bc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.6cac1a4d.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.94891485.css" rel="stylesheet"><link href="dist/css/app.3d234c87.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.6cac1a4d.js"></script><script src="dist/js/app.54d858bc.js"></script></body></html>

simple-mind-map/index.js

@@ -16,6 +16,7 @@ import { SVG } from '@svgdotjs/svg.js'
 import xmind from './src/parse/xmind'
 import { simpleDeepClone } from './src/utils'
 import KeyboardNavigation from './src/KeyboardNavigation'
+import defaultTheme from './src/themes/default'
 
 // 默认选项配置
 const defaultOpt = {
@@ -328,4 +329,12 @@ class MindMap {
 
 MindMap.xmind = xmind
 
+// 定义新主题
+MindMap.defineTheme = (name, config = {}) => {
+  if (theme[name]) {
+    return new Error('该主题名称已存在')
+  }
+  theme[name] = merge(defaultTheme, config)
+}
+
 export default MindMap

simple-mind-map/package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "simple-mind-map",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.2.20",
+      "version": "0.2.21",
       "license": "MIT",
       "dependencies": {
         "@svgdotjs/svg.js": "^3.0.16",

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/utils/constant.js

@@ -27,22 +27,18 @@ export const layoutList = [
   {
     name: '逻辑结构图',
     value: 'logicalStructure',
-    img: require('../assets/logicalStructure.jpg')
   },
   {
     name: '思维导图',
     value: 'mindMap',
-    img: require('../assets/mindMap.jpg')
   },
   {
     name: '组织结构图',
     value: 'organizationStructure',
-    img: require('../assets/organizationStructure.jpg')
   },
   {
     name: '目录组织图',
     value: 'catalogOrganization',
-    img: require('../assets/catalogOrganization.jpg')
   }
 ]
 export const layoutValueList = [
@@ -57,111 +53,89 @@ export const themeList = [
   {
     name: '默认',
     value: 'default',
-    img: require('../assets/default.jpg')
   },
   {
     name: '脑图经典',
     value: 'classic',
-    img: require('../assets/classic.jpg')
   },
   {
     name: '小黄人',
     value: 'minions',
-    img: require('../assets/minions.jpg')
   },
   {
     name: '粉红葡萄',
     value: 'pinkGrape',
-    img: require('../assets/pinkGrape.jpg')
   },
   {
     name: '薄荷',
     value: 'mint',
-    img: require('../assets/mint.jpg')
   },
   {
     name: '金色vip',
     value: 'gold',
-    img: require('../assets/gold.jpg')
   },
   {
     name: '活力橙',
     value: 'vitalityOrange',
-    img: require('../assets/vitalityOrange.jpg')
   },
   {
     name: '绿叶',
     value: 'greenLeaf',
-    img: require('../assets/greenLeaf.jpg')
   },
   {
     name: '暗色2',
     value: 'dark2',
-    img: require('../assets/dark2.jpg')
   },
   {
     name: '天清绿',
     value: 'skyGreen',
-    img: require('../assets/skyGreen.jpg')
   },
   {
     name: '脑图经典2',
     value: 'classic2',
-    img: require('../assets/classic2.jpg')
   },
   {
     name: '脑图经典3',
     value: 'classic3',
-    img: require('../assets/classic3.jpg')
   },
   {
     name: '脑图经典4',
     value: 'classic4',
-    img: require('../assets/classic4.jpg')
   },
   {
     name: '经典绿',
     value: 'classicGreen',
-    img: require('../assets/classicGreen.jpg')
   },
   {
     name: '经典蓝',
     value: 'classicBlue',
-    img: require('../assets/classicBlue.jpg')
   },
   {
     name: '天空蓝',
     value: 'blueSky',
-    img: require('../assets/blueSky.jpg')
   },
   {
     name: '脑残粉',
     value: 'brainImpairedPink',
-    img: require('../assets/brainImpairedPink.jpg')
   },
   {
     name: '暗色',
     value: 'dark',
-    img: require('../assets/dark.jpg')
   },
   {
     name: '泥土黄',
     value: 'earthYellow',
-    img: require('../assets/earthYellow.jpg')
   },
   {
     name: '清新绿',
     value: 'freshGreen',
-    img: require('../assets/freshGreen.jpg')
   },
   {
     name: '清新红',
     value: 'freshRed',
-    img: require('../assets/freshRed.jpg')
   },
   {
     name: '浪漫紫',
     value: 'romanticPurple',
-    img: require('../assets/romanticPurple.jpg')
   }
 ]

web/src/config/constant.js

@@ -0,0 +1,41 @@
+//  布局结构图片映射
+export const layoutImgMap = {
+    logicalStructure: require('../assets/img/logicalStructure.jpg'),
+    mindMap: require('../assets/img/mindMap.jpg'),
+    organizationStructure: require('../assets/img/organizationStructure.jpg'),
+    catalogOrganization: require('../assets/img/catalogOrganization.jpg')
+}
+
+//  主题图片映射
+export const themeMap = {
+    default: require('../assets/img/default.jpg'),
+    classic: require('../assets/img/classic.jpg'),
+    minions: require('../assets/img/minions.jpg'),
+    pinkGrape: require('../assets/img/pinkGrape.jpg'),
+    mint: require('../assets/img/mint.jpg'),
+    gold: require('../assets/img/gold.jpg'),
+    vitalityOrange: require('../assets/img/vitalityOrange.jpg'),
+    greenLeaf: require('../assets/img/greenLeaf.jpg'),
+    dark2: require('../assets/img/dark2.jpg'),
+    skyGreen: require('../assets/img/skyGreen.jpg'),
+    classic2: require('../assets/img/classic2.jpg'),
+    classic3: require('../assets/img/classic3.jpg'),
+    classic4: require('../assets/img/classic4.jpg'),
+    classicGreen: require('../assets/img/classicGreen.jpg'),
+    classicBlue: require('../assets/img/classicBlue.jpg'),
+    blueSky: require('../assets/img/blueSky.jpg'),
+    brainImpairedPink: require('../assets/img/brainImpairedPink.jpg'),
+    dark: require('../assets/img/dark.jpg'),
+    earthYellow: require('../assets/img/earthYellow.jpg'),
+    freshGreen: require('../assets/img/freshGreen.jpg'),
+    freshRed: require('../assets/img/freshRed.jpg'),
+    romanticPurple: require('../assets/img/romanticPurple.jpg'),
+    simpleBlack: require('../assets/img/simpleBlack.jpg'),
+    courseGreen: require('../assets/img/courseGreen.jpg'),
+    coffee: require('../assets/img/coffee.jpg'),
+    redSpirit: require('../assets/img/redSpirit.jpg'),
+    blackHumour: require('../assets/img/blackHumour.jpg'),
+    lateNightOffice: require('../assets/img/lateNightOffice.jpg'),
+    blackGold: require('../assets/img/blackGold.jpg'),
+}
+  

web/src/customThemes/blackGold.js

@@ -0,0 +1,55 @@
+// 黑金
+export default {
+    // 背景颜色
+    backgroundColor: 'rgb(18, 20, 20)',
+    // 连线的颜色
+    lineColor: 'rgb(205, 186, 156)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(245, 224, 191)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(255, 208, 124)',
+      color: 'rgb(111, 61, 6)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: '#fff',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(66, 57, 46)',
+      color: 'rgb(225, 201, 158)',
+      borderColor: 'rgb(245, 224, 191)',
+      borderWidth: 2,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(255, 208, 124)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(231, 203, 155)',
+      active: {
+        borderColor: 'rgb(255, 208, 124)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(56, 45, 34)',
+      borderColor: 'rgb(104, 84, 61)',
+      borderWidth: 2,
+      color: 'rgb(242, 216, 176)',
+      active: {
+        borderColor: 'rgb(255, 208, 124)'
+      }
+    }
+  }
+  

web/src/customThemes/blackHumour.js

@@ -0,0 +1,56 @@
+// 黑色幽默
+export default {
+    // 背景颜色
+    backgroundColor: 'rgb(27, 31, 34)',
+    // 连线的颜色
+    lineColor: 'rgb(75, 81, 78)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 119, 34)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(36, 179, 96)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: 'rgb(254, 199, 13)',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(254, 199, 13)',
+      color: 'rgb(0, 0, 0)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(36, 179, 96)',
+        borderWidth: 3,
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(204, 204, 204)',
+      active: {
+        borderColor: 'rgb(254, 199, 13)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(27, 31, 34)',
+      borderColor: 'rgb(255, 119, 34)',
+      borderWidth: 2,
+      color: 'rgb(204, 204, 204)',
+      active: {
+        borderColor: 'rgb(36, 179, 96)'
+      }
+    }
+  }
+  

web/src/customThemes/coffee.js

@@ -0,0 +1,53 @@
+// 咖啡
+export default {
+    // 连线的颜色
+    lineColor: 'rgb(173, 123, 91)',
+    lineWidth: 4,
+    // 概要连线的粗细
+    generalizationLineWidth: 4,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(173, 123, 91)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(202, 117, 79)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: 'rgb(173, 123, 91)',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(245, 231, 216)',
+      color: 'rgb(125, 86, 42)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(173, 123, 91)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(96, 71, 47)',
+      active: {
+        borderColor: 'rgb(173, 123, 91)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(255, 249, 239)',
+      borderColor: 'rgb(173, 123, 91)',
+      borderWidth: 2,
+      color: 'rgb(122, 83, 44)',
+      active: {
+        borderColor: 'rgb(202, 117, 79)'
+      }
+    }
+  }
+  

web/src/customThemes/courseGreen.js

@@ -0,0 +1,53 @@
+// 课程绿
+export default {
+    // 连线的颜色
+    lineColor: 'rgb(113, 195, 169)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(113, 195, 169)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(16, 160, 121)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: 'rgb(173, 91, 12)',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(240, 252, 249)',
+      color: 'rgb(50, 113, 96)',
+      borderColor: 'rgb(113, 195, 169)',
+      borderWidth: 2,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(173, 91, 12)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(10, 59, 43)',
+      active: {
+        borderColor: 'rgb(173, 91, 12)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(246, 238, 211)',
+      borderColor: '',
+      borderWidth: 0,
+      color: 'rgb(173, 91, 12)',
+      active: {
+        borderColor: 'rgb(113, 195, 169)'
+      }
+    }
+  }
+  

web/src/customThemes/index.js

@@ -0,0 +1,45 @@
+import simpleBlack from './simpleBlack'
+import courseGreen from './courseGreen'
+import coffee from './coffee'
+import redSpirit from './redSpirit'
+import blackHumour from './blackHumour'
+import lateNightOffice from './lateNightOffice'
+import blackGold from './blackGold'
+
+export default [
+    {
+        name: '简约黑',
+        value: 'simpleBlack',
+        theme: simpleBlack
+    },
+    {
+        name: '课程绿',
+        value: 'courseGreen',
+        theme: courseGreen
+    },
+    {
+        name: '咖啡',
+        value: 'coffee',
+        theme: coffee
+    },
+    {
+        name: '红色精神',
+        value: 'redSpirit',
+        theme: redSpirit
+    },
+    {
+        name: '黑色幽默',
+        value: 'blackHumour',
+        theme: blackHumour
+    },
+    {
+        name: '深夜办公室',
+        value: 'lateNightOffice',
+        theme: lateNightOffice
+    },
+    {
+        name: '黑金',
+        value: 'blackGold',
+        theme: blackGold
+    }
+]

web/src/customThemes/lateNightOffice.js

@@ -0,0 +1,56 @@
+// 深夜办公室
+export default {
+    // 背景颜色
+    backgroundColor: 'rgb(32, 37, 49)',
+    // 连线的颜色
+    lineColor: 'rgb(137, 167, 196)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 119, 34)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(23, 153, 243)',
+      color: 'rgb(255, 255, 255)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: 'rgb(255, 119, 34)',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(70, 78, 94)',
+      color: 'rgb(209, 210, 210)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(255, 119, 34)',
+        borderWidth: 3,
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(204, 204, 204)',
+      active: {
+        borderColor: 'rgb(255, 119, 34)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(255, 119, 34)',
+      borderColor: '',
+      borderWidth: 2,
+      color: '#fff',
+      active: {
+        borderColor: 'rgb(23, 153, 243)'
+      }
+    }
+  }
+  

web/src/customThemes/redSpirit.js

@@ -0,0 +1,55 @@
+// 红色精神
+export default {
+    // 背景颜色
+    backgroundColor: 'rgb(255, 238, 228)',
+    // 连线的颜色
+    lineColor: 'rgb(230, 138, 131)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(222, 101, 85)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(207, 44, 44)',
+      color: 'rgb(255, 233, 157)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      active: {
+        borderColor: 'rgb(255, 233, 157)',
+        borderWidth: 3,
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(255, 255, 255)',
+      color: 'rgb(211, 58, 21)',
+      borderColor: 'rgb(222, 101, 85)',
+      borderWidth: 2,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(255, 233, 157)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(144, 71, 43)',
+      active: {
+        borderColor: 'rgb(255, 233, 157)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(255, 247, 211)',
+      borderColor: 'rgb(255, 202, 162)',
+      borderWidth: 2,
+      color: 'rgb(187, 101, 69)',
+      active: {
+        borderColor: 'rgb(222, 101, 85)'
+      }
+    }
+  }
+  

web/src/customThemes/simpleBlack.js

@@ -0,0 +1,51 @@
+// 简约黑
+export default {
+  // 连线的颜色
+  lineColor: 'rgb(34, 34, 34)',
+  lineWidth: 4,
+  // 概要连线的粗细
+  generalizationLineWidth: 4,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(34, 34, 34)',
+  // 根节点样式
+  root: {
+    fillColor: '#fff',
+    color: 'rgb(34, 34, 34)',
+    borderColor: 'rgb(34, 34, 34)',
+    borderWidth: 3,
+    fontSize: 24,
+    active: {
+      borderColor: '#a13600',
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(241, 246, 248)',
+    color: 'rgb(34, 34, 34)',
+    borderColor: 'rgb(34, 34, 34)',
+    borderWidth: 3,
+    fontSize: 18,
+    active: {
+      borderColor: '#a13600',
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(34, 34, 34)',
+    active: {
+      borderColor: '#a13600'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: 'transparent',
+    borderColor: 'rgb(34, 34, 34)',
+    borderWidth: 2,
+    color: 'rgb(34, 34, 34)',
+    active: {
+      borderColor: '#a13600'
+    }
+  }
+}

web/src/lang/en_us.js

@@ -68,7 +68,8 @@ export default {
     tips: 'tips：.smm and .json file can be import'
   },
   fullscreen: {
-    fullscreen: 'Fullscreen'
+    fullscreenShow: 'Full screen show',
+    fullscreenEdit: 'Full screen edit'
   },
   import: {
     title: 'Import',

web/src/lang/zh_cn.js

@@ -68,7 +68,8 @@ export default {
     tips: 'tips：.smm和.json文件可用于导入'
   },
   fullscreen: {
-    fullscreen: '全屏'
+    fullscreenShow: '全屏查看',
+    fullscreenEdit: '全屏编辑'
   },
   import: {
     title: '导入',

web/src/pages/Edit/components/Edit.vue

@@ -37,6 +37,12 @@ import Navigator from './Navigator.vue'
 import NodeImgPreview from './NodeImgPreview.vue'
 import SidebarTrigger from './SidebarTrigger.vue'
 import { mapState } from 'vuex'
+import customThemeList from '@/customThemes'
+
+// 注册自定义主题
+customThemeList.forEach((item) => {
+  MindMap.defineTheme(item.value, item.theme)
+})
 
 /**
  * @Author: 王林

web/src/pages/Edit/components/Fullscreen.vue

@@ -3,10 +3,18 @@
     <el-tooltip
       class="item"
       effect="dark"
-      :content="$t('fullscreen.fullscreen')"
+      :content="$t('fullscreen.fullscreenShow')"
       placement="top"
     >
-      <div class="btn iconfont iconquanping" @click="toFullscreen"></div>
+      <div class="btn iconfont iconquanping" @click="toFullscreenShow"></div>
+    </el-tooltip>
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="$t('fullscreen.fullscreenEdit')"
+      placement="top"
+    >
+      <div class="btn iconfont iconquanping1" @click="toFullscreenEdit"></div>
     </el-tooltip>
   </div>
 </template>
@@ -37,13 +45,14 @@ export default {
     }
   },
   methods: {
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-11 21:14:30
-     * @Desc: 准备全屏
-     */
-    toFullscreen() {
+    // 全屏查看
+    toFullscreenShow() {
       fullScreen(this.mindMap.el)
+    },
+
+    // 全屏编辑
+    toFullscreenEdit() {
+      fullScreen(document.body)
     }
   }
 }
@@ -54,6 +63,14 @@ export default {
   display: flex;
   align-items: center;
 
+  .item {
+    margin-right: 12px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
   .btn {
     cursor: pointer;
   }

web/src/pages/Edit/components/Structure.vue

@@ -9,7 +9,7 @@
         :class="{ active: item.value === layout }"
       >
         <div class="imgBox">
-          <img :src="item.img" alt="" />
+          <img :src="layoutImgMap[item.value]" alt="" />
         </div>
         <div class="name">{{ item.name }}</div>
       </div>
@@ -22,6 +22,7 @@ import Sidebar from './Sidebar'
 import { layoutList } from 'simple-mind-map/src/utils/constant'
 import { storeConfig } from '@/api'
 import { mapState } from 'vuex'
+import { layoutImgMap } from '@/config/constant.js'
 
 /**
  * @Author: 王林
@@ -41,6 +42,7 @@ export default {
   data() {
     return {
       layoutList,
+      layoutImgMap,
       layout: ''
     }
   },

web/src/pages/Edit/components/Theme.vue

@@ -9,7 +9,7 @@
         :class="{ active: item.value === theme }"
       >
         <div class="imgBox">
-          <img :src="item.img" alt="" />
+          <img :src="themeMap[item.value]" alt="" />
         </div>
         <div class="name">{{ item.name }}</div>
       </div>
@@ -22,6 +22,8 @@ import Sidebar from './Sidebar'
 import { themeList } from 'simple-mind-map/src/utils/constant'
 import { storeConfig } from '@/api'
 import { mapState } from 'vuex'
+import { themeMap } from '@/config/constant.js'
+import customThemeList from '@/customThemes'
 
 /**
  * @Author: 王林
@@ -40,7 +42,8 @@ export default {
   },
   data() {
     return {
-      themeList,
+      themeList: [...themeList, ...customThemeList],
+      themeMap,
       theme: ''
     }
   },