Demo：支持配置彩虹线条

web/src/config/constant.js

@@ -57,7 +57,7 @@ export const themeMap = {
   dark4: require('../assets/img/themes/dark4.jpg'),
   cactus: require('../assets/img/themes/cactus.jpg'),
   classic6: require('../assets/img/themes/classic6.jpg'),
-  classic7: require('../assets/img/themes/classic7.jpg'),
+  classic7: require('../assets/img/themes/classic7.jpg')
 }
 
 // 公式列表
@@ -111,3 +111,82 @@ export const supportRootLineKeepSameInCurveLayouts = [
   'logicalStructure',
   'mindMap'
 ]
+
+// 彩虹线条配置
+export const rainbowLinesOptions = [
+  {
+    value: 'close'
+  },
+  {
+    value: 'colors1',
+    list: [
+      'rgb(255, 213, 73)',
+      'rgb(255, 136, 126)',
+      'rgb(107, 225, 141)',
+      'rgb(151, 171, 255)',
+      'rgb(129, 220, 242)',
+      'rgb(255, 163, 125)',
+      'rgb(152, 132, 234)'
+    ]
+  },
+  {
+    value: 'colors2',
+    list: [
+      'rgb(248, 93, 93)',
+      'rgb(255, 151, 84)',
+      'rgb(255, 214, 69)',
+      'rgb(73, 205, 140)',
+      'rgb(64, 192, 255)',
+      'rgb(84, 110, 214)',
+      'rgb(164, 93, 220)'
+    ]
+  },
+  {
+    value: 'colors3',
+    list: [
+      'rgb(140, 240, 231)',
+      'rgb(74, 210, 255)',
+      'rgb(65, 168, 243)',
+      'rgb(49, 128, 205)',
+      'rgb(188, 226, 132)',
+      'rgb(113, 215, 123)',
+      'rgb(120, 191, 109)'
+    ]
+  },
+  {
+    value: 'colors4',
+    list: [
+      'rgb(169, 98, 99)',
+      'rgb(245, 125, 123)',
+      'rgb(254, 183, 168)',
+      'rgb(251, 218, 171)',
+      'rgb(138, 163, 181)',
+      'rgb(131, 127, 161)',
+      'rgb(84, 83, 140)'
+    ]
+  },
+  {
+    value: 'colors5',
+    list: [
+      'rgb(255, 229, 142)',
+      'rgb(254, 158, 41)',
+      'rgb(248, 119, 44)',
+      'rgb(232, 82, 80)',
+      'rgb(182, 66, 98)',
+      'rgb(99, 54, 99)',
+      'rgb(65, 40, 82)'
+    ]
+  },
+  {
+    value: 'colors6',
+    list: [
+      'rgb(171, 227, 209)',
+      'rgb(107, 201, 196)',
+      'rgb(55, 170, 169)',
+      'rgb(18, 135, 131)',
+      'rgb(74, 139, 166)',
+      'rgb(75, 105, 150)',
+      'rgb(57, 75, 133)'
+    ]
+  }
+]

web/src/config/zh.js

@@ -425,7 +425,7 @@ export const shortcutKeyList = [
         icon: 'icondodeparent',
         name: '上移一个层级',
         value: 'Shift + Tab'
-      },
+      }
     ]
   }
 ]
@@ -582,4 +582,4 @@ export const downTypeList = [
     icon: 'iconTXT',
     desc: '纯文本文件'
   }
-]
+]

web/src/lang/en_us.js

