Demo：侧边栏涉及图形的选项增加可视化效果

web/src/config/index.js

@@ -17,7 +17,9 @@ import {
   shapeList as shapeListZh,
   sidebarTriggerList as sidebarTriggerListZh,
   backgroundSizeList as backgroundSizeListZh,
-  downTypeList as downTypeListZh
+  downTypeList as downTypeListZh,
+  shapeListMap as shapeListMapZh,
+  lineStyleMap as lineStyleMapZh
 } from './zh'
 import {
   fontFamilyList as fontFamilyListEn,
@@ -48,6 +50,11 @@ const lineStyleList = {
   en: lineStyleListEn
 }
 
+const lineStyleMap = {
+  zh: lineStyleMapZh,
+  en: lineStyleMapZh
+}
+
 const rootLineKeepSameInCurveList = {
   zh: rootLineKeepSameInCurveListZh,
   en: rootLineKeepSameInCurveListEn
@@ -78,6 +85,11 @@ const shapeList = {
   en: shapeListEn
 }
 
+const shapeListMap = {
+  zh: shapeListMapZh,
+  en: shapeListMapZh
+}
+
 const sidebarTriggerList = {
   zh: sidebarTriggerListZh,
   en: sidebarTriggerListEn
@@ -100,12 +112,14 @@ export {
   fontFamilyList,
   borderDasharrayList,
   lineStyleList,
+  lineStyleMap,
   rootLineKeepSameInCurveList,
   backgroundRepeatList,
   backgroundPositionList,
   backgroundSizeList,
   shortcutKeyList,
   shapeList,
+  shapeListMap,
   sidebarTriggerList,
   downTypeList
 }

web/src/config/zh.js

@@ -142,6 +142,12 @@ export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 // 线宽
 export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
+export const lineStyleMap = {
+  straight: `<svg width="60" height="26"><path d="M18,14L30,14L30,5L42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14L30,23L42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`,
+  curve: `<svg width="60" height="26"><path d="M18,14L30,14A12,-9 0 0 1 42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14A12,9 0 0 0 42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`,
+  direct: `<svg width="60" height="26"><path d="M18,14L30,14L42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14L42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`
+}
+
 // 连线风格
 export const lineStyleList = [
   {
@@ -379,6 +385,22 @@ export const shortcutKeyList = [
   }
 ]
 
+export const shapeListMap = {
+  rectangle: 'M 4 12 L 4 3 L 56 3 L 56 21 L 4 21 L 4 12 Z',
+  diamond: 'M 4 12 L 30 3 L 56 12 L 30 21 L 4 12 Z',
+  parallelogram: 'M 10 3 L 56 3 L 50 21 L 4 21 L 10 3 Z',
+  roundedRectangle:
+    'M 13 3 L 47 3 A 9 9 0, 0 1 47 21 L 13 21 A 9 9 0, 0 1 13 3 Z',
+  octagonalRectangle:
+    'M 4 12 L 4 9 L 10 3 L 50 3 L 56 9 L 56 15 L 50 21 L 10 21 L 4 15 L 4 12 Z',
+  outerTriangularRectangle:
+    'M 4 12 L 10 3 L 50 3 L 56 12 L 50 21 L 10 21 L 4 12 Z',
+  innerTriangularRectangle:
+    'M 10 12 L 4 3 L 56 3 L 50 12 L 56 21 L 4 21 L 10 12 Z',
+  ellipse: 'M 4 12 A 26 9 0, 1, 0 30 3 A 26 9 0, 0, 0 4 12 Z',
+  circle: 'M 21 12 A 9 9 0, 1, 0 30 3 A 9 9 0, 0, 0 21 12 Z'
+}
+
 // 形状列表
 export const shapeList = [
   {
@@ -509,4 +531,4 @@ export const downTypeList = [
     icon: 'iconxmind',
     desc: 'XMind格式'
   }
-]
+]

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

@@ -137,6 +137,12 @@
               :label="item"
               :value="item"
             >
+              <span
+                v-if="item > 0"
+                class="borderLine"
+                :class="{ isDark: isDark }"
+                :style="{ height: item + 'px' }"
+              ></span>
             </el-option>
           </el-select>
         </div>
@@ -160,6 +166,12 @@
               :key="item.value"
               :label="item.name"
               :value="item.value"
+              class="lineStyleOption"
+              :class="{
+                isDark: isDark,
+                isSelected: style.lineStyle === item.value
+              }"
+              v-html="lineStyleMap[item.value]"
             >
             </el-option>
           </el-select>
@@ -227,6 +239,12 @@
               :label="item"
               :value="item"
             >
+              <span
+                v-if="item > 0"
+                class="borderLine"
+                :class="{ isDark: isDark }"
+                :style="{ height: item + 'px' }"
+              ></span>
             </el-option>
           </el-select>
         </div>
@@ -271,6 +289,12 @@
               :label="item"
               :value="item"
             >
+              <span
+                v-if="item > 0"
+                class="borderLine"
+                :class="{ isDark: isDark }"
+                :style="{ height: item + 'px' }"
+              ></span>
             </el-option>
           </el-select>
         </div>
@@ -317,6 +341,12 @@
               :label="item"
               :value="item"
             >
+              <span
+                v-if="item > 0"
+                class="borderLine"
+                :class="{ isDark: isDark }"
+                :style="{ height: item + 'px' }"
+              ></span>
             </el-option>
           </el-select>
         </div>
@@ -738,7 +768,8 @@ import {
   backgroundSizeList,
   fontFamilyList,
   fontSizeList,
-  rootLineKeepSameInCurveList
+  rootLineKeepSameInCurveList,
+  lineStyleMap
 } from '@/config'
 import ImgUpload from '@/components/ImgUpload'
 import { storeConfig } from '@/api'
@@ -845,6 +876,9 @@ export default {
     },
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
+    },
+    lineStyleMap() {
+      return lineStyleMap[this.$i18n.locale] || lineStyleMap.zh
     }
   },
   watch: {
@@ -1158,4 +1192,47 @@ export default {
     }
   }
 }
