Demo：1.基础样式中一些仅支持部分结构的配置根据当前结构进行显示和隐藏。2.导入文件时自动隐藏侧边栏。3.新增连线圆角的配置

2026-02-21 10:27:44 +08:00 · 2024-01-12 10:23:20 +08:00 · 2024-01-12 10:23:20 +08:00 · 74b1a082fe
commit 74b1a082fe
parent ac930daa11
7 changed files with 133 additions and 22 deletions
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@ -294,6 +294,7 @@ class MindMap {
    if (!notRender) {
      this.render(null, CONSTANTS.CHANGE_LAYOUT)
    }
+    this.emit('layout_change', layout)
  }

  //  执行命令
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@ -17,10 +17,10 @@ export default {
  // 连线样式
  lineDasharray: 'none',
  // 连线风格
-  lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
-  // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型
+  lineStyle: 'straight', // 曲线（curve）【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线（straight）、直连（direct）【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】
+  // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅支持logicalStructure、mindMap两种结构
  rootLineKeepSameInCurve: true,
-  // 直线连接时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
+  // 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
  lineRadius: 5,
  // 连线尾部是否显示标记，目前只支持箭头
  showLineMarker: false,
@ -58,7 +58,7 @@ export default {
  backgroundPosition: 'center center',
  // 设置背景图片大小
  backgroundSize: 'cover',
-  // 节点使用横线样式
+  // 节点使用只有底边横线的样式，仅支持logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构
  nodeUseLineStyle: false,
  // 根节点样式
  root: {
@ -178,6 +178,7 @@ const nodeSizeIndependenceList = [
  'rootLineKeepSameInCurve',
  'showLineMarker',
  'gradientStyle',
+  'lineRadius',
  'startColor',
  'endColor'
 ]
--- a/web/src/config/constant.js
+++ b/web/src/config/constant.js
@ -81,3 +81,31 @@ export const formulaList = [
  '\\begin{matrix}x & y \\\\z & v\\end{matrix}',
  '\\begin{cases}3x + 5y +  z \\\\7x - 2y + 4z \\\\-6x + 3y + 2z\\end{cases}'
 ]
+
+export const supportLineStyleLayoutsMap = {
+  curve: ['logicalStructure', 'mindMap', 'verticalTimeline'],
+  direct: [
+    'logicalStructure',
+    'mindMap',
+    'organizationStructure',
+    'verticalTimeline'
+  ]
+}
+
+export const supportLineRadiusLayouts = [
+  'logicalStructure',
+  'mindMap',
+  'verticalTimeline'
+]
+
+export const supportNodeUseLineStyleLayouts = [
+  'logicalStructure',
+  'mindMap',
+  'catalogOrganization',
+  'organizationStructure'
+]
+
+export const supportRootLineKeepSameInCurveLayouts = [
+  'logicalStructure',
+  'mindMap'
+]
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@ -10,6 +10,7 @@ export default {
    line: 'Line',
    width: 'Width',
    style: 'Style',
+    lineRadius: 'Radius',
    lineOfOutline: 'Line of outline',
    showArrow: 'Is show arrow',
    nodePadding: 'Node padding',
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@ -10,6 +10,7 @@ export default {
    line: '连线',
    width: '粗细',
    style: '风格',
+    lineRadius: '圆角大小',
    lineOfOutline: '概要的连线',
    showArrow: '是否显示箭头',
    nodePadding: '节点内边距',
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@ -148,7 +148,7 @@
        </div>
      </div>
      <div class="row">
-        <div class="rowItem">
+        <div class="rowItem" v-if="lineStyleListShow.length > 1">
          <span class="name">{{ $t('baseStyle.style') }}</span>
          <el-select
            size="mini"
@ -162,7 +162,7 @@
            "
          >
            <el-option
-              v-for="item in lineStyleList"
+              v-for="item in lineStyleListShow"
              :key="item.value"
              :label="item.name"
              :value="item.value"
@ -176,7 +176,12 @@
            </el-option>
          </el-select>
        </div>
-        <div class="rowItem" v-if="style.lineStyle === 'curve'">
+        <div
+          class="rowItem"
+          v-if="
+            style.lineStyle === 'curve' && showRootLineKeepSameInCurveLayouts
+          "
+        >
          <span class="name">{{ $t('baseStyle.rootStyle') }}</span>
          <el-select
            size="mini"
@ -198,6 +203,28 @@
            </el-option>
          </el-select>
        </div>
+        <div class="rowItem" v-if="showLineRadius">
+          <span class="name">{{ $t('baseStyle.lineRadius') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.lineRadius"
+            placeholder=""
+            @change="
+              value => {
+                update('lineRadius', value)
+              }
+            "
+          >
+            <el-option
+              v-for="item in [0, 2, 5, 7, 10, 12, 15]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
      </div>
      <div class="row">
        <div class="rowItem">
@ -426,20 +453,22 @@
        </div>
      </div>
      <!-- 节点边框风格 -->
-      <div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="style.nodeUseLineStyle"
-            @change="
-              value => {
-                update('nodeUseLineStyle', value)
-              }
-            "
-            >{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox
-          >
+      <template v-if="showNodeUseLineStyle">
+        <div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
+        <div class="row">
+          <div class="rowItem">
+            <el-checkbox
+              v-model="style.nodeUseLineStyle"
+              @change="
+                value => {
+                  update('nodeUseLineStyle', value)
+                }
+              "
+              >{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox
+            >
+          </div>
        </div>
-      </div>
+      </template>
      <!-- 内边距 -->
      <div class="title noTop">{{ $t('baseStyle.nodePadding') }}</div>
      <div class="row">
@ -837,6 +866,12 @@ import {
 import ImgUpload from '@/components/ImgUpload'
 import { storeConfig } from '@/api'
 import { mapState, mapMutations } from 'vuex'
+import {
+  supportLineStyleLayoutsMap,
+  supportLineRadiusLayouts,
+  supportNodeUseLineStyleLayouts,
+  supportRootLineKeepSameInCurveLayouts
+} from '@/config/constant'

 /**
 * @Author: 王林
@ -872,6 +907,7 @@ export default {
        lineStyle: '',
        showLineMarker: '',
        rootLineKeepSameInCurve: '',
+        lineRadius: 0,
        generalizationLineWidth: '',
        generalizationLineColor: '',
        associativeLineColor: '',
@ -917,12 +953,12 @@ export default {
      enableNodeRichText: true,
      localConfigs: {
        isShowScrollbar: false
-      }
+      },
+      currentLayout: '' // 当前结构
    }
  },
  computed: {
    ...mapState(['activeSidebar', 'localConfig', 'isDark']),
-
    lineStyleList() {
      return lineStyleList[this.$i18n.locale] || lineStyleList.zh
    },
@ -948,6 +984,32 @@ export default {
    },
    lineStyleMap() {
      return lineStyleMap[this.$i18n.locale] || lineStyleMap.zh
+    },
+    showNodeUseLineStyle() {
+      return supportNodeUseLineStyleLayouts.includes(this.currentLayout)
+    },
+    showLineRadius() {
+      return (
+        this.style.lineStyle === 'straight' &&
+        supportLineRadiusLayouts.includes(this.currentLayout)
+      )
+    },
+    lineStyleListShow() {
+      const res = []
+      this.lineStyleList.forEach(item => {
+        const list = supportLineStyleLayoutsMap[item.value]
+        if (list) {
+          if (list.includes(this.currentLayout)) {
+            res.push(item)
+          }
+        } else {
+          res.push(item)
+        }
+      })
+      return res
+    },
+    showRootLineKeepSameInCurveLayouts() {
+      return supportRootLineKeepSameInCurveLayouts.includes(this.currentLayout)
    }
  },
  watch: {
@ -957,9 +1019,21 @@ export default {
        this.initStyle()
        this.initConfig()
        this.initWatermark()
+        this.currentLayout = this.mindMap.getLayout()
      } else {
        this.$refs.sidebar.show = false
      }
+    },
+    lineStyleListShow: {
+      deep: true,
+      handler() {
+        const has = this.lineStyleListShow.find(item => {
+          return item.value === this.style.lineStyle
+        })
+        if (!has) {
+          this.style.lineStyle = this.lineStyleListShow[0].value
+        }
+      }
    }
  },
  created() {
@ -991,6 +1065,7 @@ export default {
        'lineStyle',
        'showLineMarker',
        'rootLineKeepSameInCurve',
+        'lineRadius',
        'lineColor',
        'generalizationLineWidth',
        'generalizationLineColor',
--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@ -36,6 +36,7 @@ import xmind from 'simple-mind-map/src/parse/xmind.js'
 import markdown from 'simple-mind-map/src/parse/markdown.js'
 import { fileToBuffer } from '@/utils'
 import { read, utils } from 'xlsx'
+import { mapMutations } from 'vuex'

 /**
 * @Author: 王林
@ -66,6 +67,8 @@ export default {
    this.$bus.$off('handle_file_url', this.handleFileURL)
  },
  methods: {
+    ...mapMutations(['setActiveSidebar']),
+
    handleShowImport() {
      this.dialogVisible = true
    },
@ -153,6 +156,7 @@ export default {
        this.handleMd(file)
      }
      this.cancel()
+      this.setActiveSidebar(null)
    },

    /**