@@ -62,7 +62,9 @@ export default {
     isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
     rootLineStartPos: 'Root line start pos',
     center: 'Center',
-    right: 'Right'
+    right: 'Right',
+    rainbowLines: 'Rainbow lines',
+    notUseRainbowLines: 'Not use rainbow lines'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -62,7 +62,9 @@ export default {
     isUseHandDrawnLikeStyle: '是否开启手绘风格',
     rootLineStartPos: '根节点连线起始位置',
     center: '中心',
-    right: '右侧'
+    right: '右侧',
+    rainbowLines: '彩虹线条',
+    notUseRainbowLines: '不使用彩虹线条'
   },
   color: {
     moreColor: '更多颜色'

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

@@ -273,6 +273,50 @@
           >
         </div>
       </div>
+      <!-- 彩虹线条 -->
+      <div class="title noTop">{{ $t('baseStyle.rainbowLines') }}</div>
+      <div class="row">
+        <div class="rowItem">
+          <el-popover
+            placement="right"
+            trigger="click"
+            v-model="rainbowLinesPopoverVisible"
+          >
+            <div class="rainbowLinesOptionsBox" :class="{ isDark: isDark }">
+              <div
+                class="optionItem"
+                v-for="item in rainbowLinesOptions"
+                :key="item.value"
+              >
+                <div
+                  class="colorsBar"
+                  v-if="item.list"
+                  @click="updateRainbowLinesConfig(item)"
+                >
+                  <span
+                    class="colorItem"
+                    v-for="color in item.list"
+                    :style="{ backgroundColor: color }"
+                  ></span>
+                </div>
+                <span v-else @click="updateRainbowLinesConfig(item)">{{
+                  $t('baseStyle.notUseRainbowLines')
+                }}</span>
+              </div>
+            </div>
+            <div slot="reference" class="curRainbowLine">
+              <div class="colorsBar" v-if="curRainbowLineColorList">
+                <span
+                  class="colorItem"
+                  v-for="color in curRainbowLineColorList"
+                  :style="{ backgroundColor: color }"
+                ></span>
+              </div>
+              <span v-else>{{ $t('baseStyle.notUseRainbowLines') }}</span>
+            </div>
+          </el-popover>
+        </div>
+      </div>
       <!-- 概要连线 -->
       <div class="title noTop">{{ $t('baseStyle.lineOfOutline') }}</div>
       <div class="row">
@@ -914,7 +958,8 @@ import {
   supportLineStyleLayoutsMap,
   supportLineRadiusLayouts,
   supportNodeUseLineStyleLayouts,
-  supportRootLineKeepSameInCurveLayouts
+  supportRootLineKeepSameInCurveLayouts,
+  rainbowLinesOptions
 } from '@/config/constant'
 
 /**
@@ -940,6 +985,7 @@ export default {
   },
   data() {
     return {
+      rainbowLinesOptions,
       lineWidthList,
       fontSizeList,
       activeTab: 'color',
@@ -994,6 +1040,8 @@ export default {
           fontSize: 1
         }
       },
+      rainbowLinesPopoverVisible: false,
+      curRainbowLineColorList: null,
       updateWatermarkTimer: null,
       enableNodeRichText: true,
       localConfigs: {
@@ -1069,6 +1117,7 @@ export default {
         this.initStyle()
         this.initConfig()
         this.initWatermark()
+        this.initRainbowLines()
         this.currentLayout = this.mindMap.getLayout()
       } else {
         this.$refs.sidebar.show = false
@@ -1180,6 +1229,16 @@ export default {
       this.watermarkConfig.textStyle = { ...config.textStyle }
     },
 
+    // 初始化彩虹线条配置
+    initRainbowLines() {
+      const config = this.mindMap.getConfig('rainbowLinesConfig') || {}
+      this.curRainbowLineColorList = config.open
+        ? this.mindMap.rainbowLines
+          ? this.mindMap.rainbowLines.getColorsList()
+          : null
+        : null
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:27:32
@@ -1245,6 +1304,29 @@ export default {
       }, 300)
     },
 
+    // 更新彩虹线条配置
+    updateRainbowLinesConfig(item) {
+      this.rainbowLinesPopoverVisible = false
+      this.curRainbowLineColorList = item.list || null
+      this.data.config = this.data.config || {}
+      let newConfig = null
+      if (item.list) {
+        newConfig = {
+          open: true,
+          colorsList: item.list
+        }
+      } else {
+        newConfig = {
+          open: false
+        }
+      }
+      this.data.config.rainbowLinesConfig = newConfig
+      this.mindMap.rainbowLines.updateRainLinesConfig(newConfig)
+      storeConfig({
+        config: this.data.config
+      })
+    },
+
     // 设置margin
     updateMargin(type, value) {
       this.style[type] = value
@@ -1303,7 +1385,8 @@ export default {
 
     .row {
       .rowItem {
-        .name {
+        .name,
+        .curRainbowLine {
           color: hsla(0, 0%, 100%, 0.6);
         }
       }
@@ -1365,6 +1448,17 @@ export default {
         border-radius: 4px;
         cursor: pointer;
       }
+
+      .curRainbowLine {
+        height: 24px;
+        border: 1px solid #dcdfe6;
+        font-size: 12px;
+        width: 240px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
     }
 
     .styleBtn {
@@ -1437,4 +1531,43 @@ export default {
     }
   }
 }
+
+.rainbowLinesOptionsBox {
+  width: 200px;
+
+  &.isDark {
+    .optionItem {
+      color: hsla(0, 0%, 100%, 0.6);
+
+      &:hover {
+        background-color: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
+  .optionItem {
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+}
+
+.colorsBar {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+
+  .colorItem {
+    flex: 1;
+    height: 15px;
+  }
+}
 </style>

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

@@ -45,6 +45,7 @@ import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
 import Painter from 'simple-mind-map/src/plugins/Painter.js'
 import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
 import Formula from 'simple-mind-map/src/plugins/Formula.js'
+import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js'
 // 协同编辑插件
 // import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
 // 手绘风格插件，该插件为付费插件，详情请查看开发文档
@@ -98,6 +99,7 @@ MindMap.usePlugin(MiniMap)
   .usePlugin(SearchPlugin)
   .usePlugin(Painter)
   .usePlugin(Formula)
+  .usePlugin(RainbowLines)
 // .usePlugin(Cooperate) // 协同插件
 
 // 注册自定义主题