Demo:支持扩展侧边主题列表

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

@@ -102,7 +102,8 @@ import Checkbox from 'simple-mind-map-plugin-checkbox'
 import LineFlow from 'simple-mind-map-plugin-lineflow'
 import Momentum from 'simple-mind-map-plugin-momentum'
 import RightFishbone from 'simple-mind-map-plugin-right-fishbone'
-// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum simple-mind-map-plugin-right-fishbone
+import MoreThemes from 'simple-mind-map-plugin-more-themes'
+// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum simple-mind-map-plugin-right-fishbone simple-mind-map-plugin-more-themes
 import OutlineSidebar from './OutlineSidebar.vue'
 import Style from './Style.vue'
 import BaseStyle from './BaseStyle.vue'
@@ -171,6 +172,10 @@ MindMap.usePlugin(MiniMap)
 
 // 注册主题
 Themes.init(MindMap)
+// 扩展主题列表
+if (typeof MoreThemes !== 'undefined') {
+  MoreThemes.init(MindMap)
+}
 
 export default {
   components: {
@@ -697,6 +702,24 @@ export default {
         this.mindMap.addPlugin(LineFlow)
         this.$store.commit('setSupportLineFlow', true)
       }
+      // 扩展侧边主题列表
+      if (typeof MoreThemes !== 'undefined') {
+        const extendThemeGroupList = [
+          {
+            name: '带背景', // 主题组名称
+            // 主题列表
+            list: [...MoreThemes.lightList, ...MoreThemes.darkList].map(
+              item => {
+                return {
+                  ...item,
+                  img: MoreThemes.themeImgMap[item.value]
+                }
+              }
+            )
+          }
+        ]
+        this.$store.commit('setExtendThemeGroupList', extendThemeGroupList)
+      }
     },
 
     // url中是否存在要打开的文件

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

@@ -17,7 +17,7 @@
         :class="{ active: item.value === theme }"
       >
         <div class="imgBox">
-          <img :src="themeImgMap[item.value]" alt="" />
+          <img :src="item.img || themeImgMap[item.value]" alt="" />
         </div>
         <div class="name">{{ item.name }}</div>
       </div>
@@ -59,15 +59,20 @@ export default {
       themeImgMap,
       theme: '',
       activeName: '',
-      groupList: []
+      defaultGroupList: []
     }
   },
   computed: {
     ...mapState({
       isDark: state => state.localConfig.isDark,
-      activeSidebar: state => state.activeSidebar
+      activeSidebar: state => state.activeSidebar,
+      extendThemeGroupList: state => state.extendThemeGroupList
     }),
 
+    groupList() {
+      return [...this.defaultGroupList, ...this.extendThemeGroupList]
+    },
+
     currentList() {
       return this.groupList.find(item => {
         return item.name === this.activeName
@@ -101,7 +106,7 @@ export default {
     },
 
     initGroup() {
-      let baiduThemes = [
+      const baiduThemes = [
         'default',
         'skyGreen',
         'classic2',
@@ -117,8 +122,8 @@ export default {
         'pinkGrape',
         'mint'
       ]
-      let baiduList = []
-      let classicsList = []
+      const baiduList = []
+      const classicsList = []
       this.themeList.forEach(item => {
         if (baiduThemes.includes(item.value)) {
           baiduList.push(item)
@@ -126,7 +131,7 @@ export default {
           classicsList.push(item)
         }
       })
-      this.groupList = [
+      this.defaultGroupList = [
         {
           name: this.$t('theme.classics'),
           list: classicsList
@@ -142,7 +147,7 @@ export default {
           list: baiduList
         }
       ]
-      this.activeName = this.groupList[0].name
+      this.activeName = this.defaultGroupList[0].name
     },
 
     useTheme(theme) {
@@ -184,7 +189,11 @@ export default {
     },
 
     handleDark() {
-      let target = this.themeList.find(item => {
+      const extendThemeList = []
+      this.extendThemeGroupList.forEach(group => {
+        extendThemeList.push(...group.list)
+      })
+      let target = [...this.themeList, ...extendThemeList].find(item => {
         return item.value === this.theme
       })
       this.setLocalConfig({
@@ -213,7 +222,9 @@ export default {
     margin-bottom: 20px;
     padding-bottom: 20px;
     transition: all 0.2s;
-    border: 1px solid transparent;
+    border: 3px solid transparent;
+    border-radius: 5px;
+    overflow: hidden;
 
     &:last-of-type {
       border: none;
@@ -225,7 +236,7 @@ export default {
     }
 
     &.active {
-      border: 1px solid #67c23a;
+      border: 3px solid rgb(154, 198, 250);
     }
 
     .imgBox {

web/src/store.js

@@ -45,7 +45,9 @@ const store = new Vuex.Store({
       model: '',
       port: 3456,
       method: 'POST'
-    }
+    },
+    // 扩展主题列表
+    extendThemeGroupList: []
   },
   mutations: {
     // 设置操作本地文件标志位
@@ -137,6 +139,11 @@ const store = new Vuex.Store({
     // 设置树节点拖拽
     setIsDragOutlineTreeNode(state, data) {
       state.isDragOutlineTreeNode = data
+    },
+
+    // 扩展主题列表
+    setExtendThemeGroupList(state, data) {
+      state.extendThemeGroupList = data
     }
   },
   actions: {}