+
+.borderLine {
+  display: inline-block;
+  width: 100%;
+  background-color: #000;
+
+  &.isDark {
+    background-color: #fff;
+  }
+}
+</style>
+<style lang="less">
+.el-select-dropdown__item.selected {
+  .borderLine {
+    background-color: #409eff;
+  }
+}
+
+.lineStyleOption {
+  &.isDark {
+    svg {
+      path {
+        stroke: #fff;
+      }
+    }
+  }
+
+  &.isSelected {
+    svg {
+      path {
+        stroke: #409eff;
+      }
+    }
+  }
+
+  svg {
+    margin-top: 4px;
+
+    path {
+      stroke: #000;
+    }
+  }
+}
 </style>

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

@@ -1,6 +1,10 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('style.title')">
-    <div class="styleBox" :class="{ isDark: isDark }" v-if="activeNodes.length > 0">
+    <div
+      class="styleBox"
+      :class="{ isDark: isDark }"
+      v-if="activeNodes.length > 0"
+    >
       <el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
         <el-tab-pane :label="$t('style.normal')" name="normal"></el-tab-pane>
         <el-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
@@ -196,6 +200,17 @@
                 :label="item.name"
                 :value="item.value"
               >
+                <svg width="120" height="34">
+                  <line
+                    x1="10"
+                    y1="17"
+                    x2="110"
+                    y2="17"
+                    stroke-width="2"
+                    :stroke="style.borderDasharray === item.value ? '#409eff' : isDark ? '#fff' : '#000'"
+                    :stroke-dasharray="item.value"
+                  ></line>
+                </svg>
               </el-option>
             </el-select>
           </div>
@@ -217,6 +232,12 @@
                 :label="item"
                 :value="item"
               >
+                <span
+                  v-if="item > 0"
+                  class="borderLine"
+                  :class="{ isDark: isDark }"
+                  :style="{ height: item + 'px' }"
+                ></span>
               </el-option>
             </el-select>
           </div>
@@ -280,6 +301,14 @@
                 :label="item.name"
                 :value="item.value"
               >
+                <svg width="60" height="26" style="margin-top: 5px">
+                  <path
+                    :d="shapeListMap[item.value]"
+                    fill="none"
+                    :stroke="style.shape === item.value ? '#409eff' : isDark ? '#fff' : '#000'"
+                    stroke-width="2"
+                  ></path>
+                </svg>
               </el-option>
             </el-select>
           </div>
@@ -320,6 +349,17 @@
                 :label="item.name"
                 :value="item.value"
               >
+                <svg width="120" height="34">
+                  <line
+                    x1="10"
+                    y1="17"
+                    x2="110"
+                    y2="17"
+                    stroke-width="2"
+                    :stroke="style.lineDasharray === item.value ? '#409eff' : isDark ? '#fff' : '#000'"
+                    :stroke-dasharray="item.value"
+                  ></line>
+                </svg>
               </el-option>
             </el-select>
           </div>
@@ -341,6 +381,12 @@
                 :label="item"
                 :value="item"
               >
+                <span
+                  v-if="item > 0"
+                  class="borderLine"
+                  :class="{ isDark: isDark }"
+                  :style="{ height: item + 'px' }"
+                ></span>
               </el-option>
             </el-select>
           </div>
@@ -388,7 +434,8 @@ import {
   borderDasharrayList,
   borderRadiusList,
   lineHeightList,
-  shapeList
+  shapeList,
+  shapeListMap
 } from '@/config'
 import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
 import { mapState } from 'vuex'
@@ -407,10 +454,8 @@ export default {
   data() {
     return {
       supportActiveStyle,
-
       fontSizeList,
       borderWidthList,
-
       borderRadiusList,
       lineHeightList,
       activeNodes: [],
@@ -448,7 +493,10 @@ export default {
     },
     shapeList() {
       return shapeList[this.$i18n.locale] || shapeList.zh
-    }
+    },
+    shapeListMap() {
+      return shapeListMap[this.$i18n.locale] || shapeListMap.zh
+    },
   },
   watch: {
     activeSidebar(val) {
@@ -635,7 +683,7 @@ export default {
       .row {
         .rowItem {
           .name {
-            color: hsla(0,0%,100%,.6);
+            color: hsla(0, 0%, 100%, 0.6);
           }
         }
 
@@ -764,4 +812,21 @@ export default {
     }
   }
 }
+
+.borderLine {
+  display: inline-block;
+  width: 100%;
+  background-color: #000;
+
+  &.isDark {
+    background-color: #fff;
+  }
+}
 </style>
+<style lang="less">
+.el-select-dropdown__item.selected {
+  .borderLine {
+    background-color: #409eff;
+  }
+}
+</style>