Merge branch 'feature' into main

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

@@ -137,7 +137,7 @@ export const themeList = [
   {
     name: '简约黑',
     value: 'simpleBlack',
-    dark: true
+    dark: false
   },
   {
     name: '课程绿',

web/src/config/constant.js

@@ -44,5 +44,13 @@ export const themeMap = {
     autumn: require('../assets/img/autumn.jpg'),
     avocado: require('../assets/img/avocado.jpg'),
     orangeJuice: require('../assets/img/orangeJuice.jpg'),
+    oreo: require('../assets/img/oreo.jpg'),
+    shallowSea: require('../assets/img/shallowSea.jpg'),
+    lemonBubbles: require('../assets/img/lemonBubbles.jpg'),
+    rose: require('../assets/img/rose.jpg'),
+    seaBlueLine: require('../assets/img/seaBlueLine.jpg'),
+    neonLamp: require('../assets/img/neonLamp.jpg'),
+    darkNightLceBlade: require('../assets/img/darkNightLceBlade.jpg'),
+    morandi: require('../assets/img/morandi.jpg'),
 }
   

web/src/customThemes/darkNightLceBlade.js

@@ -0,0 +1,59 @@
+// 暗夜冰刃
+export default {
+    backgroundColor: 'rgb(0, 21, 21)',
+    // 连线的颜色
+    lineColor: 'rgb(0, 139, 146)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgba(2, 167, 240, 0.5)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(255, 255, 255)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(255, 255, 255)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(0, 243, 255)',
+      color: 'rgb(0, 21, 21)',
+      borderColor: '#fff',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'parallelogram',
+      active: {
+        borderColor: 'rgba(2, 167, 240, 0.5)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(0, 21, 21)',
+      color: '#fff',
+      borderColor: '#fff',
+      borderWidth: 3,
+      fontSize: 18,
+      shape: 'diamond',
+      active: {
+        borderColor: 'rgba(2, 167, 240, 0.5)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: '#fff',
+      active: {
+        borderColor: 'rgba(2, 167, 240, 0.5)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: 'rgb(0, 117, 255)',
+      borderWidth: 2,
+      color: 'rgb(0, 21, 21)',
+      active: {
+        borderColor: 'rgb(0, 243, 255)'
+      }
+    }
+  }
+  

web/src/customThemes/index.js

@@ -1,9 +1,59 @@
-import simpleBlack from './simpleBlack'
+import oreo from './oreo'
+import shallowSea from './shallowSea'
+import lemonBubbles from './lemonBubbles'
+import rose from './rose'
+import seaBlueLine from './seaBlueLine'
+import neonLamp from './neonLamp'
+import darkNightLceBlade from './darkNightLceBlade'
+import morandi from './morandi'
 
 export default [
     {
-        name: '简约黑',
-        value: 'simpleBlack',
-        theme: simpleBlack
+        name: '奥利奥',
+        value: 'oreo',
+        theme: oreo,
+        dark: false
+    },
+    {
+        name: '浅海',
+        value: 'shallowSea',
+        theme: shallowSea,
+        dark: false
+    },
+    {
+        name: '柠檬气泡',
+        value: 'lemonBubbles',
+        theme: lemonBubbles,
+        dark: false
+    },
+    {
+        name: '玫瑰',
+        value: 'rose',
+        theme: rose,
+        dark: false
+    },
+    {
+        name: '海蓝线',
+        value: 'seaBlueLine',
+        theme: seaBlueLine,
+        dark: false
+    },
+    {
+        name: '霓虹灯',
+        value: 'neonLamp',
+        theme: neonLamp,
+        dark: true
+    },
+    {
+        name: '暗夜冰刃',
+        value: 'darkNightLceBlade',
+        theme: darkNightLceBlade,
+        dark: true
+    },
+    {
+        name: '莫兰迪',
+        value: 'morandi',
+        theme: morandi,
+        dark: false
     }
 ]

web/src/customThemes/lemonBubbles.js

@@ -0,0 +1,55 @@
+// 柠檬气泡
+export default {
+    backgroundColor: 'rgb(236, 254, 255)',
+    // 连线的颜色
+    lineColor: 'rgb(51, 51, 51)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(51, 51, 51)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(39, 222, 232)',
+      color: 'rgb(26, 26, 26)',
+      borderColor: 'rgb(26, 26, 26)',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(235, 255, 187)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(235, 255, 187)',
+      color: 'rgb(0, 0, 0)',
+      borderColor: 'rgb(51, 51, 51)',
+      borderWidth: 3,
+      fontSize: 18,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(39, 222, 232)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(0, 0, 0)',
+      active: {
+        borderColor: 'rgb(39, 222, 232)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: 'rgb(26, 26, 26)',
+      borderWidth: 2,
+      color: 'rgb(26, 26, 26)',
+      active: {
+        borderColor: 'rgb(39, 222, 232)'
+      }
+    }
+  }
+  

web/src/customThemes/morandi.js

@@ -0,0 +1,59 @@
+// 莫兰迪
+export default {
+    backgroundColor: 'rgb(252, 245, 241)',
+    // 连线的颜色
+    lineColor: 'rgb(144, 114, 110)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(128, 154, 151)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(166, 124, 106)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(166, 124, 106)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(207, 121, 105)',
+      color: '#fff',
+      borderColor: 'rgb(207, 121, 105)',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(172, 202, 199)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(239, 210, 207)',
+      color: 'rgb(144, 79, 68)',
+      borderColor: 'rgb(222, 186, 183)',
+      borderWidth: 3,
+      fontSize: 18,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(172, 202, 199)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(131, 90, 64)',
+      active: {
+        borderColor: 'rgb(172, 202, 199)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: 'rgb(172, 202, 199)',
+      borderColor: 'rgb(172, 202, 199)',
+      borderWidth: 2,
+      color: 'rgb(91, 102, 97)',
+      active: {
+        borderColor: 'rgb(207, 121, 105)'
+      }
+    }
+  }
+  

web/src/customThemes/neonLamp.js

@@ -0,0 +1,58 @@
+// 霓虹灯
+export default {
+    backgroundColor: 'rgb(17, 17, 84)',
+    // 连线的颜色
+    lineColor: 'rgb(255, 0, 214)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 181, 0)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(255, 255, 255)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(255, 255, 255)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(251, 233, 248)',
+      color: 'rgb(208, 5, 176)',
+      borderColor: 'rgb(255, 0, 214)',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(255, 181, 0)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'transparent',
+      color: 'rgb(248, 177, 237)',
+      borderColor: '',
+      borderWidth: 3,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(255, 181, 0)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: '#fff',
+      active: {
+        borderColor: 'rgb(255, 181, 0)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: 'rgb(255, 181, 0)',
+      borderWidth: 2,
+      color: 'rgb(17, 17, 84)',
+      active: {
+        borderColor: 'rgb(255, 0, 214)'
+      }
+    }
+  }
+  

web/src/customThemes/oreo.js

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

web/src/customThemes/rose.js

@@ -0,0 +1,55 @@
+// 玫瑰
+export default {
+    backgroundColor: 'rgb(255, 251, 231)',
+    // 连线的颜色
+    lineColor: 'rgb(110, 165, 79)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(136, 100, 0)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(254, 92, 92)',
+      color: '#fff',
+      borderColor: 'rgb(18, 187, 55)',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(136, 100, 0)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(209, 237, 176)',
+      color: 'rgb(85, 136, 55)',
+      borderColor: '',
+      borderWidth: 3,
+      fontSize: 18,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(254, 92, 92)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(26, 26, 26)',
+      active: {
+        borderColor: 'rgb(209, 237, 176)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: 'rgb(136, 100, 0)',
+      borderWidth: 2,
+      color: 'rgb(136, 100, 0)',
+      active: {
+        borderColor: 'rgb(254, 92, 92)'
+      }
+    }
+  }
+  

web/src/customThemes/seaBlueLine.js

@@ -0,0 +1,55 @@
+// 海蓝线
+export default {
+    backgroundColor: 'rgb(231, 245, 255)',
+    // 连线的颜色
+    lineColor: 'rgb(96, 189, 255)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(0, 155, 255)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(96, 189, 255)',
+      color: '#fff',
+      borderColor: '#fff',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(0, 155, 255)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: '#fff',
+      color: 'rgb(0, 149, 255)',
+      borderColor: '',
+      borderWidth: 3,
+      fontSize: 18,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(96, 189, 255)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(0, 66, 157)',
+      active: {
+        borderColor: 'rgb(96, 189, 255)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: 'rgb(0, 155, 255)',
+      borderWidth: 2,
+      color: 'rgb(0, 155, 255)',
+      active: {
+        borderColor: 'rgba(2, 167, 240, 0.5)'
+      }
+    }
+  }
+  

web/src/customThemes/shallowSea.js

@@ -0,0 +1,54 @@
+// 浅海
+export default {
+    backgroundColor: 'rgb(187, 241, 250)',
+    // 连线的颜色
+    lineColor: 'rgb(74, 139, 170)',
+    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 168, 101)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(51, 149, 255)',
+      color: '#fff',
+      borderColor: 'rgb(51, 149, 255)',
+      borderWidth: 3,
+      fontSize: 24,
+      shape: 'roundedRectangle',
+      active: {
+        borderColor: 'rgb(255, 168, 101)',
+      }
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(74, 139, 170)',
+      color: '#fff',
+      borderColor: '',
+      borderWidth: 3,
+      fontSize: 18,
+      active: {
+        borderColor: 'rgb(255, 168, 101)',
+      }
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(0, 0, 0)',
+      active: {
+        borderColor: 'rgb(255, 168, 101)'
+      }
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: 'rgb(255, 168, 101)',
+      borderWidth: 2,
+      color: '#000',
+      active: {
+        borderColor: 'rgb(51, 149, 255)'
+      }
+    }
+  }
+  

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

@@ -83,9 +83,9 @@ MindMap
   .usePlugin(SearchPlugin)
 
 // 注册自定义主题
-// customThemeList.forEach((item) => {
-//   MindMap.defineTheme(item.value, item.theme)
-// })
+customThemeList.forEach((item) => {
+  MindMap.defineTheme(item.value, item.theme)
+})
 
 /**
  * @Author: 王林

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

@@ -1,9 +1,12 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('theme.title')">
     <div class="themeList" :class="{ isDark: isDark }">
+      <el-tabs v-model="activeName">
+          <el-tab-pane v-for="group in groupList" :key="group.name" :label="group.name" :name="group.name"></el-tab-pane>
+      </el-tabs>
       <div
         class="themeItem"
-        v-for="item in themeList"
+        v-for="item in currentList"
         :key="item.value"
         @click="useTheme(item)"
         :class="{ active: item.value === theme }"
@@ -42,13 +45,21 @@ export default {
   },
   data() {
     return {
-      themeList: [...themeList].reverse(), // ...customThemeList
+      themeList: [...themeList, ...customThemeList].reverse(),
       themeMap,
-      theme: ''
+      theme: '',
+      activeName: '',
+      groupList: []
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark'])
+    ...mapState(['activeSidebar', 'isDark']),
+
+    currentList() {
+      return this.groupList.find((item) => {
+        return item.name === this.activeName
+      }).list
+    }
   },
   watch: {
     activeSidebar(val) {
@@ -62,12 +73,43 @@ export default {
     }
   },
   created() {
+    this.initGroup()
     this.theme = this.mindMap.getTheme()
     this.handleDark()
   },
   methods: {
     ...mapMutations(['setIsDark']),
 
+    initGroup() {
+      let baiduThemes = ['default', 'skyGreen', 'classic2', 'classic3', 'classicGreen', 'classicBlue', 'blueSky', 'brainImpairedPink', 'earthYellow', 'freshGreen', 'freshRed', 'romanticPurple', 'pinkGrape', 'mint']
+      let baiduList = []
+      let classicsList = []
+      this.themeList.forEach((item) => {
+        if (baiduThemes.includes(item.value)) {
+          baiduList.push(item)
+        } else if (!item.dark) {
+          classicsList.push(item)
+        }
+      })
+      this.groupList = [
+        {
+          name: '经典',
+          list: classicsList
+        },
+        {
+          name: '深色',
+          list: this.themeList.filter((item) => {
+            return item.dark
+          })
+        },
+        {
+          name: '朴素',
+          list: baiduList
+        }
+      ]
+      this.activeName = this.groupList[0].name
+    },
+
     useTheme(theme) {
       this.theme = theme.value
       this.handleDark()
@@ -102,7 +144,7 @@ export default {
     },
 
     handleDark() {
-      let target = themeList.find(item => {
+      let target = this.themeList.find(item => {
         return item.value === this.theme
       })
       this.setIsDark(target.dark)
@@ -114,6 +156,7 @@ export default {
 <style lang="less" scoped>
 .themeList {
   padding: 20px;
+  padding-top: 0;
 
   &.isDark {
     .name {