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

2026-02-17 22:08:25 +08:00 · 2023-08-17 10:00:33 +08:00
parent ebc99e97af
commit 8d1e9fa8e9
4 changed files with 187 additions and 9 deletions
--- a/web/src/config/index.js
+++ b/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
 }
--- a/web/src/config/zh.js
+++ b/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格式'
  }
-]
+]
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/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>
--- a/web/src/pages/Edit/components/Style.vue
+++ b/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>