Demo:新增主题,更新文档

web/src/config/constant.js

@@ -52,5 +52,9 @@ export const themeMap = {
     neonLamp: require('../assets/img/themes/neonLamp.jpg'),
     darkNightLceBlade: require('../assets/img/themes/darkNightLceBlade.jpg'),
     morandi: require('../assets/img/themes/morandi.jpg'),
+    classic5: require('../assets/img/themes/classic5.jpg'),
+    dark3: require('../assets/img/themes/dark3.jpg'),
+    dark4: require('../assets/img/themes/dark4.jpg'),
+    cactus: require('../assets/img/themes/cactus.jpg'),
 }
   

web/src/customThemes/cactus.js

@@ -0,0 +1,46 @@
+// 仙人掌
+export default {
+    backgroundColor: 'rgb(219, 255, 211)',
+    // 连线的颜色
+    lineColor: 'rgb(51, 51, 51)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 127, 71)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(160, 220, 63)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(160, 220, 63)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(15, 198, 113)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      shape: 'roundedRectangle'
+    },
+    // 二级节点样式
+    second: {
+      fillColor: '#fff',
+      color: 'rgb(26, 26, 26)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(0, 0, 0)'
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(255, 127, 71)',
+      borderColor: '',
+      borderWidth: 0,
+      color: '#fff'
+    }
+  }
+  

web/src/customThemes/classic5.js

@@ -0,0 +1,45 @@
+// 经典5
+export default {
+    backgroundColor: 'rgb(233, 245, 241)',
+    // 连线的颜色
+    lineColor: 'rgb(34, 34, 34)',
+    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(34, 34, 34)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(56, 44, 116)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(68, 68, 68)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(56, 44, 116)',
+      color: '#fff',
+      borderColor: 'rgb(56, 44, 116)',
+      borderWidth: 0,
+      fontSize: 24
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(161, 213, 188)',
+      color: 'rgb(0, 0, 0)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(0, 0, 0)'
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(56, 44, 116)',
+      borderColor: '',
+      borderWidth: 0,
+      color: '#fff'
+    }
+  }
+  

web/src/customThemes/dark3.js

@@ -0,0 +1,46 @@
+// 暗色3
+export default {
+    backgroundColor: 'rgb(0, 0, 0)',
+    // 连线的颜色
+    lineColor: 'rgb(172, 172, 172)',
+    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(172, 172, 172)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(57, 130, 252)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(68, 68, 68)',
+    // 根节点样式
+    root: {
+      fillColor: '#fff',
+      color: 'rgb(241, 79, 81)',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24,
+      shape: 'roundedRectangle'
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(241, 79, 81)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: '#fff'
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      color: 'rgb(241, 79, 81)'
+    }
+  }
+  

web/src/customThemes/dark4.js

@@ -0,0 +1,45 @@
+// 暗色4
+export default {
+    backgroundColor: 'rgb(32, 34, 43)',
+    // 连线的颜色
+    lineColor: 'rgb(90, 136, 116)',
+    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(90, 136, 116)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(57, 130, 252)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(68, 68, 68)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(1, 192, 116)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 24
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(48, 51, 63)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      fontSize: 18
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: '#fff'
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(1, 192, 116)',
+      borderColor: '',
+      borderWidth: 0,
+      color: '#fff'
+    }
+  }
+  

web/src/customThemes/index.js

@@ -6,6 +6,10 @@ import seaBlueLine from './seaBlueLine'
 import neonLamp from './neonLamp'
 import darkNightLceBlade from './darkNightLceBlade'
 import morandi from './morandi'
+import classic5 from './classic5'
+import dark3 from './dark3'
+import dark4 from './dark4'
+import cactus from './cactus'
 
 export default [
     {
@@ -55,5 +59,29 @@ export default [
         value: 'morandi',
         theme: morandi,
         dark: false
+    },
+    {
+        name: '脑图经典5',
+        value: 'classic5',
+        theme: classic5,
+        dark: false
+    },
+    {
+        name: '暗色3',
+        value: 'dark3',
+        theme: dark3,
+        dark: true
+    },
+    {
+        name: '暗色4',
+        value: 'dark4',
+        theme: dark4,
+        dark: true
+    },
+    {
+        name: '仙人掌',
+        value: 'cactus',
+        theme: cactus,
+        dark: false
     }
 ]

web/src/pages/Doc/en/constructor/index.md

@@ -1,6 +1,6 @@
 # Constructor
 
-## Basic use
+## Basic use 
 
 ```html
 <div id="mindMapContainer"></div>